La barra de menú es un elemento esencial en todo sitio web, básicamente es lo que conecta al usuario con el resto del sitio web. Por supuesto, no es el único elemento, la barra de búsqueda también entraría dentro de esta categoría pues permite al usuario acceder a cierta página o información específica de manera más sencilla. Sin embargo, la barra de menú es el elemento principal y por ello debe ser optimizado para las diversas plataformas y dispositivos que existen. La tecnología y la popularización de los dispositivos móviles ha cambiado la forma en la que navegamos por internet y es por ello que surgen ciertas tendencias. En este artículo vamos a listar algunas opciones actuales de barra de menú que pueden funcionar tanto en ordenadores como móviles.
Barra de menú fija
Los menús fijos (conocidos como sticky menus en inglés) son aquellos que siempre se mantienen visibles sin importar que tanto se desplace el usuario hacia abajo. De esta manera, el usuario puede ir a cualquier página del sitio que prefiera sin la necesidad de volver hasta el inicio de la página para encontrar la barra de menú.
Estos menús no sólo son de utilidad en el caso de sitios web, sino también en aplicaciones móviles que sólo hacen uso de iconos en su barra de menús. Tiene bastante sentido pues mientras más pequeño es el tamaño de la pantalla, más el usuario suele desplazarse hacia abajo. Especialmente en aplicaciones con un gran volumen de contenido y que poseen infinite scrolling como es el caso de las redes sociales.
Litmus emplea este enfoque en su barra de menú, que se mantiene visible sin importar qué tanto el usuario se desplace hacia abajo. Posee también un animación ligera en el menú que nos informa cuando ya no nos encontramos en la primera sección.
Menú vertical
Colocar la barra de menú de forma vertical en vez de horizontal es otra opción popular en diseño web. De esta manera, las opciones de menú siempre se mantienen visibles. Este tipo de diseño hace que el menú sea más visible debido a la cantidad de espacio que ocupa en comparación con la usual barra de menú horizontal. Podría ser bastante adecuado para sitios web enfocados en la tipografía ya que es una gran forma de colocar un puntaje mayor al texto del menú.
A pesar de que el menú vertical puede capturar la atención de tus usuarios de manera más efectiva que el menú horizontal, debes tener cuidado de que no distraiga a los usuarios. Para ello es esencial que distribuyas adecuadamente los espacios para el menú y el resto del contenido.
Flipp hace un gran uso del menú vertical pues no es un elemento que distrae al usuario ya que utiliza otros recursos como fotografías en gran tamaño, tipografía sencilla y en gran puntaje, parallax scrolling, etc. para que el usuario se enfoque en el contenido.
Hamburger Menu
El hamburger menu se emplea ampliamente en el diseño web móvil. Este icono ha logrado adoptar el significado de un menú minimizado y debido a que el espacio en pantallas de dispositivos móviles suele ser uno de los mayores problemas de un diseñador, se coloca este menú minimizado para ahorrar espacio, de manera que el usuario sólo accede al menú completo cuando lo necesita. Es una técnica bastante útil en muchas situaciones que deberías tener en cuenta si vas a diseñar alguna aplicación web o móvil.
En la gran mayoría de casos al “activar” el hamburger menu, éste ocupa una parte de la pantalla y se puede volver a minimizar en cualquier momento. Sin embargo, ciertos diseñadores lo emplean en toda la pantalla para que el usuario se enfoque en el menú. Ambas opciones tienen sus ventajas y desventajas y la verdad es que depende del tipo de sitio que estés creando.
Digital Telepathy hace uso de la primera opción pues ha colocado un video como fondo en su página de inicio. Se puede ver como el video se sigue reproduciendo incluso cuando hemos accedido al menú.
Navegación basada en tarjetas
El diseño basado en tarjetas está cobrando popularidad y se debe principalmente a todas las ventajas que presenta para el diseño en móviles. Asimismo, también resulta provechoso para los diseñadores al momento de organizar el contenido de una web, de modo que es perfecto cuando hay un gran volumen de contenido pues te permite separar y delimitar el espacio para cada pieza de información. No sólo lucirá ordenado sino que te evitas el exceso de información que nunca es bueno para los usuarios.
Aunque el Card Design se emplea principalmente en layouts completas y no como un menú, es una idea totalmente viable, particularmente si se trata de portafolios que dividen sus proyectos en diversas categorías. Cada fotografía representa una categoría del menú, de esta manera se ofrece información visual llamativa para el usuario. También se puede emplear en otro tipo de sitios, como en Katvig, que cuenta con una barra de menú tradicional, pero la página principal también se puede emplear como menú. Se han intercalado fotografías y frases, cada fotografía se asocia a un elemento del menú. Es así como la página principal se convierte en una composición que refuerza la marca y sirve como un menú opcional, más llamativo para el usuario.
Secciones con scrolling
El scrolling también puede ser usado como una opción de menú, aunque probablemente no sea propicio para todos los sitios, pero es ideal para aquellos que presentan pocos elementos en su menú, como es el caso de Barrel and Crow. Este sitio emplea imágenes que ocupan todo el ancho de la pantalla para ilustrar los elementos del menú, de esta forma cada fotografía representa un elemento de la barra menú. También hace uso de tipografía en gran tamaño que simplemente es perfecto para este tipo de diseño pues cuenta con mucho espacio.
Elegir secciones con scrolling como una opción de menú podría ser un apuesta arriesgada, pero bastante llamativa si hace uso de elementos de diseño que refuercen a la marca. Otra gran ventaja de este diseño es que llama bastante la atención y hace que el usuario realmente disfrute la experiencia. Aunque sea poco común, el usuario de igual manera va a desplazarse hacia abajo, así que descubrirá de inmediato cómo funciona la navegación. De igual manera, nunca está de más colocar una pequeña pista visual como una flecha para que el usuario entienda que hay más contenido.
En conclusión…
Ahora que los móviles se han popularizado, los diseñadores y desarrolladores deben considerar las mejores opciones para que el usuario pueda navegar sin problemas desde estos dispositivos. La mejor manera de optimizar la navegación es ofrecer una barra de menú completamente funcional e intuitiva como las alternativas que hemos listados en este artículo. La que sea más adecuada para tu sitio web depende de la estructura que hayas definido y también del volumen de contenido.
