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 ?
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 :
- améliore le parcours de l’utilisateur ;
- lui sert à comprendre où il se trouve dans son parcours ;
- lui permet de savoir que ses actions sont prises en compte ;
- gratifie certains actes par une récompense et gamifie l’utilisation ;
- capte l’attention ;
- rend l’expérience plus plaisante ;
- améliore votre impact sur vos clients.
À lire aussi : Comment ajouter de l’humour à votre site web ?
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.
- Il en va de même sur les micro-interactions qui signalent que votre fichier est en train de charger sur le site ou, à l’inverse, qu’un téléchargement est en cours.
- Les boutons animés ou les call-to-actions qui apparaissent au bon moment relèvent du même ordre.
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é
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.
L’important, c’est de montrer que vous n’avez pas juste pris n’importe quelle micro-interaction sur un site de codeurs, mais que vous y avez intégré votre touche personnelle.
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…
