El ícono del menú de 3 líneas: ¿Qué es un menú de hamburguesas?

¿Qué pasaría si te dijera que los sitios web y los teléfonos inteligentes tienen hamburguesas? Probablemente pensarías que lo he perdido por completo después de dejar mis medicamentos. Pero es absolutamente cierto, no bromeo.

Cuando abre una aplicación en su teléfono inteligente o en algunos sitios web hoy, podría estar mirando una hamburguesa, es decir, un ícono de menú de hamburguesas.

¿Qué es el menú de hamburguesas?

El menú de hamburguesas (que no viene con una guarnición de papas fritas) son las tres líneas horizontales que ves ahora en la parte superior de muchas pantallas, ya sea en el extremo izquierdo o en el extremo derecho.

Es un icono, en realidad.

Al tocar, pulsar o hacer clic en el icono, se abre un menú lateral con una selección de opciones o páginas adicionales.

A algunos desarrolladores les encanta el icono de menú de tres líneas de hamburguesa porque les permite incluir más funciones en sus aplicaciones o navegación. El icono diminuto ocupa una cantidad mínima de espacio en la pantalla. Le da a la aplicación o al sitio un aspecto limpio y minimalista.

Es bastante fácil para el usuario de la aplicación o el visitante del sitio web presionar el botón para deslizar el menú hacia adentro y hacia afuera.

O eso podrías pensar.

Sin embargo, otros desarrolladores y algunos usuarios detestan absolutamente el ícono del menú de hamburguesas o simplemente están desconcertados por él. ¿Por qué? Porque no es obvio para todos los usuarios que las tres líneas en realidad son un ícono de menú, y no les dice a los usuarios qué hay allí.

¿Quién "inventó" el ícono del menú de hamburguesas?

El visionario detrás del omnipresente ícono del menú de hamburguesas es un pionero creativo llamado Norm Cox. Creó el ahora omnipresente icono del menú de hamburguesas, un símbolo universal que diseñó originalmente para Xerox Star, la primera interfaz gráfica de usuario del mundo, hace más de tres décadas.

Sin embargo, después de su concepción, la imagen icónica pareció caer en un período de relativa oscuridad.

El resurgimiento del icono se remonta al auge de los dispositivos móviles. Fue durante esta era, en 2008, que el ícono de tres líneas comenzó a aparecer lentamente, apareciendo por primera vez en la aplicación de Twitter, Tweetie.

Al año siguiente, el ícono encontró un nuevo hogar en la interfaz de la aplicación Voice Memos para el iPhone 3GS.

En una entrevista con Small Business Trends, Cox compartió su desconcierto por el resurgimiento de su creación y afirmó: “Tengo que reírme de toda la atención que está recibiendo últimamente el pequeño símbolo de la 'hamburguesa'. ¡Hasta hace unos nueve meses, no había pensado en el "goteo en mi balde de carrera de diseño" durante más de 30 años!

Durante la lluvia de ideas sobre el símbolo, se contemplaron algunas alternativas:

• Una flecha que apunta hacia abajo en forma de triángulo, lo que indica la dirección en la que aparecerá el menú resultante. Esto, sin embargo, fue rechazado porque con demasiada frecuencia se interpretó como un indicador.
• El asterisco (*) o el signo más (+) también se consideraron pero finalmente se descartaron debido a su naturaleza abstracta.

Al final, Cox dijo que la imagen de la hamburguesa de tres líneas logró el equilibrio perfecto: “Este símbolo era visualmente simple, fácil de explicar y funcionalmente memorable. Tres líneas eran el número perfecto”.

El ícono de la hamburguesa, un elemento de diseño simple pero poderoso, consolidó así su lugar en el mundo del diseño de interfaces de usuario, como testimonio del atractivo atemporal de la simplicidad.

¿Qué sitios web o aplicaciones usan este infame icono de menú de hamburguesas?

