Detalle de la publicación

¿Menú hamburguesa? ¡Aprende qué es y cómo usarlo!

15 diciembre, 2017

¿Menú hamburguesa? ¡Aprende qué es y cómo usarlo!

¿Menú hamburguesa? ¡Aprende qué es y cómo usarlo!

Una de las tendencias web que más se ha usado en los últimos años es la de utilizar menú hamburguesa. Este delicioso nombre es el que se le ha dado a este tipo de navegación, cuya funcionalidad permite que los elementos de la misma se mantengan ocultos, dejando así más espacio para el contenido de nuestra web, y mostrándolos solo al realizar alguna interacción con él.

Con el auge de Material Design y otros frameworks de diseño web adaptable, se ha generalizado el uso del icono de menú hamburguesa (icono con tres rayas horizontales), que indica que tras ese botón hay un menú con opciones. Este icono normalmente se ha generalizado en el diseño de interfaces móviles o adaptables para ahorrar espacio. Incluso, a veces, se usa fuera de ese contexto móvil.

menú hamburguesa 1 - Digital Gecko Caracas

Por qué usar menú hamburguesa

Es importante tener en cuenta una serie de cosas al construir tu web responsive. Y una de ellas es que la disposición de los elementos cada vez tiende más a asemejarse a la de los dispositivos móviles como tablets o smartphones.

Es por eso que interacciones, como la que destacamos hoy aquí, se hacen cada vez más relevantes puesto que facilitan la navegación y permiten dejar más espacio para el contenido.

Sus ventajas son claras: puedes incluir una gran cantidad de información y, al mismo tiempo, ofrecer una forma coherente de encontrar opciones adicionales. Además, se trata de un estándar de facto, que los usuarios han aprendido a reconocer, y muchos frameworks de diseño adaptable ya llevan integrada esta solución, lo que facilita el despliegue y ese reconocimiento de los usuarios.

  • Navegación más práctica y simple: Este diseño consigue recoger todos los elementos del menú de forma que sólo serán visibles cuando el usuario pinche en el icono, todo esto con el uso de un sólo botón.
  • Estilo minimalista para nuestra web: Gracias al uso de un sólo icono para representar un menú que en ocasiones tiene más de 7 elementos (aunque las buenas prácticas de UX lo desaconsejen), conseguimos un estilo limpio, simple y organizado en nuestra web.
  • Fácil adaptación a dispositivos móviles: Al tratarse de un simple icono, es fácil adaptar el diseño de nuestra web a los diferentes dispositivos móviles en los que vaya a visualizarse a la vez que ocupan un pequeño espacio dentro de ellos.

¿Menú hamburguesa a la derecha o la izquierda?

En el momento en que te haces esta pregunta, tiendes a pensar que la situación del menú hamburguesa a la derecha es más correcta porqué queda más cerca del pulgar y además asegura que en ningún momento el pulgar cruza la pantalla obstaculizando la visión de la pantalla del móvil. Sin embargo, a medida que empiezas a ponerte en situación te das cuenta que solo sería correcto optar por esa opción en los casos de móviles pequeños, porqué en el resto de casos la parte superior del móvil está suficientemente alejada del pulgar como para no llegar cómodamente: es cierto que queda más cerca el lado superior derecho que el izquierdo, pero el pulgar no llega con tanta comodidad ya que queda ladeado y pulsar con el lateral es difícil y además nos obliga a forzar la mano de una manera poco natural que, si probáis, veréis que nos obliga a dejar el móvil un poco más suelto y reposando en la palma de la mano, esto no significa un gran problema cuando estamos cómodamente sentados, pero si en el resto de las situaciones, sobre todo cuando vamos andando y peligra que se nos caiga el móvil.

menú hamburguesa 3 - Digital Gecko Caracas

El lado izquierdo, queda más alejado, y si bien es cierto que no es la parte del móvil en el que el pulgar tiene un acceso más fácil, cuando éste llega lo hace por la parte en que le es cómodo pulsar. *Para móviles medianos y grandes nos obliga a forzar la mano, pero lo hace en un gesto en el que nos “obliga” también a agarrar con más fuerza el móvil y nos asegura que no nos va a caer al pulsar incluso si vamos andando o corriendo.

A parte de estas razones basadas en la ergonomía: dispositivo vs. mano, no debemos olvidar que en en nuestra cultura leemos de izquierda a derecha y el hecho de que el menú se despliegue desde la izquierda sigue nuestra lógica y por lo tanto diríamos que nos es ergonómicamente más cómoda también a nivel de: dispositivo vs. cerebro.

En las plantillas móviles de las grandes marcas

Una imagen vale más que mil palabras y por más que hubiéramos argumentado en que posición debe ir el menú hamburguesa, seguir lo que hace la mayoría, en estos casos es más razonable que hacer caso a una explicación subjetiva como la que acabamos de dar.
En este caso tenemos la suerte de que nuestra hipótesis y la realidad encajan por lo que el hecho de que el menú vaya a la Izquierda quedaría confirmado como teoría correcta.

Y es que, a parte de algunos casos aislados, la inmensa mayoría de grandes marcas se decide por la izquierda.

Hemos encontrado pocos casos de grandes marcas que consideran mejor poner el menú hamburguesa a la derecha:

Menú hamburguesa derecha

menú hamburguesa 4 - Digital Gecko Caracas

Nike y Northface a nuestro parecer se equivocarían, lo de Facebook es un caso particular porque pese a que el menú  hamburguesa está a la derecha, no es un menú importante en Facebook: el menú que más se pulsa en Facebook es el del muro que está justo a la izquierda. Así que es un caso trampa que realmente nos indicaría que los de FACEBOOK también piensan que “lo más importante debe ir a la izquierda”.

Hay que decir que nos ha costado encontrar webs importantes que se decantaran por esta opción.

En cambio en la siguiente imagen vemos una mayoría de marcas que se decanta por la opción de la posición izquierda para el menú hamburguesa. Hemos puesto todas estas pero podríamos haber puesto muchas más. Es evidente que la posición está muy clara. ¡El menú hamburguesa a la izquierda!.

Menú hamburguesa izquierda

A parte de todas estas webs, podríamos añadir aplicaciones móviles o servicios como los de correo de Google: Gmail que también optan mayoritariamente por la opción del menú hamburguesa a la izquierda.

Ya sabes, en diseño de interacción es más que conveniente hacer pruebas de usuario para descubrir debilidades del diseño y encontrar propuestas de solución. A veces, los resultados de los tests son sorprendentes y, aquello que pensamos que se entiende sin problemas, genera más confusión en nuestros usuarios. No hay una solución aplicable a todos los casos.

Comentarios sobre esta publicación

TENGA CUIDADO ¡Posible riesgo de adicción!
Te invitamos a suscribirte a nuestro Newsletter. Recibirás pequeñas notas con el mejor contenido, promociones y descuento. ¡Hasta la invitación a tomarnos un café!

No te preocupes no compartimos tu email