Tips para diseñar menús verticales en un sitio web

Aunque el estándar usa los menús horizontales para los sitios web, hay también la posibilidad de usar los menús verticalmente, para darle otro toque diferente al sitio web. Generalmente este tipo de menú suele ser más difícil de manipular si no se estructura bien, ya que a diferencia del horizontal tu contenido siempre estará debajo del elemento, y en el vertical tienes que ingeniártelas para poder acomodar el contenido a un lado, lo cual no siempre es sencillo y rápido.

A continuación comparto con ustedes algunos tips y consejos sobre cómo poder diseñar menús verticales y escalables en su sitio web, de tal forma que no sufran por acomodar contenido, porque las capas se desfasen, etc.

Sitios web de una sola página

Sitio web: Jorge Rigabert

El tipo de sitio web que más se acomoda a tener menús verticales son los que son de una sola página, donde por medio del menú puedes ir navegando entre las secciones que tiene la página. Esto ayuda bastante porque una de las cosas que hacen los menús verticales es sobresalir, que siempre estén ahí y que de ninguna manera se oculten por tener que navegar entre la página web. Esto adicional a que un menú vertical siempre debe tener pocas secciones de presentación ante el usuario, y no algo muy exagerado lleno de opciones, íconos y links.

Menús con columnas simples

Sitio web de McDonald’s 

El ejemplo anterior muestra secciones que no tienen sub secciones, pero si tenemos un sitio web mucho más complejo que 5 secciones podemos usar columnas simples para poder mostrar más información sin perder el control del diseño del menú. Aquí el menú podría funcionar tanto horizontal como vertical, pero se usa vertical porque de acuerdo al sitio web se estar aprovechando una parte de la pantalla que de otra forma estaría muy vacía si el menú se pusiera de forma horizontal. Aquí entra todo el concepto de cómo ocupa un lugar importante un menú vertical.

Hazlo lo más sencillo posible

Sitio web Parachute Clothing

Sencillo no significa mal diseñado, ni tampoco carente de toques de animación, pero debe ser lo suficientemente sencillo para que al usuario le guste y le guste usarlo. He visto menús que para cada elemento ponen un título, una descripción, un ícono, un símbolo de flechita, y más abajo ponen más contenido que ni siquiera debería estar ahí como es barra de búsquedas, links con estilos diferentes a las secciones, muchos logotipos, formularios de contacto, etc. Los menús son para mostrar elementos de la página web y por esa razón debe limitarse solo a que contengan eso. Se puede añadir un logo o algún otro detalle adicional, pero en general debería ser tan simple como el sitio web de arriba, donde el usuario pueda picarle para llevarlo a la sección que el quiere ver.

El enfoque de oculto

Kick Point

Con el auge de los sitios web y el responsive design se ha hecho moda que los sitios web de formato escritorio también tengan el famosillo ícono de hamburguesa para representar que el menú está escondido y hay que picarle para descubrirlo. No soy muy fan de esto porque haces que el usuario tenga que dar más clics para ir a una sección, además de que no tiene siempre presente que hay un ícono que hay que usar para que aparezca una parte del sitio web.

Esta funcionalidad yo la movería a ocasiones especiales donde el contenido principal del sitio es suficiente para que el usuario se enganche y navegue por la página. Si deseara conocer algo más específico, o un poco adicional a lo que está viendo acudiría al menú vertical escondido. El sitio web que vemos sigue esa tendencia, a que te enganches sobre lo que tiene que decir el sitio para después buscar la sección que más te gusta. Ahora, no todos vemos el ícono para descubrir el menú, mi recomendación sería mostrarle al usuario que está el menú ahí desde el principio, pero que desaparezca dentro de los primeros 2 segundos, por poner un ejemplo, de esa forma el usuario capta visualmente que hay algo oculto, porque de otra forma cae en la opción de que igual no sabe cómo abrir el menú (aunque diga el ícono Menú).

Conclusiones

Como podrán notar el uso de menús verticales sirve para sitios donde el contenido no es exagerado ni las secciones tienen que ser las más importantes. Ejemplos donde no cabe el concepto de menú vertical son sitios web de noticias, blogs un poco, sitios que tengan mucho contenido con scroll, sitios que tengan una sobre población de contenido a la vista, sitios que ya tengan otro tipo de navegación. Hay muchas excepciones pero creo que con este post se pueden guiar y ver como los ejemplos usan el menú vertical para hacer un sitio web más sencillo, más simple pero igual de funcional que si usáramos uno horizontal.