Cada vez más personas usan sus móviles para comprar en línea, por lo que es fundamental que las webs sean responsivas y fáciles de usar. El problema es que el espacio en la pantalla de un teléfono es muy limitado. Si los elementos de navegación de tu web están amontonados o resultan confusos, lo más probable es que los visitantes acaben marchándose y compren en otro sitio.
Por eso muchas webs y aplicaciones recurren a la navaja suiza de la navegación móvil: el menú de hamburguesa. El sencillo icono de las tres líneas horizontales se ha convertido en el símbolo internacional de «aquí hay más opciones de navegación», pues condensa todo el menú de un sitio en un único botón.
A continuación, descubre todo lo que hay que saber sobre las ventajas y las desventajas del menú de hamburguesa: su historia, sus principales funcionalidades y cómo usarlo de forma eficaz en el diseño de tu web móvil.
¿Qué es un menú de hamburguesa?
Durante años, el método estándar de navegación web era el menú horizontal: cada categoría puesta en fila, una debajo de otra, para cada categoría que se extendía por la parte superior de la pantalla.
Sin embargo, cuando la navegación móvil se disparó a finales de la década de 2000 y principios de la de 2010, impulsada por los avances en la tecnología de los smartphones y la conectividad a internet móvil, los diseñadores web necesitaron una solución que aprovechara mejor el espacio.
Así llegó el menú de hamburguesa (☰): un sencillo icono de líneas horizontales paralelas (como si fuese el pan) con una línea en medio (la hamburguesa) que permite a los usuarios desplegar y plegar las opciones de navegación según lo necesiten.
Lo más normal es encontrar el botón del menú de hamburguesa en la esquina superior izquierda o derecha de la web o la aplicación.
Historia del menú de hamburguesa
En realidad, el menú de hamburguesa es anterior a los dispositivos móviles. A principios de la década de 1980, el diseñador Norm Cox lo creó para la interfaz gráfica de usuario de la estación de trabajo Xerox Star, precursora de la interfaz original del Apple Macintosh. Cox buscaba un icono sencillo y reconocible que permitiese abrir con un solo clic una lista de elementos sobre los que actuar.
Tras su presentación inicial, el menú de hamburguesa tuvo un uso limitado y quedó prácticamente en el olvido hasta la adopción masiva de los teléfonos móviles alrededor de 2009. La necesidad de presentar opciones de menú en pantallas pequeñas sin abrumar a los usuarios convirtió la compacta pulcritud del icono de hamburguesa en la solución ideal.
La popularidad del menú de hamburguesa quedó asegurada cuando Twitter y otras aplicaciones móviles lo adoptaron, seguido de su uso en Notas de voz del iPhone 3GS y su sistema iOS 4, lo que consolidó su papel como símbolo familiar de la navegación oculta.
Ventajas y desventajas del menú de hamburguesa
Los menús de hamburguesa son ideales para los dispositivos móviles, pero las barras de navegación y los menús con pestañas pueden ser más adecuados para los usuarios de escritorio. Esta es la razón:
Ventajas
Lo que caracteriza al menú de hamburguesa es el tamaño compacto de su icono. Ahorra un espacio de pantalla valioso y despeja el diseño de la web, sobre todo en las pantallas más pequeñas como las de los smartphones.
Al hacer clic o pulsar en el icono de hamburguesa, se muestra la navegación del sitio, ya sea mediante un menú deslizante, un menú desplegable o una superposición a pantalla completa. Esto puede mejorar la experiencia del cliente móvil.
Desventajas
Aunque la ventaja del ahorro de espacio es innegable, algunos sostienen que los menús de hamburguesa en los navegadores de escritorio pueden dificultar que los usuarios encuentren contenido. Si no están familiarizados con el icono del menú, es posible que lo pasen por alto y se pierdan contenido u opciones de navegación importantes del sitio.
Para solucionarlo, puedes implementar plantillas de diseño responsivo que presentan distintas estructuras de menú en función del dispositivo desde el que se visita la web.
Por ejemplo, una web podría mostrar una barra de navegación horizontal tradicional en ordenadores de escritorio, pero cambiar a un menú de hamburguesa en los dispositivos móviles para ahorrar espacio de pantalla.
Ejemplos reales: menús de hamburguesa en acción
A menudo verás que se ha aplicado un diseño responsivo a una web, de modo que el menú de hamburguesa solo aparece en la versión móvil, mientras que en la versión de escritorio aparece un estilo de menú diferente.
Aquí tienes algunos ejemplos de webs de ecommerce que usan los menús de hamburguesa con eficacia:
TCB Jeans
TCB Jeans destila sencillez con un botón de menú de hamburguesa estándar de tres líneas en la parte superior de su sitio móvil. Al hacer clic, una lista de enlaces se despliega desde el lado izquierdo, con elementos como «Inicio», «Productos» o «Quiénes somos».
El enlace de «Productos» muestra un pequeño signo de más al lado, que indica que hay más opciones si pulsas en él.
La versión de escritorio de TCB también incluye un menú de hamburguesa y les permite que una fotografía de fondo a todo ancho y las promociones ocupen un lugar protagonista.
En la versión móvil, el menú de hamburguesa se despliega como una superposición, lo que ofrece una pista visual a los usuarios de que el menú se puede ocultar para revelar la página que hay detrás. El diseño del menú de hamburguesa de TCB es:
- Limpio. Amontonar botones de menú en la pantalla de un teléfono es una mala idea. Es mejor ocultarlos en un menú de hamburguesa.
- Familiar. La hamburguesa es habitual en los sitios móviles, por lo que no resulta confusa para la mayoría de los usuarios.
- Otorga el protagonismo a los productos. Al ocultar el menú detrás del botón de hamburguesa, la fotografía de los productos destaca más y refuerza los artículos a la venta.
Gymshark
La web de Gymshark es un gran ejemplo de cómo una web de escritorio puede diferenciarse de su versión optimizada para móviles. Aunque en la versión de escritorio no hay menú de hamburguesa, en móvil el menú aparece en la esquina superior izquierda. Al pulsarlo, se muestra un cuadro de búsqueda, así como los submenús de categorías de productos. Para volver a la página de inicio, basta con pulsar el icono de la X en la esquina superior derecha.
El menú de hamburguesa de Gymshark funciona bien porque prioriza lo que más importa: muestra primero las ofertas y la ropa nueva para generar engagement al instante. También resulta familiar, con el botón del menú ubicado donde esperarías encontrarlo y una lista sencilla y fácil de entender a continuación.
Consejos para triunfar con el menú de hamburguesa
Ten en cuenta estos seis consejos para mejorar la experiencia de usuario y aumentar las tasas de conversión:
Haz que esté siempre a la vista
En la mayoría de los casos, el menú de hamburguesa es pequeño. Asegúrate de que, aun así, sea fácil de localizar. Colócalo en la esquina superior izquierda o derecha de la pantalla, donde los usuarios tienden a mirar. Y mantén esa ubicación de forma coherente en todas las páginas de tu sitio.
Usa el icono de hamburguesa estándar
Usa las tres líneas horizontales paralelas (☰), tan reconocidas, para tu menú de hamburguesa. Estos iconos están muy extendidos y la mayoría de los usuarios entienden al instante para qué sirven.
Prioriza la jerarquía de los elementos del menú
Organiza los elementos de tu menú de forma lógica. Puedes añadir un cuadro de búsqueda y, a continuación, ordenar de arriba abajo las categorías o páginas más importantes y utilizadas.
Hazlo compatible y accesible en móviles
Asegúrate de que el menú de hamburguesa de tu sitio web funcione bien en todos los dispositivos móviles y pantallas táctiles. Los elementos del menú deben ser lo bastante grandes para que puedan pulsarse fácilmente con el dedo.
Añade animación y respuesta visual
A medida que el usuario interactúa con el menú, los efectos sutiles ofrecen pistas visuales. Por ejemplo, las líneas pueden girar y transformarse en una X o un + para indicar la apertura y el cierre. Las líneas pueden cambiar de grosor o expandirse ligeramente. Los efectos de desvanecimiento y desplazamiento aportan profundidad cuando el usuario interactúa. También puedes cambiar el color o hacer que rebote un poco al pulsarlo.
Haz pruebas y pide opiniones
Antes de dar por terminado tu menú de hamburguesa, haz pruebas con usuarios reales. Observa cómo interactúan con él y recoge sus opiniones.
Cómo usar un menú de hamburguesa con otras herramientas de navegación
A veces, la mejor forma de mejorar la usabilidad de un sitio consiste en combinar distintos botones y menús. Cada tipo tiene sus propias ventajas y desventajas, pero, al usarlos juntos, pueden crear una experiencia de usuario más fluida y eficaz.
Quienes diseñan webs de ecommerce pueden usar combinaciones que faciliten descubrir los productos, con un acceso claro y directo al carrito y al proceso de pago. Comprueba que todos los elementos de navegación se puedan pulsar con facilidad en las pantallas táctiles. Prueba distintas combinaciones para ver qué funciona mejor con tu público objetivo:
- Navegación superior más hamburguesa. Usa la navegación superior para las categorías y funciones esenciales, como la tienda y el carrito, y reserva el menú de hamburguesa para acceder a opciones de navegación menos frecuentes, como las páginas de «Quiénes somos», «Contacto», «Atención al cliente» y «Políticas». Así, la pantalla principal se mantiene limpia, pero sigue ofreciendo un acceso rápido a las páginas necesarias.
- Navegación con pestañas más hamburguesa. Usa la navegación con pestañas dentro de la página de una categoría de productos para filtrar u ordenar los artículos, como las novedades, los productos más vendidos o los filtros para ordenar por precio. Esto permite a los usuarios afinar rápidamente su búsqueda de productos tras usar tu menú de hamburguesa para la navegación general del sitio.
- Cabecera fija más hamburguesa. La cabecera fija contiene enlaces de acceso directo imprescindibles a las categorías principales y permanece en la parte superior de la pantalla mientras te desplazas. El menú de hamburguesa se usaría para las páginas secundarias.
Por ejemplo, la web móvil de Fly by Jing usa un menú de hamburguesa para su menú principal, pero la propia también emplea un menú con pestañas de cuatro opciones («Salsas», «Sets», «Despensa» y «Merchandising») para afinar aún más.
Preguntas frecuentes sobre el menú de hamburguesa
¿Por qué se llama menú de hamburguesa?
El término menú de hamburguesa hace referencia al parecido visual del icono con una hamburguesa. Consta de tres líneas horizontales que se colocan una sobre otra.
¿Qué es un menú de hamburguesa en una web?
Un menú de hamburguesa es un icono sencillo que, al hacer clic o pulsar en él, despliega un menú de navegación para una web o página web.
¿Cómo se llama el menú de tres puntos?
Un menú representado por tres puntos verticales suele denominarse menú de «más opciones», «elipsis vertical» o, a veces, «menú kebab».
