Website User Experience Analysis: page navigation principles

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

The famous Grimm's Fairy tales Hansel and Gretel know that the stepmother wants to lose their plans in the deep forest, the crumbs were sprinkled on the way, although the crumbs were eaten by the birds when the moon rose, but now the Internet designers found inspiration in the story, designing a "crumb" that would not be eaten by the birds.

Figure 1: Various crumbs on the Internet

Hansel and Gretel in order to find their way home in the forest, sprinkled crumbs, this is a way of navigation, if not eaten by birds, no matter go to the forest anywhere can know how to walk home from the current position. In the Internet Information explosion today, Internet designers on the Web page to design a variety of fixed crumbs (such as Figure 1) is also in order not to let users get lost in the sea, give users a way of navigation. Apple is recognized as the best design company for the user experience, so let's look at how the apple.com is accomplishing the user navigation requirements perfectly.

Page navigation principles

Figure 2:apple website itunes new feature introduction of breadcrumbs

Figure 2 is a apple.com of the new itunes features above. There are two elements: node tags and arrows.

Node Tags: apple logo, itunes and what ' s new. and the node tag has a different style, what ' new has the bold style. Each node label is separated by arrows. Arrow: is a directional pointing symbol.

Crumbs this way to complete the navigation requirements in the manner of:

1, through the last node to tell the user the current location; 2, the whole bread crumbs from left to right to tell the user to the current location of the fixed path; 3, in addition to the current page of the node tag, other node tags can be clicked, you can get users back to the previous page (can return to the original starting point of the role). Through these three points, no user will be lost in the site.

Figure 3:apple Web site itunes new features introduction page

And then we'll look at the crumbs on the page (Figure 3) from the various elements of the navigation way down to analyze the page, in addition to the breadcrumbs is how to complete the navigation needs of the self:

1. First, the logo on the navigation menu bar tells the user on Apple's website that the menu category on the navigation tells the user how many dimensions the site has, the itunes selected on the menu, and tells the user that it is currently in the menu dimension of itunes.

2, then the itunes page navigation bar, the big title itunes tells the user that the following content is all about itunes, the right itunes page menu navigation tells the user itunes page content classification, which is not the same state of the What ' s New tells the user that the class is currently selected, and the following is under this category.

3, the last is the title of this page what's new in ITunes, which means that the content of the current page is in accordance with the title of the full spread of content.

The above navigation element also clearly informs US 1, the current position of the user (current page title); 2, the fixed path to the current page (from the top down navigation path layout and elements), 3, how to return to the previous page (each navigation menu can be clicked, in addition to the current page title). This involves level 3 navigation: Apple site master navigation, itunes category navigation, and what's new content navigation, with navigation menus and selected states for each level of navigation. Link the starting point of each level of navigation with an arrow, as shown in Figure 3, to form a page path that is exactly the same as the actual →→. Tell the user how to come to this page.

Analyze the breadcrumbs from the above page and analyze the page's own content, you can see that all the navigation in the entire page to convey the description of the information is consistent, then we can sum up the page navigation principles: 1, tell the user the current location, 2, inform the user to the current page of the fixed path; 3, Allows the user to return to the previous page.

Page Navigation principles Guide Design

1, in line with the principles of page navigation design:

Figure 4:nestle.com

Figure 5:nestle.com

We use the navigation principle to test nestle.com navigation design, this page through the page title "Baby Foods" tells us the current position, through the website logo, the level two navigation bar selected "PS", the left three level navigation bar selected "Baby Foods", Tell us that the fixed path to this page is from home, select PS category, and then select Babyfoods. And each category of the navigation bar can be clicked, allowing the user to return to the previous level. This page completes all the communication elements needed for navigation. We can also obviously find the page path in the page: →→. Figure 4 is the node label element based on its breadcrumbs, find the same elements in the page, all of which have a distinct style representation selected, separate from the contents of different states of the same information, and the navigation layout is formed from the top down containing the contained relationship, Figure 5 is to connect these selected elements with arrows. This finds the page path in the page.

Figure 6:amazon.com

Figure 6 is a search results page that browses to the Web navigation in Amazon. The hidden page path and actual breadcrumbs are marked in the diagram. Each node label in the breadcrumbs has been selected in other navigation modes of the page, and from top to bottom, it forms a contained and contained relationship, creating a hidden page path. The navigation used here is not the same as the front, not just using the navigation menu, but also using the tree-shaped cascading menu. The current page also does not use the page title, but rather the enhanced style of the last level node tag used directly with the solid breadcrumbs. This page accomplishes the user's navigation needs in different ways.

2. Other new styles in line with the principle of page navigation:

Figure 7:booreiland

Figure 8:john Lewis Shopping site

Figure 9:wowhead Breadcrumbs

3, does not conform to the page navigation principle design:

Figure 10:meilishuo.com

Meilishuo of a magazine content page, there is no actual bread crumbs, then we look for other navigation methods, such as the map of the site logo, navigation bar, page title, etc., such as the arrow, we will find the page path less than a paragraph. We don't know what sort of page we went to, and then we came to the magazine. So users want to find the magazine in the previous category can not be found, back to the previous level. The navigation principle of this page is not satisfied, the user will be lost here. It's mostly less dominant. The current content category is not selected so that the path is broken.

Summary

The designer's creativity is infinite, but the user's navigation demand is fixed, any style, as long as can meet the navigation principle several requirements, can complete the user's navigation task. The easier way is to find the page path in the page element, which is equivalent to satisfying the navigation principle. Such principles and methods can be used to test whether our design is standard or not, and can be used to guide our design of navigation methods.