Tanto en aplicaciones en dispositivos móviles como en los sitios web, los usuarios depositan su confianza en los menús de navegación para poder localizar y acceder al contenido.
Es importante que los diseñadores UX usen técnicas de investigación UX, como la realización de sesiones de Card Sorting o pruebas de Tree Test para ordenar los contenidos de los menús de navegación y mejorar la experiencia de usuario teniendo en cuenta los resultados y hallazgos encontrados tras las pruebas de usabilidad.
Qué es un menú de navegación
Un menú de navegación está compuesto por listas de características o categorías de contenido. Por norma general se presentan como un conjunto de enlaces o iconos agrupados con un estilo visual distinto al resto del diseño de la interfaz.
Los menús de navegación, son realmente importantes, deben de servir de ayuda a los usuarios para poder localizar y acceder a los contenidos. Con demasiada frecuencia, los usuarios se pelean con los menús porque son confusos, difíciles de interactuar con ellos o de encontrar.
Pautas para menús de navegación en Experiencia de Usuario
A grandes rasgos, las pautas principales para diseñar menús de navegación serían las siguientes:
- Haz que el menú sea visible.
- Comunica a través del menú dónde se encuentra el usuario.
- Coordina los menús con las tareas concretas que ejecuta el usuario.
- Hazlo fácil de manipular o interactuar.
- No te compliques con animaciones que confundan al usuario.
14 claves para diseñar un menú de navegación
Kathryn Whitenton, escribió un artículo muy interesante en el blog de Nielsen Norman Group el 29 de Noviembre de 2015 referente a cómo diseñar un menú correctamente teniendo en cuenta la experiencia de usuario. A continuación se desgranan los puntos más interesantes.
1. Tamaño
No hay que utilizar menús pequeños o iconos de menú en pantallas grandes. Los menús no deben de estar ocultos cuando tenemos mucho espacio para mostrarlos.
2. Ubicación
Colocaremos los menús en lugares familiares para los usuarios. Los usuarios están acostumbrados a encontrarlos en posiciones naturales y que se repiten en todos los sitios web como en el Aside izquierdo o en la parte superior horizontalmente. Hay que colocarlos en las posiciones en las que los usuarios esperan encontrarlos.
3. Interacción
Los enlaces del menú deben de parecer enlaces e interactivos. Es decir, hay que mostrar a través de la UI que son clicables o que se pueden tocar dependiendo del dispositivo.
4. Peso visual
Hay que asegurarse de que los menús tengan el suficiente peso visual. Si los menús se colocan en su posición natural dentro de la estructura, suelen ser rápidamente localizados por parte de los usuarios. Si por el contrario, la estructura de la interfaz es algo desordenada y los menús no se encuentran en posiciones lógicas u ocultos puede usarse algún recurso gráfico para hacer más énfasis.
Dejar espacios en blanco alrededor de los menús puede ser una de las mejores soluciones para otorgarlos peso visual.
5. Contraste
El color de los textos que son enlaces debe de contrastar con el color de fondo. Tener un buen contrastes hará que sean fácilmente visibles para los usuarios.
6. Marcadores visuales
Es necesario indicar a los usuarios “donde” se encuentra la pantalla que actualmente están visualizando dentro del menú. Este tipo de marcadores visuales en los menús, ayudan a que los usuarios puedan responder la pregunta: “¿Dónde estoy?”.
7. Etiquetas para los enlaces entendibles
Evita palabras o términos abstractos, técnico o lenguaje interno. Es recomendable averiguar qué y cómo buscan los usuarios. Para ello es recomendable realizar sesiones de Card Sorting para comprobar si los literales de las categorías son los adecuados.
8. Las etiquetas fáciles de escanear
Justificar los menús verticales a la izquierda puede reducir la cantidad de tiempo que los usuarios deben dedicar a leer los menús.
9. Dropdown y contenido de nivel inferior
Cuando se utilizan megamenús o menús desplegables, es conveniente dividir el contenido en categorías y subcategorías que aglutinen los enlaces. Mediante un dropdown se puede mostrar al usuario todos los niveles y el contenido de la web.
10. Comunicación visual
Las imágenes, los iconos o los colores pueden ayudar a los usuarios a comprender las opciones del menú. No conviene sobrecargar, hay que asegurarse de que las imágenes sean compatibles con las tareas del usuario y no dificulten su ejecución.
11. Tamaño de los enlaces
El tamaño de los enlaces deben ser los suficientemente grandes como para parecer clicables o tocables. Los enlaces que son demasiado pequeños o están demasiado juntos son una gran fuente de frustración para los usuarios de dispositivos móviles.
12. Tamaño de los desplegables
Es necesario asegurarse de que los menús desplegables no sean ni demasiado pequeños ni demasiado grandes. Aquellos dropdown que se activan con el :hover, es decir al pasar el ratón por encima, no deben de desaparecer demasiado rápido y sólo cuando el ratón ya no se encuentre dentro del contenedor.
13. Sticky o menú pegajoso
Si la página es demasiado larga y tiene mucho contenido, utilizar un menú que se queda fijo en la parte superior cuando los usuarios realizan scroll es realmente útil para ellos.
14. Optimizar el acceso
Es recomendable colocar los elementos comunes cerca del destino del enlace que incia le menú desplegable. Esto es útil, sobretodo, para que el usuario no tenga que desplazar el cursor del ratón muy lejos o el dedo del usuario tenga que ir demasiado lejos dentro de la pantalla táctil.
Créditos
La imagen de cabecera es de Unsplash
Menu Design: Checklist of 15 UX Guidelines to Help Users
Elementos de navegación y orientación del usuario
10 pautas de diseñar menús de navegación de forma adecuada