Lo switch mostra lo stato di un elemento ed è strutturato in modo da poter fare una scelta mutuamente esclusiva tra due stati opposti, generalmente “on” e “off”.
Come aiuta l’utente
Questo pattern viene utilizzato per gestire liste di funzionalità che possono essere attivate e disattivate, fornendo un feedback immediato e senza che l’utente debba confermare la scelta fatta attraverso, ad esempio, un bottone “Salva”.
Risulta comodo nelle app, in particolare nelle schermate di impostazioni in cui si possono accendere o spegnere funzionalità. Si trova anche in applicazioni web ma risulta più scomodo da utilizzare.
Anatomia
- Track
- Thumb
Stati
- On: Elemento attivato
- Off: Elemento disattivato
Ognuno di questi stati può presentarsi a sua volta
- 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: Nel momento in cui l’elemento viene premuto
Affordance e usabilità
- Data la struttura visivamente più ingombrante di un elemento checkbox, meglio evitare di utilizzare uno switch per controllare un solo dettaglio o funzionalità. Funziona invece molto bene in caso di gruppi di impostazioni.
- È preferibile rimanere fedeli alla convenzione per cui lo stato “on” è colorato, e lo stato “off” è grigio.
