Dropdown

Definición
Los dropdowns presentan una lista de opciones de las cuales el usuario puede seleccionar una o varias opciones. Una opción seleccionada puede representar un valor en un formulario o puede ser utilizada como una acción para filtrar u ordenar contenido existente. Dependiendo del sistema de diseño se nombra de diferente manera: select, picker, menu o dropdown select.

Anatomía

1Label
2Icon
3Container
4List item
5Sub menu
6Divider
Estados

1Enable
2Hover
3Focus
4Focus press
5Hover press
Tipos
Existen tres variantes diferentes de dropdowns que admiten varios tipos de funcionalidades: dropdown, multiselect y combo box.

1Dropdown
2Combo box
3Multiselect
Variantes

1El menu se expande.
2Un menú puede ser activado al tocar el ícono de hamburguesa, apareciendo debajo.
3Un menú puede ser activado mediante una pulsación prolongada, apareciendo junto al texto seleccionado.
Tamaños

1Small
2Medium
3Large
Cuándo usar
Los dropdowns se pueden utilizar en formularios, en páginas completas, en modales o en paneles laterales. El componente dropdown se utiliza para filtrar u ordenar contenido en una página.

Cuándo no usar
Es una buena práctica no utilizar un dropdown si hay solo dos opciones para elegir. En este caso, se debe utilizar un grupo de botones de radio en su lugar.


No anide dropdowns ni los utilice para mostrar información excesivamente compleja.

Accesibilidad
Las Pautas de Accesibilidad al Contenido Web 2.1 y 2.2 ofrecen recomendaciones para mejorar la accesibilidad a personas con discapacidades visuales, auditivas, de movimiento, del habla, cognitivas y fotosensibilidad. Aunque las guías no cubren todas las necesidades, sí ayudan a que más personas puedan acceder a los servicios digitales.
Las guías de accesibilidad se dividen en cuatro principios: Perceptible, entendible, operable y robusto, consideramos abarcar únicamente los principios perceptible, entendible y operable, dejando fuera robusto ya que este no tiene un campo de acción en el diseño de los componentes UI.
La siguiente lista son recomendaciones de la WCAG que afectan al componente dropdown.
Perceptible
Color y Contraste SC 1.4.3
La relación de contraste mínima recomendada para la accesibilidad es de 4.5:1 para el texto normal y de 3:1 para el texto grande (18 puntos o más).
Recursos:


Estado Focus SC 2.4.7
El propósito del estado focus es ayudar a las personas que dependen del teclado para operar una página, permitiéndoles determinar visualmente en qué lugar se encuentran. Beneficia a las personas con limitaciones de atención, limitaciones de memoria a corto plazo o limitaciones en los procesos ejecutivos.
Entendible
Encabezado y etiquetas SC 2.4.6
Escribe encabezados y etiquetas que sean entendibles, que ayuden a la navegación y comprensión de las acciones que se requiere realicen los usuarios.
No es necesario que las etiquetas y los títulos sean largos. Una palabra, o un carácter, puede ser suficiente si proporciona una pista adecuada para encontrar y navegar por el contenido.


Etiquetas o instrucciones SC 3.3.6
El objetivo principal de este criterio es permitir que los usuarios comprendan y utilicen correctamente los controles interactivos. Da guías e instrucciones para que el usuario sepa que información es opcional o necesaria.
Nombre, Valor y Rol SC 4.1.2
Asegúrese de que el dropdown tenga diseñado sus diferentes estados.

Operable

Target size SC 2.5.5
El target size se aplica a cualquier dispositivo sea táctil o no táctil, deben tener como mínimo 48 dp permitiendo que los usuarios con discapacidad motriz lo seleccionen fácilmente.
Texto extenso
Evite tener varias líneas de texto en un dropdown. Si el texto es demasiado largo para una línea, agregue puntos suspensivos (…) para el contenido desbordado.

Etiquetas
Cada selector debe tener una etiqueta. Un selector sin etiqueta es ambiguo y no accesible.


Consistencia
Mantenga los elementos del menú cortos y concisos. Se desaconsejan los elementos de menú largos que hacen que el texto ocupe varias líneas, considere revisar el texto o utilizar patrones de IU alternativos que den a su contenido más espacio.


Ancho
Elija un ancho apropiado del dropdown. Debe ser lo suficientemente amplio para que se puedan mostrar completamente todos los elementos de menú.

