25/09/2013

Breadcrumbs: otra forma de navegar por un sitio web

Breadcrumbs: otra forma de navegar por un sitio web

Los breadcrumbs (migas de pan), a veces llamados hilos de Ariadna, son elementos de navegación que nos indican nuestra actual ubicación dentro de un sitio web. Estamos acostumbrados a verlos en sitios de gran volumen, donde el menú de navegación principal o el mapa del sitio no resultan suficientes para informarnos dónde estamos dentro de la estructura de páginas. Existen distintos tipos de breadcrumbs:

  • Basados en la ubicación. Indican el nivel jerárquico en el que se encuentra la página actual. Por ejemplo, si estuviéramos viendo modelos de bicicletas en una tienda online, un posible breadcrumb sería «Página principal > Deportes >  Ciclismo > Bicicletas».
  • Basados en el recorrido. Una fila de enlaces ordenados por jerarquía que indican el recorrido de páginas que hicimos hasta llegar a nuestra ubicación actual. Este recorrido no tiene por qué ser el que indica la jerarquía de páginas. Es la opción menos utilizada, ya que su funcionalidad es cubierta por los botones «atrás» y «adelante» del navegador.
  • Basados en atributos. Indican los filtros que aplicamos para llegar a la selección de elementos que vemos en pantalla. En la tienda online del ejemplo anterior, por ejemplo, los filtros pueden ser «Olmo» y «Rodado 28». No tienen por qué estar alineados horizontalmente.

Los breadcrumbs tienen varias ventajas:

  • Permiten acceder con un solo clic a cualquier nivel jerárquico superior al de la página actual, sin tener que volver atrás varias veces con el botón del navegador.
  • Ocupan muy poco espacio dentro de la página.
  • No dan lugar a confusiones sobre su funcionamiento o utilidad.
  • Ayudan a nuestro posicionamiento en buscadores. Cada enlace coloca una keyword de manera natural. Los breadcrumbs incluso pueden aparecer en el resultado de búsqueda con un formato especial.

Sin embargo, para aprovechar al máximo las ventajas de los breadcrumbs debemos seguir ciertas normas, como ubicarlos en la parte superior de la página, utilizar un formato visual que permita distinguirlos del contenido y respetar fielmente la jerarquía del sitio. Teniendo en cuenta estas normas brindaremos una alta navegabilidad, característica fundamental de la usabilidad web.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce