Mouvement et narration
Comment choisir la durée et l’accélération d’une animation d’interface ?
Choisir la durée et l'accélération d'une animation revient à régler sa présence dans l'usage. La durée indique combien de temps elle occupe. La courbe, souvent appelée easing, décrit comment elle progresse entre le départ et l'arrivée. Deux effets de même durée peuvent donc produire des sensations très différentes.
L'essentiel.
La durée règle le temps occupé par l’animation ; la courbe règle la façon dont le mouvement progresse. Elles doivent être choisies ensemble, selon la fonction de l’effet, sa distance, sa répétition et la possibilité de l’interrompre.
- Distinguez durée, délai de départ et courbe de progression.
- Réglez le mouvement selon sa fonction et son amplitude, pas seulement selon un nombre favori.
- Comparez les variantes sur le même élément et dans la même situation.
- Prévoyez l'interruption et la répétition avant de considérer l'animation comme terminée.
Il n'existe pas une valeur universelle qui rendrait toute interface élégante. Une réponse de bouton, une ouverture de panneau et une séquence narrative n'ont pas les mêmes exigences. Le réglage doit partir de leur fonction, puis être testé avec le contenu et les actions réelles.
Séparer les paramètres pour mieux décider
La durée correspond au temps de la transition. Le délai ajoute une attente avant son début. La courbe distribue la progression pendant cette durée. Modifier plusieurs paramètres à la fois rend la comparaison difficile : on ne sait plus ce qui explique la différence perçue.
La propriété transition-timing-function détermine le calcul des valeurs intermédiaires d'une transition CSS. Une progression linéaire garde une évolution régulière ; d'autres courbes modifient le départ ou l'arrivée. Le choix doit correspondre à ce que l'élément est en train de faire.
Commencez donc avec un mouvement simple. Fixez sa trajectoire, comparez quelques durées, puis ajustez la courbe. Revenez ensuite à la tâche complète pour vérifier que le réglage fonctionne dans le contexte, et pas seulement dans une démonstration isolée.
Relier le temps à la fonction de l'effet
Une commande doit répondre sans laisser d'incertitude sur la prise en compte du geste. Une grande transition peut prendre davantage de place si elle aide à comprendre un changement de contexte. Une séquence expressive peut avoir un autre rythme, à condition de ne pas retarder les actions ordinaires.
| Fonction | Réglage à examiner | Erreur fréquente |
|---|---|---|
| Réponse au clic | Départ immédiat et effet bref | Ajouter un délai décoratif |
| Entrée d'un panneau | Arrivée lisible et stabilisation | Mouvement trop ample pour la distance |
| Sortie d'un élément | Libérer le contexte clairement | Faire attendre la disparition complète |
| Déplacement suivi | Trajectoire compréhensible | Accélération qui fait perdre l'objet |
| Révélation narrative | Rythme lié au contenu | Utiliser le même temps pour chaque étape |
Les valeurs doivent aussi tenir compte de la fréquence. Une animation supportable une fois peut devenir pesante lorsqu'elle accompagne toutes les actions. La répétition est un paramètre de conception, même si elle n'apparaît pas dans la courbe.
Exemple fictif : ouvrir un panneau de filtres
Un catalogue affiche un panneau de filtres latéral. L'équipe compare trois prototypes de durée différente, par exemple 150, 250 et 400 millisecondes. Ces valeurs sont des points d'essai pédagogiques, pas des normes. La distance et la courbe restent identiques pour pouvoir juger le temps seul.
La version la plus courte semble abrupte avec la grande distance prévue. La plus longue donne une impression d'attente lors des ouvertures répétées. Plutôt que de choisir automatiquement la valeur intermédiaire, l'équipe réduit la distance du mouvement et ajuste l'arrivée. Le contenu devient rapidement lisible, tandis que le panneau conserve une transition perceptible.
Un second essai porte sur la fermeture immédiate. Le panneau doit pouvoir repartir depuis sa position actuelle sans achever d'abord toute l'ouverture. Ce comportement compte autant que le temps choisi pour la première démonstration.
Comparer un paramètre à la fois
- Même trajectoireConserver l’élément et sa distance pour comparer les durées.
- Même duréeChanger ensuite la courbe pour observer le départ et l’arrivée.
- Tâche répétéeOuvrir et fermer plusieurs fois dans le parcours réel.
- InterruptionVérifier une fermeture avant la fin de l’ouverture.
Utiliser les courbes comme un vocabulaire
Une arrivée progressive peut donner le temps de suivre un élément jusqu'à sa place. Un rebond peut exprimer une certaine énergie, mais il demande une justification dans l'univers de marque et dans la tâche. Aucun nom de courbe ne constitue une preuve de qualité en soi.
Les outils comme le visualiseur d'easing de GSAP permettent de comparer les comportements. Utilisez-les pour comprendre les différences, puis testez les courbes sur les vrais éléments du projet. Une petite forme abstraite ne représente pas toujours le comportement d'un panneau plein de texte.
Limitez le vocabulaire retenu. Quelques courbes bien définies, associées à des fonctions, donnent une base plus cohérente qu'un choix différent pour chaque animation. Cette logique rejoint l'identité de mouvement.
Tester les interruptions et les appareils
Déclenchez l'effet plusieurs fois, changez d'avis au milieu et passez rapidement à une autre action. Vérifiez que l'interface ne crée pas une file de mouvements en retard sur les gestes. Le résultat doit rester stable même si la personne ne suit pas le rythme prévu.
Comparez ensuite le comportement sur les appareils retenus pour la recette. Une animation peut respecter sa durée et néanmoins sembler irrégulière si le rendu manque de fluidité. Le réglage temporel et le diagnostic de performance sont deux travaux liés, mais distincts.
Prévoyez enfin une variante sans mouvement ou avec moins de mouvement. Elle doit conserver la réponse et l'état final. La qualité de l'interaction ne peut pas dépendre d'une courbe que tous les visiteurs ne verront pas.
Questions fréquentes
Faut-il utiliser des durées différentes sur mobile ?
Cela peut être pertinent si la distance, la taille ou le rôle de l'élément change. Il vaut mieux partir du comportement réel que définir une règle générale selon l'appareil. Une animation plus courte n'est pas automatiquement meilleure ; elle doit rester compréhensible et ne pas créer d'attente inutile.
Peut-on utiliser des rebonds dans une interface premium ?
Oui, si ce comportement appartient à l'univers de marque et ne gêne pas la tâche. Le mot « premium » ne définit pas une courbe obligatoire. Les rebonds doivent être évalués comme les autres choix : sens, dosage, répétition et cohérence avec les éléments voisins.
Comment transmettre le réglage au développeur ?
Donnez la durée, le délai éventuel, la courbe et les états de départ et d'arrivée. Ajoutez un exemple animé ainsi que le comportement attendu en cas d'interruption. Une simple vidéo ne suffit pas toujours à retrouver les paramètres, et les paramètres seuls n'expliquent pas l'intention.
Sources
Régler le mouvement avec LVX
Pour un projet LVX, nous proposons de tester les réglages sur quelques interactions représentatives avant de les étendre au site. Les comparaisons isolent les paramètres, puis la navigation réelle vérifie leur pertinence. Cette démarche permet de discuter d'un comportement observable plutôt que d'une impression de fluidité difficile à traduire. Les choix retenus peuvent ensuite être documentés avec leurs usages et leurs limites. Le mouvement garde ainsi une personnalité cohérente, tout en répondant aux gestes, aux interruptions et aux rythmes de consultation des visiteurs. Découvrir notre approche.
