MENU

El blog de Jesús Martín sobre diseño, usabilidad, tecnología, nuevas tendencias y lo que me apetezca contar

Muerte al menú hamburguesa en diseño de interfaz

Comiendo el icono de menú hamburguesa

El menú hamburguesa apareció en los 80 en el Xeroc Parc (historia aquí), pero se popularizó hace unos pocos años y rápidamente se convirtió en un estándar para toda la profesión. Con tres lineas horizontales nos cargamos de un plumazo todo el problema del menú superior en su versión móvil. Solución estándar, que vale para todas las web del mundo, que los usuarios han aprendido a reconocer y cuya implementación es casi automática o incluso ya viene hecha en la mayoría de templates o en frameworks como Bootstrap.

Menú hamburguesa en una interfaz de Werox Parc en los 70

Tres lineas que iluminan la cara del director de marketing que llevaba tiempo pidiendo que se viera mejor la web en su iphone. Para algunos, la señal inequívoca de que la empresa ha abrazado las últimas tendencias del diseño web y por fin su plataforma es responsive. El menú hamburguesa como símbolo de modernidad en el diseño web…

La solución parecía tan buena que pronto le aparecieron hermanos, a los que Luke Wroblewski va poniendo nombres en una interesante colección charcutera: kebab menu, doner menu, double burger menu, bento menu o meatballs menu. Soluciones que suelen convivir en una barra de navegación hasta por triplicado.

Burger menu and friends

Al tiempo que se extendía, hasta el punto de implementarse incluso en la versión desktop de las web, aparecieron las primeras voces que venían a decir, llanamente, que la solución era una mierda. El propio Luke, autor del archiconocido Mobile First, no pierde la oportunidad de poner el artificio de vuelta y media cada vez que tiene ocasión.

Hasta hace poco yo formaba parte de esos que pensaban que poner un menú hamburguesa era guay. De hecho, no hace falta ser el más rápido para ver que esta misma web utiliza el recurso. Cuando oí hablar de esta filosófica disputa, en una clase de UX y UI con José Vittone, me costó entender por donde venían las críticas. Por eso me parece interesante analizar las principales ventajas, inconvenientes, alternativas y mis conclusiones de la solución.

Ventajas:

  • Implementación rapidísima. El 99,9% de los templates responsive ya lo llevan implementado.
  • Solución estándar que los usuarios han aprendido a reconocer.
  • Solución que muchos departamentos de marketing conocen y que comprarán sin rechistar.

Inconvenientes:

  • Hay muchos usuarios que aún no lo identifican como tal. A la gente que trabaja en Internet se nos suele olvidar que hay gente que aun sueña con el nokia 3210 y que el porcentaje de usuarios con conocimientos avanzados es limitado. Para esta, como para cualquier solución de interfaz, deberías conocer a tu público, hacer test de usuario y ver qué tal funciona.
  • Todo lo que ocultes será invisible para muchos. Esta idea sirve para la mayoría de funcionalidades en una interfaz y reponde al que debe ser nuestro mantra: “Lo que está fuera de la vista, está fuera de la mente”.
  • Sumas un click extra para llegar a cualquier sección.
  • Accesibilidad. Muchos de los menú hamburguesa están desarrollados con javascript y las normas de accesibilidad dicen que una web debe ser navegable incluso si éste está desactivado.
  • ¿Lo mismo da 8 que 80? Una solución compleja que vale para todas las web no parece la forma más seria de enfrentarse al diseño de una interfaz.

Alternativas:

  • Pestañas superiores o inferiores. Las principales plataformas móviles están empezando a acompañar o incluso a sustituir el menú hamburguesa con unas pocas pestañas, como puedes ver en las aplicaciones de Facebook, Twitter, Whatsapp o Airbnb. Requiere un gran esfuerzo de síntesis y un ejercicio de arquitectura de la información que permita diferenciar cuales son las acciones fundamentales de nuestra plataforma y que de ninguna manera podemos ocultar en menús de acceso complicado.
  • Navegación inferior. La máxima del content first no solo nos anima a generar contenido nuevo y de calidad, si no que además nos sugiere que lo coloquemos en la parte superior de la pantalla, dejando los segundos niveles de navegación al final del scroll, como hacía con el sidebar los temas por defecto de wordpress Twenty Eleven y Twenty Twelve
  • Las que vendrán. Si conoces alguna alternativa al menu hamburguesa sientete libre a compartirla en los comentarios.

