Interaction design is popular in recent years of a term. There are many data on the market today to introduce what is interaction design, interactive design, how to do. From the scene, tasks, users, operations and other analysis. However, the actual situation due to the restrictions, are often not very deep. So I combined with practical work experience to share with you, the specific time is how to do the design considerations. If you want to say what is a good interaction design, personal humble opinion is simple. This following is a simple 2 word around to start.
In this article, including a simple cognitive and operation of two parts:
1 mainly refers to the human cognitive process of thinking, this article mainly describes how users make decisions;
2 operating instructions in this article and click on the user's browsing behavior.
First is under cognition, we often can see the "big clearance before fitting, the last three days." These promotional terms, is to create scarcity with digital business, the user's attention, we say it: how to guide the user's number.
Create an atmosphere of scarcity and the urgent
To make people want to do one thing, just the opportunity to do this to make it difficult to obtain.
1 time (usually presented with a countdown, to create a user, "then do not buy, and only regret" the hint, or recommend to friends, with a "hurry to buy, soon to be over.")
(2) Quantity (limit 200, remaining 20)
Summary 1. The original price, price marked out, and then remove the original price. Because only one user does not know how cheap the price;
2 shows the original price, resulting in contrast, help decision-making. The price is not really that many users will not be considered.
Create social identity, to stimulate the user to follow suit <br /> social identity refers to a group of influential, simply, is that individuals in groups of herd mentality, people tend to think more about others than themselves in which case, others behavior is always reasonable and correct. I personally would like to make and the actions of others, to get the group identity, this effect is the "social identity."
Digital remind users of non-point <br /> not immediately believe that many people have the urge to point out number. Here the number of reminder, I think the previous slightly different.
1 play a guiding role of the basic tips;
2 where the operation will make users addicted to develop user habits, increase user stickiness;
3 for platform-level products, pulling each other to form a one-stop experience.
1 digital can not be fraud, especially e-commerce sites, for some price, time, number of digits to be true and accurate;
(2) a prominent position in these figures show, so users have an intuitive judgments and quick operation;
3 for the "micro" to remind, to design eye-catching interface, can not disturb the user.
Then let us talk about the operation is simple:
Here I first trotted out a common scenario:
1 button up so far, the user will not see;
2 large buttons can point vivid point, want to have a click.
This is often encountered daily work to do, where we can go to extract it under?
1 invited user (comments, purchase, registration) - functional requirements;
2 larger, should be close to obvious - the design requirements.
First look at an example:
This is a screenshot from Digg, Digg is a social news recommendation site, the recommendation is the core of the site operator, so the button should be large, to be obvious, but can not hide the button, it seems to be nonsense. However, this need leads to a concept - real-time visibility tool, which is clear to the user operating the entrance, showing the form of various buttons, text links, icons and so on. Next, we briefly analyze whether it is simple enough under:
1 from a cognitive perspective, where the main visual part. By the color and size, brightness and pitch changes play a layered, primary and secondary prominent, easy to read.
2 from the operational level, it is actually a click, almost the most simple. So through the 3-state button (the default, suspension, click) change the animation effect (change from Digg to Dugg) and other details to improve the product experience and reputation.
Here we look at some of the mainstream of the SNS design is how to feed it?
Which contains a picture, publishers, content, time stamp, Operator and other basic elements. There need to consider the relationship between the various elements, visually prioritizing, and thus easy to read, especially in the case of large feed, uncluttered, clean and tidy. Is not very simple, here we see a counter-example, what happens abuse button. Arrangement confusion level is not clear, concrete is not a burden.
Now let us look at how Gmail is doing.
Prominent markers is very important to the message classification functionality, so his default show, brightness adjusting it by not visually prominent, reducing visual clutter. Clicked with the highlight a clear focus, in short, the most important things put out by default, through processing, reducing visual clutter.
Finally, we summary, the real-time visibility tool points to note:
1 involves the user to perform critical operations, should remain always visible;
(2) reduce the visual interference, focused 3 remain visible operation to minimize Next we look the other tools - that is now hovering tool is simply hover over the trigger Operator.
It is obvious hover operations, by weakening the background, highlighting the changes in the focus region, to prompt the user. This interactive approach is suitable for pictures, lists and other large areas of style, and the need to provide read operations do not want to affect the results of the scene layout.
With the function of more complex, more and more pages carrying information, how to balance a variety of guidance, operation, feedback is the basic measure of a point interaction.
This is a photo editing examples, we will display and edit the general separation, through the operation of the entrance into the edit page, save the feedback. With advances in technology, used to take the jump page can now solve the partially refresh.
Next we look at an example:
Benefits: instant editing without jumps, the operation more convenient, which means there are more meta-data, resulting in better search and browsing experience.
Hover is now tool - easy to find sex
Hover that is now - need to consider easy to find, because you hide it. So for the interactive prompt the obvious need to design, here, move to the head on the relief effect, and is highlighted in blue down arrow, click the arrow after the triangular transformation. All the changes are detailed, and sometimes I think too much of it will do. And colleagues also recently discussed the work we do to do product design, there is an assumption: that the face of the mass users, their Internet experience little, do not understand where to click, what is the meaning of this function. Therefore, as designers need to do to guide the operation on the feedback to do enough to encourage users to try and explore. In short, interaction design product packaging to do is to tell a story, design scene, attract users, through the intimate guide to retain customers.
1 users usually know there will be more information click on the image 2 in the main path to trigger the operation of the content is a good hover method
Summary 1 operation is not important, the need to highlight the content of readability, you can say after the operation hidden in the mouse hovers over 2 obvious need to ensure that when the operation does not change the page layout of the 3 editing area marked 4 mouse state to edit mode (I type)
5 space to put the right circumstances can edit the entry