Micro interaction : définition, exemples et bonnes pratiques

Qu’est-ce qu’une micro interaction ?

Une micro interaction est un moment très court où l’interface réagit à une seule action de l’utilisateur pour lui confirmer ce qui se passe. Le bouton « Envoyer » qui devient une roue de chargement puis une coche verte, le cœur qui se remplit quand on ajoute un produit en favori ou le champ qui vire au rouge si l’e-mail est mal saisi : ce sont des micro interactions. Chacune règle un seul petit problème, et elle le règle en une seconde ou deux.

Le terme vient du design produit. Le designer américain Dan Saffer l’a rendu populaire dans son livre Microinteractions, paru chez O’Reilly en 2013, où il décrit leur structure en quatre parties. Ce découpage sert encore aujourd’hui de base aux équipes design et développement, et c’est celui que nous suivons plus bas.

Micro interaction UI ou micro interaction UX : quelle nuance ?

On croise les deux expressions dans les recherches, et elles désignent la même chose vue sous deux angles. Côté UI, on parle de l’aspect visible : la couleur, la forme, l’animation, la durée du mouvement. Côté UX, on parle de ce que la micro interaction apporte au parcours : moins de doutes, moins d’erreurs, une tâche finie plus vite. Si la distinction entre ces deux disciplines reste floue pour vous, notre article sur l’UX et l’UI la pose clairement.

Ce qui n’est pas une micro interaction

Une animation d’ouverture de page qui dure cinq secondes n’en est pas une : elle ne répond à aucune action précise. Une vidéo en fond d’écran non plus. Ce qui compte, c’est le lien direct entre un geste (ou un événement du système) et une réponse ciblée. Sans ce lien, il s’agit de décoration, et la décoration n’a pas les mêmes règles.

• Une micro interaction répond à une action ou à un changement d’état précis.
• Elle ne concerne qu’une seule tâche à la fois.
• Elle dure peu et ne bloque pas la suite du parcours.
• Elle transmet une information : réussite, erreur, attente, état actif ou inactif.

À quoi sert une micro interaction sur un site web ?

Pour un dirigeant de TPE ou de PME, la question n’est pas de savoir si c’est joli. La question est de savoir si cela aide le visiteur à demander un devis, réserver un créneau ou payer sa commande. Une micro interaction bien pensée remplit quatre rôles très concrets, et chacun touche directement à l’expérience utilisateur.

Confirmer qu’une action a bien été prise en compte

Le premier rôle est de rassurer. Quand on clique sur un bouton et que rien ne bouge, on clique une deuxième fois, puis une troisième. Résultat : trois demandes de contact identiques, ou pire, un visiteur qui croit que le formulaire est cassé et qui part. Un simple changement d’état du bouton suffit à éviter ce scénario.

Guider sans mode d’emploi

Un bouton qui se soulève légèrement au survol de la souris dit « je suis cliquable ». Un champ qui affiche un petit indice dès qu’on y place le curseur dit « voici le format attendu ». Le visiteur comprend comment avancer sans lire une seule ligne d’aide. C’est précieux sur un formulaire long ou un tunnel de commande.

Prévenir les erreurs avant qu’elles coûtent

Signaler qu’un numéro de téléphone est incomplet au moment où on quitte le champ vaut mieux qu’un message d’erreur général après l’envoi. L’utilisateur corrige tout de suite, sans perdre ce qu’il a déjà tapé. Sur un formulaire de devis ou un paiement, chaque erreur évitée est une demande qui aboutit, et votre taux de conversion en profite.

Donner du caractère au produit

Enfin, une micro interaction transmet une personnalité. Un mouvement souple et discret donne une impression de sérieux, un petit rebond une impression de légèreté. Ce n’est pas le rôle principal, mais c’est ce qui fait qu’un site ou une application semble soigné plutôt que générique. Attention cependant : le caractère vient après l’utilité, jamais avant.

Comment ça marche : les quatre composants d’une micro interaction

Le modèle de Dan Saffer découpe chaque micro interaction en quatre parties : le déclencheur, les règles, le feedback, puis les boucles et les modes. Ce découpage est utile en pratique, parce qu’il oblige à se poser les bonnes questions avant de dessiner quoi que ce soit. Il permet aussi de se mettre d’accord entre le designer, le développeur et le client sur ce qui doit se passer exactement.

Le déclencheur (trigger) : ce qui lance la micro interaction

Le déclencheur, ou trigger en anglais, est l’événement qui démarre tout. Il existe deux familles de déclencheurs. Les déclencheurs manuels viennent de la personne : un clic, un tap sur mobile, un survol (hover), un glissement du doigt, une touche du clavier. Les déclencheurs système viennent de l’application elle-même : un message reçu, une sauvegarde terminée, une connexion perdue, un stock qui passe à zéro.

Un bon déclencheur manuel se voit et se comprend. Un bouton doit ressembler à un bouton, une zone cliquable doit avoir une taille suffisante pour le doigt. Pour un déclencheur système, la question est plutôt celle du bon moment : prévenir l’utilisateur d’un événement utile, sans l’interrompre pour un détail.

