Usage et efficacité
Comment proposer une version avec moins d’animations qui conserve l’intention artistique ?
Une version avec moins d’animations peut conserver l’identité d’un site si elle remplace les mouvements par des équivalences conçues. Un déplacement de caméra peut devenir un changement de cadrage. Une apparition progressive peut être remplacée par une hiérarchie visuelle claire. Le contenu et la fonction doivent rester disponibles.
L'essentiel.
Réduire les animations demande de recomposer la mise en scène, pas seulement de raccourcir les durées. L’intention peut subsister dans le cadrage, les contrastes, la succession des informations et des transitions choisies avec soin.
- Distinguer les mouvements décoratifs, explicatifs et nécessaires à une action.
- Concevoir une variante complète avant de modifier les paramètres des animations.
- Respecter la préférence système et proposer, lorsque cela aide, un réglage dans le site.
- Vérifier que tous les contenus et toutes les commandes restent accessibles dans chaque variante.
Réduire toutes les durées de manière automatique produit souvent un résultat incohérent : certains éléments restent cachés, des transitions deviennent brusques et le récit dépend encore d’une position de défilement. La bonne démarche consiste à reprendre le rôle de chaque animation, puis à choisir ce qui doit être conservé, transformé ou retiré.
Traduire l’intention plutôt que supprimer au hasard
Une animation peut attirer l’attention, expliquer une relation ou donner une sensation de matière. Ces fonctions se traduisent autrement. Une couleur, une bordure, un cadrage ou un ordre de lecture peuvent signaler un changement sans déplacement important.
Le travail commence par un inventaire. Pour chaque effet, notez ce que la personne comprend grâce à lui. Si la réponse se limite à « donner de la vie », sa suppression est souvent envisageable. Si le mouvement explique un assemblage, il faut préserver les étapes et leur relation.
| Effet initial | Intention à préserver | Variante possible |
|---|---|---|
| Traversée d’une scène | Découvrir des espaces successifs | Vues fixes sélectionnables |
| Grande translation de texte | Marquer un nouveau chapitre | Titre stable et contraste de composition |
| Rotation automatique | Montrer plusieurs faces | Commandes de vues prédéfinies |
| Particules décoratives | Installer une atmosphère | Composition fixe choisie |
Ces équivalences sont des pistes de direction artistique. Leur pertinence se juge dans le projet, en observant notamment la lisibilité et la continuité du récit.
Comprendre les règles sans confondre les niveaux
La préférence prefers-reduced-motion permet de détecter une demande de réduction des mouvements exprimée au niveau du système. L’absence de cette préférence ne doit pas être interprétée comme une volonté de voir tous les effets possibles.
Les WCAG distinguent plusieurs situations. Le critère 2.3.3, de niveau AAA, porte sur la possibilité de désactiver certains mouvements non essentiels déclenchés par interaction. Le critère 2.2.2, de niveau A, traite notamment les mouvements automatiques présentés avec d’autres contenus, durant plus de cinq secondes, sous certaines conditions. Un réglage de mouvement réduit ne remplace donc pas systématiquement une commande de pause.
Dans la production, documentez séparément la variante réduite et les contrôles propres aux médias. Une vidéo possède son comportement ; un défilement animé en possède un autre. Cette séparation évite de supposer qu’un unique interrupteur règle tous les cas.
Exemple pédagogique : raconter la transformation d’une matière
Imaginons un atelier fictif qui présente la transformation d’une feuille de métal en luminaire. La version principale suit une courbure continue au fil du défilement. Le changement de forme constitue le sujet ; les mouvements de caméra autour de l’objet sont une mise en scène supplémentaire.
La variante réduite montre trois états fixes : feuille, pliage et assemblage. Des légendes expliquent ce qui change. Le visiteur choisit une étape, et le contenu correspondant apparaît directement. La palette, les gros plans et la typographie maintiennent la signature du site.
Conserver le sens du mouvement
- Version animéeUne courbure continue relie la feuille, le pliage et le luminaire.
- Version réduiteTrois états fixes et des légendes expliquent les mêmes étapes.
- Critère communLe visiteur comprend le procédé et accède aux mêmes informations.
La validation consiste à demander à une personne ce qu’elle a compris du procédé dans chacune des versions. Si une étape devient inexplicable sans animation, il faut améliorer la représentation. Il ne s’agit pas de prouver que les deux expériences produisent exactement la même sensation, mais qu’elles transmettent l’information et permettent les mêmes décisions.
Préparer les changements de préférence en cours de visite
Un réglage peut être activé avant l’arrivée ou pendant la consultation. La page doit rejoindre un état stable dans les deux cas. Une transition interrompue ne doit pas laisser un panneau à moitié ouvert, un titre transparent ou un bouton déplacé hors de portée.
Préparez une fiche par animation importante : état de départ, état final, version réduite et comportement lors d’une interruption. Les contenus doivent pouvoir exister sans attendre un événement de fin d’animation.
Pour la recette, visitez directement une page intérieure avec la préférence activée, ouvrez les menus, parcourez les étapes et envoyez un formulaire. Changez ensuite le réglage au milieu d’une interaction. Comparez les informations disponibles dans les deux versions. Cette méthode révèle les dépendances cachées entre l’animation et la logique de l’interface.
Une option visible peut compléter le réglage système, avec des intitulés simples comme « Réduire les mouvements ». Elle doit exprimer un choix durable et compréhensible, sans promettre une expérience médicalement adaptée à toutes les sensibilités.
Questions fréquentes
Faut-il remplacer chaque animation par un fondu ?
Non. Un fondu reste un changement animé et ne convient pas à tous les cas. Certains contenus gagnent à apparaître immédiatement, d’autres à être présentés côte à côte. Il faut choisir selon l’information transmise et tester le résultat, sans faire du fondu une réponse automatique.
Peut-on garder une animation nécessaire à la compréhension ?
Il faut d’abord vérifier si elle est réellement nécessaire et s’il existe une représentation équivalente. Des états successifs peuvent souvent expliquer un processus. Lorsque le mouvement reste indispensable, ses commandes, sa durée et ses conditions de lecture doivent être examinées précisément pour le contenu concerné.
La variante réduite doit-elle être validée par le directeur artistique ?
Oui, au même titre que la version mobile. Elle engage la composition, le rythme et l’expression de la marque. La valider explicitement évite qu’elle soit produite par défaut en fin de projet, lorsque les choix techniques limitent déjà les possibilités de conception.
Sources
LVX : développer une identité qui ne dépend pas d’un seul effet
LVX peut travailler la variante réduite dès la définition du langage de mouvement. Pour chaque interaction importante, le projet précise ce qui porte le sens et ce qui relève de la mise en scène. Des compositions alternatives sont ensuite proposées et confrontées aux mêmes besoins de lecture et d’action. Cette démarche renforce l’identité du site : sa singularité repose sur un ensemble de choix cohérents, capable de rester expressif lorsque certaines animations changent ou disparaissent. Les deux variantes sont validées avec les mêmes contenus réels. Discuter du projet avec LVX.
