5 Alternativas Inteligentes Para El Menú De Hamburguesa

El espacio en la pantalla es un recurso valioso para dispositivos móviles. Para enfrentar el desafío del espacio en una pantalla pequeña, y al mismo tiempo hacer que la navegación sea accesible, a menudo los diseñadores cuentan con ocultar la navegación detrás del icono de la hamburguesa, un excelente ejemplo de navegación oculta. En este artículo, veremos por qué la navegación oculta crea experiencias de usuario (UX por sus siglas en inglés), inadecuadas y qué alternativas están disponibles para los diseñadores.

 

¿POR QUÉ EL MENÚ HAMBURGUESA ES MALO PARA UX?

En el móvil, la navegación visible se usa 1.5 veces más que el menú hamburguesa

Si estás trabajando en productos digitales, probablemente ya hayas leído docenas de artículos que describen cómo el menú hamburguesa en el móvil, perjudica las métricas de UX.

El principal inconveniente es su baja capacidad de descubrimiento, y esto está respaldado por números reales. En estudios cualitativos, NNGroup descubrió que la navegación oculta es menos detectable que la navegación visible o parcialmente visible.

Esto significa que cuando la navegación está oculta, es menos probable que los usuarios usen la navegación. Los menús hamburguesa reducen el compromiso, hacen más lenta la exploración y confunden a las personas.

 

¿ENTONCES QUÉ DEBEMOS USAR EN SU LUGAR?

Si bien no existe una regla rígida para aplicaciones y sitios web móviles, una recomendación general es usar las visibles (las principales opciones de navegación se muestran en una barra de navegación visible), o navegación combinada, donde algunas de las principales opciones de navegación son visibles y algunas están ocultas bajo un elemento interactivo.

 

  • BARRA DE PESTAÑAS

 Si tienes un número limitado de destinos de alto nivel en tu sitio web o aplicación, una navegación con pestañas podría ser la solución. Cuando un menú es visible en la parte superior o inferior, básicamente está anunciando que hay una navegación y que las personas pueden ver las opciones de navegación desde el principio.

 

Las pestañas parecen ser el patrón de navegación más simple. Sin embargo, se deben considerar algunas cosas al diseñar este tipo de navegación:

  • La barra de pestañas permite mostrar 5 opciones o menos de navegación.
  • Una de las opciones siempre debe estar activa y, debe resaltarse visualmente, por ejemplo, usando un color que contraste.
  • La primera pestaña debe ser la página de inicio y el orden de las pestañas debe estar relacionado con su prioridad u orden lógico en el flujo de usuarios.
  • Es mejor usar iconos junto con etiquetas para cada opción de navegación. Los íconos sin etiquetas solo funcionan para acciones comunes, como un ícono de lupa para búsqueda y para interfaces que los usuarios usan con frecuencia (por ejemplo, Instagram).

Consejo: Para ahorrar espacio en la pantalla, la barra de navegación podría ocultarse/mostrarse, hacia abajo y hacia arriba.

 

  • BARRA DE PESTAÑAS CON LA OPCIÓN “MÁS”

 Cuando tienes más de 5 destinos de alto nivel, una solución práctica podría ser mostrar las 4 secciones priorizadas y tener un 5º elemento como la lista de las opciones restantes.

Los principios de diseño para esta solución, son básicamente los mismos que para la barra de pestañas.

Solo hay una excepción: el último elemento es el elemento “más”.

El elemento “más”, puede funcionar como un menú desplegable o incluso enlazar a una página de navegación separada con las secciones restantes. A primera vista, esta solución no es mucho mejor que el menú hamburguesa, ya que también oculta el contenido y su etiqueta no dice demasiado sobre lo que se esconde detrás de él.

Sin embargo, sí priorizas correctamente las opciones de navegación, la mayoría de tus usuarios tendrá 4 o 5 opciones de navegación de alta prioridad visibles en la pantalla todo el tiempo, por lo que la experiencia de navegación se verá beneficiada.

  • DESPLEGAR EL MENÚ PROGRESIVAMENTE

 El menú que se despliega progresivamente, también conocido como el patrón “Prioridad +”, es un menú que se adapta al ancho de la pantalla. Muestra la mayor cantidad de navegación posible y coloca todo lo demás bajo un botón “más”. Básicamente, este patrón es una versión sofisticada de la navegación “Barra de pestañas + más” donde el número de opciones de navegación, ocultas detrás del menú “más”, depende del espacio disponible en la pantalla.

La flexibilidad de esta solución proporciona una mejor experiencia de usuario que una “estática” “Barra de Pestañas + más “.

 

 

 

  • NAVEGACIÓN DESPLAZABLE

Similar a los dos patrones anteriores, este es otro enfoque para listas más largas. Si tienes varias opciones de navegación sin una gran distinción en prioridades, por ejemplo, géneros musicales, puedes enumerar todos los elementos en una vista desplazable.

Al hacer la lista desplazable, permites a los usuarios moverse de un lado a otro.

La desventaja de esta solución es que aún, solo los primeros artículos son visibles sin necesidad de desplazamiento, y todos los restantes están fuera de la vista. Sin embargo, esta es una solución aceptable cuando se espera que los usuarios exploren el contenido, por ejemplo, categorías de noticias, categorías de música o en una tienda en línea.

  • NAVEGACIÓN A PANTALLA COMPLETA

 Si bien con otros patrones mencionados en este artículo, la dificultad es minimizar el espacio que ocupan los sistemas de navegación, el patrón de pantalla completa toma el enfoque exactamente opuesto.

Generalmente, este enfoque dedica la página de inicio, exclusivamente a la navegación. Los usuarios presionan o deslizan para revelar opciones de menú adicionales, a medida que se desplazan hacia arriba y hacia abajo.

Este patrón funciona bien en aplicaciones y sitios web basados ​​en tareas y direcciones, especialmente cuando los usuarios tienden a limitarse a una sola rama de la jerarquía de navegación durante una sola sesión.

El canalizar a los usuarios de las páginas generales a las páginas detalladas, les ayuda a conocer lo que están buscando y a enfocarse en el contenido dentro de una sección individual.

 

Navegación a pantalla completa en Yelp

 Usando la navegación a pantalla completa, los diseñadores pueden organizar grandes porciones de información de una manera coherente, y revelar información sin abrumar al usuario. Una vez que el usuario toma su decisión sobre dónde ir, puedes dedicar todo el espacio de la pantalla al contenido.

 

CONCLUSIÓN

 Con los patrones de navegación para dispositivos móviles, no hay una solución única; siempre depende de tu producto, de tus usuarios y del contexto. 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. Ayudar a los usuarios a navegar, debe ser una prioridad para cada diseñador de aplicaciones.

Tanto los usuarios primerizos como los que regresan, deberían ser capaces de descubrir cómo moverse a través de tu aplicación con facilidad.

Leave a Reply

Your email address will not be published. Required fields are marked *

50% Complete

Suscribete al blog y no te pierdas ninguna actualizacion

Solo el mejor contenido, cero spam

Recibe estrategias de marketing digital