6 faits qui font des micro-interactions une vraie valeur ajoutée à votre produit

C’est une action de l’utilisateur qui déclenche une autre action sur l’appareil.
Ce sont des animations visibles sur l'écran qui vont générer de l'émotion ou venir accompagner l'utilisateur dans sa navigation.

La différence entre un produit que vous aimez et un produit que vous tolérez est souvent les micro-interactions que vous avez avec lui.
Dan Saffer

Les micro-interactions sont en tout premier lieu, présentes pour guider les utilisateurs dans leur navigation. On retrouve classiquement les états de hover, entre autre, qui sont un BA-BA de toute interface numérique (en tout cas sur desktop) et l'état Tap sur mobile.

‍

La micro-intéraction permet de donner l’information en direct et de guider l’utilisateur dans son expérience, par plusieurs moyens :

• En indiquant une direction : comme devoir scroller dans la page
  ‍
• En mettant en avant une action réalisée par l’utilisateur : comme l’ajout d’un article au panier
  ‍

‍

• En indiquant un statut : au survol, ou lors d’un champs correctement remplir sur un formulaire.

‍

Au fil du chargement des pages d’un site internet ou d’une application, on peut vite être perdu dans sa profondeur sans savoir où l’on a atterrit.
Les micro-intéractions permettent alors de garder du contexte.

Par exemple sur un e-commerce, au clic sur un produit, on peut venir l'agrandir pour afficher son descriptif puis jouer avec les éléments de personnalisation pour mieux comprendre l'action effectuée.

‍

‍

À l’image d’un chauffeur de salle lors de spectacle, les micro-intéractions peuvent aussi être là pour distraire les utilisateurs quand c’est nécessaire.

Que ce soit lors de temps de chargement d'une page ou pour générer une information, il est important d'occuper les utilisateurs pendant ces temps de latence.

En proposant une roue qui tourne ou une animation chartée à l’univers du produit, on diminue les interruptions dans l’expérience utilisateur.
Elles aident également à comprendre l’état du système.
Enfin, elles doivent rester exceptionnelles afin de ne pas générer trop de frictions.

Pour plus de fun, elles peuvent aussi être contextualisée à votre produit. 

Par exemple, avec Jussieu Secours, nous avons imaginé une ambulance qui avance pour évoquer le chargement.

Un autre exemple ci-dessous, avec l'animation lors du chargement du site Airbnb.

‍

Les notifications constituent l’exemple par excellence de ce quatrième point.
Elles apparaissent à l’écran attirant ainsi l’oeil de l’utilisateur.

Tout comme le reste il faut savoir les utiliser avec parcimonie et intelligence afin de ne pas venir polluer l’utilisateur, qui dans le cas contraire risquerait d’être agacé voir complètement réfractaire à utiliser le produit ou l’application.

On peut imaginer par exemple une petite cloche qui bouge pour alerter de nouvelles notifications, ou un simple toast de notifications pour alerter d’un nouveau message par exemple. Celles-ci peuvent même être accompagnée de Sound Design.

‍

‍

C’est certainement le point le plus compliqué, et le plus crucial d’un produit.
Ce qui fait que votre utilisateur reviendra. Lui faire vivre une expérience "Waouh".
Cela passe sans nul doute par l’ajout subtil de micro-intéractions.

La récompense

Lorsque vous avez terminé une séance de sport, ou que vous avez enfin envoyé votre déclaration d’imposition, votre cerveau demande à votre corps sa dose de dopamine pour être récompensé.
Ce système peut-être reproduit sur les interfaces web par le biais des micro-intéractions, qui accompagné d’un bon UX Writing peut avoir un effet non négligeable sur l’émotion perçue par vos utilisateurs.

Nous l’avons par exemple implémenté sur Smatchy. Lorsque l’utilisateur atteint un niveau supérieur, il a le droit à son lot de confetti. Sympa non ?

‍

L’amusement

Arriver à faire rire ou sourire votre utilisateur grâce à votre interface.
Un sacré challenge. Et pourtant c’est possible.Pour cela, il est important de bien connaître sa cible et ses personas.

L’humour d’un enfant n’est pas le même que celui d’un adulte, ou d’un chef d’entreprise.

