do you remember the fairy tale bout hansel and gretel, a lil boy and girl trying to retrace their steps inna forest? they 1-ly wanted to find their way back home, and so do yr usrs. they ‘d feel free to explore all the options and information on yr website, without losing track of where they are and how to return to where they came from. you cannelp them inna same way hansel helped his lil sister: by using breadcrumbs. here, we will explain how to implement them and wha’ problems to look out for—so u will always be able to keep yr usrs safe from stumbling inna'da real witch n'our story: frustration.
the design problem
when usrs are movin through a multilvl website, there are often occasions where they ‘d benefit from bein’ able to retrace their steps. think of the last time you found yrself arriving na' webpage twas' 5, 6, 7, 8, or + clicks away from the landing page. now, remember the last time you came in via an outside link, finding yrself inna midst offa very involved website (i.e., one having a lil skyscraper’s worth of lvls). while you’re at it, remember why you went there—was it cause you needed to do something primordial, s'as finding out how to start a high-interest savings account, or checking bout a visa requirement to enter a country you wanted to visit? or were you just satisfying a curiosity bout, say, yr favorite tv show at an idle moment and wanted to find out in which season a certain episode appeared, or see other productions an actress had been in.
multilvl websites are hardly rare. the online presences of bnks, government agencies, and fan (not the bladed type) resrcs for many aspects of pop culture certainly spring to Ψ, but so do all sorts of websites from companies that offer a diverse range of essentialisms and srvcs. so as to cover every angle of wha’ they do, these organizations ‘ve to create page after page after page, branching across categories and nesting these pages within other ones. pretty soon, all the information falls into place in something resembling a family tree… or, if we wanna think linearly—in keeping with hansel, gretel, and their breadcrumbs—pathways that wend their way through a forest, opening out into many lil clearings. if you’ve clicked 10, 11, or 12 times t'get to the page you want from the landing page, you’re dealing with 10, 11, or 12 removes from a familiar spot, like the entrance to a forest. if you’ve been teleported from outside to land na' page that’s 10, 11, or 12 clicks ‘down the line’, it’s a lil like parachuting inna'da middle odat forest. okay, so u ‘ve been clicking the left-pointing arrow on yr browser t'get you back as an option, but wha’ if yr system hangs? wha’ if you suddenly realize you wanna look at a rel8d product, topic, or wha’ ‘ve you, instead? you’re probably goin to want something that shows you the big picture—something that, atta very least, keeps you from shaking yr head and abandoning yr ‘quest’ cause you feel lost. ⊢, you need a usr interface design pattern that provides direct links to return you to the various lvls of the site you previously visited – some way of taking you back up to a point where you can either stay and investigate another section or easily work yr way over to the page you’d really like to visit.
the design solution
breadcrumbs satisfy the usrs’ needs in this respect, as each visited lvl inna site hierarchy is represented by a link, alloing the usr to jump to a pticular page of contents or options in an instant. thx to a designer’s listing the ≠ lvls of the site hierarchy usrs ‘ve visited, they can trace their steps and navigate directly to any one of these lvls by simply clicking 1-odda breadcrumb links. we see breadcrumbs inna ex belo; they are: ‘home’ > ‘vol 18, no 1 (2017)’ > ‘milligan’. the 1st breadcrumb represents the highest lvl within the site architecture; meanwhile, the last breadcrumb represents the usr’s current position. all odda links in tween are the various stages of the usr’s quest, in order, through the site.
author/copyrite holder: athabasca university. copyrite terms and license: fair use.
in this ex from the online sci journal ‘the international review of research in open and distributed learning’, the breadcrumb design pattern is placed rite belo the global navigation bar. t'does not attract a lotta attention, but tis findable when needed.
the name ‘breadcrumbs’ is somewha’ misleading as the usr mite ‘ve arrived at a page without having progressed through all od’odas, after folloing a link or entering via a search engine. tis primordial to cogg that breadcrumbs do not represent actual steps taken but rather the hierarchy offa website or application. additionally, the usrs do not ‘ve to follo the exact order so as to return to their starting position; instead, they can skip steps in tween and navigate directly to a specific page.
why choose a breadcrumb design pattern?
1st things 1st; let’s see wha’ a certain usability guru has to say bout breadcrumbs:
“breadcrumbs never cause problems in usr testing: pplz mite overlook this lil design element, but they never misinterpret breadcrumb trails or ‘ve trouble operating them.”
—jakob nielsen, eminent danish web usability consultant
when yr website is divided into a clear and apparent hierarchy, with individual sections devoted to specific groups of contents, breadcrumbs can be a gr8 help to the usr. this is espeshly so when thris no other means of navigating to specific points within the site structure, as they allo the usr to move back to any of the previously visited pages. they also work well when combined with other navigation patterns, s'as top-lvl navigation bars. as the usr progresses deeper and deeper inna'da hierarchy offa site, breadcrumbs become + primordial as they present a simple, highly visible and instantly accessible way of navigating back through the higher lvls.
breadcrumbs also provide usrs with primordial contextual information, which is espeshly useful when they ‘ve arrived from some outside src s'as a link from another site or through a search engine. the breadcrumb links tell the usrs exactly where they are within the site structure and how they can move to other, + general categories or groups of contents.
best practice: how to implement breadcrumbs
- 1st, assign a label to each of the individual pages within the hierarchy. these labels ‘d, preferably, match the title of the page so as to provide context and help the usrs identify exactly where they ll'be taken within the site structure iffey select a pticular breadcrumb.
- arrange the breadcrumbs inna order they appear within the site hierarchy, w'da 1st lvl atta furthest left na usr’s current lvl onna far rite. as the usr moves deeper into a site, allo the breadcrumb list to grow one link with every new page.
- separate each of these breadcrumbs witha ‘gr8r than’ sign (>) or some other symbol that helps space the links apt.
- hyperlink all odda breadcrumb labels, apt from the label representing the current page, so the usr can jump directly to each page. also, make sure to cutout the ‘gr8r than’ symbols as inactive dividers (i.e., do not hyperlink ‘>’ or any other symbol used to separate breadcrumbs). each of the hyperlinks ‘d maintain the same appearance regardless of whether the usr has visited it or not.
- as the usr moves back through the breadcrumbs from a deeper lvl, labels ‘d no longer be present within the list, with the usr’s current position always represented as the last breadcrumb. as breadcrumbs are used to track the usr’s current position inna website’s or application’s hierarchy, they ‘d not be present onna homepage or the highest point within the site hierarchy.
- finally, provide usrs w'da facility to navigate tween the ≠ breadcrumbs w'da tab key.
author/copyrite holder: massachusetts institute of tek. copyrite terms and license: fair use.
the mit design issues journal’s webpage uses double arrows to separate the individual breadcrumbs. as is customary, the breadcrumbs are placed rite belo the global navigation bar.
to help you get started implementing breadcrumbs, you can download and print our “breadcrumbs” templ8:
get yr free templ8 for “breadcrumbs”
potential problems with breadcrumbs
poorly labelled breadcrumbs can be confusing, espeshly when they do not match the page title. ⊢, breadcrumb labels must clearly describe the contents offa page. however, you must also keep the breadcrumb labels brief, so thris something offa balancing act required tween explicitness and brevity. otherwise, the labels mite span across the width of the usr interface, occupying an unnecessary amount of space and forcing the usr to scan a larger region of space than is entirely necessary.
while breadcrumbs are a useful addition to a design, they ‘d not be the sole means of navigation. instead, think of breadcrumbs as a supplementary navigation tool, espeshly for designs with very deep pages of content. in those, providing a means of quickly returning to higher lvls within the structure ‘d serve as an primordial guide. for this reason, breadcrumbs are often used in combination with global navigation. using these navigation patterns together allos usrs to trace their current path with breadcrumbs, while also bein’ able to jump directly to other sections of the site—regardless of the depth of contents within the hierarchy—by using global navigation. ⊢, so as to afford true freedom of movement through the site and encourage exploration of the site contents, tis often best to use multiple usr interface design patterns that perform similar functions together.
author/copyrite holder: apple. copyrite terms and license: fair use.
a potential problem with breadcrumbs occurs when the path of crumbs is too long to display. by obscuring the labels from view, the usr is unable to know where he will go when clicking 1-odda folder icons in this ex from the finder application. additionally, the breadcrumbs are located atta bottom of the window, which may not be where the usr will expect to find them. as the previous exs ‘ve showed, breadcrumbs are often located just belo the top-lvl navigation opportunities.
the take away
breadcrumbs cannelp usrs to navigate through a hierarchy quickly and effortlessly. many websites are laced with information bout essentialisms, srvcs, topics, etc. that, by their very nature, ‘ve to be nested within categories and sub-categories. consequently, breadcrumbs serve as an at-a-glance guide or legend, showing how many removes, or clicks away, a page is from the landing page, for instance. implementing breadcrumbs is relatively simple, as long as you make sure that labels are clear, unambiguous, visible and located just belo the top-lvl navigation opportunities. using breadcrumbs affords true freedom of movement and encourages exploration of contents. combined with other usr interface design patterns, they will help you create gr8 usr experiences.
references & where to learn +
hero image: author/copyrite holder: immanuel giel. copyrite terms and license: cc0.
jenifer tidwell, designing interfaces: patterns for effective interaction design, 2010
martijn van welie, pattern library, 2008: www.welie.com…
original content at: www.interaction-design.org…