¿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

Otros temas que podrían interesarte

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
tendencias web
18 de las mejores galerías web donde puedes encontrar inspiración
marketing
5 ejercicios de diseño grafico para mantener activa nuestra creatividad