Website design: The expression of "state" and "action" in user interface design

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

First, the question causes the ponder

The previous team and colleagues to explore a small demand and then encountered a button to indicate "action" and the expression "state" between the contradictions. Think of this problem has been discussed years ago, so here to tidy up the idea, and share with you.

The specific case is: as shown in the figure above, when the "Enable" and "deactivate" search custom features, does this button mean "state" or "action"? To put it simply, does 1 in the figure above indicate whether it is currently inactive or does it mean that the operation is inactive when clicked? The answer is clearly not clear.

How can the difference between the two be clearly expressed and the user's misunderstanding be reduced? We start with the definition of "action", "state" and the relationship between the two.

Ii. What is action and what is state

Action is a movement that has a certain motive and purpose and points to a certain object.

State refers to the form of a person or thing.

In combination, action is the movement that motivates a person or thing to change a state, and the state is the result of the action. So the two are often closely related, sometimes even mutually conditional.

For example, "Operation of the Radio", I need to twist the knob or press the "open" action to turn on the radio, when the action is completed, the radio status is "open." and "Off" the premise of the radio this action is an "open" state of the radio.

"Sounds so complicated!" A lot of people would think so. Why do we rarely feel this way when we face similar events every day in our lives?

Here's a look at the examples of life that we might understand.

Iii. Examples of life

1. Light switch

"Figure rezoning

Single-switch, one of our most common switches, design extremely simple, press the side is open, the other side is off. As far as the other side is open, few people will be particularly concerned. Because I tried two times to always do the operation, there is little cost. People don't feel any discomfort.

Of course, there are better designs now.

"Figure rezoning

2. Ipod HOLD

"Figure 3"

Apple's ipod player's key lock function "HOLD". When the switch is clicked on the "HOLD" side of the word, the left side will be exposed to red. And the flip to the other side is no color. The ingenious use of the color of people's heart characteristics to distinguish between the hold state. #p # subtitle #e#

3, monitor

"Figure 4"

Monitor power switch, another "action" and "state" combination of applications. Use the shape of the button highlighting, and the graphical representation of the switch to indicate the executable action (this is used to switch here), using the background light of the dark and light to indicate the switch status (light indicates that the state is now open).

Similar applications are very many, we can see that the characteristics are: 1, can touch, press (toggle) button 2, color Distinction 3, some also have obvious location differences and identification.

Iv. software and examples from the website

The software or Web interface is clearly not a touch-sensitive feature, but our designers try to simulate the shape and texture of things that are similar to reality.

"Figure 5"

The UI commonly used by the viewer. Click the "Play" and "pause" keys in the middle to toggle the operation. Can see, here ignores the performance of the state, I can not visually see now is playing or paused state. The reason is simple, like switching lights, the film is open and closed can be directly perceived, do not need a special status hint.

"Figure 6"

Then look at the list of view switches. The "Switch to larger" feature, as shown in the arrow on the diagram, is also such an application, ignoring the performance of the state. Because the "switch to large" action, the interface state will be significantly changed (large image mode), do not need a special state to identify.

Look at another situation.

"Figure 7"

Random playback in a music player. Because "random" and "sequential" playback is not easy to visualize, the status needs to be clearly identified. The action itself is weakened by the fact that it is not the core function, only relies on the interface function block division to represent the operability here.

"Figure 8"

Or music player, this time the difference is linear state of expression. Volume is not just "open, off" two states so simple, but from small to large linear changes. The above UI has a good representation of both ends of the volume by the shape of the left and right two speakers, and the middle circle button is both an action joystick and a tick mark for volume size. Because it is well connected to the left to form a sink effect, the length of the filling part again reflects the volume size, very clever. The following UI only places the volume on the left, although the icons on the left side of the big hours vary, but the initial use will be difficult to understand.

"Figure 9"

The above is an account management of the UI, the State and Operation (action) of the obvious two-column logo, although it is a bit of a nagging, but also clearly expressed the meaning.

Finally, we look at the application of a mobile interface.

"Figure 10"

Imitate the physical toggle switch texture and color expression, very good "action" and "state" combination of examples. Do you still make mistakes in this design?

V. Summary

A lot of examples have been used before, so how can we do well the design of "action" and "state"?

1, the separation State and action representation (Figure 9). The most direct, ambiguous may be minimal, but may occupy a lot of space, and cause information redundancy.

2. Ignore the state and highlight the action (Figure 6). This is true when the state is visually identifiable without identification.

3. Ignore the action and highlight the state (Figure 7). When an action operation has been divided into the specified area, it can be expected to be applicable when it is operable.

4. Imagery and Bionics (Fig. 10). When establishing sensory connections with real objects, the cost of learning is greatly reduced. This kind of use is not good to define its scope of application, left to discuss it.