Smelly fish: The principle of page expression

The principle of page expression is part of the entire Web interaction design method:
Overview of page expression principles:
1. Less information is better.
2. Do not provide redundant functionality.
3. The structure is easier to understand.
4. The expression of information should be clear, clear and direct.
5. The operation is identifiable.
6. Before operation, the result is predictable.
7. Operation with feedback.
8. After operation, the operation can be undone.
9. Let users know where they are.
10. Avoid content that looks like advertising.
11. The same function is located on different pages.
12. Consistency of wording.

Detailed Description:
1. Less information is better.
Instead of reading the site, the user is browsing the site. They browse through text and pictures that match their goals, and lengthy links, descriptions, and messages only slow down the user and "hide" important information.

Example One.

Bulletin board has "details", then this page only need to write the most important one or two words:
Recently, individual illegal gangs use custom code to steal QQ passwords, reprinted ads. In order to protect the interests of the vast number of netizens, similar behavior of the QQ space will be permanently closed. For more information

Instance two.

The left side of the text is too much, these words can be completely streamlined. Take the "warm tip" in the lower left corner for example:

About uploading photos of the instructions, warm tips before the specific instructions. There's no need to talk about it. The warm tips here can be simplified directly to:

To take a closer look, this page is registered as a city of People's pages, this information would not have to appear here. In other words, the whole paragraph of warm tips can be deleted.

2. Do not provide more than the function to reduce errors.
Providing as much functionality as possible does not mean that more users will like it. Provide too much functionality, too much freedom not only will not make the product more powerful, but will cause many errors to the user guidance.

Example One. Navigation in QQ Space Mall

In order to allow users to preview the navigation in their own space to change the effect of the skin, this shows the user's personal space in the navigation. Obviously there is no need for users to leave the mall through it. However, the "home page, log ..." is clickable.
In order to retain the user, and avoid misoperation, have to pop up a dialog box:

Instance two. In Photoshop CS2, a working window can be dragged in a larger range, as shown in the figure:

Previous versions can only do this:

The top 80px can also be used as a display work window compared to previous versions. PHOTOSHOPCS2 provides greater freedom of operation. However, if you drag the work window up, the menu bar and the accessibility bar will be blocked. In the occlusion of the State, to click the "Show Transformation control" This complex option, but also have to drag the work window down. Worse, some users may not be able to find this feature at all.

Although blocking the menu bar is caused by the user's own operation, this does not mean that the design is no problem. Users are not always aware of the full consequences of the operation when blocking the menu bar.

This feature was canceled in Photoshop CS3.

Example three:

When the user in the Qzone Mall in the position of the player above, it is likely not aware of "dress up Space", "Custom", "Information Center" three links will be blocked, can not click.
Allows the user to place the dress in any position on the page, this powerful function is not based on "no error".

The idea of not providing superfluous functionality comes from the "goal-oriented design concept" of Alan Cooper.

"Goal-oriented design concept" first distinguishes between the user's "goal" and "task" of the two concepts.
The goal is what the user needs to do, and the task is the action that has to be done to accomplish the goal. The task is not a user's requirement. It's better to achieve goals if you can accomplish fewer tasks. A product is helping users achieve their goals. The process by which a user uses a product is the process by which the product accomplishes its goal. Therefore, in the premise of helping users achieve their goals, the less the product requires the user to do, the better.

3. Structure is easier to understand
Structure refers to: the practice of summarizing information, organizing it into several articles and presenting it in the form of entries. Similar to the following figure:

It can improve readers ' reading speed and improve reading efficiency by showing the text information of large amount of content.

Obviously the following paragraph of the text is difficult to read:
Please be sure to fill out your personal information, if because of your personal data errors caused by the failure to successfully handle CITIC QQ credit card and can not receive a gift QQ members, Tencent and Citic will not assume any responsibility. QQ users click on the "Download Application form" (Download the application form, do not modify the document, directly click Print, or can not enter the piece.) Be sure to print out the application form and apply for the contract and send it back to the credit card center. and fill out the application form after printing. Prepare the ID card copy (must), as well as other alternative property documents: Copies of other credit cards, the copy of the certificate of production, the copy of the proof of the real estate, the copy of the proof of income, the turnover, and so on, can be mailed to the "Shenzhen Post 028-222 Box", Or express to "Guangdong province Shenzhen Luohu District Sungang No. 12th, China Times Square B block 29 floor into the room", zip 518029. CITIC Bank Credit Card Center after receiving the application information, that is, start to review the credit card applications, the terms of reference, application progress inquiries, see the website http://bank.ecitic.com/cards/, or consulting Citic Bank credit card customer Service center 40088-95558. Choose this way to do card users can get a value of 120 Yuan QQ membership Package (12 month membership). QQ users in the application for success and issued a credit card within 10 working days, will open the user's QQ membership for 6 months, after the successful activation, and then extend the user 6 months of QQ membership, note: QQ member Services by the Citic Bank to buy and presented to QQ credit card customers. Previously through the mobile phone, PHS, broadband, telecommunications users to pay the open membership, this can not enjoy the gift. The applicant must be a new user of Citic Bank to enjoy the benefits of giving the membership service. If you already have a CITIC bank credit card, then apply for CITIC Bank QQ credit card does not enjoy the gift of QQ member services.

