Introducción a los menús desplegables
Uso
Descripción general
El componente menú desplegable presenta a los usuarios un conjunto de opciones de entre las que deben seleccionar. Las listas desplegables revelan progresivamente las opciones, lo que evita que los usuarios vean demasiada información a la vez. También se pueden utilizar para agrupar información. Las listas desplegables siempre son compatibles con un campo, un rótulo o un título que se coloca antes del control.
Este componente tiene cuatro variantes: selección, selección múltiple, cuadro combinado, cuadro combinado múltiple.
Cuándo se debe utilizar
- En formularios de páginas completas, en modales o en paneles laterales.
- Para filtrar u ordenar los contenidos de una página.
- Cuando se pueda seleccionar una opción, use selección o cuadro combinado.
- Cuando se pueda seleccionar más de una opción al mismo tiempo, utilice selección múltiple o cuadro combinado múltiple.
Cuándo no se debe utilizar
Hay una pequeña cantidad de opciones (5 o menos) entre las que los usuarios pueden elegir. Utilice el grupo de selección para pequeños conjuntos de elementos mutuamente excluyentes o casillas de verificación para elementos de selección múltiple.
Fuente: Nielsen Norman Group
Formato
Anatomía
Ejemplo del componente menú desplegable de la variante selección.
- Rótulo: Describe el propósito del campo de entrada.
- Texto de ayuda (opcional): Proporciona contexto adicional o ayuda al usuario a elegir la selección correcta.
- Entrada del menú desplegable: Muestra la opción seleccionada por el usuario o el texto del marcador de posición.
- Menú desplegable: Muestra una lista de opciones de entre las que elegir.
Predicción de escritura
Jutro admite menús desplegables con campos de entrada con predicción de escritura. Los usuarios pueden ingresar texto manualmente para filtrar los elementos desplegables. Esta característica es útil para ayudar a los usuarios a seleccionar de entre una lista larga.
Los menús desplegables con la función de predicción de escritura habilitada proporcionan sugerencias a medida que los usuarios escriben. Las selecciones aparecen en función de los caracteres que los usuarios hayan ingresado. Cuantos más caracteres introduzcan los usuarios en el campo, más refinada se volverá la lista.
Para las variantes de menús desplegables que admitan la búsqueda y el filtrado, consulte el cuadro combinado y cuadro combinado múltiple.
Orden de las opciones
Cuando utilice el menú desplegable para ordenar, considere organizar las opciones en orden. Por ejemplo:
- De la opción más común a la menos común.
- De la operación más simple a la más compleja.
- De la opción menos riesgosa a la más riesgosa.
La primera opción aparecería en la parte superior de la lista.
Evite organizar la lista de opciones alfabéticamente, a menos que tenga sentido para su caso de uso. A menudo está bien organizar alfabéticamente las listas de países y otros problemas de elementos conocidos. Sin embargo, debe asegurarse de que los usuarios conozcan inequívocamente el nombre de su selección.
Fuente: Nielsen Norman Group
Contenido
Pautas generales de redacción
- En todos los aspectos del diseño de las interfaces de productos de Guidewire, utilice mayúsculas como se usan en las oraciones. No use mayúsculas en todas las palabras.
- Use verbos en tiempo presente y voz activa en la mayoría de las situaciones.
- Use contracciones comunes para darle al texto un tono más natural e informal (pauta correspondiente al inglés).
- Use un lenguaje sencillo. Evite la jerga innecesaria y el lenguaje complejo.
- Las palabras y las oraciones deben ser breves.
Inclusión de un rótulo
Coloque el rótulo del menú desplegable fuera del campo para que siempre esté visible. Un menú desplegable sin rótulo no es accesible.
No reemplace los rótulos de campo por texto de marcador de posición en el campo. Esto perjudica la facilidad de uso y tiene muchas consecuencias negativas.
Concisión de los elementos del menú
Limite cada opción del menú desplegable a una línea de texto. Si el texto es demasiado largo para una línea, puede agregar puntos suspensivos (...) para el desbordamiento del contenido y acompañarlo con una descripción emergente basada en navegador que muestre el string completo. Sin embargo, se recomienda evitar el truncamiento si fuera posible.
Eliminación de palabras de relleno
Elimine las muletillas como “por favor”, para reducir la cantidad de palabras y caracteres y hacer que el contenido sea más fácil de asimilar.
A menudo, (en inglés) “por favor” se usa en exceso, por eso, lo reservamos para situaciones específicas. Por ejemplo:
- Hay un problema y no podemos ayudar al usuario a resolverlo.
- Se le pide al usuario que haga algo inconveniente.
- El software es el culpable de la situación.
Si simplemente le pide al usuario que seleccione una opción del menú desplegable, no lo introduzca con un “por favor”.
Agregue texto de ayuda si fuera significativo
Use el texto de ayuda para mostrar el contexto y comunicar qué opción seleccionar o cómo hacerlo. Estos son algunos ejemplos de lo que podría incluir en el texto de ayuda:
- Una descripción general de las opciones del menú desplegable.
- Sugerencias que ayuden al usuario a elegir la selección correcta.
- Más contexto de por qué un usuario deba elegir una opción.
Utilice el texto de ayuda solo para la información pertinente. No use texto de ayuda que simplemente repita la misma información que aparece en el rótulo.
En el texto de ayuda, use mayúsculas como se usan en las oraciones. Escriba 1 o 2 oraciones cortas y completas que terminen con un punto.
Uso del texto de error para guiar a los usuarios
El texto del mensaje de error indica a un usuario cómo corregir el error. En el caso del menú desplegable, los errores a menudo están relacionados con algo que debe corregirse para la validación integrada. Por ejemplo, si alguien no selecciona un estado de empleo y se trata de un campo obligatorio, puede usar el texto de error para guiar al usuario a una solución: “Seleccione un estado de empleo”.
En el texto de error, use mayúsculas como se usan en las oraciones. Escriba 1 o 2 oraciones cortas y completas que terminen con un punto.
Marcado de los campos obligatorios
Utilice un asterisco (*) para indicar los campos obligatorios. El asterisco precede al rótulo del campo. Esto ayuda a los usuarios a identificar fácilmente qué campos son obligatorios escaneando solo el carácter más a la izquierda del rótulo.
Además de marcar los campos obligatorios con un asterisco, se recomienda incluir instrucciones claras en la parte superior del formulario, como “Todos los campos marcados con un asterisco son obligatorios”, para garantizar que los usuarios comprendan el significado del asterisco.
Uso de mayúsculas al igual que en las oraciones
Los rótulos de campo, el texto de marcador de posición y los elementos de menú aparecen en mayúsculas como se usan en las oraciones.
Consulte la guía de estilo de texto de la interfaz de usuario para obtener más información sobre cómo implementar el uso de mayúsculas y minúsculas.
Comportamientos
Todas las variantes de menú desplegable comparten los comportamientos enumerados en esta sección. Para los comportamientos únicos, consulte las pautas de uso de cada variante.
Estados
El campo de menú desplegable aparece sin valor (predeterminado), texto de marcador de posición o una entrada rellena.
| Ilustración | Estado | Descripción |
|---|---|---|
 | Sin valor (predeterminado) | Indica al usuario que no se ha seleccionado ningún valor y que no hay un marcador de posición. |
 | Marcador de posición | Indica al usuario que no se ha seleccionado ningún valor. El marcador de posición aparece atenuado. |
 | Entrada rellena | Indica al usuario que la entrada está completa con datos. |
