Análisis del menú hamburguesa en diseño de interfaz

El menú hamburguesa es un botón que normalmente se sitúa en una esquina de la parte superior de la interfaz gráfica, y que se usa como menú donde guardar enlaces o categorías para facilitar la navegación. La forma consiste en tres líneas horizontales paralelas, que sugieren una lista. Se llama hamburguesa por su similitud con las capas de una hamburguesa.

Ha sido muy usado durante los últimos años en el mundo web y móvil, y se ha vuelto un icono del diseño de interfaces. Pero últimamente se está cuestionando su utilidad, e incluso las últimas tendencias en diseño sugieren que éste desaparecerá en un futuro no muy lejano. Eso es debido a que no es muy útil a nivel de usabilidad ya que esconde acciones que podrían ser principales en un menú y obliga al usuario a tener que hacer varios clics para acceder a cualquier opción, retardando el tiempo de llegada a la acción.

PROS

  • Es reconocido por los usuarios como un menú, ya que se ha usado mucho últimamente.
  • Ocupa poco espacio en la pantalla, y eso puede ser útil en interfaces pequeñas.
  • Es minimalista estéticamente y hace que el diseño sea más limpio.

CONTRAS

  • Como está escondido, obliga al usuario a hacer un clic más para acceder a él.
  • Suelen ser como un cajón donde poner categorías, y la mayoría de veces se extiende demasiado, dificultando la acción o la búsqueda de cosas.
  • Es poco usable, y a veces las interfaces que usan este menú buscan más la estética que la usabilidad.
  • Esconde contenido y acciones, haciendo que no sea visible, y eso hace que el usuario pueda perderse.

MENÚ HAMBURGUESA EN EL MÓVIL

Si nos fijamos en el móvil, como las pantallas son de tamaño más reducido, el objetivo principal del menú hamburguesa es conseguir que la navegación sea lo más fluida posible ocupando el mínimo espacio posible de la pantalla. Es por eso que durante los últimos años se ha estado usando, ya que se escondía la navegación y dejaba libre la pantalla. Pero de esta forma también se escondían acciones principales que el usuario usaba a menudo.

Por este motivo, últimamente se están usando como alternativa tabs para las acciones principales, visibles en la pantalla para que el usuario pueda acceder a ellas en cualquier momento. Y si hay acciones secundarias, pensar en alternativas, como sí que podría
ser el menú hamburguesa en este caso, o las acciones de la barra de navegación, o las acciones flotantes en el caso de Android.

Pensando también en la ergonomía del móvil, la parte inferior de la pantalla es donde es más fácil acceder con el dedo. Es por eso que se sugiere poner las acciones principales en la parte inferior, como podrían ser los tabs, y las acciones secundarias en la parte superior, donde el usuario tiene que acceder un menor número de veces.

menu hamburguesa en el movil visual engineering
Ejemplo diseñadora Laura Martínez: App Amazon

MENÚ HAMBURGUESA EN LA WEB

En la web cambia un poco ya que normalmente los tamaños de la pantallas son más grandes y hay más espacio. Es por eso que
raramente se necesita un menú hamburguesa, ya que las acciones principales se pueden poner directamente a la vista sin necesidad de esconderlas, facilitando así el clic del usuario.

Se sugiere como buena práctica reducir el número de categorías, intentando llegar a un máximo de seis categorías principales. Estas categorías podrían ocupar la parte superior de una web, sin causar problemas de espacio al usuario.

menu hamburguesa en web visual engineering

En los pocos casos en que tendría sentido usar un menú hamburguesa en web sería cuando el contenido de la web es excesivo. En este caso sí sería necesario esconder los demás links en un menú secundario, que podría ser el menú hamburguesa. Aún así, dificulta la navegación del usuario, que si no están bien categorizadas las opciones dentro del menú de navegación.

Actualmente, los usuarios están bastante familiarizados en hacer scroll, y esto podría ser una alternativa. Simplemente poner el contenido a continuación, y usar un menú visible para facilitar el acceso a las distintas secciones específicas. Estas páginas son las nombradas landing pages, donde todo el contenido está en un scroll, sin necesidad de clics. Son útiles para webs de presentación con poco contenido y podrían ser una gran alternativa al menú hamburguesa.