Writing your e-commerce site’s history: with breadcrumbs

68% of e-commerce sites have got their history all wrong, in that is a user can’t trace their history when using their site. The question is, which e-commerce sites have got it right and how can your e-commerce site’s history keep up-to-date with user needs?


In a recent survey of e-commerce sites by web usability firm  Baymard Institute, it was discovered that 68% of e-commerce sites were getting their user needs regarding the way that a user could trace their own history completely wrong. To be more specific, 68% had failed to implement some way for users to view their history atop the site when shopping online; something we web designers call a breadcrumb.


Why breadcrumbs you ask? The metaphor behind the name isn’t a hard one to identify; it borrows itself from the age-old concept of leaving a trail of breadcrumbs to find one’s way back home. Digital breadcrumbs, like real bread crumbs, come in a number of different types; the two main ones being ‘historical’ and ‘hierarchical’.

A historical breadcrumb shows where on a site you have been. On the other hand a hierarchical shows whereabouts on the taxonomical hierarchy of the site you are. In their survey Baymard found that even among major retailers like H&M, only about half of the retailers are using both kinds of bread crumbs on their site; while 40 retailers were using none at all.


E-commerce sites using only one kind of breadcrumb pose problems for their users; either users cannot retrace their historical steps back through a site after making a wrong turn, take for example if a user was looking for a manual espresso maker and ended up on coffee machines in general and wanted to go back to their original search, or they were thinking about going for an upper end model, but then found they couldn’t afford it and would rather look at all that is on offer instead. Both of these problems make it difficult for a user to retrace their steps back through a site along the path that they came to their current webpage. This is especially frustrating if you are aiming to quickly buy a product on an e-commerce site with a large catalogue.

Which e-commerces sites got it right in the survey then? Mammoth retailers like Sears, Pack King and Amazon. If you trawl through the mass of products that Amazon has to offer, you will notice that they get it spot on. This comes as no surprise as it is no secret how notorious they are for obsessively testing the psychology of how page layout leads to purchases.


Why use breadcrumbs on your e-commerce site?

Well if big players like Amazon find that breadcrumbs helps them to haul their massive amount of wares then you can bet that it is a practice you should start getting to grips with. Here are some of the benefits of using breadcrumbs on your e-commerce site;



Breadcrumbs provide an additional means by which a user can navigate through a website. If a user lands on an internal page on a website from another source, breadcrumbs will allow them to see exactly where they are on the sites hierarchy; which further allows them to skip through the site with no hassle.


Swift navigation

Breadcrumbs allow a user to jump from one level of a site to another without having to click the ‘forward’ or ‘backward’ buttons on the browser.


Aesthetically pleasing

Not only do breadcrumbs enhance UX, but they also take up little room on the page. Therefore it is easy to implement breadcrumbs into the design of your site and provide a benefit for users.


Provides additional help

Some sites have extremely complex navigation. If a user finds themselves overwhelmed by a sites navigation then breadcrumbs become their means of finding out where they are going, or how to go back the way that they came.


When a user lands on an internal page of a website, then the odds are they are already on a page of interest. Breadcrumbs will provide information of additional pages along the same vein which may also interest the user without taking them back to square one.


Best ways to leave a trail

When using breadcrumbs on your site, it helps to remember a few practices to ensure that you are leaving a useful and attractive for a user navigating your e-commerce site; after all, breadcrumbs are there to direct a user in the easiest and clearest way possible.


Remember to keep the following in mind when implementing breadcrumbs on your site;


Use breadcrumbs at the top of a page

The most common and instinctual placement for breadcrumbs is within the top of a page. This allows users to find the breadcrumbs in an uncomplicated manner and make use of them accordingly.


Use breadcrumbs consistently

If you are going to use breadcrumbs, make sure that you use them across the entire of your website. Giving the users breadcrumbs on only a few of your pages and not others will only lead to frustration.


Breadcrumbs should degrade gracefully

Breadcrumbs should always begin on the home page and degrade to the page that the user is currently on. Doing so in this manner means that the breadcrumbs descend gracefully down the website’s taxonomic order.


Stylise breadcrumbs in an appropriate manner

You need to ensure that your breadcrumbs can be seen, yet are not the user’s focal point. You also want to make sure that your breadcrumbs merely support the main content of a page, rather than being part of it. Try to find a medium where your breadcrumbs are noticeable yet un-intruding.


Categorise Pages Clearly

If your e-commerce site has pages that fall into more than one category, then you may not want to use breadcrumbs. Trying to place a page in more than two categories will be likely to produce unclear breadcrumbs and only puzzle the user.


Single out the current page

Use a different style on the last item of a breadcrumb trail to establish that it is the current page that the user is viewing. There are many ways to do this, such as bold, coloured or emphasised fonts.


Do Not Make the Current Page a Link

There is no need to make the last item of a breadcrumb list a link as it is the page that is currently being viewed by a user. Creating a link here will only lead to user confusion, especially when they click on it and are not taken to a new page.


Don’t Use Breadcrumbs as a Page Heading

Using the last item of a breadcrumb list as the heading of a current page is ineffective. If you decide to use breadcrumbs do so with the addition of a page heading as well.


Don’t use breadcrumbs to Replace Primary Navigation

Breadcrumbs should only be used to support primary navigation, not as a replacement. You should always make sure that your provide the user with a means of primary navigation from which they can navigate a website before using breadcrumbs.

Start leaving your users a breadcrumb trail

As I said earlier, if e-commerce giants like Amazon are using breadcrumbs on their site, then it really can’t be a bad idea. By implementing breadcrumbs on your website properly not only does it help a user to navigate their history on a page, but it also helps them to find pages of similar interest on your site; which can only lead to higher user satisfaction (which is never a bad thing). So what are you waiting for? Start working on that breadcrumb trail and creating a path for your users to follow.


For more great web design articles, check out the Kalexiko blog.