Breadcrumb

«Inicio > Ropa > Hombre > Camisetas» es un ejemplo típico de breadcrumb (miga de pan): una fila de enlaces, normalmente colocada en la parte superior de una página, que muestra la ruta jerárquica desde la página de inicio hasta la sección actual, permitiendo volver atrás en cualquier nivel de un solo clic.

El nombre viene de un cuento, y tiene sentido

La referencia es al cuento de Hansel y Gretel, que dejaban migas de pan por el camino para poder encontrar la vuelta a casa. El breadcrumb hace exactamente eso en una web: deja un rastro visible del camino recorrido, para que la persona sepa siempre dónde está y cómo volver a un nivel anterior sin depender de pulsar el botón «atrás» del navegador.

Por qué ayuda a la usabilidad, sobre todo en webs grandes

En sitios con muchas categorías y subcategorías (típico en ecommerce o webs de contenido extenso), es fácil que alguien llegue a una página profunda desde una búsqueda externa, sin haber navegado por el resto del sitio. El breadcrumb le da contexto inmediato: en qué parte de la estructura general se encuentra, sin necesidad de explorar el menú principal para orientarse.

Su beneficio adicional en SEO

Google puede mostrar el breadcrumb directamente en los resultados de búsqueda, sustituyendo la URL habitual por una ruta más legible y clara. Además, ayuda a que el buscador entienda mejor la jerarquía y las relaciones entre las páginas de un sitio, reforzando indirectamente la arquitectura de la información ya trabajada.

Un descuido habitual

Incluir un breadcrumb pero que no refleje realmente la estructura lógica del sitio (por ejemplo, saltándose niveles intermedios o mostrando una ruta distinta a la navegación real del menú principal) genera más confusión que ayuda. El breadcrumb debería ser un espejo fiel de cómo está organizada la web, no una ruta inventada aparte.

Términos relacionados.

Tagline

«Just Do It» no promociona ningún producto concreto de Nike, ni contiene ninguna cifra verificable: es el tagline permanente de la marca, la frase que la representa a ella en

Leer más

Responsive vs adaptativo

Ambos enfoques persiguen el mismo objetivo, que una web funcione bien en cualquier tamaño de pantalla, pero lo consiguen de formas técnicamente distintas, con implicaciones prácticas que conviene entender antes

Leer más

Diseño emocional

Dos productos pueden cumplir exactamente la misma función y, aun así, uno genera una sonrisa al usarlo mientras el otro resulta indiferente o incluso frustrante. El diseño emocional es la

Leer más
0%