Les micro-interactions are animations that can be triggered during a user action or during loading phases. Most of these are invisible and even seem natural to us today. They are found on products that we use on a daily basis and they allow us to improve navigation, understanding and perception of an application or site.

What makes for a good Microinteraction?

The four main rules that make it possible to create effective micro-interactions according to Dan Saffer, author of Micro-interactions.

• Les Triggers, the trigger for micro-interaction by the user during navigation or the system that validates a condition at a given moment.
• Les rules, will make it possible to define what happens when the micro-interaction is triggered.
• Les feedbacks, aim to inform the user about what is happening, the feedback can appear on the screen but it can also be audio or even haptic.
• Les loops and modes, are used to determine if an action occurs once or if it is repeated or not over time and if it is likely to evolve.

There are two main families of Microinteractions

• One main micro-interaction : It is at the very heart of the product, can be repeated regularly, and is part of the identity of the product.

• One secondary micro-interaction : It is found on more secondary actions such as navigation, loading times or closing a pop-up.

Secondary micro-interactions make it possible to streamline the experience in a subtle way while maintaining the identity specific to each product.

Why add it to the product?

Microinteractions really make it possible to pass a product at the next level, it is essential to take this into account during the design phase. They activate several levers:

• Strengthens The emotional aspect of the product/values

by Minh Pham? For F? NOT? SY

• Reward The user

• by Ion Shipilov
• Simplifies navigation users on your product.

by Gleb Kuznetsov?

• Encourages you to take action that are in line with the strategy (e.g. easily share on social networks). Give tips on the interface.

by Johny Vino? For Buy Me A Coffee

• One simple and effective onboarding.

by Darko? kulj for Recent Work

For example, they can allow gamify the use of a tool that may seem repetitive, by giving a treat For a task that may seem very simple and basic. If we take the example of Trello, we can observe this simple but proven pattern.

The importance of user feedback

Nir Eyal, author of Hooked, describes the ideal pattern for successfully retaining users for your product. This system allows reward your user and make using your product fun and engaging.

This model is based on 4 pillars:

• The Trigger - This is the element that triggers the action
• THE Action - It corresponds to the action carried out
• La treat - It corresponds to what the user gets after the action performed
• THE investment - It corresponds to the user's desire to start over and invest in your product

Microinteractions make it possible to give live feedback to users, an action on the interface, a loading time or even an error. It is essential to take these elements into account during the design to support your users in using the product and to inform them in real time.

We can distinguish three main forms of feedback on Mobile and Desktop:

• Les visual feedback, animated elements or transitions between pages
• Of Sound feedback, used a lot in games but less so on consumer products
• Or even haptic feedback, when you switch your smartphone to vibrate mode for example.

It is essential to be able to justify a micro-interaction, the aim being to provide a real added value to the product and to the user.

Strengthens the emotional and attractive aspect of the product

Les emotions are at the heart of design and reinforce a person's attachment, perception and involvement with a brand or product. Microinteractions are a good way to convey emotions while providing information.

We can clearly see on this example of Darin that the interaction between the avatar and the user makes it possible to reassure the user by sending him a clear message, his password is protected.

Lottie: an open-source platform to create Micro-interactions SIMPLY

Simplifying the creation of micro-interactions with simple tools allows teams to move forward more quickly and integrated in the easiest way possible.

At Bam we use Lottie to simplify the integration of micro-interactions within the product without altering its performance. This tool allows us to best support you in your interface animation needs.

Conclusion

At BAM, we are constantly on the lookout to offer the best on the market. Soon, new announcements will allow us thanks to Anima X Lottie to offer support more efficient on the development of micro-interactions within your application.