Avant de devenir un effet, le mouvement était déjà une manière de raconter.
Une image immobile montre. Le mouvement, lui, peut suggérer, annoncer, accélérer, ralentir, attirer, surprendre, rassurer. Il peut nous faire attendre quelque chose. Nous faire comprendre quelque chose. Ou simplement nous faire ressentir.
C’est précisément pour cela que le mouvement sur une interface ne devrait jamais être considéré comme une décoration. Il possède sa propre grammaire.
Avant l’écran, il y avait déjà le mouvement
À la fin du XIXe siècle et au début du XXe, la photographie a commencé à décomposer ce que l’œil ne pouvait pas voir. Les travaux d’Eadweard Muybridge sur le mouvement du cheval sont emblématiques de cette période.
En 1878, ses séries photographiques décomposent le galop d’un cheval en une succession d’images. Ce qui nous paraît aujourd’hui évident était alors une révélation : le mouvement pouvait être observé, découpé, analysé puis recomposé.
Quelques années plus tard, le cinéma allait transformer cette succession d’images en expérience continue. L’animation allait aller encore plus loin. Elle n’allait plus seulement enregistrer le mouvement du réel. Elle allait l’inventer.
Donner du mouvement à une intention
Les studios d’animation ont progressivement compris qu’un personnage ne bouge pas seulement pour aller d’un point A à un point B. La manière dont il bouge raconte quelque chose.
Un mouvement brusque peut exprimer la surprise. Une anticipation peut créer une attente. Un ralentissement peut donner du poids. Une accélération peut créer de l’urgence. Un mouvement qui se prolonge après l’arrêt peut suggérer l’inertie. Une déformation peut amplifier une émotion.
C’est notamment ce qui a donné naissance aux grands principes d’animation développés dans la tradition Disney : anticipation, timing, squash and stretch, follow through, staging, exaggeration, entre autres.
Ces principes ne sont pas simplement des recettes permettant de rendre une animation jolie. Ils permettent de donner au mouvement une intention, un poids et une émotion.
Une animation se compose comme une partition
C’est peut-être ici que le parallèle avec la musique devient le plus intéressant. Une bonne animation n’est pas une succession de mouvements. C’est une composition temporelle.
Comme une partition, elle possède un rythme. Des temps forts. Des silences. Des accélérations. Des suspensions. Des répétitions. Des ruptures. Et surtout, des moments précis où quelque chose doit arriver.
Une interface peut être entièrement statique. Puis un élément apparaît. Un titre entre lentement. Une image se déplace. Un bouton répond. Une transition nous emmène ailleurs.
Ces événements ne devraient pas être placés simplement parce que ça fait bien. Ils devraient être placés parce qu’ils servent quelque chose.
Le timing est une information
Prenons une phrase.
Une maison construite dans la lumière.
Elle peut apparaître instantanément. Elle peut se révéler mot après mot. Elle peut être précédée d’une image. Elle peut arriver après un mouvement. Elle peut disparaître lentement.
Le texte est exactement le même. L’information n’a pas changé. Mais son sens perçu, lui, peut changer.
Le mouvement agit donc comme une ponctuation. Une apparition peut dire : regardez. Une pause peut dire : attendez. Une accélération peut dire : maintenant. Un ralentissement peut dire : prenez le temps.
Le mouvement devient alors une forme de langage.
Faire parler une image
La même chose vaut pour l’image. Une photographie peut simplement apparaître. Ou elle peut être révélée progressivement. Un détail peut précéder l’ensemble. Un cadrage peut se déplacer. Une image peut être découverte derrière une autre. La matière peut se rapprocher. Le mouvement peut guider le regard.
Et soudain, l’animation ne sert plus l’image : elle participe à son interprétation.
Une photographie d’architecture peut être révélée lentement pour installer une sensation de monumentalité. Une matière artisanale peut apparaître par fragments pour attirer l’attention sur sa texture. Une image gastronomique peut être accompagnée d’un mouvement plus organique, plus lent, presque sensoriel.
La même image peut donc raconter des choses différentes selon la manière dont elle entre dans le temps.
Le mouvement doit servir le fond
C’est probablement la règle la plus importante.
Si une animation ne sert ni l’information, ni la narration, ni l’émotion, pourquoi existe-t-elle ?
Le web contemporain permet presque tout. WebGL, shaders, 3D temps réel, animations au défilement, parallaxe, morphing, particules, physique, motion design. La technologie permet désormais de produire des mouvements spectaculaires avec une facilité qui aurait semblé inimaginable il y a quelques décennies.
Le risque est précisément là. Parce qu’une chose est possible ne signifie pas qu’elle est nécessaire.
L’effet pour l’effet
Il est facile de faire bouger une interface. Plus difficile de savoir pourquoi elle doit bouger.
Un titre qui tourne. Une image qui flotte. Un curseur qui déforme la page. Une transition spectaculaire. Une caméra 3D qui traverse un espace. Tout cela peut être magnifique.
Mais si chaque élément cherche à attirer l’attention en même temps, plus rien ne possède réellement d’importance. Comme dans un orchestre où chaque instrument jouerait fort en permanence. Il n’y aurait plus de musique.
Apple, Google et le pouvoir du mouvement discret
Les interfaces les plus intéressantes ne sont d’ailleurs pas toujours celles qui montrent le plus.
Apple utilise depuis longtemps le mouvement pour créer une continuité entre les états d’une interface. Un élément qui se transforme plutôt que de disparaître. Une fenêtre qui se déplace vers l’endroit où elle va réapparaître. Une animation qui explique spatialement la relation entre deux états. Le mouvement ne cherche pas nécessairement à émerveiller. Il explique.
Google exploite également largement cette logique dans ses interfaces et ses systèmes de design : transitions, feedback, hiérarchie visuelle et changements d’état permettent à l’utilisateur de comprendre ce qui vient de se passer.
Dans ces cas-là, l’animation n’est pas une couche ajoutée au-dessus de l’interface. Elle fait partie de l’information.
Une grammaire plutôt qu’un catalogue d’effets
C’est ainsi que je considère le motion design dans une expérience numérique. Pas comme une bibliothèque d’effets. Mais comme une grammaire.
Un langage possède des règles. Il possède un vocabulaire. Il possède un rythme. Et surtout, il possède une intention.
Une transition peut établir une continuité. Une autre peut créer une rupture. Une animation peut attirer l’attention. Une autre peut la détourner. Un mouvement peut donner du poids à un élément. Un autre peut créer de la légèreté.
Le même mouvement n’a donc pas le même sens selon le contexte.
L’interface comme partition
Concevoir une interface animée revient finalement à écrire dans le temps. On ne dessine plus seulement où. On dessine aussi quand.
Quand le titre apparaît-il ? Combien de temps reste-t-il seul ? Quand l’image entre-t-elle ? À quel moment le bouton devient-il disponible ? Combien de temps faut-il pour passer d’une information à l’autre ? Où placer une respiration ? Quand faut-il accélérer ? Quand faut-il laisser l’écran silencieux ?
Ces décisions sont rarement visibles dans une maquette statique. Pourtant, elles peuvent changer complètement la perception d’une expérience.
Le mouvement comme signature
Pour une marque, cette dimension devient particulièrement intéressante. Parce que le mouvement peut lui aussi devenir identitaire.
Une marque peut être précise. Elle peut être lente. Brutale. Élégante. Organique. Généreuse. Minimaliste. Énergique. Ces adjectifs peuvent se traduire dans le mouvement.
Une identité ne se résume donc pas à une couleur, une typographie ou un logo. Elle peut aussi avoir un rythme, une vitesse, une amplitude, une manière d’apparaître, une manière de disparaître.
Une véritable identité numérique possède parfois une chorégraphie.
Ne pas animer davantage. Animer mieux.
C’est finalement la distinction essentielle. L’objectif n’est pas de faire bouger davantage un site. C’est de donner une raison au mouvement.
Faire apparaître un texte parce qu’il doit être découvert. Déplacer une image parce que cela accompagne le regard. Créer une transition parce qu’elle raconte le passage d’un espace à un autre. Ralentir parce qu’une information mérite d’être contemplée. Accélérer parce qu’il faut créer une impulsion.
Et parfois, ne rien faire bouger du tout. Car le silence fait également partie de la partition.
Le mouvement n’est pas la forme du message. Il en est parfois la voix.
Un bon mouvement ne demande pas si c’est spectaculaire. Il demande ce que cela fait ressentir. Et surtout, ce que cela aide à comprendre.
Lorsque la réponse est claire, l’animation cesse d’être un effet. Elle devient un langage.