Good interaction design is simple

Interactive design is a popular word in recent years. Now there is a lot of information on the market to introduce what is interactive design, how to do interactive design. Analyze from scene, task, user, operation etc. However, due to the limitations of the actual situation, often can not be very in-depth. So I share the actual work experience with you, the specific design time is how to consider. If you want to say what is a good interactive design, personal opinion is simple. This article is all about the simple 2 words to expand.

Simple in this article includes cognitive and operational two parts:
1. Cognition mainly refers to people's thinking process, this article mainly explains how users make decisions;
2. The operation describes the user's browsing and clicking behavior in this article.

First of all, we can often see the "big clearance before the decoration, the last 3 days". These promotional terms, is the number of businesses to create scarce, to attract the attention of users, we say: How to guide the number of users.

Create an atmosphere of scarcity and urgency

To make people want to do something, just make it difficult to get the opportunity to do it.
1. Time (usually in the form of Countdown, to create a user, "Do not buy at this time, only regret" hint, or &http://www.aliyun.com/zixun/aggregation/37954.html ">nbsp; Recommended to friends, with a "buy quickly, will be over soon")
2. Quantity (limited to 200 pieces, only 20 left)

Summary
1. The original price, mark out the current price, and then remove the original prices. Because only one price users do not know how cheap;
2. Give the original price, produce contrast, help the user to make decision. As to whether the current price is true, many users will not consider it.

Create social identity and motivate users to follow suit
Social identity refers to the influence of a group, in short, the group of individuals in the herd mentality, people tend to think that others than themselves to understand the situation, other people's behavior is always reasonable and correct. So the individual will do the same behavior as others, to obtain the group's identity, this effect is "social identity."

Digital reminders, so that users can not point to
I believe many people have the impulse to point out the numbers immediately. Here the number of reminders, I think with the previous slightly different.

1. Play the most basic guiding role;
2. The operation here will allow users to become addicted, so as to cultivate user habits, increase user stickiness;
3. For platform-level products, is to pull each other to form a one-stop experience.

Summary：
1. Digital can not be fraudulent, especially e-commerce sites, for some prices, time, number of numbers to be true and accurate;
2. To display these figures in a conspicuous position, so that users have an intuitive judgment and quick operation;
3. For "micro" reminders, the interface to design a conspicuous, and can not disturb the user.

Then let's talk about the simple operation:

Here I first throw a common scene:

1. Push button So far, users will not see;
2. The button can be big, vivid point, want to have click.

This is the daily work often encountered in the matter, here we can go to refine it?

1. Invite users to operate (comment, purchase, register)-Functional requirements;
2. To be large, to be near, to be obvious-design requirements.

Let's take a look at a case:

This is a screenshot from Digg, Digg is a social recommendation of the news site, the recommendation is the core of the site operation, so the button to be large, to be obvious, buttons can not hide, this seems to be nonsense. But need to draw out a concept of this article-real-time visible tools, the tool is the user operation of the entrance to clear, the form is a variety of buttons, text chain, icons and so on. Let's simply analyze if it's simple enough:

1. From a cognitive standpoint, this is mainly a visual part. Through the color and size of the text, lightness and spacing of the changes to the level of sense, primary and secondary prominence, easy to read.
2. From the operational level is actually clicked, is nearly the simplest. So we need to improve our product experience and reputation through the details of the button's 3 states (default, suspension, click), animation effects (from Digg to Dugg).

Below we look at some of the mainstream SNS feed design is how?

Qzone

Facebook

Sina Weibo

Tencent Weibo

Digg
It contains the basic elements of Avatar, publisher, content, timestamp, operation entrance, etc. Here you need to consider the relationship between the elements, from the visual distinction between primary and secondary, so as to facilitate reading, especially in the case of large area feeds, not messy, clean, neat. is not very simple, let's look at a counter example, the abuse button will be what. The arrangement is chaotic, the level is not clear, concrete is not cumbersome.

Now let's see how Gmail does it.

The highlight is a very important function of the message classification, so it will be displayed by default, through the adjustment of the Ming to make it visually not prominent, reduce visual interference. Click to highlight the highlighted, in short, the most important things by default, through processing, reduce visual interference.

Finally, we summarize the points to be noted for real time visible tools:
1. Involve the user to perform the important operation, should maintain always visible;
2. Reduce visual interference, highlight
3. Keep Visible operation minimized
Next, we'll look at another tool-hover tool, in short, mouse hover trigger operation entry.

This is obviously a hover operation that prompts the user to operate by weakening the background and highlighting the changes in the focus area. This interaction is suitable for large area styles such as pictures, lists, and scenes that do not want to affect the layout reading effect.

As the functions become more and more complex, the page load information is also more and more, how to balance the various guidance, operation, feedback is the basic point of measuring an interactive work.

This is a photo editing case, generally we will display and edit separate, through the operation entrance into the edit page, save feedback. With the progress of technology, the previously required page jump can now be local refresh resolved.

Now let's look at an example:

Benefits: Instant editing does not have to jump, is easier to operate, means more metadata, resulting in a better search and browsing experience.

Hover Instant tool-easy to discover sex

Hover now-you need to consider easy discovery because you hide it. So for the interactive hint to design is very obvious, here, move to the avatar on the embossed effect, and then the Drop-down arrows in blue highlighted, click the arrow direction of the triangle to change. It's all a change in detail, and sometimes I think it's too much. Recently work and colleagues discussed, we do product design, there is a hypothesis: is the face of the vast number of users, their Internet experience is very little, do not know where to click, this function is what meaning. So as designers need to do a good job of guidance, the operation of the feedback to do enough to encourage users to try and explore. In short, interactive design is the product of packaging, to tell stories, design scenes, attract users, through attentive guidance to retain users.

Tips:

1. Users usually know that clicking the image will have more information
2. It is a good way to trigger hover content in the main operation path

Summary
1. Operation is not very important, the need to highlight the readability of the content, you can speak the operation hidden in the mouse after hover
2. Clear operation of the need to ensure that the page layout does not change
3. The editorial area is clearly
4. The mouse state changes to edit state (I-shaped)
5. You can put the editing entrance when the space is suitable

Resources
1. http://www.socialbeta.cn/
2. Web Interface Design