Algunos de los nombres destacados que usan el ícono de la hamburguesa en sus aplicaciones incluyen Gmail, Facebook, Reeder, Twitter y Starbucks.

Y ahora los sitios web y los navegadores también han adoptado el ícono de menú de 3 líneas. Los navegadores Chrome y Firefox son un ejemplo de esto, usando el menú en la esquina superior derecha. El menú de hamburguesas oculta todas las opciones, configuraciones y extensiones. Y el icono se ilumina en naranja cuando es necesario corregir o actualizar algo en el navegador.

Time.com es un ejemplo de un sitio web importante que utiliza el menú de hamburguesas, en este caso en la esquina superior izquierda. Cuando hace clic en el ícono del menú de 3 líneas, aparece una diapositiva que muestra enlaces de contenido adicional.

Algunos expertos señalan que las funciones del menú de hamburguesas apenas se utilizan.

En primer lugar, muchas personas aún tienen que darse cuenta de que las 3 líneas horizontales son en realidad un ícono de menú y no simplemente una imagen.

En segundo lugar, el ícono de la hamburguesa hace que la información en el menú oculto sea "fuera de la vista, fuera de la mente". A menos que realmente hagan clic o toquen el ícono del menú de 3 líneas, no ven las opciones allí.

De hecho, en el caso de Time.com, se tuvo que agregar la palabra “menú” debajo del ícono para que sea más obvio cuál es el símbolo.

Depender menos del menú de hamburguesas

Varios desarrolladores han expresado su descontento con el ícono de la hamburguesa y sus deficiencias.

Algunos se niegan a usar el ícono, a pesar de su tendencia.

Pero la empresa de más alto perfil que ha hecho un cambio es Facebook. Para ser absolutamente claro, Facebook nunca ha declarado públicamente que quiera deshacerse de él por completo. Pero Facebook está sacando a la luz algunas de las funciones móviles que antes estaban ocultas detrás del ícono de la hamburguesa.

Ahora se muestran en una barra horizontal en la parte inferior de la pantalla, llamada barra de pestañas.

La barra de pestañas inferior ocupa un poco más de espacio en la pantalla, pero hace que ciertas funciones sean más obvias.

Hablamos con Mrinal Desai, director ejecutivo y cofundador de Addappt. También estuvo detrás de Crossloop, una aplicación de tecnología remota colaborativa, que finalmente se vendió a AVG Anti-Virus.

“El menú de hamburguesas no es realmente para la configuración”, dijo Desai, hablando con Small Business Trends. “Es casi como un 'más' o incluso se puede pensar en él como una alternativa a la 'barra de pestañas'. Es raro ver ambos, pero en Addappt exploramos eso con un prototipo, pero finalmente elegimos ir por la ruta de la 'barra de pestañas'".

“Estas decisiones a menudo dependen del objetivo de la aplicación. El ícono de la hamburguesa tiende a relegar funciones, mientras que la barra de pestañas las hace más obvias”, agregó Desai.

The Hamburger Icon Creator tiene la última palabra

Entonces, ¿debería usar un ícono de menú de hamburguesas en su propio sitio web, tema móvil o aplicación?

Creemos que el desarrollador original del icono debería tener la última palabra.

“La longevidad del símbolo (desde la década de 1980) es un testimonio de su simplicidad, utilidad, capacidad de aprendizaje y memorabilidad”, dijo Cox, cuando se le preguntó sobre las llamadas para matar al ícono de la hamburguesa.

"Buscar 'matar' o 'abolir' una herramienta o widget de interfaz de usuario en función de un uso o una implementación deficientes es un poco miope y demasiado reactivo".

Esta tabla desglosa la historia y el uso del ícono a lo largo de diferentes épocas, desde su creación hasta su reintroducción y uso generalizado actual, destacando cómo su recepción y aplicación han cambiado con el tiempo:

Hamburguesa, fotos de iconos rojos a través de Shutterstock