Image for post
Image for post
Hansel and Gretel leave a trail behind

Are breadcrumbs still fresh for UX?

Jeff Jimerson
Mar 23, 2017 · 9 min read

For the better part of 16 years I’ve been designing websites and other screen interfaces, and during this time I have certainly seen an evolution in UX/UI design trends.

Technology has evolved, too. It wasn’t all that long ago when mobile phones, with their tiny screens, would only display tiny websites. As responsive layout became the norm, a whole new set of usability and wayfinding needs for mobile design was born.

And yet despite these changes and new challenges over the years, the job of the UX designer has remained the same: Present information in an easy-to-find, easy-to-consume way.

I’ve decided to take a closer look at one of the more ubiquitous interface design elements on the web — the breadcrumb trail — and ask a few questions. First, do website users actually find breadcrumbs useful? Second, if they are in fact helpful, what are some ways to optimize their effectiveness? And finally, will new technologies and trends in UX/UI design relegate breadcrumbs to the trash bin of antiquity? In other words, is modern web design causing breadcrumbs to go stale? Let’s find out.

A little history

Fast forward to 1991, when The New Kids on the Block were rocking the Super Bowl halftime show. Web servers and web browsers were the new tech on the street, and it didn’t take long for developers to co-opt Hansel and Gretel’s brilliant wayfinding method for their own then-20th-century purposes. Digital breadcrumbs quickly became commonplace across the world wide web because they gave users a handy, at-a-glance view of their current location and a path to get home. 25+ years later, these strings of links, separated by arrows, continue to be ever-present on the Internet today.

(By the way, I have a theory that the word itself was originally part of why breadcrumbs caught on within the designer/developer community. It was a memorable and clever metaphor, and became a sort of insider term for people who make websites. I suspect this sentiment hasn’t changed.)

Usability begins with well-organized content

Here’s what the IA and corresponding breadcrumb trail for a website we developed for a local bank looks like: Home > Business > Checking & Savings > Business Checking Accounts.

Each level represents a click (or tap) by the user. Of course when breadcrumbs are clickable, as all good breadcrumbs should be, they give users another way to go “back” or “up” a level to explore other pages in the website. The one exception to this rule is the page at the end of the breadcrumb trail. The name of the page currently being viewed shouldn’t be a clickable link, as reloading the active page would just be confusing.

Image for post
Image for post
Above: Location-based breadcrumbs for Willamette Community Bank

Two kinds of breadcrumbs

  1. Location-based: to help a user identify their current location in the site’s structure; and
  2. Attribute-based: to help a user identify an important quality or attribute of the content (page) being viewed.

The website above features a location-based breadcrumb trail. Now let’s take a look at a couple attribute-based examples. Amazon sells books in multiple formats including paperback, hardback, and Kindle — their digital reader version. For Amazon, a book’s format (printed or digital) and genre (there are dozens of them) are attributes significant enough to warrant their own system of breadcrumbs. Take a look at the two screen shots below. It’s the same exact book categorized in two completely different ways. When you toggle between “Kindle” and “Paperback” it reloads the page and changes the breadcrumb trail.

Image for post
Image for post
Above: Amazon’s breadcrumbs (paperback version)
Image for post
Image for post
Above: Amazon’s breadcrumbs (Kindle version)

Breadcrumbs for big business

Of these six websites, however, only three of them display breadcrumbs for mobile users. This kind of UX design inconsistency is unfortunately all too common.

And then there’s mobile

Many websites, including deep ones like Amazon, remove all hints of “you are here” from mobile — even though their designers thought breadcrumbs to be a good idea for desktop. It’s like we’re back in the wild west of web design, where commonly used conventions and UX norms are thrown out the window simply because the screen got small. This is sloppy design, in my humble opinion.

A good compromise, I believe, is to show mobile users at least one step back — serving as both a browsing tool and also a hint of where they’re at. Best Buy does a good job with this. When shopping on your phone for a 12-inch Apple MacBook at bestbuy.com you’ll notice a single breadcrumb “<See MacBooks” located directly above the page title. With an arrow pointing left, it’s an unobtrusive and short form way of saying Tap here to go back and see more Apple laptops.

Image for post
Image for post
Breadcrumbs for mobile on the left. Breadcrumbs for desktop on the right.

