30+ grandes ejemplos de menús de navegación

30+ grandes ejemplos de menús de navegación

0 480

¿Debes crear una nueva web?, ¿necesitas volver a diseñar la que tienes? o bien sencillamente, ¿te gustaría mudar el menú de navegación?

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

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

  • el cincuenta por ciento de las ventas potenciales se pierden debido a que el visitante de una web no encuentra la información que busca,
  • el 40 por cien 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 habría de ser intuitiva, fácil de usar y, más importante todavía, debería ayudar a tus visitantes a que hallen el contenido que buscan de forma rápida y fácil. Para asegurar que un menú marcha, la forma más segura es crear tests A/B de menús. Con Nelio A/B Testing es muy simple tal como puedes ver en el vídeo (el vídeo es en inglés mas puedes elegir subtítulos en castellano).

Si tenemos en consideración 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 (acomodables) es crear un menú de navegación que funcione para cualquier género 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.

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

  1. Perceptible: los elementos (o bien opciones) del menú tienen que estar visualmente separados y simples de hallar.
  2. Simple: no te compliques la vida con ellos ni pretendas hacer nada excepcional.
  3. Consistente: emplear exactamente el mismo modelo de navegación en todas y cada una de las páginas.
  4. Familiar: evita tipos de navegación ignotos. Si tus visitantes ya están familiarizados, más de manera fácil lo hallarán todo.
  5. Claro: haz que cada elemento de menú te lleve precisamente donde indica que te llevará.
  6. Descriptivo: evita utilizar nombres genéricos que sirven para cualquier web como Servicios” o bien Productos”. Seguro que puedes ir más al grano. Como es natural, no reinventes lo que ya sirve para todos.
  7. Conciso: incorporar links a partir de una navegación vertical de tu página principal es considerablemente más conciso que muchos submenus al comienzo.
  8. Interactivo: para cualquier interacción que realice el usuario, asegúrate de que se le da alguna indicación o bien respuesta que facilita la siguiente acción que debería realizar.
  9. Ordenado: en un menú horizontal, pon los elementos más esenciales 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
    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 facilitar la navegación a la mínima expresión.
  11. Estructurado: la navegación es una parte de la arquitectura de tu página web, debería planearse.
  12. Accesible: la mayoría de los CSS de menús son técnicamente accesibles, mas cerció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 contrariedades en lectura de textos.
  13. Enlazado: cerciórate de que todos y cada uno de los elementos de menús tienen un link al que se puede hacer un click.
  14. Silenciado: ni se te ocurra ponerle sonido toda vez que alguien hace un click a un elemento de menú.
  15. Poco profundo: no desbordes con información. Cualquier página de tu página web debería ser alcanzable con máximo tres clicks.
  16. Visual: ayuda a tus visitantes con elementos visuales simples de interpretar (emplea los estándares).
  17. Adaptable: obviamente, tu menú debe ser acomodable (adaptable) a todo género de dispositivos.
  18. Continuado: un menú desplegable se ha de ver continuo y sin cortes.
  19. Animado: los efectos de transición logran un efecto considerablemente más agradable y llamativo en cualquier web.
  20. Fijo: el menú debería aparecer en un lugar fijo y no desaparecer al hacer scroll.
  21. Escalable: cerciórate de que es fácil hacer cambios y incorporar elementos al menú cuando sea necesario.
  22. Testeado: prueba el menú con gente habituada a internet mas que no sean especialistas en diseño. Te puedes llevar sorpresas al ver cómo navegan.

Estos principios te pueden asistir a tener unos menús bien diseñados y, personalmente opino que es bueno tenerlos en cuenta. Mas lo cierto es que puedes localizar muchas webs que no los prosiguen y obtienen unos resultados increíbles. Si bien eso sí, probablemente 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.

Los ejemplos de menús que muestro ahora han sido seleccionados de las próximas entradas:

Eso sí, me he asegurado de que todos y cada uno de 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 más bien por el efecto de navegación que tiene. Y claro, eso en una atrapa de la página no se puede ver. Por ende, te invito a que hagas click en los backlinks de cada una para que visites sus webs y puedes gozar de los efectos que logran.

And Culture menu screen shot
Captura de pantalla del menú de And Culture
Awesem menu screenshot
Captura de pantalla del menú de Awesem
Bengtsson&Bengtsson menu screenshot
Captura de pantalla del menú de Bengtsson&Bengtsson
Big Eye Agency menu screenshot
Captura de pantalla del menú de Big Eye Agency
Coulee Creative menu screenshot
Captura de pantalla del menú de Coulee Creative
Curt's Special Recipe menu screenshot
Captura de pantalla del menú de Curt’s Special Recipe
Galpin Induestries menu screenshot
Captura de pantalla del menú de Galpin Induestries
Grain&Mortar menu screenshot
Captura de pantalla del menú de Grain&Mortar
Info grafix lab menu screenshot
Captura de pantalla del menú Infografixlab
The Japan Times menu screenshot
Captura de pantalla del menú de The Japan Times
John Sardine menu screenshot
Captura de pantalla del menú de John Sardine
Long Story Short menu screenshot
Captura de pantalla del menú de Long Story Short menu screenshot
LBVD menu screenshot
Captura de pantalla del menú de LBVD
Made by Vadim menu screenshot
Captura de pantalla del menú de Made by Vadim
Marketplace menu screenshot
Captura de pantalla del menú de Marketplace
Marketing Week menu screenshot
Captura de pantalla del menú de Marketing Week
Matter of Form menu screenshot
Captura de pantalla del menú de Matter of Form
nGen Works menu screenshot
Captura de pantalla del menú de nGen Works
Paid to Exists menu screenshot
Captura de pantalla del menú de Paid to Exists
piano menu screenshot
Captura de pantalla del menú de piano
Proweb design menu screenshot
Captura de pantalla del menú de Proweb Design
Racket menu screenshot
Captura de pantalla del menú de Racket
Rokivo menu screenshot
Captura de pantalla del menú de Rokivo
Rudalov menu screenshot
Captura de pantalla del menú Rudalov
Sparked menu screenshot
Captura de pantalla del menú de Sparked
Standford Arts menu screenshot
Captura de pantalla del menú de Standford Arts
StudioPress menu screenshot
Captura de pantalla del menú de StudioPress
ThemeTrust menu screenshot
Captura de pantalla del menú de ThemeTrust
Uber menu screenshot
Captura de pantalla del menú de Uber
Web Design Ledger menu screenshot
Captura de pantalla del menú de Web Design Ledger
wedge&lever menu screenshot
Captura de pantalla del menú de wedge&lever
WPEngine menu screenshot
Captura de pantalla del menú de WPEngine
Zinio menu screenshot
Captura de pantalla del menú de Zinio

Y si aun necesitas más inspiración, te invito a que eches una ojeada 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 enorme menú en tu página web. Mas sobre todo recuerda, no te olvides de testearlos con tus visitantes y crear alteraciones de menú con Nelio A/B Testing :-)

Imagen destacada: menú que presento Pop-Up Restaurante en el 3D PrintShow.

SIMILAR ARTICLES

NO COMMENTS

Leave a Reply