El menú hamburguesa (o hamburger menu) se refiere a una forma abreviada de menú representada por un icono de tres líneas horizontales. Este menú se ha popularizado en dispositivos móviles y se puede ver no sólo en sitios web sino también en aplicaciones móviles. No se puede negar su utilidad pues es perfecto para pantallas pequeñas ya que al minimizar el menú existe más espacio de pantalla. Debido a que siempre está visible, el usuario puede acceder al menú completo cuando lo requiera.
Sin embargo, en este artículo no discutiremos las ventajas de usar el menú hamburguesa en tu sitio, sino que te indicaremos unas pautas para poder diseñarlo e implementarlo correctamente en tu sitio.
Ten en cuenta los navegadores y sistemas operativos
En la actualidad gran parte de los navegadores y sistemas operativos móviles es compatible con CSS y JavaScript, de modo que puedes darle el estilo e incluso añadir animaciones sencillas a tu menú. Estas animaciones no sólo aumentarán la interactividad sino que también le permitirán saber al usuario si el menú hamburguesa está activo o inactivo.
El verdadero problema sería en los dispositivos móviles y los navegadores antiguos como Internet Explorer 6 pues no son compatibles con CSS. Sin embargo, es posible crear una especie de “plan de apoyo” usando comentarios condicionales para Internet Explorer, de ese modo incluso los usuarios que posean un navegador que no sea actual pueden navegar por tu sitio.
El objetivo es que tu sitio sea compatible en la mayor cantidad de dispositivos y navegadores, sin afectar el diseño o la identidad de marca de tu sitio. Para determinar qué navegadores usan tus usuarios puedes revisar tu sitio en Google Analytics.
Emplea un icono que sea fácilmente reconocible como este tipo de menú
El menú hamburguesa ya tiene cierto aspecto que es común y reconocible para el usuario. Actualmente, posee este nombre debido a que el icono parece una hamburguesa pues está compuesto por 3 barras horizontales que flotan una debajo de la otra. La barra del medio representa la carne y las otras dos son el pan.
Ya que el menú hamburguesa tienes un aspecto usual al que el usuario está acostumbrado, es aconsejable no variarlo de manera tan drástica y mantenerlo como es. Por supuesto, puedes emplear líneas rectas o con bordes redondeadas, gruesos, semigruesas o semidelgadas. También puedes variar el color y colocar uno perteneciente a tu diseño de marca. Es decir, puedes realizar cambios ligeros al modelo ya existente del menú hamburguesa. De esta manera, te aseguras de que el icono sea reconocido por tus usuarios.
Ya que es bastante sencillo puedes realizar el icono desde cero o recurrir a un banco de iconos para obtener uno gratuito y modificarlo según tu identidad de marca.
Cabe destacar que este tipo de menú también se suele representar con tres puntos que flotan uno debajo del otro. Sin embargo, este icono se suele emplear más en aplicaciones que en sitios web.
Destacar el icono del menú hamburguesa
Existen muchas maneras de que la atención del usuario se enfoque en el menú hamburguesa. Uno de los métodos más empleados en colocarlo en una esquina, sin ningún otro elemento distractor cerca. De esta manera, al alejarlo de otros elementos, el icono se convierte en el foco de atención.
El color también ayuda a que un elemento llame la atención. Colores vibrantes o que generen alto contraste con el fondo llaman la atención, aunque usar colores vibrantes es una apuesta arriesgada pues generan cierto tipo de estrés en los ojos si se miran por mucho tiempo de manera continua. Tendrías que realizar las pruebas respectivas para asegurarte que no suceda lo mismo con tu icono.
Otra posibilidad es colocar el icono en un tamaño mayor que el de otros elementos que se encuentran en la parte superior. De esta manera, el usuario sabe que el elemento principal sigue siendo el menú.
Emplear animaciones y transiciones
La interactividad en un sitio no es sólo un “extra”, sino que en ocasiones es necesario. Usualmente, al hablar de interactividad se piensa en complicadas animaciones, pero realmente no es así. La interactividad se puede lograr con animaciones sencillas, pero significativas pues sirven para informar al usuario de las acciones que ha tomado (como por ejemplo posar el cursor sobre cierta sección del menú).
No olvides la interactividad de tu menú cuando este desarrollando un sitio web. Es extremadamente importante que le uses transiciones y efectos para informar al usuario sobre lo que está sucediendo en el sitio web.
Es importante recordar también que la característica principal de un menú es su estructura. Es decir, tu menú debe tener sus secciones bien estructuradas para poder ser de utilidad en tu sitio sin que haya ningún tipo de confusión. El menú hamburguesa es sólo un tipo de solución, pero es importante tener en cuenta los fundamentos.
