🎬 Les Micro-interactions au service de l’UI 💎 (ou plutôt UX)

Une grande partie de l’assimilation par l’utilisateur provient de la clarté de l’expérience… et une bonne expérience passe par un design réfléchi. Naturellement, l’UX nécessite un appui par l’UI.

Cependant, lorsque graphiquement l’objectif est assimilé, la plupart du temps la machine à développer est lancée et l’interface est construite sur le tas. C’est donc assez souvent, et ce par faute de temps, de synergie d’équipe/R.O.I etc. qu’une partie importante du design est omise lors de la conception, entre l’UX et l’UI :

🎬 la micro-interaction 🎬

L’interaction est définie par l’action de l’utilisateur au sein de l’interface, mais la MICRO-interaction est la traduction visuelle de ce que fait l’utilisateur (scroller, changer de page, cliquer sur un bouton, etc.) dans le contexte produit. Elle est le détail qui va créer de l’émotion chez l’utilisateur, améliorer son expérience en apportant plus de vie aux interfaces.

Je ne vais pas forcément m’étendre sur l’UI mais plutôt recentrer le sujet sur l’UX avec les quelques points/questions qu’il faut toujours avoir en tête lorsque l’on travaille des micro-interactions :

Est-ce une animation “principale” reprise dans différentes parties de l’interface) ou “secondaire” (un seul endroit, pour un message unique) ?

Ex “PRINCIPAL” : Qu’importe la couleur du canapé, l’animation reste la même et peut être répétée sur différents produits.

Ex “SECONDAIARE” : Un loader est par définition unique. Même si répétée ailleurs, l’animation ne sera pas appliquée à un autre élément.

📣 Mon animation doit TOUJOURS être fonctionnelle, justifiée et ne raconter qu’une seule “partie de l’histoire” .

Ce qu’il faut comprendre par cela est que l’on ne crée pas une animation pour “faire joli”, mais plutôt pour raconter un moment d’une histoire qu’est notre interface. C’est une traduction de l’interaction de l’utilisateur, protagoniste de cette histoire.

Il est possible que le message que l’animation véhicule à l’utilisateur soit utilisé à plusieurs endroits, mais il faut impérativement qu’il soit véhiculé avec la même volonté.

C’est un peu comme si vous racontiez une histoire à un enfant. Qu’il la connaisse déjà ou non, vous vous attardez sur certains passages clés. Vous abordez avec différents tons les différents passages de l’histoire : la joie ne se confond pas avec la peur et chaque intention reste à sa place pour une histoire claire.

Et dans tout cela, qu’est-ce que mon animation raconte ?

Pour plus de précision dans votre narration de l’histoire à cet enfant, vous accentuez les émotions, exagérerez les expressions de votre visage, changez votre voix, afin que l’enfant comprenne l’action ou l’intrigue en cours et qu’il se sente accompagné. Et bien pour une interface c’est pareil, on accompagne l’utilisateur avec des animations, parfois exagérées, pour que l’utilisateur soit conforté sur ses choix.

L’exemple qui me vient tout de suite est celui du “place holder” : Si l’interface nécessite un temps de chargement pour accéder à une information, à défaut de l’expliquer exprimons-le visuellement !

Pour cela, il ne suffit pas ici de placer un loader lambda sur la maquette ou de laisser charger la page au fur et à mesure, mais de donner à l’utilisateur, via une interaction, l’impression qu’il ne perd pas son temps à attendre et qu’il ai un aperçu ce qui l’attend.

Si vous m’avez bien suivi , vous l’aurez compris : la micro-interaction est avant tout une affaire d’expérience utilisateur, et de volonté. L’accompagnement est au centre de cette expérience, la narration y joue un rôle essentiel et le détail y est identitaire.

Tout doit-il forcément être utile dans mes animations ?

Il y a une partie de luxe parfois accessible tant en quantité qu’en qualité mais cela reste souvent subjectif : celle de rajouter des touches d’animation visuelle que je vais vulgariser d’inutile. Tout designer souhaite rajouter sa patte et faire de belles choses, personne ne le niera. Il faut juste le faire sans trop en faire pour l’utilisateur. À mon avis, il vaut mieux travailler en deux temps. Rester simple au début, et tenter d’étoffer dans un second temps.

⚠️ Tips and tricks à garder en tête :

• Des interactions, oui mais pas trop : ne pas non plus tomber dans le “too much”, qui risque de produire l’effet inverse sur les utilisateurs. Les utilisateurs agacés, eux, reviennent rarement. En micro-interaction moins est plus.
• Le top est de faire en sorte que les interactions durent au maximum 300–400 millisecondes avec une fluidité bien traitée.
• Faire des animation (dans les interactions) d’un seul mouvement. Si vous êtes amené à découper l’animation ou à l’expliquer, essayez de simplifier.
• Le détail donne l’identité produit. Tout détail est une opportunité pour prouver que votre interface est reconnaissable, forte et se démarque.
• Utiliser l’humour : L’humour dans l’interaction, quelle que soit l’échelle, est un moyen sûr d’apporter des réactions émotionnelles dans l’expérience utilisateur. Par exemple MailChimp, un service d’envoi et de création de mail, rend l’expérience beaucoup plus interessante pour les utilisateurs en ajoutant de l’humour et de la positivité tout au long du processus (enfin pas forcément chez “PFG”).

by Brent Clouse

• Gardez la longévité dans l’esprit. L’animation deviendra t-elle toujours agaçante à la 100e utilisation ou est-elle à l’inverse claire et discrète?

Et voilà ! Je ne demanderai que deux dernière choses de votre part :

1. Allez faire un tour sur la plateforme medium de france télévisions ! 👇🏻👇🏻

francetelevisions-design

2. Si vous avez aimé cette article, une 50aine de claps 👏🏻👏🏻👏🏻 pas plus 😊

MERCI pour l’attention !!