Web Design: come progettare pulsanti efficaci

E-commerce

Web Design: come progettare pulsanti efficaci

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

Progettare pulsanti efficaci per un sito web: la forma

Una certezza sull’efficacia è 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à con questa forma.
Si può naturalmente essere più creativi e utilizzare altre forme (ad esempio: cerchi, triangoli o forme personalizzate), ma è necessario assicurarsi che gli utenti identifichino facilmente ogni forma variabile come pulsante, mantenendo quindi la coerenza di forma tra tutti i pulsanti. Questo aspetto è importante perché gli utenti ricordano i dettagli, consapevolmente o meno.

Etichette chiare e distintive

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

La posizione del pulsante

Importante è inserire i pulsanti dove gli utenti possono trovarli con facilità. Per questo motivo, bisognerà studiare e seguire il flusso di lettura della pagina, pensando a quale posizionamento possa essere più funzionale ed efficace per gli utenti, magari facendo prima un test.

Dimensione e spaziatura

Considerare quanto grande sia un pulsante in relazione agli altri elementi della pagina è senza dubbio  un aspetto di non poco conto quando si deve progettare un pulsante efficace.

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

 

Evidenzia i pulsanti principali

Un web designer dovrebbe anche assicurarsi che il pulsante metta l’accento sull’azione primaria o più importante. Per far questo dovrà 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à di notarlo.

La Call to Action

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, è necessario utilizzare i colori con un elevato contrasto in relazione allo sfondo e posizionare il pulsante nel percorso di lettura dell’utente.
Se esaminiamo l’interfaccia utente di Gmail , questa  – come si può notare – appare molto semplice e quasi monocromatica, ad eccezione del pulsante ‘Invia’.
Appena gli utenti finiscono di scrivere un messaggio, immediatamente notano questo pulsante blu.
Allo stesso modo ci si comporta per i siti web.

Distinzione tra pulsanti primari e secondari

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

Conclusioni

I pulsanti, per i vari strumenti websono elementi fondamentali per creare un’interfaccia utente chiara e semplice da utilizzare ed è per questo motivo che è importate curarne ogni aspetto.
Ecco di seguito alcune domande che un web designer dovrebbe porsi per assicurarsi di ottenere pulsanti utili per una UI efficace:

  • Gli utenti identificano  elemento come pulsante?
  • L’etichetta del pulsante fornisce un messaggio chiaro su cosa accadrà dopo un click?
  • L’utente può facilmente trovare il pulsante?
  • Se si dispone di due o più pulsanti (ad es. finestra di dialogo o scelta tra azioni opposte), il pulsante con l’azione principale ha il peso visivo più forte?

Scopri il master in web design di It School.



ArabicChinese (Simplified)DutchEnglishFrenchGermanItalianPortugueseRussianSpanish