9 consejos sobre migas de pan para hacer que su sitio sea más fácil de navegar [+ Examples]

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 perdidas en el bosque, pero estoy dispuesto a apostar que se sintió desorientado en un sitio web mal diseñado.

En el diseño web, la navegación con rutas de navegación es una forma de mostrar a los usuarios su ubicación y cómo llegaron allí. Al igual que las rutas de navegación de Hansel, ayuda a los usuarios a seguir su camino y ver dónde se encuentran en el esquema general de su sitio.

Si bien puede diseñar las migas de pan como desee, tienden a tener el mismo aspecto en los sitios web que las usan. A continuación, se muestra un ejemplo sencillo de rutas de navegación de la base de conocimientos de HubSpot:

Jakob Nielsen, cofundador del aclamado Nielsen Norman Group, recomienda la navegación con rutas de navegación desde 1995 y destaca su utilidad y eficiencia: «Todo lo que hacen las rutas de navegación es facilitar a los usuarios moverse por el sitio, asumiendo su contenido y estructura general tienen sentido. Esa es una contribución suficiente para algo que ocupa solo una línea en el diseño «.

Si el sitio web de su empresa tiene varias capas, podría considerar implementar la navegación de ruta de navegación para que su sitio sea más fácil de navegar. Sin embargo, como cualquier elemento de diseño, existe una forma correcta e incorrecta de hacerlo. Aquí, exploraremos nueve consejos y ejemplos para asegurarnos de que está creando la navegación de ruta de navegación más efectiva para sus usuarios.

Consejos y ejemplos de navegación de ruta de navegación

1. Utilice la navegación de ruta de navegación solo si tiene sentido para la estructura de su sitio.

La navegación de ruta de navegación tiene una estructura lineal, por lo que solo desea usarla 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 ruta de navegación solo 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 solo unas pocas páginas, probablemente no necesite una ruta de navegación.

2. No haga su navegación de ruta de navegación demasiado grande.

Su navegación de ruta de navegación 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» «Parcel & eCommerce» «Logística», etc. Su navegación es la sección más pequeña debajo que dice, «DHL Global |> Logística |> Transporte de mercancías «. No desea que sus usuarios confundan su navegación con la ruta de navegación con la barra de navegación principal.

3. Incluya la ruta de navegación completa en su ruta de navegación.

Busqué en Google «Estudiantes no titulados de la Universidad de Elon» para llegar a esta página de destino, pero Elon es inteligente al incluir la ruta de navegación completa, incluidos «Inicio» y «Admisiones». Si omite ciertos niveles, confundirá a los usuarios y la ruta de navegación no se sentirá tan útil. Incluso si los usuarios no comenzaron en la página de inicio, desea brindarles una manera fácil de explorar su sitio desde el principio.

4. Progresar del nivel más alto al más bajo.

Es importante que su navegación de ruta de navegación 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 encontró 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 caso sólido 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 desea que sea su página de nivel más alto.

5. Mantenga los títulos de las rutas de navegación coherentes con los títulos de su página.

Para evitar confusiones, querrá mantener la coherencia con su página y los títulos de ruta de navegación, especialmente si está apuntando a ciertas palabras clave en esos títulos. También desea vincular claramente sus títulos de ruta de navegación a la página. Si el título de la ruta de navegación no tiene un enlace, déjelo claro. Nestlé etiqueta eficazmente sus títulos de ruta de navegación para que coincidan con los títulos de las páginas. «Áreas de impacto y compromiso», por ejemplo, se lee lo mismo en la ruta de navegación que en la página.

Nestlé también hace un buen trabajo al diferenciar los enlaces de los no enlaces con diferentes colores: los enlaces son azules, mientras que los no enlaces permanecen grises.

6. Sea creativo con el diseño.

La navegación de ruta de navegación tradicional se ve así: Inicio> Acerca de nosotros> Carreras. Sin embargo, no necesita seguir el camino tradicional si cree que un diseño diferente podría atraer más a su audiencia o verse mejor en su sitio.

Por ejemplo, Target usa la navegación de ruta de navegación en las páginas de sus productos (porque ¿quién no se perdería en la sección de calzado virtual?), Pero usa símbolos «https://blog.hubspot.com/» y texto simple en negro y gris. En este caso, la variación sutil del diseño tiene sentido para la estética de su sitio.

7. Manténgalo limpio y ordenado.

La navegación de su ruta de navegación es simplemente una ayuda para el usuario y, idealmente, no debería notarse a menos que el usuario la esté buscando. Por esta razón, no querrá saturar la navegación de la ruta de navegación con texto innecesario.

Eionet, por ejemplo, podría prescindir de su texto «Usted está aquí». Si bien está destinado a ser útil, el texto satura la página. Con el diseño correcto, una navegación de ruta de navegación debería ser lo suficientemente notoria sin una introducción.

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

Hay algunos tipos diferentes de rutas de navegación que puede usar: basadas en la ubicación, basadas en atributos y basadas en el historial. Las rutas de navegación basadas en la ubicación muestran al usuario dónde se encuentran en la jerarquía del sitio. Las rutas de navegación basadas en atributos muestran a los usuarios a qué categoría pertenece su página. Finalmente, las rutas de navegación basadas en el historial muestran a los usuarios la ruta específica que tomaron para llegar a la página actual.

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

9. Conozca a su audiencia.

Las mejores prácticas en la navegación de ruta de navegación 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 al colocar la ruta de navegación en la parte inferior de su sitio. En última instancia, es fundamental que conozca a su audiencia. Los clientes de Apple suelen ser expertos en tecnología y probablemente encontrarían la navegación si la necesitaran. Considere las necesidades de sus clientes e implemente pruebas A / B si no está seguro.

Navegación de ruta de navegación en HTML y CSS

Las rutas de navegación no solo son útiles, sino que también son fáciles de agregar a su sitio web con un poco de código HTML y CSS.

Comencemos con el HTML, que usaremos para crear los propios enlaces. La forma más sencilla de hacerlo es organizar sus enlaces en una lista desordenada (

) elemento, con cada elemento de la lista (

 
<nav class="breadcrumb" aria-label="Breadcrumb" >
    <ul>
        <li><a href="https://blog.hubspot.com/marketing/#URL">Top-level page</a></li>
        <li><a href="https://blog.hubspot.com/marketing/#URL">Second-level page</a></li>
        <li><a href="https://blog.hubspot.com/marketing/#URL">Third-level page</a></li>
        <li>Current Page</li>
    </ul>
</nav>

 
ul { list-style: none; } /* remove bullet points */
ul li { display: inline; } /* show list items horizontally */
/* Put an angle bracket (>) between list items */
ul li+li:before {
    content: ">";
    padding: 10px;  
}
ul li a { text-decoration: none; } /* remove underlines from links */
ul li a:hover { text-decoration: underline; } /* show underline on mouseover */