¿Algun tema en especial?
Inicio » Tutoriales, Usabilidad » El uso de Breadcrumb para orientar al usuario

En Internet es necesario que el usuario sepa en todo momento dónde se encuentra, cómo ha llegado hasta allí y tener la posibilidad de volver a una posición anterior de su camino en el momento que él lo deseé. El Breadcrumb ayuda al usuario a resolver estas cuestiones.

Breadcrumb l Orientando al usuario en su navegación

Existen diferentes formas de orientar la navegación de los usuarios durante la visita a un sitio web: menús de navegación (menú principal, menú secundario), enlaces relacionados, navegación contextual (propia de una sección o página), etc. Dentro de este conjunto de elementos que forman los Sistemas de Navegación está el Breadcrumb, también llamado Rastro de migas o Raíz de navegación.

Definición básica
Breadcrumb se puede definir como un sistema de navegación auxiliar que ofrece al usuario una ruta clara de dónde está y de dónde ha venido. En Internet el Breadcrumb es un elemento que permite al usuario orientarse dentro del sitio web por el cual discurre su navegación. Este recurso normalmente se encuentra colocado en la parte izquierda, debajo de la cabecera de la página, e inmediatamente antes del contenido principal de la misma.

Usos Frecuentes
Inicialmente los breadcrumb fueron aplicados en sitios con estructuras complejas que contenian muchos niveles de categorias como amazon, microsoft, etc. Permitiendoles dar cierto orden y lógica direccional a la navegación, hoy en día puede encontrarseles presente en una infinidad de sitios web donde la información está estructurada jerárquicamente, con 3 o más niveles de profundidad. Se puede encontrar sobre todo en tiendas, catálogos, intranets y algunas webs corporativas.

¿Cómo usarlo?
Se propone que sean de la siguiente manera:

Uso de los breadcrumb

Algunas de las recomendaciones principales a la hora de utilizar el breadcrumb son:

  • Los breadcrumb ayudan a la navegación, no la sustituyen
  • Los titulos deben corresponder al nombre exacto de la página en que se esta
  • Indicar con flechas las secuencia de los niveles, que se entienda la dirección de la navegación
  • No hacerlo como sustituto de los títulos de las páginas
  • Los elementos que componen el breadcrumb sean enlaces (que el usuario pueda navegar por él), exceptuando la página actual en dónde se encuentre el visitante

En muchas ocasiones vemos que los breadcrumbs están precedidos por el texto “Usted se encuentra en:”, lo que permite al usuario interpretar una cadena de hipertexto que va a continuación y que constituye el breadcrumb propiamente dicho.

¿Cuándo debo usarlo?
Antes de iniciar el desarrollo de los breadcrumbs en tu website, puedes hacerte las siguientes preguntas:

  • ¿Mi website es demasiado complejo y tiene una estructura de información jerárquica?
  • ¿La jerarquía posee más de 3 niveles de profundidad?
  • ¿He detectado que los usuarios suelen estar desinformados en relación a su ubicación dentro de la jerarquía del site?
  • ¿Crees que un breadcrumb puede aportar valor al usuario?

Si todas estas respuestas son afirmativas ¡adelante!

¿Por qué usarlo?
  • 1. Permite un acceso rápido a niveles de navegación superior
  • 2. Muestra al usuario dónde está
  • 3. No causa problemas a la hora de realizar los test de usuario
  • 4. Ocupa muy poco espacio en la página
  • 5. Aporta usabilidad a tu web site
  • 6. Te echa una mano en SEO, pequeña pero te la echa
  • 7. No es costoso de implementar
  • 8. El usuario te lo agradecerá
Casos de estudio

Como veremos en otro tutorial posterior existen varios tipo de breadcrumb, pero en esta ocasión he querido traer a ejemplo los utilizados por dos sitios con estructuras de categorización muy extensas, que ponen en evidencia los beneficios del uso de está herramienta de navegación.

Amazon.com
Amazon.com quizá sea el eslabón perdido del uso de breadcrumb, fue uno de los primeros sitios no solo en usarlo sino en explotar sus beneficios. Hoy en día esta herramienta de navegación está conectada con su sistema de categorización y buscador avanzado convirtiéndose en un estándar de presentación de sus múltiples formar de desplazarse por la plataforma de compra.

Breadcrumb amazon.com

Adobe.com
Este uso me fascina, Adobe presenta de una forma creativa y funcional sus breadcrumb, pues nos muestra la línea de dirección de la navegación y, al final del breadcrumb lo que sería la ubicación actual también representa el titulo de la pagina.

Breadcrumb adobe.com

¿te gusta-? 
Recibe nuestras novedades vía email
Bookmark and Share
 Enviame tus sugerencias via Twitter a: @hrdevany
De momento hay un comentario, nos gustaría tener el tuyo por supuesto!

  1. Rocio on febrero 9, 2010 7:50 am

    Genial post, muy útil. Gracias!  

    Citar

Escribir comentario

diseño web
10 malos hábitos que deberíamos evitar al diseñar una web
freelance
5 consejos para cuidar tu corazón de diseñador
Desarrollo web
¿Diseñamos o producimos web?
marketing
5 ejercicios de diseño grafico para mantener activa nuestra creatividad