Discussion on some problems of network navigation

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

Many sites lack targeted and user-friendly navigation design, difficult to find the path to connect to the relevant pages, and do not provide help to enable visitors/users to find the required information, the user experience is very bad. In this article, we try to do some research on website navigation interaction.

First of all, for web interaction designers, to solve the problems encountered above, the simple way is to design a perfect Web navigation system.

The purpose of optimizing website navigation design

A website navigation design is essential to provide a rich and friendly user experience, simple and intuitive navigation can not only improve the usability of the website, but also facilitate the user to find the information needed, can help to improve the user conversion rate.

If the homepage compared to the site façade, then navigation is the channel, these channels to the site every corner, the design of the navigation is reasonable for a site is very significant.

1 determines the user experience of browsing through the website, this is the most basic.

2 The website navigation design is reasonable, may the website content and the service biggest area display in front of the user.

3 reasonable navigation design can increase the user stickiness, improve the browsing depth of the site, thereby enhancing the website PV value.

4 Promote user consumption, improve website profitability. Guide users to consume, the products and services that users really need to display in front of him, even the user unexpected service you also presented.

5 increase the value of the website advertising, increase the revenue of the website advertisement.

Common structure of Web site navigation

Yahoo's web design has been the domestic public portal to imitate the object, we first look at the Yahoo site has several existing navigation styles:

1 Yahoo Home (most commonly used column navigation)

The navigation on the left-hand side of the Yahoo home page lists several columns that are most commonly used (or accessed most frequently, or that the site operates most to let users know). This navigation (also including the horizontal structure at the top of the page) is the most widely used navigation method in the Internet.

2 more yahoo!services (more navigation information display)

Yahoo as a global large-scale integrated portal site, the services provided are certainly more than the first page on the left-hand side of the navigation shown that a few, so more services How to navigate? At the same time, how to show the user? So Yahoo's designers give me a solution like the one above, click

3 tab Position navigation variants

We can still Yahoo! TV and other columns found such an interesting navigation structure, we think that he is a tab structure plus a drop-down menu of a navigation combination.

n TV home–shows–american idol–overview form a single dimensional navigation

N TV Home also offers a pull-down menu for users to quickly move to their level two column.

(Here I come across a puzzle where I don't know how to TV what the directory on the top level is, nor how to return.) )

4 Amazon Home

Amazon can be said to be the originator of the Web product navigation, let's take a look at Amazon's navigation style and what are the characteristics.

See who it looks like most?

5 Amazon Shopping List page

Discussion by Amazon shopping list page:

Single dimension and multidimensional navigation structure

We usually think of breadcrumbs as a single dimensional navigation structure, as shown in the red solid frame above, which is a linear way of navigation. However, in the application of the Web page, the "breadcrumbs" navigation has two applications:

A "traceability" is a "linear navigation" that tracks user behavior and records the user's activity footprint in the site,

b The interface element that is used to express the relationship of content attribution, that is, the hierarchical attribution relationship that we often see as "Main classification > Level classification > Level Two classification > three classification >......> Final content page".

Instead, the navigation on the left side of the page provides a variety of dimensions of navigation, and these various dimensions can be combined into different levels of bread crumbs structure

For example, I want to buy an LCD flat-screen TV and get in:

Electronics›audio & Video›tvs & Hdtvs›flat-panel tvs›flat-panel LCD TVs

On this page, the left-hand navigation provides me with brand, supplier, price, display size ... and many other options.

I can choose the brand and then choose the size, such as:

You can also first size and then select the brand, such as:

Therefore, this way to provide users with a variety of dimensions of navigation, running users such as in the electrical supermarket random stroll to pick goods, and do not have to consider the first to ask the shopping guide what brand or ask what size is good. This is in line with the user's psychological model, which is worthy of reference in design.

Problems and basic principles to be noticed in website navigation design

We communicate with each other on the daily needs of the site group, and summarize some problems and basic principles in the design of website navigation.

1. The position of the navigation bar. The location of the main navigation bar should be near the top or the left of the page, and if the navigation is too much for the content, make it easy for the user to tell which is the dominant and which is the navigation bar of the subject.

2. The simplicity of navigation use. The use of navigation must be as simple as possible, avoid the use of Drop-down or pop-up menu navigation, if you do not have to use, then the level of the menu not more than two layers.

3. Breadcrumbs and breadcrumbs. You should let the user know what the page is now and what the pages are related to the page you are looking at. For example, through the auxiliary navigation "Home > news channel > News full Name" in the location of the page in the text description, together with the navigation color highlighting, you can achieve visual intuitive direction of the effect.

4. The obvious difference of navigation content. The categories of directories or topics you navigate must be clear, don't confuse users, and if you have areas where you need to highlight major pages, you should be visually different from the general Web page.

5. The difference between navigation and sorting. Navigation and sorting easy to confuse, need to pay attention to (see Map to point out the problem)

is the tab here Navigation or sort?

Google Reader Processing

6. Accurate navigation text description. Users have a general idea of what they are looking for before they click on the navigation link, and the text on the link must accurately describe the content of the page to which the link arrives.