20 Jun 2019
Navegación mobile y menú hamburguesa
Lectura: 16 mins.
|
Dificultad:

Navegación mobile: ¿hamburguesa o receta vegana?

Durante los procesos de diseño y optimización web a menudo surgen temas y debates recurrentes, generalmente relacionados con la experiencia multi-dispositivo. Este artículo nace tras un intenso debate —no llegó la sangre al río— en relación a la conveniencia y colocación de un menú mobile.

Es un artículo cortito y al pie, de lectura fácil, pero si tienes prisa puedes ir directamente al resumen final del artículo.

En este caso se trataba de un re-diseño para la optimización del rendimiento del sitio (CRO) y se partía de un menú tipo hamburguesa en la parte izquierda del dispositivo. Algunos indicadores de uso nos animaron a pensar que podría ser interesante testar su cambio de situación (a la derecha).

Una vez abierto el debate, y como suele ocurrir en estos casos, terminamos dando la vuelta completa al caso y colocando sobre la mesa todas las opciones. Fruto de dicho debate interno nace este artículo, donde hablaremos de las diferentes opciones de navegación móvil que existen y cuándo es interesante emplear cada una de ellas.

En la actualidad se puede distinguir entre tres corrientes mayoritarias:

  • Barra superior de navegación.
  • Barra inferior de navegación (extendido en apps).
  • Otras opciones de navegación.

Barra superior de navegación

Es la opción predominante en versiones web para dispositivos móviles (que no apps). Este tipo de barras de navegación —casi— siempre incluyen un menú desplegable, conocido como hamburguesa, por su forma característica (tres rayas horizontales).

Evolución hamburguesa
De aquí lo de “hamburguesa”.

Es en este punto cuando nace una de las principales dicotomías a las que nos enfrentamos en el sector a la hora de (re)diseñar u optimizar un sitio web:

  • Hamburguesa a la izquierda.
  • Hamburguesa a la derecha.

Hamburguesa a la izquierda

Probablemente sea la manera originaria de colocar el menú hamburguesa desde sus inicios, heredando los principios de usabilidad tradicionales (por no llamarlos Desktoperos) que argumentan cosas como:

  • En la cultura occidental leemos de izquierda a derecha y de arriba hacia abajo.
  • El usuario está acostumbrado a buscar en esa esquina el menú de navegación.
  • Generalmente facilita la recolocación de bloques en la maquetación responsive.
Menú hamburguesa Aukera
¿Quién no ha usado una hamburguesa en su web?

Hamburguesa a la derecha

Vale, entonces la solución es colocar el menú hamburguesa a la izquierda, ¿no? Pues curiosamente el propio Google no ayuda a esclarecer el asunto. Ante la búsqueda “hamburger menu left or right” nos encontramos con este resultado destacado:

Resultado de Google para “hamburger menu left or right”
Resultado de Google para “hamburger menu left or right”.

“Las acciones primarias deberán mostrarse a la derecha y las secundarias a la izquierda (probablemente debido a la mayoría diestra). Así que habrá que mostrar el menú hamburguesa a la derecha solo cuando este es la acción principal.

Es raro. Parece más una opinión que un paradigma real.

Pero es que curiosamente el usuario que escribe dicha respuesta (resultado destacado en el buscador) referencia a la guía de “Material Design” de Google. En ella se anima a colocar el menú hamburguesa en la parte izquierda de la barra superior de navegación:

Barra de navegación superior
Estructura de barra de navegación superior según Google.

En cualquier caso, esto no es cuestión, como en la política, de elegir entre izquierda y derecha. También influyen otros aspectos como la arquitectura de contenidos, es decir, el número de ítems que sí o sí debe incluir un menú principal.

Al respecto, el grupo Nielsen Norman (de Jakob Nielsen) propone en su post sobre menú hamburguesa las siguientes recomendaciones de uso:

  • Si tu sitio tiene 4 o menos ítems principales de navegación, muéstralos como enlaces visibles.
  • Si tu sitio tiene más de 4 ítems principales, tendrás que ocultar alguno (por ejemplo, a través de un menú tipo hamburguesa); afecta a la usabilidad, pero en móviles menos que en Desktop.
  • Facilita otros enlaces internos a la información más relevante de tu sitio, a modo de refuerzo.
  • Por Dios (esto lo he añadido yo), no utilizar hamburguesas en las versiones Desktop.

Y de momento este debate lo dejamos aquí. Más tarde volveremos a las guías de diseño de Google y a las hamburguesas. Ahora exploremos algunas otras opciones.

