{"id":7720,"date":"2017-11-29T16:44:06","date_gmt":"2017-11-29T15:44:06","guid":{"rendered":"https:\/\/www.itschool.it\/?p=7720"},"modified":"2018-01-05T12:17:53","modified_gmt":"2018-01-05T11:17:53","slug":"progettare-pulsanti-efficaci","status":"publish","type":"post","link":"https:\/\/www.itschool.it\/progettare-pulsanti-efficaci\/","title":{"rendered":"Web Design: come progettare pulsanti efficaci"},"content":{"rendered":"

I pulsanti<\/strong> sono un elemento comune nell’interfaccia utente di un sito o di un’applicazione, e sono tra gli elementi pi\u00f9 importanti da creare nell’UI design <\/strong>(ovvero nel progetto dell’interfaccia utente).
\nIn questo articolo ci occuperemo degli aspetti essenziali da considerare per progettare pulsanti efficaci<\/strong> che migliorino l’esperienza utente e che indirizzino gli utenti a compiere azioni specifiche.
\nMa come fanno gli utenti a comprendere che un determinato elemento \u00e8 un pulsante? La risposta \u00e8 semplice: tramite le indicazioni visive che aiutano a determinare la possibilit\u00e0 di cliccare.
\n\u00c8 importante utilizzare determinate caratteristiche grafiche sugli elementi per farli apparire come pulsanti<\/strong>.\"\"<\/a><\/p>\n

Progettare pulsanti efficaci per un sito web: la forma<\/h2>\n

Una certezza sull’efficacia \u00e8 rendere i pulsanti rettangolari, anche con angoli arrotondati, a seconda dello stile del sito o dell’app. I tasti a forma rettangolare sono stati introdotti nel mondo digitale molto tempo fa e gli utenti hanno molta familiarit\u00e0 con questa forma.
\nSi pu\u00f2 naturalmente essere pi\u00f9 creativi e utilizzare altre forme (ad esempio: cerchi, triangoli o forme personalizzate), ma \u00e8 necessario assicurarsi che gli utenti identifichino facilmente ogni forma variabile come pulsante, mantenendo quindi la coerenza di forma tra tutti i pulsanti. Questo aspetto \u00e8 importante perch\u00e9 gli utenti ricordano i dettagli, consapevolmente o meno.<\/p>\n

Etichette chiare e distintive<\/h2>\n

Gli utenti evitano gli elementi di interfaccia senza un chiaro significato. Ogni pulsante dell’interfaccia utente deve avere un’etichetta o un’icona appropriata.
\nL’etichetta di un pulsante deve dire esattamente cosa accadr\u00e0 quando l’utente ci cliccher\u00e0 sopra. Un’etichetta poco chiara significher\u00e0 molto probabilmente che l’utente non concluder\u00e0 l’azione.
\nUn esempio significativo pu\u00f2 essere dato dal pulsante di Amazon \u00e8 significativo: questo presenta una specifica etichetta “Crea il tuo account Amazon”, e non usa espressioni generiche come “Crea” o “Invia”.<\/p>\n

La posizione del pulsante<\/h2>\n

Importante \u00e8 inserire i pulsanti dove gli utenti possono trovarli con facilit\u00e0. Per questo motivo, bisogner\u00e0 studiare e seguire il flusso di lettura della pagina, pensando a quale posizionamento possa essere pi\u00f9 funzionale ed efficace per gli utenti, magari facendo prima un test.<\/p>\n

Dimensione e spaziatura<\/h2>\n

Considerare quanto grande sia un pulsante in relazione agli altri elementi della pagina \u00e8 senza dubbio\u00a0 un aspetto di non poco conto quando si deve progettare un pulsante efficace.<\/p>\n

La ricerca MIT Touch Lab<\/strong>, svolta all’universit\u00e0 di Cambridge, ha scoperto che la dimensione media dei polpastrelli delle dita \u00e8 tra 10-14 mm e le punte delle dita sono di 8-10 mm, quindi 10 mm x 10 mm \u00e8 una buona dimensione minima per pulsanti comodi.
\nQuando un mouse e una tastiera sono i metodi di input primari, le misure dei pulsanti possono essere leggermente ridotte per soddisfare una corretta usabilit\u00e0.
\nFondamentale \u00e8 anche la distanza tra i diversi elementi cliccabili: il padding<\/strong> aiuta a separare i controlli e dona all’interfaccia utente il giusto equilibrio.<\/p>\n

 <\/p>\n

Evidenzia i pulsanti principali<\/h2>\n

Un web designer dovrebbe anche assicurarsi che il pulsante metta l’accento sull’azione primaria o pi\u00f9 importante. Per far questo dovr\u00e0 fare attenzione al colore e al contrasto, per mantenere l’attenzione dell’utente sull’azione principale e posizionare il pulsante in luoghi di primo piano, dove gli utenti hanno maggiori probabilit\u00e0 di notarlo.<\/p>\n

La Call to Action<\/h2>\n

I pulsanti importanti, come le CTA, sono destinati ad indirizzare gli utenti a compiere l’azione voluta. Per creare un pulsante efficace di chiamata all’azione, che catturi l’attenzione dell’utente e lo inviti a cliccare, \u00e8 necessario utilizzare i colori con un elevato contrasto in relazione allo sfondo e posizionare il pulsante nel percorso di lettura dell’utente.
\nSe esaminiamo l’interfaccia utente di Gmail , questa\u00a0 – come si pu\u00f2 notare – appare molto semplice e quasi monocromatica, ad eccezione del pulsante ‘Invia’.
\nAppena gli utenti finiscono di scrivere un messaggio, immediatamente notano questo pulsante blu.
\nAllo stesso modo ci si comporta per i siti web.<\/p>\n

Distinzione tra pulsanti primari e secondari<\/h2>\n

Quando si sceglie tra azioni primarie e secondarie, le distinzioni visive sono un metodo fondamentale per indirizzare l’utente a compiere determinate azioni.
\nL’azione positiva primaria associata ad un pulsante deve avere un peso visivo pi\u00f9 forte. Dovrebbe essere il pulsante visivo dominante.
\nLe azioni secondarie (ad es. opzioni come “Annulla”) dovrebbero avere il peso visivo pi\u00f9 debole, poich\u00e8 riducendo l’importanza visiva delle azioni secondarie, si riduce al minimo il rischio di errori e si indirizza l’utente verso il risultato prescelto.<\/p>\n

Conclusioni<\/h2>\n

I pulsanti,<\/strong>\u00a0per i vari strumenti web,\u00a0<\/strong>sono elementi fondamentali per creare un’interfaccia utente chiara e semplice da utilizzare ed \u00e8 per questo motivo che \u00e8 importate curarne ogni aspetto.
\nEcco di seguito alcune domande che un web designer dovrebbe porsi per assicurarsi di ottenere pulsanti utili per una UI efficace:<\/p>\n