Take you back to the past life of breadcrumbs!

Bread crumbs Navigation, a once popular martial arts, inadvertently has been unknown to the ancient control. Many interactive designers, when they first heard of its name, have retreated. However, it is essential for some types of Web sites to navigate. Today, the United States Network of Interactive Designer @ Tokugawa light deliberately to comb the information, from scratch to take you know the bread crumbs navigation past life.

　　What is breadcrumbs navigation

A control on a Web page that lets the user perceive the level of the current page, or the relationship between the attributes of the product. The general style of breadcrumbs is to use the link text plus ">", the horizontal arrangement, there are some other styles.

It uses "perception", which means that breadcrumbs are not the most conspicuous part of the page, but only to some extent helps users understand the dependencies of the structure and attributes of the site.

The classification of bread crumbs

1. Used to indicate the hierarchical relationship between pages and the location of the current page. The hierarchical relationship between these pages can be without and include relationships, as long as the pages themselves have linear jump relationships.

2. Used to indicate the relationship between the product attributes and the location of the current page, which is the property of the owning and containing relationship

3. To display the user's operating path and history (some foreign articles have said so, but I did not find the corresponding site ...)

The role of bread crumbs

1. Indicate the position of the current page and perceive the relationship between the attributes of the product

2. Easy to jump to the previous page

3. As a general complement to the main navigation

　　The use of bread crumbs

Not all sites need to be used:

1. The information level is very flat. This is one of the reasons that bread crumbs are discarded in mobile products.

2. There is no linear page relationship;

3. There are other things to replace the bread crumbs function such as: progress indicator;

Mainly appear on the top left of the page, below the main navigation

　The "mutant" of bread crumbs.

Progress indicator Bar. Used to indicate the position of the page in the task step, and the area of the general head is not clickable to jump, but only for the purpose of indicating.

complex breadcrumbs with navigation, filter items (facets search), and search boxes.

The advantage of this "mutant" Crumb is that it is easy to jump at the previous level of the page to facilitate filtering and searching at the current level.

Present situation of application of bread crumbs

　　Mobile products and social products can hardly see the crumbs.

Reason 1: The current product design trend is to flatten the hierarchical structure of information, as far as possible to tile various modules, so that the breadth of information structure, reduce the depth of vertical

Reason 2: Social networking stations, compared to large electric dealers and content-type sites, its level of complexity is relatively low

Reason 3: The mobile device screen is small, the level of gold, its role is low, it was removed

The Electronic business class and the content class website also only then may appear in the partial page

Of course it will not appear on the homepage, generally it would appear on the level two channel page on the next level of the page

For example, in Jingdong home, click into the "Home Appliances" Channel page, in the channel page click on the purifier, you can see the crumbs

For example, in Archie Art, click on the "Anime" Channel page, click on the Channel page "Cat and Mouse", you can see the crumbs.

　　The conjecture of bread crumbs

Mobile end without bread crumbs, the more complex site can also not use crumbs at all?

Crumbs and pages in the title of the content is duplicated, can eliminate the information redundancy here, so that information is used perfectly?

These techniques + methods can be learned from the beginning!