Les micro-intéractions sont des animations qui peuvent être déclenchées lors d'une action d'un utilisateur ou lors des phases de chargement. La plupart de celles-ci sont invisibles et nous paraissent même naturelles aujourd'hui. On les retrouve sur des produits que l'on utilise au quotidien et elles nous permettent d'améliorer la navigation, la compréhension et la perception d'une application ou d'un site.

Qu'est ce qui fait une bonne micro-intÉraction ?

Les quatre grandes règles qui permettent de créer des micro-intéractions efficaces selon Dan Saffer, auteur de Micro-intéractions.

• Les triggers, le déclencheur de la micro-intéraction par l'utilisateur lors de sa navigation ou bien du système qui valide une condition à un moment donné.
• Les règles, vont permettre de définir ce qu'il se passe lorsque la micro-intéraction est déclenchée.
• Les feedbacks, visent à informer l'utilisateur sur ce qu'il se passe, le retour peut se manifester sur l'écran mais il peut également être audio ou encore haptique.
• Les boucles et modes, servent à determiner si une action se produit une fois ou si elle se répète ou non dans le temps et si elle est amenée à évoluer.

On distingue deux grandes familles de micro-intÉractions

• Une micro-intéraction principale : Elle est au coeur même du produit, peut se répéter de manière régulière, et fait partie de l'identité du produit.

• Une micro-intéraction secondaire : On la retrouve sur des actions plus secondaires comme la navigation, les temps de chargement ou la fermeture d'une pop up.

Les micro-intéractions secondaires permettent de fluidifier l'expérience de manière subtile tout en conservant l'identité propre à chaque produit.

Pourquoi en ajouter au produit ? 

Les micro-intéractions permettent réellement de faire passer un produit au niveau supérieur, il est indispensable de le prendre en compte lors de la phase de conception. Elles actionnent plusieurs leviers :

• Renforce l'aspect émotionnel du produit / valeurs

by Minh Pham ? for F?NT?SY

• Récompense l'utilisateur

• by Ion Shipilov
• Simplifie la navigation des utilisateurs sur votre produit. 

by Gleb Kuznetsov?

• Encourage à faire des actions qui sont en accord avec la stratégie (ex: facilement partager sur les réseaux sociaux). Donne des astuces sur l'interface.

by Johny vino? for Buy Me A Coffee

• Un onboarding simple et efficace.

by Darko ?kulj for Recent Work

Elle peuvent par exemple permettre de gamifier l'utilisation d'un outil qui peut paraitre répétitif, en octroyant une récompense pour une tâche qui peut paraitre très simple et basique. Si l'on prend l'exemple de Trello, on peut observer ce schéma certes simple mais qui a fait ses preuves.

L'importance du user feedback

Nir Eyal, auteur de Hooked, décrit le schéma idéal pour réussir à fidéliser les utilisateurs à votre produit. Ce système permet de récompenser votre utilisateur et rendre l'utilisation de votre produit ludique et engageante.

Ce modèle repose sur 4 piliers :

• Le Trigger - Il s'agit de l'élément qui déclenche l'action
• L' Action - Elle correspond à l'action réalisée
• La récompense - Elle correspond à ce qu'obtient l'utilisateur après l'action réalisée
• L' investissement - Il correspond à la volonté de l'utilisateur de recommencer et de s'investir dans votre produit

Les micro-intéractions permettent de donner des retours en direct aux utilisateurs, d'une action sur l'interface, d'un temps de chargement ou encore d'une erreur. Il est primordial de prendre ces éléments en compte lors de la conception pour accompagner vos utilisateurs dans l'utilisation du produit et de les informer en temps réel.

On peut distinguer trois grandes formes de feedbacks sur Mobile et Desktop :

• Les retours visuels, des éléments animés ou de transitions entre les pages
• Des retours sonores, beaucoup utilisés dans les jeux mais moins sur des produits grand public
• Ou encore des retours haptique, lorsque que l'on passe son smartphone en mode vibreur par exemple.

Il est indispensable de pouvoir justifier une micro-intéraction, le but étant d'apporter une vraie valeur ajoutée au produit et à l'utilisateur.

Renforce l'aspect émotionnelle et attractif du produit

Les émotions sont au coeur du design et renforce l'attachement, la perception et l'implication d'une personne envers une marque ou un produit. Les micro-intéractions sont un bon moyen de véhiculer des émotions tout en donnant des informations.

On voit bien sur cette exemple de Darin que l'interaction entre l'avatar et l'utilisateur permet de rassurer l'utilisateur en lui envoyant un message clair, son mot de passe est protégé.

Lottie : une plateforme open-source pour créer des MICRO-intÉrACTIONS SIMPLEMENT

Simplifier la création de micro-intéractions avec des outils simples permet aux équipes d'avancer plus rapidement et intégré de la manière la plus simple possible.

Chez Bam nous utilisons Lottie pour simplifier l'intégration de micro-intéractions au sein du produit sans en altérer la performance. Cet outil nous permet de vous accompagner au mieux dans vos besoins d'animations des interfaces.

Conclusion

Chez BAM, nous sommes en veille constante pour proposer ce qui se fait de mieux sur le marché. Prochainement de nouvelles annonces vont nous permettre grâce à Anima X Lottie de proposer un accompagnement plus performant sur le développement des micro-intéractions au sein de votre application.