Continuous design-Improving the product experience

"When a man crosses the road, he walks from one end of the road to the other at the zebra crossing." ”

· We can observe the change of the process.

"Seed, sprout, and finally blossom." ”

· The seed to the flowering process we rarely see, that is because it changes slowly, it takes weeks or even longer.

· This process can also be seen as the process changes when the camera is replayed for quick playback.

...

In the real world, the things we perceive change in succession.

Contrary

People make http://www.aliyun.com/zixun/aggregation/9992.html "> Technology products, but there are many discontinuous experience, such as street traffic lights, drink machine ... ；

In the computer network, the Web page design also has the discontinuity question.

Need to pay attention to

In the design of an Internet product, not only to consider the interface of graphic performance, layout typesetting ... In fact, the continuity of experience needs to be considered. We should pay attention to the details, each of the operational links. Designers (product, interactive, visual design ...) Should ensure that every moment the product experience is perfect.

Continuous in reality

"When the door is open/closed", we can observe its change.

Closed doors > Open doors. Process: from bottom to top.

The actual example, here is the Tencent building a certain floor:

Process: From the middle to the left and right.

In the example above, we can see when the door opens and when it can go in.

Intermittent in reality

"Automatic coin-operated beverage machine, its operation lets the human perception is intermittent." ”

Beverage machine operation steps: coin > Choose Beverage > Get drink

In the above example, we can only judge whether the machine is working by sound.

If the sound of the machine is no longer heard; After a long time, the drink hasn't come out yet. The machine is broken?

Traffic”

The red light means stop.

green light means pass.

Driving at the crossroads, we often find that people who wait for a red light will most of the time not notice when the green light, and the trouble is that the rear of the car will continue to whistle, until the person in front of the realization that the green light is lit, can pass.

This problem occurs when there is no transition or reminder of the red light to the change of the green light. Most are direct transformations.

Similarly, there is no one in the elevator room of the Tencent building to know when the elevator will reach the floor. When you want to go downstairs, waiting for the elevator to arrive is a long time, I tried at noon peak period waited for half an hour, finally gave up the stairs.

The problem here is similar to a traffic light: Wait for the elevator to arrive without a clear hint of what elevator will arrive. Even the elevator has failed to reach, do not know. Waiting time is too long, easy to cause anxiety.

Continuous in Web pages

Flickr Batch Management interface

(Access to Http://www.flickr.com/photos/organize)

Qzone Photo Upload interface

(Visit Qzone albums > upload photos)

Qzone Personal Center Dynamic

(Visit Qzone's personal center)

In the above example, when the user perceives the process of these changes, they can predict what will happen.

In addition, the Flickr batch management interface reveals that, in addition to the dynamic effects of the wait process, the dynamic effect implies that there are operational elements in the area, as well as how to operate, when the mouse is in an operable position.

Intermittent in web pages

When Qzone navigation switches

(Access to Qzone log)

QQ Farm Stealing vegetables

(Visit Qzone's personal center >qq Farm)

Sometimes click to steal vegetables, no response; repeated clicks many times ... Still show "can pick".

In the above example, the lack of the waiting process prompts, easily misunderstood, resulting in repeated clicks.

Continuous benefits

· Do not interrupt the user's task flow--everyone wants his goal to be achievable, and the user wants the current task to be coherent for each action he chooses.

· Make the product design more intimate, improve ease of use

Intermittent problems caused by

· Intermittent can make people do not anticipate, unpredictable results.

· In the face of automatic selling opportunities angry, waiting for traffic lights will be overwhelmed, waiting for the elevator anxiety ...

· The page has not been opened, repeat click Refresh. Wait too long to leave the site.

· The advanced features of the website do not know how to use

...

Why does a Web page have intermittent interfaces?

The background of a Web page works like magic:

1. The user inspires an action--mouse clicks a hyperlink, switches from the homepage of the navigation to the log

2. Send a request to the server--the server receives the request, processes, returns the result

3. Return a result to the user--page content refreshed

When the content is presented to the user from the technical level, there will only be 1 or 3; The reason for the interruption is that 2 is not presented to the user.

How to improve such intermittent into continuous?

In short, let "process" have "hint" animation.

These processes include:

· Mouse through

· Mouse click

· Keyboard

and other operating behavior, including the current touch-screen equipment.

Prompt animation

Gmail Mailbox Loading interface

The waiting process uses the animation progress form, reduces the user's anxiety;
There are other options when the waiting time is too long to make the product more intimate.

When do I need to be prompted?

For the time in the Web page, you are more recognized by the way:

0.1 seconds to display feedback in that time the user is acceptable.
1 seconds is a limited time for the user to keep the stream of thought flowing, and the user will notice the delay.
10 seconds is the limit time to keep the user focused on the current dialog box.

• If no special feedback is over 0.1 and less than 1 seconds, they will be more unbearable.
• For long delays, users will want to process other transactions while waiting to complete. So you need to show the time that you want to finish (usually by selecting a progress bar or a percentage), otherwise the user expects a big discount.

When do I need to animate?

· Metaphorical operation--text chain, button, an area of operation (the mouse is highlighted and clicked) ...

· The process of waiting

· The result of the operation---the list of drawers after the Drop-down list menu is clicked, the position dragged, the deletion will disappear ...

Another special example:

In Mac OS X system, when minimizing a window, the result of the operation is reflected, and the location of the window is minimized:

Subtle Design in dynamic

Android (HTC Sense)

Click, select all the dynamic effects of green highlight. When you click an item, the dynamic effect implies that the project has been activated and running.

I often have such trouble:

"I'm clear. , repeat the click attempt. --users are often unsure whether they have activated

Lack of prompting for an option activation process--no dynamic effect tells the user that the system is processing the request.

Ipod

Click and select to use the blue highlight effect. On the surface, the effect is no different from the Android operation.

Click Music to play, the process occasionally takes time to wait, it will be the effect of the selected has been rendered.

The retention of the selected state, the metaphor for the option to be activated--found in use, the effect of the click will be retained to avoid misunderstanding.
Without redundant activation tips-most people don't feel delayed. Typically, the loading process is only within seconds (acceptable range).

How to improve our products?

In the case of a traffic light, add one of the following ways:

1. The last few seconds will blink
2. Plus Countdown
3. The use of sound speed to inform, but also convenient for the blind
4. Form of Hourglass

Qzone navigation Item Switching example, you can add the wait process prompts, to avoid users repeatedly click or wait too long to leave.

There are many need us to think, discuss, how to let 8201.html "> product experience more intimate ...

Source: http://www.shupianhui.com/?p=297