Improving the product experience: Continuity design of Internet products

Article Description: Continuous design-improve the experience of the product.

"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 very 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, what we perceive as things change is continuous.

Instead

People make the 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, we need to consider the continuity of experience. 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 the real world

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

Close the door > Open the door. 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.

The intermittent in reality

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

Operation Steps of Beverage machine: coin > Choose Beverage > Get drink

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

If the sound of the machine is no longer heard; After a long time, the drink has not come out; is that the drink is stuck? The machine is broken?

Lights

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.

The problem is that the red light to change the green light process, there is no transition or reminder. Most of them 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: there is no clear clue as to when the elevator arrives, and I don't know when the 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 's 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 the Web page

When the Qzone navigation item is switched

(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 achieved, 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 is not open yet, repeat click Refresh. Wait too long to leave the site.

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

...

Why does the 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 to become 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 difficult to endure.
• 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?

• Metaphor Manipulation --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 clicking the Drop-down List menu, the position dragged, and the deletion will disappear ...

Another special example:

MAC OS X system, to minimize the animation effect of the window, telling the user to minimize the location of the window:

Subtle design in the dynamic

Android (HTC Sense)

Click, select all the dynamic effects of green highlight. After clicking on an item, the dynamic effect implies that the project has been activated and run.

I often have this kind of trouble:

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

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.
No redundant activation process hints--most people don't feel like there's a delay. 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, explore, how to make the product experience more intimate ...