Navigation

Toutes les catégories

Voir les derniers articles

Comment créer une micro-interaction efficace ?

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

Publié par Melanie De Coster

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 :

  • 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.

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é

micro interaction utile efficace pour convertir

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.

Bon à savoir
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…

Lire la suite de l'article
Afficher les commentaires (0)

Commentaires

Newsletter WebActus

Abonnez-vous pour recevoir notre sélection des meilleurs articles directement dans votre boîte mail.

Nous ne partagerons pas votre adresse e-mail.

Articles similaires

Graphisme

10 outils gratuits pour retoucher vos photos

Vous avez opter pour le format RAW pour vos photographies et vous souhaitez les rendre exploitables ? Ou tout simplement vous voulez donner un peu de pep’s à...

Publié le par Charlotte Chollat
Graphisme

8 étapes pour créer l’icône de votre application mobile

L’icône d’une application mobile est un élément très important puisque c’est lui qui va attirer en premier les utilisateurs et les...

Publié le par Charlotte Chollat