E-commerce website Design Analysis Series One: Home navigation

With the growth of the Internet, E-commerce sites to achieve more and more frequent commodity transactions, and visitors in the face of more and more information will be confused, therefore, excellent navigation design can improve the usability of the site, to achieve the efficient operation of E-commerce site has practical significance. In addition, the homepage of E-commerce site navigation design must be based on the user experience is the principle of good, both the site will be all information in the limited navigation bar, but also for the user feedback important help information. Website because of its unique importance and irreplaceable, in E-commerce Web site design has become increasingly prominent position.

　　1 , conforms to the website content structure

In the design of the Electronic business site before the navigation, you should have a comprehensive understanding of the content of the site as a whole, and the content of the site classification. One of the problems involved here is that you don't have to show all the plates in 1510 of the navigation. There are two general navigation on the website of the website, which is the total navigation of the head and the classified navigation of the side. Generally speaking, the general navigation will be more general display of the site products, and the classification of navigation will be more detailed. The content of the total navigation is too much whether in experience or visual, there will be a muddy feeling. The following figure case, Dangdang's total navigation classification is more complex and trivial.

On the other hand, the content displayed in navigation should be closely related to the content of the website, which also embodies the matching degree of navigation and content. This involves the navigation or navigation around the appearance of advertising, as the Dangdang case shows, the navigation surrounding the integration of some ads understandable, the use of appropriate not only will not be disgusted by users, but also to improve user satisfaction, but should be careful to avoid with the contents of the site is irrelevant, And the advertising component is too obvious some content, excessive irrelevant content is bound to let the user feel in the shopping to be disturbed.

　　2 , combined with the website business objectives

The navigation on the homepage is a microcosm of the current situation of the website, and the user can get a general idea of what the website is selling by navigation. Therefore, the navigation is necessary with the site's main product changes, or according to the sales of goods change, so that the display of the user in front of the navigation always with the content of the site itself and the current popular very closely. In the operation of the electric business site, many problems will gradually emerge, so the site is also an unavoidable process of revision, but before the revision, should list all the questions, and then consider whether these changes can really solve the problem.

Before the revision:

After the revision:

Designers in the design process of different projects, single from the process is basically the same, but it is important that each site design will be based on different customer business needs and different design goals, when you have this goal in mind, you should always remind yourself that your design no matter how fancy or simple, Must be the end of this goal to reflect the full. Only the product will be in the embodiment of the goal or more obvious, the main products of their own category, including recent activities with the clearest way to show out, very effective to reduce the user thinking time, so that users in the shortest possible time for their own clicks to make a decision.

　　3 , compliance with user habits

According to the user experience and feel to design the site is inevitable, but often there are many designers will use the views of colleagues around the majority of users to replace the views, this is very undesirable. While doing the navigation design, designers should be used as a new user or impatient users, especially the electric business site, in the first time to meet the needs of users, as far as possible to weaken the learning of navigation, such as the mouse over the classification of the hover Open way can be a large extent to reduce the user's learning costs.

The user's time in the page is calculated in seconds, so the navigation must be at a glance, so that users have a sense of dependency. Here's one more thing to say, when the site decided to modify the time, navigation as far as possible do not make a big change, because navigation is the whole site is more important components, but also the user relatively dependent on a module, once the navigation has a great change, will allow users to create a sense of strangeness and distance, The new technology is used only in places where it is irrelevant.

There are small details to share with you about the user experience. When a user's mouse moves from one level of navigation to a level two navigation, it is sometimes unintentional to hover to the next level of classification because of the deviation in the angle and time of the move. Although it's just a small, casual detail, it's annoying to some impatient users. According to the preliminary investigation of Anyforweb, the current market of the more mainstream of the electronic business site in this point have done more qualified.

In addition, Amazon's website is too "concise", navigation background and the background of the Web page, as well as navigation fonts and Web pages are too close to the font, which in view of a moment will cause the user's visual confusion. (pictured below)

　　4 , avoid duplication of classification

As mentioned above, in the navigation design process first of all to the site's overall operating content has a comprehensive understanding, understand before you can draw up specific plates, and the role of home navigation is to make these plates detailed classification, in the clear purpose and importance of navigation, the similar plates together, forming a whole , which is the dominant route. There is a more comprehensive, complete category navigation at the bottom left or right of the main navigation, which we call local navigation. In some of the more well-known electronic business sites, the use of local navigation may be more than the main navigation, there is actually a subtle progressive relationship between the two, to try to avoid duplication of content.

Whether it is text or pictures, repetitive content can easily make users feel tired. As the cat case shows, "medical care" and "Medicine Hall" in the word meaning is very similar, and after the click did enter the same page, such a repetitive content will significantly reduce the need for targeted users of the shopping experience.

　　5 , the use of appropriate copy

Navigating the usability of text content becomes critical in order to cater to the user's desire to stay on the navigation for just a few seconds. Text labels are the most powerful way to convey information, so the copy appearing in navigation should avoid using words that are difficult for users to understand, such as professional terminology, abbreviations, and personalized language. The most common is the abbreviation, many of the electronic business site will be due to the layout of beautiful, or the length of the text to choose abbreviations, thereby sacrificing the user experience, increasing the user's understanding of the difficulty of navigation.

