Design
Facts:
Lifecycle stage: Design
Contributors: Lisa Battle, Bill Killam, Nigel Bevan
Version: 6/2009
Breadcrumbs
Breadcrumbs are a navigation aid showing the location of the current page within a web site or web application. They consist of a series of horizontally arranged links, each representing a page in a path leading to the current page.
For examples of breadcrumbs see Breadcrumbs In Web Design: Examples And Best Practices.
Breadcrumbs are not a substitute for main navigation, but as a secondary navigation aid they can be useful in several different ways:
- They provide orientation for visitors who land on a deep page in the site from a search engine or external link.
- They help users keep track of their location, particularly when navigating web sites or applications with a deep content hierarchy.
- They provide links back to pages higher up in the site.
As breadcrumbs have become more widely used, conventions for using them have evolved. Although some web sites use dynamic breadcrumbs that reflect the navigation path the user took to the current page, more typically web sites use static breadcrumbs that reflect the location of the current page within the site's content hierarchy.
Although some early studies showed that users ignored breadcrumbs, more recent studies have shown that breadcrumbs help users (especially expert users) navigate more efficiently and increase user satisfaction.
Read More About It
Aery, S. (2007), Breadcrumb Navigation Deployment in Retail Web Sites. A Master’s Paper for the M.S. in I.S. Degree. July, 2007
Describes typical conventions used in breadcrumb design, based on a review of the top 100 online retailers.
Gube, J, Design Showcase | 103, March 17th, 2009. Breadcrumbs In Web Design: Examples And Best Practices
Practical advice on breadcrumb design.
Hull, S.S. (2004), Influence of training and exposure on the usage of breadcrumb navigation Usability News, 6.1
This academic study showed that minimal training on breadcrumbs increased participants’ use of them and resulted in quicker completion times, visited fewer pages, and reduced use of the Back button.
Lazar, N., & Eisenbrey, M. (2000). Website structural navigation University of Maryland, Student HCI Online Research
This study showed that breadcrumbs increased efficiency of navigating a web site, particularly for expert users.
Maldonado, C. A. & Resnick, M.L. (2002). Do common user interface design patterns improve navigation? Proceedings of the Human Factors and Ergonomics Society 46th Annual Meeting, 1315-1319.
Nielsen, J. (2007, April). Breadcrumb Navigation Increasingly Useful
Explains why breadcrumbs are increasingly useful, and the benefit of using them to show the site hierarchy rather than the user’s navigational path.
Rogers, L. & Chaparro, B. (2003). Breadcrumb navigation: Further investigation of usage. Usability News
This academic study showed that while 40% of the participants used the breadcrumb trail, usage was lower than that of other navigational options, such as the main navigation bar, the Back button, and embedded links.
