Breadcrumbs

As a diversion to my ongoing series on top-down usability design in web development, let me discuss about a very simple yet useful design element: the breadcrumbs. A single-line navigational element in a website that provides an intuitive and consistent navigational system for the users of your site.

The breadcrumbs usefulness can be loosely illustrated by the classic fairytale of Hansel and Gretel. In that children’s story, the two main characters left breadcrumbs in their path on their way to the witch’s house so that they’ll be guided back when they return. In the same way breadcrumbs are all about the navigational idea of returning to a previous point. In web design, breadcrumbs are implemented as a single row of text in every page of the site that gives the user an idea where he is in the hierarchy of information of the site. A user can navigate up this hierarchy by simple clicking the corresponding breadcrumb.

It is important to note thought that the breadcrumbs, as mentioned, should reflect the information hierarchy and not the user’s navigation history. The breadcrumbs should not aim to emulate the browser’s back button.

Breadcrumbs provide the user a good sense of direction and the feeling of being in control because it provides him an idea where he is in your site’s hierarchy. Being that way, he is able to navigate more efficiently around your site. Breadcrumbs also provides a consistent way of moving around for the user. And consistency is a very important element in usability. Breadcrumbs may take only a few of your site’s development time, but its one of those “little things” that makes your users more comfortable with your site without them being conscious about it.

Go back