Ce studio aime le mouvement. Il y a une animation en canvas sur notre propre page d’accueil. Prenez donc ceci comme un aveu plutôt que comme une leçon : l’essentiel des animations que nous avons livrées durant nos premières années coûtait de l’argent à nos clients.
Pas les animations décoratives. Celles qui se trouvent sur le chemin — une apparition avant l’affichage du formulaire, une modale de 400 ms, un fondu déclenché au défilement entre le lecteur et le bouton qu’il est venu presser.
Ce que nous mesurons désormais
Avant et après tout travail sur le mouvement, nous relevons le temps jusqu’à la première interaction avec le CTA principal — non pas le chargement de la page, mais le délai entre l’arrivée et le moment où le visiteur peut réellement agir. Deux règles en sont sorties, et nous ne les avons pas enfreintes depuis.
- Rien ne s’anime entre l’utilisateur et l’action principale. Les formulaires, les boutons et les tarifs sont là. Ils n’arrivent pas.
- Les animations de retour restent sous 200 ms, les transitions sous 300 ms. Tout ce qui est plus lent doit être justifié par écrit, juste à côté.
Une animation est gratuite quand elle accompagne l’utilisateur, et coûteuse dès l’instant où elle passe devant lui.
Les apparitions au défilement méritent une mention spéciale
Le fondu au défilement est l’effet le plus copié du web et le plus facile à rater. Deux défaillances que nous voyons sans cesse : du contenu qui n’apparaît jamais parce que l’observateur ne se déclenche pas lors d’un défilement rapide, et des apparitions appliquées à un texte que le visiteur est en train d’essayer de lire.
Notre règle : une apparition peut s’exécuter une fois, doit se terminer en moins de 800 ms, et ne doit jamais retarder ce que le visiteur est précisément venu chercher.
La partie accessibilité n’est pas optionnelle
Le mouvement n’est pas qu’une préférence esthétique pour tout le monde. La parallaxe et les déplacements de grande ampleur peuvent provoquer nausées et vertiges chez les personnes souffrant de troubles vestibulaires. Tous les systèmes d’exploitation exposent aujourd’hui un réglage « réduire les animations », et le respecter tient en une media query.
Si votre site ignore `prefers-reduced-motion`, une part de vos visiteurs ferme l’onglet pour des raisons que vos statistiques n’expliqueront jamais.