Aleshores, quina diferència hi ha entre el quadre combinat, la selecció múltiple, el quadre de llista i el menú desplegable? Tot i que tots aquests components de la interfície d'usuari poden semblar similars, tenen propòsits diferents. L'elecció sovint es redueix al nombre d'opcions disponibles i la seva visibilitat. Vegem en què es diferencien, a quina finalitat serveixen i com triar-ne l'adequat, evitant malentesos i expectatives incorrectes al llarg del camí.
No tots els patrons de llista són iguals Tots els components de la interfície d'usuari destacats anteriorment tenen exactament una cosa en comú: admeten les interaccions dels usuaris amb les llistes. Tanmateix, ho fan de manera lleugerament diferent. Fem una ullada a cadascun, un per un:
La llista desplegable → s'amaga fins que s'activa. Combobox → escriviu per filtrar + seleccioneu 1 opció. Selecció múltiple → escriviu per filtrar + seleccioneu moltes opcions. Caixa de llista → totes les opcions de llista visibles per defecte (+ desplaçament). Quadre de llista dual → mou elements entre 2 quadres de llista.
En altres paraules, Combobox combina un camp d'entrada de text amb una llista desplegable, de manera que els usuaris poden escriure per filtrar i seleccionar una única opció. Amb Multiselect, els usuaris poden seleccionar moltes opcions (sovint es mostren com a pastilles o xips). Les caixes de llista mostren totes les opcions de llista visibles per defecte, sovint amb el desplaçament. És útil quan els usuaris necessiten veure totes les opcions disponibles immediatament. El quadre de llista dual (també anomenat llista de transferència) és una variació d'un quadre de llista que permet als usuaris moure elements entre dos quadres de llista (esquerra ↔ dreta), normalment per a la selecció massiva. No amagueu mai les opcions utilitzades amb freqüència Com s'ha esmentat anteriorment, l'elecció del component d'IU adequat depèn de 2 factors: quantes opcions de llista hi ha disponibles i si totes aquestes opcions han de ser visibles per defecte. Totes les llistes també poden tenir estructures d'arbre, nidificació i selecció de grups.
Hi ha un principi que he estat seguint durant anys per a qualsevol component de la interfície d'usuari: no amagar mai les opcions utilitzades amb freqüència. Si els usuaris depenen d'una selecció determinada amb freqüència, hi ha molt poc valor amagar-los. Podríem fer-lo preseleccionat o (si només hi ha entre 2 i 3 opcions d'ús freqüent) mostrar-les com a fitxes o botons i, a continuació, mostrar la resta de la llista sobre la interacció. En general, és una bona idea mostrar sempre opcions populars, fins i tot si pot desordenar la interfície d'usuari. Com escollir quina? No totes les llistes necessiten un mètode de selecció complex. Per a llistes amb menys de 5 elements, els botons d'opció simples o les caselles de selecció solen funcionar millor. Però si els usuaris necessiten seleccionar d'una llista àmplia d'opcions (p. ex., més de 200 elements), el quadre combinat + la selecció múltiple són útils a causa del filtratge més ràpid (p. ex., la selecció del país).
Les caixes de llista són útils quan la gent necessita accedir a moltes opcions alhora, sobretot si també han de triar moltes opcions d'aquesta llista. Poden ser útils per als filtres d'ús freqüent.
El quadre de llista dual sovint es passa per alt i ignorat. Però pot ser molt útil per a tasques complexes, per exemple, la selecció massiva o l'assignació de rols, tasques i responsabilitats. És l'únic component de la interfície d'usuari que permet als usuaris revisar la seva llista de selecció completa al costat de la llista d'origen abans de comprometre's (també anomenada "llista de transferència"). De fet, el quadre de llista dual és sovint més ràpid, més precís i més accessible que arrossegar i deixar anar. Consideracions d'usabilitat Una nota important a tenir en compte és que tots els tipus de llistes han de ser compatibles amb la navegació amb el teclat (p. ex., tecles de fletxa ↑/↓) per a l'accessibilitat. Algunes persones gairebé sempre confiaran en el teclat per seleccionar opcions un cop comencin a escriure.
Més enllà d'això:
Per a llistes amb més de 7 opcions, considereu afegir les funcionalitats "Selecciona-ho tot" i "Esborra-ho tot" per agilitzar la interacció de l'usuari. Per a llistes llargues amb un quadre combinat, exposa totes les opcions als usuaris fent clic/toc, ja que, en cas contrari, no es veuran mai. El més important és que no mostris elements no interactius com a botons per evitar confusions i no mostris elements interactius com a etiquetes estàtiques.
Conclusió: no tot és un desplegable Els noms importen. Normalment, una llista vertical d'opcions es descriu com a "menú desplegable", però sovint és una mica massa genèrica per tenir sentit. El "menú desplegable" indica que la llista està oculta per defecte. "Selecció múltiple" implica una selecció múltiple (casella de selecció) dins d'una llista. "Combobox" implica l'entrada de text. I "Listbox" és simplement una llista d'elements seleccionables, visibles en tot moment. L'objectiu no és ser coherent amb les definicions anteriors per això. Però més aviat per alinear les intencions: parleu el mateix idioma a l'hora de decidir, dissenyar, construir i, després, utilitzar aquests components de la interfície d'usuari. Hauria de funcionartothom, dissenyadors, enginyers i usuaris finals, sempre que les etiquetes estàtiques no semblin botons interactius i els botons d'opció no actuen com a caselles de selecció. Coneix "Patrons de disseny per a interfícies d'IA" Coneix els patrons de disseny per a interfícies d'IA, el nou curs de vídeo de Vitaly amb exemples pràctics de productes de la vida real, amb una formació en UX en directe aviat. Aneu a una vista prèvia gratuïta. Coneix Design Patterns For AI Interfaces, el curs de vídeo de Vitaly sobre disseny d'interfícies i UX.
Vídeo + Formació UX Només vídeoVídeo + Formació UX 450,00 $ 799,00 $
Obteniu vídeo + UX Training30 lliçons de vídeo (10 h) + Live UX Training. Garantia de devolució de 100 dies. Només vídeo 275,00 $ 395,00 $
Aconsegueix el vídeocurs30 lliçons en vídeo (10h). Actualitzat anualment. També disponible com a paquet UX amb 3 cursos de vídeo.
Recursos Útils
Autocompletar: Directrius UX, de Vitaly Friedman Combobox, d'eBay 👍 Combobox, de Elastic Combobox, d'Elisa Combobox, de MongoDB 👍 Combobox, per Visa 👍 Combobox, de Watson (Docplanner) Combobox, de Wikimedia Combobox, de Zendesk Multiselect (MongoDB Combobox Design Docs), de MongoDB 👍 Cerca de selecció múltiple, de Wikimedia Caixa combinada de selecció múltiple, de Vaadin Multiselecció, per Visa Transfer (exemple de caixa de llista), de Ant Design Listbox, de Hopper List Box, de Vaadin Listbox, per Visa Selector de doble llista, de Red Hat (PatternFly) Dual Listbox, de Salesforce (Lightning Design System) Transfer List, de Mantine Dual Listbox, de Dashlite Insígnies vs. pastilles vs. xips vs. etiquetes, de Vitaly Friedman Listboxes vs. Dropdown Lists, d'Anna Kaley (NN/g)
