From Fairy Tale to Functionality: The Breadcrumb’s Web Design Legacy

Remember when you were a kid and got lost? You’d probably start looking around quickly for familiar things or, if you were in a big store, for aisles and things you knew. Well, websites are a bit like those big stores. Each page is like a new section with different stuff. And just like in a store, it’s really easy for people to get confused and not know where they are on a website.

This can be really frustrating, and a lot of times, people just leave the website because of it. In this article, we’ll talk about something called breadcrumb navigation. It’s like a trail of virtual breadcrumbs that helps people find their way around a website. This can be super helpful for any website because it keeps people from getting lost and leaving.

The Definition of Breadcrumb Navigation

The “breadcrumb” concept in the name comes from the famous German fairy tale Hansel and Gretel. In this story, Hansel and Gretel are siblings that find themselves abandoned in a forest, and they used literally bread pieces to mark their path so they can find their way back. They dropped bread pieces behind so that they can follow crumbs back home. Ironically, the breadcrumbs are eaten by birds and do not serve as a navigation guide for Hansel and Gretel. Are the web version of breadcrumbs any better in aiding navigation? Yes, indeed they help in aiding navigation!!

How does this relate to websites and web design?

Breadcrumb navigation is a feature that has a trail of text links (breadcrumbs) that tell users exactly where they are on a website and how they got there.

They typically appear high up on the page.

Here’s an example:

When Should You Use Breadcrumbs?

Breadcrumbs are not for everyone. Breadcrumbs benefit your site navigation only if you have a deep site architecture. That is, multiple categories that divide into subcategories. And then subcategories pointing to individual pages on your site.

Ecommerce sites are perfect examples. They typically offer different products grouped into multiple levels of categories.

Left: a flat site hierarchy, with few vertical levels. Right: a deep site hierarchy has the same information organized into more sublevels.

Avoid using breadcrumbs if you have a single-level, flat website architecture. Where every page is just one click away from the homepage.

That’s when breadcrumbs are unnecessary. Because they won’t add any navigational value to users.

What Are the Different Types of Breadcrumbs?

1. Location-Based Breadcrumbs:

• Also Known As: Hierarchical Breadcrumbs
• Description: These show the user’s current location within the website’s structure, typically starting from the homepage and moving down through categories and subcategories.
• Example: Home > Category > Subcategory > Page

Location-Based Breadcrumb

2. Attribute-Based Breadcrumbs:

• Also Known As: Filter Breadcrumbs, Faceted Breadcrumbs
• Description: These display the attributes or filters applied by the user to reach the current page, particularly common in e-commerce sites. They help users understand the filters they’ve set and allow for easy modification.
• Example: Home > Category > Brand: Nike > Size: 10

Attribute-Based Breadcrumb

3. Path-Based Breadcrumbs:

• Also Known As: History Breadcrumbs
• Description: These show the user’s path through a series of steps or actions. They are often used in multi-step processes like forms or checkout flows.
• Example: Step 1 > Step 2 > Step 3

Path-Based Breadcrumb

Breadcrumb navigation is an important element on your website for several reasons:

1. Enhances User Experience: It provides users with a clear and easy-to-follow path through your website. This helps them understand where they are and how they got there.
2. Improves Navigation: Breadcrumbs act as a visual aid, allowing users to quickly navigate back to higher-level pages or categories without having to rely solely on the “Back” button in their browser.
3. Reduces User Frustration: It helps prevent users from feeling lost or disoriented, which can be a common frustration when navigating complex or content-rich websites.
4. Aids in Information Hierarchy: Breadcrumbs show the hierarchical structure of your website, indicating the relationships between different pages. This can be especially helpful on websites with a deep content structure.
5. Boosts SEO: Search engines use breadcrumbs to understand the structure and organization of your website. This can indirectly benefit your SEO efforts by providing clear signals about the relevance and context of your content.
6. Increases Page Views: By making it easier for users to explore related content, breadcrumbs can lead to increased page views as users are more likely to click on relevant links within the breadcrumb trail.
7. Reduces Bounce Rate: A clear navigation path can encourage users to stay on your website longer and explore multiple pages, which can reduce the bounce rate (the percentage of visitors who leave after viewing only one page).
8. Facilitates E-commerce Shopping: For e-commerce websites, breadcrumbs are especially valuable. They guide users through the product categories and subcategories, making it easier for them to find and purchase products.
9. Mobile-Friendly Navigation: On smaller screens, where space is limited, breadcrumbs provide a compact and efficient way to show the user’s current location and the path they’ve taken.
10. Accessibility and Inclusivity: Breadcrumbs benefit all users, including those with disabilities or impairments. They provide an additional means of understanding website structure beyond visual cues.

While breadcrumbs can be beneficial in these situations, it’s important to implement them thoughtfully and ensuring they align with the overall user experience and design for a website.