close

Découvrez nos offres pour faire du digital le levier de votre croissance !

download
Modèles

Téléchargez le Guide Ultime de gestion de projet digitale pour vous aider à piloter vos transformations et faire les bons choix !

Image mise en avant pour l'article

Les micro-interactions ou comment améliorer l’engagement utilisateur

24 juillet 2020


Vous avez peut-être déjà entendu parler des micro-interactions ?  Elles ont pour objectif de guider l’utilisateur à travers le site en lui offrant la meilleure expérience utilisateur. Et vous, avez-vous déjà pensé à mettre en place des micro-interactions sur votre site ? Quel est l'intérêt de ce type de fonctionnalité ? Zoom sur les micro-interactions.

Les micro-interactions jouent un rôle essentiel dans vos interfaces utilisateurs. Ce terme désigne des événements avec un objectif précis comme communiquer un statut, donner du feedback ou aider les utilisateurs à voir les résultats d’une action.

Les micro-interactions participent à une bonne expérience utilisateur, plus engageante, chaleureuse et humaine. Dans cet article, nous vous proposons de mieux comprendre le design d’interaction et les micro-interactions, leur intérêt et comment les mettre en œuvre.

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

Selon Dan Saffer, créateur du terme et aujourd’hui Product Designer chez Twitter, la définition d’une micro-interaction est la suivante :

des « petits instants pendant lesquels l’utilisateur et l’interface interagissent. ».

Une micro-interaction ne doit pas être confondue avec le design d’interaction, mais les pratiques sont assez proches. Une micro-interaction s’intègre au design d’interface et a 4 caractéristiques principales :

  • Un déclencheur comme un survol, un clic, un scroll ou encore un affichage de page qui génère une action ;
  • Des règles qui définissent ce qui se produit comme par exemple un zoom, une ombre ou une apparition ;
  • Le feedback, informant l’utilisateur de ce qui est en train de se passer ou où il en est dans un processus ;
  • Des boucles et des modes comme une répétition, un système de like ou l’annulation d’une action.

 

Voici un premier exemple de micro-interaction lors de l'ajout d'un article à vos favoris sur le site Ikea :

gik-ikea- ajout aux favoris (1)

Pourquoi les micro-interactions sont-elles importantes ?

Les micro-interactions influencent le comportement de l’utilisateur. Ce sont des petits détails presque invisibles qui peuvent faire la différence. Les micro-interactions créent de la satisfaction et de l’émotion. Elles simplifient la navigation, encouragent à faire des actions lorsqu’elles sont accompagnées de call-to-action (CTA) clairs et récompensent l’utilisateur. Elles font aussi partie de l’identité d’une marque.

Les micro-interactions sont particulièrement importantes sur mobile et notamment lors de l’utilisation d’applications mobiles. Vous pouvez ainsi en prévoir lors du choix de technologie pour créer votre éventuelle application mobile. Elles garantissent un parcours utilisateur fluide et intuitif, sans frustrations. Elles optimisent le tunnel d’achat et améliorent la conversion. Il y a aujourd’hui une grande volatilité des applications sur smartphones. Beaucoup d’applications mobiles sont désinstallées dès la première utilisation. Les micro-interactions peuvent contribuer à changer la donne.

Attention toutefois à ne pas surcharger votre interface avec des micro-interactions superflues. "Trop de micro-interactions tue la micro-interaction", avec un risque d’effet « sapin de Noël ». Elles peuvent également nuire à l’accessibilité de l’interface, nous y reviendrons un peu plus loin. 

Quelques exemples de micro-interactions

Les exemples les plus connus sont sans aucun doute les micro-interactions visibles sur les réseaux sociaux, comme le thumbs up de Facebook Messenger où le like qui grossit en fonction du temps passé à appuyer sur l'icône :

unknown-1594820077757 (1)

 

Ou toutes autres icônes pour liker les posts sur les réseaux sociaux, comme sur Twitter :

unknown-1594820077764-1 (1)

 

On parle ici de micro-interaction émotionnelle : elle offre un feedback immédiat et une gratification auprès de l'internaute qui peut ressentir de la joie et de la satisfaction pour avoir liké un contenu.

