Back to Top

Como diseñar la barra de navegación perfecta para tu página web.

No esta demás decir que la barra de navegación es el elemento de navegación más importante en el diseño de un sitio web. No solamente enlaza a las páginas más importantes y relevantes del sitio, sino también organiza el contenido y orienta a los usuarios para encontrar la información que tanto andan buscando. Ofreciéndole a los usuarios un punto de referencia rápido y fácil para acceder plenamente al contenido.

Es importantísimo contar con una barra de navegación accesible en nuestros sitios web, equivocarse en este rubro puede traducirse en una mala y frustrante experiencia para nuestros usuarios, que huirán de nuestro sitio si no encuentran la información a un click de distancia.

Entonces, ¿Cómo garantizar que nuestros usuarios sean capaces de encontrar rápida y fácilmente la información que necesitan?

CONCEPTOS BÁSICOS.

1.- Comenzar con el contenido. Es sumamente común al abordar proyectos web, el encontrarse con aquellos en donde el contenido es inexistente o esta incompleto, dejando al diseñador sugerir elementos de navegación sin antes determinar todas las posibilidades de contenido. Y esto, no es del todo inusual, muchas veces el contenido no esta preparado antes de que el proceso de diseño comience. Jeffrey Zeldman, el gurú de la usabilidad, sugiere, “El contenido precede al diseño. Diseño en la ausencia de contenido, no es diseño, es decoración”.

Es importante analizar y organizar todo el contenido en una estructura lógica antes de considerar las opciones de diseño.

2.- No agobiar. La función principal de una barra de navegación es proporcionar al usuario un escape a otras áreas del sitio. Es probable que el visitante este interesado en algún área en particular y en los beneficios de algún producto o servicio de nuestra empresa, el usuario no quiere recorrer todo el contenido de nuestro sitio hasta llegar al área de interés.

Abrumar a nuestros visitantes con demasiadas opciones afectara su capacidad para tomar rápidamente una decisión. Organizar nuestro contenido en categorías es una excelente manera para crear conjuntos de temas relacionados.

3.- Palabras clave. Usar palabras precisas y que describan las páginas que enlazan, dejando de lado las palabras innecesarias que no aportan nada a la navegación. En lugar de nombrar un enlace como “Visita nuestro foro”, considere simplemente “Foro”. Abstenerse de usas frases largas que abarquen mucho espacio en pantalla, no queremos que se vuelva una limitante al momento de diseñar.

4.- Orientación hacia la derecha. Es natural esperar que la jerarquización y el accionar de los enlaces estén orientados de arriba hacia abajo y de izquierda a derecha, respetando la relevancia de los contenidos. Por ejemplo, dejar el vínculo al área de “Contáctanos” como uno de los últimos enlaces, esto permite que el usuario se sumerja en el sitio y resuelva sus dudas con la información oportuna de nuestros productos y servicios, antes de tomar acción.

5.- Evitar la tecnología Flash. Aunque el plugin Flash es generalmente usado de manera masiva, siendo una herramienta indispensable para navegar, ser dependiente de una tecnología no estándar, puede ocasionar que el navegador web en equipos de computo y dispositivos móviles se bloque o se caiga provocando confusión en el usuario al no hallar un elemento de navegación disponible, y más si se trata de la principal herramienta de navegación.


Ahora que ya conocemos algunos principios básicos para generar un sistema de navegación eficaz. Vamos a conocer los tipos de barras de navegación mas utilizadas en la web, incluidas las barras de un solo nivel, las desplegables y las de multinivel. En última instancia usted decidirá que tipo de navegación funciona mejor para su sitio, que puede hacer y que no, en función del tipo de navegación que elija.

Barra de navegación de un nivel.

Abarrotar este tipo de barra navegación con muchos enlaces provocara ocupar todo el ancho establecido en el diseño de nuestra página, dificultando la legibilidad de los textos al ser necesario establecer un menor tamaño de fuente o un menor espacio entre enlaces.

Un ejemplo de como aplicar de manera efectiva este tipo de navegación lo encontramos en el sitio web de la popular empresa Apple.

Barra de navegación de un nivel

Barra de navegación desplegable.

Esta barra de navegación le permite al usuario acceder a cualquier página del sitio con un solo click, evitando así, la necesidad de buscar el producto o servicio en un nivel o categoría superior. Este tipo de navegación al ser desplegable requiere de un marco de fondo para que los enlaces contrasten con los elementos del diseño que se hallan por “debajo”.

Un número mayor de niveles viables para este tipo de barra son 3, más provocaría que el desplegable supere el ancho establecido en la plantilla.

Un ejemplo de este tipo de navegación se puede observar en el sitio web de la empresa Sony.

Barra de navegación desplegable

Barra de navegación desplegable de multi-nivel.

Este menú por lo general cuenta con solo dos niveles, pero el segundo nivel cuenta con un gran panel con imágenes o varias columnas de enlaces. La ventaja de este tipo de menú es que no solo ofrece más enlaces para el usuario, sino que también incluye el contexto y la jerarquía dentro de estos enlaces.

Esta barra de navegación otorgara más espacio para incluir enlaces, sin embargo, puede convertirse rápidamente en un mar de opciones innavegables y confusas.

Un ejemplo de navegación desplegable de multi-nivel se puede observar en la página web de Zappos.

Barra de navegación desplegable de multi-nivel

Nota final.

A menudo un complejo sistema de navegación es un indicador de que es necesario una mejor planificación y organización de nuestro contenido. Si es absolutamente necesario dar a los usuarios tantas opciones directamente en la barra de navegación, sigamos los principios básicos mencionados anteriormente para crear una experiencia eficiente y agradable para nuestros usuarios.