Entón, cal é a diferenza entre caixa combinada, selección múltiple, caixa de lista e menú despregable? Aínda que todos estes compoñentes da IU poden parecer similares, teñen propósitos diferentes. A elección adoita reducirse ao número de opcións dispoñibles e á súa visibilidade. Vexamos en que se diferencian, para que propósito serven e como elixir o correcto, evitando malos entendidos e expectativas incorrectas ao longo do camiño.
Non todos os patróns de lista son iguais Todos os compoñentes da IU destacados anteriormente teñen exactamente unha cousa en común: admiten as interaccións dos usuarios coas listas. Non obstante, fano de forma lixeiramente diferente. Vexamos cada un, un por un:
A lista despregable → oculta ata que se activa. Caixa combinada → escriba para filtrar + seleccione 1 opción. Selección múltiple → escribe para filtrar + selecciona moitas opcións. Caixa de lista → todas as opcións de lista visibles por defecto (+ desprazamento). Caixa de lista dual → move elementos entre 2 caixas de lista.
Noutras palabras, Combobox combina un campo de entrada de texto cunha lista despregable, polo que os usuarios poden escribir para filtrar e seleccionar unha única opción. Con Multiselect, os usuarios poden seleccionar moitas opcións (a miúdo mostradas como pílulas ou patacas fritas). As caixas de lista mostran todas as opcións de lista visibles por defecto, moitas veces con desprazamento. É útil cando os usuarios necesitan ver todas as opcións dispoñibles inmediatamente. A caixa de lista dual (tamén chamada lista de transferencia) é unha variación dunha caixa de lista que permite aos usuarios mover elementos entre dúas caixas de lista (esquerda ↔ dereita), normalmente para a selección masiva. Nunca oculte as opcións de uso frecuente Como se mencionou anteriormente, a elección do compoñente de IU correcto depende de 2 factores: cantas opcións de lista hai dispoñibles e se todas estas opcións deben estar visibles por defecto. Todas as listas tamén poden ter estruturas en árbore, anidación e selección de grupos.
Hai un principio que levo anos seguindo para calquera compoñente da IU: nunca ocultar as opcións de uso frecuente. Se os usuarios confían nunha determinada selección con frecuencia, hai moi pouco valor en ocultala. Poderíamos facelo preseleccionar ou (se só hai 2 ou 3 opcións de uso frecuente) mostralas como fichas ou botóns e despois mostrar o resto da lista sobre a interacción. En xeral, é unha boa idea mostrar sempre opcións populares, aínda que poida desordenar a IU. Como elixir cal? Non todas as listas necesitan un método de selección complexo. Para listas con menos de 5 elementos, os botóns de opción simples ou as caixas de verificación adoitan funcionar mellor. Pero se os usuarios precisan seleccionar entre unha gran lista de opcións (por exemplo, máis de 200 elementos), a caixa combinada + selección múltiple son útiles debido ao filtrado máis rápido (por exemplo, a selección do país).
As caixas de lista son útiles cando a xente precisa acceder a moitas opcións á vez, especialmente se tamén precisan escoller moitas opcións desa lista. Poden ser útiles para os filtros de uso frecuente.
A caixa de lista dual adoita pasarse por alto e ignorarse. Pero pode ser moi útil para tarefas complexas, por exemplo, a selección masiva ou a asignación de roles, tarefas ou responsabilidades. É o único compoñente da IU que permite aos usuarios revisar a súa lista de selección completa xunto coa lista de orixe antes de comprometerse (tamén chamada "Lista de transferencias"). De feito, a caixa de lista dual adoita ser máis rápida, precisa e accesible que arrastrar e soltar. Consideracións de usabilidade Unha nota importante a ter en conta é que todos os tipos de listas deben admitir a navegación por teclado (por exemplo, as teclas de frecha ↑/↓) para a accesibilidade. Algunhas persoas case sempre confiarán no teclado para seleccionar as opcións unha vez que comecen a escribir.
Máis aló diso:
Para listas con máis de 7 opcións, considera engadir as funcións "Seleccionar todo" e "Borrar todo" para axilizar a interacción do usuario. Para listas longas cunha caixa combinada, expón todas as opcións aos usuarios ao facer clic/tocar, xa que, se non, quizais nunca se vexan. O máis importante é que non mostre elementos non interactivos como botóns para evitar confusións e non mostre elementos interactivos como etiquetas estáticas.
Conclusión: non todo é un menú despregable Os nomes importan. Unha lista vertical de opcións descríbese normalmente como un "menú despregable", pero moitas veces é demasiado xenérica para ser significativa. O menú despregable indica que a lista está oculta por defecto. "Selección múltiple" implica selección múltiple (casilla de verificación) dentro dunha lista. "Combobox" implica entrada de texto. E "Listbox" é simplemente unha lista de elementos seleccionables, visibles en todo momento. O obxectivo non é ser coherente coas definicións anteriores por iso. Pero máis ben para aliñar as intencións: fala o mesmo idioma ao decidir, deseñar, construír e, a continuación, usar estes compoñentes da IU. Debería funcionar paratodos (deseñadores, enxeñeiros e usuarios finais) sempre que as etiquetas estáticas non se vean como botóns interactivos e os botóns de opción non actúen como caixas de verificación. Coñece "Patróns de deseño para interfaces de intelixencia artificial" Coñece os patróns de deseño para interfaces de intelixencia artificial, o novo curso de vídeo de Vitaly con exemplos prácticos de produtos da vida real, cun adestramento de UX en directo en breve. Ir a unha vista previa gratuíta. Coñece Design Patterns For AI Interfaces, o curso de vídeo de Vitaly sobre deseño de interfaces e UX.
Adestramento de vídeo + UX Só Vídeo + Adestramento de UX $ 450,00 $ 799,00
Obtén vídeo + UX Training30 clases de vídeo (10 h) + Live UX Training. 100 días de garantía de devolución do diñeiro. Só vídeo 275,00 $ 395,00 $
Obtén o curso de vídeo30 leccións de vídeo (10h). Actualizado anualmente. Tamén dispoñible como paquete UX con 3 cursos de vídeo.
Recursos útiles
Autocompletar: UX Guidelines, de Vitaly Friedman Combobox, de eBay 👍 Combobox, de Elastic Combobox, de Elisa Combobox, de MongoDB 👍 Combobox, por Visa 👍 Combobox, de Watson (Docplanner) Combobox, de Wikimedia Combobox, de Zendesk Multiselect (MongoDB Combobox Design Docs), de MongoDB 👍 Busca de selección múltiple, de Wikimedia Caixa combinada de selección múltiple, de Vaadin Selección múltiple, por Visa Transfer (exemplo de Listaxe), de Ant Design Listbox, de Hopper List Box, de Vaadin Listbox, por Visa Selector de lista dual, de Red Hat (PatternFly) Caixa de lista dual, de Salesforce (Lightning Design System) Lista de transferencias, de Mantine Dual Listbox, de Dashlite Badges vs Pills vs Chips vs. Etiquetas, de Vitaly Friedman Listaxes e listas desplegables, de Anna Kaley (NN/g)
