Omni Marketing Interactive - Designing for People who Search Home    
  Site map  
  Contact us  
   
Services Clients About Omni FAQs Design tips Links and resources Request a quote
   
     Home > Design & UX tips > Information architecture tips > Think Breadcrumb Links Aren’t Good For User Experience?   
   
Tips overview
Search engine optimization
Website usability
Information architecture
UX website design
Omni photo - top
Photo - tips
Omni photo - bottom

Think Breadcrumb Links Aren’t Good For User Experience? Yes, They Are!

Web designers, information architects, & user experience (UX) professionals have long butted heads on this issue. Here are reasons why the answer is YES.

You are here maze image

The goal of effective information architecture (IA) is to make the products, services and information on your website easy to find. Sound familiar? This is same goal that search engine optimization (SEO) professionals have.

Here you will learn the benefits of breadcrumb navigation as well as the Dos & Don'ts of implementing them.

In This Article

Breadcrumb links & UX

"Breadcrumb links are not good for the user experience!" proclaims the website design/development team...with arms folded and glares that could melt a few icebergs.

I admit that situations like this one are difficult, because the design/development team:

  1. Is clearly not interested in discussing the topic.
  2. Might have a different perception of user experience (UX) than I have.

To help explain my definition of UX, I use Peter Morville's User Experience Honeycomb because it does not discount the importance of findability.

Peter Morville's UX Honeycomb
image of Peter Morville's UX Honeycomb

Figure 1: The facets in Morville's UX Honeycomb are applicable to both the USER experience as well as the SEARCHER experience. Image used with permission.

Morville's UX Honeycomb also includes the concept of delight. Desirable content can also delight users.

Unfortunately, others' perceptions of user experience have been misinterpreted to exclude items that are very important to users.

For example, people can't use what they can't find. Usability firm Nielsen Norman Group determined that over 75% of task failures are due to issues with information architecture. Therefore, findabilty should ALWAYS be a critical facet of the user/searcher experience.

Desirable content should also be trustworthy and credible. For example, every item in an interface that does not support consistent clickability (or tappability) has a negative impact on trust. Users don't know what to click (or tap) to get them to their desired contact.

And that brings me back to the topic of breadcrumb links. How does this type of navigation support the user/searcher experience?

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

This type of breadcrumb navigation is 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.

Sample of location-based breadcrumb navigation
Image of location-based breadcrumb navigation

Figure 2: 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 main benefits of using location-based breadcrumb links are that they:

  • Encourage browsing (on mobile devices, users browse more than they search)
  • Provide a "sense of place" at the top of a web page
  • 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 click or tap a breadcrumb link to flawlessly navigate 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/searcher experience.

Path-based breadcrumb links

Also known as a "history trail," this type of breadcrumb navigation shows users the steps they have taken to arrive at a given web page. Path-based breadcrumb links are typically dynamically generated.

Many usability/UX professionals do not recommend their usage for a number of reasons:

  1. Back button. They duplicate the functionality offered by the Back button in the browser.
  2. Navigation confusion.They can confuse users who might navigate to the wrong sections of a website.
  3. Arrival. 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.)
  4. Duplicate content. They can cause duplicate content delivery to web search engines. Delivering duplicate content to web search engines can lessen 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, this type of breadcrumb navigation displays 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.

Sample of attribute-based breadcrumb navigation
Image of location-based breadcrumb navigation

Figure 3: Both location-based and attribution-based breadcrumb links can appear on the same page.

In Figure 3, notice how the user experience designer paid close attention to formatting.

  • Clickability (and/or tappability) is consistently communicated and implemented. 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 greater-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 2, or the combination of location-based and attribution-based breadcrumb links, as shown in Figure 3.

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 that is located further down a website's 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 Marketing Land 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 (or tap) 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.

Inceptor's Pyramid
image of Inceptor's Pyramid

Figure 4: 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.

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 field studies help put analytics data in the proper perspective. Content might be King. Context is the Kingdom.

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.

Breadcrumb trails in web-search listings
Image of breadcrumb links appearing in a web-search listing

Figure 5: 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  Enhance Your Site's Attributes.

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?)
  • Communicate content value (should I click on this link?)

If navigation labels are clear and consistent to users, location-based breadcrumb links can provide a powerful, enticing information scent to more content on your site...before and after people arrive on your website.

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? If users do not land on the most appropriate product, service, or content page, location-based breadcrumb links provide a way to move up the site hierarchy to view better options.

Additionally, website designers/developers can match the hyperlink text to closely match the destination page's heading, providing additional information 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 human users 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 (/), greater-than sign (>), or a double greater-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 validating user mental models and encouraging 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.

This article originally appeared in Marketing Land's Analytics & Conversion column (must-read content for Chief Marketing Officers, digital marketing executives and advertising campaign managers) and has been updated by the author.

Related articles

If you liked this information architecture and site navigation tip, here are more links to related optimization tips and articles from Omni Marketing Interactive:

You can also read our articles from other online publications.



IA

Information Architecture Services

Usability

Website Usability Services

UX design

Web
Design
Services


If you have any questions about Omni Marketing Interactive's search engine optimization (SEO), website usability, information architecture (IA), or web design services, please call us at 847-426-4256.

Top