5 formas de presentar el menú principal de una web

menu-navigation-inspiration-website-miniature

Sea como sea nuestro diseño es imprescindible que nuestra web disponga de un menú principal con el que guiar al usuario. Incluso hoy día existiendo webs «one page», en las que todo el contenido se encuentra en una sola página, debemos guiar a través de los enlaces clave para mejorar la experiencia del usuario (UX).

Existen distintas formas de mostrar nuestro menú, y aunque las tendencias nos recomiendan que sean discretos y con un máximo de cinco enlaces para que el usuario no tenga que hacer demasiados clics, sigue siendo un elemento que no puede faltar en nuestra web.

El método más común de presentarlo es en la parte superior de la web cerca del logo; si bien es necesario que se encuentre casi siempre en esa posición de la página, existen multitud de formas creativas de mostrar estos menús.

1. Menú superior

La forma más habitual de encontrarnos un menú es, como ya hemos dicho, en la parte superior de la web cerca del logo y de disposición horizontal. Es el lugar más intuitivo, puesto que los diseñadores web llevamos tiempo poniendo los menús en esa zona y el usuario ya se ha acostumbrado.

menu-navigation-inspiration-website
menu-navigation-inspiration-website2
menu-navigation-inspiration-website3

2. Menú lateral

Los laterales también tienen una disposición bastante intuitiva, aunque con la llegada del responsive puede que este sistema sea un poco menos utilizado. Con el uso de las «one page», muchas veces se emplea una variante: un menú de puntos donde no aparece el título de la sección, pero sí que se van iluminando según vas haciendo scroll para saber a qué altura de la página te encuentras (como el primer ejemplo que os mostramos a continuación). Es otro método de guiar al usuario.

menu-navigation-inspiration-website-left1
menu-navigation-inspiration-website-left2
menu-navigation-inspiration-website-left3
menu-navigation-inspiration-website-left4

3. Menú hamburguesa

Éste es un sistema relativamente nuevo. Desde la llegada de Internet a los dispositivos móviles nos hemos acostumbrado a este tipo de menús y, por eso, es ya común encontrárnoslos no sólo en el responsive, sino también en las versiones de escritorio. Consiste en que el menú se despliega al pulsar sobre los tres líneas horizontales que «parecen» una hamburguesa y que suelen estar ubicadas en la parte superior de la página.

Tiene un par de puntos en su contra: por un lado, el usuario medio todavía se acostumbrando a él (y seguramente a tu madre o a tu abuela no les parecerá de lo más intuitivo) y, por otro lado, a los programadores no les gusta demasiado este sistema y eso está creando un poco de controversia en el mundo del diseño web.

menu-navigation-inspiration-website-burger-menu1
menu-navigation-inspiration-website-burger-menu2
menu-navigation-inspiration-website-burger-menu3

4. Menú inferior

El uso de los menús inferiores no es tan común a causa de que deben estar fijos a la pantalla para no perder la navegación de vista. Además, no siempre acompaña al diseño que estamos desarrollando. Hay una opción para no tener que fijar el menú en esa posición: se puede establecer que aparezca en la parte inferior al entrar a la página, pero cuando pinches en cualquier sección, el menú se coloque en la parte superior como es habitual.

En el ejemplo que viene a continuación vemos ese método: la primera imagen nos muestra cómo aparece el menú al entrar en la web de Miss Julia Piep; en la segunda, podemos observar que se recoloca en la parte superior tras pinchar en una de las secciones.

menu-navigation-inspiration-website-bottom
menu-navigation-inspiration-website-bottom2
menu-navigation-inspiration-website-bottom3

5. Menú en el contenido

El método más resultón es integrarlo con el contenido de la página, o incluso que el menú sea el contenido: eso nos permitirá crear una página muy dinámica. Eso sí, al entrar en un apartado deberemos contemplar otra disposición más discreta y ordenada del menú.

menu-navigation-inspiration-website-medium
menu-navigation-inspiration-website-medium2
menu-navigation-inspiration-website-medium3

3 comentarios en “5 formas de presentar el menú principal de una web”

  • David dice:

    Aunque al principio no era me atraía la idea del uso del menú ‘hamburguesa’ para web, a estas alturas he visto tantos trabajos excelentes con este que ya se me hace raro no verlo en una web, desde luego una tendencia del 2015 que seguirá todo 2016 :)

  • Pingback: enfoquegaussiano
  • Pingback: enfoquegaussiano

Dinos lo que piensas

Tu email no se mostrará ;)