Inicio > Internet y la Empresa

Consejos para su web

Tipos de Breadcrumb, o cómo 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, pero ¿existe un único tipo de breadcrumb?

_{Por Jesús Carreras Plaza, Consultor y técnico en investigación online de dnextep}

En Internet 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.

¿Qué es el Breadcrumb?

Al igual que en los cuentos populares de “Hansel y Gretel” o en España nuestro “Pulgarcito”, estos se sirvieron de un rastro de migas de pan para volver a su casa, 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. Dos de las recomendaciones principales a la hora de utilizar el breadcrumb son:

-no hacerlo como sustituto de los títulos de las páginas,

-y que los elementos que componen el breadcrumb sean enlaces (que el usuario pueda navegar por él).

Un modelo de breadcrum podría ser:

Página principal > Sección 1 > Subsección A > Página de productos > Ficha de Producto

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. Ahora bien, ¿Este modelo de breadcrumb que remite a la ubicación del usuario dentro del sitio web es siempre válido? ¿Existen situaciones en las cuales el usuario puede encontrarse desubicado por este tipo de elementos debido que este elemento no se corresponde con lo que esperaba? ¿El breadcrumb presenta una lógica independiente del site en el cuál está incluido?

Las tesis que se defienden en este texto son:

-Los breadcrumbs deben de ser acordes con el tipo de navegación que hace el usuario y el modelo de datos dentro del sistema.

-No hay un único criterio a la hora de crear el Breadcrumb, por tanto no hay un único tipo de Breadcrumb.

-No existen breadcrumbs “mejores” o “peores”, sino que hay que valorarlos en relación a su utilidad para cada tipo de site.

Tipos de Breadcrumbs

Para apoyar estas ideas presentamos tres tipos de breadcrumbs posibles a incluir en un sitio web. La idoneidad de cada uno de los tipos expuestos estará marcada por las expectativas/necesidades de los usuarios (necesidad de investigar); modelo/naturaliza de los datos; y el tipo de navegación que presenta el site

1.Breadcrumb Localizador, ligado a la estructura.

Este tipo de breadcrumb es propio de sites con una estructura de información estática, en donde cada elemento contenido está ubicado en un único lugar. Este breadcrumb informa del lugar, dentro del site, en el cual está ubicada la página y es independiente a la navegación que realice el usuario. Su formación es fija y conocida previamente al movimiento del usuario por el site. Una de las preguntas a la que respondería este tipo de breadcrumb es: ¿dónde está lo que busco?

_{Imagen 1: El breadcrumb actual de www.fnac.es (http://www.fnac.es) es del tipo localizador, la forma en como se encuentra la información no influye en la Raíz de navegación.}

2.Breadcrumb Dinámico, ligado a la navegación.

Este tipo de breadcrumb es propio de sites con una estructura de información dinámica, en donde cada elemento puede estar ubicado en diferentes lugares y el número de caminos para llegar a él es múltiple. En estos casos el breadcrumb informa del lugar, aunque su verdadero aporte es mostrar el camino seguido por el usuario para acceder al contenido mostrado. Su formación está condicionada por la navegación del usuario. Una de las preguntas que respondería este tipo de breadcrumb es: ¿cómo he llegado hasta aquí?

_{Imagen 2: Una misma página de producto presenta diferentes breadcrumbs según la navegación del usuario (http://www.eddiebauer.com ).}

3.Breadcrumb Descriptivo, ligado a los datos.

Este tipo de breadcrumb está ligado a las diferentes características de los datos, independientemente que también informe de la ubicación o la navegación del usuario. Se caracteriza por mostrar meta-información al usuario, sus principales diferencias respecto a los anteriores breadcrumbs son: viene dado, por lo tanto el usuario no ha recorrido los ítems enunciados en el breadcrumb, e informa del qué. Podríamos decir que los anteriores informan del punto de destino, mientras que el Breadcrumb Descriptivo constituye un punto de partida.

Este breadcrumb se suele utilizar asociándolo a elementos particulares de las páginas, Amazon lo suele hacer para mostrar caminos posibles de un producto determinado. Mientras que los anteriores son propios del conjunto de la página y por tanto referidos al total de elementos que aparecen en ellas. De esta forma la pregunta a la cual respondería este tipo de breadcrumb es: ¿qué contenidos se corresponden con una característica determinada?

_{Imagen 3: Cada breadcrumb utilizado en Google (http://www.google.com) proporciona meta-información de cada uno de los contenidos encontrados.}

Esta diferenciación entre breadcrumbs permite una mejor adecuación del Sistema de Navegación en nuestro site respecto a la orientación del usuario, y de esta manera aumentar las posibilidades de una buena experiencia de uso.

El criterio de selección del breadcrumb en nuestro site debe atender previamente a la naturaleza de los datos y el tipo de interacción que vamos a diseñar, para posteriormente elegir el formato y funcionamiento de nuestro breadcrumb. Las diferencias entre breadcrumbs dan la oportunidad de usarlos de manera combinada según las necesidades/objetivos de nuestro site. Por lo tanto la validez de un tipo de breadcrumb, vendrá determinada por su utilidad respecto a su capacidad para facilitar la navegación y comprensión de la misma por parte del usuario. No hay breadcrumbs ‘mejores’ ni ‘peores’ si no que son ‘más útiles’ o ‘menos útiles’ para un contexto determinado de navegación.

Enlaces relacionados y fuentes:

Textos de Keith Instone sobre breadcrumbs, en los cuales se basa este artículo.

http://user-experience.org/uefiles/breadcrumbs/

Estudio sobre el uso del breadcrumb tipo Localizador.

http://psychology.wichita.edu/surl/usabilitynews/52/breadcrumb.htm

“Curiosidad”: Hilo temático sobre el origen del concepto breadcrumb trail en una lista de correo.

http://lists.albura.net/efe.es/apuntes-kpn/2002-10/1578.html