5 alternativas inteligentes para el menú de hamburguesas
El espacio de la pantalla es un recurso precioso en el móvil. Para enfrentar el desafío del espacio en una pantalla pequeña y, al mismo tiempo, hacer que la navegación sea accesible, los diseñadores a menudo confían en 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 UX incorrectos y qué alternativas están disponibles para los diseñadores.
Por qué el menú Hamburger es malo para UX
En el móvil, la navegación visible se usa 1.5 veces más que la hamburguesa
Si está trabajando en productos digitales, probablemente ya haya leído docenas de artículos que describen cómo el menú de hamburguesas en el móvil daña las métricas de UX. El principal inconveniente es su baja detectabilidad, y esto está respaldado por números reales. En estudios cualitativos, NNGroup encontrado esa 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 de Hamburguesa reducen el compromiso, ralentizan la exploración y confunden a las personas.
Entonces, ¿qué deberíamos 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 ya sea visible ( 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 algunos están ocultos bajo un elemento interactivo.
1. Barra de pestañas
Si tiene un número limitado de destinos de alto nivel en su 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 se anuncia 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 tabulación permite mostrar 5 o menos opciones de navegación.
- Una de las opciones siempre debe estar activa y debe resaltarse visualmente, por ejemplo, usando un color de 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 o orden lógico en el flujo de usuarios.
- Es mejor usar iconos junto con etiquetas para cada opción de navegación. Los iconos sin etiquetas solo funcionan para acciones comunes, como un icono 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 / revelarse hacia abajo y hacia arriba.
2. Barra de pestañas con la opción "Más"
Cuando tiene más de 5 destinos de nivel superior, una solución práctica podría ser mostrar las 4 secciones priorizadas y tener un 5º elemento como una 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. Desde el primer vistazo, esta solución no es mucho mejor que el menú de hamburguesas, ya que también oculta el contenido y su etiqueta no dice demasiado sobre lo que se esconde detrás de él. Sin embargo, si prioriza correctamente las opciones de navegación, la mayoría de sus usuarios tendrá 4 o 5 opciones de navegación de alta prioridad visibles en la pantalla todo el tiempo para que la experiencia de navegación se mejore.
3. Progresivamente colapsando Menú
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 'Tab bar + more' 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 barra de pestañas "estática" + más ".
4. Navegación desplazable
Similar a los dos patrones anteriores, este es otro enfoque para listas más largas. Si tiene varias opciones de navegación sin una gran distinción en prioridades, por ejemplo, géneros musicales, puede enumerar todos los elementos en una vista desplazable. Al hacer la lista desplazable, permite 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 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.
5. 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. Este enfoque generalmente dedica la página de inicio exclusivamente a la navegación. Los usuarios presionan o deslizan incrementalmente 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 orientados, 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 de información general a las páginas de detalles 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, puede 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 para todos; siempre depende de su producto, de sus 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 principiantes como los que regresan deberían ser capaces de descubrir cómo moverse a través de su aplicación con facilidad.