Breadcrumb trails are a key part of user interface design yet are frequently overlooked. How do they impact your system and affect your users?
This article is about an aspect of user interface design and considering how your users experience your system.
Being lost and a feeling of nervousness can be mitigated with proper use of breadcrumb trails.
Yet why is it called a breadcrumb trail and what has that got to do with interfaces?
- A little mythology
- Making the most of the space
[read more=”Read more” less=”Read less”]
A little bit of literary knowledge
The entomology of ideas and applications of jargon usually stem from stories. Breadcrumb trails are no different.
The title of “Breadcrumb Trail” has been used for movies such as the 2014 documentary film on the band Slint and their album Spiderland.
Let’s stay away from this as it has nothing to do with this article.
Yet as a writing technique to create suspense, breadcrumbs encourage the read to read on.
Every author’s first and foremost goal is convincing readers to keep reading all the way to the final chapter. So how do we do this? There are, of course, many answers to this. The reasons readers decide to keep reading include everything from lovable characters to funny dialogue. But, at the most foundational level, the reason they stick with a book all the way to page 528 is that there’s something they want to know. …
[The author] keeps reminding the reader of [an] initial question and tantalizing him with small and incomplete clues to the answer. These clues are the breadcrumbs that will lead the curious reader on a trail right to the Big Finale’s front door.
So authors leave breadcrumbs. So where did they get this bit of jargon?
Hansel and Gretel
In a rather “Grimm” fairy tale, the Brothers Grimm in 1812 wrote about a brother and sister, Hansel and Gretel.
They were in a very poor family and the parents decided to dump the kids in the woods because they were all going to starve.
The children overheard the plan so put in place a solution or two to find their way home.
On the first attempt Hansel gets some white pebbles and leaves a trail to find his way home.
Undeterred the parents try again but make sure Hansel has no pebbles on the second go.
He does have a loaf of bread so leaves a breadcrumb trail.
Unfortunately this time, birds eat it up and the children can’t find their way home!
Dark or what! The full plot is on Wikipedia if you want it.
There is much debate as to “is there a deeper meaning” to the story.
Most sources agree the story is for entertainment.
Not every story has a lesson to learn or is a symbol for some deeper meaning.
So a breadcrumb trail is a navigational aid.
The technical delivery
Breadcrumb trails are a graphical control element frequently used as a navigational aid in user interfaces and on web pages.
They enable users to keep track and maintain awareness of their locations within programs, documents, or websites.
As the only form of navigation studies demonstrate that they are not the be all and end all. However in combination with other navigational tools are very helpful for users.
Research from 2006 suggests that arrows ( > ) work better than the pipe symbol ( | )
Types of breadcrumbs
In “Web Design and Marketing Solutions for Business Websites” by Kevin Potts, he outlines that there are two types of breadcrumbs.
Products > Cars > Nissan > Altima > 2006
These dynamically display the links the user chose to arrive at the page, mimicking the browsers’s history-keeping and Back button functionality
As in the example just shown, these illustrate the actual structure of the site and are independent of how the user actually arrived on the page. This approach is far more common and usable, since it gives visitors a sense of where they are in a site. (Ideally, a hierarchical breadcrumb would mimic the URL structure – e.g. www.example.com/products/cars/nissan/altima/2006/. )
The focus on breadcrumb trail research appears to stem from work done around 2001 to 2006.
With increased reliance on searching rather than structural navigation it can be understood why the focus of UX is less on structure and more on accessibility.
However not throwing the baby out with the bath water, let’s look at what breadcrumbs do well.
Interactions magazine in September / October 2004 provide some good points.
Comfy where I am thanks
If a user knows how to navigate to section of site or particular area in a site, they may want to be able stay in this area.
Having only a home button adds more clicks.
Looking at the example from earlier
Products > Cars > Nissan > Altima > 2006
Why force a user with only a home button option to go through Products and Cars again, if all they’re interested in is Nissans?
How did I get here? If you every try to work backwards to figure out what you clicked it can be difficult.
If you’ve ever gone hiking, trail signs can point you on a route. Try to do it backwards and the system doesn’t work
When the site bounces you around with recommends and links, the breadcrumb trails show how you could have gotten here.
Getting deep into the meaning
So if someone bounces in from a Google search. Is this the only thing in this area I should be aware of?
The URL probably won’t contain the full path and description of how to get here. Especially if you use URL shortening.
The users is in the general area but explaining “this is why this is here” can be done through the breadcrumb trails.
You’re educating your users as to how you structure your business / systems.
Gimme more of the same please
When users are not navigating your system but rather dropping in and they’re not too sure what they’re after… how do you help?
Because the topics when you work left in the breadcrumb trail are more and more general you can prompt / guide or hint at “this might be a similar to what you’re after?”
This again is you suggesting to the user there is more to explore so don’t just take this page in isolation.
Inconsistency is the biggest downfall of breadcrumb trails. Many sites don’t include them at all.
Even when they do include them consistency in structure, capability and presentation vary wildly.
Take this example. How would you find other Harry Potter merchandise from the breadcrumb trails?
Furthermore visual real-estate on screen is important and a clearer interface has less on it.
Less clutter, less stress seems to be the modern thinking.
So designers tend to locate the crumb in usually small text, near the top or tucked away at the bottom of the page.
Engaging with users as to “what works for you?” is sensible UX research.
The making the ability for each level to be a link that can be clicked is not always implemented.
Wrap up your breadcrumb trails
Whether it is
- Firstly training material, especially when trying to share it with others
- Next while the parameters may change navigating to a report engine
- Also trying to get to any operational screen
- Looking for like resources or product listings
- Or any web based feature
breadcrumb trails provide users a structured way to find their way back here in the future.
Searching can work for numerous scenarios but next month when you’re trying to work out “how did I pull that report again?” your breadcrumb trails can help your users.
If there’s anything in this article you’d like to chat to me about you can contact me here or on social media.