Les micro-interactions, expérience utilisateur et engagement utilisateur

L'oeil de Cosa

Le diable se cache dans les détails.
Mais pas que.

Une bonne expérience utilisateur aussi.

Qu’est ce qu’une micro-interaction, pourquoi et comment l’utiliser ?

Et comment engager l’utilisateur grâce à elles ?

Tour d’horizon du sujet.

Qu’est-ce qu’une micro-interaction ?

Les micro-interactions traduisent de façon concrète les interactions de l’utilisateur avec une interface comme une app ou un site web. Il s’agit généralement de petites animations ou signaux sonores qui communiquent un statut, donnent du feedback et aident l’utilisateur à constater les résultats de ses mouvements.

L’interaction est à l’initiative de l’utilisateur – cliquer sur/toucher un bouton, survoler une zone avec la souris, scroller etc. – mais la micro-interaction est une confirmation que l’interaction est prise en compte et a une incidence sur la navigation. Les micro-interactions sont souvent des validations très utiles pour l’engagement : elles confirment que tout se passe bien et apportent plus de vie aux interfaces. Elles constituent ce détail qui va créer de l’émotion et améliorer l’expérience, la rendre plus chaleureuse et humaine.

Pourquoi utiliser les micro-interactions ?

Concrètement, les micro-interactions :

confirment ou indiquent le statut d’une action
expliquent à l’utilisateur l’action à réaliser
guident l’utilisateur d’une manière intuitive
attirent l’attention
font patienter
récompensent
facilitent la navigation
influencent le comportement
ajoutent de la valeur au site

Elles aident à créer des habitudes, préviennent les erreurs et augmentent considérablement l’engagement.

Comment les mettre en place ?

La conception des micro-interactions repose sur 4 grandes étapes :

Le déclencheur : l’événement qui vient enclencher l’animation. Il peut s’agir d’un déclencheur manuel (cliquer, passer la souris, faire défiler, etc.) ou d’un déclencheur automatique, qui est initié par le système lorsque certaines conditions sont remplies (une vidéo est suffisamment chargée pour être jouée par ex.). Sans un déclencheur distinct, un élément ne peut pas être une micro-interaction.

Les règles : Dans quel cas la micro-interaction doit-elle apparaître ?

Ex: Dans le cadre d’une recherche, une règle pourrait stipuler que l’utilisateur doit saisir un terme complet dans le champ de recherche avant que le bouton “Rechercher” ne devienne actif.

Le feedback : Informe l’utilisateur à travers un son ou une animation.

Ex: Les barres de chargement indiquent la progression. On peut également citer l’exemple du changement de couleur d’un composant pour indiquer que l’action souhaitée a été exécutée avec succès ou qu’une erreur s’est produite.

Les boucles et mode : La micro-interaction doit être en mesure d’évoluer selon les situations. Il est aussi possible de les personnaliser.

Ex: Si l’utilisateur règle son téléphone en mode silencieux, l’alarme ne sonnera pas de manière sonore, mais en silence ou avec des vibrations.

La micro-interaction doit être pensée comme appartenant à l’ensemble du site web et doit adhérer à la cohérence du design. À ce titre, elle doit correspondre à la charte graphique.

Malgré leur fonction ludique, les micros-interactions ne doivent pas être utilisées en excès pour ne pas perdre l’utilisateur. Elles doivent poursuivre un objectif bien précis, tout en faisant preuve de créativité. En effet, elles doivent apporter une identité, rendre l’interface reconnaissable, unique, et renforcer l’image de marque.

Il faut également veiller à leur simplicité et leur rapidité. En effet, 40 % des visiteurs quittent un site s’il met plus de 3 secondes à charger et plusieurs études montrent que la vitesse d’animation doit être comprise entre 200 et 500 ms. Une animation plus courte que 100ms ne sera pas visible par l’œil humain. Tandis qu’une animation plus longue qu’une seconde donnera un sentiment de latence qui ennuiera l’utilisateur.

Enfin, une micro-interaction peut être prévisible pour ne pas bousculer les habitudes de l’utilisateur sans être répétitive pour ne pas l’agacer.

L’impact sur l’engagement utilisateur

Une grande partie de l’assimilation par l’utilisateur provient de la clarté de l’expérience et une bonne expérience passe par un design réfléchi. Vecteurs d’une meilleure expérience client, les micro-interactions amènent l’utilisateur à s’engager et favorisent son retour.

Dans son livre “Microinteractions : Designing with Details” Dan Saffer, à qui l’on doit le terme, décrit les micro-interactions comme des petites choses qui font qu’un bon produit numérique devient excellent.

Qui dit micro-interaction dit ainsi maxi engagement.

Et l’accessibilité dans tout ça ?

Si les micro-interactions contribuent à rendre les interfaces plus dynamiques, elles peuvent parfois nuire à l’accessibilité.

En effet, pour certaines catégories d’utilisateurs, les micro-interactions et le motion design peuvent rendre une interface plus difficile à appréhender.

Elles doivent donc pouvoir être désactivées.

À ce titre, la qualité d’une interface ne doit pas dépendre de ses micro-interactions ou, autrement dit, les micro-interactions ne doivent pas être le seul moyen de véhiculer une information ou une action.