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