Just remember, even shallow websites can benefit from displaying a morsel of breadcrumb on mobile. This is because other common wayfinding conventions, such as highlighting the current section in the main navigation bar, are often hidden behind a collapsed menu. A single mobile breadcrumb accomplishes a lot while using just a little space.

What the research shows

While in-depth studies on breadcrumb usage are not exactly a dime-a-dozen, I did find one study that showed breadcrumbs get used as a navigation tool 6% of the time. This is compared with 40% of users who clicked on embedded links, 31% who clicked on the browser back button, and 22% who clicked on the navigation bar. The same study showed that when there is no breadcrumb trail present, the navigation bar and back button get used more often. No surprise there.

What I did find surprising was how significant a role the location of the breadcrumb played in how often it was clicked on. Breadcrumbs placed directly near the page title received a whopping 82% of all breadcrumb clicks, compared with only 18% for those placed at the very top of the page.

Do breadcrumbs improve SEO?

Here are a couple things we know. Google recommends adding breadcrumbs as one of several ways to “enhance your site’s attributes.” And Schema.org, which is funded in part by Google, has some recommendations on coding with a consistent breadcrumb vocabulary here.

As a side note, it’s interesting to see that Google displays a form of a breadcrumb trail in search results for mobile, but this has no bearing on whether or not the websites themselves include a visible breadcrumb trail. Google seems to be looking at the URL structure, then translating that into a human readable path. Curiously, however, they don’t do this for desktop.

Advanced tips and tricks

  • Showing where you’re at, so you don’t feel lost
  • Showing how a large, deep website is structured (or how products are organized)
  • Providing a way to get back a level to explore related content

But breadcrumbs can also go wrong. By their very nature of being another thing on the page, breadcrumbs will fight for attention with other elements. The trick is to make them accessible, but not intrusive. Using a small font size and an expected location — directly next to or above the page title — will keep the breadcrumbs from becoming visual noise.

There’s also the often overlooked matter of a breadcrumb trail’s length. Websites with long-winded page names will tend to have equally long-winded breadcrumbs that wrap onto multiple lines and eat up space. Deep sites with several levels to display can further cause this kind of crumbly page clutter.

In cases like these, something we like to do at the MAC is create alternate versions of the page names: A longer and more descriptive name for the page title, and another shorter name for the breadcrumb. While it’s a good idea for the wording of the currently viewed page to match the breadcrumb 1:1, the other items up the ladder, such as section names or landing pages previously viewed, can be shortened to save space.

Below is an example of how a word-length-optimized breadcrumb trail could look for a higher ed website. Notice how with each click the previously viewed page name gets abbreviated.

  • First click: Home > Resources for New Students
  • Second click: Home > Resources > Articles on Tuition and Financial Aid
  • Third click: Home > Resources > Articles > How to Apply for a Student Loan

The final string of words is easier to read, is less redundant, and eats up less screen space.

Another tip: don’t substitute breadcrumbs for a conventional navigation menu. Because they only show one linear path, standard breadcrumbs are not actually very useful for navigating a website. There is, however, an advanced breadcrumbing technique we used at PainWise designed to encourage users to explore when viewing the website on a desktop computer or tablet. When users hover their mouse over the last breadcrumb link, a dropdown list of other pages within that section appears.

Image for post
Image for post
Advanced breadcrumbs at PainWise.org

Summary of recommendations

Here are my top seven recommendations:

  1. Use breadcrumbs when designing websites that are three or more levels deep
  2. Place breadcrumbs directly above or next to the page title
  3. For mobile, a single breadcrumb (pointing back one level) should be used at a minimum
  4. Use arrows — not slashes or vertical lines — to imply movement between pages or point back home
  5. Show the current page, but don’t link to it
  6. Avoid long and redundant breadcrumbs by using shorter alternatives for section names
  7. Even with breadcrumbs, a conventional navigation menu should still be used

Final thoughts

It turns out that breadcrumbs, after all these years, are still a fresh idea. Hat tip to Hansel and Gretel for helping millions of website users find their way back home.


Update (November, 2019): I’ve published a new article on breadcrumbs called We’ve all been doing breadcrumbs wrong.

Madison Ave. Collective

Strategic thinking on branding and UX/UI design.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store