Crumb design of web design techniques

What? What is bread crumbs?

Breadcrumbs are a complementary and complementary navigation Method (secondary navigation scheme) that lets users know where they are located in a site or application and can easily return to their original location. The most common form of bread crumbs is: horizontal text links, separated by the greater than ">", which also hints at their hierarchical relationships.

"Classification of bread crumbs"

1. Based on the user's level position. (location-based)
Location based breadcrumbs are used to inform the user of the level of structure at the current site. Used in Web sites with multiple-level navigation (usually with more than 2 navigation).

　　

2. Properties based on the product. (attribute-based)
This type of bread crumbs often occurs in websites with a wide range of products and services, such as E-commerce sites, online teaching services, and so on.

　　

3. Based on the user's footprint. (path-based)
Shows the trajectory of the user browsing, there is no obvious hierarchical relationship between the crumbs.

　

Why? Why use bread crumbs (the benefits of crumbs)

1. Bread crumbs as a user to find the path of an auxiliary means to facilitate their positioning and navigation.
2. Breadcrumbs can reduce the number of times a user is required to return to the previous page.
3. Temporary, dynamic, occupation of small screen space, small interference.
4. Reduce the total bounce rate of site visitors. (When users link to a Web page from elsewhere, or find a Web page from a search engine, the presence of breadcrumbs can help users quickly understand the current level of location and guide the user through the rest of the site.) Reduces the number of users who skip directly after reading. ）

　

When? When to use bread crumbs

1. There are a large number of graded content in the Web site.
Large E-commerce site is a typical example, there are a large number of products belong to different categories and categories of classification.

　　

2. In some of the leading Web applications or software installation processes, breadcrumbs are often used to indicate current and remaining operational steps. A variant similar to a process bar.

3. Bread crumbs are generally not used in simple layers of pages, but bread crumbs are also recommended when crumbs can significantly help to navigate and improve their positioning capabilities.
Album browsing is a typical example, the structure level is not complex, but the user in a certain number of pages to jump between the frequency will be higher (such as album home page, photo thumbnail pages, photo browsing page, etc.), so the existence of bread crumbs to improve the browsing efficiency here is very helpful.

　　

Note: Breadcrumbs are not an alternative to effective navigation, it is an auxiliary function; A secondary navigational scheme that allows users to locate where they are.

　

How? How to design bread crumbs

"Main style of breadcrumbs connector"

　　

The following two types of connectors are recommended for comprehensive evaluation of the above patterns, taking into account the inclusion relationships and indications of breadcrumbs:

　　

"Where the crumbs are."

Usually appears in the upper left or right part of the page, and is mostly in the bottom of the navigation or the content area.

"The size of the crumbs."

Bread crumbs are a kind of auxiliary navigation, which should not play a dominant role in the page. Bread crumbs are at least smaller or less prominent than the dominant flight. A good way to determine the size of a crumb is to not be the most visible element in the page when accessing the page. If you notice the crumbs at first glance, you may need to weaken a little more.

　　

The crumbs in the image above are too eye-catching to interfere with the dominant navigation and even dominate.

　

Extension bread crumbs Design Extension

"Breadcrumbs with Drop-down list"

Hong Kong Yahoo, Taobao and other sites have a drop-down list of breadcrumbs, so that users can quickly jump to similar or other categories of news and products.

　　

"Interactive bread crumbs"

The tag packet in the delicious is in the form of breadcrumbs appearing on the head of the Web page, according to the aforementioned crumbs classification here belongs to a "user footprint" (path-based) of bread crumbs. The order in which users browse tag groupings is recorded. At the same time, these crumbs can also be timely "kill", convenient for the content management, really ingenious design.

　　

"Review Summary"

Do you remember the 3w+h+e about crumbs?