Les micro-interactions et l'expérience utilisateur

Ce constat est clair, le digital rythme notre quotidien ! Smartphone, ordinateurs, tablettes, montres… brosse à dents ?!
Oui, nous sommes sans cesse en interaction avec des interfaces digitales. Mais qu’est-ce qui fait que l’on adhère à un site, une application… plus qu’un autre ? Tout réside dans la qualité de l’expérience utilisateur vécue. Ce fameux sentiment de satisfaction où les émotions ressenties lors de la navigation rendent une interface digitale agréable et mémorable.

Nous allons donc nous intéresser à ces éléments puissants qui participent grandement à cette expérience : les micro-interactions.

UX & Webdesign
Publié le 14/12/2018
Auteurs
Partager l’article

QUELS SONT LES LEVIERS DE L’UX ?

Pour qu’une expérience soit bonne, elle se doit d’être fluide et agréable. Dans le digital, cela s’appuie sur 3 domaines :

  • La perception du temps
  • Le sentiment de confiance
  • L’interactivité
     

Le temps
 

Vous le savez, il est relatif, quand vous passez un bon moment il s’écoule plus vite et vice versa. C’est justement sur ce phénomène que nous allons jouer afin d’améliorer l’UX..

Il faut savoir qu’il existe 2 types de temps. Le temps objectif, qui est mesurable (celui qui s’affiche sur votre montre) et le temps psychologique qui est celui que l’on perçoit et ressent.

Pour influencer sur ce dernier et afin qu’il paraisse moins long, nous allons occuper, distraire ou encore faire agir l’utilisateur dans le but d’enrichir son expérience et faire en sorte de la rendre la plus agréable possible.
 

Le sentiment de confiance
 

Soyez clair avec vos utilisateurs et informez-les ! Une erreur de chargement, un bug inopiné, un champ mal rempli… si l’information est transmise, l’expérience utilisateur ne s’en portera que mieux et vos internautes éviteront de se poser mille questions.
 

L’interactivité
 

Nous interagissons constamment avec notre environnement et sommes donc habitués à avoir des retours sur ce que nous faisons. Cette expérience se doit d’être intégrée aux interfaces digitales afin que les utilisateurs ne soient pas perturbés dans leurs façons de percevoir les choses. On recherche une certaine humanisation des interactions numériques.

En somme, pour influer sur ces 3 grands facteurs de l’expérience utilisateur, la solution de design existe : les micro-interactions !

UNE MICRO-INTERACTION C’EST QUOI ?

Le terme a été créé par Dan Saffer et est défini de la manière suivante :

« Petits instants pendant lesquels l’utilisateur et l’interface interagissent. Quand elles sont bien conçues, ces micro-interactions améliorent l’expérience de l’utilisateur et optimisent la conversion sur des actions spécifiques. »

En gros cette M.I comme on l’appelle dans l’milieu, doit être là pour compléter et enrichir l’expérience d’utilisation et vient appuyer la cohérence esthétique de toute l’interface.

Il faut savoir qu’une micro-interaction n’est jamais là par hasard et doit être justifiable. Elle doit apporter quelque chose à l’utilisateur :

  • Informer des erreurs qui se produisent
  • Informer sur un délai de traitement (chargement)
  • Guider
  • Conforter (retour visuel suite à une action)

… et beaucoup d’autres cas encore !

Une micro-interaction fait le pont entre deux états. Elle donne un retour à l’utilisateur afin de l’informer efficacement sur ce qu’il se passe, et du bon avancement (ou non) de son parcours.

COMMENT CONCEVOIR UNE BONNE MICRO-INTERACTION ?

Une micro-interaction doit s’intégrer au design de votre interface et rester cohérente. C’est aux designers de faire correctement leur travail ici !

Puis il y a 4 grands critères à déterminer pour bien concevoir une micro-interaction :

  • le déclencheur: Détermine quel évènement ou information va déclencher la micro-interaction (un clic, du scroll, un chargement de données…)
  • les règles: expliquer les conditions dans lesquelles la micro-interaction peut se déclencher (une erreur de formulaire, l’ajout d’un produit au panier…)
  • le feedback: C’est la réponse perceptible que va fournir l’interface pour informer l’utilisateur (une animation, un son…)
  • les boucles et modes : Déterminer la manière dont la micro-interaction va évoluer. Personnalisation de celle-ci, déclenchement multiple… (système de like, annulation de l’action…)

Les micro-interactions, en plus d’adresser efficacement des informations à vos utilisateurs, vous permettent d’être créatif et de renforcer l’âme de votre site. Pensez bien que plus votre site retiendra l’attention de l’utilisateur, plus il sera susceptible de revenir !

QUELQUES EXEMPLES CONCRETS DE MICRO-INTERACTIONS !

clic-loading

Le loader « simple »

 

loading-chargement-chiffre

Le loader avec indicateur de progression

chargement-page

Le loading skeleton screen

erreur de saisie

Erreur de saisie

like-loading

Le like

MICRO-INTERACTIONS : LES CLÉS DE LA RÉUSSITE !

Une expérience digitale s’agrémente de beaucoup d’éléments qui doivent répondre aux besoins et attente de ses utilisateurs : Parcours, discours, design, interactions… et aucun de ces éléments n’est négligeable. Le domaine des micro-interactions, qui a été abordé ci-dessus, vous donne les clés pour répondre de manière cohérente au besoin de vos utilisateurs qui est de vivre une expérience … bah euh… cohérente 😉

Soyez créatifs et n’oubliez pas que vos utilisateurs sont le nerf de la guerre 😉