Friday, August 22, 2008

Design Cop-out #2: Breadcrumbs

Using breadcrumbs in website design ...

"In last week's article, we discussed how site maps are a design cop-out. Cop-outs happen when the designers focus on treating a symptom instead of addressing the root problem. This week, we look at a second common cop-out: breadcrumbs.

Hansel and Gretel

According to the Brothers Grimm fairytale, two children of a woodcutter are abandoned in the woods. To assist them at finding their way back to their home, the children ingeniously leave a trail of breadcrumbs behind them.

Breadcrumbs on a web site serve a similar purpose. The trail found on the page is there to help the user find their way back to where they started. (Interestingly, Hansel and Gretel's breadcrumbs were eaten by the small animals inhabiting the woods, rendering them unavailable for the return trip.)

Back in 2002, information architect Keith Instone pointed out that there were multiple types of breadcrumbs on a web site:

* Location Breadcrumbs show the user where they are within the site's hierarchy.
* Path Breadcrumbs show the user the path they took to get to the content.
* Attribute Breadcrumbs show the user the attributes they've chosen while conducting a faceted search.
* Application Breadcrumbs show the user the progress they've made in an application.

Most sites that provide breadcrumbs show the location variety. In this case, each page displays the optimal path the user could've clicked on to get it. For example, the page, "A Brief History of Coal Use" displays the breadcrumb trail of "Educational Activities > Energy Lessons > Coal-Introduction > Coal History" even though the user could get there without clicking on any links in that trail.

Even though path breadcrumbs are most like their fairytale ancestors, they are infrequently used on sites. It's rarely useful to display the oft circuitous route the user takes. Attribute breadcrumbs are more common now that guided navigational techniques, such as the camera selector on, have come into vogue. And, designers use application breadcrumbs to denote the completed steps in a multi-step workflow, such as checkout.

Typically, each element in the breadcrumb is a link, allowing the user to click to go "back". But, it's not really back because, in many cases, the user never traversed those pages to get where they now are. Therefore, breadcrumbs really are a way to open up the site's hierarchy for inspection -- to let the user access a broader perspective of the site content -- and that's where the problem comes in."    (Continued via uie, Jared Spool)    [Usability Resources]


Post a Comment

<< Home

<< Home