E-commerce website design analysis: breadcrumbs Navigation

Anyforweb official launch of E-commerce Web site design analysis of the series of articles, monthly update, the theme for the electric website of the bread crumbs Navigation design, welcome attention!

Breadcrumbs in the Web site (Breadcrumb navigation) navigation is a complementary and complementary navigation, it can help users to clear the current location of the site, and quickly return to the previous path.

The bread crumbs originated from a fairy tale, two children in order not to get lost in the forest, so along the way sprinkle crumbs as a mark to help themselves to return to the original road. Through this story, we can see that the reason is called breadcrumbs navigation, it is because it has played the same role in the site, so that users can see their own site in the location, but also quickly find other products of the same type.

A small crumb is one of the most popular parts of a site's user experience. The website of the electric dealer is numerous, and the crumb is a beacon to guide the user, thus the importance of the breadcrumb navigation for the user browsing is obvious.

1. Keyword unification, avoid word repetition

The existence of breadcrumbs is to give users the most intuitive understanding of their location, therefore, the use of words to streamline the direct and only, is the bread crumbs must adhere to the principle. In other words, each product page has its own unique navigation, which reduces the user's query when shopping. In terms of the use of words should also try to avoid ambiguity in the use of words, jingdong bread crumbs Navigation in this respect do not good enough (as shown below).

The first class classification and the class two classification are "the Household appliances" and "The Life electrical Appliances" respectively, these two meaning similar words increased the user's thinking time. Therefore, the synonym peace class vocabulary should be avoided as much as possible in the crumbs.

The bread crumbs in Taobao are relatively intuitive. From "All categories" to "women" and then to "down jacket", each large classification has no repeatability, so that users can respond in the first time.

2. Display level page product quantity

There are two main purposes for users to use bread crumbs, one is to return to the superior, and the second is to view the type of product displayed in the page. In the user's actual operation, these two kinds of requirements are of great importance, but most of the electronic business site has ignored the latter. In fact, this improvement is not difficult, as long as the level of the classification of the page to show the number of goods, users can be very clear to see the number of products required, user-friendly selection.

Tesco Fashion Mall's breadcrumbs are noticed in this area of small details. The system will automatically crawl the quantity of the commodity according to the user's selection of the condition, let the user choose according to the actual situation of the commodity.

3. The use of bread crumbs is less

Traditionally, it is recommended that you use breadcrumbs when you have a high level of classification in your site, and you can omit this section if you have fewer sites to categorize. But Anyforweb believes that crumbs can also help users identify product positioning. When the user does not have the target to the product, the position type breadcrumbs can let the user have the more smooth shopping experience.

Poly-Mei Excellent product classification is not really small, but they still choose to use the positioning of the bread crumbs design. The designer makes a small interval between the product classification and the easily changing parts of the user, making it easy for the user to modify the condition.

4. Use a pointing symbol

Crumbs are an "important little role" in the user experience, not only to allow users to see clearly, but not too eye-catching, therefore, in the color mainly black, gray mainly, the shape can be used to connect the symbol, more to consider the relationship between the key words, and has indicative.

Amazon's crumbs on the symbolic user experience is not satisfactory, ":" Can not clearly show the generality between the words, the indicator is far less direct than the arrow.

And the charm of the bread crumbs symbol to meet all the standards, symbol color and words are the same, the size is also very moderate, so that users can find it when necessary, but not dazzling.

5. Reduce interference

The design of breadcrumbs should always follow the rule of thumb: it should not capture the user's attention. A competent bread crumbs must not play the role of dominating the page, low-key play to assist the role of leading the navigation, so that users do not have to go shopping when the interference.

The silver-Thai crumb design does not look like most Web sites with a full transparent background, but uses a similar gray color as the surrounding background. This is an easy way to get crumbs into the overall picture and not create any problems when users are using it.

6. Avoid repeating the form of dominant navigation

Today's electric-business sites are keen to make a fuss about small details, starting with the desire to embody a good user experience in detail, such as adding a drop-down menu to a simple crumb. The site thinks this will allow users to find the goods they need in a shorter period of time, but the meaning is not significant.

Take a shop for example, E-commerce site's main navigation has a Drop-down extended classification function, so, breadcrumbs if the same form will become very repetitive, and in fact, the difference in the actual function is not small.

Jingdong website to avoid this point, the main navigation is the regular Drop-down menu form, the bread crumbs design is relatively simple and clear, not too much function.

7. Streamline the hierarchy as far as possible

Streamlining the level of breadcrumbs is not just about improving the user experience, but also for the search engine to crawl. As far as possible to control the crumbs within 4 levels, the user vision and SEO have great benefits.

Only the bread crumbs of the product will appear too cumbersome. Although the classification is relatively fine, sorting is very clear, but "fool-type" bread crumbs more suitable for practical use.

Suning easy to buy bread crumbs and only the style of the product will be completely different, suning easy to buy bread crumbs default control within 4 layers, other diversification options in another area exists, reducing the user in the use of interference degree.

8. Use keywords in breadcrumbs

Crumbs for the site's SEO has a great impact, so grasp the keyword settings may be able to bring more traffic to the site.

As the cat case shows, in the fourth level of breadcrumbs, users can filter the keywords according to their time requirements, so that the products presented are more accurate.

Summarize:

Anyforweb that crumbs are an essential module for every E-commerce site, and that the user experience is a good embodiment of the clearance here. All site elements may be innovative, but the crumbs are consistent and the simplest way to meet the user's browsing needs.