8 Types of Micro-Interaction Design You Must Know!
Introduction
Have you ever been delighted by the subtle interaction design details in the process of using certain products? This is a manifestation of the product improving the user experience. So, do you know what are the common types of micro-interactions in product design, and how can these types be applied?
At a time when minimalist design is advocated, "less is more" is the truest state of micro-interaction.
Micro-interactions are about the design of the details, and these tiny interactions shape the user experience and give engaging users the joy that is scarce in the product.
So how do micro-interactions improve the user experience? What other common types are included? Let's take a look together.
1. Micro-interaction and user experience
1. Helps with user retention
If the micro interaction is properly designed, it will bring a certain degree of stimulation to the brain, so that users can feel a moment of pleasure.
This is like the "aha moment" often mentioned in product operation. Your products or services make users happy and different. Such services can not be provided in other products. This is the point of continuous growth of your products.
These moments help to improve the experience and increase the possibility of users continuing to use the product. They also help to improve the retention rate and the reuse rate of users.
2. Enhance brand personality and impression
The advantage of micro interaction is that it provides us with an opportunity to build brand personality. For example, you can think about the like effect of Weibo. The like effect helps Weibo shape its unique personality and leave a deeper impression on users.
3. Improve intuitiveness and usability
Micro interaction is a way to provide continuous feedback to users and provide clear guidance and feedback for users' operation. If operated properly, micro interaction can improve usability, and the whole process will become more intuitive and interactive.
▲ For example, in the process of setting the password, the input box will give feedback of weak, medium and good password levels, and inform the user of the complexity of the password in real time, which is concise and clear.
2. 8 types of micro interactions
Micro-interactions are becoming more and more widely used in products, and with the advancement of technology, there are greater possibilities for micro-interaction design. Regardless of the variation, it is always important to understand and apply the most basic micro interactions. Common types of micro interactions include:
1. Click effect
▲ Twitter's like effect is recognized as an excellent case of micro-interaction. The love heart effect that pops up from a like brings an unexpected experience to users and makes users feel happy. In the process of using the product, it is the most ideal result to bring joy to the user.
2. Long press effect
▲ Long press the Facebook 👍 icon, a row of emoji expressions with micro-motion effects will pop up, and users can choose the expression that suits their feeling. Although the long-press operation requires a greater cost than a simple click, it can bring users double the happiness.
3. Pull down to refresh
▲ Incorporating brand animation into pull-to-refresh is a very creative idea. First, it can provide users with feedback to show that the content is loading. In addition, it can also take the motion of loading to expose the brand image.
Users are usually very focused while waiting for loading, because they want to see the loaded content quickly. Integrating brand animation into loading will make users more impressed by the brand.
▲ The rainbow animation effect that appears in the pull-down loading is a good visual enjoyment for the user, which can not only relieve the user's anxiety during the loading process, but also stimulate the enthusiasm and desire to explore the product.
4. Scroll to view
▲ When the user scrolls the page up and down, the image on the page will be enlarged. When the page stops scrolling, the image will gradually shrink, and the size of the image is determined according to the speed of the user scrolling the page. This detailed design can make the product look more attractive, improve the user experience and create fun.
5. Swiping effect
6. System loading
▲ When the user says "Hey Google" in the Google assistant, four small dots fluctuating up and down will appear at the bottom of the screen as feedback. When the user starts talking, the four dots will become the sound wave effect of a vertical bar, indicating that the assistant is listening.
Such a micro interaction design can both confirm to the user that the product is receiving voice and incorporate Google's unique branding into it. Apple's Siri has a similar feature, but with a more futuristic and tech-savvy design.
7. Error feedback
The design of error feedback is often used in login / registration and filling in forms. It is not easy to remind users that there is a problem with the input information in a subtle and not rigid way.
Because users feel particularly frustrated when they are told of an error after entering a long message.
▲ Combined with the micro effect, the error information is displayed by lifting a corner of the input box, which is a very gentle feedback method, so that the user can clearly know that some information is wrong in an interesting way.
8. Mouseover effect
▲ When the user hovers over the button, the icon on the left changes from a folder icon to a form icon. This design not only shows that the button is clickable, but also turn the boring button into a little fun for the user. Simple dynamic icons can take button design to the next level, open up your imagination, and you can do it too.
End
Micro-interaction and detailed design make excellent products. After reading so many product cases, do you have more ideas and thoughts on micro-interaction?
If you like the article, please share it with others with page link, thanks for your supporting! ❤
Leave a comment