Implementar un menu vertical en tu sitio no es una idea tan alocada. Es cierto que no es tan común, particularmente cuando tu sitio tiene gran volumen de información. Sin embargo, existe una manera de crear un menu vertical que sea usable. No existe una fórmula mágica pues cada sitio que crees es distinto, pero sí que existen consejos o pautas a seguir al momento de desarrollar un menú vertical para tu sitio web. En este artículo te indicamos cuáles son.
Propicios para diseños de una sola página
Estos diseño se suelen usar en sitios web pequeños, donde el contenido se puede estructura de manera más sencilla y usualmente el menú no suele contener tantos elementos. Es común ver este tipo de diseños en portafolios online, páginas de destino, páginas de aplicaciones o servicios, etc.
Usualmente se suele utilizar una barra lateral donde se colocan los elementos del menú. Esta barra destaca o es de un color distinto que el fondo, de modo que llame la atención y se note que es otra pieza de la composición. Este es el escenario más común, sin embargo, también es posible incorporar un diseño más acorde al estilo del sitio, donde cada elemento del menú se encuentre encerrado, como podemos ver en el ejemplo. Todo depende del público objetivo, del propósito y del estilo de tu sitio web, un menú lateral no debe ser “genérico” sino ir acorde a las necesidades del sitio web.
Organizar menús y submenús
No en todos los sitios web se puede implementar adecuadamente el diseño de una sola página. Hay simplemente algunos sitios donde la información simplemente es mucho más de la debida para que este tipo de diseño funcione. En sitios donde el volumen de información es alto, es recomendable recurrir a otras opciones. Es cierto que el diseño de una sola página se ve bastante moderno y “a la moda”, pero puedes lograr que tu sitio se vea actual sin recurrir a este tipo de layout.
En otros tipos de layout es más común ver el menú ubicado en la parte superior, pero también se puede hacer uso de un menú vertical como en el ejemplo que hemos colocado. Se usa el menú vertical con diversos elementos sin mayor problema. Esto tiene muchas ventajas pues es mucho más sencillo localizar el menú y navegar por los diversos elementos que éste posee (submenús incluidos), se puede notar que la lectura es ligeramente más sencilla. Entonces, como ves, hay formas de implementar un menú lateral en un sitio web que contiene bastante información. Lo que se ha hecho aquí es estructurar el menú en 10 categorías y cada una de ellas cuenta con un submenú. De esa manera, aunque hay mucha información, a primera vista, en el menú no se aprecia. Todo tiene que ver con el modo en que estructures el menú.
Condensar información
Para poder crear el contenido de tu menú debes organizar la información y agruparla en categorías. Esto es especialmente cierto y relevante en los menús laterales donde cada pixel cuenta, por eso, en ocasiones, tendrás que crear subcategorías, de modo que las categorías se vean reducidas. No está de más repasar más de una vez el menú que has creado para asegurarte que cada elemento que allí figura está en el lugar correcto y se ha agrupado lo más que se ha podido.
Una vez que tienes las categorías y al momento de realizar tus prototipos tal vez debas recurrir a probar con tipografías más pequeñas en tu menú o mover elementos hacia otro lugar de modo que no interfieran con el menú. La clave es que el menú se mantenga sencillo por sobre todas las cosas. Al realizar tus prototipos y ver los elementos de tu menú de manera más gráfica tal vez decidas eliminar ciertos elementos de las subcategorías o mover ciertas subcategorías a otra. Es importante mantener la mente abierta y estar dispuesto a realizar cambios de ser necesario.
En el ejemplo que hemos colocado el menú lateral es bastante obvio por el color y el puntaje de la tipografía. Podemos ver que consta de 4 elementos, que a la vez funcionan como filtro en esta tienda online.
Usar el menú hamburguesa a tu favor
Ya sea que odies o ames esta nueva tendencia en el diseño, no puedes negar que es bastante útil cuando se trata de incluir un menú lateral. De esta manera el menú se mantiene minimizado y sólo a la vista del usuario cuando éste lo requiere. Por otro lado, puedes usar todo el espacio de la pantalla para tus diseños, así que puedes usar una fotografía de gran tamaño y emplear más espacios en blanco si así lo deseas.
Este menú hamburguesa es empleado en muchos sitios web y como muchas otras tendencias depende del contexto utilizado para determinar si en realidad es positiva o negativa. En el ejemplo mostrado, el menú hamburguesa sirve como acceso directo al menú y éste se coloca en el lado derecho. Al incluir el menú, el resto de los elementos se alinean en lo que resta de la pantalla, lo que le da cierta interactividad al sitio. Es un detalle pequeño, pero cuenta.
