Breadcrumbs Navigation | A Webmasters Beginners Guide

Website Breadcrumbs Navigation (or breadcrumb trail) is a secondary navigation system that shows a user’s location in a site or web app. The term came from the Hansel and Gretel fairy tales. After all, in which the main characters create a trail of breadcrumbs in order to track back to their house.

Breadcrumbs in real-world applications offer users a  suitable way especially, to trace the path back to their original landing point. A “breadcrumb” (“breadcrumb trail”) is a type of secondary navigation scheme. It reveals the user’s location on a website or Web application.

Same as in fairy tales, visitors need to know their location in the site’s hierarchical structure. Of course, in order to possibly browse to a higher level in the hierarchy. The thing that makes navigation difficult to work within Web design is that it can be so versatile.

What Are Breadcrumbs Navigation Trails?

By definition, Website Breadcrumbs Navigation Trails are a secondary navigation system that shows a user’s location in a site or web app. Whereby, they serve as an effective visual aid, indicating the location of the user within the site’s hierarchy. Navigation can be just simple or complex.

For instance, a few main pages or a multi-level architecture; one set of content for logged-in users and another for logged-out users; and so on. Because navigation can vary so much between websites, there are no set guidelines or how-to for organizing navigation.

Likewise, this property makes website breadcrumbs navigation a great source of contextual information for users and helps them to find answers.

Consider the following questions:

• Where am I? Breadcrumbs inform visitors of their location in relation to the entire site hierarchy.
• Where can I go? Breadcrumbs improve the findability of site sections and pages. The structure of the site is more easily understood when it is laid out in a breadcrumb than if it is put into a menu.
• Should I go there? Breadcrumbs communicate content value and encourage browsing (e.g. e-commerce site visitors might land on a product page, the product might not be a good match, but the visitor might want to view other products from the same category). This, in turn, reduces the overall site bounce rate.

You can usually find breadcrumbs on websites that have a large amount of content organized in a hierarchical manner. By the same token, you also see them in Web applications that have more than one step, where they function similar to a progress bar.

What are the Benefits of using BreadCrumbs?

Always remember, designing navigation is an art in itself, and designers become better at it with experience. It’s all about using good information architecture: “the art of expressing a model or concept of information used in activities that require explicit details of complex systems.”

Basically, website breadcrumbs navigation trails can be a great way to entice first-time visitors. To peruse a website after viewing the landing page. For example, say a user arrives on a page through a Google search. Here are just some of the benefits of using a breadcrumb trail.

Convenient For Users

In terms of usability, breadcrumbs reduce the number of actions a site visitor needs to take. Above all, in order to get to a higher-level page. Instead of using the browser’s “Back” button or the site’s primary navigation to return to a higher-level page, visitors can use the breadcrumbs.

Giving users a secondary means of navigating a website. By offering a breadcrumb trail for all pages on a large multi-level website, users navigate to higher-level categories more easily.

Reduces Clicks/Actions 

This helps to return to higher-level pages. Instead of using the browser’s “Back” button or the website’s primary navigation to return to a higher-level page. Users now use the breadcrumbs with a fewer number of clicks.

Doesn’t Hog Screen Space

A compact mechanism not taking much of the page space as it is just the text with links in a horizontal line. Because they typically orient horizontally and style plainly. Breadcrumb trails don’t take up a lot of space on the page. The benefit is that they have little to no negative impact in terms of content overload. Hence, they outweigh any negatives.

Reduces Bounce Rates

Breadcrumb trails can be a great way to entice first-time visitors. To peruse a website after viewing the landing page. For example, say a user arrives on a page through a Google search. Thus, seeing a breadcrumb trail tempts that user to click to higher-level pages to view incidental topics of interest.

This, in turn, reduces the overall website bounce rate. People might overlook this small design element, but they never misinterpret breadcrumb trails or have trouble operating them.

When Should You Use Breadcrumbs?

In the first place, use website breadcrumbs navigation trails for large websites and websites that have vertical pages. An excellent scenario is e-commerce websites. In which a large variety of products group into logical categories. However, don’t use breadcrumbs for single-level websites that have no logical ranking or grouping.

Secondly, a great way to determine a website benefits from breadcrumb navigation is to construct a sitemap. Or a diagram representing the website’s navigation architecture. Hence, analyze whether breadcrumbs improve the user’s ability. Especially, to navigate within and between categories.

Lastly, regard Breadcrumb navigation as an extra feature Rather than not, replace effective primary navigation menus. It’s a convenience feature. A secondary navigation scheme that allows users to establish where they are. Also, an alternative way to navigate around your website.

How is Primary & Secondary Navigation different?

In general, most websites, especially those with a lot of content or functionality, need navigation menus. But as a website grows in complexity, guiding users to that content and functionality shouldn’t be the job of any one menu.

All of that content just doesn’t always fit in one large menu, no matter how organized it may be. While many websites need more than two, all websites have at least two main menus: primary and secondary. Here are the notable key difference;

Primary Navigation:

This one stands for the content that most users are interested in. But the importance is relative; the type of content linked from the primary navigation on one website may be the same kind. In particular, linked from the secondary navigation on another. For example, general information about the company or person.

Secondary Navigation:

This is for content that is of secondary interest to the user. Any content that does not serve the primary goal of the website but that users might still want would go here. For many blogs, this would include links for “About us,” “Contribute,” “Advertise” and so on.

For other websites, the links might be for the client area, FAQs & Answers, or even the Help Page. You can read more about Understanding Site Navigation: Key Terms in detail.

The General Types of Breadcrumbs

As can be seen, the term breadcrumbs come from the Hansel and Gretel fairy tale. Particularly, in which the two title children drop breadcrumbs to form a trail back to their home.

Just like in the tale, breadcrumbs in real-world applications offer users a way to trace the path back to their original landing point. Here are the 3 types of breadcrumbs;

1. Location-based:

These breadcrumbs show the user where they are in the website’s hierarchy. They are for navigation schemes that have multiple levels (usually more than two levels). From Site Point, each text link is for a page. That is one level higher than the one on its right.

2. Attribute-based:

These breadcrumbs trails display the attributes of a particular page. For example, in Newegg, they show the attributes of the items displayed on a particular page.

3. Path-based:

The breadcrumb trails show users the steps to take so as to arrive at a particular page. They are dynamic in that; they display the pages the user visits before arriving on the current page. When designing breadcrumb navigation, make sure to keep the following things in mind. Breadcrumb navigation is an additional aid to improve your users’ experience on your site.

Website Breadcrumbs Navigation Best Practices

Breadcrumb navigation should be regarded as an extra feature and shouldn’t replace effective primary navigation menus. According to Google, a breadcrumb trail helps in determining the page’s position on your site’s hierarchy. It is simply defined as a single line of text which marks the path from the indicated page back to the homepage.

Breadcrumbs are a great way for users to identify your site’s structure. This is also true as search engines crawl your site. Don’t believe those people who say that breadcrumbs are not an important part of your site. You would be a terrible webmaster for thinking so, believe me.

Not only do breadcrumbs help in structuring your website properly, but they can also help you appear in the Google search results better. Keep in mind that it’s a convenience feature; a secondary navigation scheme; an alternative way to navigate around your website.

Don’t link the current page in the breadcrumb navigation

The last item in the breadcrumb trail (current user’s location) is optional — if you want to display it, make sure that it’s not clickable or tappable. Since users are already on the page, it does not make any sense to add a link of the current page to the breadcrumb navigation.

Use separators

The most recognizable symbol for separating links in breadcrumb trails is the “greater than” symbol (>). Typically, the > sign is used to denote hierarchy, as in the format of Parent category > Child category.

Other symbols used are arrows pointing to the right (→), right angle quotation marks (»), and slashes (/). The choice depends on the aesthetics of the site and the type of breadcrumb used.

Select Size & Padding

Think carefully about target size and padding when designing. There should be enough gap between different breadcrumb levels. Otherwise, people might find it hard to use them, especially on a mobile interface. But at the same time, you don’t want your breadcrumbs to dominate the page, thus they should be less prominent than the primary navigation menu.

Use the Breadcrumbs in Website Design fairly

Using breadcrumb trails is a fairly straightforward affair, and there are only a few guidelines to consider before deciding to implement them on a website. Having said that, web applications, have a function similar to a progress bar.

In the simplest form, breadcrumbs horizontally arrange text with links that have “greater than” symbol (>). The symbol indicates the level of that page relative to the page links beside it. As an example, websites with a lot of pages use breadcrumbs navigation greatly to enhances the way users find their way around.

Reduce the Number of Call to Action (CTA)

In terms of usability, breadcrumbs reduce the number of actions a website visitor needs to take. In order to get to a higher-level page. It makes it possible to see website sections and pages. These breadcrumbs are an effective visual aid.

