Por Raúl Sáenz, publicado en 11 junio 2024
El menú hamburguesa es un tipo de menú web desplegable que se representa con tres líneas horizontales y que es muy popular en el diseño web para móviles o dispositivos con pantalla reducida. Pese a ello, a día de hoy también lo podemos ver en el diseño web de páginas para portátil y ordenadores de sobremesa.
Cuando hacemos clic en el menú hamburguesa o ponemos el cursor sobre él se muestran las diferentes secciones antes ocultas, sobre las que también podemos clicar para acceder al contenido.
En definitiva, el menú hamburguesa oculta tras un icono las diferentes secciones de la web en vez de mostrarlas una detrás de otra en la parte superior de la página.
¿Por qué optar por el menú hamburguesa?
Diseño web minimalista: los diseños poco sobrecargados están de moda porque permiten al usuario navegar de una forma más fluida por la web sin tantos estímulos que le saturen. Incluir este estilo de menú contribuye a ofrecer este tipo de experiencia.
Ocupa poco espacio: debido a su diseño comprimido, es muy aconsejable utilizar el menú hamburguesa en diseños web destinados a aparecer en dispositivos con pantalla pequeña como móviles y tablets.
Contenido de valor: este menú solo se despliega si el usuario quiere conocer las secciones del menú, de lo contrario no se verán. Esto permite no mostrar al usuario contenido que realmente no le interesa.
¿Qué desventajas tiene este menú?
Desconocimiento: aunque los usuarios acostumbrados a navegar por la web sí saben el significado de las tres rayas horizontales, otros menos experimentados pueden no saberlo. Esto provoca que algunas personas no tengan una buena experiencia en las web con este tipo de menús.
En ese sentido, añadirlo o no a nuestra web dependerá de las características de nuestro público objetivo. Por ejemplo, si queremos llegar a un público de mayor edad con poca experiencia online, quizás no sea la mejor idea añadir un menú de este estilo en nuestra web.
Aumento tasa de rebote: el desconocimiento de lo que son los menú hamburguesas puede provocar, a su vez, un aumento de la tasa de rebote del sitio web.
Ejemplos de uso del menú hamburguesa
Como hemos visto, este tipo de menú tiene tanto ventajas como desventajas y utilizarlo dependerá de las características y objetivos propios de cada negocio.
En esta última sección queremos dejarte algunos ejemplos para que te inspires si te decides a implementarlo en tu diseño web.
Cyberclick (en versión mobile)
En Cyberclick hemos optado por este menú en nuestro diseño web para móviles, colocándolo en la esquina superior derecha como se suele hacer habitualmente. Esto tiene un sentido y es que es el lugar más cercano al pulgar derecho, el dedo que interacciona con la pantalla cuando los usuarios navegan por internet con su smartphone. En ese sentido, es el lugar más aconsejable para ponerlo.
Google Drive (en su aplicación mobile)
En esta herramienta de Google también se ha implementado este tipo de menú, pero en este caso a la izquierda, como se puede ver en la imagen.
Canva
El caso de Canva es muy interesante. Esta página web de diseño ha optado por este tipo de menú, pero solo para desplegar las diferentes carpetas y opciones del perfil personal una vez te has registrado en su plataforma. En cambio, el menú típico al que puede acceder todo el mundo con las diferentes funcionalidades y plantillas que ofrece la web aparecen de forma más tradicional en la parte superior de la web.
Sin embargo, esto solo ocurre en su diseño web para ordenadores, pues en su versión para smartphones sí que se utiliza el menú hamburguesa para todo.