By dividing the text into pieces, it's much easier to read:
A, the applicant must be a new user of Citic Bank, you can enjoy the benefits of giving membership services. If you already have a CITIC bank credit card, then apply for CITIC Bank QQ credit card does not enjoy the gift of QQ member services.
B, if your personal information is not accurate and can not successfully handle CITIC QQ credit card and can not be donated QQ members, Tencent and Citic will not assume any responsibility.
C, download the application form, do not modify the document, directly click to print, or can not enter the piece.
D, please be sure to print out the application form and the application contract, and send it back to the credit card center.
E, mailing materials: After printing and fill out the application form, ID card copy (must), other credit card copies, car production certificate copy, real estate proof copy, income proof copy, turnover and other proof copy.
F, mailing address: Shenzhen post 028-222 mail box. Or express to: Guangdong Province Shenzhen Luohu District, Sungang 12th, China Times Square B block 29 floor into the room zip 518029.
G, Citic Bank Credit card Center after receiving the application information, that is, start to audit credit card applications, the application of the terms of attention, application progress inquiries, see the website http://bank.ecitic.com/cards/, or consulting Citic Bank credit card customer Service center 40088-95558.
H, choose this way to do card users can get a value of 120 Yuan QQ membership Package (12 month membership). QQ users in the application for success and issued a credit card within 10 working days, will open the user's QQ membership for 6 months, after the successful activation, and then extend the user 6 months of QQ membership, note: QQ member Services by the Citic Bank to buy and presented to QQ credit card customers. Previously through the mobile phone, PHS, broadband, telecommunications users to pay the open membership, this can not enjoy the gift.

4. The expression of information should be clear, clear and direct.
Clear, clear and direct is a basic requirement of information expression. But it's not easy to do.
Example one:

Question 1. The subtitle list is ambiguous

This statement still does not explain "what is here." If you can use this sentence to explain: "Add text content here, reveal your mood", the effect will be better. As for "Let friends know!" "These few words are almost useless, without conveying any amount of information.

Question 2. "Take off" button is not easy to find

"Take off" button in the bottom right corner of the box, many times will appear outside the preview area, see, and the text is too small to read.

Example two:

"You are not logged in" so "please log in first". This is a very clear logical relationship.

"The reason may be long time does not operate but invalid, thanks cooperation!" "What is it that needs to be explained?" In fact, this is another thing to say: "You are very strange just logged in, now why do you log in again?" I tell you: The reason may be a long time did not operate and failed ...

The expression here is too much for brevity, to confuse two questions and not articulate them.

5. Operation identifiable
Links should be like links, buttons should be like buttons. Blue, underlined text is the common expression of the current linked text. The button should be three-dimensional, and it looks like it can be clicked.
The operational identifiable principle is to ensure that the user triggers the operation of the possibility.

There is a bad example in QQ space:

There is an input box, but the captcha picture is not visible. "Don't see the picture how do I know what to enter?" "I don't know what to type, I'm not going to input it." "The expression before the operation is not clear enough to affect the likelihood of triggering the operation."
(The above line of warm hints is a remedial measure, but it does not solve the problem.) If all by the hint on it, then you do not need a designer, there are writers enough. ）

6. Before operation, the result is predictable.
Before an operation is done, the user should be able to guess roughly what the result will be. Or, the design of the operation should be the same as the user's expectation. The links that are written only as "back" and "next" are better to write clearly if possible. For example, write: "Next step into the shopping cart", "Back to Home" ...

Example One.

If the upper-right corner of the link to write directly: More brand area, users do not need to look at the whole piece of content, directly can understand the link to which page. Faster and easier to read this link will allow more users to click on it, similar to the following:

Instance two.


