Exploring the importance of navigation the performance of navigation in portal site

Web page Production WEBJX article introduction: Information Architecture design in website navigation.

Before going into today's topic, let's explore the importance of navigation and analyze the performance of navigation on the portal site.

Navigation directly affects the company's revenue

What benefits will navigation bring us? Navigation is not only to provide access to information, its design will directly affect the overall revenue of the company. Let's take a look at an example (the following is from Alibaba Li Fan's "business awareness of Designers"):

The approximate advertising price of Alibaba

The image above reflects the approximate advertising price of Alibaba's website.

In fact, a lot of space at the top of the page is occupied by navigation, see the following figure:

As you can see, the top navigation is very large, in a screen, the user could hardly see the search results.

The user is to look for the information, the first screen completely does not see the result!!!

Below we are going to lose weight for navigation:

Navigate the page after weight loss

This is after the weight loss of navigation, search results in a higher position, while each product bit price also increased a lot, the first position of the ad bit from 95,000 to 120,000.

The change of navigation directly brings the financial revenue of the website.

Navigation of the portal site

Navigation plays a very important role in web design, but we often ignore the importance of navigation when designing a Web site, especially in portals where it is more common. The following is the page navigation of NetEase financial channel:

Financial Channel page

The first picture is the financial channel's homepage, the second is the two level channel stock's homepage, the third picture is the market homepage.

As you can see from the diagram above:

• In contrast to the three charts, the dominant navigation has a significant change, and the change is subversive, and we have no way of finding something of relevance. When I see the home page, I was thinking, the trader is the stock below the level two page, but to the stock page, but did not operate this navigation.
• Multi-level navigation is not supported on the same page, and navigation can be expressed in a limited hierarchy.
• Open the Market page users more overwhelmed, where I am, the navigation is not currently selected navigation.
• Almost every click of the navigation, will open the page in a new window, which caused a lot of pressure on the browser.

Overview of the major portal sites, because of the large information content, complex structure, early planning, information needs rapid iterative and other factors, navigation above will have a lot of problems. It is urgent to solve the problem of navigation.

In the study of navigation problems, read the "Web Navigation Design" This book, the contents of the book is summarized. Today, the main share of "navigation design information structure" this aspect.

Information structure for navigation

What is the information structure

The structure can be specific to cover the specific location of the page and content. Information structure refers to the Web page of the planning or architectural map, it is the skeleton of your site. The structure types of information include:

Linear structure, reticular structure, hierarchical structure, faceted structure, gradually exposed structure

The concrete analysis of information structure

1. Linear structure

The following figure, this page can limit Taobao buyers to complete the purchase process by linear structure. The 1,2,3,4 step above is a good guide for the user to complete the task step-by-step and to inform the user of the location in the process.

The general breadcrumb navigation is also a linear structure:

2. NET structure

The following figure, this is a page that can be set up by the user.

The navigation of the mesh structure has no starting point and no end point, even there is no hierarchy or sequence.

3. Hierarchical structure

Most Web sites are likely to use this structure. Arranges nodes in a hierarchical relationship to expand their hierarchy.

The following is the navigation of NetEase digital channel:

4. Split-Surface structure

In a faceted structure, the positioning of an item is given by its attribute category: Item 1 belongs to the category A,b,c, but does not belong to D, and it has multiple access points.

The following figure nine days of music, singer Lin Jia can also be found in the singer or the list. People can take values from any order, thus supporting multiple ways of accomplishing the same goal:

5. Gradually revealing structure

It is not a prior establishment of the information structure, but the spontaneous formation, which is gradually exposed structure. Wikipedia, for example, is comprised of each contributor to build the content, scale, and even direction of the site.

From the above structure type can be seen, different types of Web sites need different information structure, such as the music of the Web site, it is necessary through the "music", "singer" and other facets of the structure to present.

Understanding and mastering these types of structures can help us better grasp the design of navigation.

Extension: organization of the information

After we have identified the information structure, we have to consider how to organize the information.

Like an alphabetical example of a car channel:

Information structure and information organization design-card classification

Card Classification Introduction

In the website information structure and organization design, we will use card classification, card classification needs:

• Make some of our predefined categories and give them to the user to arrange
• Users can say what they think, or they can modify the name of the category
• Encourage users to encounter difficult to understand the classification, speak out loudly

There are usually two stages in the Classification of cards:

• In the opening stage, it takes about 15 users and gives users enough freedom to classify information.
• In the closing phase, approximately 8 users are required to validate the results of the previous development phase.

The application of card classification in the actual process

Card Classification Quantitative Results

In the card classification, two software usort and Ezsort,usort are used to import the user card classification results, Ezsort can guide all the results, and output statistics.

Card Classification Statistic Results

Summarize

This sharing, mainly for my "Web navigation Design" This book part of the summary and some insights, I hope you in the future design, more attention to navigation design, in the navigation design to find some effective methods.

Of course, navigation design is not only information structure or organization method, but also with the interactive way of navigation, navigation visual performance, navigation extensibility, navigation balance, etc. have a lot of connections. For the Portal class site, there is also its special navigation requirements, this is what I need to study below.