¿Tienes que crear una nueva web?, ¿necesitas rediseñar la que tienes? o simplemente, ¿te gustaría cambiar el menú de navegación?

En cualquiera de los casos, el diseño de un buen menú de navegación es crucial para conseguir una web atractiva y optimizada para la conversión (que tus clientes hagan aquellas acciones en tu web que tu quieres).

De hecho, en un estudio de Forrester (http://www.usability.gov/) concluyeron que:

• el 50% de las ventas potenciales se pierden debido a que el visitante de una web no encuentra la información que busca,
• el 40% de los visitantes a una web nunca vuelve si su primera experiencia ha sido negativa.

Por lo tanto, el tener un menú de navegación efectivo es importante para garantizar la usabilidad y el éxito en el diseño de tu web. Una buena navegación debería ser intuitiva, fácil de usar y, más importante todavía, debería ayudar a tus visitantes a que encuentren el contenido que están buscando de forma rápida y fácil. Para garantizar que un menú funciona, la forma más segura es crear tests A/B de menús. Con Nelio A/B Testing es muy fácil tal y como puedes ver en el vídeo (el vídeo es en inglés pero puedes seleccionar subtítulos en castellano).

Si tenemos en cuenta que cada vez más y más los que te visitan acceden desde móviles, un reto importante del diseño y desarrollo de webs responsive (adaptables) es crear un menú de navegación que funcione para cualquier tipo de dispositivo. Y es por este motivo que cada vez encontramos más webs que están optando por menús mucho menos dominantes visualmente.

Principios de diseño de menús para una buena navegación de web

Dmitry Molchanov, en 22 Principles Of Good Website Navigation and Usability describe las características que hay que tener en cuenta al diseñar los menús para conseguir una buena navegación en una web.

1. Perceptible: los elementos (o opciones) del menú han de estar visualmente separados y fáciles de encontrar.
2. Simple: no te compliques la vida con ellos ni pretendas hacer nada extraordinario.
3. Consistente: utilizar el mismo modelo de navegación en todas las páginas.
4. Familiar: evita tipos de navegación desconocidos. Si tus visitantes ya están familiarizados, más fácilmente lo encontrarán todo.
5. Claro: haz que cada elemento de menú te lleve exactamente donde indica que te llevará.
6. Descriptivo: evita utilizar nombres genéricos que sirven para cualquier web como «Servicios» o «Productos». Seguro que puedes ir más al grano. Por supuesto, no reinventes lo que ya sirve para todos.
7. Conciso: añadir enlaces a partir de una navegación vertical de tu página principal es mucho más conciso que muchos submenus al principio.
8. Interactivo: para cualquier interacción que realice el usuario, asegúrate de que se le da alguna indicación o respuesta que facilita la siguiente acción que debería realizar.
9. Ordenado: en un menú horizontal, pon los elementos más importantes en los extremos y los menos importantes en el medio. La posición estándar de «Contacto» es a la derecha.

   Los psicólogos le llaman «efecto de posición serial», y se basa en los principios de primacia y recencia (novedad)

10. Con estilo: cada vez más, la tendencia es ser minimalista y muchos diseñadores optan por simplificar la navegación a la mínima expresión.
11. Estructurado: la navegación es parte de la arquitectura de tu web, debería planificarse.
12. Accesible: la mayoría de los CSS de menús son técnicamente accesibles, pero asegúrate de que la navegación funciona bien para:
    • todos los navegadores, incluyendo antiguos,
    • dispositivos móviles,
    • navegadores con Javascript deshabilitado,
    • dispositivos sin ratón,
    • usuarios con dificultades en lectura de textos.
13. Enlazado: asegúrate de que todos los elementos de menús tienen un enlace al que se puede hacer un clic.
14. Silenciado: ni se te ocurra ponerle sonido cada vez que alguien hace un clic a un elemento de menú.
15. Poco profundo: no desbordes con información. Cualquier página de tu web debería ser accesible con máximo 3 clics.
16. Visual: ayuda a tus visitantes con elementos visuales fáciles de interpretar (utiliza los estándares).
17. Adaptable: evidentemente, tu menú ha de ser adaptable (responsive) a todo tipo de dispositivos.
18. Continuado: un menú desplegable se ha de ver continuo y sin cortes.
19. Animado: los efectos de transición consiguen un efecto mucho más agradable y llamativo en cualquier web.
20. Fijo: el menú debería aparecer en un sitio fijo y no desaparecer al hacer scroll.
21. Escalable: asegúrate de que es fácil hacer cambios y añadir elementos al menú cuando sea necesario.
22. Testeado: prueba el menú con gente habituada a internet pero que no sean especialistas en diseño. Te puedes llevar sorpresas al ver cómo navegan.

Estos principios te pueden ayudar a tener unos menús bien diseñados y, personalmente opino que es bueno tenerlos en cuenta. Pero lo cierto es que puedes encontrar muchas webs que no los siguen y obtienen unos resultados increíbles. Aunque eso sí, seguramente los han creado grandes diseñadores.

A continuación una muestra de menús de WordPress variados que espero te puedan servir de inspiración para el tuyo.

Ejemplos de menús de WordPress

Los ejemplos de menús que muestro a continuación han sido seleccionados de las siguientes entradas:

• 22 Great Examples of Website Navigation por Sam Hampton-Smith
• 40 Beautiful and Effective Responsive Navigation Menus por Steven Snell
• 23 Great Examples of Innovative Navigation for Your Inspiration por Stephanie Irvine
• Drop Down Navigation – 22 Inspiring Examples of Stylish Drop Down Menus por Michael Almond
• Great Examples Of Website Menu Design por Bogdan Sandu
• 6 Examples of Great Website Menu Design (and Why They Work) por Ryan Scott

Eso sí, me he asegurado de que todos los ejemplos son de webs en WordPress.

El orden por el que se muestran es alfabético. Y un detalle importante: en algunos, la captura de pantalla del menú puede parecer muy normal, pero lo he seleccionado no tanto por el estilo del menú, sino por el efecto de navegación que tiene. Y claro, eso en una captura de la página no se puede ver. Por lo tanto, te invito a que hagas clic en los enlaces de cada una para que visites sus webs y puedes disfrutar de los efectos que consiguen.

Nelio A/B Testing

Me sorprendió mucho la calidad del plugin, lo fácil que fue configurarlo y el increíble soporte que me dio Nelio. Recomiendo encarecidamente usar Nelio A/B Testing.

Josette Millar

WordPress.org

Ver planes

1. And Culture

2. Awesem

3. Bengtsson & Bengtsson

4. Big Eye Agency

5. Coulee Creative

6. Curt’s Special Recipe

7. Galpin Industries

8. Grain & Mortar

9. Infografixlab.com

10. The Japan Times

11. John Sardine

12. Long Story Short Design

13. LBVD

14. Made by Vadin

15. Marketplace

16. Marketing Week

17. Matter of Form

18. nGen Works

19. Paid to Exists

20. piano

21. Proweb Design

22. Racket

23. Rokivo

24. Rudalov

25. Sparked

26. Standford Arts

27. StudioPress

28. Theme Trust

29. Uber

30. Web Design Ledger

31. wedge&lever

32. WPEngine

33. Zinio

Y si todavía necesitas más inspiración, te recomiendo que eches un vistazo a un buen artículo de Web Design Tunes que describe con detalle 35 Premium Web Navigation Menus.

Ahora ya no tienes excusa para no tener un gran menú en tu web. Pero sobre todo recuerda, no te olvides de testearlos con tus visitantes y crear variaciones de menú con Nelio A/B Testing 🙂

Imagen destacada de Catherine Heath en Unsplash.