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

  1. Track
  2. Thumb


Stati

  • On: Elemento attivato
  • Off: Elemento disattivato

Ognuno di questi stati può presentarsi a sua volta

  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. Focused: L’elemento è stato selezionato tramite un input come la tastiera o un comando vocale
  5. 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.