Voici quelques autres exemples de micro-interactions bien pensées et proposées par designmodo :

  • A la suite du clic sur un bouton « submit », l’indication que le processus est en cours puis qu’il a bien abouti :

Exemple d'un bouton "submit" interactif, permettant de confirmer le processus réalisé


  • Après le choix d’une proposition, l’apparition d’un fond coloré et la transformation de la croix en « + » pour indiquer à l’utilisateur l’action suivante à réaliser :

Exemple de micro-interaction permettant d'indiquer l'action à réaliser par l'utilisateur

 

  • Lors du paiement, la possibilité de visualiser, choisir et modifier facilement une carte bancaire pré-enregistrée. Ici, l'utilisateur visualise les différentes cartes de crédit préenregistrées et la carte sélectionnée :

Capture d'écran illustrant la visualisation des différentes cartes de crédit préenregistrées

Dans ces trois derniers cas, on parle de micro-interaction pédagogique : ces micro-interactions visent à faire comprendre l'action possible et réalisable.

Comment mettre en place les micro-interactions dans une démarche design

La mise en place de micro-interactions dans une démarche design passe par deux grandes étapes : le prototypage et la conception des interactions.

 

Première étape : le prototypage 

Avant toute chose, nous vous conseillons de commencer par identifier les grands éléments d’interaction de votre interface de type sticky (éléments qui restent en place, comme un menu sticky par exemple), les effets de parallaxe (déplacement d’images sous différentes couches), les effets de défilement, etc. L’enjeu est d’avoir une interface à la fois visuellement attrayante et efficace. Pour construire votre prototype, mettez-vous à la place de l’utilisateur et considérez ses aspirations et ses besoins.

Vous voulez optimiser votre expérience utilisateur (UX) ? Approfondissez vos compétences avec notre dossier dédié aux méthodes et pratiques de l'UX !

 

Deuxième étape : la conception des interactions 

Dans un second temps, en plus de concevoir le design, le designer UI imagine les interactions. Il détermine notamment les micro-interactions principales, au cœur même du produit, et les micro-interactions secondaires. Si vous manquez d'inspiration en matière de design UI/UX, notamment pour créer des micro-interactions, il existe de nombreuses ressources comme les librairies CodePen, Codrops et Dribbble. Les communautés UI/UX mettent à disposition de nombreux exemples avec XD ou Sketch.

Faites attention à ne pas faire durer une micro-interaction : au-delà de 400 millisecondes, on passe à une logique d'animation pure, et l'utilisateur peut avoir l'impression de perdre son temps. Pour garantir la bonne compréhension de ces micro-interactions, n'hésitez pas à réaliser des tests utilisateur !

Micro-interactions et accessibilité

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. A ce titre, votre interface doit être utilisable sans micro-interactions ou, autrement dit, les micro-interactions ne doivent pas être le seul moyen de véhiculer une information ou une action.

Par ailleurs, pour une meilleure accessibilité, il est recommandé de privilégier les micro-interactions simples, sans surcharge visuelle. Cela contribuera aussi à l’esthétique de votre interface ! À titre d'exemple, voici une micro-interaction simple lors d'une erreur de saisie :

erreur-de-saisie (1)Source : jetpulp.fr

 

Pensez à mettre en place des tests A/B pour valider l'efficacité de vos micro-interactions. Ces tests vous permettent alors de découvrir quelle micro-interaction est davantage privilégiée par les utilisateurs selon deux possibilités. Ils peuvent être appliqués sur les CTA disposant d'une micro-interaction.

 

Ainsi, ce sont ces détails qui rendent l’expérience utilisateur plus fluide et agréable. Un bon design d’interaction repose sur des micro-interactions à chaque étape du parcours utilisateur. Sa mise en place nécessite à la fois de la créativité et des compétences techniques, ce qui requiert un échange constant entre l’intégrateur et la direction artistique. Cela illustre une nouvelle fois l’importance de l'esprit d'équipe, des échanges et des compétences mixées pour un dispositif digital performant.

 

Nouveau call-to-action

Image mise en avant pour l'article
Marine Soroko
Directrice associée @ADIMEO
Pourquoi s'abonner à
notre newsletter ?
Pour recevoir tous les mois, un condensé de contenus utiles et pertinents pour votre transformation digitale !