El breadcrumb (”desmigajado”, en espa帽ol) es una t茅cnica que se utiliza para mejorar la navegabilidad en la interfaz del usuario. La palabra deriva del relato de Hansel y Gretel de los hermanos Grimm. Mientras los ni帽os caminaban por el bosque, Hansel iba dejando restos de migas de pan como estrategia para poder luego encontrar el camino de regreso a casa.
En los sitios Web, los breadcrumbs cumplen la misma funci贸n: que la persona que navega en un sitio organizado jer谩rquicamente entienda d贸nde se encuentra y qu茅 relaci贸n tiene esa parte del sitio con el resto, facilitando el acceso a las p谩ginas que desea visitar y el “regreso a casa” (la home).
Si bien se trata de un elemento secundario de navegaci贸n, estado que comparte con el viejo “mapa del sitio”, se lo considera cada vez m谩s como una t茅cnica de navegabilidad insustituible. El 45% de los sitios web lo incluye como una opci贸n de navegabilidad. Es que esta herramienta brinda un reflejo r谩pido y exacto de la estructura del sitio. Un ejemplo: Home > Productos > Bebidas > Agua mineral.
Una de las ventajas del uso de breadcrumbs es que el usuario no necesita regresar al home para acceder a otra secci贸n de jerarqu铆a similar. Puede ir de un lado al otro, dando saltos intermedios entre una categor铆a principal y las subcategor铆as, lo que agiliza de manera considerable el tiempo que tarda la persona en alcanzar la p谩gina que desea ver.
El desmigajado ayuda a que el sitio resulte “entendible” desde el punto de vista del usuario, simplificando la creaci贸n del “modelo mental” del mapa de navegaci贸n. Otra ventaja es el escaso espacio que ocupa; por lo general se puede condensar en una sola l铆nea. Se debe incorporar en la fase de maquetado del sitio, en la parte superior de cada p谩gina y de manera prominente pero no intrusiva.
Los niveles de jerarqu铆a se suelen separar con peque帽as vi帽etas, barras, flechas o puntos. No hay un est谩ndar al respecto, pero en muchos casos se tiende a imitar a la presentaci贸n de “carpeta / subcarpeta / archivo” de los sistemas operativos.
Enlaces sobre este tema y fuentes:
Breadcrumb Navigation Increasingly Useful (Jakob Nielsen’s Alertbox)
Usability Glossary: breadcrumbs
Web Design Practices | Breadcrumb Navigation
Breadcrumbs in Javascript | evolt.org
Breadcrumbs for All | evolt.org
Usability News - Breadcrumb Navigation: Further Investigation of Usage
Comentarios recientes
- Gabriela: JAJAJAJAJA, solo falt贸: "me parece que el dise帽o est谩 muy est谩tico, ...
- Alejandro: Todos patalean por que no se quieren tomar la SOPA o porque no podremos ...
- LaU: No termina de convencerme del todo, aunque ya me estoy hartando de lo le...
- Isma-Chistes: Buenas y gracias por la aportaci贸n, pero alguien sabr铆a como utilizar ...
- Mauricio Vinasco: GRACIAS!!!! genial... C贸mo se te ocurre esto????...
- Jose Larez: Felicitaciones esta muy exacta la explicacion ! Gracias por este curso.....
Feed de los comentarios