Practical Guide to Interactive Design (vii): CLEAR and effective labeling

Any location can be clear "where am I?" What's here? Where can I go from here?

It's not a fun thing to get lost, just imagine how confused, frustrated, angry and fearful you would be when you were driving to the highway fork, but you couldn't see any signs. In order to avoid disorientation, we invented a variety of navigation tools, large to the satellite positioning system, small to the compass, human beings in this matter, highly innovative.

Lost in the Web site, although not a matter of life-and-death, but will bring a lot of negative effects, such as: User experience drops, tasks can not be completed, user churn and so on. We can avoid this by using a good navigation system. A good navigation system can help people find their place in the site and help them develop better query strategies to improve their understanding of the content.

Before you make a solution, understand why they get lost:

1, when people can not understand the information, will create confusion

2, people lost in the query process, do not know what to do next

3, people may lose the sense of direction in the website, can not go back to the previous page, or even home

Figure 1

For example, walking through this site in Figure 1, you are prone to a dilemma. Above, two clicks on the open page, there is no navigation information, not even any exit from the current page.

4, people in the information system deviated from the direction, distracted. People deviate from the main task because of the numerous and distracting information. In this regard, you can refer to the interactive guide, "highlighting the focus, at a glance."

Figure 2

Figure 2 of the login page, can be described as dazzling, the rich degree of information is not inferior to the home page, the designer's goal is to want users to give up the main task of login, to the "more important" place?

You might think that it's not very easy to keep users from getting lost, I just put the global navigation in all the pages so they can move between the core content of the site. Then put the crumbs, let them know where they are, and everything will be Bob.

But is it actually true? Global navigation may help users understand the core content of your site, but in specific tasks, such as Figure 3 Taobao Global navigation, if placed in the selection of goods or payment of the page, I am afraid not only can not guide users, but also interfere with the completion of the task.

Figure 3

Be careful not to get caught up in the excessive design of the navigation system. What we need to do is to use personas and scenes as a reference to determine the best route to the content that the persona chooses, not to provide all the lines, and not to copy the entire structure of the site to each page, resulting in a burden of page information. A good navigation system makes people feel less aware of its existence. As if watching sports, the referee will make a lot of correct judgments, and we often ignore his existence, but once the referee made a wrong verdict, will attract the audience on the scene of a sigh.

So, what should we do to ensure that users are not lost in the site?

First, we want to help the user orient, that is, to determine the "current location."

Even if the GPS satellite positioning system is so powerful, it must always be on the map to mark our "current position" in order to truly guide us. Unlike in the real world, where there is no North-south divide or geographical location in the online world, we must use various elements of the navigation system to create scenarios where the current position can be judged by the user:

1, pay attention to the brand information of the website

Users should always know what sites they are browsing, and putting their name, identity, and identity map into all pages of the site is the most significant way to achieve this.

2. Detail Creation Scenario

We can pass the information of the current position to the user through the page title, page text. The browser title and URL are also the basis for the user to judge. The highlight state of the current navigation options is also a common method.

3. Bread crumbs

"Breadcrumbs" is also a good tool to mark the location of the current site. In addition, breadcrumbs can also deliver site structure information and record the user's access footprint.

4, Escape Cabin mode

The escape pod model is also a card to help the user determine the current position. That is, on all pages of the site to set a unified export, no matter what time, click here, can return to the home page. Most Web sites are set on the site logo, has become a practice.

Secondly, according to user needs, determine the navigation mechanism.

The user's needs determine what navigation links we should place. In different types of pages, the problems that users create vary. We need to anticipate these problems and then ask ourselves the same questions when designing the navigation.

In general, the user would ask, "Where am I?" What am I supposed to do here? " Where else can I go? "on e-commerce sites, they may ask, how can I find the product information I want; specifically, in a product, they may ask," How can I contact a customer service? " Where I can find related products. "

All we have to do is not come up with all the possible problems and, correspondingly, we can't put all the answers to the page. At this time, personas and scenes will play a very important role. For different pages, figure out where each user role is going and place the navigation they need most. For example: Does your character need to jump from one column to another at any time? If so, make sure that links to top-level columns are always available.

Once you have identified what the user wants to achieve, consider the simplest and easiest solution to this goal. For example, in Figure 4, perhaps your persona needs just a "next group" link.

Figure 4

Finally, test the navigation ability of the page through the stress testing.

How to test the navigation ability of the page?

(1) Randomly select a page from your website;

(2) Print this page into Black-and-white, and the page head of the browser address bar and the following copyright and company information part of the removal;

(3) Pretend that you are entering this site for the first time and try to answer the following questions (see the list below);

(4) Write down what you think and answer on a piece of paper;

List of issues:

1, what is the content of this page? Draw a square in the title of the page or write clearly on the paper;

2. What kind of website is this? Use the name of the site in circles, or write your own on the paper;

3, what is the main section of this website? Identify with X;

4, what is the main section of this page? To mark with a triangle around X;

5. How do I get to the homepage of this website? with h logo;

6. How can I get to the top of the website? T to identify;

7. What does each group of links represent? Circle the main link on the page and write down the logo;

D: Used to identify more, detailed introduction and this section of the sub-page, etc.;

N: Other adjacent pages in the same forum;

S: On the same site but not adjacent to the page;

O: Leave the page of this website;

8, how do you reach this page through the path? Please write your path to reach this page, choose 1> Select 2> 3 ...

Let the other members of your team or your friends who are familiar with your site do the same experiment with you, like skydiving to enter any page in the site, and then put the answer on the paper, you can see the problem of navigation.

About navigation pressure test more detailed content, please refer to the four Niang article, we do not elaborate.

Reference documents

Web Information Architecture: Designing a large Web site (US) Moviry, Rosen

"Web Navigation Design" (Karbach) (KALBACH,J)

"Designing Interfaces" (MEI) Jenifer Tidwell

Article Source: Taobao ued