Barra inferior de navegación

Esta es la opción vegana, la tendencia actual. Y no pasa porque la hamburguesa sea de tofu (valga el oxímoron), sino por, directamente, eliminar la hamburguesa de las opciones principales de navegación.

Esta tendencia, muy probablemente, responda al crecimiento de las pantallas en el último lustro, donde hemos pasado de unos estándares de 3,5 pulgadas hasta las 6 pulgadas de media actuales. De esta forma, la limitación propia de la longitud de nuestros pulgares hace más difícil llegar hasta la parte superior de estas grandes pantallas.

En este sentido, recomiendo la lectura del post de Scott Hurff, “Cómo diseñar para pulgares en la era de las pantallas gigantescas”, que ilustra a la perfección este fenómeno:

Cómo diseñar para pulgares en la era de las pantallas gigantescas
El pulgar cada vez más lejos de la “zona hamburguesa”.

Sin embargo hay un factor un tanto desconcertante: la misma plataforma (por ejemplo, Linkedin) utiliza una barra superior en móviles cuando accedemos vía navegador y una barra inferior —de similar funcionalidad— en móviles cuando accedemos desde la app:

Linkedin, versión mobile de navegador (web).
Linkedin, versión mobile de navegador (web).

 

Linkedin, versión app.
Linkedin, versión app.

¿Por qué? Personalmente creo que no somos usuarios omni-dispositivo, es decir, que arrastramos herencias del entorno tradicional o Desktop, que nos hacen comportarnos diferente en un mismo dispositivo, en función del consumo a través de un navegador o una app.

Sin embargo, la razón principal probablemente sea que los diseñadores web y app son especies diferentes. Y me explico antes de ser lapidado: la mayoría de grandes marcas online (como las redes sociales) trabajan por un lado su app y por otro lado su web, bajo el paradigma de que la primera responde al entorno mobile y la segunda a todo lo demás.

Es decir, las versiones web para móviles (que no apps) a menudo están basadas en un diseño y conceptualización desktop first y, por tanto, nacen limitadas en ciertos aspectos. Pero para ver el potencial real y completo de una gran marca en móviles, sabemos que toca instalarse su app.

Siendo así, la mayoría de apps generalistas están utilizando este tipo de barras de navegación inferior. Al principio hubo bastante polémica con el abandono de la hamburguesa, como en el caso de Spotify hace unos años, pero el uso de barras inferiores —o superiores en ciertos casos— ya ha sido globalmente adoptado.

El propio Google, a través de sus anteriormente mencionadas guías de diseño Material Design, ofrece unas pautas de diseño de estos elementos, originalmente ideados para aplicaciones (apps) móviles.

Es decir, discrimina entre la opción de barra superior de navegación (ver imagen mostrada en el punto anterior) o también esta barra inferior de navegación móvil. No se moja mucho, pero coloca por encima en su temario esta última opción, así que suponemos que es su favorita a largo plazo.

Google argumenta que:

  • La barra inferior debe usarse para destinos de primer nivel, que deben estar accesibles a lo largo de todo el sitio/app.
  • Sin embargo, no deberá usarse para tareas concretas (ej: ver un email concreto) ni para configuraciones de usuario.
  • Por supuesto, ha de evitarse su utilización en versiones Desktop.

En lo relativo a su diseño funcional, delimita entre 3 y 5 el número de ítems contenidos en la barra:

NO incluir menos de 3 items en la barra de navegación
NO incluir menos de 3 ítems en la barra de navegación.

 

NO incluir más de 5 ítems en la barra de navegación
NO incluir más de 5 ítems en la barra de navegación.

 

Y también alerta sobre la confusión que genera combinar una barra de navegación con el uso de pestañas (estas hacen referencia a una serie de opciones secundarias al mismo nivel, mientras que la barra debe representar acciones primarias sin conexión entre ellas):

Cuidado con la combinación de barra de navegación y pestañas
Cuidado con la combinación de barra de navegación y pestañas.

Volver a reiterar que esta opción, a día de hoy, está bastante confinada a los entornos app. Sin embargo, la lógica nos empuja a pensar que las virtudes de las app terminarán llegando a las versiones de navegador, al tiempo que maduramos como usuarios multi-plataforma y multi-dispositivo.

Otras opciones de navegación (mobile)

Las tres opciones anteriores (barra superior con hamburguesa izquierda, barra superior con hamburguesa derecha y barra inferior) no son las únicas que existen y hay algunos sitios web o aplicaciones que optan por soluciones más creativas, ya sea con una hamburguesa central o con diferentes barras de navegación y/o pestañas.

