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.
Where am I?
Breadcrumbs keep the users informed about their whereabouts on the site starting their journey.
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.
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.
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.
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.
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.
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.
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.
There are three types of breadcrumbs you should know about, Location, Path and Attribute.
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.
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.
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.
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.
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.
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.
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.
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.
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 (⁄).
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 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.
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.
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.
Awesome!