Website user experience analysis: page navigation principles

 

 

In the story of the famous green fairy tale, Hansel And Gret know that the stepmother wants to discard their plans in the deep forest and scatter the breadcrumb on their way. Although the breadcrumb is eaten by the birds when the moon rises, however, today's Internet designers have found inspiration from this story to design a fixed "breadcrumb" that will not be eaten by birds ".

　　

 

Figure 1: Various bread chips on the Internet

Hansel And Gret planted bread in order to find their way home in the forest. This is a navigation method. If it is not eaten by birds, you can know how to go home from the current location wherever you go to the forest. Today, with the explosion of Internet information, Internet designers have designed a variety of fixed bread chips on the web page (1) to prevent users from getting lost in the sea of information, give the user a navigation method. Apple is a well-recognized design company with the best user experience. Let's take a look at how apple.com perfectly meets user navigation requirements.

Page navigation principles

　　

 

Figure 2: New Features of apple's itunes

Figure 2 shows the breadcrumb in the new itunes function of apple.com. There are two elements: node label and arrow.

Node labels: include apple logo, itunes, and what's new. The node labels have different styles. The Bold style is used for "what new. Each node tag is separated by arrows. Arrow: it is a direction-oriented symbol.

Bread:

1. Inform the user of the current location through the last node label; 2. Tell the user the fixed path to the current location from left to right; 3. Besides the node label of the current page, other node labels can be clicked to bring the user back to the upper-level page (which can return to the initial start point ). None of these three users will lose their way in the website.

　　

 

Figure 3: New Features of itunes on the apple website

Then, we will analyze the elements of various navigation methods from top to bottom on the page where the bread is located (Figure 3) to see how the page meets the navigation requirements in addition to the bread:

1. First, the logo on the navigation menu bar tells the user on the apple website. The menu category on the navigation shows the total number of dimensions of the website and the selected Itunes on the menu, tells the user that the current menu is in the menu dimension of itunes.

2. Next comes the page navigation bar of itunes. The big title itunes tells users that the following content is about itunes. The page menu navigation of itunes on the right tells users the content category of the itunes page, what's new in different States tells the user that this class is selected currently. The following content is under this category.

3. What's new in iTunes is the title of the page, indicating that the content of the current page is fully expanded according to the title.

The preceding navigation elements clearly inform us 1. Current user location (current page title); 2. Fixed paths to the current page (from top to bottom navigation path layout and elements ); 3. How to return to the upper-level page (each navigation menu can be clicked, except the current page title ). Three levels of navigation are involved: the main navigation of the apple website, the category navigation of itunes, And the content navigation of what's new. Each level of navigation has a navigation menu and a selected status. Link the start point of each level of navigation with an arrow, as shown in 3 → to form a page path that is exactly the same as the actual breadcrumb. Tell users how they came to this page.

From the bread style analysis on the above page and the page's own content analysis, we can see that all the navigation methods on the page to convey the description information are consistent, we can summarize the page navigation principles: 1. Inform the user of the current location; 2. Notify the user of the fixed path to the current page; 3. Let the user return to the previous page.

Guiding design of page navigation principles

1. design that complies with the page navigation principles:

　　

 

Figure 4: Nestle.com

　　

 

Figure 5: Nestle.com

We use the navigation principle to test the navigation design of nestle.com. This page uses the title "baby foods" to tell us the current location. Through the Website logo, select "Brands" in the second-level navigation bar ", the "Baby foods" selected in the left-side navigation bar tells us that the fixed path of this page is from home, select brands category, and then select Babyfoods. Each category in the navigation bar can be clicked, so that users can return to the upper level. This page completes all the information elements required for navigation. We can also find the page path in the page: →. Figure 4 shows the same elements on the page based on the node label elements of the breadcrumb. These elements have been selected in a clear style, different from the content in different states of the same information, the navigation layout forms the relationship between the content and the content. Figure 5 connects these selected elements with arrows, in this way, the page path in the page is found.

　　

 

Figure 6: amazon.com

Figure 6 shows the web navigation search result page on amazon. In the figure, the hidden page path and the existing bread are marked. Each node label of breadcrumb has a selected status in other navigation modes on the page, and from top to bottom, the relationship between the content and the content is formed from the outside to the inside, form a hidden page path. The navigation method used here is different from the previous one. Besides the navigation menu, the tree-like cascading menu is also used. The current page does not use the page title, but uses the enhanced style of the last-level node label of the real bread. This page meets users' navigation requirements in different ways.

2. Other new styles that comply with the page navigation principles:

　　

 

Figure 7: Booreiland

　　

 

Figure 8: John Lewis shopping website

　　

 

Figure 9: wowhead breadcrumb

3. Design that does not comply with the page navigation principles:

　　

 

Figure 10: meilishuo.com

Meilishuo's magazine content page does not have any breadcrumb, so we look for other navigation methods, such as Website logo, navigation bar, page title, etc., as pointed by the arrow, we will find that the page path is missing. We don't know what category we went from the homepage, and then we came to the magazine ". In this way, the user cannot find the last category of the magazine and cannot return to the next level. The navigation principle of this page is not satisfied, and users will be lost here. It mainly removes the main navigation bar and does not select the current content category, thus breaking the path section.

Summary

The designer's creativity is unlimited, but the user's navigation needs are fixed. Any style can complete the user's navigation tasks as long as it meets the requirements of the navigation principles. The easier way is to find the page path in the page element, which is equivalent to meeting the navigation principle. Such principles and methods can be used to test whether our design meets the standards, or to guide our design of the navigation method.