Le mouvement fait-il partie de l’identité d’une marque ?

Une charte graphique décrit ce qu’une marque montre. Elle dit rarement comment elle bouge. C’est pourtant la première chose qu’on perçoit d’un site : bien avant d’avoir lu un mot, on a déjà senti s’il est vif ou posé, fluide ou raide, généreux ou économe.

Le rythme comme caractère

Une marque peut être calme ou nerveuse, ample ou sèche. Les durées et les courbes d’accélération portent ce caractère. Un mouvement de 180 millisecondes avec une sortie franche donne une impression d’efficacité ; le même mouvement en 600 millisecondes avec une courbe souple donne une impression de calme et de matière.

Ce n’est pas une question de goût isolée : c’est une décision de marque, au même titre que le choix d’une typographie. Et comme une typographie, elle doit être cohérente d’un écran à l’autre pour produire une reconnaissance.

Une animation doit dire quelque chose

Une transition bien placée dit d’où vient un élément et où il va. Elle relie deux états, explique une hiérarchie, confirme qu’une action a été prise en compte. Elle réduit la charge mentale au lieu de l’augmenter. Une transition décorative, elle, ajoute de l’attente sans ajouter de sens — et l’attente se paie plusieurs fois, à chaque visite.

• Relier : montrer qu’un panneau vient du bouton qui l’a ouvert.
• Confirmer : signaler qu’un envoi a été reçu, qu’un élément a été ajouté.
• Orienter : indiquer le sens de lecture, attirer l’œil vers ce qui compte ensuite.
• Patienter : occuper honnêtement le temps d’un chargement, sans le faire paraître plus long.

L’interaction comme langage

La manière dont un bouton répond au survol, dont un formulaire signale une erreur, dont une page se referme : ce sont des phrases. Elles doivent être écrites une fois, puis réutilisées — exactement comme une palette de couleurs. Un site où chaque composant invente sa propre réponse donne une impression d’assemblage, même si chaque élément est réussi.

En pratique, cela tient en quelques décisions : deux ou trois durées standard, deux courbes, une liste de déclencheurs autorisés — survol, clic, arrivée dans l’écran, changement d’état — et une règle sur ce qui n’est jamais animé.

Le mouvement a enfin un coût : il occupe le processeur, consomme de la batterie et peut provoquer des saccades sur un appareil modeste. C’est une raison de plus pour le concevoir dans le navigateur, sur un vrai téléphone, plutôt que dans une vidéo de présentation où tout est fluide par construction.

Une animation qui n’explique rien est une attente qu’on impose au visiteur.

Écrire des règles de mouvement

Un système de mouvement se décrit aussi précisément qu’une palette. Quelques lignes suffisent, et elles évitent qu’un site devienne un catalogue d’effets accumulés au fil des pages.

• Deux ou trois durées standard : une courte pour les réactions immédiates, une moyenne pour les apparitions, une longue pour les changements de page.
• Deux courbes d’accélération, pas huit : une pour les entrées, une pour les sorties.
• Une liste de déclencheurs autorisés : survol, clic, arrivée dans l’écran, changement d’état.
• Une règle de distance : les éléments se déplacent peu, sinon le mouvement devient une distraction.
• Une règle négative : ce qui n’est jamais animé — le texte courant, par exemple, qui doit rester lisible immédiatement.

Quand le mouvement dessert

Trois situations reviennent. Le contenu qui apparaît au défilement, mais trop tard : le visiteur voit un vide et poursuit. L’animation qui rejoue à chaque passage et devient agaçante à la deuxième visite. Et la mise en page qui bouge pendant le chargement, quand une image arrive et décale le texte qu’on était en train de lire.

La règle la plus simple : si retirer une animation ne change rien à la compréhension et rend le site plus rapide, elle n’avait pas de raison d’être là.

Le concevoir au bon endroit

Le mouvement ne se décide pas sur une planche imprimée, ni dans une vidéo de présentation où tout est fluide par construction. Il se décide dans le navigateur, sur un vrai téléphone, avec le contenu réel — parce que c’est le seul endroit où l’on perçoit à la fois le rythme, le coût et la gêne éventuelle.