Concevoir un mouvement qui semble calme, pas bruyant

L'animation sur le web a un problème de réputation, méritée par une décennie de cirques parallax et de logos qui tournent. Bien utilisé, le mouvement n'est pas de la décoration : c'est de l'information — ce qui vient de changer, d'où ça vient, ce qui mérite l'attention ensuite.

La physique du « premium »

Une interface semble chère quand son mouvement obéit à une physique crédible. Les vrais objets ne démarrent ni ne s'arrêtent instantanément ; ils accélèrent et se posent. C'est pourquoi presque tout ce qu'on livre repose sur des courbes ease-out — entrée rapide, atterrissage doux — et pourquoi les durées vivent dans une bande étroite : assez longues pour être perçues (environ 200 ms), assez courtes pour ne jamais faire attendre (moins de 700 ms pour tout ce qui bloque).

Un bon mouvement se ressent, il ne se remarque pas. Si un utilisateur peut décrire votre animation, elle est sûrement trop bruyante.

Le mouvement a un budget de performance

Chaque propriété animée a un coût. Les transforms et l'opacité sont composés sur le GPU et restent fluides sur un téléphone bon marché ; animer des propriétés de mise en page — largeur, top, position d'arrière-plan — force le navigateur à repeindre, et ces repaints sont ce que les utilisateurs ressentent comme des à-coups. La règle est simple et non négociable : n'animer que transform et opacity, tout piloter par le scroll ou l'interaction, et respecter sans broncher le réglage « mouvement réduit » de l'utilisateur.

La chorégraphie bat la quantité

Une révélation bien timée par vue vaut mieux que dix simultanées. On décale les éléments frères d'environ cent millisecondes, on laisse titre, image et légende arriver en séquence plutôt qu'en tas, et on réserve le seul moment « signature » — un rideau, une loupe, un survol qui inonde — à l'endroit où la mémoire de marque compte le plus. Tout le reste reste presque invisible.

Pourquoi le calme convertit

Le mouvement gagne sa place quand il réduit l'incertitude : le menu qui glisse du bord que vous avez touché, le panneau de formulaire qui confirme par un petit calage plutôt qu'un saut brutal. Les interfaces calmes inspirent confiance, et la confiance est la monnaie dans laquelle se paie chaque conversion. La version bruyante démo mieux en réunion ; la version calme gagne dans les statistiques — l'arène où notre travail est jugé.