Foto de Catherine Heath en Unsplash

¿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:

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.

1. And Culture

And Culture menu screen shot
Captura de pantalla del menú de And Culture

2. Awesem

Awesem menu screenshot
Captura de pantalla del menú de Awesem

3. Bengtsson & Bengtsson

Bengtsson&Bengtsson menu screenshot
Captura de pantalla del menú de Bengtsson&Bengtsson

4. Big Eye Agency

Big Eye Agency menu screenshot
Captura de pantalla del menú de Big Eye Agency

5. Coulee Creative

Coulee Creative menu screenshot
Captura de pantalla del menú de Coulee Creative

6. Curt’s Special Recipe

Curt's Special Recipe menu screenshot
Captura de pantalla del menú de Curt’s Special Recipe

7. Galpin Industries

Galpin Induestries menu screenshot
Captura de pantalla del menú de Galpin Induestries

8. Grain & Mortar

Grain&Mortar menu screenshot
Captura de pantalla del menú de Grain&Mortar

9. Infografixlab.com

Info grafix lab menu screenshot
Captura de pantalla del menú Infografixlab

10. The Japan Times

The Japan Times menu screenshot
Captura de pantalla del menú de The Japan Times

11. John Sardine

John Sardine menu screenshot
Captura de pantalla del menú de John Sardine

12. Long Story Short Design

Long Story Short menu screenshot
Captura de pantalla del menú de Long Story Short menu screenshot

13. LBVD

LBVD menu screenshot
Captura de pantalla del menú de LBVD

14. Made by Vadin

Made by Vadim menu screenshot
Captura de pantalla del menú de Made by Vadim

15. Marketplace

Marketplace menu screenshot
Captura de pantalla del menú de Marketplace

16. Marketing Week

Marketing Week menu screenshot
Captura de pantalla del menú de Marketing Week

17. Matter of Form

Matter of Form menu screenshot
Captura de pantalla del menú de Matter of Form

18. nGen Works

nGen Works menu screenshot
Captura de pantalla del menú de nGen Works

19. Paid to Exists

Paid to Exists menu screenshot
Captura de pantalla del menú de Paid to Exists

20. piano

piano menu screenshot
Captura de pantalla del menú de piano

21. Proweb Design

Proweb design menu screenshot
Captura de pantalla del menú de Proweb Design

22. Racket

Racket menu screenshot
Captura de pantalla del menú de Racket

23. Rokivo

Rokivo menu screenshot
Captura de pantalla del menú de Rokivo

24. Rudalov

Rudalov menu screenshot
Captura de pantalla del menú Rudalov

25. Sparked

Sparked menu screenshot
Captura de pantalla del menú de Sparked

26. Standford Arts

Standford Arts menu screenshot
Captura de pantalla del menú de Standford Arts

27. StudioPress

StudioPress menu screenshot
Captura de pantalla del menú de StudioPress

28. Theme Trust

ThemeTrust menu screenshot
Captura de pantalla del menú de ThemeTrust

29. Uber

Uber menu screenshot
Captura de pantalla del menú de Uber

30. Web Design Ledger

Web Design Ledger menu screenshot
Captura de pantalla del menú de Web Design Ledger

31. wedge&lever

wedge&lever menu screenshot
Captura de pantalla del menú de wedge&lever

32. WPEngine

WPEngine menu screenshot
Captura de pantalla del menú de WPEngine

33. Zinio

Zinio menu screenshot
Captura de pantalla del menú de 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.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de Nelio Software

Tus datos personales se almacenarán en SiteGround y serán usados por Nelio Software con el único objetivo de publicar tu comentario aquí. Con el envío de este comentario, nos das el consentimiento expreso para ello. Escríbenos para acceder, rectificar, limitar o eliminar tus datos personales.