Many online users expect brands (especially those with large sites) to incorporate breadcrumb navigation into their site designs. These unobtrusive navigational cues give browsers a simplified way to peruse pages without losing track of their pathways.
Some breadcrumbs enhance the user experience (UX) while others complicate site navigation. Let us explore the evolving role of breadcrumbs, how they impact search engine optimisation (SEO) and UX design when you should avoid them, and how site owners can keep their breadcrumb acumen fresh into the future.
What are Breadcrumbs
In the fairytale Hansel and Gretel, their wicked stepmother sends the titular characters off into the woods and abandons them, hoping they will be lost forever. Smart Hansel leaves a trail of breadcrumbs so they can find their way home. Using breadcrumbs describes how web pages mark a path to show a user’s journey.
Many people create and test pages using the home page as a starting point. Often searches connect to pages deep within a site. Breadcrumbs provide a secondary or background navigation system to show a user’s location.
Most websites are built on hierarchies. The homepage links to several other options such as a contact page, an about us page, and several pages for different types of products or services. From there, each page has its levels or connections. Breadcrumb navigation might look like this:
Home > Shop by Room > Bathroom > Urban Bath > 36-inch White Vanity with Basin
If customers dislike the look of the white vanity but want to continue in the Urban bath collection, they can quickly get back to that page. However, if they decide kitchen appliances are what they want, they do not have to think about how to get there, they just choose to Shop by Room.
Breadcrumb navigation provides users with context so they can answer these questions:
- Where am I now in relation to the entire site?
- What are all my choices for navigation from here? Breadcrumbs make each section findable.
- Do I want to go there? Breadcrumbs encourage browsing by luring users to the next location.
Breadcrumb Benefits
Breadcrumbs make it easier to navigate websites to improve UX in the following ways:
- Visitors take fewer steps: If users are already looking at interesting content, they do not want to leave the page they are on and go back to the home page to get to the next useful bit of information. That would be like requiring them to leave the forest entirely and then evaluate where they want to go next. Instead of choosing the back button, users keep going forward.
- Breadcrumbs clarify site navigation: Often users are not sure what they are looking for, but they feel like they will know it when they see it. As long as they can flow smoothly through the site, each step brings them closer to their goal. If they must go back in the other direction, they might lose the trail and decide they are not interested enough to try and find their way back.
- Breadcrumbs use space effectively: Since breadcrumbs are simple text with horizontal links, they do not contribute to content overload.
When to Use Breadcrumbs
Decide whether to use breadcrumbs by creating a sitemap that shows navigation. If you split content into sections and subsections grouped by related categories, breadcrumbs enhance UX. Breadcrumbs are not useful for sites that do not have related groups. For example, a blog might cover a variety of topics that are not related.
Breadcrumb Types
Breadcrumbs can indicate a page’s position, pathway, or characteristics.
- Position: When sites have more than two levels, breadcrumbs indicate each page’s position in relation to others. For example, if users search for “turquoise area rug” and choose a link that takes them directly to a specific item, they may decide they want to see other options from the same seller. They may have never been to other pages on the site, and breadcrumbs help lead them toward what they might like to view next. Each text link to the left takes users to a page one level higher.
- Pathway-based breadcrumbs: These show every step the user has travelled to reach a destination. They do not help if users navigate to the page directly from the search engine or if their browsing has meandered around the site. They show only where the user has been.
- Items grouped by characteristic: E-commerce sites often use this type of breadcrumb to organise similar products.
Designers can use a mix of breadcrumb types to make organisation easy. For example, the breadcrumb trail for a department store website may look as follows:
Home > Clothing > Women’s Clothing > Pyjamas and Robes > Sleep Shirts > Long Sleeved Sleep Shirts
The first three categories are location based. The last three break down items into similar characteristics with each level becoming more specific.
Breadcrumbs and User Experience (UX)
UX efficiency requires a delicate balance between functionality and aesthetics. When designers include breadcrumbs in websites both for mobile and desktop, they never cause problems in user testing. They take up an insignificant amount of space, and people understand them intuitively because they are almost always implemented the same way.
When designers do not provide a breadcrumb trail, users click on embedded links or use the back button. People are 82 percent more likely to use breadcrumbs if they are located right by the page title. Use them in responsive layout as follows:
- Make them an extra feature: Breadcrumbs should not replace primary navigation, only provide an added layer of convenience.
- Save space by omitting the current page: If they are already there, they do not need a breadcrumb for the page.
- Use separators between pages: The greater-than symbol, a right arrow, or a slash can indicate a progression.
Make them easy to find but not too prominent. Use adequate text size and surround breadcrumbs with enough white space that they stand out but do not distract from more important page features. They should be a tool that is easy to find without drawing attention away from the content each page is designed to display.
Use them even for mobile. If space is a consideration, offer just one breadcrumb that shows users their previous step.
Breadcrumbs and SEO
Since search engines continuously evolve the rules on how they prioritise search results, designers disagree on the importance of breadcrumbs in search engine optimisation. Most agree that breadcrumbs can help, but their primary function is to improve the user experience.
Google suggests enabling breadcrumbs to indicate a page’s position in the hierarchy of your site. Schema.org recommends using a consistent breadcrumb vocabulary for coding. Providing access to all site pages is a practice search engines favour. They lower bounce rates and add structured data by improving your website’s internal linking structure. In the hierarchy, they can use keywords to relate one page to the next.
Fresh Ideas for Breadcrumbs
Keep breadcrumbs from getting stale by trying some of these ideas when they enhance web page design.
- MSDN Docs uses arrow icons, but the last link includes a drop-down menu with extra pages to encourage further browsing.
- Apple puts breadcrumbs in their footer link area instead of at the top.
- TutsPlus incorporates breadcrumbs into their blog with primary and secondary categories.
If your website has a compelling navigation system in place, breadcrumbs can enhance usability and facilitate a seamless browsing experience.
Want to learn more?
If you’d like to become an expert in UX Design, Design Thinking, UI Design, or another related design topic, then consider to take an online UX course from the Interaction Design Foundation. For example, Design Thinking, Become a UX Designer from Scratch, Conducting Usability Testing or User Research – Methods and Best Practices. Good luck on your learning journey!
(Lead image: Depositphotos – affiliate link)
