Peter Morville’s Facets of the User Experience (UX). Used with permission.
“Breadcrumb links are not good for the user experience!” proclaim members of the website design/development team from a colleague’s company, with arms folded and glares that might melt a few icebergs.
I admit that situations like this one are difficult, because: (A) the design/development team is clearly not interested in discussing the topic, and (B) the design/development team might have a different perception of user experience (UX) than I have.
I prefer Peter Morville’s User Experience Honeycomb because it does not discount the importance of findability. His UX Honeycomb also includes the concept of delight. Desirable content can also delight users.
But somehow, the perception of user experience has been misinterpreted, I feel, to exclude items that are very important to users. People can’t use what they can’t find. Desirable content should also be trustworthy and credible. Every item in an interface that does not support consistent clickability (or tappability) has a negative impact on trust.
And that brings me back to the topic of breadcrumb links. Usability and user experience professionals have debated their usage for many years. What follows is my contribution to this debate.
What Are Breadcrumb Links?
Breadcrumb links, or breadcrumb navigation, are a set of contextual links that function as navigation aid for websites. There are three different types of breadcrumb links:
Location-Based Breadcrumb Links
These are a textual representation of a website’s structure. They help site visitors understand and navigate your website’s hierarchy. A location-based breadcrumb trail should begin with a link to the website’s home page and end with the current page. The last item in the breadcrumb trail should not be a clickable or tappable link.
Figure 1: Location-based breadcrumb links are particularly useful as supplemental navigation.They can communicate to both humans (users) and technology (search engines) what page content is about.
The benefit of using location-based breadcrumb links is that they encourage browsing and can reduce a page’s bounce rate. In an e-commerce site, for example, users might land on a product page. The product might not be a good match, and users might want to view other products (for comparison or additional purchases). Users can use breadcrumb links to flawlessly traverse up the site hierarchy to view more product options.
Therefore, this type of breadcrumb navigation supports the usability, findability, accessibility, and credibility facets of the user experience.
Path-Based Breadcrumb Links
Also known as a “history trail,” these show users the steps they have taken to arrive at a given page. This type of breadcrumb link is typically dynamically generated. As many people already know, usability professionals do not recommend their usage for a number of reasons:
They duplicate the functionality offered by the Back button in the browser.
They can confuse users who might navigate to the wrong sections of a website.
A history trail is not helpful for users who arrive directly at a web page deep within a website’s hierarchy, such as a product page. (For example, a user might arrive at a product page via Google.)
They can cause duplicate content delivery to web search engines. Delivering duplicate content to search engines lessens the number of pages that are available to rank.
Below is an example of path-based breadcrumb links that clearly show that the user is lost within a website (note: links in the following breadcrumb trail are only shown for visual emphasis and aren’t functional).
About Us > Press & Media > News > Staff Home Page > A-Z Index > Research Centers > Research > Health
Attribute-Based Breadcrumb Links
Commonly used on e-commerce websites that implement faceted classification, these breadcrumb links display the attributes of a particular item on a web page. According to the Software Usability Research Laboratory at Wichita State University, attribute-based breadcrumb links display meta information showing many different trails, representing several possible paths to reach the page.
Attribute-based breadcrumb links can also cause problems with duplicate content delivery to web search engines. To manage this, I highly recommend working with a qualified technical search engine optimization (SEO) specialist to guide you through various options.
Figure 2: Both location-based and attribution-based breadcrumb links can appear on the same page.
In Figure 2, notice how the user experience designer paid close attention to formatting. Clickability (and/or tappability) is consistently communicated and implemented, and symbols are used to differentiate the different breadcrumb types.
The location-based breadcrumb links have different visited and unvisited link colors. Individual elements are separated with a less-than (<) sign. The attribution-based breadcrumb text is not clickable, but they can be removed from page content by clicking on the X against the blue background. Individual attribution elements are separated with a vertical pipe.
Benefits Of Breadcrumb Links
I tend to support either location-based breadcrumb links only, as shown in Figure 1, or the combination of location-based and attribution-based breadcrumb links, as shown in Figure 2. As a user experience professional, I implement this contextual navigation for multiple reasons.
1. Breadcrumb Links Support Website Navigation
The primary purpose of website navigation is to enable task completion. Location-based breadcrumb links support task completion by providing a seamless way to view more options when users land on a web page further down a site hierarchy. In other words, implementing location-based breadcrumb links often reduces the number of actions a website visitor needs to take in order to get to a higher-level page.
2. Breadcrumb Links Support Website Usability
In my article series Conversion Optimization: Measuring Usability In The User Experience (UX), I showed the critical facets of website usability. Two of those critical facets are:
Effectiveness (Task Completion): Can users achieve their desired goals on your website?
Efficiency (Quick-And-Easy): How quickly can users achieve their goals on your website?
By supporting task completion in website navigation, location-based breadcrumb links also support website usability.
Some web designers/developers often use click-paths and analytics data as evidence that users do not use breadcrumb links. However, just because people do not click on a breadcrumb link does not mean that they do not use them.
I often conduct usability tests on wireframes to determine whether or not a website’s labeling system is effective, keeping in mind that users do not always enter a website via the home page. In fact, one way I measure the success of a website’s SEO is to see fewer and fewer referrals to a website’s home page (unless it’s for a navigational query to the company’s official website), and more and more referrals to a website’s internal pages.
Figure 3: Inceptor’s Pyramid. With search engine optimization, the goal is to increase qualified search engine traffic to most of the pages on a website. Effective SEO allows users to transport directly to their desired content.
During performance usability tests, I periodically ask test participants what page or content they are viewing on a website.
Most of the time, test participants identify the primary page heading and location-based breadcrumb links (if used) as reasons for knowing what page they are viewing. Even though eye-tracking studies might not show that users focus on breadcrumb links as a navigation aid, users often see breadcrumb links through peripheral vision, especially if they are placed near the primary page heading.
Figure 4: According to usability guru Jakob Nielsen and his co-author Kara Pernice in their book Eyetracking Web Usability, people look at breadcrumb links 30% of the time.
Remember, a number without context is just a number. I find that usability testing and studies help put analytics data in the proper perspective. Content might be King, but context is Queen.
3. Breadcrumb Links Support Content Findability
Not only do location-based breadcrumb links support and encourage browsing, they also support searching. For some time now, web search engines have shown location-based breadcrumb links in search listings, offering multiple ways for web searchers to navigate to your website.
In other words, location-based breadcrumb links help both searchers AND search engines understand your website’s structure.
Figure 5: Breadcrumbs shown in a web-search listing. Currently, in this listing, Beverages, Tea, and Tea Samplers each lead to a different page on the website.
To view details about showing breadcrumb links in your web-search listings, please see Rich snippets – Breadcrumbs.
4. Breadcrumb Links Provide Information Scent
Information scent consists of textual and visual cues that:
Facilitate clear navigation (where can I go?)
Allow for quick orientation (where am I?) and
Communicate content value (should I click on this link?)
If navigational labels are clear and consistent to users, location-based breadcrumb links can provide a powerful and enticing information scent to more content on your site before and after people arrive on your website, as I have illustrated with previous examples.
Figure 5 above shows multiple information scents in a web-search listing…something users can view before they arrive on your site. And after people arrive? Whether or not users landed on the most appropriate product, service, or content page, location-based breadcrumb links provide a means to flawlessly traverse up the site hierarchy to view more options. Additionally, website designers/developers can match the hyperlink text to the destination page’s heading, providing additional scent and aboutness.
For those of you who are interested in reading detailed information about the scent of information, please read more about Peter Pirolli and information foraging theory.
5. Breadcrumb Links Communicate Content Aboutness
As I mentioned previously, a location-based breadcrumb trail should begin with a link to the website’s home page and end with the current page. Breadcrumb-link content should get more specific as users navigate further down the site’s hierarchy.
All of the words in the site hierarchy, including the page heading, communicate to both users and search engines what your page content is about. Intentional aboutness describes the meaning of a document (such as a web page, PDF, graphic image or video) from the author’s perspective.
In other words, breadcrumb links provide an additional opportunity to communicate both aboutness and context to humans and search engines. Search engines do use the text and links in your breadcrumb trails to determine relevancy.
For details about aboutness, please read Keywords, Aboutness & SEO.
Breadcrumb Link Dos And Don’ts
Breadcrumb Dos
Begin a location-based breadcrumb trail with a link to the home page. End the breadcrumb trail with the current page.
Use a simple separator between the levels of breadcrumb links. A forward slash (/), less-than sign (<), or a double less-than sign are all expected and acceptable.
Ensure that your breadcrumb links look clickable and are clickable. For mobile devices, if you are using location-based breadcrumb links, ensure that your breadcrumb links look tappable and are tappable.
Breadcrumb links should be placed above the web page’s h1-formatted heading to encourage usage (for user mental models and further site exploration).
Breadcrumb Don’ts
Don’t use reverse breadcrumb-link text for your site’s (X)HTML title tag. Thoughtful titles should be written by humans, not software.
Don’t use the breadcrumb-link structure for your URL’s structure. Remember URLs should be easy to type and easy to remember.
Don’t make breadcrumb text size so small that users have a difficult time reading them. Remember, people look at breadcrumbs 30% of the time. If users determine that your content is too difficult to read, they might not look at content on the rest of your website.
Ensure that breadcrumb links don’t dominate the page. They should not be formatted to distract site visitors from reading: (A) the content heading, and (B) global and local navigation.
Don’t use breadcrumb links without supporting global and local (if used) navigation. Breadcrumb links are a supplemental, contextual type of navigation aid. They should not be the primary means of browsing a website.
Comments