Free Press

En el cuento de hadas Hansel y Gretel, dos niños dejan caer migas de pan en el bosque para encontrar el camino a casa.

Hoy en día, probablemente no experimente demasiadas experiencias de pérdida en el bosque, pero estoy dispuesto a apostar que se ha sentido frustrantemente desorientado en sitios web mal diseñados.

En el diseño de sitios web, la navegación con migas de pan es una forma de mostrar a sus usuarios su ubicación y cómo llegaron allí (similar a las migas de pan de Hansel). También ayuda a los usuarios a encontrar más rápidamente las páginas de nivel superior si han llegado a su sitio desde una búsqueda o un enlace profundo.

Jakob Nielsen, cofundador del Nielsen Norman Group, lleva recomendando la navegación con migas de pan desde 1995, y hace un gran hincapié en ellas: «Lo único que hacen las migas de pan es facilitar a los usuarios el desplazamiento por el sitio, suponiendo que su contenido y estructura general tengan sentido. Esa es una contribución suficiente para algo que sólo ocupa una línea en el diseño».

Si el sitio web de su empresa tiene varias capas, podría considerar la posibilidad de implementar la navegación por migas de pan para facilitar la navegación por su sitio. Sin embargo, como cualquier elemento de diseño, hay una forma correcta e incorrecta de hacerlo. Aquí, vamos a explorar nueve consejos y ejemplos para asegurarse de que está creando la navegación de migas de pan más eficaz para sus usuarios.

Consejos y ejemplos de navegación de migas de pan

Sólo utilice la navegación de migas de pan si tiene sentido para la estructura de su sitio.

La navegación de migas de pan tiene una estructura lineal, por lo que sólo desea utilizarla si tiene sentido con la jerarquía de su sitio web. Si tiene páginas de nivel inferior a las que se puede acceder desde diferentes páginas de destino, el uso de la navegación de migas de pan sólo confundirá a los lectores que siguen accediendo a las mismas páginas desde diferentes puntos de partida. Además, si su sitio es relativamente simple, con sólo unas pocas páginas, probablemente no necesite la navegación de migas de pan.

No haga su navegación de migas de pan demasiado grande.

Su navegación de migas de pan es una herramienta secundaria a su 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» «Parcela & eCommerce» «Logística», etc. Su navegación de migas de pan es la sección más pequeña de abajo que dice, «DHL Global | > Logística | > Transporte de Carga». No quiere que sus usuarios confundan su navegación de migas de pan con la barra de navegación principal.

Incluya la ruta de navegación completa en su navegación de migas de pan.

He buscado en Google «Elon University Non-Degree Students» para llegar a esta página de destino, pero Elon es inteligente al incluir la ruta de navegación completa, incluyendo «Home» y «Admissions». Si se omiten ciertos niveles, se confundirá a los usuarios y la ruta de migas de pan no resultará tan útil. Incluso si los usuarios no empezaron en la página de inicio, debe darles una forma fácil de explorar su sitio desde el principio.

Progrese desde el nivel más alto al más bajo.

Es importante que su navegación de migas de pan se lea de izquierda a derecha, siendo el enlace más cercano a la izquierda su página de inicio, y el enlace más cercano a la derecha la página actual del usuario. Un estudio de Nielsen Norman Group reveló que los usuarios pasan el 80% de su tiempo viendo la mitad izquierda de una página y el 20% viendo la mitad derecha, lo que constituye un argumento de peso para el diseño de izquierda a derecha. Además, el enlace más cercano a la izquierda aparecerá como el comienzo de la cadena, por lo que querrá que sea su página de mayor nivel.

Mantenga los títulos de las migas de pan en consonancia con los títulos de las páginas.

Para evitar confusiones, querrá mantener la coherencia con los títulos de las páginas y de las migas de pan, sobre todo si se dirige a ciertas palabras clave en esos títulos. También debe vincular claramente los títulos de las migas de pan con la página. Si el título de las migas de pan no tiene un enlace, aclárelo. Nestlé etiqueta eficazmente los títulos de sus migas de pan para que coincidan con los títulos de las páginas. «Áreas de impacto & compromiso», por ejemplo, se lee igual en la navegación de las migas de pan que en la página.

Nestle también hace un buen trabajo diferenciando los enlaces de los no enlaces con diferentes colores: los enlaces son azules, mientras que los no enlaces siguen siendo grises.

Sea creativo con el diseño.

La navegación tradicional de las migas de pan tiene este aspecto: Inicio > Acerca de nosotros > Carreras. Sin embargo, no es necesario seguir el camino tradicional si cree que un diseño diferente podría atraer más a su público o quedar mejor en su sitio.

Por ejemplo, Target utiliza la navegación de migas de pan en sus páginas de productos (porque ¿quién no se perdería en la sección de zapatos virtuales?), pero utiliza los símbolos «/» y un texto sencillo en negro y gris. En este caso, la sutil variación de diseño tiene sentido para la estética de su sitio.

Manténgalo limpio y despejado.

Su navegación de migas de pan es simplemente una ayuda para el usuario, e idealmente no debería ser notada a menos que el usuario la esté buscando. Por esta razón, usted no quiere saturar su navegación de migas de pan con texto innecesario.

Eionet, por ejemplo, podría prescindir de su texto «Usted está aquí». Aunque pretende ser útil, el texto abarrota la página. Con el diseño adecuado, una navegación de migas de pan debería ser lo suficientemente notable sin una introducción.

Considere qué tipo de navegación de migas de pan tiene más sentido para su sitio.

Hay algunos tipos diferentes de migas de pan que podría utilizar: basadas en la ubicación, basadas en atributos y basadas en el historial. Las migas de pan basadas en la ubicación muestran al usuario dónde se encuentra en la jerarquía del sitio. Las migas de pan basadas en atributos muestran a los usuarios en qué categoría se encuentra su página. Por último, las migas de pan basadas en el historial muestran a los usuarios el camino específico que siguieron para llegar a la página actual.

Bed Bath & Beyond utiliza la navegación de migas de pan basada en atributos para mostrar a los usuarios la categoría a la que pertenece su página de productos, de modo que los usuarios puedan volver a hacer clic en «Cocina» o «Pequeños electrodomésticos» para examinar artículos similares. Este tipo de navegación con migas de pan es más eficaz para los clientes de Bed Bath & Beyond. Cuando cree una navegación de migas de pan, tenga en cuenta qué es lo más útil para los visitantes de su sitio.

Conozca a su público.

Las mejores prácticas de navegación de migas de pan instan a los diseñadores web a colocar la navegación en la parte superior de la página – pero Apple, una de las empresas más valiosas de todos los tiempos, desafía esta lógica colocando su navegación de migas de pan en la parte inferior de su sitio. En última instancia, es fundamental que conozcas a tu público. Los clientes de Apple suelen ser expertos en tecnología y probablemente encontrarían la navegación si la necesitaran. Tenga en cuenta las necesidades de sus clientes y realice pruebas A/B si no está seguro.

En definitiva, la navegación por migas de pan es una herramienta eficaz para facilitar la navegación por su sitio, pero debe seguir las mejores prácticas de diseño para asegurarse de que está aprovechando la utilidad de la herramienta. Para obtener más consejos sobre UX, consulte «The Ultimate Guide to UX Design».