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

¿Qué Tal? hablemos de 9 consejos de 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 experimentes demasiadas experiencias perdidas en el bosque, pero estoy dispuesto a apostar que te has sentido desorientado en un sitio web mal diseñado.

En el diseño web, la navegación con migas de pan es una forma de mostrar a los usuarios su ubicación y cómo llegaron allí. Al igual que las migas de pan de Hansel, ayuda a los usuarios a volver sobre 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 todos los sitios web que las usan. Aquí hay un sencillo ejemplo de migas de pan de la Base de conocimientos de HubSpot:

Jakob Nielsen, cofundador de la aclamada Grupo Nielsen Normanha sido recomendando la navegación con migas de pan desde 1995y destaca su utilidad y eficiencia: «Todo lo que hacen las migas de pan es facilitar que los usuarios se desplacen por el sitio, suponiendo que su contenido y estructura general tengan 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 con migas de pan para que su sitio 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 nueve consejos y ejemplos para asegurarnos de que está creando la ruta de navegación más efectiva para sus usuarios.

Consejos y ejemplos de navegación con migas de pan

1. Solo use la navegación con migas de pan si tiene sentido para la estructura de su sitio.

La navegación con migas de pan tiene una estructura lineal, por lo que solo querrá 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 con migas de pan 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 la navegación con migas de pan.

2. No haga que su ruta de navegación sea 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 DHL sitio web, su barra de navegación principal es grande y reconocible, con columnas como «Express», «Paquetes y comercio electrónico», «Logística», etc. Su navegación de ruta de navegación es la sección más pequeña a continuación que dice: «DHL Global | > Logística | > Transporte de carga» . No desea que sus usuarios confundan la navegación de migas de pan con la barra de navegación principal.

un ejemplo de navegación con migas de pan en el sitio web de DHL

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

Busqué en Google «Estudiantes sin título de la Universidad de Elon» para llegar a esta página de destino, pero Elón es inteligente 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.

un ejemplo de navegación con migas de pan en el sitio web de la universidad elon

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

Es importante que la navegación de la 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 descubrió 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 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 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 su página y de la ruta de navegación, especialmente si se dirige a ciertas palabras clave en esos títulos. También desea vincular claramente los títulos de la ruta de navegación a la página. Si el título de la ruta de navegación no tiene un enlace, déjalo claro. Hacerse un nido etiqueta efectivamente sus títulos de migas de pan para que coincidan con los títulos de las páginas. «Áreas de impacto y compromiso», por ejemplo, se lee igual en la ruta de navegación que en la página.

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

ejemplo de navegación con migas de pan en el sitio web de nestle

6. Sea creativo con el diseño.

La navegación de migas de pan 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, Objetivo usa 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 usa símbolos «https://blog.nosotros.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.

un ejemplo de navegación con migas de pan en el sitio web de destino

7. Manténgalo limpio y ordenado.

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

Eionet, por ejemplo, podrían prescindir del texto «Usted está aquí». Si bien tiene la intención de ser útil, el texto abarrota la página. Con el diseño correcto, una navegación de migas de pan debería ser lo suficientemente notable sin una introducción.

un ejemplo de navegación con migas de pan en el sitio web de eionet

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

Hay algunos tipos diferentes de migas de pan que puede usar: 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. Finalmente, las migas de pan basadas en el historial muestran a los usuarios la ruta específica que tomaron para llegar a la página actual.

Baño de cama y más allá utiliza la navegación de migas de pan basada en atributos para mostrar a los usuarios en qué categoría se encuentra la página de su producto, de modo que los usuarios puedan volver a hacer clic en «Cocina» o «Electrodomésticos pequeños» para examinar artículos similares. Este tipo de navegación de migas de pan es más eficaz para los clientes de Bed Bath & Beyond. Cuando esté creando una ruta de navegación, considere lo que es más útil para los visitantes de su sitio.

un ejemplo de navegación con migas de pan en el sitio web Bed Bath and Beyond

9. Conozca a su audiencia.

Las mejores prácticas en la navegación con migas de pan instan a los diseñadores web a colocar la navegación en la parte superior de la página, pero Manzanauno de los empresas mas valiosas de todos los tiempos, desafía esta lógica poniendo su 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.

un ejemplo de navegación con migas de pan en el sitio web de apple iphone x

Navegación con migas de pan en HTML y CSS

Las migas de pan 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 enlaces. La forma más fácil de hacer esto es organizar sus enlaces en una lista desordenada (

    ), con cada elemento de la lista (

  • ) que comprende un enlace en la serie de migas de pan hasta el elemento final, que denota la página actual.

    Aquí hay una plantilla HTML para migas de pan que puede usar:

     
    

    <nav class="breadcrumb" aria-label="Breadcrumb" >
        <ul>
            <li><a href="#URL">Top-level page</a></li>
            <li><a href="#URL">Second-level page</a></li>
            <li><a href="#URL">Third-level page</a></li>
            <li>Current Page</li>
        </ul>
    </nav>

    Observe cómo también he incluido la lista desordenada en un HTML (navegación) y agregó una clase y una etiqueta ARIA a su etiqueta de apertura. Esto es opcional, pero ayuda a que su página sea más accesible para lectores de pantalla y motores de búsqueda.

    Por supuesto, este HTML por sí solo no es suficiente; en este momento, solo tenemos una lista de enlaces con viñetas. Al agregar CSS, podemos lograr el aspecto de ruta de navegación que estamos buscando. Aplique el siguiente CSS al HTML anterior:

     
    

    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 */

    Juntos, este código genera un área de navegación básica que se puede usar en cualquier sitio; vea el resultado final a continuación. También agregué un poco de estilo adicional para una apariencia más limpia. Para ver cómo se ven las migas de pan sin este estilo, comente el código en la parte inferior de la pestaña CSS.

    ver la pluma Migas de pan en HTML y CSS de Christina Perricone (@nosotros) sobre CódigoPen.

    Navegación de migas de pan en Bootstrap CSS

    Bootstrap CSS también ofrece una forma de crear migas de pan sin necesidad de agregar CSS personalizado. Para hacer esto, use el componente Breadcrumb así. Aquí hay un ejemplo de la documentación de Bootstrap 5:

    ver la pluma Migas de pan en Bootstrap CSS de Christina Perricone (@nosotros) sobre CódigoPen.

    Estos son solo los conceptos básicos de la navegación con migas de pan en Bootstrap: consulte la documentación de la ruta de navegación de Bootstrap para conocer todos los detalles.

    Diseño para ayudar a los usuarios a navegar por su sitio

    En última instancia, la navegación con migas de pan es una herramienta eficaz para hacer que su sitio sea más fácil de navegar, pero desea seguir las mejores prácticas de diseño para asegurarse de aprovechar la utilidad de la herramienta. Para obtener más consejos sobre UX, consulte nuestra Guía definitiva para el diseño de UX.

    Nota del editor: esta publicación se publicó originalmente en septiembre de 2018 y se actualizó para que sea más completa.

Nos leeremos hasta la próxima

sobre el autor

Estuardo Monroy

Te gustaría saber más sobre el autor, te invito que veas la sección de Nosotros en Consultor SEO, donde se extiende hablando sobre su experiencia, conocimientos y un poco de información personal.