Entonces, ¿cuál es la diferencia entre cuadro combinado, selección múltiple, cuadro de lista y menú desplegable? Si bien todos estos componentes de la interfaz de usuario pueden parecer similares, tienen propósitos diferentes. La elección a menudo se reduce a la cantidad de opciones disponibles y su visibilidad. Veamos en qué se diferencian, para qué sirven y cómo elegir el correcto, evitando malentendidos y expectativas equivocadas en el camino.
No todos los patrones de listas son iguales Todos los componentes de la interfaz de usuario destacados anteriormente tienen exactamente una cosa en común: admiten las interacciones de los usuarios con las listas. Sin embargo, lo hacen de manera ligeramente diferente. Echemos un vistazo a cada uno, uno por uno:
La lista desplegable → está oculta hasta que se activa. Cuadro combinado → escriba para filtrar + seleccione 1 opción. Selección múltiple → escriba para filtrar + seleccione muchas opciones. Cuadro de lista → todas las opciones de la lista visibles de forma predeterminada (+ desplazamiento). Cuadro de lista dual → mover elementos entre 2 cuadros de lista.
En otras palabras, Combobox combina un campo de entrada de texto con una lista desplegable, para que los usuarios puedan escribir para filtrar y seleccionar una única opción. Con Multiselect, los usuarios pueden seleccionar muchas opciones (a menudo mostradas como pastillas o chips). Los cuadros de lista muestran todas las opciones de lista visibles de forma predeterminada, a menudo con desplazamiento. Es útil cuando los usuarios necesitan ver todas las opciones disponibles de inmediato. El cuadro de lista dual (también llamado lista de transferencia) es una variación de un cuadro de lista que permite a los usuarios mover elementos entre dos cuadros de lista (izquierda ↔ derecha), generalmente para una selección masiva. Nunca oculte las opciones utilizadas con frecuencia Como se mencionó anteriormente, la elección del componente de interfaz de usuario correcto depende de 2 factores: cuántas opciones de lista están disponibles y si todas estas opciones deben estar visibles de forma predeterminada. Todas las listas también pueden tener estructuras de árbol, anidamiento y selección de grupos.
Hay un principio que he seguido durante años para cualquier componente de la interfaz de usuario: nunca ocultar las opciones utilizadas con frecuencia. Si los usuarios confían con frecuencia en una selección particular, tiene muy poco valor ocultársela. Podríamos hacerlo preseleccionado o (si solo hay 2 o 3 opciones utilizadas con frecuencia) mostrarlas como chips o botones y luego mostrar el resto de la lista en la interacción. En general, es una buena idea mostrar siempre las opciones populares, incluso si pueden saturar la interfaz de usuario. ¿Cómo elegir cuál? No todas las listas necesitan un método de selección complejo. Para listas con menos de cinco elementos, los botones de opción simples o las casillas de verificación suelen funcionar mejor. Pero si los usuarios necesitan seleccionar de una lista grande de opciones (por ejemplo, más de 200 elementos), el cuadro combinado + selección múltiple son útiles debido a que el filtrado es más rápido (por ejemplo, selección de país).
Los cuadros de lista son útiles cuando las personas necesitan acceder a muchas opciones a la vez, especialmente si también necesitan elegir muchas opciones de esa lista. Podrían resultar útiles para los filtros de uso frecuente.
El cuadro de lista dual a menudo se pasa por alto o se ignora. Pero puede resultar muy útil para tareas complejas, por ejemplo, selección masiva o asignación de roles, tareas y responsabilidades. Es el único componente de la interfaz de usuario que permite a los usuarios revisar su lista de selección completa junto con la lista de fuentes antes de confirmar (también llamada "lista de transferencia"). De hecho, el cuadro de lista dual suele ser más rápido, más preciso y más accesible que arrastrar y soltar. Consideraciones de usabilidad Una nota importante a tener en cuenta es que todos los tipos de listas deben admitir la navegación con el teclado (por ejemplo, las teclas de flecha ↑/↓) para garantizar la accesibilidad. Algunas personas casi siempre confiarán en el teclado para seleccionar opciones una vez que comiencen a escribir.
Más allá de eso:
Para listas con más de 7 opciones, considere agregar las funcionalidades "Seleccionar todo" y "Borrar todo" para agilizar la interacción del usuario. Para listas largas con un cuadro combinado, exponga todas las opciones a los usuarios al hacer clic o tocar, ya que de lo contrario nunca se verán. Lo más importante es no mostrar elementos no interactivos como botones para evitar confusión y no mostrar elementos interactivos como etiquetas estáticas.
Conclusión: no todo es un menú desplegable Los nombres importan. Una lista vertical de opciones generalmente se describe como un "desplegable", pero a menudo es demasiado genérica para ser significativa. "Desplegable" sugiere que la lista está oculta de forma predeterminada. “Multiselección” implica selección múltiple (casilla de verificación) dentro de una lista. “Cuadro combinado” implica entrada de texto. Y "Listbox" es simplemente una lista de elementos seleccionables, visibles en todo momento. El objetivo no es ser coherente con las definiciones anteriores porque sí. Sino más bien para alinear intenciones: hablar el mismo idioma al decidir, diseñar, construir y luego utilizar estos componentes de la interfaz de usuario. debería funcionar paratodos (diseñadores, ingenieros y usuarios finales), siempre y cuando las etiquetas estáticas no parezcan botones interactivos y los botones de radio no actúen como casillas de verificación. Conozca los "Patrones de diseño para interfaces de IA" Conozca Patrones de diseño para interfaces de IA, el nuevo curso en video de Vitaly con ejemplos prácticos de productos de la vida real, y próximamente se realizará una capacitación de UX en vivo. Salta a una vista previa gratuita. Conozca Patrones de diseño para interfaces AI, el curso en video de Vitaly sobre diseño de interfaces y UX.
Video + Capacitación UXSolo videoVideo + Capacitación UX$ 450.00 $ 799.00
Obtenga video + capacitación UX30 lecciones en video (10 h) + capacitación UX en vivo. Garantía de devolución de dinero de 100 días. Solo video$ 275,00$ 395,00
Consigue el vídeocurso30 lecciones en vídeo (10h). Actualizado anualmente. También disponible como paquete UX con 3 cursos en video.
Recursos útiles
Autocompletar: pautas de UX, por Vitaly Friedman Caja combinada, de eBay 👍 Cuadro combinado, de Elastic Caja combinada, de Elisa Cuadro combinado, de MongoDB 👍 Combobox, por Visa 👍 Cuadro combinado, de Watson (Docplanner) Cuadro combinado, de Wikimedia Cuadro combinado, de Zendesk Selección múltiple (Documentos de diseño de cuadro combinado de MongoDB), por MongoDB 👍 Búsqueda multiselección, por Wikimedia Cuadro combinado de selección múltiple, de Vaadin Multiselección, por Visa Transferir (ejemplo de cuadro de lista), por Ant Design Cuadro de lista, por Hopper Cuadro de lista, de Vaadin Cuadro de lista, por Visa Selector de lista dual, de Red Hat (PatternFly) Cuadro de lista dual, de Salesforce (Lightning Design System) Lista de transferencias, por Mantine Cuadro de lista dual, de Dashlite Insignias versus píldoras versus chips versus etiquetas, por Vitaly Friedman Cuadros de lista versus listas desplegables, por Anna Kaley (NN/g)