In the Electronic business site navigation, the first task of copywriting is to enable each user to accurately and quickly understand the relevant information. And as designers, we naturally spend a lot of time blindly focused on visual aesthetics, which is almost all the common problems of designers, but this common problem in the navigation design has become fatal. Clarity of expression is the premise of beauty, and the best state of any interactive project is to achieve transparency.

　　6 , a clear visual experience

From a visual point of view, the user only a few seconds to scan the site, so the visual design of navigation must be logical, with color to provide users with a guide to become the user clicks the wizard. The clickable part is as obvious as possible, reducing the user's guess. In the use of color should avoid large bright colors, which will indirectly reduce the visibility of navigation text, at the same time, the electric business site for all consumers, therefore, in navigation and navigation text content with the color to take into account some color barriers.

Jingdong site In this point to do is still relatively good, each level of navigation color from deep and shallow, so that users have a step-by-step feeling. The entire navigation area color collocation is also very appropriate, regardless of the mouse hover anywhere, the position can reflect a more comfortable page.

　　7 , to provide users with feedback

When the user has an action on an element in the navigation, navigation items should be given a corresponding feedback, such as when the user hovers over the category navigation or clicks on some text content, the text should make some changes, can be the size of the font, color changes, or any other appropriate effect. On this point, most of the domestic electrical business sites are done in place.

The two level navigation of a shop has the very appropriate feedback information, a whole selected plate is filled with the color of the not dazzling, let the user know oneself current position very clearly. And the expanded three-level navigation after the selected color on its original marked the color of the popular products some repetition, more easily confused.

　　8 , the navigation conforms to the website overall style

The combination of navigation and the overall style of the site should be differentiated into two parts of vision and content. In the visual, most of the site will not have big problems, because all the designers know that navigation basically occupies the whole page of the main vision of this truth, the electrical Business home page only need to cater to the overall site and also dominate the site style. From the content, navigation content and site clicks, and even sales of goods have a close relationship. Once a user is unable to navigate to the desired product, it means that the merchant has lost a customer. And if you can recommend some goods to the user in the navigation, perhaps can promote the website merchandise sale.

Navigation to conform to the overall style of the site can be details to every little detail, and even any wireframe font. The main purpose of this is to reduce the user's page jump sense, as far as possible to avoid users because of the reasons for the page jump and the reflection and reaction. At the same time, the overall aesthetic level of the site also has certain benefits.

　　9 , conducive to search engine optimization

Search engine optimization is almost all of the start-up electric operators will choose to promote the way, and the electronic Business navigation is the main portal, based on this, there are many columns of navigation is not conducive to search engine crawling. In the content of the setting, should be the main content at a glance, such a design is not only conducive to users to view, but also to search engine spiders can follow the navigation directory layer depth. Therefore, in the navigation bar to use text as much as possible, reduce the user thinking time and facilitate the search engine optimization, buttons and pictures will hinder the search engine access and crawl.

The racket navigation is very concise relative to the kind of website. Main navigation on only a few major modules, not only allows users to quickly understand the site's main projects, but also the strength of the search engine optimization.

　　 The navigation that tends to specialization

Commercialization and specialization are particularly important for business-to-business e-commerce sites. Nowadays there are a lot of electronic business site navigation looks more messy, in the tone and layout is too naïve, such a navigation will allow users to the entire site's style tone produced a different view. If the electric dealer website needs to embody the serious concise characteristic, should try to avoid excessive movement effect. As a navigation bar, higher than the other title bar, the larger bold font is a good choice, but once the excess will not look exquisite.

Although the Lok Bee Net is a biased feminine website, but the navigation is more professional than the single view. Not too much color, the use of colors and fonts are also tending to business, classification is as much as possible to reduce, such a style to the user is the most direct formal orthodoxy, to a certain extent, to increase the user's trust in the site.

　　Summarize:

The author thinks, the Electronic Commerce website Navigation design also cannot generalize, the different website type has the different design emphasis. For example, the Amazon and other comprehensive type of electronic business site of the number of goods, then 40 million of goods and 4,000 of goods navigation design will be very big difference. We can see that Taobao from the initial level of navigation according to the user population, to now, not only expanded the search box, the first level of navigation also function as a point of division.

The vertical type of electrical business users of the goods more targeted, so in the design of navigation often need to follow their own business logic to carry out scientific classification index, such as Jingdong and a store of goods category Division.

There is also a type of e-commerce from the transformation of traditional enterprises, this type of electronic commerce site marketing is usually based on a single brand, such as the case of the Uniqlo. Because the classification and the quantity are very few, so in addition to the traditional scientific classification index, the homepage's single product recommendation also is very effective to the individual commodity marketing.

E-commerce website navigation design or should be in line with the user experience is the principle of good, both the site will be all information in the limited navigation bar, but also for the user feedback important help information.