Il design dei bottoni

L’attenzione al dettaglio è sicuramente un punto focale dei nostri progetti. Oggi discuteremo di alcune tecniche per progettare dei bottoni che i nostri utenti vogliano cliccare. Anche se si tratta di uno dei particolari più piccoli all’interno dei nostri siti, è certamente quello più importante. D’altronde come faremmo altrimenti ad indirizzare l’utente attraverso quel ciclo di azioni che vogliamo fargli compiere?

 

Deve sembrare toccabile

Sembra un’affermazione banale, ma spesso questa necessità viene ignorata. Gli utenti dovrebbero vedere un bottone e immediatamente pensare “voglio cliccarlo”.

Mentre (quasi) ogni dimensione è cliccabile sullo schermo di un PC, la dimensione e le spaziature di un tasto su un dispositivo mobile è una componente vitale. Mediamente la larghezza di un polpastrello va dagli 8 ai 10 millimetri. Una dimensione di un centimetro quadrato diventa quindi la minima dimensione ottimale sullo schermo di uno smartphone (o di un tablet).

Ci sono altri dettagli che possono invitare l’utente al click:

  • Un ombra appena visibile può dare l’idea che l’oggetto si trovi più vicino all’utente.
  • Un’abbondante spaziatura attorno al testo (o all’icona), rende il bottone più semplice da premere.
  • Il cambio di colore applicato durante il passaggio del mouse e durante il tocco, funge da feedback per l’utente.

 

Il colore è importante

Il colore di un bottone deve essere particolare. Si tratta del luogo migliore per sperimentare con i colori d’accento.

Il colore di un bottone dev’essere luminoso e attraente. Bottoni di colore giallo, blu o verde sono più semplici da individuare all’interno del layout. La scelta migliore per il colore di un bottone ricade sul colore complementare a quello che troviamo in maggior misura nel nostro sito. Non dimentichiamo però di assecondare i colori del brand. Per quanto un colore sia visibile all’interno del nostro progetto, deve accompagnare degnamente i colori della nostra palette.

 

La dimensione è ancora più importante

Fallo grande!

I bottoni devono attirare subito l’attenzione. Ma attenzione, c’è una sottilissima linea tra la dimensione perfetta e l’eccesso. Quando il bottone diventa l’unica cosa visibile all’interno del layout, è meglio rivederne le dimensioni.

 

Il posizionamento

Dove dovrei inserirlo? Esiste un posto che mi aiuti a generare più click? Nella maggior parte dei casi dovrebbe accompagnare il contenuto a cui fa da complemento:

  • Al termine di un form
  • Alla destra di una Call To Action
  • Nel fondo della pagina o dell schermo
  • Centrato al di sotto di un messaggio

Queste posizioni funzionano perché seguono l’associazione logica e il pattern di lettura utilizzato dalla maggior parte degli utenti.

 

Utilizza forme standard

Quando si tratta di bottoni ci sono forme che funzionano meglio di altre. Gli utenti che navigano i nostri siti sono più portati ad utilizzare strumenti immediatamente riconoscibili per la loro funzione. Si tratta di familiarità. Perciò utilizza sempre:

  1. Rettangoli: Questa è la forma base utilizzata dalla maggior parte dei web designer. Alcuni preferiscono utilizzare dei bordi arrotondati mentre altri tendono a mantenerne la forma. Si tratta di scelte stilistiche che non cambiano la eccessivamente la riconoscibilità della forma se assecondano l’estetica del progetto.
  2. Cerchi: Diventati popolari con il concept di Material Design. Funzionano bene per azioni standardizzate comunicabili con l’utilizzo di un’icona (es. social share).

 

Dì all’utente cosa deve fare

Ogni bottone (o quasi) dovrebbe includere un’istruzione testuale che dica esattamente all’utente cosa succederà dopo che lo avrà cliccato. L’ideale è utilizzare un linguaggio semplice e sintetico e ricorda, il primo messaggio che l’utente dovrà ricevere dopo aver cliccato dovrà confermare il successo dell’azione effettuata. Che stia inviando un form, facendo un acquisto o che stia semplicemente seguendo un link.

 

 

Un buon modo per capire come funzionano i tasti presenti sul proprio sito è quello di monitorare le azioni degli utenti con strumenti specifici. In base alle loro azioni possiamo capire come determinate forme, colori o testi influenzano i click degli utenti. Tutto dipende dai nostri visitatori. Se una grossa percentuale della nostra utenza visita il nostro sito con uno smartphone, dovremmo tenerne conto e modificare il nostro progetto per assecondare questa tendenza.

 

credits: designshack.net