En el cuento de hadas de Hansel y Gretel, dos niños arrojan migajas de pan o breadcrumbs en el bosque para encontrar el camino a casa.

Hoy en día, probablemente no experimentamos demasiadas experiencias como esta, pero seguramente te has sentido un poco desorientado cuando te encuentras en sitios web que están mal diseñados.

<< Descarga gratis la guía para rediseñar tu sitio web >> 

En el diseño de sitios web, la navegación breadcrumb es una forma de mostrar a tus usuarios tu ubicación y cómo no perderse en el camino, algo similar a los pedacitos de pan de Hansel y Gretel. 

Jakob Nielsen, cofundador del Grupo Nielsen Norman, ha recomendado la navegación de breadcrumbs desde 1995, y resalta un punto poderoso: «Todo lo que hace la navegación de breadcrumbs es facilitar a los usuarios moverse por el sitio, haciendo que el contenido y la estructura tengan sentido. Es una gran contribución para algo que solo ocupa una línea en el diseño».

Si el sitio web de tu empresa tiene varias capas, puedes considerar implementar esta navegación para hacer que sea más fácil de navegar. Sin embargo, como cualquier elemento de diseño, hay una forma correcta e incorrecta de hacerlo. Aquí, exploraremos 9 consejos y ejemplos para asegurarnos de que estás creando la navegación de breadcrumbs más efectiva para tus usuarios.

 

Consejos de navegación de breadcrumbs

1. Usa la navegación de ruta de exploración solo si tiene sentido para la estructura de tu sitio

La navegación de breadcrumbs tiene una estructura lineal, por lo que solo debes usarla si tiene sentido con la jerarquía de tu sitio web. Si cuentas con páginas de nivel inferior a las que se puede llegar desde diferentes páginas de destino, el uso de esta navegación solo confundirá a los lectores que siguen accediendo a las mismas páginas desde diferentes puntos de partida. Además, si tu sitio es relativamente simple, con solo unas pocas páginas, probablemente no necesites este tipo de navegación.

2. No hagas que tu navegación de breadcrumbs sea demasiado grande

Tu navegación de breadcrumbs es una herramienta secundaria a tu barra de navegación principal, por lo que no debe ser demasiado grande o prominente en la página. Por ejemplo, en el sitio web de DHL, su barra de navegación principal es grande y reconocible, con columnas como «Express», «Rastreo» e «Iniciar sesión». Su barra de navegación de breadcrumbs es la sección más pequeña a continuación que dice «DHL | > Express | > Rastreo». De esta manera, se puede distinguir fácilmente la navegación de breadcrumbs con la barra de navegación principal.

3. Incluye la ruta de navegación completa en la navegación de breadcrumbs

Por ejemplo, nosotros buscamos en Google «Intercambios internacionales» para llegar a esta página de destino, pero EF es una página inteligente que incluye una navegación de breadcrumbs. Si omites ciertos niveles, confundirás a los usuarios y la navegación breadcrumbs no será tan útil; incluso si los usuarios no comienzan en la página de inicio, ya que lo más recomendable es darles una manera fácil de explorar el sitio desde el principio. 

4. Continúa del nivel más alto al más bajo

Es importante que tu navegación de breadcrumbs se lea de izquierda a derecha, con el enlace más cercano a la izquierda como tu página de inicio, y el más cercano a la derecha como la página actual del usuario. Un estudio de Nielsen Norman Group descubrió que los usuarios pasan el 80 % de su tiempo viendo la mitad izquierda de una página y el 20 % mirando la mitad derecha. Este es un argumento sólido para diseñar de izquierda a derecha. Además, el enlace más cercano a la izquierda aparecerá como el comienzo de la cadena, por lo que es más recomendable que sea el nivel más alto de tu página. 

5. Mantén los títulos de la navegación de breadcrumbs consistentes con los títulos de tu página

