Cómo elegir el correcto — Smashing Magazine

Autor Team Estudio Arquitectos

Publicado el: febrero 3, 2026

Entonces, ¿cuáles son las diferencias entre cuadros combinados, selecciones múltiples, cuadros de lista y listas desplegables? Aunque todos estos componentes de la interfaz de usuario pueden parecer similares, tienen propósitos diferentes. La elección suele depender de Número de opciones disponibles y su popularidad.

Veamos en qué se diferencian. cual es su propósitoy cómo elegir el correcto y evitar malentendidos y falsas expectativas en el camino.

Comparación de elementos de la interfaz de usuario: cuadro de lista, cuadro combinado, selección múltiple y cuadro de lista doble, que muestran diferentes funciones de selección. — Comienza la confusión: cuadros de lista, cuadros combinados, selección múltiple, cuadros de lista dobles. (Vista previa grande)

No todos los patrones de lista son iguales

Todos los componentes de la interfaz de usuario destacados anteriormente tienen una cosa en común: admiten la interacción del usuario con las listas. Sin embargo, lo hacen de forma ligeramente diferente.

Veámoslos uno por uno:

menú desplegable → La lista está oculta hasta que se activa.
cuadro combinado → Ingresar filtro + seleccionar 1 opción.
opción múltiple → Ingrese el filtro + seleccione múltiples opciones.
cuadro de lista → Todas las opciones de la lista son visibles de forma predeterminada (+ desplazamiento).
Cuadro de lista doble → Mover elementos entre 2 cuadros de lista.

Campo de entrada de texto con lista desplegable — Hay grupos dentro del sistema de diseño Watson. patrón de cuadro combinado. (Vista previa grande)

en otras palabras, cuadro combinado Combine un campo de entrada de texto con una lista desplegable para que los usuarios puedan Escribe lo que quieras filtrar y seleccione una opción. y opción múltipleel usuario puede elegir entre varias opciones (normalmente mostradas como pastillas o chips).

cuadro de lista anexo Todas las opciones de la lista visibles De forma predeterminada, esto suele ser con desplazamiento. Esto resulta útil cuando los usuarios necesitan ver todas las opciones disponibles a la vez. Cuadro de lista doble (también conocido como lista de transferencia) es una variación de un cuadro de lista que permite al usuario Mover elementos entre dos cuadros de lista (izquierda ↔ derecha), generalmente utilizado para la selección de lotes.

Nunca ocultes las opciones utilizadas con frecuencia

Como se mencionó anteriormente, la selección de los componentes correctos de la interfaz de usuario depende de 2 factores: cuántas opciones de lista están disponibles y si todas ellas deben estar visibles de forma predeterminada. Todas las listas también pueden tener estructuras de árbol, anidamiento y selecciones de grupos.

Muestra un menú desplegable para la selección de productos. Seleccione Compass, seleccione Atlas y hay dos subopciones: Vector Search y Atlas CLI. — sistema de diseño mongodb Viene con filtro anidado y chip. (Vista previa grande)

Como ocurre con cualquier componente de la interfaz de usuario, hay un principio que he seguido durante años: Nunca ocultes las opciones utilizadas con frecuencia. Si los usuarios a menudo confían en una elección particular, tiene poco valor ocultársela.

podemos hacerlo preseleccionadoo (si solo hay 2 o 3 opciones comunes) mostrarlas como chip o botóny luego muestra el resto de la lista de interacciones. En general, es una buena idea mostrar siempre las opciones populares, incluso si pueden saturar la interfaz de usuario.

¿Cómo elegir?

No todas las listas requieren un método de selección complejo. Para obtener una lista con el siguiente contenido Menos de 5 artículoslos botones de opción simples o las casillas de verificación suelen funcionar mejor. Pero si el usuario necesita equipo Las opciones (p. ej., más de 200 elementos), cuadro combinado + selección múltiple son útiles porque el filtrado es más rápido (p. ej., selección de país).

Matrices de opciones para cuadros de lista y selección múltiple. — uno matriz de opcionesdesglosados por selección única o múltiple y vista estática o desplazable. Por Anna Kaley de NN/g. (Vista previa grande)

cuadro de lista Útil cuando las personas necesitan acceso Muchas opciones a la vezespecialmente cuando también necesitan seleccionar muchas opciones de esa lista. Pueden resultar útiles para los filtros que se utilizan con frecuencia.

Los cuadros de lista duales se utilizan para mover elementos de un lugar a otro. — Aplicación práctica de los cuadros de lista duales: Muy útil a la hora de asignar tareas o permisos. Por eso es una “lista de transferencia”. Ejemplo de Mantener. (Vista previa grande)

Cuadro de lista doble Muchas veces pasado por alto e ignorado. Pero es muy útil para tareas complejas como la selección masiva o la asignación de roles, tareas y responsabilidades. Es el único componente de la interfaz de usuario que permite al usuario ver la lista de selección completa junto con la lista de fuentes antes de enviarla (también conocida como “Lista de transferencias”).

De hecho, los cuadros de lista duales suelen ser más rápidos, más precisos y de más fácil acceso que los cuadros de lista duales. arrastrar y soltar.

Consideraciones de usabilidad

Una nota importante para recordar es que todos los tipos de listas deben admitir Navegación por teclado (por ejemplo, teclas de flecha ↑/↓) para accesibilidad. Algunas personas casi siempre confían en el teclado para seleccionar opciones después de empezar a escribir.

La navegación por teclado se utiliza normalmente con cualquier tipo de lista. ejemplo: watson. (Vista previa grande)

además:

Para obtener una lista con el siguiente contenido 7+ opcionesconsidere agregar las funciones “Seleccionar todo” y “Borrar todo” para simplificar la interacción del usuario.
Para listas largas con cuadros combinados, Exponer todas las opciones Revelado a los usuarios a través de clics/clics que de otro modo nunca serían vistos,
Lo más importante es, No mostrar elementos no interactivos como botones Para evitar confusiones, no muestre elementos interactivos como etiquetas estáticas.

Los nombres son importantes. uno Lista de opciones verticales A menudo se describe como un “menú desplegable”, pero generalmente es demasiado general para ser significativo. “Menú desplegable” Consejo: esta lista está oculta de forma predeterminada. “Selección múltiple” Significa múltiples selecciones (casillas de verificación) en una lista. “caja combinada” Representa la entrada de texto. Un “cuadro de lista” es simplemente una lista de elementos seleccionables, siempre visibles.

Nuestro objetivo no es ser coherente con la definición anterior. si no fuera por Ajustar intenciones — Utilice el mismo lenguaje al decidir, diseñar, construir y utilizar estos componentes de la interfaz de usuario.

él Debería adaptarse a todos (diseñadores, ingenieros y usuarios finales) siempre y cuando las etiquetas estáticas no parezcan botones interactivos y los botones de opción no parezcan casillas de verificación.