While navigating through websites, breadcrumbs are one way to ensure that you (or your users) can browse and explore easily. Breadcrumbs, or breadcrumb navigation links, are a set of hyperlinks that function as an extra navigation feature for websites.
Breadcrumbs positively effect usability by minimizing the number of actions a website user needs to take to get into high-level pages, which enhances ease of navigation. They also provide indication as to the exact location of the visitor within the website’s hierarchy, providing context and, essentially, a virtual mini map of the site.
What are Breadcrumbs?
A “breadcrumb” is a kind of alternate navigation method which helps to reveal the visitor’s location within a website or Web app.
We often find breadcrumbs on websites that have an extensive catalogue of information organized in a hierarchical manner. We can also see breadcrumbs in Web apps that have a vast quantity of content, or multiple functionalities, in which case they function just like a progress bar.
Visually, breadcrumbs are text links separated by symbols (most commonly “>”) that indicate the depth or level of associated pages.
When are Breadcrumbs Useful?
Breadcrumbs are becoming more and more common for navigating websites with extensive content. To explain their value we’ll look at e-commerce websites, as breadcrumbs are most commonly associated with this site genre.
Breadcrumbs are virtually a must when it comes to E-commerce websites since these sites require a vast amount of categorically organized content that can be browsed easily. Even if a site has the best products on the market, if the organization of the content is difficult to understand, or difficult to browse, the website will be unable to contend with the multitude of other more user friendly competitors. One way to stay current and competitive in this market is by simplifying navigation, and breadcrumbs are the easiest way to promote simple navigation across hundreds of pages of products. E-commerce websites are the best example of the value of breadcrumbs, but any website that displays a high volume of content over many pages could benefit from using this system as well.
So how do you know if using breadcrumbs is right for your website? Essentially, breadcrumbs won’t be useful for single level sites or sites that have minimal content. If you’re unsure, a great way to determine if your website could benefit from implementing breadcrumbs is to create a detailed outline of the sitemap for your entire website. This will help you visually ascertain the depth, hierarchy and number of pages that you’re working with. It’s likely though that if you need to create a sitemap to help you keep track of all the content on your site, implementing breadcrumbs may be a good decision.
However, keep in mind that if the content on your pages is so rich that single categories (used to name your breadcrumbs) cannot easily describe the content, breadcrumbs may actually add to the confusion and decrease usability, in which case you may want to use tags instead of, or along with, breadcrumbs.
Also remember that this system is in no way a replacement for the main navigation on your site so ensure that you have a well-designed navigation bar on your homepage. Breadcrumbs are simply a helpful additional feature for browsing and exploring. It’s an alternate navigation scheme that allows users to keep track of where they are and where they’ve already been while browsing your site.
Advantages of Breadcrumbs
User Friendliness
Promotes easy navigation throughout the website to make browsing easier
User Efficiency
Rather than using the browser’s back button to sift through pages they’ve visited, users can easily reach their destination page, and toggle between pages, in just one simple click.
Builds Interest
When a user lands on a page that they’ve visited before, breadcrumbs can be useful in that they may provide links to related pages, which can save time and be very useful for visitors.
Increases Site Traffic
Search engines love links, and since breadcrumbs are essentially just internal links they can help increase your search engine ratings, which means more traffic! Furthermore, if someone reaches your site from a search engine, seeing the list of breadcrumbs may encourage them to visit high-level pages and do more browsing than they normally would without access to this feature.
Breadcrumbs are easy!
Setting up breadcrumbs on your website is incredibly easy and takes up very little bandwidth.
Decrease Bounces
Since Breadcrumbs usually provide a far more detailed navigation system then your primary one, they improve the health of your website and reduce your bounce rates. With such flexibility and easy browsing, few people would choose to navigate away after viewing only one page.
Preparing and Implementing Breadcrumbs
When creating breadcrumb navigation, there are a few simple but imperative guidelines that must be considered. Let’s take a look at these guidelines in detail:
Separating Breadcrumbs
The most commonly used and recognized symbol for link separation in breadcrumb trails is the “greater than” symbol (>). Usually, the > symbol is used to indicate hierarchy, which is the format of Parent category > Child category.
Other symbols can be used as well, such as arrows and slashes. Depending on the website and the type of breadcrumb used, these are all viable options.
Placement
Breadcrumbs should always be located on the first half of the page where they will be easily noted. You want your breadcrumbs to stand out enough that users notice and take advantage of this feature.
Size matters
Implementing a sizeable Breadcrumbs bar will negatively affect your websites structure and aesthetics; therefore you should always opt for a smaller, less prominent bar.
Types of Breadcrumbs
Before you implement breadcrumbs on your site, you should know that there are two types of breadcrumb links:
Location-based Breadcrumb Links
Also known as a “history trail,” the intention of path-based breadcrumb links is to show visitors the steps they have taken to reach the current page. This type of breadcrumb link navigation usually looks something like this:
About Us > Services > Contacts > News > Services > Company
Location breadcrumbs are static, starting with the homepage URL and including all of the main pages in the website hierarchy. Each of the pages is hyperlinked, providing the opportunity to toggle back to any previously viewed pages or any higher-level pages. Not only are these breadcrumbs useful to site visitors, they are also what search engines use to determine the subject and scope of the site and are important for site rankings.
Attribute-Based Breadcrumb Links
Attribute breadcrumbs are a more specified breed that tracks selected items on the webpages a visitor has viewed. This allows users to see even more data related to their browsing history, and further increases usability.
In order to differentiate between location and attribute breadcrumbs, look for a close (x) button near the text, as shown below:
The Downfalls
There are a couple of noteworthy downfalls when it comes to breadcrumbs, so it is really worth considering if they are right for you and your website before implementing this system.
- Visitors who arrive at the site through a Google search may find this navigation bar confusing as it shows a history of pages visited that the user has not actually landed on yet.
- This type of Breadcrumb navigation also increases the chances of duplicate content listing within search engines like Google. Attribute-based breadcrumb links can cause content duplication issues on search engine listing, but SEO professionals can usually easily manage this issue.
Conclusion
Breadcrumbs can be a great way to ensure that you receive positive feedback from both search engines and visitors. Make sure you weigh the pros and cons of the system to ascertain if it’s the right navigation system for you, and if it is, remember that clear and simple breadcrumb navigation is the secret to success! Happy navigating!
