Rendre une interface plus humaine et plus efficace, encourager l’internaute à interagir avec un produit ou un service, éviter l’impatience ou la frustration dans une expérience, … Tous ces objectifs peuvent être remplis par les micro-interactions, ces moments subtils centrés sur l’accomplissement d’une tâche unique.
Un mécanisme bien défini
Une micro-interaction est composée de plusieurs éléments qui se déroulent dans cet ordre :
- L’utilisateur actionne un déclencheur que ce soit par besoin ou volonté. Généralement ce déclencheur est un bouton ou une icône dont l’aspect l’y a encouragé. L’affordance est primordiale pour que l’internaute comprenne qu’il peut interagir avec, que ce soit en touchant, en appuyant, en validant, etc. !
- Ensuite, le système traite ce signal et renvoie des informations, selon une ou plusieurs règles avec des si … alors … C’est donc une action. Et en fonction du résultat amène vers…
- … un feedback. Majoritairement visuel, avec par exemple un changement graphique, l’ouverture d’une pop-up, la validation d’un élément, un signal haptique, etc. En cas d’erreur, il s’agira d’offrir à l’internaute des explications (avec une microcopy qui soit propre à la marque) et des solutions alternatives.
Les ingrédients d’une micro-interaction efficace
La simplicité est le maître-mot lorsqu’on conçoit des micro-interactions. Il ne s’agit pas de placer des animations à chaque interaction. Elles doivent avoir du sens : quel est le message qu’on veut transmettre à l’internaute à ce moment là ? Ce qu’il faut garder en tête c’est qu’elles doivent rendre l’interface moins froide et rapprocher le produit/service et l’internaute.
Autre point à souligner : ces petites animations peuvent être répétées plusieurs fois. Elles ne doivent pas desservir l’expérience utilisateur. Subtiles et intuitives, elles iront jusqu’à s’effacer pour n’être presque plus perceptibles (pour les services qu’on utilise très régulièrement). Mais leur absence desservirait l’appréciation de l’interface.
Pour passer d’une étape à l’autre, on utilisera des transitions logiques sans pour autant compromettre ce processus dynamique qui doit être instantané.
Graphiquement, les micro-interactions doivent s’inscrire dans l’univers mis en place. Elles sont cohérentes avec les autres éléments visuels de l’interface. Je vous invite à rechercher sur dribbble des gifs d’exemples ou awwwards pour vous faire une petite idée de la créativité qu’on peut injecter lors de leur conception.
Un autre avantage des micro-interactions, c’est qu’elles sont également un support d’expression de votre marque et peuvent devenir un élément inconsciemment associé.
Majoritairement conçues pour être perçues sur mobile, on n’hésitera pas à effectuer des tests sur ce support, avec de futurs utilisateurs afin d’observer leurs réactions.
Subtiles mais omniprésentes
On retrouve principalement des micro-interactions pour démontrer l’accomplissement d’une action.
Ces petits détails attirent l’attention de l’utilisateur sur un changement d’état sans pour autant le distraire de son but premier (sinon on parlera de perte de l’attention cognitive). C’est une de ces principales utilisations, que ce soit sur les réseaux sociaux, les gestionnaires de messagerie, les services sur Internet, (presque) tous font désormais l’usage de notifications qui invitent l’internaute à cliquer sur l’indicateur de couleur.
Elles servent également à gérer et contrôler l’état et l’évolution d’une tâche en cours, avec les jauges de progression, personne en train d’écrire dans une conversation.
Elles préviennent les erreurs et permettent de les corriger plus facilement. Très utile lorsque l’on complète un formulaire et qu’elles sont indiquées en temps réel, sans pour autant attendre d’avoir complété tout le formulaire.
Toujours dans le cas des formulaires, les micro-interactions minimisent l’effort et rendent l’action plus facile (notamment avec l’autocompletion):
Bien évidemment, elles sont également là lors d’ajustement de paramètres ou lorsque l’on active/désactive une fonctionnalité. On retrouve des feedbacks autres que visuels, sonores par exemple lorsque l’on passe du mode silencieux au mode vibreur sur smartphone.
Ces indications visuelles indiquent le succès d’une tâche et ont directement un impact psychique sur l’internaute. C’est pourquoi on retrouve au moment du feedback une notion empruntée à la gamification des expériences : la récompense. Effectivement, en rendant les actions plus funs et gratifiantes à réaliser, on encourage l’internaute à les renouveler. Ces réponses visuelles au comportement de l’internaute jouent aussi un rôle instructif. Et c’est intéressant à prendre en compte : elles peuvent guider l’internaute dans l’interface, lui apprendre à utiliser une nouvelle fonctionnalité et participer à l’onboarding en lui suggérant des actions à réaliser.
En conclusion
Trop souvent considérées comme accessoires ou secondaires, les micro-interactions ont pourtant toute leur place dans nos interfaces. Vous l’aurez compris, ces petits détails ont une importance capitale dans l’expérience utilisateur. En confirmant de manière naturelle l’action qu’ils ont initié, les micro-interactions apportent une réelle valeur ajoutée et sont de véritables encouragements aux internautes pour qu’ils continuent à interagir avec notre produit/service.
Je finirai cet article avec un petit extrait que je trouve très juste de l’article Microinteractions: The Secret of Great App Design, écrit par Nick Babich (développeur passionné d’UX et UI et également écrivain très prolifique sur le sujet) :
The best products do two things well: features and details. Features are what draw people to your product. Details are what keep them there. And details are what actually make our app stand out from our competition.