XD Essentials: Breadcrumbs
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:
- You should use breadcrumb navigation for websites that have hierarchically arranged pages (3 levels or more). An excellent example is ecommerce websites, in which a large variety of products is grouped into different logical categories.
- You shouldn’t use breadcrumbs for single-level websites that have no logical hierarchy. Including breadcrumbs in this case is unnecessary and potentially confusing to users.
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:
- Where am I? Breadcrumbs inform site visitors of their location in relation to the entire site’s hierarchy.
- Where can I go? Breadcrumbs improve the findability of site sections or pages. The structure of the site is more easily understood when it is laid out in a breadcrumb than if it is put into a menu.
- Should I go there? Breadcrumbs communicate content value and encourage browsing. For example, an ecommerce site visitor might land on a product page directly from the search engine’s results, and while the product itself might not be a good match, the visitor still might want to view other products from the same category. Thus, breadcrumbs reduce the overall site bounce rate.
In addition they have a number of other undoubted advantages:
- Reduced number of actions. Breadcrumbs reduce the number of actions a site visitor needs to take in order to get to a higher-level page. Instead of using the browser’s “Back” button or the site’s primary navigation to return to a higher-level page, visitors can use the breadcrumbs. A study conducted by Hull, S.S. (2004) found that users who received instruction to use breadcrumbs completed tasks much faster than users who didn’t use them.
- Takes up very little space on a page. Breadcrumbs are a compact mechanism that don’t take up much on a page. They have little to no negative impact in terms of content overload.
- No user suffer problems because of Breadcrumbs. Breadcrumbs never cause problems in user testing. Users pay attention to breadcrumbs only 30% of the time; when they do, it helps and even when they don’t, it doesn’t cause any harm.
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:
Breadcrumb Don’ts
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.
Don’t make the current page a link
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.
Breadcrumb Dos
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.
Nick Babich is a developer, tech enthusiast, and UX lover. He has spent the last 10 years working in the software industry with a specialized focus on development. He counts advertising, psychology, and cinema among his myriad interests.
Originally published at blogs.adobe.com.
Learn about Adobe XD, our all-in-one design and prototyping tool:
- Download Adobe Experience Design CC (Beta)
- Adobe XD Twitter account — also use #adobexd to talk to the team!
- Adobe XD UserVoice ideas database
- Adobe XD forum
