The Five pillars of interactive design that deserve your deep understanding

Truly excellent interactive design is driven by a human bond. So the question is, how do people's emotional ties translate into digital interfaces and interfaces? The answer is of course the existence, but it is not by the black and white is not, right and wrong constitute. Based on our experience, the truly successful interaction design is based on the perfect implementation of the basic user experience design.

Doesn't look like an answer? It's OK, let's watch it slowly.

1. Result-driven design

Even if you are not personally involved in user research, you still need to know how to build a mature understanding of design.

We have an in-depth introduction to the four UX documents that an interactive designer must know in this article in the 4 UX documents required by the user Experience Designer. These documents--or the process--can help you build a flesh-and-blood "user" and a more realistic restore of specific product processes:

1. User Role (Persona): Persona documents (controlled in 2~5) usually need to include your target users. As a fictional role in persona, its attributes and characteristics are set based on product research and user orientation, and are used as "ideal users" in the subsequent design process, which is essentially a placeholder. As a character set, it will contain personal information, much more than age and income information. The goal of the persona document is to use roles to verify how your target users feel about your design.

2. Empathy maps (Empathy map): It's like a lightweight persona document that can be used in a tight resource situation. Empathy Map removes the character and character part of the persona and focuses more on the user's feelings in a given situation.

3, User scenario: If persona is to help you design a role in the story, then user scenario is the story of the script. User scripts are usually designed around a specific goal. For example, the next day is Mother's Day, to book a gift for mother. The goal is clear, to achieve the goal, users need to click a few times button, go which process, how long it takes, how to integrate emotions in the process, throughout. After the entire user process has been predefined, the designer is confident about the UI and UX design.

4, User maps (Customer journey map): This document is similar to the user script at the door, but it spans more than the former, throughout the experience design. Designers can have a deeper understanding of the product's background to better design, and after the product is put into use is not the final end, which is the reason for such a large span. The user travel map will cover all the information about role information, user scripts, and empathy maps. This is not to make the user travel map into a hodgepodge, but to the user's personality and user flow, interaction process together to see the problem, each stage of different links, are involved in different emotions and emotions.

　　2. Usability Design

Ensure availability is a minimalist design. If your users are not able to use the product properly, not to mention attracting them. Take a look at the Eventbrite seat design below.

This online app allows the active organizer to keep a specific seat from the beginning of the activity, and the whole process retains a lot of detail (specific rows, columns, proximity to the dance floor, etc.), and the designer integrates multiple steps and processes into one process.

Like Eventbrite, a complex system is especially easy to use, and the flow of the process is smooth enough for the user to be able to handle it effortlessly. The shorter the time spent exploring the system, the more users are able to do what is really important at hand.

3. Availability Design and signifier

The availability design has been explained in our previous articles:

Affordance is a word created by James J. Gibson, Gibson is one of the most important cognitive psychologists of the 20th century, and his ecological visual perception and direct perception have opened up new territory for cognitive psychology. Affordance is afford (provide, give, undertake) the noun form, the environment affordance refers to the environment can provide the animal's attribute, whether good or bad, so I think "availability" is a suitable translation. The example of Gibson used to explain affordance is this: if the surface of a piece of land is close to horizontal (rather than slanted), close to flat (rather than raised or sunken), and fully extended (relating to the size of the animal), if the material on the surface is hard (related to the weight of the animal), We can call it the base, the field, or the ground, which can stand up (stan-on-able), allowing four or two-legged animals to remain upright, which can walk (walk-on-able) and run (run-over-able), It is not as sink-into-able as the surface of the water or the surface of the swamp is to a certain weight of animals. The four properties listed-horizontal, flat, stretched, and hard-are the physical properties of this surface, if they are measured in terms of the weights and measures used in physics, but for the support of specific animals, they must be related to animals to be measured, they are not abstract physical properties, they are for the specific animal , which is related to the posture and behavior of animals, so affordance cannot be measured as we do in physics.

When we explore the availability of interactive design, we think that a function should be able to speak for itself and declare its usefulness in a reasonable way (the road is for people to walk).

Signifier (signifiers) is a linguistic concept:

Signifier and signifier are a pair of linguistic concepts, which can mean the sound of language, the image and the meaning of language. According to the division of linguists or philosophers, what people try to express through language is called "the meaning", and what the language actually conveys is called "signifier".

In short, what is conveyed by the design of the availability is its signifier. (the ground is flat to indicate that people can walk on it with their feet)

