The expression state of the page element: normal, transient

Normal: Elements are always displayed on the page;
Transient: Elements need mouse hover, click, or focus events to trigger its display, when the event changes, such as the mouse out or focus disappeared, the elements can be hidden again;

People in life are constantly encountering problems like this, then there are all kinds of sensations, such as "Why Don't Tell Me", "What should I do now", or "This is what I didn't know before", and then "I already know, you said many times" and so on. These feelings have expressed a willingness to make life easier, so that all problems are no longer a problem.

The problem arises from two categories, one of which is due to asymmetric information, such as buying tickets for a concert or not, and the other is because of the contradictions in the event itself, such as the same cash in the payment http://www.aliyun.com/zixun/aggregation/39596. HTML "> concert tickets, there may not be enough balance to buy the phone. This article discusses the page element expression, mainly around the information asymmetry part of the reason, analysis of how to make the page elements in the right shape to display, so that users understand the purpose of the site, to achieve information symmetry, to eliminate confusion.

In fact, the simplest way to let information symmetry is replication, unfortunately, even if the human brain can not be turned into a computer, so communication becomes the only way, language is the way of communication between people, the Web page is the server and the user's way of communication.
We cut into the topic-How can communication make information symmetrical?

What's always needed--from tools and materials

In the picture above, several chefs are cooking different dishes, all the materials are placed on the table, no one will ask where the soy sauce, chopped green onion have spare? Even brush and all kinds of shovel, are placed in the eyes of people, perhaps this is the life of "WYSIWYG"?
Inference one: the need to complete the task, the provision of adequate tools and materials.

Page analysis
have been puzzled by the use of site search conditions to filter too few users, but also blamed for the 100% of the conditional filtering operation is too complex, the user threshold is high, but through the istockphoto Web site, found another reason: tools to start the task before the offer, perhaps more effective:

Continue to delve into this site, istockphoto in the navigation area: what are the tools to perform the action, and which are the tools for making conditional choices? It seems that in the same area, the more tools you perform, the more difficult it is for the user to understand.

When you browse to the search list body, found that each unit is a "picture +icon+ number" form, but strangely found that click on the picture, or number, or camera icon, into the page is the same Picture details page, the same way, the user unexpected things are not too good results.

"Interactive recommendation" 1. The tool is best to be normal and provided before the task is started, not after the task is completed;
2. Too many tools to the normal display, for the user is difficult to understand, according to the logic and conditions of the comb is very important.
3. Materials that are shown as a norm need to be homogeneous and different materials should be used for different purposes, minimizing the use of elements of different styles for the same purpose.

Two. Important things, do not be too nagging-about hints, status and results:

This is the piece must use props, shooting and ending, there will always be so "ka" two. But this is only the two, it is not a lot of opportunities for appearances. Reminding is important, but does not mean that all the reminders are necessary.

Corollary Two: Reminders may be useful, but reminders are tiring.
Page analysis
Take the more classic Yahoo registration as an example:

The page shown above, when the mouse focus on a specific form, will show the completion of this entry instructions, when the focus is removed, the description will disappear.
This descriptive reminder does not represent a state or a result, but a help message.

The image above is filled out incorrectly and correctly: only when the fill is not correct, will appear red warning, and fill in the correct, will not appear any hint to interrupt the user. (Remember the previous Yahoo practice is to fill in the correct format, there will be a small green tick, and then slowly disappear.) It seems that Yahoo feels that with the small hook fade to disturb the user, since the correct fill, simply do not need anything to interfere with the user. ）

Take a simple login as an example: it is necessary to remind the user that the password is wrong, because the result will cause the user not to take the next step. But reminders are reminders, turning reminders into operations, requiring "certainty" and always giving people the feeling of being superfluous.
So is there any need to "gild the lily" situation? There are, for example, two confirmation of irreversible operation, in which case the ease of use is sacrificed to achieve the purpose of stable and controllable operation.

Interactive recommendations
1. Help the nature of the reminder should be transient: as far as possible in user operations at the same time, to avoid affecting the main page elements;
2. Results that have an impact on subsequent operations: display, results that do not have an impact on subsequent operations: can be ignored;
3. For the results, there will never be a "choice" scenario: The result is not required for the user to "determine", all "OK" and "Cancel", before the results have meaning;

Three. Human nature is associated and extended--the operation and properties of goods

When the Shenzhen East gate Uniqlo physical store opened, it was interesting to go shopping. Surprised at the size of a façade shop, but only 3 staff. Careful observation, found that excellent Uniqlo on this business model is very confident, from the optimization of the display of goods, so the number of employees to reduce to less than supermarkets: Although the suspension is only a small number of samples, but can allow buyers to find different colors, different sizes, different textures of related goods. Excellent Uniqlo will be related products folded, packaged on display around the sample, buyers can find the right size through the label, and then take them out, unfold, further observation.
Think about it, if these clothes are all like a sample hanging up, will not only occupy a lot of space, the buyer's search process is also more arduous.

Inference three: To achieve information symmetry, we need to make good use of human innate and extended ability.
Page analysis
For mail, Gmail has a number of operations, the main operation of the release, using less operations to hide, is a more common method:

On Hulu, video units display titles, pictures, channels, and other video-related properties that are related to the content of the video, allowing users to know if they are initially interested. And when the mouse is hovering, will detail the length of the video, time, user ratings and so on, these additional attributes, will let the user further clear: Is it really necessary to click on this video?

Look at Lotte again, Cjmall and other sites in the form of goods, very surprised and do not have too many operation buttons, such as "View Details" and "buy", such as the upper left corner of the R, would rather use a lot of space to express the core properties and associated properties, but there is no action button.

Interactive recommendations
1. Commonly used operation suggestion Direct display (normal), not commonly used in mouse events can trigger the display (transient);
2. The core attributes of the item (what the object is) need to be displayed (normal), the associated attributes (how the object) can be triggered by mouse events (transient).
3. The core property of the item is more important than the operation because it is the object itself, not the action button, that attracts the user. So the attribute must be normal, and the operation can be transient.

Review
Although the elements of the page are numerous and complex, we can generalize the form of its manifestation into the normal and transient state. The elements of the tool and material nature are best displayed on the page in the normal state, used to help the user to complete the task easily, help and prompt in the action of the transient appearance, you can provide users with sufficient information in time to avoid errors; If the result affects subsequent operations, it should be a transient reminder and emphasis, if it does not affect subsequent operations, can be ignored; The object's "property" is more important than "operation", because what attracts the user is the object itself, because the item "property" can trigger the "operation" of the item, so the item "attribute" more to the normal display, "Operation" the degree of freedom is greater, the normal and transient display will not cause big problem.

Source: http://www.xso.name/blog/2010/05/expression/