Diseñar un buen menú de navegación web no es tarea fácil, pues entran muchos puntos a tener en cuenta que van desde la densidad de contenido al diseño que queremos utilizar. Un menú de navegación puede ser simple o complejo y puede facilitar el encontrar lo que se busca o, al contrario, dificultarlo. El menú de navegación varía mucho de sitio en sitio, no es lo mismo la planificación del menú de navegación de un blog que el de una tienda online. Así, muchas veces con un simple menú de navegación habremos conseguido un diseño web bien estructurado, mientras que otras veces no nos quedará más remedio que crean complejos submenús.
El diseño web de menús de navegación es un arte por si mismo y los diseñadores se vuelven mejor con la experiencia y el análisis de otros sitios web. En este artículo vamos a ver las complejidades de los menús de navegación, así como consejos para el diseño web de menús que mejoren la experiencia de usuario. Tomaremos ejemplos de la vida real para ver como poner en la práctica estos consejos.
Organizar la Estructura de Navegación Web
Después del diseño, quizás la parte más difícil de un buen diseño web sea la organización de los contenidos en un menú de navegación de modo que sea fácil e intuitivo para los usuarios encontrar aquello que buscan. A continuación vamos a ver algunos métodos y mejores prácticas para organizar los contenidos en un menú de navegación, lo llamado arquitectura de la información, pues un menú de navegación intuitivo lleva a una mejor experiencia de usuario y, con ello, aumenta las probabilidades de una mejora en la conversión web.
Esquema del menú de navegación
Antes incluso del diseño del sitio web se debería pensar en un buen esquema del menú de navegación. Aunque estemos diseñando el sitio web de una pequeña empresa, o un blog que esperamos sea popular pero ahora sólo tiene 100 artículos, es muy importante no sólo pensar a largo plazo, sino también ponerse en la piel de nuestros potenciales clientes o usuarios. Quizás tú piensas que está muy claro y tus visitas no encuentran nada, por lo que vale la pena estudiar los sitios web de la competencia antes de nada, pues te darán muchas ideas. En el caso de sitios web de mucho tráfico vale la pena hacer un test de usabilidad, pero aún así el realizar un esquema del menú de navegación nos facilitará mucho las cosas.
Antes de empezar con el esquema del menú de navegación haría un brainstorming o lluvia de ideas. ¿Qué conceptos te vienen a la cabeza que pueden buscar los usuarios? Por ejemplo, en este blog estarían las palabras tutoriales, consejos, inspiración, recursos, etc. Antes de ordenar las ideas en un esquema, vale la pena coger un folio o un documento de texto y hacer una lluvia de ideas con todas las palabras que creemos importantes para nuestro sitio. Una vez hecho esto, es cuando podemos propiamente empezar a organizar las ideas en un esquema de navegación para nuestro diseño web.
Antes de coger papel y lápiz o un programa de mapas mentales, vale la pena poner un poco de orden en las palabras que han surgido de la lluvia de ideas. Si son pocas, podemos hacerlo directamente, pero si el sitio web tiene muchos contenidos y una navegación compleja, vale la pena utilizar tarjetas para ordenar las ideas.
Algunas herramientas útiles para ordenar nuestras ideas utilizando tarjetas son OptimalSort, WebSort y UserZoom.
Una vez tenemos una idea de cómo clasificar los contenidos del sitio web, es el momento de crear propiamente un esquema de navegación web que nos dé una idea visual de cómo se relacionan entre sí los contenidos. Un consejo importante es evitar en la medida de lo posible que los contenidos estén a más de dos clics de la página de inicio.
Cuando bien hay muchos contenidos o bien los contenidos no se relacionan entre sí, es cuando debemos pensar en crear un menú principal y un menú secundario. Por ejemplo, en este blog hay dos menús, porque una cosa son los artículos del blog y otra diferente son las opciones de colaborar, intercambiar enlaces, etc.
Menú Principal
El menú principal ha de contener las opciones primordiales cara al usuario del sitio. Lo que en una web estará en el menú principal, en otra estará en el menú secundario. Así, por ejemplo, en esta web el contacto está en el menú secundario, ya que el objetivo de este blog es compartir los artículos que regularmente se publican aquí.
Menú Secundario
En el menú secundario encontraremos cosas de valor que, por un motivo u otro, no están relacionadas o no tienen el suficiente peso como para estar en el menú principal. Y digo cosas de valor, porque en otro caso no es necesario ponerlas en el menú de navegación, pues un enlace interno servirá.
Agrupación de contenidos
En el caso de tener mucho contenido disponible y haber de crear submenús del menú principal, viene la pregunta de en qué orden clasificamos los contenidos, ¿utilizamos el orden alfabético o mejor los ordenamos por el grado de popularidad? Por ejemplo, 1stwebdesigner organizaba los contenidos de los submenús en orden alfabético, y digo organizaba porque ahora ha cambiado el sistema de navegación por uno, que a mi manera de ver, no es tan claro ni intuitivo como el anterior.
Aquí tienes una lista de los métodos de clasificación de contenidos más utilizados, junto con algunas sugerencias de cuando es recomendable su uso.
- Orden alfabético. El orden alfabético es ideal para cuando el usuario busca algo de manera rápida, véase el orden de las etiquetas del menú lateral de este blog.
- Popularidad. Este modo de clasificación es ideal para cuando se buscan contenidos en base a intereses, pero tiene como inconveniente que deja de lado otros contenidos que quizás queremos potenciar.
- Orden cronológico. Esta clasificación es interesante para contenidos en que la fecha de publicación es importante, como es el caso de un periódico online o un blog.
- Pasos a seguir. Si por ejemplo el contenido responde a la pregunta de cómo hacer algo y esto requiere una serie de pasos, clasificaremos el contenido en base a esta opción.
Horizontal versus vertical
Más allá del gusto personal, muchos son los factores que influyen en la elección de un menú de navegación horizontal o vertical, destacando el diseño, la usabilidad y la cantidad de contenido. Muchas veces los profesionales del diseño web incluyen iconos en el menú de navegación para añadir elementos visuales que faciliten la navegación. También se utiliza muchas veces una tipografía rica, como es el caso del menú de este blog. El motivo es que como el menú de navegación es la parte más popular de la página web, pues es la que nos permite navegar, se le puede dar un trato especial, sea con tipografía, sea con iconos, sea con ambas, para darle un toque más especial y único. Si necesitas inspiración, mira el artículo de 25 menús de navegación web altamente creativos.
Amazon.es, por ejemplo, emplea un menú de navegación vertical porque se espera una ampliación de contenidos como en los otros Amazon del mundo (véase Amazon.com), lo que no deja espacio posible en un menú horizontal y, en el caso de sí o sí querer usar un menú horizontal, dificultaría la navegación, por lo que es importante el número de elementos que aparecen en un menú cara decidir si es mejor un diseño web con un menú horizontal o vertical.
Otro punto a tener en cuenta es si se pretende tener el sitio web en varios idiomas. Así, lo que en inglés es breve, en castellano o alemán puede ser una parrafada. Un ejemplo clásico: en inglés las páginas “sobre nosotros” se llaman “about us” o incluso se acepta “about”. Compara con la longitud de “sobre nosotros”, te cargas el menú de navegación en comparación a la versión inglesa.
En mi caso concreto, soy una amante de los menús horizontales, y creo que son la mejor opción para sitios web con pocos contenidos. Sin embargo, he de reconocer que la creatividad hace magia y que hay opciones muy creativas y originales con un menú vertical en sitios web de escasos contenidos. Un ejemplo es el de los viñedos Mellasat, en que el menú vertical da un toque de clase muy elegante.
Uso de los submenús
Como hemos visto antes, hay veces en que los contenidos son tantos que es necesario el uso de submenús. El uso de la creatividad en los submenús puede dar pasos a sitios web que facilitan enormemente la navegación, como es el caso de Bonlook:
Hay que evitar poner un menú horizontal con poco margen de separación con el siguiente elemento, porque dificulta la navegación. Veamos un ejemplo. Me encanta la web de Funidelia, pero si por ejemplo quiero mirar una opción del submenú de disfraces de adultos, me salta en más de una ocasión a la de niños, pues al desplazar el ratón hacia un disfraz de la parte de más a la derecha del submenú sin quierer paso por encima del de niños, lo que dificulta la navegación y molesta, al menos a mí.
En mi opinión, este es un ejemplo de menú mal diseñado, porque no sólo dificulta la navegación, sino también el encontrar lo que se busca. Un ejemplo de submenú que me encanta es el de Aviary, aunque lo ha cambiado y ya no lo utiliza, pero el diseño a nivel visual es excelente e invita a la navegación:
Otro ejemplo muy bueno de submenú de navegación para un sitio web con muchas subcategorías es el de Yves Rocher. Cada categoría principal utiliza un color, y la clasificación facilita enormemente la navegación.
Destacaría tres puntos a tener en cuenta para crear submenús de navegación que mejoren la experiencia de usuario:
- Diferenciación de cada submenú. El caso concreto de Yves Rocher que hemos visto ilustra esto a la maravilla. Cada categoría tiene un submenú diferente del anterior, sin perder la consistencia. El uso de colores puede ayudarnos en esta tarea.
- Uso de categorías y subcategorías. Como hemos visto anteriormente, es muy importante una buena clasificación que no dé lugar a confusión y que a su vez facilite la navegación. Por eso recomiendo sí o sí crear un esquema de navegación coherente antes de escoger el diseño.
- Uso de iconos, tipografía e imágenes. Es un hecho que la mayoría de cosas nos han de entrar por los ojos. Si ves un menú atiborrado de información en letra pequeña, el sitio web te va a crear una impresión negativa. En cambio, si utilizas convenientemente los espacios, los iconos e incluso la tipografía e imágenes, conseguirás mejorar notablemente la calidad del menú de navegación.
Conclusión
Antes de lanzarnos al diseño de la estructura web con Photoshop, es importante sentarse a pensar en el esquema de navegación que queremos implementar. La arquitectura de la información en el diseño web es un elemento clave para mejorar la experiencia de usuario y conseguir un buen índice de conversión. Vale la pena echar un vistazo a webs de la competencia y también a webs del mismo sector en otros países para ver qué nos gusta de sus diseños y qué mejoraríamos. Sólo cuando tengamos el mapa mental de cómo se clasificarán los contenidos podremos empezar a plasmar el diseño en Photoshop. La elección de un menú horizontal o vertical no sólo depende de gustos, sino también de la cantidad de contenidos que tenga el sitio en cuestión y del resto del diseño. Hay que evitar el uso de menús y submenús atiborrados de contenidos, porque eso crea una mala experiencia de usuario y nos lleva a frustración y, por ende, a abandonar la página.
Fuente: Creativasfera