Les règles : ce qui se passe une fois le déclencheur activé

Les règles décrivent le comportement : ce qui change, dans quel ordre, et sous quelles conditions. Par exemple, pour un bouton d’ajout au panier : si le produit est en stock, l’article est ajouté et le compteur du panier augmente de un ; s’il est en rupture, le bouton reste inactif et un message propose d’être prévenu du retour. Chaque règle doit être écrite noir sur blanc avant le développement.

C’est souvent là que les projets dérapent. Le designer imagine le cas idéal, et personne n’a prévu le cas où la connexion coupe en plein envoi. Prendre le temps de lister les cas limites (pas de réseau, champ vide, double clic, utilisateur non connecté) évite des comportements absurdes une fois le site en ligne.

Le feedback : ce que l’utilisateur voit, entend ou ressent

Le feedback est la partie visible de la micro interaction. Il peut être visuel (un changement de couleur, une icône, une animation), sonore (un léger son de notification), ou tactile (une vibration sur mobile). Son seul travail est de traduire les règles en un signal que la personne comprend sans réfléchir. Un feedback réussi répond à la question « est-ce que ça a marché ? » avant même qu’elle soit posée.

Le feedback doit être proportionné. Une action banale, comme cocher une case, mérite un signal discret. Une action importante, comme valider une commande, mérite un signal plus net, voire un message de confirmation. Pour les confirmations brèves qui s’affichent puis disparaissent, le format de la toast notification est souvent le plus adapté.

Les boucles et les modes : ce qui se passe dans la durée

Les boucles décrivent ce qui se passe quand la micro interaction se répète ou dure. Faut-il montrer la même animation à chaque visite, ou l’alléger une fois que la personne a compris ? Une info-bulle d’aide peut s’afficher les deux premières fois, puis plus du tout. Un indicateur d’enregistrement peut tourner tant que la sauvegarde n’est pas terminée, puis s’arrêter.

Les modes, eux, sont des états particuliers qui changent temporairement les règles. Un interrupteur « mode sombre » ou un mode édition dans un back-office en sont des exemples. La consigne de Dan Saffer est simple : utiliser les modes avec parcimonie, parce que chaque mode supplémentaire est une source de confusion. L’utilisateur doit toujours savoir dans quel mode il se trouve.

• Déclencheur : qu’est-ce qui lance l’action, et est-ce visible ?
• Règles : que se passe-t-il, y compris dans les cas d’échec ?
• Feedback : comment la personne sait-elle que ça a marché ?
• Boucles et modes : que devient la micro interaction à la dixième utilisation ?

Exemples de micro interactions utiles sur un site ou une application

Les exemples ci-dessous sont volontairement ordinaires. Ce ne sont pas des effets spectaculaires vus sur des sites primés, mais des micro interactions que l’on retrouve sur des sites qui vendent et des logiciels utilisés tous les jours. C’est là qu’elles rapportent le plus.

Le bouton d’envoi d’un formulaire

Au clic, le texte du bouton laisse place à un indicateur de chargement et le bouton se désactive pour empêcher un double envoi. Une fois la demande reçue, une coche apparaît avec un court message du type « Demande envoyée, réponse sous 24 h ». En cas d’échec, le bouton redevient actif et un message explique quoi faire. Trois états, trois règles, un seul geste.

La validation d’un champ en direct

Quand le visiteur quitte le champ e-mail, le site vérifie le format. Si c’est bon, une petite coche s’affiche ; sinon, un message précis apparaît sous le champ : « Il manque le @ ». Le point important est le moment : on valide quand la personne a fini de taper, pas à chaque lettre, sinon le champ crie à l’erreur alors qu’elle n’a pas terminé.

L’ajout au panier

Sur une boutique en ligne, l’ajout au panier est l’une des micro interactions les plus importantes. Le bouton confirme l’ajout, le compteur du panier s’incrémente, et un petit mouvement attire l’œil vers l’icône du panier. Le visiteur sait que son produit est bien là et peut continuer ses achats sans quitter la page.

Beaucoup de sites affichent ce résultat avant même la réponse du serveur, puis corrigent en cas de souci. Cette technique a un nom, l’optimistic UI, et elle donne une impression de rapidité très appréciable sur une connexion mobile moyenne.

Le favori ou le « j’aime »

Un cœur ou une étoile qui se remplit avec un léger effet de grossissement : c’est l’exemple classique cité dans toutes les galeries d’inspiration. Il fonctionne parce qu’il est immédiat, réversible d’un second tap, et que l’état reste visible ensuite. Sur un catalogue de produits ou de biens immobiliers, il incite à revenir consulter sa sélection.

Le survol sur ordinateur, le tap sur mobile

Sur ordinateur, le hover permet de signaler qu’un élément est interactif : une carte produit qui se soulève, un lien qui se souligne. Sur mobile, le survol n’existe pas. Toute information affichée uniquement au survol est donc invisible pour une grande partie de vos visiteurs. Le bon réflexe est de prévoir un retour au tap, comme un léger enfoncement du bouton, et de ne jamais cacher une information essentielle derrière un survol.

