How Important the Breadcrumbs in Web Design | 2023

Why is it called “breadcrumb”?

A “breadcrumb” (or “breadcrumb trail”)  is a navigational aid that makes the users know their locations in user interfaces and on web pages.

The term comes from Hansel and Gretel in the German fairy tale.

Two kids drop breadcrumbs formed a trail back to their home.

Just like this fairy tale, breadcrumbs in the user interfaces can offer users a way to track their path back to their original landing page/home page.

Types of the Breadcrumbs

1. Location/Hierarchy-Based:

Location-based breadcrumbs show users which level of the site they are currently on.
On the shopping website, users can easily check their position in the website architecture.
Assuming that the user does not like what is displayed on the current page, it can easily go back / up to a higher level.it can quickly go back / up to a higher level.

2. Attribute-Based:

Attribute-Based breadcrumbs will show which attributes are user selected on the webpage; these will be found in the category of shopping sites that users can select to filter products.

3. Path/History-Based: Page viewed > Page viewed > Page viewed > Page viewed > Page currently being viewed

The purpose is to let the browser back to one of the pages which users previously visited.
This feature is useful when users enter the product page after applying multiple filters on the category page.
But such breadcrumbs are seldom used, as the browser Back button quickly does the same job. Instead, history-based breadcrumbs are often combined with other breadcrumb types to let users easily come back to the previous page while all selections remain the same.

What can Breadcrumbs do?

• Where am I? 
  Breadcrumbs inform visitors about their location in the entire site hierarchy.
• Where can I go?
  Breadcrumbs improve the findability of the site sections and pages. 
  If the site section or page is placed in breadcrumbs, it is easier to understand than putting it on the menu.
• Where Should I go?
  Breadcrumbs convey content value and encourage browsing (for example, visitors to e-commerce sites may land in the product pages, which may not be a good match, but visitors may wish to view other products in the same category).
  At the same time, this way can reduce the bounce rate of the entire site.

Benefits Of Using Breadcrumbs

• Boosted user experience
  Breadcrumbs make it simple for users to move around on your website.
  Users always know where they are and quickly return to the previous page or go to other categories. Breadcrumbs encourage users to start over instead of bouncing.
• Lower bounce rate
  The breadcrumb trails may be an excellent way to induce first-time visitors to read the site carefully after viewing the landing page.
  A common situation is when a user reaches a page due to their Google search, sees breadcrumbs, and clicks a higher level link to view all related items or topics. In this case, the breadcrumb trails will reduce the bounce rate.
• does not take up space
  The breadcrumbs don’t take up much space on the page because they are usually horizontal lines, short in style, typed in plain font.
  They have almost no negative impact in terms of content overload, thence, significant for the mobile version of the website.
• Breadcrumbs provide SEO benefits
  Not only are breadcrumbs popular among users, but search engines also appreciate them. 
  Google defines them as one of the enhanced tools that can positively influence the ranking of your website. They replaced the URL in their search results with the site name and breadcrumb navigation path. 
  Breadcrumbs become another way to explain your web content better to search engines and get little extra SEO benefits. They also serve as additional links in search results, giving your website more opportunities to be clicked.

6 best ways to use breadcrumbs

1. Start from the home page:
   The breadcrumb trail works best when it shows the journey from one end to the other—including the homepage in the trail as a powerful anchor, providing users with a strong sense of direction.
2. Breadcrumbs as additional navigation:
   Breadcrumb navigation should be considered an additional feature and should not replace an effective primary navigation menu. Remember that it’s a convenience feature; a secondary navigation proposal; another way to browse the website.
3. Don’t link the current page in breadcrumb navigation:
   The last item in the breadcrumb trail (current user’s location) is optional. If you want to display it, make sure it is not clickable. Since the user is already on the page, adding the current page to the breadcrumb navigation doesn’t make sense.
4. Use separator:
   The most recognizable symbol that separates the links in the breadcrumb trail is the “greater than” symbol (>). 
   Generally, the> symbol is used to indicate a hierarchical structure, such as the format of the “parent category”> “subcategory.”
   Other symbols used are right-pointing arrows (→), right-angle quotation marks (»), and slashes (/). 
   The possible course of action depends on the design of the site interface and the type of breadcrumbs used; be aware that slashes(/) and vertical bars(|) may confuse users.
5. Put it at the top:
   The navigation bar is usually located at the very top of a website.
   As breadcrumbs are used as a secondary navigation tool, they should be placed at the top of the page, above the content or main title.
6. Select the small type:
   The use of small types helps convey to users the relative importance of breadcrumbs relative to the primary navigation bar. Never confuse it as the main navigation tool.
   A good rule of thumb to follow when sizing your breadcrumb trail is that it should not be the first item that catches the user’s eyes when they are reaching the page.

References:

• Jacob Gube. (2009, March 17). Breadcrumbs In Web Design: Examples And Best Practices. Smashingmagazine.com. Retrieved October 22, 2020, from https://www.smashingmagazine.com/2009/03/breadcrumbs-in-web-design-examples-and-best-practices/
• Nick Babich. (n.d.). How to use breadcrumbs on websites: Best practices and types of breadcrumb navigation, usersnap.com. Retrieved October 22, 2020, from https://usersnap.com/blog/breadcrumbs/
• Caroline Forsey. (n.d.). 9 Breadcrumb Tips and Examples to Make Your Site Way Easier to Navigate. Hubspot.com. Retrieved October 22, 2020, from https://blog.hubspot.com/marketing/navigation-breadcrumbs

Recommended Reading:

• Why do I recommend SiteGround Hosting WordPress? 
• Rank Math – Best SEO Plugin in WordPress