Breadcrumbs Research Findings

Summary of what we learned

This is a summary of findings from conducting the methods outlined in the Breadcrumbs Research Plan.

Method: Comparative Analysis

These findings are based on a collection of screenshots of popular U.S. Federal and other government sites. We also reviewed a survey of usage on small screens for commercial sites.

• There are a number of good examples of breadcrumbs in the Federal space.
• Uses of breadcrumbs follow the conventional guidance on presentation at large screen sizes.
• For small screens, there is more variety: smaller version, truncated version, completely removed.
• In many cases, breadcrumbs are one of several navigational tools available.
• Although the basic pattern of "link, separator, link" is consistent, there are many stylistic differences such as font size, text decoration, and separator character.

Method: Heuristic Analysis

These findings are based on well-known, expert sources such as Nielsen Norman Group, The UK.gov Design System, and others. Detailed notes and links are in the Breadcrumbs Landscape Analysis.

• Because breadcrumbs have been around for a long time (Nielsen Norman Group has been recommending them since 1995), the guidance is quite consistent.
• Although there is the possibility of breadcrumbs reflecting "user path to current page," the consensus view is that they reflect the "location of current page within the site hierarchy."
• Accessibility guidance and preference suggests using Ordered List markup (thought Unordered List and other options are acceptable).
• WAI-ARIA states they should be contained within a landmark region.
• The main benefits to the website visitor are:
  • Understanding where you currently are within the site.
  • Quickly navigating to the parent page/section of the current page.
  • Note: Both of these benefits are particularly relevant when a visitor has landed on an interior page when coming from a web search or link from another site.
• A breadcrumb component includes the following basic elements:
  • Links to pages that reflect the location of the current page in the site hierarchy
  • Separator between links
• A breadcrumb component may also include some additional elements and features:
  • Repetition of the current page title (unlinked)
  • Truncation to reduce the overall footprint of the component (for small screen)
  • Iconography in place of or in addition to page names (like home)
• Breadcrumbs can still provide value on small screens (mobile) and should not be automatically discounted and removed.

Method: Interviews

These themes are based on 6 interviews with people working for a federal contracting vendor representing design, development, and content. Notes and transcripts are available in Breadcrumbs User Interview Notes.

• Unless you're designing a new site from the ground up, there is little leeway in determining breadcrumb presentation as it likely already defined as part of the site style guide or design system.
  • Even Agency or Sub-Agency sites may simply follow the style established by the parent Department.
• Although the value of breadcrumbs is acknowledged, with the prevalence of "mega menus" for main navigation as well as section navigations, there seems to be less perceived need for including breadcrumbs as additional navigation.
• A big challenge with the implementation of breadcrumbs is how well the actual site hierarchy is structured.
  • Content management systems like Drupal and others have out-of-the-box breadcrumb components. Theming is not an issue, but if the information architecture is not constructed well, the default behavior of the breadcrumbs is not helpful to the visitor in giving them the right context and navigation options.
• Another challenge is what to do on small screens. Most seem OK with simply removing them as opposed to wrestling with how to make them take up less space or allow them to wrap.
  • Note that on small screens, the main menu is also now collapsed and side/section navigations are hidden as well. So while the screen real estate is focused on content for small screens, there is very little navigational context available until you open a menu.
• Breadcrumbs are seen as a glorified back button.
• When there is leeway in the design, decisions about how to style (underline, separator character) are mostly based on visual preferences.

Initial Recommendations

• When to use breadcrumbs while other navigation aids are present.
  • Main nav and section nav enable to see where to go from where you are, but they don't always necessarily tell you where you are now.
  • Guidance could include the following:
    • Only use after 2 levels of hierarchy.
    • Don't use if both main nav and section nav are present and they are properly using highlighting to indicate the location of the current page.
• How to truncate long content (considering both individual items within the breadcrumb and the overall breadcrumb itself).
  • From interviews, there seems to be an assumption that shortening means "removing from the end" (whether a link or series), but there may be other viable alternatives like truncating the middles of things. This shortens the overall length but can still provide good context for what you're looking at (without having to click something first)
  • We should explore alternatives that include truncating the middles of individual links and/or the middle of the entire breadcrumb. That way there is still enough context.
  • Another option to consider is that clicking something in a breadcrumb can reveal something first as opposed to taking you directly there.
• The importance of having well-structured content within your CMS. (Without it, breadcrumbs are not useful or need to be hacked to provide non-default content, which increases development time.)
  • This might go beyond the guidance for the component, but it's worth calling out that the breadcrumb structure should following the information architecture of the site. And if that's not defined in a clear, logical way, breadcrumbs may not help.
• The difference between the browser's Back button and breadcrumbs.
  • According to Nielsen Norman, "The Back button is the lifeline of the web user and the second-most-used navigation feature (after following hypertext links)."
  • The case for breadcrumbs reflecting site hierarchy (not "user path to current page") is that visitors instinctively use the Back button to "go back the way they came."
  • The main value of breadcrumbs is to give people context for where they are within the site. In that sense, it's more of an "up" button than a back button. But there may be situations where the context of path is useful too, such as exploring (and returning to) search results, or stepping through a "wizard" (step-by-step) experience.
• Although there are plenty of utility tokens available to customize the presentation, it may be helpful to include some "smart defaults" for things like padding (default, tight, loose), text decoration, and separator character (slash, dot, pipe).

Next Steps

• Create a prototype and user test plan to get some feedback on interactions with breadcrumbs from both Design System users and website visitors.