11 formas en que las migas de pan refuerzan el diseño de UX
Pan rallado del sitio web mejorar la experiencia del usuario alentando a los usuarios a profundizar en la jerarquía de su sitio, al tiempo que les dice a los visitantes dónde se encuentran exactamente en una página determinada. Google esquema breadcrumb es otra razón valiosa para configurar las migas de pan. Pero el factor de diseño siempre es complicado, por lo que ayuda a estudiar ejemplos y recopilar ideas.
Estos son algunos de mis estilos favoritos de migas de pan y deberían proporcionar un buen punto de partida para nuevos proyectos de diseño.
1. Wayfair
El sitio web de Wayfair hace mucho bien y todo su UX es fenomenal página a página. Una cosa que realmente me gusta es su estilo de ruta de navegación porque no es demasiado grande, pero tampoco demasiado pequeño y tampoco molesto.
Encontrará estas migas 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 de 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 entrometido 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 migas de pan en la mayoría de los productos de Google con páginas por niveles y uno de los mejores es el Asistencia de Google sitio.
Sus páginas de soporte ofrecen consejos sobre todo, desde el esquema hasta el 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 para que sean claramente visibles.
Nuevamente observe cómo estos enlaces se combinan muy bien sin saltos de la página. Se sienten muy naturales en el diseño y este siempre debe ser el objetivo con sus migas de pan.
3. Documentos de MSDN
Hay una característica única de migas de pan en el Documentos de MSDN que realmente me gusta Tiene todas las características de diseño típicas, como los iconos de flecha y los enlaces categóricos, pero el último eslabón de la cadena tiene un menú desplegable personalizado con páginas adicionales.
Nunca he visto esto antes en cualquier diseño de ruta de navegación, pero es increíblemente valioso para el usuario. Por lo general, se requiere otro menú de navegación para acceder a estos enlaces, pero con 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 la tarea más fácil crear migas de pan. 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 migas de pan en muchas páginas, como las páginas de las tiendas en línea y las páginas de productos. Pero un pequeño detalle que llamó mi atención es el área de enlace de pie de página con una pequeña miga de pan sobre sus enlaces inferiores.
Apple es una gran compañía con muchas páginas y recursos. También vale la pena agregar esta ruta de exploración hacia la parte superior de la página, pero ciertamente no duele estar cerca del final.
Animo a los diseñadores a probar esto y ver cómo funciona. Las migas de pie de página ciertamente no son la norma pero sí ayudan con la navegación visual.
5. TechRadar
La mayoría de las migas de pan que encuentro suelen estar 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 del artículo de TechRadar .
Cada rastro de pan es bastante pequeño 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 un diseño de migas de arena mucho más detallado, consulte Blog de TutsPlus . Cada artículo presenta una pequeña miga 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 mezcla 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 elemento para que el
el encabezado es parte de la ruta de exploración.
Tenga en cuenta que esto no utiliza el esquema de Google adecuado, por lo que no aparece con las migas de pan en la búsqueda. Pero teniendo en cuenta que apenas afecta el CTR, valoro mucho más el diseño y la usabilidad en la página que los beneficios de SEO (o la falta de ellos).
7. Coolspotters
Las migas de pan tradicionales por lo general se quedan con algunos símbolos de texto, como la barra inclinada o el soporte de la flecha derecha (>). Estos funcionan porque se han usado durante décadas y los usuarios están familiarizados con ellos.
Pero siempre me gusta ver otras tendencias de diseño breadcrumb 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 forma de animar este elemento de página muy tradicional.
8. MarketWatch
Volviendo a lo básico, es el sitio de noticias en línea Reloj de mercado . Todos sus publicaciones internas característica breadcrumb navega con iconos de flecha apuntando hacia la derecha bastante pequeño texto.
En este caso, creo que el texto pequeño funciona bien. No es exactamente difícil utilizar las migas de pan, pero se sienten más pequeñas y menos importantes que el resto de la página.
Los blogs y sitios de noticias funcionan mejor con migas de pan más pequeñas porque el foco real es el contenido. Aún así, es agradable encajarlos en algún lugar y este diseño es un gran ejemplo.
9. Amazon
Todos adoran Amazon por su gran inventario y envío gratis. Pero también tienen un sitio fantástico y no hay forma de que pueda pasar por alto su diseño de migas de pan.
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 valen la pena explorar, y es valioso para los diseñadores / webmasters el estudio de la estructura masiva de productos de Amazon.
Pero si se desplaza hacia abajo en cada página de producto, encontrará una sección de "información del producto" o "detalles del producto" con los listados de mejores vendedores.
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 para acceder a esas categorías relacionadas.
Las migas de pan de Amazon son admirablemente largas, por lo que vale la pena estudiarlas si tienes un sitio con una jerarquía muy profunda.
10. Etsy
El enorme sitio en línea de comercio electrónico de bricolaje / artesanía Etsy está constantemente avanzando en su diseño. Fue fundado en 2005 y al mirar el sitio ahora puede ver que han realizado algunos cambios importantes en los últimos 10 años.
Si echa un vistazo a cualquier página de categoría encontrarás 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 principal forma de búsqueda.
Pero un buen efecto agregado es el listado total de elementos dentro de la categoría. Etsy enumera cuántos artículos en total se venden en cada subcat mientras 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 una supervisión real de la interfaz de usuario y espero que lo agreguen en el futuro.
11. LinuxInsider
Este diseño de migas de pan no es particularmente bonito, pero tiene una característica que llama mi atención.
Verás un enlace "Artículo siguiente" cerca de la parte superior de cada Publicación de LinuxInsider . Esto aparece directamente al lado de la ruta de exploración por lo que se siente como parte de la navegación.
Los usuarios que interactúan con las migas de pan normalmente quieren hurgar en esas categorías de migajas para que este enlace adicional tenga sentido. Cualquier persona interesada en el software Linux puede querer pasar directamente al siguiente artículo en esa categoría.
