Une micro-interaction sert à indiquer, de manière visuelle, qu’un utilisateur est en train d’agir : il envoie un formulaire, charge une vidéo…

Elle sera efficace si elle est utile et qu’elle suscite une émotion.

Voici comment y parvenir.

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

Dribble

Une micro-interaction est une animation qui prend vie suite à une action de l’utilisateur. Ce peut être le changement de couleur d’un bouton, une image qui bouge et apparaît à un moment précis, trois petits points qui signalent un téléchargement…

Son but est de rendre l’utilisation d’un site ou d’une application plus vivant, mais aussi plus pratique : l’internaute ne se demande pas s’il se passe quelque chose, il le voit.

Par définition, une micro-interaction ne dure que quelques secondes, et doit donc être relativement légère à charger. Certains parlent même d’un ordre de grandeur de 400 millisecondes seulement !

Pourquoi utiliser des micro-interactions ?

Savoir quelles sont les bonnes raisons d’utiliser une micro-interaction vous aidera aussi à réfléchir comment la concevoir.

Ce type d’animation :

Quels sont les types de micro-interactions les plus fréquentes ?

Dans le domaine des micro-interactions, il existe de nombreux gestes qui se font de plus en plus naturels, comme le Swipe, qui fait glisser les éléments sur un écran tactile.

Vous voyez aussi de plus en plus apparaître des formulaires qui indiquent visuellement si les cases sont bien remplies. Ou si le mot de passe comporte bien tous les éléments nécessaires (longueur, majuscules, caractères spéciaux…). Ce qui évite à l’utilisateur la frustration d’envoyer un formulaire incomplet puis de devoir recommencer.

Insérez vos micro-interactions au bon moment

Une micro-interaction qui intervient de manière anarchique va plus distraire vos utilisateurs que leur être utile. Elle doit toujours accompagner une action, et toujours le même type d’action.

Par exemple, si vous déterminez une animation pour indiquer un chargement, vous ne l’utiliserez que lors de ces épisodes. Et pas juste pour le passage d’une page à l’autre.

De même, évitez de surcharger votre page ou votre application avec de trop nombreuses micro-interactions. Vous n’êtes pas en train de produire un dessin animé, avec des images qui bondissent dans tous les sens : vous cherchez comment améliorer l’expérience de l’utilisateur afin qu’il ne se sente pas abandonné.

Transmettez votre identité

Source : MailChimp

Une micro-interaction est aussi l’occasion de partager un peu de vous.

Parce qu’elle peut être très sobre et purement fonctionnelle… ou bien intégrer un peu d’humour (c’est aussi ce que l’on voit sur les pages d’erreur 404). Elle peut être l’occasion d’intégrer votre mascotte ou votre logo à votre convenance.

La micro-interaction devient donc utile pour vous aussi, puisqu’elle vous sert à vous démarquer.

Quelques outils pour créer des micro-interactions

La plupart des outils utilisés pour le codage peuvent également s’appliquer pour les micro-interactions. Pour les sites internet, les Animations CSS seront efficaces, tout comme Framer.

Pour une utilisation plus basée sur les smartphones, vous vous tournerez plutôt vers Xcode ou Android Studio. Ce qui ne vous empêchera pas d’ajouter à votre boîte à outils After Effects, Invision, Marvel…