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
Testo
Container
Stati
Active: L’elemento è attivo e disponibile
Disabled: L’elemento non è attivo, quindi inutilizzabile
Hover: Il cursore è sopra l’elemento ma non è stata compiuta nessuna azione
Pressed: Nel momento in cui l’elemento viene premuto
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.
