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.

Si estás buscando un diseñador UX, echa un vistazo a mi portfolio o mándame un email a hola@jesusmartin.eu

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

Si te interesan los patrones puedes echarle un ojo a otros artículos sobre patrones de diseño, y si te interesa el mundo de la innovación tecnológica te recomiendo este sobre patrones de diseño en interfaces de voz.

 

Jesús

Soy Jesús Martín, y fui el diseñador de Alexa en Francia, Italia y España tras su lanzamiento en esos países. Me enamoré de la tecnología y de sus recovecos hace ya varios años y lo que voy descubriendo lo cuento en esta página.

 

11 thoughts on “Muerte al menú hamburguesa en diseño de interfaz

  1. 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

  2. Pingback: enfoquegaussiano
  3. 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.

    1. 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!

  4. A mí me parece una gran solución la que implementa Sara Soueidan en su web: https://www.sarasoueidan.com/
    Si se fijan, al cambiar el tamaño de ventana, el menú se adapta y se posiciona de acuerdo al dispositivo. Si simulan una web para tablet, el menú pasa a ser flotante por arriba y si se achica a tamaño de móvil, pasa a ser flotante hacia abajo, cerca del pulgar de la persona que usaría ese dispositivo.

    ¿Qué opinan?

    1. Es muy interesante, sí.

      Mantiene el problema de que todo lo que ocultamos deja de ser usado (o se usa en menor grado), pero al menos es más accesible.

      ¡Gracias por la referencia!

  5. 2018 el menú de hamburguesa es tan popular que en responsive todos lo utilizan, pocos tienen problemas para usarlo, tal vez en el futuro cambie por 3 puntos aunque los 3 puntos por ahora es para configurar y cosas así.

    Todas las tendencias se aprenden poco a poco hasta que se le graba al usuario final, En cuanto a lo que queda oculto se remplaza con una barra en el footer iconos principales que aparezca al hacer scroll hacia abajo y desaparezca al hacer un poco hacía arriba.

    1. Personalmente, como comento en el artículo, creo que es un error dar por sentado que lo que todo el mundo usa es lo mejor. Si te fijas bien, hay una tendencia grande a sacar elementos de la hamburguesa y mostrarlos de una manera alternativa. El último que he visto: todo un Google Maps en su última actualización.

      Gracias por comentar. Saludos!

Deja una respuesta

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