Un interruttore sembra semplice. Un piccolo switch che passa da acceso a spento. Eppure i campi a interruttore confondono gli utenti più di quasi ogni altro elemento di un modulo. Le persone esitano. Non sanno se spostare l'interruttore cambierà subito qualcosa o se bisogna aspettare il pulsante di invio. Non sanno quale lato significa sì e quale no. Un solo interruttore messo male in un modulo può affossare i tassi di compilazione. L'interruttore giusto nel posto giusto diventa invisibile.
Prendi un qualsiasi modulo che usa interruttori e guarda che cosa fanno davvero le persone. Si muovono lentamente. Ci passano sopra. Tornano indietro a controllare che cosa controlla l'interruttore. Cercano i pulsanti di invio perché non sono sicure che la modifica dell'interruttore abbia avuto effetto. Non sono errori degli utenti. Sono problemi di design. Interruttori e switch hanno un compito preciso nei moduli. Fanno bene una cosa. Non fanno tutto. Capire quando gli interruttori ci stanno e quando no è la differenza tra un modulo che scorre e un modulo che confonde.
Il problema di chiamare tutto interruttore
La parola interruttore ha un significato preciso. Un interruttore è uno switch tra due stati opposti. O sei nello stato A o nello stato B. Niente nel mezzo. Nient'altro. Ma molti moduli chiamano interruttori le loro domande sì/no, anche se non lo sono. Una domanda come "Vuoi ricevere email promozionali?" non è un interruttore. È una domanda sì o no che appartiene a un modulo. Un vero interruttore è "Attiva la modalità scura." Lo switch cambia la tua esperienza subito. Il modulo non richiede un pulsante di invio perché la modifica abbia effetto.
Questa confusione crea un attrito reale. Metti un vero interruttore in mezzo a un modulo pieno di campi di testo e radio button. Gli utenti non sapranno se la modifica dell'interruttore è stata applicata subito o se devono ancora cliccare su invia. Potrebbero muovere l'interruttore, pensare che non sia successo niente, rimetterlo com'era e poi confondersi quando il modulo mostra lo stato opposto a quello che avevano scelto.
Quando un interruttore ha davvero senso in un modulo
Un interruttore appartiene a un modulo solo quando due condizioni sono vere insieme. Primo, la scelta deve essere binaria. Esattamente due stati. Sì o no. Acceso o spento. Nient'altro. Secondo, la scelta deve avere effetto subito, senza un pulsante di invio. L'utente sposta l'interruttore e lo stato cambia all'istante.
Nella maggior parte dei moduli, nessuna di queste due condizioni è vera. La maggior parte dei moduli richiede un pulsante di invio alla fine. Tutte le modifiche si applicano insieme quando qualcuno clicca su invia. Mettere un interruttore in un modulo con un pulsante di invio crea confusione perché l'interruttore sembra dover funzionare subito, ma l'intero modulo aspetta l'invio.
Gli interruttori funzionano nelle impostazioni. Gli interruttori funzionano nelle dashboard dell'account in cui ogni modifica è immediata. Gli interruttori non funzionano nei moduli standard in cui raccogli informazioni e chiedi di inviarle alla fine. Se il tuo modulo ha un pulsante di invio, le domande sì/no dovrebbero usare checkbox o radio button invece di interruttori.
Interruttore o checkbox nei campi dei moduli
La differenza visiva tra un interruttore e un checkbox è evidente. Ma ciò che conta è la differenza funzionale. Un checkbox è un controllo di modulo che aspetta l'invio. Puoi spuntare più checkbox. Puoi toglierli. Non succede niente finché non invii il modulo. Un interruttore è uno switch di stato che spesso cambia le cose subito. Il modulo non richiede l'invio perché la modifica abbia effetto.
Per questo la ricerca sull'usabilità mostra che gli utenti si confondono quando mescoli interruttori e checkbox nello stesso modulo. Gli interruttori che agiscono subito sono percepiti in modo completamente diverso dai checkbox che aspettano. Mescolarli manda segnali contrastanti su ciò che succede quando qualcuno interagisce con il modulo.
Se hai una domanda binaria sì/no in un modulo che richiede un pulsante di invio, usa un checkbox o una coppia di radio button. Entrambi sono familiari. Entrambi hanno senso nel contesto di un modulo. Gli utenti capiscono che stanno selezionando qualcosa che verrà inviato, non innescando una modifica immediata.
Quando usare i radio button invece di un interruttore
Un interruttore può mostrare solo uno stato alla volta. Vedi acceso o spento. Ma a volte gli utenti hanno bisogno di vedere entrambe le opzioni insieme per decidere. È qui che i radio button funzionano meglio di un interruttore.
Esempio: un modulo che chiede "Quale piano vuoi?" con le opzioni "Base" o "Premium". Potresti usare un interruttore per passare dall'una all'altra. Ma l'utente non può vedere i due piani affiancati. Deve spostare l'interruttore per vedere qual è l'altra opzione. Una coppia di radio button mostra entrambe le opzioni insieme. L'utente vede Base a sinistra e Premium a destra. Può confrontare e scegliere senza spostare nulla.
Ogni volta che vuoi che gli utenti confrontino due opzioni o vedano entrambe le scelte, usa i radio button. Ogni volta che l'interruttore è l'unico modo per passare da un'opzione all'altra e gli utenti non possono confrontarle, i radio button sono probabilmente una scelta migliore.
Come dare un'etichetta a un interruttore perché le persone capiscano cosa fa
Il problema più grande degli interruttori è l'etichetta. Molti designer usano solo "On" e "Off". Ma acceso e spento per che cosa? L'utente deve indovinare. Questo crea esitazione.
Ogni interruttore ha bisogno di un'etichetta chiara che descriva che cosa controlla. Non "On/Off." Qualcosa come "Attiva la modalità scura" o "Ricevi notifiche" o "Mostra le opzioni avanzate". L'etichetta dice all'utente che cosa succederà se sposta l'interruttore.
L'etichetta deve essere subito visibile e vicina all'interruttore. Se l'etichetta è lontana o piccola, gli utenti non la collegheranno allo switch. Lo sposteranno senza capire che cosa stanno cambiando.
Alcuni interruttori mostrano le etichette di acceso e spento direttamente sullo switch. "Sì" da un lato e "No" dall'altro. Può funzionare se le etichette sono grandi e chiare. Ma i test mostrano che le persone conoscono meno gli interruttori sì/no che quelli on/off. Se usi etichette sì/no, prova prima con i tuoi utenti. In generale, però, on/off è più chiaro di sì/no per gli interruttori.
Il problema di accessibilità degli interruttori
Gli interruttori creano problemi reali a chi usa gli screen reader. Un interruttore visivo ha senso per chi lo vede. Vede lo switch scorrere a destra e capisce che ora è acceso. Ma chi usa uno screen reader non sente nulla. L'interruttore non ha un'etichetta accessibile. L'utente non può capire in che stato sia l'interruttore. Non può capire che cosa controlli.
Costruire un interruttore accessibile richiede un attributo ARIA chiamato aria-pressed. Dice agli screen reader che l'elemento è un pulsante ed è premuto oppure no. Chi usa lo screen reader sente "Pulsante interruttore modalità scura, attualmente acceso." Senza aria-pressed, l'utente non sente nulla di sensato.
Anche con la configurazione ARIA corretta, gli interruttori non sono controlli di modulo naturali. Un checkbox è un controllo di modulo. Tutti sanno che cos'è un checkbox. Un interruttore è un controllo personalizzato che richiede JavaScript aggiuntivo. Per questo molti design di moduli accessibili saltano del tutto gli interruttori e usano i checkbox. I checkbox sono integrati in ogni browser. Funzionano con gli screen reader. Non richiedono JavaScript personalizzato. Funzionano e basta.
Contrasto dei colori e indicatori visivi contano per gli stati dell'interruttore
Un interruttore che si affida solo al colore per mostrare il suo stato non funziona per chi ha una vista debole o è daltonico. Se l'interruttore è verde quando è acceso e rosso quando è spento, un utente daltonico non può capire in che stato sia.
Ogni interruttore ha bisogno di più segnali visivi. Colore più forma. Colore più posizione. Colore più testo. La forma dell'interruttore deve cambiare posizione quando viene spostato. Il cerchio all'interno deve scorrere da sinistra a destra. Lo sfondo deve cambiare colore. Insieme, questi tre segnali creano ridondanza, così chi ha qualsiasi tipo di disabilità visiva riesce comunque a capire se l'interruttore è acceso o spento.
Le etichette di testo aggiungono un altro livello. Se l'interruttore ha un'etichetta on/off visibile sullo switch stesso, l'etichetta rafforza ciò che colore e posizione mostrano già. È una ridondanza visiva. Non è superflua. È accessibilità.
Le dimensioni contano per le aree di tocco
Un interruttore che sembra carino a 24 pixel di larghezza diventa un incubo su mobile. L'utente prova a toccarlo e colpisce la cosa sbagliata. Oppure lo tocca più volte perché non è sicuro che il primo tocco sia stato registrato.
La dimensione minima dell'area di tocco per qualsiasi elemento interattivo è 44x44 pixel. Un interruttore dovrebbe essere almeno così grande. Più grande è meglio, soprattutto su mobile. Un interruttore largo 60 pixel è molto più facile da toccare con precisione di uno da 30 pixel.
Non è una preferenza di design. È un requisito di accessibilità. Gli utenti con poca destrezza, tremori o semplicemente dita grosse su schermi piccoli hanno bisogno di interruttori abbastanza grandi da colpirli in modo affidabile.
Non mescolare interruttori e pulsanti di invio del modulo
È l'errore più grande. Un modulo con campi di testo, menu a tendina e altri campi standard ha un pulsante di invio in fondo. Tutte le modifiche si applicano quando l'utente clicca su invia. Ma al modulo viene aggiunto un interruttore, progettato per avere effetto subito senza invio. Il modello mentale dell'utente si rompe. Si aspetta che l'interruttore aspetti l'invio come i checkbox. Invece l'interruttore cambia subito. Pensa di aver sbagliato. Lo rimette com'era. Caos.
Se hai un modulo con un pulsante di invio, non usare interruttori. Usa i checkbox per le domande sì/no. Tutte le modifiche del modulo si applicheranno insieme quando l'utente clicca su invia. Il modulo ha senso. L'utente capisce il modello.
Gli interruttori appartengono alle dashboard, ai pannelli delle impostazioni e agli altri posti in cui ogni interazione è immediata. Non appartengono ai moduli che richiedono l'invio.
Come WEMASY gestisce gli interruttori nei moduli
Il creatore di moduli di WEMASY include gli interruttori come opzione per i campi del modulo. Se scegli di usare un interruttore, il creatore di moduli richiede un'etichetta chiara. L'interruttore è abbastanza grande per il tocco. Include gli attributi ARIA corretti per l'accessibilità. Il creatore di moduli ti avvisa anche se aggiungi un interruttore a un modulo che ha altri tipi di input e un pulsante di invio. Quell'avviso c'è per un motivo. Intercetta un vero problema di usabilità. Se vedi quell'avviso, passa a checkbox o radio button. I tuoi utenti ti ringrazieranno.