Breadcrumbs takes us back to the old fairy tale you might have read in you Kindergarten years. Two children Hansel and Gretel are forced out of their home in the woods when Hansel decides to lay a trail of breadcrumbs to track their way back home. Although the breadcrumbs get eaten by the pesky birds in the forest, they managed to leave an impression many years after the story was written.

In web design, breadcrumbs serve a similar purpose to what Hansel had in mind. Breadcrumbs serve as a secondary navigation within your website navigation to help the visitors rest assured from losing their way after going from one page to other. Like the old fairy tale, it helps show the user where they have landed and what was their last location.

Once breadcrumbs are integrated in the website’s hierarchal structure, users can go deep into product categories and navigate back to where they started without going on a “Back” button frenzy.

Breadcrumbs also serve as a graphical control element to help less experienced visitors navigate on ecommerce websites. For such websites the internal structure must be intelligently designed. With breadcrumbs it becomes imperative for online shopping platforms to not only provide ease of use to their visitors, but also prevent potential customers from abandoning their pages as result of getting lost.

Breadcrumb Navigation

Breadcrumbs are an effective means to guide visitors by determining their current location and the places they have visited on their way. They serve as a visual aid within the site’s hierarchy. But in terms of customer user experience, breadcrumbs help them answer to these 3 questions.

1. Where am I?

   Breadcrumbs keep the users informed about their whereabouts on the site starting their journey.

2. Where can I go?

   Its serves as an aid to users by suggesting them where to go next. Since the structure is already laid in front of them, the users no longer have to search and find categories or the site sections.

3. Should I go there?

   Breadcrumbs help promote better browsing and exhibit content value to the user. For instance, if a customer lands on a web page in search for a product, he might find others products that could prove to be a good match for his needs. This helps reduce the website’s bounce rate.

Benefits

Cuts Down Actions

In order to reach a higher level page, breadcrumbs help reduce the no. of actions required by the site visitor to get there. Visitor’s can simply use breadcrumbs to navigate back instead of incessantly using “Back” button or the website’s primary navigation.

Requires Minimal Space

It only takes a horizontal line filled with text links. This facilitates a healthy web design structure by taking minimal space and allowing other elements on the website to breathe. This also helps in getting better loading speeds for the website.

Every User Knows How to Operate Breadcrumbs

Its easy to understand and does not required any technical knowledge to interact with them. The text explains where the user was, is and can go. It’s a self explanatory navigation system universal to every user’s understanding.

When to Use Breadcrumbs?

Constructing a site map to display your website’s navigation structure is one of the best means to determine if your website can benefit from breadcrumbs. You can then analyze by trial and test if the breadcrumbs navigation is helping users through your website content or not.

• Breadcrumbs are best used when there is substantially bigger content that needs to be organized within categories and in a clean linear structure. In most ecommerce websites, the same criterion is used for grouping large variety of products into logical categories.
• Breadcrumbs must not be used for websites that are absent of any logical hierarchy for grouping of content or products.

When to Avoid Using Them

Where breadcrumbs are essential to the website’s structure, there are also instances where they should be avoided. When there is a website that consists single level structure without any clear indication of grouping then its in the best interests of the website to avoid addition of breadcrumbs. Like we mentioned above, a diagram or a sitemap can be quite helpful in determining the navigation architecture of the website.

Breadcrumbs are only useful if they are supported by the primary navigation. Breadcrumbs act as the muscles, while the primary navigation is the skeleton that hold them together. Without their complete locomotion the website hierarchy cannot function productively.

Types of Breadcrumbs

There are three types of breadcrumbs you should know about, Location, Path and Attribute.

1. Location Based

Location based breadcrumbs are used for exhibiting the website’s basic structure. They allow users to navigate websites that have multiple levels and comprehensive content trails. Such type of breadcrumbs are highly useful for visitors that land on a website from and external source and enter a deeper level of content. For example, if you are searching for a particular type of product and click on the search results shown by Google, you will find yourself in between many categories once you enter the web page. The breadcrumbs will help you determine your location and navigate to the possibilities in the hierarchal structure. Those websites which contain deep levels of content are much suited for location based breadcrumbs. An ideal example is eBay.

2. Path Based

