I bottoni sono gli imperative control per eccellenza: sono visibili, contengono in modo esplicito il verbo che scatena l’azione di cui l’utente vede l’effetto immediato, e sono estremamente facili da riconoscere anche per un utente alle prime armi. Si tende a raggrupparli in modo semantico ma, visto che possono occupare molto spazio, in alcuni casi se ne utilizza uno solo, ben visibile all’utente, e con la chiara indicazione dell’azione che svolge.

 

Come aiuta l’utente

Nel disegnare i bottoni è importante tenere conto dell’affordance: quando l’utente interagisce con essi tramite click, tap, o mouse hover, deve essere chiaro che sono elementi cliccabili. Si presentano spesso in forma rettangolare, al massimo con gli angoli arrotondati, e all’inizio veniva applicato l’effetto finto 3D per ricordare l’interazione fisica. È fondamentale la progettazione dei vari stati in cui si può trovare per migliorarne la comprensione, anche se ormai l’uso costante ha abituato gli utenti al loro comportamento anche in caso di feedback meno ricchi.

 

Anatomia

 

  1. Testo
  2. Container

 

Stati


 

  1. Active: L’elemento è attivo e disponibile
  2. Disabled: L’elemento non è attivo, quindi inutilizzabile
  3. Hover: Il cursore è sopra l’elemento ma non è stata compiuta nessuna azione
  4. Pressed: Nel momento in cui l’elemento viene premuto
  5. Focused: L’elemento è stato selezionato tramite un input come la tastiera o un comando vocale 

Accessibilità e usabilità

  • Attenzione al contrasto tra il container e il testo.
  • Attenzione a differenziare i vari stati in modo che siano distinguibili e comprensibili.
  • Dimensioni minime perché sia cliccabile.
  • Fitts’ law.
  • In caso di text button, attenzione a differenziarlo da un hyperlink. Approfondiamo meglio nella nota Bottone o hyperlink.