Page navigation principles

In the famous Green Fairytale story, Hansel and Gretel knew that the stepmother was going to lose their plan in the deep forest and spread the breadcrumbs on the way, although bread crumbs were eaten by the birds when the moon rose Now at http://www.aliyun.com/zixun/aggregation/7140.html "Internet designers have found inspiration in this story by designing fixed" breadcrumbs "that will not be eaten by birds.

Figure 1: A variety of bread crumbs on the Internet

Hansel and Gretel sow bread crumbs in order to find their way home in the woods, a way of navigating that, if not eaten by birds, knows wherever it goes from wherever it goes Go home and go home. Today, Internet information explosion, Internet designers to design a variety of fixed bread crumbs on the web page (Figure 1) is also to give users a way to navigate in order to prevent users from getting lost in the sea of ​​information. Apple is recognized as the best user experience design company, we take a look apple.com is the perfect way to complete the user navigation needs.

Figure 2: apple website new features introduced breadcrumbs

Figure 2 is apple.com above itunes new features breadcrumbs. There are two elements in total: node labels and arrows.

Node Tags: apple logo, itunes and what's new. And node labels have different styles, what'new Bold style. The middle of each node labels are separated by arrows. Arrow: is a directional symbol.

The way bread crumbs accomplish this navigation need is:

1, through the last node label to inform the user's current location; 2, breadcrumbs from left to right tell the user to the current location of the fixed path; 3, in addition to the current page node label, other node labels are clickable, allowing users Back to the previous page (you can return to the role of the initial starting point). By any of these three users will not be lost in the direction of the site.

Figure 3: apple website new features introduced itunes page

Then we analyze the top-down navigation elements from the page where the breadcrumbs are located (Figure 3) to see how the page self-fulfills navigation needs beyond breadcrumbs:

1, first of all, navigate the menu bar on the logo to tell the user on the apple site, the navigation menu categories tell the user a total of how many dimensions of the site, the menu is selected Itunes, tell the user currently in itunes menu dimensions.

2, followed by itunes page navigation bar, a big title itunes tell the user the following content is speaking itunes, the right of itunes page menu navigation tells the user itunes page content classification, which is not the same state what's new tell the user currently selected This is the content, the content is below in this category.

3, and finally the title of this page What's new in iTunes, said the current page content is fully rolled out in accordance with the title of the content.

The above navigation element also clearly tells us 1, the current position of the user (current page title), 2, the fixed path to the current page (navigation path layout and elements from top to bottom), 3, how to return to the previous page (Each navigation menu can be clicked, except for the current page title). Which involves 3 navigation: apple website navigation, itunes category navigation and what's new content navigation, navigation at each level has a navigation menu and the selected state. The starting point for each level of navigation with the arrow link up, as shown in Figure 3 →→, and the formation of an actual bread crumbs exactly the same page path. Tell the user how to come to this page.

From the page above the breadcrumb style analysis and analysis of the page's own content, we can see that all the navigation throughout the 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, to inform the user to a fixed path to the current page; 3, allows users to return to the previous page.

Figure 4: Nestle.com

Figure 5: Nestle.com

We use the navigation principle to test nestle.com's navigation design. This page tells us the current location through the page title "baby foods". Through the website logo, "Brands" in the second navigation bar and the left navigation bar "Baby foods," tells us that this page's fixed path is from home, select the 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 informational communication elements needed for navigation. We can also obviously find the page path in the page: → →. Figure 4 is based on its breadcrumb node label elements, the same elements in the page are found, these elements have been more obvious style that is selected, with the same state of the same information different from the contents of the navigation layout from top to bottom Formed contains and contains the relationship, Figure 5 is to connect these selected elements with arrows, so that you find the page path in the page.

Figure 6: amazon.com

Figure 6 is the search results page in amazon browsing to web navigation. The figure will hide the page path and the actual bread crumbs are marked. Each node tag of the bread crumbs has a selected state in other navigation ways of the page, and forms a contained page relationship from top to bottom and from outside to inside, thus forming a hidden page path. The navigation methods used here are different from the previous ones, not only using the navigation menu, but also using the tree cascading menu. The current page is not the title of the page, but the direct use of solid breadcrumbs to strengthen the last node label style. This page through different ways to complete the user's navigation needs.

Figure 7: Booreiland

Figure 8: John Lewis Shopping website

Figure 9: wowhead breadcrumbs

Figure 10: meilishuo.com

Meilishuo a magazine content page, there is no actual bread crumbs, then we look for other navigation methods, such as the site logo, navigation bar, page title, etc., as indicated by the arrow, we will find the page path less. We do not know what classification to go from the front page, then to "where the magazine." This user is looking for a magazine where the last category can not find, can not return to the previous level. The navigation principle of this page is not satisfied, the user will be lost here. It is mainly the main navigation bar is not selected the current content classification, so that the path is broken section.

Designer's creativity is unlimited, but the user's navigation needs are fixed, any style, as long as they meet the requirements of the navigation principles, you can complete the user's navigation tasks. A more convenient way is to find the page path of this page as long as it meets the navigation principle. Such principles and methods can be used to test whether our design standards, we can also be used to guide our navigation design.

Source: http: //www.aliued.com/2012/08/30/1135/