Leçon 6 : animations et micro-interactions — dosage et accessibilité
Tu as ajouté un rebond de 600ms à chaque bouton et ça avait l'air cool — jusqu'à ce qu'un·e utilisateur·rice sensible au mouvement signale que l'écran lui donne le vertige. Cette leçon t'apprend les animations basées sur des tokens : des transitions subtiles, des micro-interactions qui ont un sens,
L'animation, c'est comme l'assaisonnement : un peu améliore le plat, trop le gâche, et certaines personnes y sont sensibles. Pour quiconque demande moins de mouvement, tu ne sers pas un plat moins bon — tu sers une version plus calme : tu remplaces l'épice forte par une douce, sans perdre la saveur. L'animation fonctionne pareil : tu retires le grand mouvement, mais tu gardes le feedback.
- transition token
- Une durée et une valeur d'easing fixes, choisies dans un petit ensemble — par exemple `duration-200 ease-out` — pour que chaque transition de l'UI paraisse uniforme plutôt qu'aléatoire.
- micro-interaction
- Un petit feedback visuel à une action de l'utilisateur·rice — un léger changement au survol, à l'appui ou au focus — qui confirme que quelque chose s'est passé, sans distraire.
- prefers-reduced-motion
- Une préférence système où un·e utilisateur·rice demande à réduire le mouvement (souvent à cause d'une sensibilité vestibulaire). « Réduire » n'est pas « supprimer » : une UI accessible retire le grand mouvement mais garde le feedback — par ex. un changement d'état instantané au lieu d'une animation.
- motion-reduce variant
- La variante Tailwind qui applique des classes seulement quand l'utilisateur·rice a demandé un mouvement réduit — par ex. `motion-reduce:transition-none` qui leur retire une transition.
