Migajas de navegación del sitio web mejorar la experiencia del usuario alentar a los usuarios a profundizar en la jerarquía de su sitio, al mismo tiempo que les dice a los visitantes exactamente dónde se encuentran en una página determinada. De Google esquema de ruta de navegación es otra razón valiosa para configurar rutas de navegación. Pero el factor de diseño siempre es complicado, por lo que es útil estudiar ejemplos y recopilar ideas.

Estos son algunos de mis estilos de ruta de navegación favoritos y deberían proporcionar un buen punto de partida para nuevos proyectos de diseño.

1. Wayfair

El sitio web de Wayfair hace muchas cosas bien y toda su experiencia de usuario es fenomenal página a página. Una cosa que realmente me gusta es su estilo de migas de pan porque no es demasiado grande, pero tampoco demasiado pequeño ni molesto.

Encontrarás estas migajas en las páginas de productos y páginas de categoría para que te sigan por todo el sitio. Esto le permite saltar una categoría o dos desde cualquier página detallada.

Y la barra de navegación tiene su propia pequeña sección debajo de la navegación con un color BG diferente. No es molesto, pero tampoco es difícil de encontrar. Un gran estilo de diseño y uno de mis favoritos personales.

2. Asistencia de Google

Otra mención obvia es Google, ya que son conocidos por increíble trabajo de UX. Encontrarás rutas de navegación en la mayoría de los productos de Google con páginas escalonadas y una de las mejores es la Soporte de Google sitio.

Sus páginas de soporte ofrecen consejos sobre todo, desde esquemas hasta análisis y la herramienta Search Console. Cada página tiene migas de pan y estas migas ocupan un espacio similar al encabezado de la página, por lo que son claramente visibles.

Una vez más, observe cómo estos enlaces se mezclan muy bien sin saltar de la página. Se sienten muy naturales en el diseño y este debe ser siempre el objetivo de tus migas de pan.

3. Documentos de MSDN

Hay una función de ruta de navegación única en el Documentos de MSDN que me gusta mucho. Tiene todas las características de diseño típicas, como íconos de flechas y enlaces categóricos, pero el enlace final de la cadena tiene un menú desplegable personalizado con páginas adicionales.

Nunca había visto esto antes en ningún diseño de ruta de navegación, pero es increíblemente valioso para el usuario. Por lo general, se requeriría otro menú de navegación para acceder a estos enlaces, pero en un sitio como Microsoft hay tantas páginas por recorrer.

Sin mencionar que la documentación puede ser bastante compleja, por lo que no es fácil crear rutas de navegación. Esta técnica es brillante y vale la pena usarla si tiene una jerarquía compleja en su sitio.

4. Apple

En el sitio web de Apple, he visto toneladas de rutas de navegación en muchas páginas, como las páginas de la tienda en línea y las páginas de productos. Pero un pequeño detalle que me llamó la atención es el área de enlace de pie de página con una pequeña ruta de navegación sobre sus enlaces inferiores.

Apple es una gran empresa con muchas páginas y recursos. También valdría la pena agregar esta ruta de navegación hacia la parte superior de la página, pero ciertamente no está de más estar cerca de la parte inferior.

Animaría a los diseñadores a probar esto y ver cómo funciona. Las migas de pan de pie de página ciertamente no son la norma, pero ayudan con la navegación visual.

5. TechRadar

La mayoría de las migas de pan que encuentro se encuentran generalmente en sitios de empresas o tiendas de comercio electrónico. Pero los blogs a menudo también tienen sus propias migas de pan y un buen ejemplo es el Página de artículo de TechRadar.

Cada ruta de navegación es bastante pequeña con un enlace directamente a la categoría principal y una copia del título del artículo. Para este tipo de blog es difícil justificar las migas de pan porque no hay mucha jerarquía.

Pero esto funciona bien si no tiene otro lugar para agregar la categoría del artículo en la página.

6. TutsPlus

Para obtener un diseño de ruta de navegación mucho más detallado, consulte el Blog de TutsPlus. Cada artículo presenta una pequeña ruta de navegación en la parte superior de la página, incluidas las categorías primaria y secundaria.

