Amazon and Jingdong Mall site navigation bar usage experience

Jingdong Mall of the left navigation bar is completely imitate the effect of Amazon, although the two functions seem the same, but using the navigation bar on Jingdong will make people feel very awkward, then why the two same function of the navigation bar experience is different?

In the picture above, two navigation has three differences, which leads to a gap in their user experience:

1, the width of the navigation bar

First of all, the width of the navigation bar of Jingdong is obviously much wider than that of Amazon, after calculation of 211px, and Amaxon only 161px, the difference is 50px. So how does the difference in width affect it? After use, it is found that every time the user wants to select another category, when the mouse is moved to the navigation bar, Amazon can easily display the level two menu, and then move to the right to select categories. Tokyo, however, will have to move 50px more, back and forth more than 100px distance. As to what effect this distance will have, I believe that you will know as long as you experience the two navigation strips separately.

2, the navigation bar trigger unknown

Second, the hierarchy of the two is two levels, but every line of Amazon button can trigger the next level of classification, the user needs to touch the edge of each line button. And Jingdong will be much worse, only move to the button on the text to trigger the next layer of classification. At the other point, each button has multiple words, and at first glance it doesn't seem to understand. This is a level two category button that many people may mistakenly think are direct text links. As a result, users have a great sense of frustration in their use.

3, the text of the navigation bar

As the Jingdong navigation bar is designed to be more than one text per line, and one of the categories is black text, the level two classification is gray. So the mouse moved to the first class classification of the original grade two gray text disappeared, the effect is very inexplicable.

The above three points to see Jingdong navigation in the initial design may consider to be part of the category two classification directly next to the navigation button, because of such a change, so that the original simple and easy to use the navigation bar became very cumbersome, another user is also not used. For the navigation bar design, because the main function in the first place, the secondary function is hidden. Especially for E-commerce sites, due to give users more convenient use of the operation, because the user's Web site is to view and browse the goods, even if the outstanding features of the user's basic browsing has an impact, it would rather delete.

Look below for the Beijing-East navigation bar Solution

From the above, we look at the left is Jingdong, the right is Amazon, for the above three points, we can improve through the following methods: through the overall, reduce mouse movement distance, improve the overall experience.

According to the principle of cognitive psychology, an element of intuitionistic presentation is composed or aggregated with the same domain law mainly according to the approach law: The observer tends to take the elements of the same region or range as a whole.

That is to say, to increase the user's floating area from an intuitive perspective, in this way, the user will think of a line as a whole, although the width of the entire navigation is unchanged, but because the line as a whole, so that users in the mouse to select the time, will be biased towards the center, so as to reduce the effect of moving around the mouse.