What are breadcrumbs and why do we need them?

When discussing a new web design project for a client recently, the question came up “What are breadcrumbs and why do we need them?”. So we thought we would write a short article on what breadcrumbs are and their benefits when used within a website.

What are breadcrumbs?

Breadcrumbs are a navigational technique displaying all visited pages leading from the home page to the currently viewed page. All pages are linked for easy backwards navigation. Typically placed near the top of a web page. So for example, if you look to the top of this page you will see the breadcrumb navigation menu that leads a path back to the homepage.

Breadcrumbs can vary in design and page location, but they all do pretty much the same thing.

Why do I need them?

Well, the most obvious reason would be for ease of navigation for your website’s user. When a user visits a page on your website, they can easily go back through any pages they visited to get to that page. This removes the need to use the main menu again and then have to find their way to the page that they wanted to get to (this is very handy for users, especially on e-commerce shops).

Benefits of having breadcrumbs on your site:

Breadcrumbs help direct the user, showing them the path they took to reach their current location. Some may say that the breadcrumb is a customised site map, reflecting the customer’s specific navigational behaviors.
If your website has a deep structure of nested pages & subpages and/or categories & subcategories, then breadcrumbs can often display more levels than the main menu accommodate.
Breadcrumbs allow users to quickly and easily skip back to a location they’ve recently visited.
You do not need to drastically change the design of your site to implement breadcrumbs. Breadcrumbs are only a single line of text.
Breadcrumbs can have SEO benefits. They can often help search engine spiders to navigate and index your website

Things to consider when implementing breadcrumbs:

Breadcrumbs should display the hierarchy of a website, not a running history of where the user has been.
Ensure that you include a hyperlink for every step in the breadcrumb, with the exception of the current page.
To make breadcrumbs intuitive and easy to follow, use clear symbols to separate between each step. Common differentiators are the right arrow ( > ), the pipe symbol ( | ) or a forward slash ( / ).
To ensure that the breadcrumbs get noticed and not overlooked, make sure that you place them to the top of the page and near the content.

So if you are concerned about abandonment rates and to help prevent consumer disorientation, you may want to think about implementing breadcrumbs on your website. They are a low-cost, high impact solution. If you would like to know more about breadcrumbs, or need some help implementing them on your website do not hesitate to get in touch.

Posted on 23rd July 2012 by Stuart in Web Design Tips