Los menús desplegables también tienen estados interactivos para habilitado, en foco, deshabilitado, error, solo lectura y solo visualización.
| Estado | Descripción |
|---|---|
| Habilitado | Indica al usuario que el elemento está habilitado para la interacción. |
| En foco | Indica al usuario qué elemento de la interfaz de usuario del sistema está el foco. |
| Deshabilitado | Indica al usuario que el valor de entrada no se puede cambiar debido a factores locales. Por ejemplo, una casilla de verificación sobre el campo de entrada debe estar marcada para acceder a este campo de entrada. El usuario puede habilitarla interactuando con la página. |
| Error | Indica que el usuario cometió un error de validación. El texto del error proporciona información a los usuarios para solucionarlo. |
| Solo lectura | Indica al usuario que el valor de entrada no se puede cambiar debido a factores externos. Por ejemplo, la falta de acceso de escritura. El usuario puede hacer algo para habilitarlo, por ejemplo, ponerse en contacto con un administrador. |
| Solo visualización | El estado de solo visualización se utiliza en dos casos:
|
En la siguiente imagen, se muestran los estados interactivos de los menús desplegables.
Interacciones
Ratón
Los usuarios pueden interactuar con este elemento haciendo clic en el área dentro del borde.
Teclado
El menú desplegable se expande y se contrae usando la barra espaciadora. Los usuarios pueden navegar por las opciones utilizando las teclas de flecha y seleccionar por medio de barra espaciadora o la tecla Intro.
Lector de pantalla
aria-labelledby establece una asociación programática entre el campo de entrada y su rótulo. El atributo WAI-ARIA de aria-autocomplete='list' comunica que aparecerá una lista de opciones entre las que el usuario puede elegir, pero el cuadro de edición conserva el foco. Al seleccionar la opción 'required' en Storybook, se agregan los atributos 'required' and 'aria-required="true"' al campo de entrada.
Accesibilidad
Este componente de Jutro ha sido validado para cumplir con las pautas de accesibilidad de WCAG 2.2 AA en su configuración base predeterminada. Esto incluye garantizar que se cumpla lo siguiente:
- La relación de contraste de los elementos textuales con respecto a su fondo es superior a 4,5:1.
- El contenido no textual que debe transmitir significado (como íconos e indicadores de foco) tiene una relación de contraste de al menos 3:1 con sus colores adyacentes.
- El elemento se puede operar con teclado, así como con mouse.
- Se puede acceder al contenido mediante lectores de pantalla, como JAWS y VoiceOver.
El cumplimiento de los criterios de accesibilidad depende, en última instancia, de cómo se implementa y personaliza este componente. Los cambios realizados por el autor del contenido pueden afectar la accesibilidad. Para obtener más información sobre nuestro modelo de responsabilidad compartida, revise nuestra declaración completa sobre accesibilidad de Jutro.
Al utilizar este componente en su aplicación:
- Ayude a los usuarios a comprender el contenido evitando nombres de opciones muy largos.
- Evite el uso de elementos que implícitamente puedan recibir el foco, como botones, casillas de verificación y enlaces, o contenido implícitamente semántico, como encabezados, dentro de los componentes menú desplegable.