Web Navigation Design: Web page navigation design principles

Article Description: 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.

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: All kinds of bread 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. A total of 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 an arrow in the middle. Arrow: is a directional-pointing symbol.

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

1 , and tells the user the current position through the last node tag;

2 , the bread crumbs whole from left to right tells the user to come to the current position fixed path;

3 , In addition to the current page of the node tag, other node tags can be clicked, so that users can return 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 Tell the user that this 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 user current position (current page title), 2, arrives at the current page the fixed path (from the top down navigation path layout and the element); 3, How to return to the previous page (each navigation menu can be clicked except for 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 breadcrumbs →→. Tell the user how to come to this page.

From the above page of the bread Crumbs Style analysis and page of their own content analysis, you can see the entire page all the navigation way to convey the description of the information is consistent, then we can sum up the page navigation principle :1, inform the user the current position; 2 , tell the user to come to the current page of the fixed path; 3 , you can have the user 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 "Brands", the left three level navigation bar selected "Baby Foods", Tell us that the fixed path to this page is from home, select Brands 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 based on the node tag element of 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 will find the page path in the page.

[1] [2] Next page