AudioEye: The Role of Breadcrumbs in Web Design and UX
Summary: Breadcrumbs are important in website navigation, SEO, and user experience. Developers use breadcrumbs to map the location of a page on a website. Here’s what you need to know about breadcrumbs and their role in website design.
A website can be its own large world of hundreds or even thousands of separate pages, and the larger the site, the easier it is to get lost in it. When site visitors cannot know where they are in the architecture of a site and cannot navigate the options, they are likely to get frustrated and leave.
To combat this frustration and rebound, web developers employ a set of common standard practices. First, most websites with layered hierarchies (categories, subcategories, parents, and children) have a primary navigation system like menu items at the top of a site. Second, many websites use breadcrumbs, which indicate where a particular page is on the site.
While breadcrumbs on websites are used almost exclusively as secondary navigation, they play an important role in your site’s usability and search engine optimization (SEO).
What are breadcrumbs?
Breadcrumbs are a website navigation diagram that displays the page a user is currently on and the path to that page. Think of someone who gets lost in a thick forest. If they had left a trail of breadcrumbs behind them, they would have a way back to where they started.
There are standard practices for breadcrumbs and user experience (UX). Typically, breadcrumbs are placed near the top of a page, somewhere below the main navigation bar and above the title (h1). Breadcrumbs are usually in a smaller font size so they are unobtrusive and don’t get confused with the main navigation. They are also usually written in a line from left to right with the current page at the very end and a “>” symbol between each page. The full title of each page in the breadcrumbs should be listed.
How breadcrumbs are used to navigate a website
Navigating with breadcrumbs largely depends on how web developers use breadcrumbs. For the most part, breadcrumbs allow users to navigate to other pages or sections that are closely related to the page they are currently on, or return to the pages that took them there. Breadcrumbs can help a user navigate to the pages most relevant to them without having to navigate the main site navigation, which often includes other sections of the site that are not relevant to the user.
There are three types of navigation breadcrumbs:
Based on the path
Location-based breadcrumb navigation
Location-based breadcrumbs show you which page you are on and where it is in the site hierarchy. For example, if you’re looking to cook dinner and you’re on a spaghetti carbonara site’s recipe, you might see the following breadcrumb trail:
Home> Food> Recipes> Italian> How to make authentic carbonara spaghetti
The article “How to make authentic carbonara spaghetti” can be found in the Italian subcategory of the Recipes subcategory of the site. If, say, you change your mind and want to make tacos, you can use the breadcrumb trail to go back to the Recipes section of the site, then search the Mexican subcategory to locate the “How To Make Tacos” article. .
Attribute-based breadcrumb navigation
With attribute-based breadcrumbs, various elements of the page are included in the breadcrumb trail. This generally applies to search results pages where you can add filters to the page to affect the results. Attribute-based breadcrumbs are often combined with location-based breadcrumbs.
An attribute-based breadcrumb trail might look like this:
Home> Electronics> Televisions> Under $ 1,000> 60 inches> 4K UHD
In the example above, everything after “TVs” is an attribute of the page. All of the TVs shown on the page are expected to cost less than $ 1,000, have a 60-inch screen, and feature 4K UHD resolution.
You should be able to click on any of the attributes to see a page with all of the results that match it. Also, many sites will give you the option to remove any attribute from the breadcrumb trail, thereby removing that filter from the page. Either of these options might be easier than starting your search again.
Path-based breadcrumb navigation
Path-based breadcrumbs tell you where you are currently on the site and the path you took to get to your current location. Most often you will find path-based breadcrumbs in the checkout process of ecommerce sites or in wizard tools that let you fill out forms step by step.
A path-based breadcrumb trail might look like this:
Cart> Delivery> Payment
In this case, you are on the page where you enter your payment information (credit card and billing address). Let’s say while you’re here you decide you don’t want any of the items you were about to purchase. This is where you can access the breadcrumbs and go to the cart to delete this item. It’s easier than having to click the back button twice – especially on a site where hitting the back button can take you out of the buying process altogether. You may have realized that you need to update your shipping address.
Why Ariadne’s Sons Benefit From SEO
For some time, SEO has been linked to the breadcrumb trail. Websites that use navigation breadcrumbs for SEO might have an edge over their competition when it comes to search rankings. The main reason is to appease Google. The search giant loves breadcrumbs, and that means your SEO should be too.
The reason Google loves breadcrumbs so much is that they help its bots better understand the overall structure of your website. It is advantageous for your site that the bot can easily scan it.
Additionally, Google likes to display breadcrumbs in its search results listings. In a place formerly reserved for the full URL of a page, the site now displays the breadcrumb trail for that page. Take a look at this example Google Search Engine Results Page (SERP):
Gray text next to each of the main areas includes breadcrumbs for that particular page. The fact that Google uses breadcrumbs in its results is a clear indicator that they are important.
Role in web accessibility
Breadcrumbs can be very useful in making your site more accessible to users. Under its Success Criterion 2.4.8, the Web Site Content Accessibility Guidelines (WCAG) state that sites should “provide the user with a means of navigating a set of web pages, ‘a website or web application and find related information. “This will help users who rely on assistive technologies, such as screen readers, to navigate to related parts of the website.
Using breadcrumbs in website design is one of the techniques presented by WCAG to let a user know where they are in a website and in the site hierarchy. For more information on these guidelines, see our WCAG Compliance Guide.
Ready to test the accessibility of your website?
Scan your site now.
AudioEye Inc. published this content on December 17, 2021 and is solely responsible for the information it contains. Distributed by Public, unedited and unmodified, on December 16, 2021 08:48:05 PM UTC.
Public now 2021
Trends in Technical Analysis AUDIOEYE, INC.
|Short term||Mid Road||Long term|
Evolution of the income statement
|Number of analysts||3|
|Last closing price||
|Average price target||
|Spread / Average target||121%|