El hamburger menu es un tipo de menú utilizado ampliamente en dispositivos móviles. En un punto su popularidad fue tan alta que se utilizaba también en interfaces para ordenador.
Este menú hace referencia a un icono de tres líneas que indica que el menú se encuentra “escondido”. Al tocar este icono se puede ver el menú, ya sea que aparezca en la totalidad de la pantalla o en una parte de ella. Por esta razón, ya que no se cuenta con suficiente espacio en pantallas móviles, se hace uso de este menú por obvias razones.
Sin embargo, el hamburger menu no es la única opción disponible al diseñar menús para móviles y con el paso del tiempo han surgido más opciones. En este artículo te mencionamos algunas de las más prácticas.
Menú dividido en pestañas
Aunque es más común que se emplee el scrolling vertical en ciertas aplicaciones móviles, alguna de ellas implementan el scrolling horizontal, principalmente aquellas en donde se utiliza un diseño basado en tarjetas y en cada una de ellas se puede localizar un solo foco de atención.
Puedes aprovechar el uso común que posee el scrolling horizontal y ofrecer un menú en pestañas. Este menú puede contener diversos elementos pues si el usuario necesita alguno de ellos simplemente debe deslizarse hacia la derecha para poder visualizar los otros elementos que contiene el menú.
Este menú suele ser bastante sencillo en cuanto a su diseño. Es común que se emplee sobre un fondo blanco y la tipografía sea de color negro, aunque también es posible encontrar ciertas interfaces donde se emplea un color de acento en la barra de menú. Si un elemento particular del menú ha sido seleccionado se colorea una línea de un color representativo, usualmente el color de acento o algún color que identifique a la marca. Como cualquier otro menú se suele ubicar en la parte superior de la interfaz.
Este menú en pestañas puede hacerse en base a palabras o si deseas también puedes incluir iconos. En caso desees añadir iconos en tu menú, es recomendable incluir también palabras que identifiquen y coincidan con el icono que has empleado.
Menú en la parte inferior
Aunque en interfaces para ordenador, el menú usualmente se coloca en la parte superior y se podría localizar en la parte inferior de la página en ciertas páginas más experimentales, en diseño móvil es posible colocar el menú en la parte inferior de la pantalla. De hecho muchos dispositivos móviles colocan ciertos botones básicos en esta ubicación. También es común que se ubiquen las cuatro aplicaciones más utilizadas en este espacio dentro del sistema operativo Android. Así que, como ves, el uso de botones en la parte inferior de la pantalla es completamente normal en dispositivos móviles.
Nuevamente, puedes sacar provecho de esta ubicación común en los dispositivos móviles para localizar el propio menú de tu aplicación en la parte inferior. En estos casos se suele utilizar un color plano que haga contraste con el fondo que se utiliza en la aplicación y se colocan iconos y etiquetas en los elementos del menú. También es posible encontrar menús inferiores que solo posean iconos, sin embargo, el significado de cada icono debe ser realmente claro para que puedas utilizar esta técnica sin causar confusión en tus usuarios. Adicionalmente, al elemento seleccionado del menú se le coloca un color de acento, tanto en la tipografía como en el icono para identificarlo como seleccionado.
Si es un menú de varios niveles, también puede ser implementado. Sólo debes añadir una lista desplegable cuando el usuario pinche algún botón para que pueda acceder al submenú de dicho elemento. De esta manera, esta es una gran opción para menús de uno o dos niveles.
Menú distribuido en botones
Otra posibilidad de menú en dispositivos móviles es colocar cada elemento en un botón. De esta manera, el usuario reconoce que cada elemento puede ser seleccionado. Como muchos botones debe tener por lo menos dos estados: en reposo y cuando se encuentra seleccionado. Siempre debe existir un indicador visual cuando un elemento del menú ha sido escogido.
Este tipo de menú es ideal cuando se tienen pocos elementos y se pueden colocar todos ellos en la pantalla. Uno de sus mayores beneficios es que al utilizar botones, la experiencia se siente más natural ya que los botones son un elemento bastante común con lo que los usuarios ya se encuentran familiarizados.
Recuerda que para implementar este tipo de menú debes verificar que las etiquetas del menú sean legibles en las pantallas más pequeñas. Aunque este menú es muy útil debido a los botones, no es el ideal para todo tipo de menús.
Botón para mostrar más contenido
Este menú puede ser implementado cuando existen un mayor número de elementos. Suele ser una variación de un menú que ya hemos mencionado previamente: el menú inferior, aunque también podría ser ubicado en la parte superior ya que los usuarios están acostumbrado a interactuar con menús superiores e inferiores en dispositivos móviles.
En este caso, uno de los elementos tiene el indicador “Más”. Se suele representar con tres puntos suspensivos y si el usuario lo selecciona, aparecerá una lista desplegable en donde se colocan los demás elementos del menú.
Para poder implementar correctamente este tipo de menú, debes analizar cuáles son los elementos principales que son de mayor utilidad para el usuario. Son estos elementos los que deben ser colocados en el menú, mientras que los otros aparecerán bajo la opción “Más”.
En conclusión…
Aunque el hamburger menu se considera la opción ideal al diseñar interfaces para dispositivos móviles, existen más opciones disponibles con las que los usuarios ya se encuentran familiarizados, particularmente porque otros diseñadores han comenzado a implementarlas en diversas aplicaciones e incluso en sistemas operativos se hace uso de otras opciones aparte del hamburger menu.
Todas las opciones presentadas son de utilidad, pero es necesario que las implementes adecuadamente. Te recomendamos revisar tus aplicaciones favoritas o las más populares. Por ejemplo, en el propio diseño de la App Store o Google Play podemos ver diversos ejemplos de menú implementados.
