A simple and practical guide to micro-interaction design

In the case of similar functions, how to let the user crush? Micro-interaction is one of the keys to determining the user's impressions, and today this good article enumerates the points of attention to using micro-interaction, and the five most common use scenarios, all dry goods, to collect!

Good products tend to do two points: function and detail design.

Features to attract users to use your products, details of the design will leave your users. Excellent detail design can make your product stand out in many competing products, and excellent micro-interaction design can make the user have a deep impression when they use the product for the first time. As an interactive designer, we should not only consider the visual impact force when designing the micro-interactive scheme, but also try to give the function of information transmission.

　　What is micro-interaction?

Micro-interaction is one of the moments in a product that completes a small task. For the first time in his book (microinteractions), Dan Saffer describes the concept of micro-interaction, which focuses on the services required:

Exchange feedback or the results of the action feedback

To complete a separate task

Enhance the sense of direct manipulation

Help users visually display the results of operations and avoid errors

Some notable examples of micro-interactions include:

When you set the iphone to mute with the vibration of the reminder, the screen mute icon.

The interface animation prompts whether it can be clicked (the color of the button changes when the mouse moves over the button).

　　Why use micro-interaction?

Micro-interaction is the recognition and feedback of some of the user's natural needs/desires. The user acknowledges that their behavior is accepted from the visual, tactile, and other feedback provided by the micro-interaction. Micro-interaction can also guide users to the correct use of the system/product.

　　Define usage scenarios for micro-interactions

One of the characteristics of micro-interaction is that it can be placed in many scenes to assist in different action behaviors. In general, the use scenarios for micro-interactions include:

Show the status of the system/product

Jacob Nielsen points out in the usability heuristic: Let your users know what's happening at all times, and users expect immediate feedback on their behavior. In some cases, however, the app takes time to wait for the behavior to be completed before it can send feedback to the user. Therefore, the product interface needs to indicate to the user what is happening at the moment.

▲ Download Progress Form

or indicate where the user is located:

Tips: Do not let your users feel helpless, let your users understand the status of real-time and show them progress (such as the progress bar to enable users to understand progress, eliminate confusion)

Prompt for Updates

We sometimes need to push notifications to the user to ensure that the user is aware of the update. Animation can do this, animation can attract the attention of users, to avoid users ignore the important information.

Tips: The dynamic effect of micro-interaction should follow the kiss principle (keep it simple, stupid), should be as straightforward as possible.

Association context

Use the dynamic effect to the user's attention smoothly in the navigation page switch between the user to explain the relationship between the elements of the page, as well as the ins and outs of the page jump. This is useful for mobile devices, because the size of the screen, the content of each page in the mobile interface is very compact, and using dynamic to explain the connection between the content is very practical.

Tips: Try to make every page of the navigation concise, this can effectively avoid users in the page jump lost. The change between the two States should be clear, smooth and fast. Unify all the interactive forms visually, reduce the user's learning cost.

Input visualization

Data entry is a very important part of the application, the micro-interaction can use the existing elements to show the data input feedback, so that this step of the operation become more efficient.

Tips: Micro-interaction can help users understand information formats, sources, and help users enter information easily.

Guide interaction

Micro-interaction encourages users and attracts users to interact with the product. It can generate empathy in the user experience. But you need to be cautious about using micro-interactions to ensure that they don't offend your users in the sense of the senses.

Keep in mind: Don't let users feel bored, Keep it simple, stupid.

Tips: Focus on the user's emotional feedback because it plays an important role in the user experience. To do more user research and situational research, design can be frequently used by users of micro-interactive programs.

　　It is worth remembering

Micro-interaction Displays action feedback, notification, and information frame structure to the user

Micro-interaction should accelerate/shorten the transmission of information data by diverting the user's attention, pleasing the user, etc.

Knowing your users and using the micro-interaction background can make your micro-interaction solutions more accurate and efficient.

Micro-interaction must be able to support the use of long time, the first use of the plan is pleasantly surprised, may be the 100th time when the use of become a problem.

The micro-interaction scheme should be humanized and be visually harmonious. Users should feel fluent in the use, micro-interactive solution should be as far as possible from the real life to get inspiration, such as the use of physical and other means, so as to reduce learning costs.

　　Summarize

Design carefully, thinking about the user's use of the product scenarios, and then design these micro-interaction to use some of the common life of the operating mode, the movement of objects, the common way of behavior. The usability of the product comes from the polishing of the detail, the great design not only satisfies the user's demand in the function, but also touches the heart in the design of the micro-interaction.