Me gusta mucho este diseño porque se integra naturalmente en el título de la página. Entonces, en lugar de duplicar el título en una ruta de navegación y en una etiqueta de encabezado, esto lo combina todo en un solo elemento, por lo que el encabezado

es parte de la ruta de navegación.

Tenga en cuenta que esto no usa el esquema de Google adecuado, por lo que no aparece con migas de pan en la búsqueda. Pero considerando que apenas afecta el CTR, valoro el diseño y la usabilidad en la página mucho más que los beneficios de SEO (o la falta de ellos).

7. Coolspotters

Las migas de pan tradicionales generalmente se quedan con algunos símbolos de texto como la barra diagonal o el corchete de flecha derecha (>). Estos funcionan porque se han utilizado durante décadas y los usuarios están familiarizados con ellos.

Pero siempre me gusta ver otras tendencias de diseño de migas de pan como en Coolspotters. Usan enlaces de ruta de navegación personalizados que tienen flechas integradas en los elementos del enlace.

Puedes encontrar un montón de estilos de ruta de navegación de código abierto como estos para su propio sitio. Es una excelente manera de animar este elemento de página tan tradicional.

8. MarketWatch

Volviendo a lo básico es el sitio de noticias en línea Reloj de mercado. Todos sus puestos internos cuentan con navegadores de ruta de navegación con iconos de flecha que apuntan hacia la derecha, texto bastante pequeño.

En este caso, creo que el texto pequeño funciona bien. No es exactamente difícil para usar las migas de pan, pero se sienten más pequeñas y menos significativas que el resto de la página.

Los blogs y los sitios de noticias funcionan mejor con rutas de navegación más pequeñas porque el enfoque real es el contenido. Aún así, es bueno colocarlos en algún lugar y este diseño es un gran ejemplo.

9. Amazonas

Todo el mundo ama a Amazon por su enorme inventario y envío gratuito. Pero también tienen un sitio fantástico y no hay forma de que pueda pasar por alto su diseño de ruta de navegación.

Muchos páginas de productos tener un conjunto de migas de pan cerca de la navegación superior. Esto siempre es muy largo porque las categorías de Amazon son profundas. Esto es valioso para que los consumidores vean qué categorías podría valer la pena explorar, y valioso para que los diseñadores / webmasters estudien la estructura masiva de productos de Amazon.

Pero si se desplaza hacia abajo en la página de cada producto, encontrará una sección de «información del producto» o «detalles del producto» con listados de los más vendidos.

Esta función utiliza enlaces de ruta de navegación para mostrar dónde se ha vendido mejor el producto y anima a los visitantes a hacer clic en esas categorías relacionadas.

Las rutas de navegación de Amazon son admirablemente largas, por lo que vale la pena estudiarlas si tiene un sitio con una jerarquía muy profunda.

10. Etsy

El enorme sitio de comercio electrónico de bricolaje / manualidades en línea Etsy avanza constantemente en su diseño. Se fundó en 2005 y, al mirar el sitio ahora, puede ver que han realizado grandes cambios en los últimos 10 años.

Si echa un vistazo a alguna página de categoría encontrará pequeñas migas de pan en la esquina superior izquierda. Estos no son tan prominentes en comparación con la navegación de la barra lateral, que realmente se siente como la forma principal de buscar.

Pero un buen efecto añadido es la lista total de elementos dentro de la categoría. Etsy enumera cuántos artículos en total están a la venta en cada subcat a medida que profundiza en el sitio.

Una cosa de la que me quejaré es la falta de migas de pan en las páginas de productos. Esto parece un descuido real de la interfaz de usuario y espero que lo agreguen en el futuro.

11. LinuxInsider

Este diseño de ruta de navegación no es particularmente hermoso, pero tiene una característica que me llama la atención.

Verá un vínculo «Artículo siguiente» cerca de la parte superior de cada Publicación de LinuxInsider. Esto aparece directamente al lado de la ruta de navegación, por lo que se siente como parte de la navegación.

Los usuarios que interactúan con las migas de pan suelen querer profundizar en esas categorías de migas, por lo que este enlace adicional tiene sentido. Cualquiera que esté interesado en el software de Linux puede querer pasar directamente al siguiente artículo de esa categoría.