Page navigation principles

Source: Internet
Author: User
Tags new features

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, 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 navigation on the menu bar logo

Tell 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

To tell the user that it is currently under the menu dimension of itunes. 2, followed by the itunes page navigation bar, the big title itunes

Tell the user that the following content is all about itunes, 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, finally is the title of this page what ' New in ITunes

, which means that the contents of the current page are fully rolled out according to the title. 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

, formed a crumb of bread and the actual existence of

Exactly the same page path. Tell the user how to come to this page.

Analyze the breadcrumbs from the above page and analyze the content of the page itself, 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 "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 in the page:

The page path. 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.

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 only 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 Bread crumbs

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, not 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 by a section.

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.

Article Source: Ali Ued

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.