XD Essentials: Breadcrumbs

by Nick Babich

posted on 05-18-2017

Navigation can make or break the user experience of a site. It helps users to locate themselves on a site, and figure out how to get to where they want to go next. Of course, it’s important to get the big things right when it comes to designing a primary navigation or you will have high bounce rates and unfinished user flows. However, practical experience shows that getting the small things right is equally important, such as the breadcrumb trail.

In this article, we’ll explore the use of breadcrumbs on websites, and discuss some best practices for applying breadcrumb trails to your own website.

What Are Breadcrumbs?

Breadcrumbs are a set of contextual links that function as a navigation aid for websites. Basically, it’s a secondary navigation scheme that reveals the user’s location in a website. The term comes from the Hansel and Gretel fairy tale in which the two children drop breadcrumbs to form a trail back to their home.

Just like in the tale, breadcrumbs in real-world applications offer users a way back to a site’s starting point. There are three different types of breadcrumbs represented in websites – location, attribute, and path.

Location-based

Location-based breadcrumbs show the current position within a site’s hierarchy and enable the user to quickly navigate through levels of a site. They reduce the number of steps needed to navigate to a higher-level within a website.

Attribute-based

Attribute-based breadcrumbs enhance the breadcrumb trail with attributes of the current content. They are commonly used on ecommerce websites that implement faceted classification. Here’s a good example from online retailer T.M.Lewin – you can navigate around within the product catalog by product category and filter the view by particular properties.

Path-based

While two previous types of breadcrumbs were about hierarchy, this one is all about history. Also known as ‘history trail,’ these breadcrumbs enable users to see the path they have taken to arrive at a given page.

Even though path breadcrumbs are most like their fairytale ancestors, they are infrequently used on sites. In most cases they are useless since they duplicate functionality offered by the “Back” button.

A rule of thumb for breadcrumbs is to show the site hierarchy, not the user’s history. Thus, try to use location-based / attribute-based breadcrumbs, not path-based ones.

When Should I Use Breadcrumbs?

Deciding whether to use breadcrumbs largely depends on how you’ve designed your website hierarchy. A proper way to determine if a website would benefit from breadcrumb navigation is to create a diagram representing the website’s navigation architecture, and then analyze whether breadcrumbs would improve the user’s ability to navigate within and between categories. In general:

Why Should I Use Breadcrumbs?

Breadcrumbs serve as an effective visual aid, indicating the location of the user within the site’s hierarchy. This property makes breadcrumb navigation a great source of contextual information for users and helps them find answers on the following questions:

In addition they have a number of other undoubted advantages:

How Should I use Breadcrumbs?

Using breadcrumb trails is a fairly straightforward affair, and there are only a few things to consider before deciding to implement them on a website:

Don’t use breadcrumbs as a replacement for primary navigation

Breadcrumb navigation shouldn’t replace effective primary navigation menus. Main navigation should be the element which leads the user, while breadcrumbs should only support the user. Relying on breadcrumbs as a crucial method of navigation rather than an extra feature, usually, is an indication of a poor navigation design.

Don’t use breadcrumbs on the homepage

The homepage is where the user journey starts, it doesn’t make sense to have breadcrumbs displayed on your homepage.

Make sure that the last item in the breadcrumb trail (current user’s location) isn’t clickable. Since users are already on the page, it does not make any sense to add a link of the current page to the breadcrumb navigation. A user might get confused when clicking on a link that leads to the same page again.

Don’t make breadcrumbs the focal point of your design

Stay away from fancy fonts and bright colors because these will go against the purpose of using breadcrumb navigation. A rule of thumb to follow when sizing and styling your breadcrumb trail is that it shouldn’t be the first item that grabs the user’s attention when landing on a page. The breadcrumb trail in the example below isn’t bad, but it’s too eye-catching and might distract visitors from the primary navigation and main content.

Put the breadcrumbs at the top

Main navigation is typically placed at the very top of a website. Because breadcrumbs work as a secondary navigation aid, it should be placed above the content, but below the main navigation bar and above the page title.

Start trail with a homepage

A breadcrumb trail should begin with a link to the website’s homepage and end with the current page. Including the homepage in the trail acts like an anchor giving a strong sense of orientation to users.

Use arrowheads, not slashes as separators

Separate each level with clarity. It’s recommended to use a more-than sign (>) or arrows pointing to the right (→), because these symbols signal direction.

A forward slash (/) isn’t recommended as a separator for ecommerce sites. If you’re going to use it, you have to be certain that no category will ever use a slash:

Single out the current page

Use a different style on the last item of a breadcrumb list to establish that it’s the currently viewed page.

Select a proper size and padding

Think carefully about target size and padding when designing. There should be enough of a gap between different breadcrumb levels, otherwise people might find it hard to use them. At the same time you don’t want your breadcrumbs to dominate the page, thus they should be less prominent than the primary navigation menu.

Pagination and breadcrumbs

If you have paged content, you should add the first element and the current element of the paginated content in your breadcrumbs.

The link “Integrated cookers” in the example above links to the first element of the paged content “Integrated cookers” and allows the user to jump back to the start of the pagination.

Conclusion

Breadcrumbs are one of the few simple things that enhance usability and fosters user comfort. It makes it easier for visitors to move around a site, and helps UX designers present information in an easy-to-find way. And that’s a sufficient contribution for something that takes up only one line in a design.

Topics: Creative Inspiration & Trends, Design

Products: Creative Cloud