Les états d’attente

Pendant un chargement, une barre de progression ou une silhouette grisée du contenu à venir rassure plus qu’un écran blanc. Ces silhouettes, appelées skeleton screens, font partie des micro interactions déclenchées par le système. Elles ne rendent pas la page plus rapide, mais elles rendent l’attente plus supportable.

Erreurs courantes et bonnes pratiques

Les micro interactions ratées ont un point commun : elles servent le designer plutôt que le visiteur. Voici les erreurs que l’on rencontre le plus souvent lors d’audits de sites, et la manière de les corriger.

Animer pour animer

Chaque mouvement doit transmettre une information. Si vous ne pouvez pas dire en une phrase ce que l’animation apprend à l’utilisateur, supprimez-la. Un site où tout bouge fatigue l’œil, et les signaux importants se noient dans le bruit. Mieux vaut cinq micro interactions utiles qu’une page entière qui gigote.

Des animations trop longues

Une micro interaction doit rester courte. Le repère couramment utilisé par les designers tourne autour de quelques centaines de millisecondes pour les transitions d’interface : assez pour être perçu, pas assez pour faire attendre. Une animation de confirmation d’une seconde et demie, répétée à chaque ajout au panier, devient vite pénible. Et une animation qui empêche de cliquer tant qu’elle n’est pas finie est un frein pur et simple.

Oublier l’accessibilité

Certaines personnes souffrent de troubles vestibulaires et peuvent ressentir des vertiges face à des mouvements amples. Les navigateurs permettent de détecter la préférence « réduire les animations » réglée dans le système, grâce à la requête CSS prefers-reduced-motion : respectez-la. Autre point : un feedback ne doit jamais reposer sur la seule couleur, car un message d’erreur signalé uniquement en rouge échappe à une partie des visiteurs. Les exigences du RGAA en matière d’accessibilité donnent un cadre clair sur ces sujets.

Un feedback qui ment

Afficher une coche verte alors que la demande n’est pas réellement partie est la pire erreur possible. Le client attend une réponse qui ne viendra jamais. Si vous utilisez un affichage optimiste, prévoyez toujours le retour en arrière et un message clair en cas d’échec. La confiance perdue de cette manière se regagne très difficilement.

Négliger la performance

Une animation mal codée peut rendre la page saccadée, surtout sur un téléphone d’entrée de gamme. La règle technique de base est d’animer de préférence la position, l’échelle et l’opacité des éléments, que le navigateur sait traiter efficacement, plutôt que leur largeur, leur hauteur ou leurs marges. Évitez aussi de charger une lourde bibliothèque d’animation pour un simple changement de couleur de bouton.

Les bonnes pratiques à retenir

• Partir du besoin : quelle hésitation ou quelle erreur la micro interaction doit-elle éviter ?
• Écrire les règles, y compris les cas d’échec, avant de dessiner l’animation.
• Garder des durées courtes et des mouvements discrets.
• Prévoir un retour au tap sur mobile, pas seulement au survol.
• Respecter le réglage « réduire les animations » et ne pas coder une information par la seule couleur.
• Rester cohérent : un même type d’action doit produire le même type de feedback partout.
• Tester sur un vrai téléphone, avec une connexion moyenne, avant la mise en ligne.

Concevoir et intégrer des micro interactions : méthode et outils

Dans un projet de site ou de logiciel, les micro interactions ne doivent pas arriver à la fin comme une couche de vernis. Elles se pensent dès la maquette, au moment où l’on définit les parcours et les états de chaque composant. C’est ce que nous faisons lors d’une création de site internet : chaque bouton, champ et message a ses états prévus avant la première ligne de code.

Prototyper dans Figma

Figma est l’outil le plus répandu pour concevoir des micro interactions. Ses variantes de composants permettent de dessiner chaque état d’un bouton (repos, survol, appui, chargement, succès, erreur), et ses fonctions de prototypage, comme Smart Animate, simulent les transitions entre ces états. Le client peut ainsi cliquer sur une maquette et juger du rendu avant tout développement.

Les passer en production

Pour la grande majorité des cas, les transitions et animations CSS suffisent : elles sont légères, natives et bien gérées par tous les navigateurs récents. Pour des animations plus riches, comme une illustration animée, des formats comme Lottie ou Rive permettent d’exporter une animation créée par un designer et de la lire sur le site. Les bibliothèques JavaScript d’animation sont utiles dans les applications complexes, mais elles ajoutent du poids : à réserver aux cas qui le justifient.

Trouver de l’inspiration sans copier

Les galeries d’exemples et les bibliothèques de micro interactions en ligne sont pratiques pour trouver des idées. Le piège est de reprendre un effet parce qu’il est spectaculaire, sans se demander s’il sert votre visiteur. Gardez toujours la même grille de lecture : quel déclencheur, quelles règles, quel feedback, et que devient-il à la dixième utilisation ?

Questions fréquentes