UX Design : l’intérêt des microinteractions pour informer, distraire, expliquer, attirer, récompenser et amuser les utilisateurs

L’équipe du Blog du Modérateur est arrivée au web2day : durant trois jours, nous tenterons de retranscrire le contenu des meilleures conférences auxquelles nous assisterons. Nous débutons cette série avec un décryptage excellent de Thomas Buvignier, Product owner UX chez Bewizyu, sur l’importance des microinteractions.

Du monde réel aux interfaces virtuelles

Les microinteractions ne sont pas nées sur le web. Dans le monde réel également, des designers se sont focalisés sur les détails pour proposer des expériences abouties à leurs utilisateurs. Lors de la création de son parc aujourd’hui mondialement connu, Walt Disney a dit : “I don’t want the public to see the world they live in while they’re in the Park. I want them to feel they’re in another world”. Il voulait créer “l’illusion parfaite”. C’est en suivant ce principe qu’il a caché les haut-parleurs dans les décors pour que les visiteurs ne les voient pas, afin de créer la plus immersive des expériences. Même sens du détail chez Rolls-Royes, qui cache un parapluie dans la portière de son modèle Phantom : le constructeur répond ici à un micro usecase qui assoit encore davantage l’identité de la marque.

Cette attention du détail est encore plus importante dans le monde virtuel, sur les applications mobiles et les sites web. De prime abord, cela peut paraître anecdotique et opposé aux concepts d’agilité notamment, qui se concentrent d’abord sur le côté fonctionnel des projets. Créer une animation vue pendant une seconde par utilisateur n’est pas nécessairement un luxe, surtout pour les applications téléchargées des millions de fois ou pour les sites web populaires. Ce sens du détail n’est pas adapté aux POC (proof of concept) mais il peut permettre à vos projets de faire la différence.

L’intérêt des microinteractions sur les interfaces

Thomas Buvignier estime que le design des microinteractions permet de répondre à six objectifs : informer, distraire, expliquer, attirer, récompenser ou amuser l’utilisateur. “Dans le monde réel, quand on appuie sur un bouton, on attend des résultantes primaires (l’ampoule s’allume) mais aussi secondaires (on touche une texture, on entend un clic…). Les microinteractions permettent de reproduire cela dans le monde virtuel”.

Les microinteractions pour distraire l’utilisateur

Un magicien apprend d’abord à distraire un public pour effectuer ses tours de magie. Sur le web, certaines situations poussent les concepteurs à proposer des “moments de distraction” quand c’est nécessaire : temps de chargement pour délivrer une page ou générer un graphique, scrolldown to refresh… Au niveau fonctionnel, on peut se contenter d’une page blanche mais on peut aller plus loin, en proposant une roue qui tourne ou une animation plus travaillée. Cela diminue les interruptions dans l’expérience utilisateur. Elles doivent simplement rester exceptionnelles, afin de ne pas générer de la friction : si votre temps de chargement est vraiment long, travaillez aussi à la réduction de ce temps de chargement.

Les microinteractions pour expliquer

Le material design, développé par Google, est un conçu comme une superposition de couches. Malgré cette construction, l’utilisateur sait toujours où il se situe, grâce aux animations. On observe des concepts similaires sur Instagram, qui soigne ses animations d’entrée et de sortie pour les stories. On peut également prendre l’exemple d’une application pour choisir sa place dans un cinéma : l’affiche du film peut se déporter sur l’écran afin que l’utilisateur comprenne précisément l’emplacement choisi. Ce n’est pas nécessaire : on aurait pu écrire “Écran”, mais ces choix facilitent l’expérience et la compréhension.

Les microinteractions pour attirer l’utilisateur

Les notifications constituent l’élément le plus populaire pour attirer les utilisateurs. On les retrouve sur de nombreuses interfaces. À ce sujet, il convient néanmoins d’éviter certains écueils. “Pensez à la proportionnalité entre la force de l’animation et l’importance de l’information donnée”. Sur une messagerie instantanée, si l’activité est forte, on évitera que “tout l’écran bouge” à chaque réception d’un nouveau message. On pourra se contenter d’une cloche animée, une puce de notification classique. En revanche, si l’action attendue par l’utilisateur est ponctuelle, importante, nécessaire, on pourra accentuer davantage la puissance de l’animation proposée. À ce sujet, rappelons que des études d’eye-tracking ont montré que les internautes ne regardaient plus les bannières publicitaires sur les sites web, trop habitués à leur inutilité et aux emplacements mobilisés. Soyez donc vigilant à la surcharge d’attention, parfois sans intérêt, que vous demandez à vos utilisateurs, adaptez le design de vos microinteractions à leur contexte.

Les microinteractions pour récompenser l’utilisateur

Quand vous terminez un run, ou “lorsque vous soumettez votre déclaration de revenu après avoir laissé traîné le formulaire sur votre table basse pendant 3 semaines”, votre cerveau demande à votre corps de sécréter de la dopamine pour vous récompenser. Dans les interfaces, on peut reproduire ces phénomènes en récompensant les utilisateurs (Facebook et les autres l’ont bien compris avec le like). Si vous devez proposer un long formulaire à vos utilisateurs, vous pouvez ajouter un indicateur positif à chaque champ complété pour prouver à votre utilisateur que cela fonctionne et qu’il a effectué “une bonne action”.

Les microinteractions pour amuser l’utilisateur

L’amusement de l’utilisateur est rarement l’objectif principal des applications et des sites web. Malgré cet état de fait, les animations facilitent l’apprentissage, la compréhension. L’utilisateur devient ainsi “plus docile” car l’environnement est agréable et amusant. Un exemple très représentatif : “vos enfants connaissent les noms de tous les Pokémon, en revanche il est très compliqué de leur faire apprendre leurs tables de multiplication”. Concevoir des moments amusants, agréables, améliore l’expérience. Un exemple connu : “un avatar qui se cache les yeux sur un login screen lorsque l’utilisateur commence à entrer son mot de passe”. Ce moment suscite de la friction, on ne se souvient jamais de son mot de passe, cette animation facilite ce “moment gênant”. Les easters eggs sont conçus avec le même objectif, cela ne sert à rien mais cela peut amuser l’utilisateur.

Pourquoi les microinteractions sont importantes

Les microinteractions permettent de gravir une marche supplémentaire dans le pyramide de Maslow adaptée aux applications imaginée par un product designer de Google. Votre système est fonctionnel, puis fiable, puis utile, puis vous concevez des microinteractions pour qu’il devienne agréable. Même si votre application est totalement novatrice, il y a fort à parier que plusieurs clones viendront tenter de marcher sur vos platebandes dans les prochaines années. Ces éléments permettent de renforcer l’attachement des utilisateurs à votre application et d’augmenter leur fidélité. Ils resteront s’ils sont attachés à votre application.

Steve Jobs aura parfaitement réussi à appliquer ces principes lors de la conception du premier iPhone. Ce n’était pas le premier smartphone, mais cette attention du détail a permis de fidéliser les premiers utilisateurs et d’en attirer d’autres. Ils ne comparent pas objectivement les téléphones, ils choisissent Apple car la marque a réussi à se démarquer et proposer “quelque chose d’autre”. Le produit est apprécié au-delà de ses qualités. Grâce à cette attention du détail, on passe de l’univers “le produit me rend un service” à “j’apprécie le produit”.