PRÁCTICAS RECOMENDADAS PARA EL DISEÑO DE MENÚS MULTINIVEL

La navegación y la capacidad de encontrar son aspectos centrales del diseño de la experiencia del usuario. Si los usuarios no pueden llegar a donde quieren ir o encontrar lo que necesitan, se frustrarán y tal vez decidan buscar en otra parte . En sitios web con una arquitectura de información especialmente compleja, los menús multinivel son una forma efectiva de mejorar la navegación y la capacidad de encontrar, ofreciendo así experiencias web eficientes que promuevan la confianza en el producto y aumenten las conversiones .

Debido a que los productos y los dispositivos en los que se utilizan varían ampliamente, no existe una solución única para todos que produzca el menú multinivel perfecto. Sin embargo, existen reglas generales que lo ayudarán a crear menús de varios niveles que mejoran la navegación y la capacidad de búsqueda en cualquier tamaño de pantalla.

CONSEJOS DE DISEÑO PARA PANTALLAS DE CUALQUIER TAMAÑO

Un buen menú multinivel debe llevar a los usuarios a donde necesitan ir rápidamente al presentar la información de una manera clara e intuitiva. Antes de entrar en las pautas específicas de tamaño, veamos algunas prácticas que se aplican a todos los menús.

No use más de dos niveles de submenús. Más de dos niveles de submenús probablemente confundirán y abrumarán a los usuarios. Mantener la navegación relativamente plana mejora la capacidad de búsqueda para los usuarios y reduce la carga cognitiva necesaria para recordar dónde se encuentran. Si la estructura de la página del sitio es profunda, considere agregar un menú de navegación local en la parte superior de las páginas estrechamente relacionadas. Por ejemplo, Zoho, que diseña productos complejos de soporte comercial, colocó un menú local específico del producto en la parte superior de cada página de producto, justo debajo del menú principal. Mientras que el menú principal en la parte superior enumera las ofertas principales de Zoho, los menús locales brindan acceso a páginas con información más detallada, como casos de uso y precios.

Zoho evita que sus menús se vuelvan difíciles de manejar al agregar menús locales en la parte superior de la página de cada producto, en lugar de obligar a los usuarios a navegar a través de varias capas. El menú principal de Zoho está en la parte superior izquierda, mientras que el menú de Zoho One está orientado justo debajo.

Marcar submenús con iconos. Gestione las expectativas de los usuarios dejando siempre claro cuándo hay submenús disponibles. Las opciones familiares incluyen un pequeño ícono de ángulo hacia abajo o un ícono de triángulo. Además, considere voltear los íconos de puntero cuando los submenús estén abiertos.

Organizar la información de forma intuitiva. Asegúrese de que la jerarquía de la información se alinee con los modelos mentales de los usuarios. En un sitio de comercio electrónico, por ejemplo, considere si es más probable que un comprador espere que los artículos estén organizados por marca o tipo de artículo. Si un usuario hace clic en la categoría “Zapatos”, ¿esperará que el submenú presente opciones para zapatillas, sandalias y botas? ¿O esperarán ver un submenú que enumere todas las marcas de zapatos que ofrece la tienda? Observar tanto la investigación de los usuarios como la de la competencia aclarará esto.

Asegúrese de que los usuarios sepan dónde están en todo momento. Siempre resalte el enlace en el menú principal que corresponde a la página en la que se encuentra el usuario. Si la página actual está en un submenú, resalte el enlace del submenú y el elemento principal también en el menú principal. Por ejemplo, si alguien que usa un sitio web del gobierno para renovar su licencia de conducir navegara desde el enlace “Residentes” en el menú principal al enlace “Servicios para conductores” en el submenú y luego a una página con un formulario de renovación, tanto el ” Los enlaces “Residentes” y “Servicios para conductores” permanecerían resaltados.