These breadcrumbs are significant to a website’s history trail navigation. Path based breadcrumbs basically show every path visited by the user in order to reach their current location. Normally, such breadcrumb links are dynamically generated. While path based plugins can be helpful to users who spend great amount of time browsing on websites, they are mostly puzzling for majority users. Since most visitors browse on their own discretion, moving from one page to the other. The “Back” button in the browser solves most of their needs to change their path. This makes it useless particularly for those type of visitors who arrive on the site page that is already deep within the website.

3. Attribute Based

Ecommerce websites benefit the most from attribute based breadcrumbs. They help in listing the categories according to the specific page or product. Such type of breadcrumbs is extremely helpful in encouraging users to understand the relationship of products with each other. For instance, if website is selling Jeans, they will use attribute based breadcrumbs to help customers navigate from Regular fit, Slim fit or Skinny jeans.

Breadcrumb Navigation Best Practices

When designing a breadcrumb navigation, make sure to keep following things in mind. Breadcrumb navigation is an additional aid to improve your users’ experience on your site.

Avoid Duplicate Elements

If you are really upto adding breadcrumbs to your website, you might as well do them in the right manner. First off, you need to eliminate any duplicate elements that might come in between the trail of breadcrumbs. Sadly, I have seen this in many top ranking websites where the same pages fall into multiple categories or the levels of content shown. This not only confuses the visitor, but also reflects badly on your website.

SEO Compatibility

Breadcrumbs are not just navigation controls for your visitors, but also great assets to your SEO practice. You can use keywords within the breadcrumbs to enhance your rankings on search engines. It is recommended that you pick SEO friendly names for the categories of your website so search engines can easily list in the breadcrumbs in their results.

Use Breadcrumbs as an Alternative Navigation

While breadcrumbs are an excellent source for helping users navigate from one point to the other, it is important that they should be treated only as a secondary source. Breadcrumbs are an extra feature to enhance the usability of the visitor and in no condition can replace the primary navigation structure of the website.

Its Pointless to Link Current Page in Breadcrumb Navigation

Although showing the current location of the visitor on the breadcrumb trail is optional, you must make sure that the link shown in the linear structure is not tappable or clickable. It would only cause confusion for the visitor to show them the link of the page they are currently on.

Add Separators

Using separators is a great practice to give a clean and appreciable look to your breadcrumbs navigation. It prevents the text from coming too close if the user goes on deeper levels and creates dynamic structure that is easy to understand and interact with.

You can use the › sign for denoting the hierarchy since it is typically used in category formats such as Clothes › Shirts › Collar Shirts etc. Other symbols include arrows (→), right angle quotation marks (») and slashes (⁄).

Introduce the Size and Padding of Breadcrumbs

While designing the breadcrumbs, you must consider the padding and target size. The spacing between one breadcrumb to the other must be noticeable otherwise visitors might not be able to use them effectively. At the same time, make sure the size of the bread crumb does not compromise other elements around it so the primary navigation remains unaffected.

Never Draw Focus on the Design of Breadcrumbs more than its Required

Never use bright colors or fancy fonts to represent your breadcrumbs. Although the breadcrumb trail is important for the users after they land on the page, it should not be the first thing that comes into their notice. Adding glam to the breadcrumb navigation might cause the user to ignore the primary navigation of the website. This can distract the user from the real intent of entering the page and result in loss of a potential conversion for the store. Google is the best example when it comes to that. Having so many levels of searched content, it shows a simple breadcrumb navigation trail free from any fancy font or color so that users can easily locate and interact with the breadcrumbs.

Which Type Should Be Avoided?

It’s a disputed argument on whether to use location/attribute based breadcrumbs or path based breadcrumbs for showing site hierarchy. It’s a rule of thumb that breadcrumbs must not show the user’s history, but the site hierarchy. In our assessment and opinion, you probably shouldn’t bother with path based breadcrumbs anymore. For one, it doesn’t help with the UX since it can potentially cause confusion in visitors due to the lack of hierarchy shown between the different levels. That is why location and attribute based breadcrumbs are preferred over path based breadcrumbs.

Final Thoughts

Breadcrumbs are as important as any other element on a website. Now that technology has allowed storing greater amounts of data, faster internet speeds and even faster loading time, navigation can be shown more comprehensively on higher levels of hierarchy without breaking a sweat. With the help of breadcrumbs, your website will not only produce better user experience, but also generate greater sales from its customers. A smoother and unsophisticated navigation means easier access to product pages and hinder less checkout process.