Without the ability to refer, users will not be able to really perceive the availability of the design.

In the above case, you can see the evolution and development of the button design. The first button is just a word, there is no signifier, and the third button adds a rounded border and a shaded layer, reflecting its characteristics as a "button."

Signifier can also exist in the form of metaphor or metaphor, because people need to understand why they interact with the object, not just know that they can. As with the tray at the bottom of the iphone screen, you can see the rounded border button, so that we can click on it, where the phone, mail and note symbols, then the specific image of the user, click the button can achieve what purpose, what kind of things.

4, can learn the sex

Ideally, the user will remember how to use any feature once it has been manipulated, but that is not the case. Intuitive operation and easy to understand design must be implemented into each interface.

Successful interaction design should be made with the help of consistent and predictable design to reduce overall complexity. For example, some pages are worth preserving, links are opened in new pages as much as possible, and some pages involve specific actions and processes that cannot be opened in new pages to prevent users from relocating.

Consistent design ensures the predictability of the design and improves the overall accessibility.

UI mode is a common tactic to promote interactive learning. Many web sites and apps are already starting to use UI mode, which ensures consistency and familiarity, and adds a lot of creative design to the design.

Breadcrumbs are the most common UI pattern in web design, which guides users through more orderly browsing of web pages. No matter where you are on the site, the breadcrumbs will tell you the browse path visually. This familiar design improves the accessibility of the site. A Web site with a learning nature encourages users to use them, and naturally increases usability.

　　5. Feedback and Response time

Feedback is the heart of the interaction. Each interaction is a conversation between the user's product, so your product is best maintained in a friendly, interesting, and useful feature.

Whether it's a well-designed dynamic, interesting and lively micro-interaction, or a simple beep, your product must communicate with the user, giving feedback, regardless of whether or not the operation is completed.

In the following case, it is logical and interesting to hootsuite the owl to show that the user has been "asleep" for a long time, and this feedback will stop the updated negative state from being designed to be fun and fun.

Another important factor for user feedback is response time. The best feedback that is usually given to the user is to give feedback as soon as possible, early and immediately. Most of the time, delayed feedback can make users feel very upset, except for a very few special cases.

Five-step process to promote interactive design

After learning the five pillars of interactive design, let's take a look at ways to promote interactive design.

The famous interactive designer, Stephen P. Anderson, once said that if someone pretends to be your interface, it will be eye-opening when you interact with him. Any awkward feedback will be magnified, and you will learn to circumvent the human interaction in this process, and when you complete the process, you can begin to write the interactive scripts and adjust the results.

Next, let's talk about the specific process:

1, role-playing and interaction: Find two people, one to play the interface, another to record notes. The person who plays the interface is holding a browser window board and projecting the interface through the projector at the same time. You act as a user, talk to the interface, you explain and interpret the user's goals, and the interface is limited to tags, menus, and other UI elements to "feed back" your actions.

2. Sketch The narrative clue: the recorder records the details of each step, including tasks and emotions. You can complete this step by using the user scenarios document.

3. Simplifying steps: Sometimes users need to go through many steps (such as buying a ticket) to achieve a goal, but when making prototypes, they should dismember a complex target into a series of simple steps (such as asking for a destination and then setting the itinerary). For example, Virgin's ladder-shaped design is designed to make the booking process more straightforward.

4, Control User selection: This may be the hardest step, but you must minimize the user's operation. Always interrogate yourself, every option in this step is not essential, if not, separate it into other non-critical locations.

5, attention to micro-moment: Micromoment, this is a new composite word, refers to the user in the interface with the key point of interaction, when the user may hesitate, radical or suddenly stop, we have to translate it as a micro-moment. Think back to the role playing part, you will remember those hesitant, disturbed moment. In order to make the interaction clearer, you should make full use of every detail of the copy selection, combined with a reliable UI model, to guide users in these micro-moments to make the right choice.

If you don't pay attention to the details Magician's magic will fail, in the same way, bad interactions can ruin the entire user experience. The above process can help you make interactive design a bridge between interface and user, rather than simply "move" the interface.

　Conclusion

Interaction design does not only involve interface behavior, it is an adaptive technology based on user behavior. What the user likes in function and emotion, what to expect, this is the key. But it is also based on such limitations that the product you are designing should be done in response to these expectations and needs. So, the best interaction design is probably this way: for users to respond quickly, will not mix too much of the thought, like a perfect magic, smooth, worth looking forward to, but also in line with the logic.