Il toggle button si presenta come un bottone ma si differenzia dagli altri per la possibilità di rimanere in stato pressed.
In un gruppo composto da più toggle si può avere un comportamento di selezione mutuamente esclusiva, in cui è attivo un solo toggle per gruppo, oppure avere la possibilità di tenerne premuto più di uno alla volta.
Come questo pattern aiuta l’utente
Grazie alla loro forma compatta e la possibilità di mostrare tutte le scelte disponibili a colpo d’occhio, i toggle sono elementi spesso utilizzati all’interno di toolbar o, più in generale, quando l’utente deve effettuare una scelta senza interrompere il flusso di lavoro, lasciando sempre visibile la selezione effettuata.
Nei casi in cui è presente solo l’icona, è consigliato usare i tooltip per chiarirne il significato.
Anatomia
- Container
- Icona o testo
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
- Focused: L’elemento è stato selezionato tramite un input come la tastiera o un comando vocale
- Pressed: L’elemento rimane premuto in modo continuativo
Affordance e usabilità
- In caso di più toggle button presenti, è importante raggrupparli per funzionalità e rendere chiari i gruppi di opzioni.
- Limitare il numero di opzioni disponibili.
- Aggiungere lo stato pressed può rendere l’interazione più accurata.
Extra
Per questo elemento bisogna segnalare due casistiche particolari a cui prestare attenzione.
La prima riguarda la nomenclatura: spesso viene utilizzato il termine generico “toggle” per indicare lo Switch, un altro tipo di selection control con una struttura molto diversa e utilizzato in altri contesti.
La seconda riguarda le possibili implementazioni di questo pattern. Apple, ad esempio, parla di segmented controls con funzionamento toggle button, mentre Google fa una distinzione tra toggle button e choice chips che rimane puramente visiva pur condividendo lo stesso comportamento (tanto che le considera alternative).
