With the growth of the Internet, goods transactions through e-commerce websites are becoming more and more frequent, and visitors will feel confused when faced with an increasing amount of information. Therefore, excellent navigation design can improve the usability of the website. It is of practical significance to realize the efficient operation of e-commerce websites. In addition, the homepage navigation design of the e-commerce website must be based on the principle of better user experience. All the information in the website must be reflected in a limited navigation bar, and important help information must be provided for users. Because of its unique importance and irreplaceability, websites
have become increasingly important in the design
of e-commerce websites
1. Conform to the content structure of the website
Before designing the navigation of the e-commerce website, you should have a comprehensive understanding of the overall content of the website and categorize the content of the website in advance. One problem involved here is that there is no need to show all the sections in the navigation one by one. E-commerce websites generally have two navigations, which are general navigation on the head of the website and classified navigation on the side. Generally speaking, the general navigation will be more general to display website products, while the category navigation will be more detailed. There is too much content in the total navigation. No matter in experience or vision, there will be a sense of muddling. The following pattern example, the total navigation classification of Dangdang appears more complicated and trivial.
On the other hand, the content displayed in navigation should be closely related to the content of the website, which also reflects the degree of matching between navigation and content. This involves advertisements that appear in or around the navigation. As shown in the Dangdang case, it is understandable to incorporate some advertisements around the navigation. The proper use will not only not be disgusted by the user, but also increase user satisfaction, but it needs Note that you should try to avoid irrelevant content on this site and advertising content that is too obvious. Excessive irrelevant content will inevitably make users feel disturbed when shopping.
2.Combining website business goals
The navigation on the homepage is a microcosm of the current situation of the website. Users can roughly understand which products are sold on the website through navigation. Therefore, it is necessary for the navigation to change with the main products of the website, or to change according to the sales volume of the products, so that the navigation presented to the user is always in line with the content of the website and the current popularity. During the operation of the e-commerce website, many problems will gradually emerge, so website revision is also one of the unavoidable processes, but before the revision, you should list all the issues first, and then consider whether these changes can really solve the problem. .
In the design process of different projects, the designers are basically the same in terms of the process, but it is important that each time the website design will produce different design goals according to the different business needs of customers. When you have This goal, you should always remind yourself that no matter how fancy or simple your design, you must fully and fully reflect this goal. Vipshop is still relatively obvious in the manifestation of its goals. The main product categories, including recent activities, are displayed in the clearest way, which effectively reduces the user's thinking time and allows users to spend the shortest time. Make decisions for your clicks.
3. Follow user usage habits
It is inevitable to design a website based on the user's experience and feelings, but often many designers will replace the opinions of most users with the opinions of colleagues around them, which is very undesirable. When doing navigation design, designers should treat the users as new users or impatient users, especially e-commerce websites, to meet the needs of users in the first place, and to minimize the learning of navigation as much as possible. For example, the hovering classification open mode can greatly reduce the user's learning cost.
The amount of time a user spends on a page is calculated in seconds, so navigation must be clear at a glance to make users feel dependent. It is also worth mentioning here that when the website decides to revise, try not to make great changes to the navigation, because navigation is a relatively important part of the entire website, and it is also a module that users are relatively dependent on. Changes will make users feel a sense of strangeness and distance invisibly. The new technology is only used in places where it doesn't matter.
Regarding user experience, here are some small details to share with you. When the user's mouse moves from the first-level navigation to the second-level navigation, sometimes due to the deviation of the movement angle and time, the user accidentally hovered to the next level of classification. Although it's just a small detail, it can annoy some impatient users. According to the preliminary survey by AnyForWeb, the mainstream e-commerce websites on the market are doing well in this regard.
In addition, Amazon's website is too "simple", the background color of the navigation and the background of the webpage, and the font of the navigation are too close to the font of the webpage, which will cause visual confusion for the user at a certain moment of viewing. (As shown below)
4. Avoid duplicate classification
As mentioned above, in the navigation design process, you must first have a comprehensive understanding of the overall operation of the website. After understanding, you can work out specific sections. The role of the homepage navigation is to classify these sections in detail. After clearing the purpose and importance of navigation, putting together similar sections to form a whole, this is the main navigation. In the lower left or lower right of the main navigation, there will be a more comprehensive and complete classified navigation, which we call local navigation. In some well-known e-commerce websites, the usage rate of local navigation may be higher than that of main navigation. In fact, there is a subtle progressive relationship between the two. Try to avoid content duplication.
Whether it's text or pictures, repetitive content can easily make users feel burned out. As shown in the case of Tmall, "medical health care" and "pharmaceutical hall" are very similar in word meaning, and they do enter the same page after clicking. Such repetitive content will obviously reduce the shopping experience of users with targeted needs.
5. Use the right copy
In order to cater to the user's willingness to stay on the navigation for only a few seconds, the availability of the navigation text content becomes crucial. Text labels are the most powerful way to convey information. Therefore, copywriting that appears in navigation should avoid using words that are difficult for users to understand, such as technical terms, abbreviations, and personalized language. The most common one is the abbreviation. Many e-commerce websites choose abbreviations because of beautiful typography or restrictions on the length of the text. This will sacrifice the user experience and increase the difficulty for users to understand navigation.
In the navigation of e-commerce websites, the primary task of copywriting is to allow each user to accurately and quickly understand relevant information. As designers, we naturally spend a lot of time blindly focusing on visual aesthetics, which is a common problem of almost all designers, but this common problem has become a fatal injury in navigation design. Clear and clear expression is a prerequisite for beauty, and the best state of any interactive project is to achieve transparency.
6.Clear visual experience
From a visual point of view, users only need to scan the website for a few seconds, so the visual design of the navigation must be logical, and use color to provide a guide for users to become a guide for users to click. Clickable parts are as obvious as possible, reducing user guesses. In the use of color, large areas of bright colors should be avoided, which will indirectly reduce the recognizability of the navigation text. At the same time, e-commerce websites are targeted at all consumers. Therefore, the color matching of navigation and navigation text content is also Consider some people with color disorders.
Jingdong's website does a better job at this point. The navigation color of each level is dark and light, so that users have a step-by-step feel. The color matching of the entire navigation area is also appropriate. No matter where you hover over the mouse, the location will reflect a more comfortable page.
Provide feedback to users
After the user has taken action on an element in the navigation, the navigation items should respond accordingly. For example, when the user hovers over the classified navigation or clicks on some text content, the text should make some changes. , Can be a change in font size, color, or any other suitable effect. In this regard, most domestic e-commerce websites have done relatively well.
The second-level navigation of the No. 1 store has very appropriate feedback information, and the entire selected section is filled with unglamorous colors, allowing users to clearly know where they are currently. The color of the expanded three-level navigation selection is somewhat similar to the font color of the popular product originally marked, which is easy to be confused.
8. Navigation conforms to the overall style of the website
The combination of navigation and overall website style should be divided into two parts: visual and content. Visually, most websites do not have major problems, because all designers understand that navigation basically occupies the main visual of the entire page. Only navigation in the e-commerce homepage needs to cater to the entire site and dominate it Website style. In terms of content, the content of navigation has a close relationship with the number of clicks on the website and even the sales of goods. Once users cannot find the product they want through navigation, it means that the merchant has lost a customer. And if you can recommend some products to users in the navigation, it may be able to promote the sales of products on the website.
The navigation should be consistent with the overall style of the website. It can be detailed to every small detail, even any wireframe font. The main purpose of this is to reduce the user's page jump feeling, and try to avoid the user's thinking and reaction caused by the page jump. At the same time, there are certain benefits to the overall aesthetics of the site.
9. Conducive to search engine optimization
Search engine optimization is the promotion method that almost all start-up e-commerce will choose, and e-commerce navigation is the main entrance to e-commerce websites. Based on this, there are many columns of navigation that are not conducive to crawling search engines. In the setting of the content, the main content should be displayed at a glance. This design is not only convenient for users to view, but also allows search engine spiders to follow the navigation directory layer by layer. Therefore, try to use text in the navigation bar to reduce the user's thinking time and help search engine optimization. Buttons and pictures will hinder search engine access and crawling.
The navigation of Paipai is particularly concise compared to the type of website. There are only a few main modules on the main navigation, which not only allow users to quickly understand the main project of the website, but also help to optimize the search engine.
Commercialization and specialization are particularly important for B2B e-commerce websites. At present, the navigation of many e-commerce websites looks messy and too naive in color and layout. Such navigation will make users have a completely different view on the style and tone of the entire website. If the e-commerce website needs to reflect serious and concise features, it should try to avoid too much exercise effect. As a navigation bar, a higher height than other title bars, and a larger bold font is a good choice, but it will not look refined enough if it is excessive.
to sum up:
The author believes that the navigation design of e-commerce websites cannot be generalized, and different website types have different design focuses. For example, the number of products on comprehensive e-commerce sites such as Amazon is large, so the navigation design of 40 million products and 4,000 products must be very different. We can see that Taobao was originally classified according to user groups from the first level of navigation. Until now, not only the search box has been expanded, but the first level of navigation has also been divided by functions.
The users of vertical e-commerce are more targeted to products, so the navigation design often needs to be scientifically classified and indexed according to their business logic, such as the classification of products in Jingdong and Yihaodian.
Another type is e-commerce transformed from traditional enterprises. The marketing of such e-commerce websites is usually based on a single brand, such as Uniqlo in the case. Because the classification and quantity are very small, in addition to the traditional scientific classification index, the single product recommendation on the front page is also very effective for the marketing of a single product.
The navigation design of an e-commerce website should still be based on the principle of better user experience. It is necessary to reflect all the information in the website in a limited navigation bar, and to provide important help information for users.
If there is no special note, the articles are original by Bojiu. Please reprint from http://sjjtq888.com/fenxiang/wangzhansheji/20170814/5.html