Cillian Bracken Conway
19th Oct, 2020

thing user hate

Have you ever gotten lost on a website? It’s frustratingly common on a poorly designed website. You endlessly hammer the back button in the hopes that it’ll take you back to Google, and away from this site you’ve been unable to navigate. Not exactly a good experience for the user, and not something you want users to be doing on your site. But there is a solution (and an incredibly simple one at that), which many people don’t make use of – breadcrumbs! Breadcrumbs can be an important part of your website, guiding the user clearly where you want them to go. Here’s how we recommend using them at Vine Digital.

What are Breadcrumbs?


According to the Oxford Dictionary, breadcrumbs are “a hierarchical series of hyperlinks displayed at the top of a web page, indicating the page’s position in the overall structure of the website.”

A breadcrumb is a small, clickable text path, with individual elements separated by the “greater than” symbol (>).

By clicking on these individual elements, the user is able to track their journey all the way from the homepage and retrace their steps to wherever they’d like to go. This secondary navigation bar is the digital equivalent of the breadcrumbs that Hansel and Gretel leave a trail of in the fairytale, to help find their way back home.


Types of Breadcrumbs


There are different types of breadcrumbs, which fall into three common categories. Consider which type will make the most sense for your audience.

  • Hierarchy breadcrumbs: the most common form of breadcrumbs. They tell you where you are within the site’s structure, and how many steps it takes to return to the homepage. For example: Home > About Us > Our Thoughts > The Benefits of Breadcrumbs on a Website.
  • Attribute breadcrumbs are useful for eCommerce. These pop up when a user searches for a product with certain attributes, which in turn makes up the breadcrumb trail. For example: Home > Women’s Shoes > Heels > Size 9 > Black.
  • History breadcrumbs are exactly as the name suggests – they are ordered according to your activity on the site. As an alternative to your browser history bar, an example of this would look something like: Home > Previous Page > Previous Page > Current Page.


What are the Benefits of Breadcrumbs?


Breadcrumbs are easily added to your website’s design and bring a number of benefits:

  • It provides a better user experience. Users hate feeling lost; when faced with an unfamiliar location, people will often look for recognisable objects or landmarks. Whether you’re in the woods or on a website, this rings true. Breadcrumbs show people a way out – without needing to hit the back button!
  • It can boost your rankings. When you use breadcrumbs, you are telling Google exactly how your site is structured. When you add structured data, Google will sometimes use your breadcrumbs in the search results too, making your site all the more appealing to users.
  • It lowers bounce rates. It’s rare for the user to enter your site via the homepage; for the most part, users access your site through organic search, meaning any part of your site could be a starting point. If the page that they land on doesn’t meet their needs, would you rather have them hit the back button and go back to Google, or offer them a way back to the homepage, keeping them on your site?


Tips for Using Breadcrumbs on a Website


Like with any design element, there is a right and wrong way of doing it.

  • Only use breadcrumbs if your content and site structure make sense. Breadcrumb navigation is linear. If your lower-level pages are accessible from different landing pages, breadcrumbs will confuse users who keep accessing the same pages from different entry points. If your site is relatively simple, you don’t need breadcrumbs.
  • Don’t make your breadcrumbs too large. Breadcrumb navigation is meant to be a secondary navigation bar – you don’t want the user to mistake your breadcrumbs for the primary navigation bar (which you should make large, recognisable and prominent).
  • Even if the user accessed the page or landing page from search, include the full navigational path from the homepage. If you leave out certain levels, you risk confusing the user and the benefits of breadcrumbs aren’t as pertinent.
  • Go from high level to low. Your breadcrumb navigation should read left to right, with the leftmost link being your homepage, and the last link being the user’s current page.
  • Remain consistent with your breadcrumb titles and page titles, especially if you are targeting certain keywords. You should clearly link your breadcrumb titles to the page. Make it clear if the breadcrumb title doesn’t have a link, for example by differentiating through colour.
  • Keep it simple, clean and free of unnecessary. As an aid for the user, your breadcrumb navigation should be uncluttered and not noticed by the user unless they are looking for it.
  • Don’t forget about mobile! On mobile you have less space to work with, so you hardly want multiple lines of text taking up space on a user’s screen. Consider shortening the breadcrumb trail to the last level or two, and is a much better option than having a breadcrumb trail so tiny, the user is unable to tap it.

While breadcrumbs didn’t end up being too effective for Hansel and Gretel in their story, they are a fail proof way of guiding users on your site back home. Breadcrumb navigation is an effective tool if kept simple and aligned with design’s best practices. Know your users and their needs, consult with a design team that you trust, and apply the principles that work for you. You can always A/B test. If you need help adding breadcrumbs to your website, and would like to do so in a way that’s right for your business, speak to our design team at Vine Digital today.