Combien de temps doit durer une animation d'interface ?
Des fourchettes de durée utiles pour le mouvement d'interface, pourquoi les sorties sont plus courtes que les entrées, et quand un ressort n'a pas de durée.
À retenir
Il n'y a pas une durée correcte unique. Un retour comme l'appui d'un bouton est quasi instantané, les transitions entre vues proches restent dans les basses centaines de millisecondes, et les changements plein écran peuvent durer plus longtemps. Les sorties sont généralement plus rapides que les entrées. La distance, la taille, le type d'entrée et la vitesse de l'appareil changent la réponse : traitez toute fourchette comme un point de départ et testez dans l'interface réelle.
La durée suit la distance parcourue
Une infobulle qui s'efface sur place n'est pas le même travail qu'un panneau qui traverse l'écran. Plus un élément se déplace loin et plus il couvre d'écran, plus l'œil a besoin de temps pour le suivre. C'est pourquoi les grandes transitions peuvent durer plus longtemps sans paraître lentes.
Petit retour : presque immédiat
Les états d'appui, les changements au survol et les petits remplacements d'icônes doivent se sentir comme une réponse directe. Si l'utilisateur perçoit une attente entre l'entrée et le retour, l'interface paraît cassée plutôt qu'animée.
Transitions locales : basses centaines de millisecondes
Menus déroulants, popovers, petites boîtes de dialogue et panneaux qui s'étendent sont le juste milieu : assez pour montrer d'où vient l'élément, assez peu pour que l'utilisateur n'attende pas. C'est la plage que beaucoup de systèmes de design publient comme jetons de durée courte et moyenne.
Grands changements et transitions de page
Les changements plein écran, les feuilles qui couvrent la fenêtre et les transitions de route peuvent durer plus longtemps car ils portent plus d'information visuelle. La limite reste l'attention : si l'animation dure plus longtemps que la lecture du contenu, elle gêne.
Les sorties sont plus courtes que les entrées
Une entrée explique ce qui arrive ; une sortie doit seulement dégager le passage. L'utilisateur sait déjà ce qui part, donc une sortie rapide paraît réactive. Inverser ce rapport est l'une des causes les plus fréquentes d'une interface qui paraît lourde.
Les ressorts n'ont pas de durée
Un ressort se stabilise quand sa physique se stabilise, donc lui demander une durée est la mauvaise question. Vous réglez la raideur, l'amortissement et la masse, puis vous observez le temps qu'il met à paraître immobile. Si vous avez besoin d'une durée exacte pour un transfert ou une vidéo, une courbe avec durée est plus simple.
Testez sur un appareil, pas sur une fiche technique
Une même durée se ressent différemment sur un téléphone de milieu de gamme et sur un moniteur. La vitesse perçue change aussi selon ce que l'utilisateur attend. Mesurez l'interaction réelle, avec des réseaux et des appareils lents, avant d'inscrire le chiffre dans un jeton.
Principes clés à retenir
- La durée évolue avec la distance et la surface qui change
- Un retour doit paraître immédiat, pas animé
- Les transitions locales restent dans les basses centaines de millisecondes
- Les sorties sont plus courtes que les entrées
- Un ressort a un temps de stabilisation, pas une durée
- Testez sur un appareil de milieu de gamme avant de figer une valeur
Questions fréquentes
Sources
- Applying easing and duration — Material Design 3
- Motion — Apple Human Interface Guidelines
- Animation performance and frame rate — web.dev