Une micro-interaction, c'est une petite réponse de l'interface à une action : un bouton qui s'enfonce, un champ qui se valide, un chargement qui rassure. Invisibles quand elles sont bonnes, agaçantes quand elles sont mauvaises. Voici les 10 qui comptent sur un parcours qui doit convertir.
1. Le feedback de bouton
Au clic, le bouton doit répondre instantanément : léger enfoncement, changement d'état. Sans feedback, l'utilisateur reclique, doute, ou part. Le délai perçu tue la confiance.
2. L'état de chargement honnête
Quand une action prend plus de 400 ms, montre-le : spinner, barre, ou squelette. Mieux : un skeleton screen qui préfigure le contenu réduit l'anxiété mieux qu'un spinner qui tourne dans le vide.
3. La validation inline
Valider un champ au moment où l'utilisateur le quitte, pas à la soumission. Un email mal formé signalé tout de suite évite la frustration du formulaire rejeté en bloc. Et le message doit être accessible (lu par les lecteurs d'écran).
4. La transition qui situe
Quand on passe d'un écran à l'autre, une transition directionnelle dit "tu es allé d'ici à là". Ça construit une carte mentale. Une coupe brutale désoriente.
5. L'état vide utile
Un écran vide ("aucun résultat", "pas encore de projet") est une opportunité, pas une impasse. Une micro-illustration sobre + une action claire ("Créer ton premier projet") transforme le vide en premier pas.
6. Le hover qui informe
Sur desktop, le survol révèle l'action possible : une carte qui se soulève légèrement, une flèche qui glisse. On évite le scale(1.05) générique — on change l'état (translation, fond, flèche), pas la taille de façon isotrope.
7. La confirmation de succès
Après un envoi réussi, une confirmation nette (coche animée, message vert) ferme la boucle. L'utilisateur sait que c'est fait. Sans ça, il renvoie le formulaire ou s'inquiète.
8. Le progressive disclosure
Révéler l'information au fur et à mesure plutôt que tout d'un coup. Un formulaire long qui se déploie étape par étape paraît plus court qu'une page de 12 champs affichés d'emblée.
9. Le pull-to-refresh et les gestes mobiles
Sur mobile, les gestes naturels (tirer pour rafraîchir, glisser pour archiver) avec un retour visuel clair rendent l'app fluide. À condition de respecter les conventions de la plateforme.
10. La micro-célébration
Un petit moment de plaisir à un jalon clé (fin d'onboarding, premier achat) crée de l'attachement. Avec parcimonie : une confettis à chaque clic devient vite insupportable.
La règle d'or
Une micro-interaction sert la tâche, jamais l'ego du designer.
Trois garde-fous : la performance (jamais au prix de la fluidité), l'accessibilité (toujours respecter prefers-reduced-motion), et la sobriété (si on peut la retirer sans rien perdre, on la retire). Une animation gratuite est une dette, pas une feature.
Tu veux savoir lesquelles ajouter à ton produit pour gagner des conversions ? C'est exactement ce qu'on regarde dans un audit UX gratuit. Et pour la philosophie complète, voir les 12 frictions UX.