Craft et technique
Quelles spécifications transmettre pour que les animations développées respectent l’intention du designer ?
Pour qu’une animation développée respecte l’intention du designer, il faut transmettre ses états, son déclenchement, son rythme et ses réactions aux actions imprévues. Une vidéo aide à montrer le caractère du mouvement, mais elle ne répond pas à la question du second clic, de l’interruption ou du changement de largeur.
L'essentiel.
Une référence vidéo montre une intention, mais ne décrit pas tous les comportements d’une animation interactive. Une spécification utile précise les états, les déclencheurs, le temps, les interruptions et les variantes, avec une référence testable dans le navigateur.
- Décrire les états de départ et d’arrivée, ainsi que les contenus disponibles pendant le mouvement.
- Préciser le déclencheur, la durée, la courbe et les conditions de répétition.
- Définir les interruptions, les variantes mobiles et la version avec moins de mouvement.
- Valider une réalisation dans le navigateur, avec des gestes libres et des contenus représentatifs.
La spécification doit être assez précise pour limiter l’interprétation, sans imposer inutilement chaque détail du code. Elle décrit ce que la personne doit percevoir et ce que le système doit faire. Le développeur peut ensuite proposer une réalisation adaptée, puis la comparer à la référence dans les conditions prévues.
Séparer l’intention visuelle des paramètres
Commencez par une phrase expliquant le rôle de l’animation : relier deux contenus, révéler une profondeur ou confirmer une action. Cette intention permet de juger une alternative technique si la première réalisation rencontre une limite.
Les paramètres viennent ensuite. Une durée sans courbe ne décrit pas le rythme. Un déplacement sans origine ni destination laisse une partie de la composition implicite. Une référence doit aussi préciser si le mouvement dépend du temps, de la progression du défilement ou de l’action continue du visiteur.
La documentation de la Web Animations API distingue notamment les étapes clés et les propriétés temporelles. Elle rappelle aussi que les conventions et valeurs par défaut peuvent différer de celles des animations CSS. Transmettre des valeurs explicites évite donc de compter sur un comportement supposé commun.
Préparer une fiche d’animation exploitable
Une fiche peut rester courte si elle répond aux questions qui provoquent réellement des écarts de production. Associez-la à une référence visuelle et à des états fixes annotés.
| Champ | Information attendue |
|---|---|
| Fonction | Ce que le mouvement fait comprendre ou ressentir |
| Déclencheur | Clic, entrée dans la zone, défilement ou autre événement |
| États | Position, visibilité et disponibilité des commandes avant et après |
| Rythme | Durée, délai éventuel, courbe et ordre des éléments |
| Interruption | Résultat d’un second geste, d’une sortie ou d’un retour |
| Variantes | Mobile, contenu long et réduction des mouvements |
| Validation | Parcours et critères permettant de comparer la réalisation |
Précisez aussi les unités. Une distance fixe et une proportion de l’écran ne produisent pas le même comportement. Une valeur liée au défilement demande des repères d’entrée et de sortie, pas uniquement une durée en secondes.
Exemple pédagogique : ouvrir un panneau de détail
Imaginons un site fictif dont une fiche produit s’ouvre dans un panneau latéral. L’intention est de garder le contexte tout en donnant la priorité aux détails. La spécification peut proposer, pour l’essai, une ouverture de 320 millisecondes et une fermeture de 220 millisecondes.
Ces valeurs sont pédagogiques et doivent être testées ; elles ne constituent pas un standard.
La fiche précise les positions initiale et finale, la courbe retenue dans la référence et le moment où les commandes deviennent disponibles. Elle décrit le second clic pendant l’ouverture : le panneau rejoint l’état demandé à partir de sa position actuelle, selon un comportement à valider, plutôt que de recommencer brutalement la séquence.
Ce qu’une vidéo ne précise pas seule
- Intention et étatsExpliquer le rôle, le départ, l’arrivée et les commandes disponibles.
- Déclenchement et rythmeDéfinir l’événement, les unités, la durée et la courbe.
- InterruptionsPrévoir le second geste, la fermeture et le changement de contexte.
- VariantesDocumenter le mobile, les contenus longs et le mouvement réduit.
- ValidationComparer le comportement réel avec la référence sur des parcours définis.
Sur mobile, le panneau peut suivre une autre direction pour préserver la lecture. Dans la variante réduite, il rejoint directement un état stable. Le focus et le retour au contexte sont définis indépendamment du décor animé : la fonction ne doit pas dépendre d’un événement visuel oublié.
Décrire les interruptions et les préférences
Les cas difficiles font partie du mouvement : fermeture avant la fin, changement de page, redimensionnement et données arrivant tardivement. Il faut préciser quel état fait autorité et comment les éléments rejoignent cet état.
La préférence prefers-reduced-motion peut guider une variante avec moins de mouvement. La spécification doit expliquer cette variante, pas se contenter d’une instruction générale « respecter l’accessibilité ». Elle doit aussi prévoir le changement de préférence pendant la visite lorsque l’implémentation le permet.
Pour les séquences liées au défilement, indiquez ce qui se passe lorsque la personne avance rapidement ou revient en arrière. Une scène ne doit pas être conçue uniquement pour une démonstration effectuée à une vitesse idéale. Les étapes de contenu doivent rester cohérentes avec la progression réelle.
Enfin, notez les conditions de répétition. Une introduction peut être rejouée à chaque ouverture, seulement dans certains contextes ou jamais automatiquement après une première visite. Ce choix appartient à l’expérience et doit être validé explicitement.
Comparer dans le navigateur avant de généraliser
La première réalisation sert à vérifier la sensation du geste, les états et les interruptions. Elle doit utiliser les contenus qui influencent le rythme : titres, images et textes de longueur représentative. Les ajustements sont consignés dans la fiche, afin que la référence reste actuelle.
Comparez la séquence idéale et les parcours moins favorables. Ouvrez, refermez, changez de largeur et revenez. Vérifiez que les textes ne deviennent pas illisibles pendant un passage important et qu’une variante ne masque pas une commande.
Lorsque le comportement est validé, ses paramètres peuvent devenir des règles partagées pour les composants similaires. Il faut toutefois distinguer une famille de mouvements et un effet unique. Généraliser trop tôt une animation particulière peut rendre tous les contenus artificiellement semblables.
Questions fréquentes
Une référence issue d’un autre site suffit-elle ?
Elle peut montrer une qualité recherchée, mais elle doit être accompagnée d’une description de ce qui est retenu : rythme, relation spatiale ou réaction. Le projet possède d’autres contenus et contraintes. Il faut transformer la référence en une intention et des comportements propres, sans demander une copie indéfinie.
Faut-il imposer une bibliothèque d’animation dans la spécification ?
Seulement si une contrainte du projet le justifie. La fiche doit d’abord décrire le résultat et les comportements attendus. L’équipe technique peut proposer l’outil adapté et expliquer ses limites. Le choix doit ensuite être validé sur une réalisation concrète, avec les conditions de maintenance nécessaires.
Qui ajuste la durée lorsque le prototype paraît trop lent ?
L’ajustement doit être discuté avec la personne responsable du mouvement et de l’usage, puis vérifié dans le navigateur. La durée peut interagir avec la distance, la courbe et le contenu. Modifier un chiffre isolé sans observer l’ensemble peut changer le caractère de l’animation plutôt que résoudre le problème.
Sources
LVX : transmettre un mouvement avec ses raisons et ses états
LVX peut préparer des références de motion accompagnées de fiches qui décrivent le sens, les paramètres et les comportements attendus. La première réalisation dans le navigateur sert ensuite à ajuster la sensation et à vérifier les cas d’interruption. Cette méthode donne au développement une base précise tout en laissant une place aux solutions techniques pertinentes. Le client peut juger un mouvement réellement utilisable, et l’équipe conserve une référence à jour pour préserver sa cohérence lors des déclinaisons. Discuter du projet avec LVX.
