Hansel and Gretel used breadcrumbs to find their way out of the deep dark woods. But what if they’d have teleported straight to the witch's house?
In general, breadcrumbs work to show where the user is within the hierarchy of a website and to provide a way to explore other areas. Depending on the type of breadcrumb it can also be used to show a user where they have come from and provide another way for them to go “back”.
A simple example of this could be:
A problem arises when a page can appear in more than one place. So in my example, there might be a single page “Oak Table” but the website hierarchy means it could live in multiple places:
Here the simple hierarchy no longer applies as it is no longer location/folder based.
What are the options?
1) Have multiple pages (So the physical page “Oak Tables” appears at multiple URLs ).
Best avoided as it may be seen as duplicate content and confuse users.
2) Display multiple breadcrumbs
Although Google is OK with this, I’ve never seen a tidy implementation and it’s potentially confusing for users.
3) Choose it’s rightful place and always show that in the breadcrumb
Here you decide that the ‘Oak Table’ page lives in a certain location. So for example structurally it lives in the “Oak” folder. No matter which path the user took, the breadcrumb always shows the “Oak” link.
The main issue here is that a user might have followed a path that is different to the one shown in the breadcrumb.
4) Choose a breadcrumb that isn’t hierarchical
Here we accept that the hierarchical breadcrumb (based off a folder structure) doesn’t make sense. Instead we decide on something else that makes sense such as
Or maybe even:
Here the last part (“products” or “Wooden Furniture”) are less to do with the actual path and more to do with giving the user somewhere sensible to go, no matter their journey into the page.
5) Use a path or “history” based breadcrumb
Here you log each user’s actual path through the site, building up the breadcrumb dynamically based on which path they have come through. So for example one user might see:
And another might see
Apart from technical issues, it can still be confusing for visitors as the hierarchy of the page may not be what’s expected and doesn’t get around the issue of people coming to it directly (from a search engine for example).
As an aside, when the last page a user visits was a results page, an adaption of this would be to add a history based link back to the results. That way they can go forward to a page and back to the results without using the back button.
6) Attribute based breadcrumb
As soon as you have a page that could potentially live in two places, it is no longer hierarchy based. As the breadcrumb/URL are divorced you could use something based around attributes. E.g.
Another attribute based breadcrumb often appears on results pages so that you can build up a breadcrumb here too:
Think clearly about each use case
Breadcrumbs have been around since the dawn of the web when most sites were simple and involved putting files in folders on a server. With much more complex sites and structures it’s important to think clearly about each use case and understand the reason it’s there and how it can help the user.
Do people use the back button?
There’s an argument that in the age of mobile apps and in-page navigation such as tabbed content, users are using the the back button less. The latest research I could find was from Firefox that shows that 93.1 percent of users clicked the button at least once over the course of a five-day period
Other breadcrumb related links
- Why use breadcrumbs
- The problem with breadcrumb trails
- Uie.com's article on breadcrumbs
- Google's Matt Cutts talkng about use of multiple breadcrumbs
Matt is focused on strategic vision and ensuring this is followed through to exquisite execution. Having been an award winning designer since 2001, he knows how to put the user first while building stakeholder alignment in order to deliver key objectives. It’s this passion for understanding people that enables him to design the best experiences for them. @matsaukeo