While breadcrumbs may seem like a pretty uninteresting site element, during our recent Homepage & Category Usability study they proved themselves to be vital navigation paths. Perhaps more interesting is that the study revealed that e-commerce sites should offer 2 types of breadcrumbs: both hierarchy-based and history-based breadcrumbs.
Yet, when benchmarking 50 major e-commerce sites we found that a staggering 68% suffer from sub-par breadcrumb implementations: 45% have only one type of breadcrumb (typically hierarchy-based, lacking the history-based), and 23% don’t have breadcrumbs at all.
In this article we’ll go over the findings from our research study, outlining the characteristics of both history-based and hierarchy-based breadcrumbs, and discuss why it’s important for e-commerce sites to have both.
Without breadcrumbs on the product page, it’s difficult for users to efficiently browse a collection of products because there’s no way to go “one step up” in the hierarchy (to the product category), or return to a previous product list or search results page. This often forces users to make drastic scope jumps (e.g. select a top-level category, perform a search, etc.) or remain stuck at the product page.
With breadcrumbs, however, any user who doesn’t find the product to be a good match or simply wants to see other products (for comparison, due diligence, or additional purchases) can use the breadcrumbs to seamlessly traverse up the site hierarchy and in this way continue their product browsing instead of having to resort to drastic scope jumps.
During testing the most common usage of breadcrumbs was as a way to return to the category the test subject just came from – much like using the browser’s “Back” button, only this is part of the webpage’s interface. In this sense, breadcrumbs are essentially an easy way for users to return to the product category and continue their product browsing, jumping back and forth between product page and product list.
Alas, breadcrumb links often don’t work like the browser “Back” button as they are typically hierarchy-based, whereas the web browser’s “Back” button is history-based (that is, it’s based on the user’s navigation path). Consequently, any previously applied filters and sorting options are lost when the user navigates back using a hierarchy-based breadcrumb. This is where history-based breadcrumbs enter the picture. When the breadcrumb is history-based it sends the user back to their previous page, which is often not the plain category list – for example the user may have filtered by a product attribute or applied a different sorting direction, or maybe even entered the product page in a non-linear fashion, such as search (on-site as well as off-site) or an ad.
A few sites implement breadcrumbs that are based solely on the user’s navigation path (i.e. history-based breadcrumbs), effectively functioning as “back” links. However, this limits the user’s ability to explore scopes they’ve accessed in a non-linear fashion as they can’t shift to a linear browsing strategy by traversing up through the categories the product is placed in.
Users who land on a product page in a non-linear fashion (e.g., from an internal or external search, or from a featured promotion) will often use breadcrumbs to see other products in the same sub-category. It’s essentially a way for the user to find related products despite accessing the product from a completely different part of the site or even from another site altogether. Hierarchy breadcrumbs are therefore hugely important to search, promotions and other non-linear paths, as it enables the user to easily switch to a linear product-browsing strategy if the scope is relevant to them.
Yet while hierarchy-based breadcrumbs work well for users who accessed the product page in a non-linear fashion, they don’t always suit the needs of users who accessed the product page in a linear way. If a user has applied a number of filters on the category page and then opens a product, clicking the category in the hierarchy-based breadcrumbs on the product page will typically not retain the filters but rather send the user back to the category page with no filters applied because it’s simply a link to the category and not based on the user’s history. Meanwhile what the user really needed was a history-based breadcrumb that would send them back to their previous page – whether it be a list of search results or a category with previous filters and sorting applied.
Clearly, there’s a legitimate need for both hierarchy-based and history-based breadcrumbs – so which should you implement? The answer is both. An elegant, and relatively simple solution is to have a set of hierarchy-based breadcrumbs and then append a history-based “Back to results” option at the end (or beginning). This gives the user the best of both worlds: access to categories despite accessing the product page in a non-linear way, while also providing the user a way back to their previous page with any filters, sorting and/or search queries intact.
This is a good example of a seemingly ordinary site element that can actually have a significant impact on the user’s ability to browse your site’s product catalog. By fusing hierarchy- and history-based breadcrumbs, users can change product browsing strategy and seamlessly leaf through product lists.
What makes this fusion particularly interesting is that it blends site taxonomy and user behavior into a single functional element. It’s details like this that can make the difference between a site that supports rapid product browsing and shifts in product finding strategy and a site that hinders it.
This article presents the research findings from just 1 of the 580+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” e-commerce navigation experience.
Join 24,000+ readers and get Baymard’s research articles by RSS feed or
Topics include user experience, web design, and e-commerce
Articles are always delivered ad-free and in their full length
1-click unsubscribe at any time
Always good reading your postings – And you’re once again in the right – But I see three alternatives to use breadcrumbs, which also can be mixed, regarding the individual needs / depending on the context.
Maybe this article might be interesting for one or two: http://ux4dotcom.blogspot.com/2013/10/breadcrumb-secondary-navigation-aid.html
Thanks for the comment. Replying for Jamie.
Agree with your article; breadcrumbs are no excuse for having a laxly enforced category hierarchy and taxonomy. If a site’s main nav. and category taxonomy is well implemented, they are a great addition. Great to see we have aligning test observations in regards to the user behaviour and need for inferring current scope and traversing back up the category hierarchy.
In regards to the three alternatives, doesn’t “Location-based” = “hierarchy-based” and “path-based” = “history-based” ?
> If a user has applied a number of filters on the category page and then opens a product, clicking the category in the hierarchy-based breadcrumbs on the product page will typically not retain the filters but rather send the user back to the category page with no filters applied because it’s simply a link to the category and not based on the user’s history.
I think you’ve hit upon the correct fix but disregarded it!
The point is that any different ‘view’ (so if filters are applied, for example) should have a URL associated with it. Whilst this may have been traditionally a little difficult, it’s more and more feasible now with things like Ajax and Pushstate in HTML5.
If this is implemented correctly, the user can use the well-known features within the browser to go back, historically, through their journey and we have avoided reproducing browser-functionality in our designs.
Yes and no.
Using the browser back button should of course be technically supported so it keeps any applied filters intact. But that is not enough to get rid of either the hierarchy-based or history -based breadcrumbs:
Hierarchy based will always be needed so users can infer their current scope etc.
History-based will still be needed as the test subjects – when testing one the many sites that only had hierarchy breadcrumbs – were often observed to use the hierarchy-based breadcrumbs thinking they would take them “one step back”, i.e. function as a back-button. Having the history-based “back to results” link right before or right after the hierarchy-based breadcrumbs indicates there’s a difference between “going back” and "go one level up to the ‘running shoes category’ ". For the same reason you can experiment with having the “back to results” as a dynamic link and only show it when there actually is a difference (e.g. if user have applied filters or comes from internal search, etc.).
Sorry if the article wasn’t entirely clear on this.
Desktop is dead, show us some mobile implementations of all this instead :D
We have an article series covering some of our mobile commerce usability findings:
6 Mobile Checkout Usability Considerations
Mobile Form Usability: Avoid Splitting Single Input Entities
Mobile Form Usability: Place Labels Above the Field
Mobile Product Pages: Always Offer a List of Compatible Products
Mobile: Never Use Native Drop-Downs for Navigation
How should your mobile and desktop sites differ?
Mobile Product Lists Need Very Distinct Hit Areas
Mobile Form Usability: Never Use Inline Labels
5 High-Level Mobile Commerce Design Considerations
Interesting article, Next is also a good example to look at.
Not sure if we have covered the following point. If a user search’s for a product on a search engine, where by this user then click on a link leading to a ‘product detail page’. Without breadcrumbs this does not offer the user the opportunity to browse what other products are in that category or even explain to the user what category the product falls in all together.
Exactly Tom, this is why hierarchy-based breadcrumbs are important to include in addition to the history-based “Back to results” link.
Very smartly presented + said. I’m gonna make sure to include this navigation in my next web projects. Thanks!
Thanks for the great article, I just used this technique in one of my eCommerce projects.
I love to use the breadcrumbs technique in my website.
An interesting post but some mix up seems apparent in your description of location and path based breadcrumbs. Location based show a hierarchical view of the website and if implemented properly have many pros for both SEO and usability. They DO NOT replicate the back button, on the contrary path based breadcrumbs actually do this. Location based breadcrumbs should remain the same regardless of journey.
I understand you stating that you need both but actually the ability to have a “back to search results” page on the product page in fact should merely replicate the back button and attributes should remain filtered if the site incorporates an Ajax backend.
Breadcrumbs won’t help a site answer users’ questions or fix a hopelessly confused information architecture. All that breadcrumbs do is make it easier for users to move around the site, assuming its content and overall structure make sense. That’s sufficient contribution for something that takes up only one line in the design.
Breadcrumbs in sites can be small but they have big roles. These things must not taken for granted.
Thanks for describing hierarchy-based and history-based breadcrumbs for e-commerce.
Great! Finally, I got to know how important is breadcrumbs for a successful website.
I knew that hierarchy based breadcrumbs was really important, both for user experience and SEO. A real eye-opener about the historical breadcrumbs. Thanks for this!
Great article. Do you have any thoughts or research on the feasibility of showing breadcrumbs or standards on showing breadcrumbs for mobile?
Most of our customers are going mobile and given the smaller form factor on mobile screens, a breadcrumb line can potentially take up space equivalent to a Reviews line or pricing info. line that gets pushed below the fold.
Yes we have tested PDP breadcrumbs extensively on mobile as well. On mobile breadcrumbs are actually even more important than desktop.
A decent compromise (that performs much better than not having breadcrumbs at all) is to limit the breadcrumbs on mobile to only show the 2-3 layers of hierarchy that’s “closest by” the users current position instead of a full-length /full hierarchy breadcrumb (+ don’t show the current page as part of the breadcrumb path, i.e. if the user is on “green leather sandal PDP” don’t show that in the breadcrumb)
If you have Baymard Premium access see our findings on mobile breadcrumbs here: https://baymard.com/premium/guidelines/149
© 2021 Baymard Institute US: +1 (315) 216-7151 EU: +45 3696 9567 firstname.lastname@example.org