Le mieux est d’utiliser l’amusement dans des moments qui peuvent être gênants.
On peut parler de page 404, ou de mots de passe oubliés.
En y ajoutant une dose d’humour bien dosée, l’utilisateur oubliera le contexte par forcément fun, et en gardera un bon souvenir.

‍

‍

Les micro-intéractions c’est la cerise sur le gâteau.
‍
En toute transparence, rien ne sert de s’en préoccuper si votre produit ou votre application ne fonctionne pas bien.
L’expérience utilisateur passe d’abord par une navigation et des parcours fluides et faciles à comprendre.
Sans ça, vous aurez beau mettre toutes les micro-intéractions du monde, les meilleures qui soit, votre produit ne décollera pas et vos utilisateurs seront tout aussi frustrés.

Les micro-intéractions viennent s’ajouter à une expérience déjà correcte et fluide et permettent de franchir cette dernière marche.
Votre produit est fonctionnel, fiable, utile. Grâce aux micro-intéractions il peut devenir agréable voire mémorable.

Responsive

Pour une expérience optimale, vos micro-intéractions doivent fonctionner sur tous les supports et être adaptées au format de l’écran. Ainsi une illustration animée sur desktop n’aura pas forcément le même emplacement ni la même taille que sur mobile.

‍

Naturelle et brandée

Pour qu’une micro-intéraction soit efficace, elle se doit de se fondre dans le produit à 100%. Elle doit-être brandée à vos couleurs, à votre charte, à votre univers pour éviter un décalage trop important. L’animation doit être douce et fluide pour que l’utilisateur ne se pose aucune question.

‍

Rapide

L’animation ne doit pas ajouter du temps au chargement de votre page et doit paraitre inaperçue pour vos utilisateurs. Elle ne doit pas venir perturber l’expérience mais l’enrichir. En somme elle ne doit pas donner l’impression de devoir attendre pour accéder à la suite de l’expérience.

‍

Compréhensible

Utilisez des codes courants. Sa compréhension doit être immédiate et elle ne doit pas rompre la dynamique de l’expérience.

‍

Utile

Quelque soit l’animation mise en place, elle doit d’abord se révéler nécessaire. Puis belle. Une mauvaise animation sera toujours pire que pas d’animation du tout, c’est pourquoi elle ne doit pas être pensée à la va-vite.

‍

Less is more

Comme souvent dans le design d’interface, less is more, le moins fait le mieux. N’en faîtes pas trop. Dans le cas contraire, soit vous donnerez la nausée à vos utilisateurs, soit vous les lasserez.

‍

Cohérence

Votre site respecte une charte précise, vos intéractions doivent faire de même. Si vous optez par un animation au survol sur un bouton, elle doit être similaire au survol sur d’autres éléments. C’est ainsi qu’on l’a pensé les micro-intéractions chez Maemi-studio.

‍

Comment mesurer l’intégration de ces micro-intéractions ?

Le mieux, comme souvent est de faire tester votre site auprès d’utilisateurs finaux et de percevoir en direct leurs émotions. Voire de les questionner directement sur leur perception en direct. Vous pouvez aussi utiliser des outils de trackings comme des analytics, ou des cartes de chaleurs (heatmaps).
‍

Des micro-intéractions facile ?

Il existe beaucoup de ressource sur le web. Chez Maemi-studio nous utilisons beaucoup des librairies déjà existantes (on réinvente pas les codes qui marchent déjà). CodePen ou Lottie sont d’excellente ressources que nous exploitons régulièrement.

‍

Comment guider les développeurs dans cette étape ?

Le mieux est de concevoir en pair design et de les inclure pleinement dans cette réflexion.Les développeurs seront d’ailleurs force de proposition car ils connaissent les contraintes techniques, de performance, et utilisent des librairies toujours plus modernes et plus fournies.

Ensuite il faut veiller à documenter le parti pris et l’orientation visuelle afin de garder la cohérence lors de l’évolution du produit. A l’image de librairie pour les composants ou les illustrations, une librairie dédiée aux micro-intéractions pourrait être une idée à envisager, tout au moins les inclure au sein des Design System pour cadrer les choses et que votre produit ne ressemble pas aux illuminations de Noël.

‍