Two buttons are called "Resurrection Ta", but in fact, the effect of the operation is not the same, the front of a button is to open another page, and the back of a button is really to achieve the "resurrection" operation. Using the same buttons to represent different operations makes it more difficult for the user to guess the consequences of the operation.

In some cases, it is the designer's intention to make the results unpredictable:

Click on the title, not to enter this article, but to enter the "Show coquettish" column, the following figure:

This article belongs to this "show coquettish" column, and in the first screen can not see this article.

7. Operation with feedback.
After doing an operation, you need a response on the page.

Should guide the user to put the pendant on the page comparison position, so the item's default position in the first screen, in order to ensure that users click on an item can be seen on the page, QQ Space Mall page is very short.

QQ Show Mall left fixed, the right can be scrolled, to ensure that users can see the click of an item after the change-left preview on the map has changed.

Make sure that the action has feedback and that the link should be avoided pointing to the current page.
Point to the current page of the link, click, just page refresh, and did not explicitly tell the user just click on what the consequences of the operation. (unless the link is called "Refresh current Page".) ）

Bad Example: Personality domain

Before the problem: when the type of personalized domain name is not required to click "Query", the page does not respond.

Current design:

When the focus enters the second input box, it turns red.

There are still problems:

Click on the "Query" page or no response.

8. After operation, the operation can be undone.
After performing an operation, the revocation should be allowed, allowing the user to renege.

Example one:

Don't want to go in, what to do?

Example two:



What if you don't want to post a reply?

9. Let the user know where to place-page title, navigation

Letting users know where they are at the moment is a basic requirement. A clear indication of what the current page is and where it can greatly reduce the user's sense of fear.
There are two main ways to achieve this requirement: page title and navigation

The page title is the description of the entire page, which can be the most direct indication of what the current page is.

The world News is the title of the page.

The "Audio, TV & Home Theater" is the title of the page.

The page title is written at the top of a page and is usually the largest font size in a page.

In the Web interface, using hierarchical navigation (road point) makes it clear where the current page is located throughout the site.

The "Home/products/acrobat accessibility/" clearly indicates the location of the current page "Adobe Acrobat Connect Professional" throughout the site. ("Adobe Acrobat Connect Professional" is the title of this page.) ）

10. Avoid content that looks like an ad


Users will be reading the Web page will be "selective" reading, both, not conveys according to the order from left to right, from top to bottom, and not simply read in accordance with the visual law, the color of conspicuous, able to move the graphics can easily cause visual attention, if it looks like advertising, then, Users will skip that part of the content read. The reading order of Web pages not only follows the regular reading rules, but also is influenced by the reading habits of Web pages.

Therefore, the content of the text on the page do not act like advertising. Not a larger picture of the image can be more prominent content, the content of the elements to move up, does not mean that the more attractive users; "Free access" is not purely a means of attracting people. These expressions are likely to make users misunderstand.

11. The same function is located on different pages. Consistency）
The same functionality that appears in the same location on different pages can reduce the time the user is looking for.

Example One.



Back to Yahoo Home Link: Yahoo! Always appears in the upper-left corner of the page.

Instance two.



Links to personal accounts in Google always appear in the upper-right corner of the page.

Example three:

Amazon's left column is always used to show the taxonomy index.

12. Consistency of wording

The expression avoids using "user", and uses "Netizen", "friend", "visitor" and so on.
The second person uses "you" instead of "you".
"Log In" instead of "login". Landing a word will also do use, such as: Landing qq.com, found more wonderful ... In this case, try to avoid the word "landing" and replace it with the words "access" and "browse".
Tencent's products, "friends" once have a special meaning, refers to "QQ friends." Therefore, you should avoid using "friends" in the usual presentation.

An effective way to avoid confusing wording: Create a language library for a product
Create a language library for each product. For example:

The inconsistency in wording, in addition to the non-standard work, the lack of uniform standards, the other is because the product in the definition of the concept of the process itself is not defined clearly, on the page when the response to the inconsistent wording, for example:

"Mood Show preview" suggests that "mood show" refers to the outer frame + text content.
"Mood Show" function is only to change the frame. This means that the "mood show" refers to the outer frame.
If according to the first definition to understand, "mood show refers to the outer frame + text content", then click "Next", which text content will also change?

The lack of a separate definition of text content and outer frame makes the concept of "mood show" abused, resulting in conceptual confusion. Conceptual confusion is a problem for operations.

In this example, the same word has different meanings. The principle of "unity of language" requires that the same thing be described in the same word, which is also a requirement: different meanings use different words.

Source: isd.tencent.com/?p=1893