Mantenga la copia simple. Un menú no es lugar para juegos de palabras ingeniosos; asegúrese de que las etiquetas de los enlaces tengan un fuerte olor a información . Esto significa mantener los nombres de las etiquetas sencillos y descriptivos para que los usuarios sepan de inmediato lo que encontrarán cuando hagan clic. Cuanto más clara sea la copia, más rápidamente los usuarios encontrarán lo que necesitan.

Prioriza la legibilidad. Use un tipo de letra sans-serif simple y asegure un espacio adecuado alrededor de los elementos para evitar el desorden. Asegúrese de que el fondo sea lo suficientemente opaco para bloquear lo que se encuentra detrás del menú. Pero no ignore la marca general del sitio. Si bien la legibilidad es lo primero, asegúrese de que el estilo del menú complemente el resto de la apariencia del sitio.

Haz que hacer clic y tocar sea accesible. Para que el menú sea accesible para los usuarios con problemas de control motor fino, siga las pautas de diseño de materiales de Google y formatee los elementos en los que se puede hacer clic para que tengan un tamaño de al menos 48 x 48 píxeles.

CONSEJOS DE DISEÑO PARA ESCRITORIOS

Incluso con una tendencia creciente hacia los dispositivos móviles, todavía hay muchas razones por las que los clientes pueden requerir sitios de escritorio con todas las funciones. Por ejemplo, es posible que necesiten poner a disposición más información en línea de lo que es factible para un sitio móvil, como un sitio web para una universidad o una institución financiera. O su investigación puede mostrar que sus usuarios simplemente confían más en las computadoras de escritorio.

Un menú de escritorio debe ser fácil de escanear, ofrecer interacciones claras y, por supuesto, ser receptivo. También debe ser lo más consistente posible con el sitio móvil para que la experiencia sea intuitiva para los visitantes que regresan.

Los menús deben abrirse al hacer clic, no al pasar el mouse. Una de las decisiones más fundamentales que deberá tomar es cómo accederán los usuarios al menú del sitio. ¿Será suficiente simplemente pasar el puntero sobre el elemento principal, el nombre de la categoría, para activar la aparición del menú o los usuarios tendrán que hacer clic en él?

El enfoque de desplazamiento es popular, pero hacer clic para abrir es la mejor manera de garantizar que el menú funcione de manera confiable e intuitiva en todos los dispositivos. El enfoque de clic permite que los sitios web funcionen de manera más consistente en los monitores de computadora tradicionales y en las pantallas táctiles, y evita muchas frustraciones que ocurren con el enfoque de desplazamiento, que incluyen:

  • Túneles flotantes estrechos. Un túnel flotante es el camino que debe tomar un mouse para navegar mientras mantiene el menú abierto. Si es demasiado estrecho, el menú puede desaparecer antes de que el usuario llegue al enlace que desea.
  • Apertura accidental. Es probable que un menú flotante se abra sin darse cuenta si un usuario intenta navegar por él en su camino a otra ubicación en la página. Establecer un breve retraso resuelve ese problema, pero puede causar frustración cuando el usuario quiere abrir el menú.
  • UX inconsistente en pantallas táctiles. Los menús flotantes no funcionan en pantallas táctiles. Requieren una corrección de código para detectar pantallas táctiles y cambiar a tocar para abrir; a medida que la línea entre la computadora portátil y la tableta se difumina cada vez más, esas soluciones pueden volverse obsoletas.
  • Preguntas sobre lo que se puede hacer clic. Con los menús flotantes, los usuarios no siempre saben si se puede hacer clic en el enlace principal hasta que intentan hacerlo. Eso es lo contrario de intuitivo.
  • Accesibilidad. Los menús flotantes pueden presentar problemas para los usuarios que usan lectores de pantalla o navegan a través del teclado.

Elija el diseño correcto: Menú desplegable vs Mega. Si el sitio de escritorio usa un diseño de menú tradicional (una barra de menú horizontal situada en la parte superior de la página), hay dos tipos de submenús que puede considerar: un menú desplegable estándar de una sola columna o un mega menú de varias columnas.