Al respecto resulta especialmente interesante la “Guía definitiva de menú hamburguesa y sus alternativas”, que presenta la gente de UXplanet. En ella encontramos opciones como:

  • Hamburguesa prominente o flotante (típico botón que levita).
  • Menú por pestañas inferior —similar a la barra inferior mencionada antes—.
  • Menú por pestañas superior.
  • Deslizamiento de página.
  • Botón de menú etiquetado (en lugar de una hamburguesa, mostrar la palabra “menú”).
  • Pestañas de navegación que deslizan hacia afuera (te sonará de apps de Google).
  • Combinaciones de las anteriores.

Entonces, ¿cuál es la buena? Aquella que mejor te funcione a ti.

Esto no es mágico ni universal, se trata de pensar —primero —y testar —después— en función del conocimiento de tus usuarios y las hipótesis que plantees para mejorar su experiencia.

Por ejemplo, en este caso práctico la gente de Redbooth (un SAAS de gestión de proyectos que, por cierto, utilizamos en Aukera) explica por qué y cómo decidieron migrar desde una app conceptualizada en torno al típico menú de hamburguesa hasta llegar a la barra de navegación.

A partir de Analytics y unas métricas básicas pudieron comprobar cómo la decisión fue acertada, así que se instauró definitivamente… hasta hoy.

Sesiones en Redbooth
Incremento del número de sesiones tras el nuevo menú de navegación.

 

Redbooth duración de la sesión
Incremento del tiempo de sesión tras el nuevo menú de navegación.

 

Las principales marcas y sus menús de navegación

Iba a terminar este post en el párrafo anterior, sin embargo, me ha parecido interesante la idea que proponen en este post de comunic-art, donde echan un vistazo a diferentes sitios archiconocidos y las soluciones mobile que estos han adoptado.

Habrá que tener en cuenta que, en la mayoría de casos, disponen de una app y que este mini estudio se limita a la versión web para dispositivos móviles.

Empecemos por los sitios web internacionales con más tráfico según la wikipedia, que son:

Google

Quizá no sea representativo dado que aquí la OPCIÓN —con mayúsculas— es realizar una búsqueda en el cajetín. Casi que da lo mismo lo que hagamos con la hamburguesa.

Dada la escasez de opciones relevantes, parece lógico no implementar una barra inferior de navegación.

Versión mobile de google.com.
Versión mobile de google.com.

Youtube

Pues es un poco lo mismo, de hecho se suele hablar de Youtube como “el segundo buscador más utilizado del mundo”. En este caso, y dado su componente social, existen una serie de opciones secundarias y del mismo nivel que componen la barra de pestañas:

Versión mobile de youtube.com.
Versión mobile de youtube.com.

Facebook

La red social se compone de una serie de acciones principales en una barra superior (5 ítems), donde el menú desplegable (hamburguesa) adquiere un valor secundario, de ahí que su localización en la parte derecha parezca tener mucho sentido:

Versión mobile de facebook.com.
Versión mobile de facebook.com.

Baidu

Volvemos al sector buscadores. Está claro que la opción principal, recuadrada para que nadie se despiste, es el cajetín de búsqueda. De nuevo, la navegación adicional es menos relevante:

Versión mobile de baidu.com.
Versión mobile de baidu.com.

Wikipedia

Aquí por fin nos encontramos con un caso discutible, donde generalmente —al menos en mi caso— la acción principal podría ser la búsqueda de información y, sin embargo, el menú desplegable tipo hamburguesa roba el protagonismo a las opciones de búsqueda (lupa derecha y cajetín central).

Es uno de esos casos donde debería testarse en profundidad y, probablemente, nos llevásemos una sorpresa en lo relativo a la forma en que el usuario consume el sitio web.

Por ejemplo, y es solo invención, quizá el tráfico con ansia informacional llegue de forma casi exclusiva desde el canal orgánico —búsquedas en Google— con un alto rebote, mientras que el tráfico que realmente utiliza la plataforma —sin generar rebote, siendo a quienes se destinan las opciones de navegación— puede demandar otro tipo de opciones (como aquellas contenidas tras el desplegable de la hamburguesa):

Versión mobile de wikipedia.org
Versión mobile de wikipedia.org

Todo esto en cuanto a sitios top a nivel mundial. Pero vamos a mirar también un poco el estado del arte en la internet patria. Algunos de los sitios web más populares según Alexa son:

