Guidelines 190-191
Breadcrumb navigation provides a search history that users can interact with.
Users can reference breadcrumbs to remember their navigation path to the product page they’re on. Additionally, they can click on the breadcrumbs to navigate back to a previous page.
The next two guidelines explain how to create usable breadcrumbs on the product page.
2 guidelines for ecommerce product pages navigation:
- Breadcrumbs should be near top of page, following convention.
- On product page, offer hierarchy-based breadcrumb links.
Guideline #190. Breadcrumbs should be near top of page, following convention.
Place breadcrumbs where people expect to find them for maximum usability and minimum friction.
While breadcrumbs should be near the top of the page, they should be under (and secondary in visual hierarchy to) the main navigation bar.
Newegg:
GNC:
Guideline #191. On product page, offer hierarchy-based breadcrumb links.
Hierarchy-based breadcrumbs show the journey of clicks the user took to arrive at the current page. They show the “hierarchy” path, from parent category, to subcategory, to sub-subcategory, and so on.
Hierarchy-based breadcrumbs provide an easy path back to an earlier location. For instance, if a user decides they want to browse tablets instead of laptops, they can click on the Electronics link in their breadcrumbs and smoothly navigate to a page where the can select the Tablets subcategory.
The last link in the breadcrumb trail should take users back to the most recent results page, acting as a “back to results page” sort of button.
Pottery Barn’s hierarchy-based navigation:
American Eagle:
When I was viewing a product I could not go back to the search. I needed to right click and use the browser back button feature.