Katerina Ivkova

Consultant, Experience Design

Improve User Experience with Breadcrumbs in Website Navigation

Consultant, Experience Design

Ginger Breadcrumbs in website navigation

Breadcrumbs and Site Navigation – the A >…> Z and everything in between.

Most websites employ the use of breadcrumbs in information architecture nowadays to help a site visitor know where he or she is relative to the home page and how they’ve gotten to where they are. I’m not talking about the Fairy Tale type of breadcrumb that birds can eat leaving you lost to get eaten by a evil cannibalistic witch, but breadcrumbs of the digital type. Still don’t know what I mean by breadcrumbs? They happen on lots of large ecommerce or content managed websites and they look something like this:

Home> Services> Website Design> Information Architecture> CMS selection and evaluation

Breadcrumbs in site navigation have become almost ubiquitous. If a site isn’t using breadcrumbs, it’s because of any one of the three reasons below:

  1. the website is not very deep and navigation is clear enough without breadcrumbs;
  2. there is secondary navigation on pages, but not in the breadcrumb form;
  3. the site designer didn’t use breadcrumbs during the initial website design and now no one feels a need to add breadcrumbs; or unbelievably,
  4. the site designers and information architects just did not know about breadcrumbs… It can happen. ( If that’s you, take a look at Breadcrumbs In Web Design: Examples And Best Practices article by Jacob Gube.)

Think of breadcrumbs as an important customer service tool. They show users a path of every page they have visited, giving them easy one-click access to prior pages Instead of forcing them to re-trace their steps using the back button. Using breadcrumbs is just one way of serving your online customers better and improving user experience. (for more information on how to improve customer service online check out 5 Tips to Improve Your Company's Customer Service on the Web by Brett Borgeson.)

As with everything, of course, implementing breadcrumbs on your site can have unintended consequences or cause user experience issues on the site.  Here’s an example: what if your site structure is so complex that your string of breadcrumbs exceed the width of the page layout and begin to wrap, thereby pushing other page elements out of their places and hence breaking your beautiful website design.

Following are a bunch of ideas and best practices for implementing breadcrumbs as part of your site navigation while hopefully avoiding pitfalls like the one mentioned above.

Simplify (shorten) Breadcrumb Links
Often times breadcrumbs duplicate the page titles word-for-word, causing width problems. Shortening the link titles is a great way to save space in the layout, but what do you do if you have thousands of pages?  Someone in your marketing, design and development team will have to decide what the new labels for each link will be. How long will it take that team to make a decision and fix the titles? If after thinking about it, shortening all the links is not an option for you, you’ll need another option.

Use Collapsible or Truncated BreadcrumbsThese types of breadcrumbs are friendly from both the site usability and SEO perspectives. The idea is that they will collapse when the length of the string exceed X number of symbols (including spaces). There are several ways how the breadcrumbs can be shortened:

  • Replace part of the link text with ellipsis. Keep the first and the last links as the full title; all other titles in between can consist of the first word or two, and the rest will be replaced with an ellipsis. If the link is hovered over, the link will expand; otherwise the full link will be collapsed to keep the breadcrumbs within the space limit. Osram.com uses breadcrumbs with an interaction where hovering over the trimmed link expands, making the last link become shorter.

Sample image of how to shorten breadcrumb strings

  • Replace the entire link text with ellipsis. The resulting breadcrumbs would include the topmost and lowermost page links, leaving the in between links to be replaced with ellipsis. You can see below this type of structure is being used on the Confluence site. Clicking on the ellipsis in the breadcrumbs reveals all the in between page links, and making the whole string  wrap into two lines.

Example of truncated text links

  • Show a fraction of the link text. The Perkin Elmer website has implemented a technique whereby front-end web technology like HTML5 is used to physically layer breadcrumbs one on top of the other.  Hovering over the truncated link triggers a site interaction that reveals the complete link underneath. When the link is expanded, the rest of the links gets pushed to the right. This site only implements the interaction on one link, but sites with deep navigation could certainly implement the layering of breadcrumbs on multiple levels.

Example of using Fromt End Technology to shorten breadcrumbs

Note: When using truncated breadcrumbs in any form, you can improve user experiences by adding tool tips to breadcrumb links so that hovering over them will reveal the full link text to the user without the need to click.

Not every site needs breadcrumbs. After all, I hardly think Hansel and Gretel would have been at risk of getting too lost in their village garden. But, if your site is more than two or three layers deep, breadcrumbs are definitely worth thinking about. At least, it can save your site visitors some frustration about re-finding information they saw on previous pages, and at best breadcrumbs will help with the overall user experience and increase the searchability of your website.  They might even prevent your visitors from being tumbled into a hot oven and eaten by a hungry witch.

Get Videos from The SMAC Stack - Social, Mobile, analytics and cloud