Para evitar confusiones, es importante mantener la coherencia con tu página y los títulos de navegación de breadcrumbs, especialmente si estás apuntando a ciertas palabras clave en esos títulos. También te recomendamos vincular claramente tus títulos de la navegación de breadcrumbs a la página. Si el título de breadcrumbs no tiene un enlace, déjalo claro. Por ejemplo, Best Buy etiqueta efectivamente sus títulos de navegación de breadcrumbs para que coincidan con los títulos de sus páginas. «Productos», por ejemplo, se lee lo mismo en la navegación de breadcrumbs como en la página.

Este sitio web también hace un buen trabajo al diferenciar enlaces de no enlaces con diferentes colores: los enlaces son azules, mientras que los que no lo son permanecen en color gris.

6. Sé creativo con el diseño

La navegación tradicional de breadcrumb se ve así: Inicio > Acerca de nosotros > Servicios. Aun así, no necesitas seguir el camino tradicional si crees que un diseño diferente podría atraer más a tu audiencia o verse mejor en tu sitio.

Por ejemplo, Costco usa navegación de breadcrumbs en sus páginas de productos con símbolos «/» y texto simple en negro y gris. En este caso, la variación sutil tiene sentido para el diseño de su sitio.

7. Mantén todo limpio y ordenado

Tu navegación de breadcrumbs es solo una ayuda para el usuario, e idealmente no debería notarse a menos que el usuario la esté buscando. Por esta razón, no es recomendable saturar tu navegación de breadcrumbs con texto innecesario.

Eionet, por ejemplo, podría prescindir de su texto «You are here» (Estás aquí). Si lo que busca es ser útil, el texto abarrota la página. Con el diseño correcto, una navegación de breadcrumbs debería ser lo suficientemente destacable, sin una introducción como esta.

8. Considera qué tipo de navegación de breadcrumbs tiene más sentido para tu sitio

Hay diferentes tipos de breadcrumbs que puedes usar, basados en la ubicación, en los atributos y en el historial. Los breadcrumbs que se basan en la ubicación muestran al usuario dónde se encuentra en la jerarquía del sitio. Los breadcrumbs basados en atributos muestran a los usuarios a qué categoría pertenece su página. Finalmente, los breadcrumbs que se basan en el historial muestran a los usuarios la ruta específica que tomaron para llegar a la página actual.

Por ejemplo, Home Depot utiliza la navegación de breadcrumbs basada en atributos para mostrar a los usuarios en qué categoría se encuentra su página de productos, por lo que ellos pueden volver a hacer clic en «Decoración» para examinar artículos similares. Este tipo de navegación de breadcrumbs es más efectivo para este tipo de usuarios. Cuando te encuentres creando una navegación de breadcrumbs considera lo que es más útil para los visitantes de tu sitio.

9. Conoce a tu audiencia

Las mejores prácticas en la navegación de breadcrumbs invita a los diseñadores web a colocar la navegación en la parte superior de la página, pero Apple, una de las compañías más valiosas de todos los tiempos, desafía esta lógica al poner su navegación de breadcrumbs en la parte inferior de su sitio. Para determinar la ubicación es fundamental que conozcas a tu audiencia. Por ejemplo, los clientes de Apple suelen ser expertos en tecnología y probablemente encontrarían la navegación si la necesitaran. Entonces, considera las necesidades de tus clientes e implementa diferentes pruebas si no estás seguro. 

Por último, queremos recordarte que la navegación de breadcrumbs es una herramienta efectiva para hacer que tu sitio sea más fácil de navegar. No obstante, debes asegurarte de seguir las mejores prácticas de diseño para aprovechar la utilidad de esta herramienta. 

 

Descarga estas plantillas gratuitas y descubre cómo actualizar tu sitio web y mejorar su rendimiento

 Rediseño web

Publicado originalmente el 20 de marzo de 2020, actualizado el 20 de abril de 2020

Topics:

Experiencia de usuario