Principales aplicaciones que evitan el uso del menú hamburguesa

Mis conclusiones

  • Parece un recurso condenado a desaparecer. Los principales diseñadores de UX / UI están siendo cada vez más firmes en su oposición.
  • Úsalo si no te importa sacrificar la navegación en las secciones que oculte.
  • Las empresas seguirán usándolo durante años, porque no usarlo implica trabajo y porque con las tendencias somos así. Acordaos, las intros en flash… Se está extendiendo tanto que ha salido de las versiones móviles y es tendencia en el diseño web desktop.
  • La sustitución del menú hamburguesa por pestañas nos va a traer otro problema y va a llenar los interfaces de iconos cada vez más pequeños, más juntos y dejando menos espacio de navegación y de contenido

interfaz de facebook lleno de iconos y pestañas

Enlaces de interés

No soy el primero que hace su análisis de la situación, aquí podéis ver otros blogs que tratan el tema.
¿Qué son las tres rayas que parecen una hamburguesa en su dispositivo móvil?
Lo que podría no solucionar el icono de la hamburguesa
Los problemas del menú lateral de Android y el “icono hamburguesa”
Kill The Hamburger Button


Escrito por Jesús

Soy Jesús Martín, propietario de este blog, truhán y diseñador visual. Me enamoré de Internet y de sus recovecos hace ya varios años y lo que voy descubriendo lo cuento desde hace poco en esta página. Me encantan las tortitas y a veces el baloncesto.

Leeme más aquí >

COMENTARIOS: 7
  1. Octubre 27, 2015 by Ivan Reply

    Estoy en contra del menu de la hamburguesa! En cualquier caso propondria a los seguidores que hicieran un test A/B en sus paginas para que se dieran cuenta de que estan perdiendo en usabilidad, conversion y clientes… Si descubren que les va bien! pues ole por ellos, pero me da en la nariz que se van a llevar una sorpresa

    • Octubre 28, 2015 by Jesús Reply

      Cada vez tengo más claro que hay que hacer menos caso a las modas y más a los test, pero la realidad laboral casi nunca es así.

  2. Diciembre 28, 2015 by JAVIER IVAN VALLEJO RAMIREZ Reply

    Muy buen analisis con tu articulo me ayudo a aclarar muchos aspectos y buen diseño por cierto :D, saludos \(*.*)/

  3. Enero 24, 2017 by Julià Reply

    Quizá el menú hamburguesa tiene sus inconvenientes pero no hay por ahora una solución mejor aún diria. Han pasado un par de años desde el artículo y no veo que muera… por mi parte nos sabría decirte una web de marca importante que no lo lleve. O que lleve una solución mejor para sus versiones de móvil incluso tablets. Por ejemplo, ahora pccomponentes que es una de las tiendas online de más exito en su campo acaba de cambiar su diseño y lo incorpora incluso cuando tiene espacio para mostrarlo un menú lateral desplegado.

    Otro debate es si el menú hamburguesa va mejor a la derecha o izquierda. He escrito un artículo que igual puede interesar: http://www.comunic-art.com/posicion-del-menu-hamburguesa-en-plantillas-moviles

    Saludos.

    • Febrero 05, 2017 by Jesús Reply

      Gracias Julia por el comentario. Como decía en el artículo yo apostaba que se seguirá usando durante años, pero que debemos ser consicentes de que no es una gran opción y que no debemos jugarnosla a esconder toda la navegación tras ese icono.

      No lo digo yo, lo dicen los test, todo lo que se esconde desaparece para la mayoría de los usuarios.

      Un saludo!

¡Deja un comentario!

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *