[ad_1]
Similar to directory levels in an operating system, breadcrumbs are secondary navigational tools that help visiting users identify their current positions on websites, mobile applications, and even some offline systems.
In a nutshell, breadcrumbs can help both search engines and human users find their way around your site, but it’s not always clear how important they are to include in your design.
Technically, What Are Website Breadcrumbs?
The origin of this particular usage of breadcrumbs comes from an old fairy tale about a pair of siblings (aka Hansel and Gretel) dropping a trail of literal breadcrumbs to find their way back home after being left to fend for themselves in a scary forest at night.
Similar to those breadcrumbs, webpage breadcrumbs are used to illustrate a visitor’s journey back to a site’s homepage from whatever page they’re currently on. They provide a constant lifeline in case users ever get lost.
Typically, breadcrumb trails are positioned in a horizontal line just below the main navigation menu of a website, providing clickable links, clear whitespace, and text symbols to distinguish between the different steps along the trail.
Today, nearly all popular operating systems with a graphical user interface (GUI) use some form of directory trail or breadcrumb navigation to make it easier for users to navigate through directories, folders, and files.
Generally speaking, adding breadcrumbs to your site can be done in two main ways:
- By coding them manually or implementing a similar DIY approach
- By installing a third-party plugin like Yoast SEO and enabling breadcrumbs from within the tool
Though each approach has its pros and cons, many professional developers use tools and plugins to create and maintain breadcrumbs in their projects. At the end of the day, there’s no need to reinvent the wheel because most end users expect the same familiar format.
With that in mind, it’s paramount that your breadcrumb trails read from left to right, preferably with the leftmost link going to your site’s homepage and the rightmost link showing the current location of the user. Also, be sure that each link in the breadcrumb trail denotes a separate level in your site’s hierarchy, starting from the highest level down to the lowest.
When is Breadcrumb Navigation Helpful?
Since their arrival, breadcrumb trails have become an invaluable tool that affects multiple aspects of the online user experience (UX). In some ways, breadcrumbs have even transcended their original purpose by influencing how users perceive the quality of a given website—especially those that operate in the ecommerce space.
Below are some of the most prominent benefits of utilizing breadcrumb trails on websites and web applications.
Breadcrumbs improve the findability of pages on your website
Findability is a general practice in UX design that deals with how easy it is for users to find what they’re looking for on your website.
Implementing breadcrumbs can help solidify your site’s hierarchy in a way that looks more intuitive for your users, effectively nudging them to move in the right direction. By providing visual cues about their current location, you’re helping them locate the subsequent page they want to visit.
Breadcrumbs reduce your website’s bounce rate
If a user lands on or navigates to a page that does not match their initial intent, they’ll probably return to the homepage or leave the site to look for an answer elsewhere.
A breadcrumb trail encourages users to go up or down a level—or even skip between different levels in the breadcrumb structure—instead of abandoning the page.
Additionally, if you host a complex website with various sections, categories, and tags, breadcrumbs will make it easier for your readers to find what they’re looking for. This alone can vastly improve the UX and encourage your visitors to stay on your pages longer, thus decreasing your site’s bounce and drop-off rates.
Breadcrumbs reduce subscriber anxiety
In most cases, a breadcrumb trail is known to reduce anxiety among visitors because it removes the unknown and clearly outlines the steps behind any particular process. This includes navigating through subscription funnels, processing returns, and canceling a membership after a free trial expires.
As an example, ClickFunnels uses a very intuitive user interface for users who decide to cancel their subscriptions. Its design has three simple steps with clear instructions on how to get there and what to do without missing a beat.
Of course, this isn’t your most prevalent form of breadcrumb navigation, but it uses the base structure of the breadcrumb trail to inform existing customers of the steps and effort it takes to complete the form without encountering any hiccups or performing unwanted actions.
Once users enter the funnel, the breadcrumb trail will serve as a visual motivator to urge them to complete the form. This is a good practice both for attracting new users to sign up and for allowing users to unsubscribe without a fight. A bad UX on the way out can lead people to forget coming back, even if they were considering it.
Breadcrumbs are all pros and hardly any cons
Breadcrumbs take up very little space on a website and they can be implemented quickly (either by hand or with the help of a third-party plugin).
Also, contrary to other site elements such as hover buttons, headers, and hero images, the breadcrumb trail element has remained mostly identical over the last two decades—starting from its inception all the way up to the epoch of web2. It’s also likely to persist in web3 if things proceed to develop as expected.
Anyway, given that breadcrumbs haven’t changed their visual appearance for a long time, they are immediately recognizable and offer instant functionality to users. At the same time (given how their appearance hasn’t changed in forever), about a third of users don’t even pay attention to them anymore.
How Important are Breadcrumbs for Ecommerce Stores?
The average attention span of a human clocks in at around eight seconds these days, so if you can’t make a lasting impression on potential customers to buy your products in that amount of time, you can expect to lose sales to the competition.
That’s why it’s important to use breadcrumbs on your site, because they help shoppers find what they’re looking for quickly and without much friction. If shoppers ever feel like they’ve lost their way on your site, they can use the breadcrumb trail to identify where they are, where they want to go, and the quickest way to get there.
The most common breadcrumbs setup is to show the entire path starting with the homepage and ending with the main category level (e.g., eBay > Electronics > Video Games & Consoles > Video Games) while the product or current page appears as a separate heading (e.g., Mario Kart 8 – Deluxe – Nintendo Switch) on the opposite side of the page.
In this setup, even if a shopper somehow gets lost while navigating, they can easily go back to any relevant tier and continue their search from there.
One good example comes from the retail behemoth Walmart, which has a very clean and visually appealing UI that encourages shoppers to stay longer on the site, improving the chances of conversions and sales.
Overall, similarly good breadcrumb trail designs will follow the same design philosophy: be simple, easy on the eyes, barely visible when you’re not looking for it, and sufficiently prominent when you need it.
Conversely, the Nike website doesn’t do a great job of implementing breadcrumbs, often doing too much and too little at the same time. If shoppers end up clicking on a product by mistake or simply want to return to the same category of men’s shoes they came from, for example, they wouldn’t be able to do it because the breadcrumb trail is completely omitted from the site’s navigation panel.
In this case, the only way for a user to return to the previous category is to click the back arrow from the browser’s navigation panel, which can sometimes result in shoppers getting their saved product parameters jumbled up after refreshing or reloading the page.
On the main category page, the breadcrumbs are included but are barely identifiable. Users could easily miss the breadcrumbs if they’re not actively searching for them across the entirety of the page because they have a similar look to the rest of the page and there are only two navigation items.
Shopping on the Nike website is objectively harder than finding what you need on Walmart or the eBay ecommerce store, for example. Then again, Nike is perhaps a unique case in that it offers comprehensive customizability in terms of product colors, sizes, brands, and designer signatures, so its omission of breadcrumbs could be justifiable in the long run.
Tips For Using Website Breadcrumbs
Implementing breadcrumbs on your site doesn’t require a Ph.D. thesis, yet so many websites get it wrong. Here are seven tips on how to use breadcrumbs so you can improve your prospects of converting leads into customers, reduce your site’s bounce rate, and serve up a better UI to your users.
1. Use “>” to separate breadcrumbs
When it comes to visual navigation, it’s best to keep things as simple as possible to reduce the chances of missed conversions due to customer confusion. Since almost everyone understands the “>” symbol, it’s a best practice to use it as your main separator in the breadcrumb trail.
This symbol is convenient, it’s easy to spot, and it provides a clear separation between the different levels in the hierarchy of your site—making it the perfect choice for achieving a consistent look and feel across your pages without sacrificing the intended function.
2. Avoid making your breadcrumb design too large or too small
Breadcrumbs are considered your site’s secondary navigational tool, which is why you should always make them smaller and keep them separated from the main navigation in the UI.
However, keep in mind that making them too small can be troublesome, as breadcrumbs that disappear under the weight, size, and typeface of other elements on the page are not very useful.
3. Include the entire navigational path in your breadcrumb trail
It’s more than likely that some searchers will land on your pages through search as opposed to using bookmarks or typing your site’s URL in their browser’s address bar and starting their journey from your homepage.
In other words, omitting certain levels out of your breadcrumb navigation can have detrimental effects on the UX and can often leave your visitors confused as to where they should go next or why they landed on a given page in the first place.
To avoid this, it’s a good idea to include the full navigational path in your breadcrumbs, including your homepage (icon or text) and the current location of a visitor that should be non-clickable, highlighted, or grayed out.
4. Pay attention to consistency in your breadcrumb titles
In terms of building a satisfactory UX, it’s paramount to keep your breadcrumb titles consistent with your page titles across your site. This serves two main purposes: first, it reduces the probability of confusing your readers. Second, it offers an additional spot to plant keywords on your site in order to improve its visibility in search engines.
Additionally, your breadcrumb titles should always link to the corresponding pages with the same name, a feature that most plugins should enable by default. If it jibes well with your UI design, you can even stylize your breadcrumb links by underlining the titles that serve as links while leaving titles without links as plain text.
5. Pick the type of breadcrumbs you’d like to use
In general, there are three types of breadcrumbs: attribute-based, history-based, and location-based.
- Attribute-based breadcrumbs, which use categories and tags
- History-based breadcrumbs, which basically double as the back button in your browser’s navigation panel
- Location-based breadcrumbs, which pinpoint the user’s exact location relative to the site’s hierarchy from the top (the homepage) to bottom (the current location)
If your business offers a wide selection of products with multiple sizes, colors, and styles (like Nike), then attribute-based breadcrumbs can be a good choice. These breadcrumbs are often helpful in narrowing down choices so that visitors can jump between pages and find what they want sooner rather than later.
Alternatively, history-based breadcrumbs only allow one level of movement and don’t signal much beyond that, so these can be helpful for sites on the smaller side, such as those with only two or three categories and a limited number of pages.
Finally, location-based breadcrumbs offer the most information to users, they’re relatively inconspicuous, and they are so lightweight that they barely have any effect on the site’s performance and speed.
Of course, history-based and attribute-based breadcrumbs are also lightweight, but they don’t relay as much information as location-based breadcrumbs—so they’re usually less helpful to users who aren’t as tech-savvy as their more experienced peers.
6. Adapt to your audience
Often, knowing your audience is more important than following the wisdom of the crowd—especially if the wisdom is archaic and the crowd has a bad track record when it comes to best practices in UI design.
One of the most prominent practices in website navigation is to place the breadcrumb trail at the top-left side of the page, just below the main navigation menu. However, Apple defies this practice by placing its breadcrumbs at the bottom of its website, with a design that’s almost indistinguishable from the other text in the footer.
Granted, Apple’s core audience is most likely programmed to know where to find what it’s looking for already, so most users would only need to use the breadcrumb trail in extreme cases. A second possibility is that most Apple products and programs operate via single-step navigation that only goes forward and backward anyway, so the breadcrumb trail is somewhat redundant.
If you’re unsure how your audience members behave when browsing your pages, you can implement A/B testing to capture their behavior and analyze their movements throughout your site. For example, you can track their time spent on a particular page, how often they click the back button, and how many steps they take before clicking the call to action (CTA) button or stopping to read a blog post.
7. Decide whether it makes sense for your site to use breadcrumb navigation in the first place
Implementing breadcrumb navigation is only practical if it provides true utility. For example, if you have low-level pages that can be accessed from more than one landing page, pairing this type of structure with breadcrumbs can potentially confuse your visitors and throw them off the trail. At the end of the day, offering access to the same page from different sources introduces a new level of complexity that can’t always be solved with the implementation of breadcrumbs alone.
Additionally, if you have a small website, you probably don’t need to worry about breadcrumb navigation. It’s nice to have in this case, but it’s going to be way more helpful to implement breadcrumbs for sites that feature lots of content spread across hundreds, if not thousands of different pages.
How Do You Set Up Breadcrumbs on Your Site?
There are two ways to add breadcrumb navigation to your site:
- If you know HTML, CSS, and have a good understanding of working with structured data, you can code it yourself according to your own specifications
- By using a tool like Yoast for WordPress, or by utilizing the many SEO tools offered by providers like Wix and Shopify if you decide to build your site with one of them
How to create and implement breadcrumbs in a DIY fashion
Breadcrumb navigation is very easy to create using HTML to define it and CSS code to make the trail look visually appealing. Here’s a basic prototype:
<nav>
<ul>
<li><a href=”#Homepage-URL”>Homepage</a></li>
<li><a href=”#First-level page-URL”>First-level page</a></li>
<li><a href=”#Second-level page-URL”>Second-level page</a></li>
<li>Current Location</li>
</ul>
<nav>
The links are organized using unordered list (<ul>) elements, while each item in the list (<li>) features a single link in the breadcrumb trail up until it reaches the current location of the user. You can also wrap the code in an HTML navigation (<nav>) element to have better maneuverability later in the integration phase of the project.
Next, you can pair the HTML with the following CSS code:
ul {list-style: none;}
ul li {display: inline;}
ul li+li:before {
content: “>”;
padding: 12px;
}
ul li a {text-decoration: none;}
ul li a:hover {text-decoration: underline;}
ul {
color: #96E9C6;
font-family: “Nunito Sans”;
font-weight: 300;
}
ul li a {color: #83C0C1;}
ul li a:visited {color: #6C22A6;}
ul li+li:before {color: #6962AD;}
This cozy combination of HTML and CSS code should provide you with a working breadcrumb navigation prototype that you can implement right away. You can also experiment with commenting out certain sections of the code to achieve a desirable visual look that works well within the general style of your website.
How to use Yoast SEO to add breadcrumbs
Yoast SEO is a multi-purpose WordPress plugin that features breadcrumb navigation as one of its built-in functionalities. Most popular WordPress themes support integration with the Yoast plugin, but for those that don’t, you should contact the theme developers and explain that you want to use Yoast SEO to add breadcrumb navigation.
After ensuring that your theme supports Yoast, add the plugin to your WordPress site and make sure that you’re not using other SEO plugins that would cause conflicts.
Next, navigate to the left-hand side of the menu and click on Yoast SEO.
After that, click on Settings.
Then, expand the Advanced menu from the plugin’s main menu.
Once the secondary menu expands, click on Breadcrumbs.
Scroll to the bottom of the page, toggle the button next to Enable breadcrumbs for your theme, and click Save Changes.
Barring other conflicts with the WordPress theme, your breadcrumb trail should now show up in the intended spot below the main navigation menu on your pages. If not, double-check your other plugins for possible interference with the Yoast SEO plugin, or contact your theme’s developer for advice on how to sort out the problem for good.
Conclusion
By themselves, breadcrumbs probably won’t help your visitors very much unless the rest of your website follows the best practices in website design.
If that’s the case, then adding breadcrumbs can be a super practical and lightweight way to improve the overall user experience on your site. Just be sure to build a strong foundation first, and then add breadcrumb navigation to an already stable UI.
To learn more about putting together a finely-tuned website, check out our recent guide on the best website builders, as well as our take on the best SEO tools on the market today.
[ad_2]
