Make navigation more portable

Source: Internet
Author: User

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. Simplifying the navigation structure through 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.

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: and provide relevant evidence. A staff member will contact you within 5 working days.