On sites with numerous web pages, using breadcrumb navigation may significantly improve visitors’ ability to navigate a site. Breadcrumbs can improve usability by reducing the amount of actions a visitor must take to visit higher level web pages and they make it easier to find pages and sections of a site. Breadcrumbs are also a visual aid and they will provide users with a way of visualising their position within the hierarchy of a site. Therefore, breadcrumbs provide site visitors with contextual information when arriving on landing pages.
Breadcrumbs provide a means of secondary navigation that display the location of a user within a website. The term is derived from a children’s fairy tale in which breadcrumbs are used to mark a trail for going back home. Similar to the fairy tale, breadcrumbs in websites provide visitors a means for tracing their path back to the website page they landed on.
You will often see breadcrumbs in large sites with content that is organised in a hierarchical fashion. You will also find them in web applications that have multiple steps, where they have a functionality that has similarities to progress bars.
In their most simplistic format, breadcrumbs are horizontally displayed text links that are usually separated by the symbol “>”. This symbol services to indicate the level of a page relative to the adjacent links.
We will examine the usage of breadcrumbs and look at how you can use them on your own site.
Breadcrumb navigation can be used effectively on relatively large sites and sites with numerous pages that are hierarchically arranged. A great application for breadcrumbs is on ecommerce sites, where there are large numbers of products that are arranged in logical categories.
Breadcrumbs should not be used on sites that are single-level and that don’t have a logical grouping or hierarchy. A good way for determining if a site may benefit from the use of breadcrumbs is to generate a site map that represents the navigation architecture of the site and the perform an analysis to determine if breadcrumbs would enhance the ability of a user to navigate between and within categories.
Navigation with breadcrumbs should be viewed as an additional feature that does not replace good primary navigation. It is a feature that adds convenience, a secondary means of navigation that permits users to visualise their site location, and provides an alternative navigation mechanism.
Three primary types of breadcrumbs are used:
Breadcrumbs that are location based indicate to website visitors where they are located in the hierarchy of a site. They are often used in navigation structures that consist of multiple levels.
Breadcrumbs that are attribute based show the attributes associated with a particular page. They are often used on large ecommerce sites to show the attributes associated with a product.
For example, computer hardware > laptops > HP
This page will show laptops manufactured by HP.
Breadcrumbs that are path based display to site visitors the steps they have taken to get to a page. These types of breadcrumbs are dynamic since they show the pages that a visitor has been on prior to landing on their current page.
Here are several of the benefits associated with using breadcrumbs:
The primary use of breadcrumbs is to give site visitors a secondary way to navigate a site. When you give users a breadcrumb trail for site pages on large sites that are multi-level, they can more easily navigate to categories that are higher-level.
Rather than using the “back” button of a browser or the primary navigation of a site in order to return to high level pages, site visitors can make use of breadcrumbs, which will require a reduced number of clicks.
Since breadcrumbs are normally oriented horizontally and use plain styling, they will not occupy a
large amount of space on a page. Therefore, they have very little effect on content overload, and if used appropriately, have few negative aspects.
Breadcrumbs can be an effective way of enticing site visitors to look at additional website pages after viewing a landing page. For instance, if a visitor arrives on a site page via a search engine search, viewing a breadcrumb trail might entice that visitor to click on a higher level page to examine related topics. This will reduce the bounce rate for a site.