Skip to content
Article

Do breadcrumbs improve usability?

Site Search blog

What are breadcrumbs?

Breadcrumbs are dynamic navigation paths throughout web pages. They show you the trail that led you to the particular page you are on with clickable links, allowing you to jump back to previous pages. 

Breadcrumbs are most useful when websites house a large volume of information broken into clear categories and hierarchical structure. While a website like nestle.com should use breadcrumbs for its many brands, a local bakery probably should not.

breadcrumbs UX
Nestle.com uses breadcrumbs for its hierarchical structure.

Why should we incorporate breadcrumbs in web design?

You’re probably most familiar with seeing breadcrumbs on eCommerce websites. They helped you go back to a product category when you wanted to see other options. You knew to use this navigation element because you see them all the time; users understand the breadcrumb pattern well.

Breadcrumbs enhance UX.

Breadcrumbs are an important part of content strategy. They give users a roadmap to web pages and help them feel less overwhelmed. They are also beneficial because:

  • They provide contextual information to help users understand categories.
  • They make it easier for users to jump to previous pages without using the “back” button (when they likely forgot where it will take them).
  • They tell users the pattern of a site’s structure so they have a better understanding of how to find other pages.

Breadcrumbs boost SEO.

Breadcrumbs are recommended for SEO for several reasons. Partly, search engines evaluate the user friendliness of a website. Breadcrumbs can help reduce bounce rate and increase pageviews per session for the reasons outlined above.

Additionally, breadcrumbs can boost crawlability and increase rankings because:

  • Google uses breadcrumbs to gain context of content (just like users).
  • Google includes breadcrumbs in the Search Engine Results page, giving users extra information that makes them want to click.

How do I get started?

Talk to your development team about how to add breadcrumbs to a website. For WordPress, it’s as easy as using breadcrumbs with the Yoast plugin. For other websites, it may require a custom development piece. A designer may need to find the best placement for this navigational element and provide styling as well.

Structured data helps you provide page information directly to the Google search engine. A developer or SEO specialist can also help you include structured data for breadcrumbs

Looking for ways to boost user satisfaction and conversions?

Breadcrumbs are just one way to increase usability of your website. Atlantic BT also places value on content quality, information architecture, and UX design. If you’re interested in a site audit or consultation, reach out. We’re here to help.

capabilities covered
Experience Design UX Design Information Architecture

The Atlantic BT Manifesto

The Ultimate Guide To Planning A Complex Web Project

Insights

Atlantic BT's Insights

We’re sharing the latest concepts in tech, design, and software development. Learn more about our findings.

Questions & Answers

What is web design and development?
People often lump web design and development together, so what's the difference? As the Internet has evolved, the skills required to produce a high quality website or web application have changed.
Learn More about What is web design and development?
What is JavaScript used for in web development?
Historically speaking, JavaScript was only commonly but sparingly used in web development. The multiple browsers in use at the time each supported different versions of JavaScript and were slow to render more complex Javascript.
Learn More about What is JavaScript used for in web development?
What is bootstrap in web development?
Bootstrap is a framework used in front-end development to save time, specifically for mobile-first development. It combines CSS and Javascript templates and libraries to speed up the development process.
Learn More about What is bootstrap in web development?
What is front end vs. back end development?
As web development evolved, it separated into logical specialization: front end web development and back end development. While back end development involves the server-side development, front end is the final rendering.
Learn More about What is front end vs. back end development?
How do I create, organize, and write a digital strategy?
Nearly every time, good execution outperforms good ideas. For the most effective execution, it's essential to have a strong underlying strategy. Try organizing an offsite multi-day retreat with a facilitator.
Learn More about How do I create, organize, and write a digital strategy?
How do I avoid digital strategy pitfalls?
Like any strategy, there are more ways to find pitfalls than success. The first step in planning is to clearly articulate the overall strategy in a way that is easy to understand at all levels of the organization. 
Learn More about How do I avoid digital strategy pitfalls?