Los botones tipo hamburger son aquellos que permiten mostrar y ocultar un menú de opciones y presentan un ícono con tres barras horizontales apiladas. Los vemos todos los días, mayormente en sitios web y aplicaciones mobile (y a veces también en programas de escritorio), quizás sin advertir que refleja las tres secciones de una hamburguesa.

En dispositivos móviles, Mashable presenta un botón hamburger que permite abrir y cerrar el menú.

El ícono fue diseñado por Norm Cox en los años 80 para la Xerox Star, una de las primeras computadoras con interfaz gráfica de usuario. Su intención era crear un indicador fácil de recordar y, al mismo tiempo, sencillo de representar, ya que no podía usar más de 16px de ancho por 16px de alto. Sin embargo, pasaron muchos años hasta que el ícono se popularizó. Con el surgimiento de la Web móvil, los diseñadores tuvieron que adaptar las interfaces de usuario a pantallas más chicas, y, en consecuencia, debieron volver a pensar en íconos de tamaño reducido. Así, según relata Placeit Blog, en junio de 2009 Apple incorporó la hamburguesa en el iPhone 3Gs para abrir y cerrar menús. Al año siguiente, Facebook adoptó el ícono y terminó de convertirlo en una tendencia que perdura hasta hoy.

El hamburger button es objeto de análisis y discusión para los especialistas en experiencia de usuario, quienes aportan argumentos a favor y en contra.

Argumentos a favor

• La navegación visible por defecto distrae al usuario del contenido principal de la pantalla. Por ejemplo, puede que se distraiga de completar un formulario. Al esconder el menú por defecto, se elimina un factor de distracción.
• Esconder el menú por defecto permite ahorrar espacio en la página.
• El ícono tiene las virtudes del diseño minimalista: sencillez y limpieza.

Argumentos en contra

• Según la experta Katie Sherwin, es un ícono con el que la mayoría de la gente todavía no está familiarizada.
• A diferencia de muchos íconos tradicionales (como la lupa para hacer búsquedas), el hamburger no es esqueuomórfico: no se asemeja a ningún elemento que pueda representar un menú de navegación. De hecho, puede confundirse con un signo matemático o con una lista de cualquier tipo (no necesariamente de enlaces). Por lo tanto, se trata de una convención visual forzada.
• Cualquier tipo de botón que muestre u oculte contenido es contraproducente. El menú —en este caso— está oculto por defecto, resultando invisible o poco relevante para el usuario. Además, para alcanzar las opciones del menú el usuario deberá hacer dos clics o taps en lugar de uno.
• El usuario no sabe cómo buscar la información dentro del sitio. Necesita pistas para saber dónde está el contenido que desea. Un botón con tres barras horizontales no brinda pistas de que, al activarlo, vaya a abrirse un menú donde está la sección que el usuario busca.

Conclusión

El hamburger button es una opción muy popular, pero puede afectar negativamente la experiencia de usuario. Está comprobado que se obtienen mejores resultados si debajo del ícono se coloca la palabra “menú”, haciendo explícito su significado, o si el botón contiene un agregado visual que permita reconocerlo como tal (por ejemplo, bordes o relieve).