Abril 27, 2007

Apuntes sobre el Breadcrumb Navigation

Tema: Usabilidad, Diseño Web
» Se lee en 121 segs

Amazon’s Breadcrumb

Hace un par de semana comentábamos aquí los nuevos aportes que hacía Nielsen sobre los breadcrumbs, ahora desarrollemos un poco los conceptos básico en esta materia.

Definiciones básicas

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.

Usos Frecuentes

Suele estar presente en 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.

El paradigma de este elemento de navegación es Amazon.com, quizá sea quien más haya desarrollado este tema. La complejidad del Breadcumb Navigation de Amazon, ameritaría un artículo entero para poder explicar sus diferentes formas, ya que este sistema está vinculado también con el motor de búsquedas, así como su sistema de categorización.

¿Cómo usarlo?

Jakob Nielsen propone que sean de la siguiente manera:

Ejemplo Breadcrumb

Y que esté ubicado debajo del “header/cabecera”

En algunos casos suelen colocar antes de los links la frase Usted está Aquí/You Are Here. Como elemento para reforzar el sentido de los Breadcurmbs.

Se suele separar con el símbolo > (mayor qué). Angela Colter, Kathryn Summers, Cheri Smith de la Universidad de Baltimore, en el año 2002 publicaron un estudio titulado Exploring User Mental Models of Breadcrumbs in Web Navigation, en el cual demuestran que el separador más utilizado es el símbolo > (mayor qué), con un 47.11% de popularidad.

¿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 (recordar “Interfaces explorables”, uno de los principios de diseño de interacciones propuestos por Bruce Tognazzini)
6. Te echa una mano en SEO, pequeña pero te la echa.
7. No es costoso de implementar (depende claro a lo Amazon es muy caro)
8. El usuario te lo agradecerá

* Según J. Nielsen.

Traducción

En este mundo tan complejo y globalizado a veces cuesta ponerse de acuerdo en los nombres de las cosas. Aquí algunos ejemplos:

breadcrumb Navigation o Breadcrumb Trail: rastro, ruta, ruta de navegación, camino de navegación, hilo de Ariadna, rastro de migas de pan, sendero de migas de pan, menú de rastro.

Ejemplos

IBM
Breadcrumb IBM