Considere usar un menú desplegable si la categoría principal contiene menos de ocho enlaces. Si el menú desplegable es lo suficientemente largo como para requerir un desplazamiento vertical, debería considerar organizar la información de manera diferente, tal vez como un mega menú o refinando las categorías principales.

Un mega menú es un tipo de menú anidado que generalmente usa un diseño amplio que puede extender el ancho del navegador. Debe usar este tipo de menú si los submenús contienen muchos enlaces diferentes que se pueden agrupar en columnas. Por lo general, verá menús como este en grandes sitios de comercio electrónico.

 

Este mega menú de Toyota no solo organiza las selecciones de vehículos según la disponibilidad híbrida, sino que también usa fotos para ayudar a los usuarios a identificar cada modelo.

Al diseñar un mega menú, considere lo siguiente:

  • Agregue imágenes o íconos para que la información sea más fácil de escanear.
  • Agregue títulos a las páginas relacionadas del grupo.
  • Agregue descripciones si los nombres de las categorías no son evidentes.

Los mega menús pueden ser difíciles de leer y navegar en dispositivos móviles, pero a veces la mejora en UX en una pantalla más grande hace que valga la pena hacer el trabajo adicional para reconfigurar la información para dispositivos móviles.

Agregue estados de desplazamiento claros. Incluso con menús de clic para abrir, incluidos los estados de desplazamiento claros para todos los elementos en los que se puede hacer clic, hace que las interacciones sean satisfactorias y asegura a los usuarios que los enlaces están activos. Puede oscurecer ligeramente el fondo del área en la que se puede hacer clic para indicar un estado de desplazamiento. Solo asegúrese de que el área flotante coincida con el área en la que se puede hacer clic. Si las pruebas muestran que los usuarios necesitan más orientación o contexto, considere agregar nombres de etiquetas más descriptivos o información sobre herramientas, siempre que no bloquee nada importante.

Haga clic para cerrar los submenús. Mantenga las cosas intuitivas cerrando los menús cuando los usuarios hacen clic en otro lugar o cuando abren otro submenú. Así es como funcionan los campos de entrada desplegables en los formularios, por lo que a la mayoría de los usuarios les resultará familiar.

Habilite la navegación con teclado en el escritorio. No todos usan un mouse para navegar, por lo que el menú debería permitir a los usuarios navegar usando solo un teclado. Esto significa que todos los enlaces deben tener distintos estados enfocados para que los usuarios puedan ver dónde están de un vistazo. Por lo general, un marco de color más oscuro funciona bien para indicar el estado enfocado.

CONSEJOS DE DISEÑO PARA PANTALLAS MÓVILES

Si aún no está diseñando primero para dispositivos móviles, deberá optimizar el menú para un dispositivo portátil. Los diseños de menú tradicionales rara vez funcionan bien en pantallas muy pequeñas; si simplemente reduce la barra de menú del escritorio, nadie podrá leerla. Estas pautas lo ayudarán a realizar una transición exitosa a la pantalla pequeña.

Simplificar el menú principal. Debido a que las pantallas de los teléfonos inteligentes son tan pequeñas, gran parte de la información que encontraría en un menú de escritorio deberá ocultarse inicialmente. La barra de menú principal tendrá que ser muy simple, pero es una buena idea mostrar los enlaces más importantes para mejorar la capacidad de búsqueda. Puede colocar la barra de menú en la parte inferior o superior de la pantalla.

Agregue un activador de menú. Dado que todo o parte de un menú móvil puede estar oculto, los usuarios necesitarán una forma de encontrarlo. Agregar un ícono de hamburguesa a la barra de menú o en un botón flotante de fácil acceso es una solución popular, una que muchos usuarios reconocerán. Sin embargo, el menú de hamburguesas no es la única opción. Si está diseñando para usuarios mayores, podría ser mejor usar un cuadro con la palabra “Menú”, por ejemplo. O bien, si desea que las funciones del sitio sean más destacadas, es posible que desee mostrarlas en un menú con pestañas en la parte superior o inferior.

