Allora qual è la differenza tra casella combinata, selezione multipla, casella di riepilogo e menu a discesa? Sebbene tutti questi componenti dell'interfaccia utente possano sembrare simili, hanno scopi diversi. La scelta spesso dipende dal numero di opzioni disponibili e dalla loro visibilità. Vediamo in cosa differiscono, a quale scopo servono e come scegliere quello giusto, evitando incomprensioni e aspettative errate lungo il percorso.
Non tutti i modelli di elenco sono uguali Tutti i componenti dell'interfaccia utente evidenziati sopra hanno esattamente una cosa in comune: supportano le interazioni degli utenti con gli elenchi. Tuttavia, lo fanno in modo leggermente diverso. Diamo un'occhiata a ciascuno, uno per uno:
Menu a discesa → l'elenco è nascosto finché non viene attivato. Casella combinata → digita per filtrare + seleziona 1 opzione. Selezione multipla → digita per filtrare + seleziona molte opzioni. Casella di riepilogo → tutte le opzioni dell'elenco visibili per impostazione predefinita (+ scorrimento). Doppia casella di riepilogo → sposta gli elementi tra 2 caselle di riepilogo.
In altre parole, Combobox combina un campo di immissione testo con un elenco a discesa, in modo che gli utenti possano digitare per filtrare e selezionare una singola opzione. Con Multiselect, gli utenti possono selezionare molte opzioni (spesso visualizzate come pillole o patatine). Le caselle di riepilogo visualizzano tutte le opzioni dell'elenco visibili per impostazione predefinita, spesso con lo scorrimento. È utile quando gli utenti hanno bisogno di vedere immediatamente tutte le scelte disponibili. La doppia casella di riepilogo (detta anche elenco di trasferimento) è una variante di una casella di riepilogo che consente agli utenti di spostare elementi tra due caselle di riepilogo (sinistra ↔ destra), in genere per la selezione collettiva. Non nascondere mai le opzioni utilizzate di frequente Come accennato in precedenza, la scelta del componente dell'interfaccia utente giusto dipende da 2 fattori: quante opzioni dell'elenco sono disponibili e se tutte queste opzioni devono essere visibili per impostazione predefinita. Tutti gli elenchi potrebbero avere anche strutture ad albero, nidificazione e selezione di gruppi.
C'è un principio che seguo da anni per qualsiasi componente dell'interfaccia utente: non nascondere mai le opzioni utilizzate di frequente. Se gli utenti fanno spesso affidamento su una particolare selezione, ha ben poco valore nascondergliela. Potremmo preselezionarlo o (se ci sono solo 2-3 opzioni utilizzate di frequente) mostrarle come chip o pulsanti e quindi mostrare il resto dell'elenco durante l'interazione. In generale, è una buona idea visualizzare sempre le opzioni più popolari, anche se ciò potrebbe ingombrare l'interfaccia utente. Come scegliere quale? Non tutti gli elenchi necessitano di un metodo di selezione complesso. Per elenchi con meno di 5 elementi, in genere funzionano meglio semplici pulsanti di opzione o caselle di controllo. Ma se gli utenti devono selezionare da un ampio elenco di opzioni (ad esempio, oltre 200 elementi), la casella combinata + la selezione multipla sono utili grazie al filtraggio più rapido (ad esempio, la selezione del paese).
Le caselle di riepilogo sono utili quando le persone devono accedere a più opzioni contemporaneamente, soprattutto se devono scegliere molte opzioni anche da quell'elenco. Potrebbero essere utili per i filtri utilizzati di frequente.
La doppia casella di riepilogo viene spesso trascurata e ignorata. Ma può essere molto utile per attività complesse, ad esempio la selezione in blocco o l'assegnazione di ruoli, attività, responsabilità. È l'unico componente dell'interfaccia utente che consente agli utenti di rivedere l'elenco completo di selezione affiancato all'elenco di origine prima di impegnarsi (chiamato anche "elenco di trasferimento"). In effetti, la doppia casella di riepilogo è spesso più veloce, più precisa e più accessibile del trascinamento della selezione. Considerazioni sull'usabilità Una nota importante da tenere presente è che tutti i tipi di elenco devono supportare la navigazione da tastiera (ad esempio, i tasti freccia ↑/↓) per l'accessibilità. Alcune persone si affidano quasi sempre alla tastiera per selezionare le opzioni una volta che iniziano a digitare.
Oltre a ciò:
Per gli elenchi con più di 7 opzioni, valuta la possibilità di aggiungere le funzionalità "Seleziona tutto" e "Cancella tutto" per semplificare l'interazione dell'utente. Per elenchi lunghi con una casella combinata, esponi tutte le opzioni agli utenti con un clic/tocco, altrimenti potrebbero non essere mai viste, La cosa più importante è non visualizzare elementi non interattivi come pulsanti per evitare confusione e non visualizzare elementi interattivi come etichette statiche.
Conclusione: non tutto è un menu a discesa I nomi contano. Un elenco verticale di opzioni viene generalmente descritto come un "elenco a discesa", ma spesso è un po' troppo generico per essere significativo. "Dropdown" suggerisce che l'elenco è nascosto per impostazione predefinita. La “selezione multipla” implica la selezione multipla (casella di controllo) all'interno di un elenco. "Combobox" implica l'immissione di testo. E la "Listbox" è semplicemente un elenco di elementi selezionabili, visibili in ogni momento. L’obiettivo non è quello di essere coerenti con le definizioni di cui sopra fine a se stesso. Ma piuttosto per allineare le intenzioni: parlare la stessa lingua quando si decidono, si progettano, si costruiscono e quindi si utilizzano questi componenti dell'interfaccia utente. Dovrebbe funzionare pertutti, progettisti, ingegneri e utenti finali, purché le etichette statiche non assomiglino a pulsanti interattivi e i pulsanti di opzione non si comportino come caselle di controllo. Scopri i "modelli di progettazione per interfacce AI" Scopri Design Patterns For AI Interfaces, il nuovo corso video di Vitaly con esempi pratici di prodotti reali, con una formazione UX dal vivo che sarà presto disponibile. Vai all'anteprima gratuita. Scopri Design Patterns For AI Interfaces, il video corso di Vitaly su design dell'interfaccia e UX.
Formazione video + UXSolo videoFormazione video + UX$ 450,00 $ 799,00
Ottieni video + formazione UX30 lezioni video (10 ore) + formazione UX dal vivo.Garanzia di rimborso di 100 giorni.Solo video$ 275,00$ 395,00
Ottieni il videocorso30 videolezioni (10h). Aggiornato ogni anno. Disponibile anche come pacchetto UX con 3 corsi video.
Risorse utili
Completamento automatico: linee guida UX, di Vitaly Friedman Combobox, di eBay 👍 Combobox, di Elastic Combobox, di Elisa Combobox, di MongoDB 👍 Combobox, di Visa 👍 Combobox, di Watson (Docplanner) Casella combinata, di Wikimedia Combobox, di Zendesk Multiselect (MongoDB Combobox Design Docs), di MongoDB 👍 Ricerca multiselezione, di Wikimedia Casella combinata a selezione multipla, di Vaadin Selezione multipla, da Visa Trasferimento (esempio della casella di riepilogo), di Ant Design Casella di riepilogo, di Hopper Casella di riepilogo, di Vaadin Casella di riepilogo, di Visa Selettore doppio elenco, di Red Hat (PatternFly) Doppia casella di riepilogo, di Salesforce (Lightning Design System) Elenco trasferimenti, di Mantine Doppia casella di riepilogo, di Dashlite Distintivi contro pillole contro fiches contro etichette, di Vitaly Friedman Caselle di riepilogo ed elenchi a discesa, di Anna Kaley (NN/g)