OKdiario

Interesante ejemplo donde se combina una barra de navegación superior con una franja de navegación por pestañas deslizante (este desliz, valga el juego de palabras, no es demasiado intuitivo). Dichas pestañas parecen ser enlaces directos a las categorías de contenido ordenadas, suponemos, por su grado de demanda:

Versión mobile de okdiario.com.
Versión mobile de okdiario.com.

Sin embargo, resulta decepcionante que el desplegable de la hamburguesa muestre simplemente el catálogo completo de categorías, incluyendo las de las pestañas y, además, alterando ligeramente el orden de estas. Quedan cosas por pulir.

Marca

Siguiendo la misma línea del anterior ejemplo, pero orientado al mundo del deporte, en Marca se ofrecen las noticias más destacadas y de última hora, acompañadas de un menú de pestañas con las consultas habituales de los usuarios (Noticias, Resultados, Última hora):

Versión mobile de marca.com.
Versión mobile de marca.com.

En este caso el desplegable de la hamburguesa sí que complementa la información de las pestañas, ya que ofrece una navegación por deporte (fútbol, fútbol internacional, baloncesto, motor, etc.).

El País

En el caso de este periódico se prescinde de la navegación por pestañas. Quizá hayan testado lo suficiente para determinar que es más interesante centrarse en las noticias de última hora, las cuales presentan de forma bastante ordenada y atractiva en su página principal.

Versión mobile de elpais.com.
Versión mobile de elpais.com.

Las opciones de hamburguesa complementan perfectamente la navegabilidad, con opciones como la selección de edición (española, catalana, americana —latina—, inglesa, brasileña) o la navegación por categorías de contenido.

 

Pero como tanto sitio de noticias aburre-cansa bastante, no queríamos terminar sin referenciar algunos de los principales sitios de e-commerce nacionales, que nos pone mucho lo transaccional (y además los objetivos de la navegación deberían ser bastante diferentes).

El Corte Inglés

Una muestra clásica y contundente de lo que el usuario demanda en un entorno e-commerce. Una barra superior de navegación con el menú —hamburguesa— principal para navegar por categorías, el buscador de productos y la funcionalidad secundaria (tres puntitos) para las opciones de cuenta de usuario:

Versión mobile de elcorteingles.es.

PC Componentes

Un poco lo mismo que el caso anterior, aunque menos minimalista. Además incluye una serie de opciones de navegación adicionales (ofertas, promociones, outlet, etc.) en el caso de la Home:

Versión mobile de pccomponentes.com.
Versión mobile de pccomponentes.com.

La Casa del Libro

Otro buen ejemplo transaccional con una barra superior minimalista (hamburguesa, logo, cuenta) y una segunda barra destinada a la búsqueda de producto. En este caso, la propuesta de valor recae, además de en las promociones estacionales, en las ventajas de la compra online (envío gratis, pago con PayPal, recogida en tienda, etc.):

Versión mobile de casadellibro.com.
Versión mobile de casadellibro.com.

Resumen

  • En navegador/web versión mobile, predomina la barra de navegación superior.
    • Es aquí donde tiene mayor sentido el uso del menú hamburguesa.
      • Aunque hay polémica al respecto, aún parece más intuitiva la coloación de las acciones principales a la izquierda (generalmente, la hamburguesa es principal).
      • Los defensores de su colocación a la derecha argumentan la accesibilidad táctil, si bien para las nuevas —y grandes— pantallas resulta más cómodo navegar con una barra inferior.
    • Para otras acciones secundarias (por ejemplo, opciones de cuenta de usuario), se puede incluir otra opción desplegable en el lado opuesto (derecho).
    • Cuando acciones concretas, como la búsqueda interna, supone la acción claramente prioritaria, pueden buscarse soluciones de diseño para eclipsar los menús.
  • En las apps —y seguramente a largo plazo en los navegadores también— predomina la barra de navegación inferior.
    • Generalmente reñida con el uso de hamburguesas.
    • Debe contener entre 3 y 5 ítems principales.
      • En caso de existir más ítems principales habrá que ocultar algunos (por ejemplo con soluciones similares a la hamburguesa).
    • El resto de opciones, como la cuenta de usuario, pueden habitar otros espacios (como la zona superior, siempre que no existan solapamientos que afecten a la experiencia).
  • Existen otras opciones de navegación, aunque menos generalistas, en función de las particularidades de cada sitio y las necesidades de sus usuarios.
  • No hay una fórmula mágica para casi nada, se trata de testar, testar y volver a testar.