Poner el menú en una barra lateral. Hay muchas maneras diferentes de diseñar un menú móvil. Puede usar un diseño de ancho completo, que funciona en cualquier situación; un cajón inferior, que es mejor cuando solo hay unos pocos enlaces; o un menú de esquina circular, que es una opción de aspecto futurista para un menú pequeño sin submenús. Una buena opción es utilizar una barra lateral con un fondo oscuro y translúcido que bloquee el contenido de la página, eliminando así las distracciones, y que permita a los usuarios tocarla fácilmente para cerrarla. También considere usar una animación de deslizamiento desde la izquierda para evitar una experiencia discordante. Para los menús de la barra lateral y del cajón inferior, asegúrese de que el menú se pueda desplazar verticalmente para que nada quede cortado en pantallas más pequeñas o en modo horizontal.

Permita que los usuarios cierren el menú fácilmente. Los usuarios pueden tocar intuitivamente un menú para cerrarlo, pero considere agregar también un botón X. Puede convertir el ícono de la hamburguesa en una X o agregar uno en la esquina superior derecha del menú.

Utilice secciones desplegables para submenús individuales. Considere usar secciones expandibles si el menú tiene solo un nivel de submenús. Puede expandirlos debajo del elemento principal y usar un color de fondo diferente para mayor claridad. También puede permitir que los usuarios expandan varios submenús al mismo tiempo. Considere usar un ángulo hacia abajo o un ícono de triángulo en el lado derecho del elemento principal para indicar que hay un submenú disponible.

El sitio web móvil de la empresa de software de relaciones públicas Cision presenta secciones en expansión para submenús. En el escritorio, el sitio de Cision utiliza abrir con un clic, lo que facilita que los usuarios cambien intuitivamente para tocar en el móvil.

Reemplace mega menús y múltiples submenús con menús superpuestos. Si necesita expandir más de un submenú o reconfigurar un mega menú, opte por un enfoque superpuesto: en lugar de expandir un submenú debajo o al lado del principal, haga que el submenú reemplace al principal. Con este enfoque, deberá incluir un enlace “Atrás” en todos los paneles excepto en el primer nivel. Para el menú de nivel superior, considere usar un ícono de ángulo recto o una flecha hacia la derecha para los elementos principales.

Para reconfigurar su mega menú en dispositivos móviles, Toyota utiliza un enfoque superpuesto. Cuando el usuario hace clic en “Autos y minivan”, un nuevo menú que muestra una lista de autos reemplaza el menú principal.

Pre-abrir submenús. En el escritorio, es útil resaltar la página actual y su principal. En pantallas pequeñas, considere llevar esto un paso más allá. Si un usuario toca para abrir el menú principal y la página en la que se encuentra actualmente está dentro de un submenú, considere abrir automáticamente el submenú también, para que el usuario comprenda dónde se encuentra en relación con el resto de los elementos del menú.

 

Cuando un usuario hace clic en el menú de hamburguesas mientras está en la página “Favoritos de la familia de Navidad” de Marks & Spencer, el botón de menú abre automáticamente el submenú de Navidad y resalta la página en la que se encuentra el usuario.

MANTÉNGALO CLARO Y CONSISTENTE

La navegación es un componente crucial de la experiencia del cliente. Los usuarios no quieren ir a la búsqueda del tesoro o pasar más tiempo del necesario recorriendo los menús. Si no pueden encontrar fácilmente lo que necesitan, pueden comprometer los recursos de su cliente con una llamada de soporte o, peor aún, llevar su negocio a otra parte.

Un menú multinivel bien diseñado es un componente clave de cualquier sitio web con una arquitectura de información compleja. Si bien estas pautas nunca deben reemplazar la investigación y las pruebas de los usuarios, le serán de utilidad en una amplia variedad de casos de uso.

Más Lecturas En El Blog De Toptal:

  • La guía completa de arquitectura de la información
  • Diseño receptivo: mejores prácticas y consideraciones
  • Principios de arquitectura de la información para dispositivos móviles (con infografía)

Leave a Comment