Alternativas de menú de hamburguesas para navegación móvil

Si está trabajando en productos digitales, ya ha leído docenas de artículos que describen cómo y por qué la navegación de hamburguesas en dispositivos móviles (¡y de escritorio!) Daña las métricas de UX debido a su baja capacidad de detección y eficiencia. (Puede leer algunos de los mejores artículos sobre el tema aquí, aquí, aquí y aquí).

Afortunadamente, cada vez más sitios y aplicaciones están experimentando con soluciones alternativas y más eficientes para este mismo problema. Ninguna de las ideas enumeradas aquí es mejor que las demás, su viabilidad y rendimiento obviamente dependen del contenido y el contexto.

1. Pestañas

Si tiene un número limitado de secciones en su sitio web o aplicación y los usuarios deberían poder cambiar rápidamente entre estas secciones, una navegación con pestañas podría ser la solución.

Las pestañas parecen ser el patrón de navegación más simple, sin embargo, debe considerar algunas cosas al diseñarlas:

  • No debe tener más de cinco secciones para mostrar
  • Una de las pestañas siempre debe estar activa y debe resaltarse visualmente
  • La primera pestaña debe ser la página de inicio o la pantalla de inicio y el orden de las pestañas debe estar relacionado con su prioridad u orden lógico en el flujo de usuarios
  • Las pestañas se pueden mostrar en la parte superior o inferior de la pantalla, según el contexto o la plataforma (sin embargo, las pestañas inferiores ahora también son un patrón en Android)
  • Los iconos sin etiquetas solo funcionan para acciones comunes con iconos realmente conocidos y para interfaces que los usuarios usan con frecuencia (por ejemplo, aplicaciones de redes sociales)
  • Más consejos sobre el diseño de navegación con pestañas

Ejemplos: LinkedIn y Google Photos

Pestañas de solo íconos en LinkedIn y pestañas de íconos + etiquetas en Google Fotos

2. Pestañas con la opción "más"

Cuando hay más de 5 secciones principales, una solución práctica podría ser mostrar las cuatro secciones más priorizadas y tener una lista de quinto elemento "todo lo demás":

Los principios de diseño para esta solución son básicamente los mismos que para las pestañas simples. El elemento "más" puede vincularse a una página de navegación o funcionar como un menú desplegable con las secciones restantes:

Podría argumentar que el elemento 'más' no es mejor que el menú de hamburguesas (está algo oculto y su etiqueta no se refiere a su contenido en absoluto), sin embargo, si ha hecho la priorización correcta, la mayoría de los usuarios buscarán de todos modos para uno de los cuatro elementos visibles, por lo que la experiencia de navegación para la mayoría seguirá mejorando.

Ejemplo: Facebook

El feed de noticias, las solicitudes de amistad, la notificación y la búsqueda siempre están disponibles en el encabezado, toda la funcionalidad restante está disponible en el menú

3. Menú de colapso progresivo

Una versión más sofisticada de la navegación "pestañas + más" es diseñar un menú que se adapte al ancho de la pantalla, muestre la mayor cantidad de navegación posible y ponga todo lo demás debajo de un elemento Más si es necesario:

Esto significa que el menú Más contiene más elementos en una resolución más baja: elementos "saltar" en Más cuando no hay suficiente espacio para mostrarlos. La flexibilidad de esta solución proporciona una mejor experiencia que las "pestañas + más", especialmente en tamaños de pantalla intermedios.

Ejemplo: BBC

El menú principal de BBC se representa de acuerdo con el tamaño real de la pantalla para mostrar siempre tantos elementos como sea posible

4. Navegación desplazable

Si tiene varios elementos de navegación sin una gran distinción en las prioridades y tener una categoría de "más" sería un mal compromiso, otra estrategia es enumerar todos los elementos en una vista desplazable:

La desventaja de esta solución es que todavía solo los pocos elementos superiores son visibles sin desplazamiento y todos los restantes quedan fuera del lienzo. Sin embargo, esta es una solución aceptable cuando se espera que los usuarios exploren el contenido, p. en una tienda web o categorías de noticias.

En lo que respecta al diseño visual, debe asegurarse de proporcionar suficientes sugerencias visuales para sugerir que hay más elementos disponibles al desplazarse horizontalmente (por ejemplo, desvaneciendo y / o apagando el último elemento visible).

Ejemplos: Medium y Google

Las categorías principales se pueden desplazar en tamaños de pantalla más pequeños en Medium.comLas categorías de la página de resultados de búsqueda de Google están disponibles en una vista desplazable

5. Menús desplegables

Un patrón poco común pero interesante es usar menús desplegables cuando la visibilidad y accesibilidad de las otras secciones no es esencial:

El menú desplegable en realidad tiene un doble papel en este caso: primero, sirve como título de página y la flecha hacia abajo sugiere que existe la posibilidad de cambiar rápidamente a secciones similares. Aunque las opciones están ocultas en este caso, el diseño desplegable sugiere que la lista contendría opciones que son hermanos o hijos de la página actual (y debería usarse principalmente para este propósito).

Ejemplo: Barnes & Noble y Duolingo

Al buscar libros, la categoría actual y las opciones de navegación / filtrado siempre están disponibles en un menú desplegable en bn.comSi bien no es una interacción común para la mayoría de los usuarios, Duolingo le permite cambiar rápidamente entre los idiomas que practica mediante un menú desplegable

Y a veces, sorprendentemente, el menú de hamburguesas podría ser una buena opción

Dado que el principal inconveniente del menú de hamburguesas es su baja capacidad de descubrimiento, se recomienda considerar una de las alternativas a la hora de diseñar el menú de navegación principal. Sin embargo, al diseñar opciones de navegación secundarias, este patrón podría ser una solución adecuada.

Si las opciones principales están disponibles como botones destacados de llamada a la acción en pantalla, el menú de hamburguesas parece un buen lugar para toda la navegación secundaria:

Este patrón se puede usar cuando la navegación principal está diseñada alrededor de un flujo de usuario y las opciones relacionadas están claramente disponibles en la pantalla. Uber podría ser un buen ejemplo:

Como todo lo relacionado con esta pantalla está diseñado para solicitar un automóvil, las opciones secundarias, como el Historial y la Configuración, no deberían estar disponibles de manera más destacada que en un menú de hamburguesas.

Google Translate es realmente similar a esto:

Dado que la funcionalidad principal (cambiar de idioma e ingresar texto para traducir) es la parte más destacada de la pantalla, el menú oculto es un excelente lugar para alojar secciones como Ayuda y Comunidad.

Conclusión

No existe una solución única para la navegación móvil, siempre depende de su producto, de sus usuarios y del contexto. Lo que funciona bien para otros podría no funcionar para usted y viceversa. Sin embargo, la base de cada navegación bien diseñada es la arquitectura de la información: estructura clara, prioridades y etiquetas basadas en las necesidades de los usuarios. Entonces, ¿por qué no comenzar a encontrar la navegación móvil más eficiente para su producto hoy?

Estoy seguro de que hay muchas otras ideas y patrones geniales para una navegación móvil eficiente. ¿Cuáles debo agregar a esta colección? Envíelos a mi manera en la sección de comentarios. (Por cierto, ¡también estamos contratando!)