In the end, that indicates the location of the user within the website’s hierarchy. To make it a great source of contextual information for landing pages. But, perhaps, the most difficult part about navigation on the Web is organizing and designing it. After all, coding can be relatively easy.

Is organizing Breadcrumbs Navigation Trails easy?

Of course, Yes! Whereas, the first job in organizing navigation is to organize the content. Only after the content has been organized can you determine what is primary and what is secondary. And then again, you can determine the location and navigational structure of any remaining content.

Eventually, content that fits neither the primary nor secondary navigation can go in other menus. Whether a sub-menu, footer menu, sidebar widget, or somewhere else. Not to suggest that primary navigation cannot go in these areas of the page.

Recommended Reading:

• Designing a language switch: Examples and best practices
• Improving the UX of Progress Indicators and Feedback Notifications
• How to add business value with UI/UX + our own experience
• A Quick Review on Optimizing Breadcrumbs for SEO

One thing is for sure, there are many instances where primary navigation is best suited to the sidebar or in drop-downs. Also, ask yourself whether: Is navigation even needed beyond the primary menu? If a secondary menu is needed, then why and what’s the best way to implement it?

No matter how organized the content is if there’s a lot of it and thus a need for a more complex navigational structure, then distinguishing between primary and secondary content can be daunting. Fortunately, there’s a great method that designers can try: card sorting.

How are Website Navigation Cards sorted?

Obviously, Website Navigation Card Sorting is commonly used in information architecture and can help Web designers answer all of the above questions.

Not to mention, even before the design phase begins. Basically, card sorting helps website designers organize navigation. Especially, for the more complex navigation, in the most efficient way possible. Consider the following useful questions while using card sorting methods;

1. What’s the best way to organize content?
2. How should the navigation be labeled and grouped and positioned?
3. How will people use navigation?

Also, card sorting can be used to determine menus and sub-menus, the wording on them, and even their design and structure. There are 4 types of card sorting involved include;

Open Card Sorting:

Users are asked to organize cards into groups that they feel are appropriate to them. They are then asked to name each of the groups they have created with a label that best describes that group. This method is commonly used for new/existing information architecture. Or organizing products on a site or when starting to create a new IA from scratch.

Closed Card Sorting:

Users are provided with both the content cards as well as the category cards and asked to place the cards in these given categories. This method is normally used when adding new content to an existing site or gaining a second round of insights after an open card sort. Card sorting can also be either remote or face to face:

Remote Card Sorting:

When conducting a remote card sorting session a user will work independently via their own computers to sort the cards that are provided through an online software tool. There are a number of online software tools available on the market today. Above all, which allows you to set up and distribute to as many users as you require for the test.

Some of the most common online software tools are Optimal Sort, Simple Card Sort, Usabilitest, WebSort, and UserZoom. These online software tools provide you with a number of ways to analyze the data. You can read and learn more about Online Card Sorting: Even Better Than the Real Thing in detail.

Face To Face Card Sorting:

Face-to-face card sorting sessions are in person with an observer present. Users are provided with a set of cards to move around and asked to talk through their thoughts and reasoning behind their decisions.

The observer has the opportunity to clarify any observations they are unsure of to gain a better insight of why the user has made those choices.

Takeaway,

All that breadcrumbs do is make it easier for visitors to move around the site, assuming its content and overall structure make sense. It’s one of the few simple things that enhances the website experience and fosters user comfort. And that’s a sufficient contribution for something that takes up only one line in the design.

For instance, Card Sorting is a quick, simple and inexpensive way to gather insights about your users and their thoughts on groupings, categories, etc. This method works well at the beginning of projects if you are working on a redesign of a site and as a way of added new content to a site. But, will not give you all the answers that you are looking for.

However, when using card sorting along with other UX methods such as usability testing it can help you to find out some useful insights about users to get new projects up and running.

Related Sources:

1. Social Media Profiling: What Does It Entail?
2. The Importance of Social Media in Business
3. Why Is Social Media Engagement So Important?
4. What Does Social Media Listening Mean In Business?
5. What Are The Social Media Marketing (SMM) Benefits?

Finally, I hope the above guide on Website Breadcrumbs Navigation Trails was useful in your preparation for your brand, business, or even product site ranking.

However, if you’ll have additional information, contributions, or even suggestions that demand our attention, please Contact Us for more support. By the same token, you can share your thoughts in our comments section below this blog.