Site navigation design experience sharing: Clear navigation to make the page easy to use

Article Description: site navigation design experience sharing: Clear navigation to make the page easy to use.

Navigation is one of the most widely used basic elements in Internet products, which leads users to understand the content structure of the Web site and find the request. As the underlying control, navigation looks simple, but it is the most complex and tedious part of the product design. Because we want to make the structure of the site clearer, want to convey all the information to users, so it gives more and more navigation content, so that they are huge anomalies, very tangled. Simplified, users can not understand the structure of the page and their own situation, creating confusion, complex, navigation bloated, mountainous, neither beautiful nor easy to use.

Then, in the clear information architecture can make navigation as much lighter, more smart, is the author of this article want to explore the topic. In the author's opinion, it can be carried out from the following angles:1. Simplify the structure; 2. Optimize the form; 3. Polish the UI.

The site as a collection of information, to include a large number of resources, from the home page to level two pages to the topic page and so on, and so on, the level of information and miscellaneous, so it is easy to form a tab set tab and then set the tab situation. So as a first step in navigating the body, all we have to do is to simplify the responsible structure and make the navigation lighter, or at least look less bloated.

A Simplify the navigation structure with breadcrumbs

Crumbs usually appear horizontally at the top of the page and are generally located below the header or head of the page. They provide the user with a link to any previous page (which is also the path to the current page), which is usually the parent page of the page in the hierarchy. Breadcrumbs provide a quick way for users to backtrack to the home page or to a portal.

A common structure of a portal site is the homepage-Channel page-Special page-sub topic-bottom page. If we want to watch the NBA video live on the portal, let's take a look at his navigation:

If the information level is displayed in front of the user, it will form the Tab tab in the form above, making navigation bloated, occupy the page a lot of space. But if we extract the navigation content that the user cares about, we get the following structure:

Flatten again:

This is the clear breadcrumb navigation. In a comprehensive sense, breadcrumbs can flatten complex hierarchies and make navigation more lightweight.

Breadcrumbs are also variants that derive from the user's linear operating logic. It is more widely used in wireless products because the display area of mobile devices is limited and unable to support a large navigation structure. After the user clicks on the current navigation content, the current navigation disappears into the next level navigation and provides the return button.

Of course, the use of breadcrumbs to simplify the navigation structure is also conditional, not all navigation levels can be simplified in this way. Breadcrumbs are more in line with the user's linear thinking-oriented operating logic, for example, users want to watch the NBA live, then he must not care what the entertainment circle of gossip, and do not care football or tennis news, Cba,cuba he may not be very concerned about, Then the linear navigation of bread crumbs can meet the needs of users. Or because of space or equipment, we can not provide more detailed navigation, but the use of linear simplified navigation approach.

B Merging navigation levels

The large number of navigation is often due to excessive levels, then one of the effective way to reduce the level is to merge the navigation level, such as the two-level and three-level navigation merge, reduce the level three navigation, so that navigation lighter.

As shown above, picture library includes dynamic picture and static picture, each classification below have small classification, such navigation level is very common in the product, slightly bloated. Then the navigation can be streamlined to level two through the merging hierarchy, and the following navigation is done:

The navigation behind the thinner looks like the structure is also clearer, and does not affect the transmission of information.

Compare the navigation of the United States and glutinous rice:

The United States group registered login and personal information, such as functional navigation and Web site leading navigation to do a combination of processing for the first screen of the site to save valuable space.

C. Hide part navigation

A third way to simplify the navigation structure is to hide part of the hierarchy or navigation content so that the navigation looks lighter.

When the content of navigation is very much, you can choose to leave the main content, the secondary content hidden methods to deal with. For example:

When the page space is limited, unable to accommodate more levels, you can choose to hide the secondary level, mouse over or click to trigger this level of method processing, such examples are many:

2. Optimization form

There are times when we can't tell if a user is thinking linearly when browsing a product or site, and can't streamline the navigation structure, so how do we make navigation "thin"?

A Turn one-dimensional navigation into two-dimensional navigation

The transformation of one-dimensional navigation into two-dimensional navigation can effectively reduce the repetition and complexity of the cascade navigation, and can make the operation more changeable and thus enhance the experience.

There are also a number of similar:

B. Handling complex hierarchies individually

When the content of navigation at a certain level is enriched to a certain extent, he can act as a separate control to design, they can be as the elements of the page to exist alone, may not look like a navigation.

3. Polish the UI

When it comes to letting navigation light, UI is the most commonly used technique, this author does not do too many statements, but need to note that navigation is light or not with the navigation of the page and the importance of a great relationship. For example, on the home page, users need to have a general understanding of the page, the navigation UI can not be changed too thin, but should be the first step, so that users direct attention, and browse to find the request; Similarly, when users enter the relevant page to start browsing, the role of navigation is the street lights and Sinan, At this time the navigation is not as important as the home page, then the navigation needs to be gently, quietly beside the user at any time waiting to be noticed and used.

The navigation UI on the home page has attracted a lot of eyeballs, but the result page navigation has become almost no decorative effect, because in the results page, the user is mainly to browse products, so the role of navigation is weak.

In summary, is the author of the guidance of the body of a little understanding, clear navigation can make the page simple to use, but also will greatly affect the flow of information on the page, so in the navigation design to be carefully handled, a little humble opinion to share with you.