Todos hemos visto el icono del menú hamburguesa. De hecho, la mayoría de nosotros lo usamos a diario. Se ha convertido en un elemento básico en el diseño de sitios web y aplicaciones. Icono que todos identificamos como un menú que al pinchar sobre él se desplegarán los enlaces de navegación.

Últimamente, ha habido mucho debate sobre si el uso del icono de la hamburguesa y los menús laterales en general son realmente una buena idea. Pero, ¿cuál es el origen del menú hamburguesa?, ¿cómo un simple icono ha llegado a convertirse en un menú?


Los creadores del menú hamburguesa

Fue diseñado por Norm Cox para Xerox Star, la primera interfaz gráfica de usuario del mundo. Norm Cox fue cofundador de Cox & Hall y ha sido consultor de diseño de interacción desde 1982 recibiendo importante premios como el de “Excelencia de Diseño Thomas J. Watson de IBM”. También diseñó el icono para crear nuevos documentos para la misma interfaz (¿te suena el icono de la carpeta con orejas de perro?). Geoff Alday fue el diseñador de software responsable de asociar el icono con la funcionalidad de mostrar un menú desplegable.

En la conferencia ACM CHI (Conference on Human Factors in Computing Systems) de 1990, hubo una charla sobre la historia de los widgets y el propio Geoff Alday compartió cómo se gestó el menú hamburguesa:

“El diseño gráfico debía ser muy sencillo, funcional, fácil de recordar y tenía que sugerir el aspecto de un menú formado por una lista de opciones. Con tan pocos píxeles para trabajar, tenía que ser muy distinto a otros iconos, pero simple. Creo que solo teníamos 16×16 píxeles para renderizar la imagen (o posiblemente 13×13 ... no lo puedo recordar exactamente)”.

Después de Xerox Star el menú hamburguesa quedó en el olvido hasta que hace poco lo recuperaron para otro tipo de dispositivos.


La resurrección del menú hamburguesa

Los diseñadores tuvieron que pensar ideas ingeniosas para crear interfaces que fuesen intuitivas y fáciles de utilizar para las pantallas de 4 pulgadas. No está claro qué aplicación lo utilizó primero, pero algunas de las primeras aplicaciones que lo usaron fueron:


Voice Memos de iOS

Según parece es la primera aplicación que hace uso del menú hamburguesa (excluyendo Xerox) como botón de menú. Salió el 17 de junio de 2009 y estuvo disponible para los iPhone 3G. Haciendo clic en él aparecería la lista de grabaciones y opciones. Apple ya había tomado prestado el ratón y el escritorio de Xerox cuando creó Macintosh, un pequeño icono no se notaría mucho.


Tweetie para iPad

Tweetie fue la primera aplicación disponible para Twitter, creada por Loren Brichter, que estaba trabajando en Apple en ese momento. Salió en 2008 y usó el ícono de la hamburguesa para las listas. Parece que no es una coincidencia que un diseñador de Apple haya utilizado este icono.


Facebook lo hace tendencia

Facebook parece haber sido también un gran contribuyente en la difusión del uso del icono de la hamburguesa para los menús. Comenzó con este icono de cuadrícula en 2008. Facebook ya estaba usando el menú lateral y todo lo que hicieron fue añadir esta cuadrícula. A partir de esta decisión, miles de millones de personas vieron el menú hamburguesa.

Parece ser que fue Apple el que resucitó el uso del menú hamburguesa. Crearon el teléfono inteligente, lo asociaron a una pantalla compacta y seleccionaron de manera inteligente los iconos. Ya eran fanáticos de las ideas de Xerox y comenzaron a usarlo en su interfaz. A partir de ahí, las grandes aplicaciones sociales lo incorporaron.


Actualmente se está utilizando para representar menús laterales en sitios web y aplicaciones, así como en listas. Algunas de las aplicaciones más grandes que lo utilizan son:


Reeder

Reeder utiliza el icono para acceder a sus listas de suscripción.


Path

Path también fue uno de los primeros en adoptar el menú hamburguesa y todavía lo usa ahora para mostrar la navegación.


También se puede encontrar en Twitters Bootstrap y Starbucks para la navegación.

Los sitios web de escritorio también han comenzaron a utilizarlo, un menú oculto funciona bien para diseños minimalistas y es extremadamente popular entre los sitios web de diseñadores.

Implementar el menú no es complicado pero hacen falta conocimientos de maquetación web, incluso el Framework Bootstrap facilita su desarrollo sin necesidad de grandes esfuerzos. Pero si no eres diseñador la mejor opción es contratar a profesionales especializados en navegación web. Metacom es un estudio de diseño web en Barcelona especializado en integrar el menú hamburguesa, además comparte un blog muy interesante de artículos sobre diseño web.


Críticas del Menú Hamburguesa

El menú hamburguesa es un tema caliente en los debates de diseño web.

El icono lo vemos en aplicaciones o versiones móviles de un sitio web. En principio es una forma sencilla de ahorrar espacio en la pantalla. El menú hamburguesa reduce el desorden y el espacio dando un diseño más estético. Tal ha sido su éxito que muchas aplicaciones de escritorio han comenzado a utilizarlo.

Para algunos diseñadores presenta algunos inconvenientes, de ahí las críticas. Según los diseñadores los visitantes del sitio web no entienden la funcionalidad del icono. La navegación de la hamburguesa ha dado prioridad al diseño a cambio de una experiencia de usuario totalmente confusa para muchos. Como resultado, los visitantes no saben que tienen que pinchar en el icono para desplegar el menú y pierden la navegación por el sitio web.