Prendi un qualsiasi modulo che chiede ai visitatori di scegliere da un elenco di opzioni e noterai una cosa. Il modulo non fallisce perché fa troppe domande. Fallisce perché qualcuno ha scelto il tipo di input sbagliato per quella domanda. Un menu a tendina dove i radio button sarebbero stati più rapidi. Checkbox dove ha senso una sola risposta. Radio button dove un menu a tendina avrebbe risparmiato metà dello schermo.
Non sono dettagli da poco. Le ricerche mostrano che la scelta del tipo di input è uno dei motivi principali per cui i visitatori abbandonano i moduli. Un'unica scelta sbagliata tra menu a tendina, radio button o checkbox può far salire il tasso di abbandono del modulo del 15% o più. Il visitatore non è confuso perché non riesce a decidere. È confuso perché il tipo di input che hai scelto manda il segnale sbagliato su ciò che il modulo si aspetta.
Questo articolo spiega le regole pratiche per scegliere tra menu a tendina, radio button e checkbox. Scoprirai quale tipo di input funziona meglio nei diversi scenari, che cosa comunica ciascuno al visitatore e come evitare gli errori che fanno abbandonare i moduli. Padroneggia queste scelte e capirai perché alcuni brand ottengono tassi di compilazione molto più alti sullo stesso modulo cambiando solo un tipo di input.
Perché il tipo di input che scegli incide sulla compilazione più di quanto pensi
Un menu a tendina, un radio button e un checkbox raccolgono tutti una scelta da un elenco. In superficie sembrano intercambiabili. Le differenze sono sottili. L'impatto no.
Quando un visitatore vede un menu a tendina, sa che deve cliccare per vedere le opzioni. Le opzioni restano nascoste finché non clicca. Serve un passaggio in più. Quando vede dei radio button, le opzioni sono visibili subito. Può scorrerle tutte insieme e fare la sua scelta senza cliccare prima. Quando vede un checkbox, capisce che può selezionare più elementi, non solo uno.
Queste differenze cambiano il modo in cui i visitatori usano il modulo. Cambiano il carico mentale. Cambiano la velocità con cui qualcuno decide. Cambiano la sensazione che il modulo sia semplice o opprimente. Farlo bene significa meno persone che abbandonano il modulo. Farlo male significa visitatori che se ne vanno perché il modulo non sembra intuitivo, anche se tecnicamente funziona.
L'errore peggiore è usare il tipo di input sbagliato per la situazione. Un menu a tendina per due scelte sembra esagerato. Dei radio button per 15 opzioni sembrano disordinati e opprimenti. Dei checkbox quando si dovrebbe scegliere una sola opzione creano confusione su ciò che si può selezionare. Ogni scelta sbagliata ti costa conversioni.
I menu a tendina funzionano meglio per liste lunghe in cui il valore predefinito non conta
Un menu a tendina è un campo che nasconde le opzioni finché qualcuno non clicca per aprirlo. La scelta è nascosta dietro un clic. Questo rende i menu a tendina perfetti per una situazione precisa: hai molte opzioni e lo spazio sullo schermo è poco.
Usa un menu a tendina quando hai più di sette opzioni. Oltre questo numero, mostrare tutte le opzioni come radio button o checkbox rende il modulo disordinato. Un menu a tendina riduce tutte quelle opzioni a un solo campo che occupa pochissimo spazio verticale. Per questo i menu a tendina sono lo standard nei moduli per dispositivi mobili. Lo schermo di un telefono è stretto. I menu a tendina risparmiano spazio.
I menu a tendina funzionano bene anche quando la scelta è ovvia e il visitatore ha già in mente la risposta. Pensa alla scelta di un paese o di una provincia. Quasi tutti sanno subito quale vogliono. Possono digitare la prima lettera per saltare all'opzione, oppure cliccare e scorrere per trovarla. L'interazione è veloce perché la domanda è facile.
Ma ecco dove i menu a tendina falliscono. Falliscono quando i visitatori devono confrontare le opzioni prima di decidere. Falliscono quando l'elenco è ordinato in un modo che i visitatori non si aspettano. Falliscono quando non c'è un valore predefinito e il visitatore deve cliccare solo per vedere quali opzioni esistono.
Un esempio: un modulo che chiede ai visitatori di scegliere una preferenza di menu con un menu a tendina. Le opzioni sono in ordine sparso (pesce, vegetariano, pollo, manzo, vegano, senza glutine). Il visitatore non sa quali opzioni esistano senza cliccare. Quando clicca e vede l'elenco, deve elaborarle tutte per decidere. Non può vederle tutte insieme per confrontarle. Ci vuole più tempo che se le opzioni fossero visibili come radio button. Una ricerca di un gruppo di esperti di usabilità mostra che i menu a tendina rallentano le decisioni quando gli utenti devono valutare più opzioni.
Usa i menu a tendina quando i visitatori sanno che cosa cercano e le opzioni sono molte. Evitali quando i visitatori devono confrontare le opzioni o quando le scelte sono meno di sette.
I radio button hanno senso quando le opzioni sono da due a cinque
Un radio button mostra un cerchietto accanto a ogni opzione. Quando qualcuno ne clicca uno, gli altri si deselezionano da soli. Si può selezionare una sola opzione alla volta. Per questo si chiamano "radio" button, come le vecchie autoradio in cui premere il tasto di una nuova stazione faceva scattare indietro quello precedente.
I radio button funzionano benissimo quando i visitatori hanno un insieme di scelte piccolo e chiaro. Se il tuo modulo chiede di scegliere un piano di abbonamento e offri tre livelli, i radio button sono la scelta perfetta. Il visitatore vede tutti e tre insieme. Può confrontare prezzi, funzioni e vantaggi a colpo d'occhio. Ne clicca uno. Fatto. Nessuna opzione nascosta. Nessuna confusione.
I radio button funzionano bene anche quando un'opzione è chiaramente quella predefinita o la più popolare. Immagina un modulo che chiede ai visitatori come hanno conosciuto il tuo brand. Offri cinque opzioni e quasi tutti scelgono "Ricerca su Google". Se i radio button sono visibili, chi ti ha trovato con Google vede subito la sua risposta e la clicca. Non deve aprire un menu a tendina chiedendosi se la sua risposta c'è nell'elenco.
La ricerca sull'usabilità è chiara. Quando le opzioni sono visibili, le persone decidono più in fretta. Quando le persone vedono tutte le scelte senza un clic in più, i tassi di compilazione salgono. Per questo i radio button battono i menu a tendina sulle liste più piccole.
I radio button iniziano a sembrare disordinati intorno a cinque o sei opzioni. Con più di sette, il modulo sembra opprimente. Ogni radio button occupa spazio verticale. Un modulo con otto radio button per "Qual è il tuo interesse principale?" sembra molto più lungo del necessario. A questo punto un menu a tendina ha più senso.
Usa i radio button quando hai da due a cinque opzioni e i visitatori traggono vantaggio dal confrontarle. Evitali per più di sette opzioni.
I checkbox servono per le scelte in cui più risposte sono giuste
Un checkbox sembra un piccolo quadrato. Quando lo clicchi, mostra una spunta. A differenza dei radio button, più checkbox dello stesso gruppo possono essere spuntati contemporaneamente. È questa la differenza chiave. I checkbox non sono alternative l'uno all'altro. Sono scelte indipendenti.
I checkbox funzionano quando la domanda ammette più di una risposta. Un modulo che chiede "Quali di queste funzioni ti interessano?" usa i checkbox perché un visitatore può scegliere analisi del prodotto, feedback dei clienti e integrazione dell'automazione, tutto insieme. Ogni checkbox è una scelta indipendente, non un'alternativa agli altri.
I checkbox funzionano anche per le dichiarazioni di consenso. "Accetto i termini e le condizioni" è un checkbox perché è un'affermazione da sì o no. Il visitatore accetta oppure no. Allo stesso modo, "Inviami aggiornamenti via email" è un singolo checkbox perché rappresenta una sola scelta.
La confusione nasce quando si usano i checkbox al posto dei radio button, o viceversa. Un modulo che chiede "Quale piano vuoi?" non dovrebbe usare i checkbox. Nessuno può volere tutti e tre i piani. Le scelte si escludono a vicenda. Qui i radio button sono quelli giusti.
I checkbox soffrono anche dello stesso problema di affollamento dei radio button. Più di sette o otto checkbox in un unico gruppo rendono il modulo opprimente. A vederli, molti checkbox sembrano tanto lavoro anche se il visitatore deve selezionare solo uno o due elementi.
Usa i checkbox solo quando i visitatori possono davvero selezionare più opzioni insieme. Evitali per le domande a risposta singola e raggruppa i checkbox numerosi in categorie più piccole e correlate.
Come decidere quando non sei sicuro di quale input usare
La decisione spesso è chiara. Ma a volte una domanda sta in una zona grigia. Hai cinque opzioni e non sai se stanno meglio i radio button o un menu a tendina. Ecco l'albero decisionale che funziona.
Passaggio 1. Il visitatore può selezionare più di una risposta? Se sì, usa i checkbox. Se no, passa al secondo passaggio.
Passaggio 2. Quante sono le opzioni? Meno di sei, passa al terzo passaggio. Più di sette, usa un menu a tendina.
Passaggio 3. I visitatori devono confrontare le opzioni per decidere? Se sì, usa i radio button, così tutte le opzioni sono visibili insieme. Se no e la risposta è ovvia, vanno bene sia i radio button sia un menu a tendina, ma i radio button saranno un po' più rapidi.
Questo semplice albero decisionale risolve il 90% delle domande sul tipo di input che sorgono quando si progettano i moduli. Nei casi in cui hai ancora dubbi, prova entrambe le opzioni con visitatori reali. Fai girare il modulo con i radio button per una settimana e misura il tasso di compilazione. Passa a un menu a tendina, fallo girare un'altra settimana e confronta. I dati reali dei tuoi visitatori battono qualsiasi regola di design, perché sono loro a compilare i tuoi moduli.
Errori comuni che affossano la compilazione senza che nessuno capisca perché
Il primo errore è usare un menu a tendina per due o tre opzioni. Succede più spesso di quanto pensi. Un modulo chiede "Come ci hai trovato?" e le opzioni sono "Motore di ricerca", "Social media" e "Passaparola". Un menu a tendina nasconde queste opzioni. Il visitatore deve cliccare per vederle. Non sa quali opzioni esistano senza cliccare. Aggiunge attrito senza motivo. Qui i radio button sono più rapidi e sembrano più intuitivi.
Il secondo errore è mostrare otto o nove radio button quando un menu a tendina occuperebbe un decimo dello spazio. Un modulo chiede ai visitatori di scegliere il paese da un elenco di 195 paesi. I radio button scorrerebbero all'infinito. Un menu a tendina con ricerca e completamento automatico risolve subito il problema. Alcuni designer restano sui radio button perché li trovano più intuitivi, senza rendersi conto che l'intuitività sparisce quando bisogna scorrere 50 opzioni.
Il terzo errore è usare i checkbox per una domanda a risposta singola. Un modulo chiede "Qual è il tuo livello di abbonamento?" e mostra tre checkbox, uno per piano. I visitatori si confondono. Possono selezionarli tutti e tre? Il checkbox manda il segnale sbagliato. I radio button sono più chiari perché comunicano visivamente che se ne può selezionare solo uno.
Il quarto errore è non dare istruzioni chiare su che cosa significa un campo. Compare un gruppo di checkbox con l'etichetta "Interessi" e nessuna spiegazione. Il visitatore non sa se deve selezionarne solo uno o quanti ne vuole. Quando c'è ambiguità, i tassi di compilazione calano. Etichette chiare risolvono il problema. "Seleziona tutte le risposte che valgono" o "Scegline una" dice al visitatore esattamente che cosa si aspetta il campo.
Il quinto errore è usare male i valori predefiniti. Un menu a tendina che parte con "Seleziona un'opzione" come valore predefinito sembra rotto. Un menu a tendina che parte con "Stati Uniti" come valore predefinito sembra utile se è lì che si trova la maggior parte dei visitatori. I radio button che partono senza nessuna selezione obbligano il visitatore a cliccarne uno. I radio button che partono con la risposta più comune già selezionata fanno risparmiare un clic. Questi piccoli valori predefiniti si sommano lungo tutto il modulo.
Considerazioni sui dispositivi mobili che cambiano la scelta del tipo di input
I telefoni sono più piccoli. Questo cambia la scelta del tipo di input in modo significativo.
Su desktop, tre radio button per una scelta semplice sembrano naturali e rapidi. Su mobile, quegli stessi tre radio button sono impilati in verticale e occupano più spazio di un menu a tendina. La decisione potrebbe ribaltarsi.
Anche i visitatori da mobile interagiscono in modo diverso. Usano i pollici per toccare, non clic precisi del mouse. Un checkbox di 44 per 44 pixel è la dimensione minima comoda. Qualsiasi cosa più piccola diventa difficile da toccare con precisione. Radio button e checkbox hanno bisogno di abbastanza spazio intorno, in modo che toccarne uno non faccia toccare per errore l'opzione accanto.
Su mobile i menu a tendina di solito vengono gestiti dal menu di selezione nativo del dispositivo. Quando un visitatore tocca un menu a tendina su uno smartphone, vede un selettore ottimizzato per il mobile. Spesso è più veloce e comodo che scorrere un lungo elenco nella pagina stessa.
Nei moduli per mobile, i menu a tendina diventano più interessanti perché lo spazio sullo schermo è prezioso. I radio button restano buoni per due-quattro scelte perché sono rapidi da toccare. Ma sei opzioni come radio button sembrano uno scorrimento infinito. Le stesse sei opzioni in un menu a tendina sono più pulite e veloci su un telefono.
Prova i tuoi moduli su mobile. La decisione che sembrava giusta su desktop può sembrare diversa quando qualcuno compila il tuo modulo su uno schermo di telefono da quattro pollici.
Requisiti di accessibilità che ogni tipo di input deve rispettare
Menu a tendina, radio button e checkbox devono tutti rispettare gli standard di accessibilità, così chi usa screen reader o la navigazione da tastiera può compilare il modulo con successo.
Ogni gruppo di radio button o checkbox ha bisogno di un'etichetta fieldset che spieghi a che cosa serve il gruppo. Quando chi usa uno screen reader entra nel gruppo con il tasto Tab, sente l'etichetta e capisce da che cosa sta scegliendo. Senza, sente solo "Radio button uno, radio button due" senza alcun contesto.
Ogni singola opzione ha bisogno di un'etichetta visibile e cliccabile, non solo di un piccolo radio button o checkbox. Quando un visitatore deve cliccare esattamente sul quadratino del checkbox per selezionarlo, chi ha un controllo motorio meno preciso fa fatica. Quando può cliccare sull'etichetta accanto al checkbox, la selezione diventa più facile per tutti. Non è una funzione di accessibilità solo per le persone con disabilità. Rende i moduli più facili per tutti.
Anche i menu a tendina hanno bisogno di un'etichetta chiara. L'etichetta deve stare sopra o a sinistra del campo. L'opzione selezionata deve essere sempre visibile nel menu chiuso. Quando un menu a tendina si chiude dopo la selezione e mostra il valore scelto, il visitatore sa che la sua scelta è stata registrata.
Chi usa la tastiera deve poter navigare nei moduli con i tasti Tab e le frecce. I radio button devono permettere di spostarsi tra le opzioni con le frecce. I checkbox devono potersi selezionare con la barra spaziatrice. I menu a tendina devono aprirsi e chiudersi con comandi da tastiera. Se il tuo modulo richiede un clic del mouse per una qualsiasi di queste azioni, chi usa la tastiera resta bloccato.
Il solo colore non può indicare lo stato selezionato. Un menu a tendina con un'opzione evidenziata usa il colore per mostrare che cosa è selezionato. È utile. Ma anche chi non vede i colori deve poter capire che cosa è selezionato, con una spunta, un'icona o un indicatore visivo che non dipenda solo dal colore.
Come i tipi di input dei campi influenzano la percezione del tuo brand
Il tipo di input che scegli comunica al visitatore quanto lo capisci.
Un menu a tendina per due o tre opzioni segnala che chi ha progettato il modulo non ha pensato molto all'esperienza d'uso. Aggiunge un clic inutile. Il visitatore se ne accorge. Lo sente come attrito.
Dei radio button dove un menu a tendina avrebbe dimezzato la lunghezza del modulo segnalano la stessa cosa. Il modulo sembra progettato male.
Ma un modulo che ha chiaramente pensato all'esperienza d'uso, che rende ovvie le scelte rapide e chiare le selezioni multiple, segnala altro. Segnala che questo brand tiene al tempo del visitatore. Segnala che qualcuno ha pensato al modulo con cura. Non è solo una migliore usabilità. È una migliore percezione del brand.
Piccole decisioni come queste si sommano. Un visitatore compila il tuo modulo e ogni campo gli sembra intuitivo. Finisce più in fretta del previsto. Si sente bene dopo l'interazione. Quella sensazione si riflette su come percepisce il tuo brand.