Shulou(Shulou.com)06/01 Report--

This article introduces the knowledge of "how to use the breadcrumbs on the web page to show you the way". In the operation of practical cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Editor's note: breadcrumbs are familiar navigation tools that often appear at the top of the page to tell you where you are. It is small, convenient, common and simple. But even such UI controls are fastidious in design, so let's talk about breadcrumbs today.

As an auxiliary navigation system, bread crumbs can help users clearly locate the location of their website. The word comes from children who follow crumbs back to their homes in fairy tales, and breadcrumbs on the web are UI controls that help users find their location.

Breadcrumbs tell users where they are through a path display, and today's article will explore how breadcrumbs should be designed for an available web page and demonstrate the correct use of breadcrumbs through best practices.

Breadcrumb navigation provides availability

As a visual guide, breadcrumbs reveal the hierarchical structure of the web page for users, so breadcrumbs have become an important way for users to understand the background information of the site and help users understand the answers to the following questions:

Where am I? According to the level of the entire site, bread crumbs let users know where they are. Where else would I go? Breadcrumbs improve the searchability of the entire site, the existence of breadcrumbs reveals the structure of the entire site, and users understand what other parts of the site there are. Should I browse more? Breadcrumbs reveal that the site has more content worth exploring, encouraging users to browse more. In turn, the appearance of bread crumbs reduces the bounce rate of the site.

Reduce the number of operations

From a usability point of view, breadcrumbs reduce the number of operations that users jump to high-level pages, thus avoiding the complex interaction of users using the browser's back button and rummaging navigation to find the parent page.

Small footprint

Breadcrumbs, a design element that takes up very little space on the page, is basically in the form of linked text, and it usually has only one line.

Bread crumbs will not cause trouble to users.

This small design element does not take up much space, but the convenience to users is far greater than the problems and troubles that may be brought.

When do you use bread crumbs?

Whether or not to use breadcrumbs in the website mainly depends on the structure of the website. Take a look at your site map or overall structure map to analyze whether the use of bread crumbs can improve whether it is convenient for users to navigate through different categories and directories within the site:

When your website has a well-classified and well-organized multi-level linear structure, you should use bread crumbs. For example, for an e-commerce site with a wide variety of products, bread crumbs are very useful. Don't use breadcrumbs when the site doesn't have a logical hierarchy.

The type of bread crumbs

Bread crumbs are navigation components based on the logical structure of the website, which can be displayed based on location and path, or based on attributes.

Location-based bread crumbs

Location-based breadcrumb design usually well reflects the structural features of the website. They directly present the hierarchical structure of the site in front of visitors, which contains multiple levels (usually more than 2 levels). This hierarchical display of bread crumbs is a clear guide for users who enter the site from external sources, such as search engines.

In the following BestBuy page, breadcrumbs show the hierarchical relationship of the page on which the product is located.

Path-based bread crumbs

Path-based breadcrumbs, often referred to as "historical footprints", show not the structure of the site, but the complete path of visitors to a particular page. This kind of breadcrumb path is not static, but dynamic. Path-based breadcrumbs can sometimes be helpful to users, but sometimes they can still confuse users-some users browse the site with a path that is too wild, and this path-based crumb helps them record it. There is no need to look through history or use the browser's back button to return to a specific location. In addition, this path-based breadcrumb is of no use to users who arrive at a specific location at once.

Here are examples and principles of using path-based breadcrumbs to navigate:

Attribute-based bread crumbs

This kind of attribute-based breadcrumbs are common in e-commerce websites. Products are often organized into different subdirectories based on categories and attributes. Attribute-based classification makes it easier for users to understand the relationship between products and products. Provides more different browsing paths.

Like the TM Lewin page, breadcrumbs show the corresponding products on a particular page, and the products are organized according to certain attributes:

Hierarchy or history?

Based on practical experience, in the vast majority of cases, breadcrumbs are still suitable for showing hierarchies rather than browsing history. Therefore, breadcrumbs based on location and attributes are more widely used, while path-based breadcrumbs are relatively rare.

Best practices for bread crumb navigation

When you start designing breadcrumb navigation, you should keep the following things in mind:

1. Don't use bread crumbs to replace the main navigation system of the web page.

Bread crumbs is only an auxiliary navigation system, it can not replace the main navigation system. Keep in mind that it is only a secondary option for the convenience of the user to reach other levels of the quick location link system.

2. Do not add the current page link to the breadcrumbs

The last level of breadcrumbs is the current page, and this item should not be linked to breadcrumbs, because it only plays the role of display positioning and does not make any sense.

3. Use delimiters

In breadcrumbs, the most common way to separate different levels is the greater than symbol (>), and the common use is "parent category > child category". Of course, the use of delimiters is not limited to this one, some use arrows (→), some use the title number (»), and some use slashes (/ /). Which separator to use usually depends on the overall style and the preferences of the designer.

4. Choose the appropriate size and spacing

The size and spacing should be carefully considered in the design, and there should be sufficient spacing between different levels of breadcrumbs to ensure that users can identify them. Of course, you don't want crumbs to take up too much space on the page, and it would look awkward if the crumbs were bigger than the top navigation.

5. Don't let it become the focus of vision.

Breadcrumbs itself is an auxiliary navigation, if you use too gaudy fonts and eye-catching colors, it will make it seem too noisy and eye-catching. It should not be the visual focus of the user during browsing. The breadcrumb design below is not bad, but it is so eye-catching that it attracts users' attention even more than the top navigation.

Google's breadcrumb design is not eye-catching, but users can still use it well.

6. Do not use bread crumbs on the mobile page

If you think you're going to use breadcrumbs on your mobile page, it means there's something wrong with your mobile web design: maybe the site is too complex (the nesting level is too deep), and it doesn't fit the mobile scenario. To solve the problem, you should try to simplify the system and make sure that bread crumbs don't appear on your phone.

That's all for "how to use the breadcrumbs on the web page to show you the way". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.