The micro-interaction knowledge that designers must master in the 2016

How to create a very stunning application, I think we should have some understanding, with the help of interesting stories, smooth flow and unforgettable visual design. But that's not enough, you need to come up with something that really touches the heart of the user, creates emotional connections, and lets them feel the real, fresh side of the application.

This time, the need for micro-interactive debut.

The good applications that really make people addicted are largely due to the existence of micro-interactions. In the instant of micro-interaction, the user will feel a stronger sense of interaction and participation, these small and natural changes will create extraordinary pleasure, but usually these small interactions are not so conspicuous. Of course, this is not the case for designers.

If you observe with your heart, you will encounter hundreds of minor interactions a day.

In the morning when the alarm clock off, see the new text in the interface Flash, in the player to switch songs, the end of the game round when the message, or even use the mobile phone navigation when the traffic information prompts, these moments will have micro-interactive appearance. You may not know who created these, but it is the moments of pleasure that accumulate to allow you to open these interesting applications.

　What is micro-interaction

So what is micro-interaction? We can define this: micro-interaction is a single task-based interaction with a digital device. It's important to note that most of these interactions are small and unobtrusive, but they provide a smooth, natural feeling.

As Dan Saffer in his "micro-interaction," the presence of micro-interactions fills three of the following functions:

• State rendering and feedback when communicating quickly

• Visualize the results of an action

• Help users manipulate certain elements on the screen

In the slack interface, the three functions of micro-interaction are embodied. Slack allows users to chat and communicate in a closed loop, share files, and mark each other. In this process, the program will be updated in real time (for example, the message will be marked as read after reading). The application also has a variety of system reminders, and users keep the information synchronized.

The impact of micro-interaction on users and applications is reflected in different ways:

• logo turned on or off

• Comments in various media

• Change in layout or process

• View information or notify

• Dropdown update

• Interact with data-related elements, such as viewing the weather

• Complete a separate task

• Connecting devices, such as multiplayer connections, using a computer to connect to a printer

• Share on the Web site or a bit of praise

Simply put, micro-interaction is the action that is generated by the user's action to trigger the device. But these actions are not simple causal relationships, and their interactions are designed in a human-centered, and the feedback of the device and the digital interface is made by reference to nature and human behavior. This is also the secret of micro-interaction: In a more "humane" way, showing the user's expected operation.

The above case comes from Uxpin, we have created a Web prototype to explore fashion models. Each card represents a model, and when the mouse is moved to the card, the information of each model and the card download button are displayed. The hover action triggers the micro-interaction, allowing the information to be displayed, and the dynamic effect of the join makes the entire interface change as if it were manipulated.

　　What does the micro-interaction actually do?

As you can see in the previous case, micro-interaction does not assume a single role, and it usually holds multiple roles. Sometimes you can't exactly describe it, but it does always increase the sense of engagement.

When you consider how to design a micro-interaction, do not view it as a separate action or task, you have to think about what kind of user experience you want to achieve, and how the interface changes if you want to achieve it.

In essence, micro-interaction should give the user the following experience or lead to the following actions:

• Touch screen

• Pleasure, smile

• Learn or understand what

• Feel the emotional connection

The app, named Elevate, uses a game-like interaction in the interface, where users have to answer questions by touching the screen or change the answer through this link, and in the process, the beautiful action will make them smile. In addition, users can use this application to train their brains and share scores with each other.

Sounds like this app really wants to be a simple game, right? But this experience is almost a user's expectation for each application. It is these humble micro-interactive design that underpins the best application experience from 2015 to 2016. It is these tiny "digital moments" that allow the user to feel the emotional connection, and it also allows the user to feel the feelings and body temperature of another person or object.

　　Four elements of micro-interaction

At the forefront of the field of micro-interaction is the Dan Saffer we mentioned earlier.

If you Google "micro-interaction", you'll find almost all of the authoritative information and topics he provides, and his "micro-interaction". Saffer that micro-interaction is structurally composed of four parts, and this definition makes it easier for you to understand or create micro-interactions.

• Trigger: Triggers a micro-interaction to start. For example, click on the heart-shaped icon to say like

• Rules: Rules of behavior for interaction. Users cannot "see" the rules, but they can understand the rules through feedback (the next link). In this case, after clicking on the heart icon, the system will add this preference to the user's subscription list and provide relevant recommendations.

• Feedback: A communication mechanism for the user to design the information returned when the micro-interaction occurs. In this case, after the user clicks on the heart type, the icon is filled with red, beats like a real heart, and prompts the user to "have added to the reading list!" Inform the user of the meaning of this action.

• Loops and Patterns: Sets the length and duration of the micro-interaction, and designs whether it repeats and evolves over time. In this case, click on a second to tell the user that the information is added to the reading list, or even within 6 months, to indicate which page the user originally liked.

Each of these links constructs an interactive cycle and cycles. According to Saffer, the vast majority of users never notice the existence of micro-interactions until these micro-interaction loops or mechanisms are broken to realize their existence.

Have you ever thought about feedback mechanisms?

Feedback is the most important part of the whole micro-interaction mechanism. Feedback is not only a link between user and interface in micro-interaction, but also a link of micro-interactive operation mechanism.

Think about it, at 7 in the morning, the phone's alarm goes off, and then what do you do? Continue to nap or get up close? This simple action can result in two situations, turning off the alarm or waiting for 9 minutes before the bell rings again. Thus, the feedback loop between the user and the system is formed.

Without the user's initial feedback, the ringtone will not stop and will not be reset, and it will continue to ring again and again if the default setting does not limit the number of times.

In fact, the to-do list also follows a similar cycle, the most typical is the top of the wunderlist. When you click the checkbox on the left, it triggers the micro-interaction, the interesting dynamic effect appears, and the corresponding option is crossed out. In this moment, you will know what has been done and what has yet to be done. The cumulative accumulation of tasks will encourage you to continue to do more tasks and generate further interactions.

Although the case is simple, you can learn a lot from it. It shows how users are driven to participate in a micro-interaction and are eager for the next step.

　　Detail design is the soul of micro-interaction

Dealing with the details of micro-interactions is the key to achieving a project. Interaction is an important part of design that cannot be neglected.

So how do you design the details? What are the issues you need to consider?

• Micro-interaction must exist in reuse. Purely for the sake of the beautiful or gimmick of the action is tricky, not micro-interaction. Your micro-interaction should exist for a long time and detail design should be intimate and not annoying.

• Simplicity is the key. Straightforward language, clear fonts, bright colors, structured design, excellent executive power, are much better than excessive decoration.

• Micro-interaction should be humanized. Copywriting should be designed to be as human as it is to speak and to maintain emotional communication on any occasion.

• Note the copy. Copy and every moment, every occasion to fit, to maintain respect, to ensure that the tone, and relaxed atmosphere.

• Interesting animations, but moderately. Think of the Classic Mac OS X Dock bounce icon. The action cannot burden the response to the program, and then you consider its fun, fun, and feelings.

• Maintain coordination. Contrast is your friend, but be careful to use it. The importance of color matching is much greater than your imagination in the instant of triggering a micro-effect. Ensure the color coordination and consistency of each moment.

• Consider the evolution of micro-interactions. Is the first time that the micro-interaction appears exactly the same as the 1000th? How does it change over time? Think about these details carefully.

• Do not indulge excessively. Excessive design is one of the reasons why many products fail, and the smooth and reasonable design can make the right products.