L’ultime guide de l’animation web

Garry Valette
Nov 17, 2015 · 15 min read

L’animation est un des grands rêves de l’Homme (si on veut en croire l’avis de certains historiens).

Cette théorie a commencé avec les peintures du Néolithique: sur de nombreuses peintures de grottes, il n’est pas rare de voir des créatures dessinées avec beaucoup trop de membres.

Il y a plusieurs théories à ce propos. Certaines disent que c’était simplement parce que les artistes n’avaient pas de moyens d’effacer ces membres, laissant leurs ratés sur les murs pour la prospérité. D’autres sont convaincus qu’ils sont les plus anciennes tentatives pour retranscrire l’idée du mouvement sur une image statique. J’ai choisi de croire la seconde théorie.

La seule chose qui est réellement constante dans notre environnement est le changement, ou en d’autres termes le mouvement

Et quoi de plus naturel que de vouloir recréer le mouvement? Tout dans la nature est en mouvement. Les gens marchent, l’eau s’écoule, les plantes se déploient, la seule chose qui est réellement constante dans notre environnement est le changement, ou en d’autres termes le mouvement. Certains mouvements se passent en un instant, d’autres sont trop lents pour être perçus, mais quoi qu’il en soit, il y a toujours du mouvement.

L’animation est l’alliance du changement, et du mouvement. C’est de cette définition que nous nous sommes rapprochés pour capturer la vie dans notre “art”. C’est pourquoi les gens ont l’habitude de dire “l’animation donne vie à nos sites internet (ou présentations, ou autre)”. On pourrait croire que c’est exagéré, et pourtant cette phrase décrit merveilleusement l’objectif de l’animation dans le webdesign.

L’illusion du mouvement informe, lorsqu’elle est bien faite, les utilisateurs qu’ils viennent de faire quelque chose. Ils ont correctement interagi avec l’interface, et ont causé le changement. Ceci stimulant en eux les mêmes sens (ou des sentiments très similaires tout du moins) que quand ils interagissent avec des objets physiques. Ainsi, l’animation est skeuomorphique car elle est créée pour mimer les interactions du monde réel. Même s’il se pourrait qu’on est plus à beaucoup utiliser les textures de cuir, on continuera à essayer d’imiter le monde réel.

Animation sur internet: une brève histoire

Avant de rentrer dans le vif du sujet, voyons comment l’animation sur internet a évolué jusqu’à son état actuel (plutôt assez cool). Tout a pratiquement commencé avec les gifs…

Les gifs sont aussi âgés que moi. Ils ont été présentés pour la première fois en 1987, juste à temps pour les jeunes années du web comme nous le savons tous (plus ou moins). C’est ainsi que commence l’ère des bébés dansants et autres horreurs qu’il vaut mieux oublier. Même si la popularité des gifs nous a montré tout et n’importe quoi, c’était de cette manière que les internautes pouvaient rendre leurs pages web animées.

“Comment ça serait si les internautes arrivaient sur la page de mon site, et que mon morceau favori était joué? Et un morceau récent… Non pas ce foutu MIDI, pas vrai?”

Détrompez vous, beaucoup d’entre nous n’avaient probablement pas encore réalisé la façon dont l’animation pouvait améliorer l’utilisabilité. Ce n’était qu’une façon de donner un peu de style, et un peu de vie, à la réalité figée d’une page web. Quand la capacité des gifs atteignit ses limites, les internautes souhaitèrent de meilleurs dispositifs pour ajouter de l’animation à leurs sites.

“Et si les internautes arrivaient sur la page de mon site, et que mon morceau favori était joué? Et un morceau récent… Non pas ce foutu MIDI, pas vrai?” Puis Flash réalisa ce voeu… de la plus dure des manières. Il ne faut pas oublier que Flash était assez impressionnant pour son époque. A vrai dire, c’était une vraie innovation. C’était un progrès. C’était cool.

Peu importe les excès d’utilisation qui en ont découlés par la suite, il faut être conscient que Flash nous autorisa à faire des choses avec Internet qu‘il était impossible de faire auparavant. Il nous a permis d’étendre nos horizons créatifs, de créer du boulot dans une toute nouvelle industrie, de nous proposer des “web cartoons”, et la meilleure chose qui nous soit arrivée dans les années 90: les jeux Flash! Encore aujourd’hui, ces jeux sont très addictifs.

Puis de l’eau coula sous les ponts, beaucoup de designers ont migré vers l’animation Javascript pour les fonctionnalités plus petites comme les menus déroulants et d’autres éléments de navigation. Après tout, c’était mieux accueilli par les moteurs de recherche ; si elles étaient bien faites encore une fois. Certains n’utilisaient d’ailleurs que le Javascript car, de cette manière, Frontpage et Dreamweaver mettaient les boutons en image au placard. Un progrès est un progrès, aussi petit soit-il.

Cependant, au milieu de cette dernière décennie, le W3C travaillait déjà sur le fait d’implémenter des animations dans les spécifications CSS. En 2009, la première ébauche de spécifications techniques est sortie. Et maintenant?

Aujourd’hui, nous avons trouvé des solutions pour que le rendu soit interprété par nos machines, pour combiner les animations CSS avec des fichiers SVG, des bibliothèques Javascript afin d’améliorer les fonctionnalités basiques d’animation, et bien plus encore.

Aujourd’hui, nous cherchons des moyens de faire mieux qu’ajouter simplement du style aux sites. Aujourd’hui, nous essayons d’améliorer l’utilisabilité, informer et éduquer l’utilisateur, et l’aider à comprendre ce qu’il fait.

L’animation n’est plus une nouveauté pour les webdesigners. Dans l’univers du film, l’animation était devenue un socle pour une toute nouvelle manière de raconter des histoires. Pour nous, c’est en train de devenir un socle pour des designs d’interactions effectifs.

Un progrès est un progrès, aussi petit soit-il.

Il n’y a jamais eu un meilleur moment pour se focaliser sur l’animation liée aux interfaces web et aux applications. La technologie n’est pas encore complètement déployée (quand le sera-t-elle vraiment?) ou complètement supportée (quand le sera-t-elle vraiment?) mais nous trouvons jour après jour des nouvelles solutions pour l’exploiter sans utiliser de plugins, ou codes propriétaires.

Plus nous initierons nos animations sur des standards, plus les internautes seront capables de les voir au premier abord. Il est temps de l’adopter dès maintenant.

Les types d’animation Web

Concentrons nous désormais sur le business. De quels genres d’animation parlons-nous? J’ai dit beaucoup de choses sur le fait d’utiliser les animations pour améliorer les interfaces utilisateurs, mais qu’est-ce que cela signifie exactement?

Il est évidemment que jeter des animations sur une page Web et attendre en espérant augmenter notre taux de conversion ne suffit pas. Cela serait idiot. Comme tout autre aspect du design, le type d’animations que vous utilisez, et le moment où elles se déclenchent, doivent être clairement justifiés.

Infographie Webdesigner Depot par Ezequiel Bruni

Il faut donc aussi considérer les contraintes actuelles d’intégration. Si vos animations sont si lourdes à charger qu’elles ralentissent la navigation de vos utilisateurs sur leur mobile, ou pire, sur leur ordinateur, vous allez avoir un problème. Et pas qu’un…

Commençons par regarder les différents types d’animation spécifiquement utilisés sur internet.

Je ne sais pas si c’est le type d’animation le plus commun, quoi que, à deviner, c’est probablement le cas. C’est, dans les tous les cas, le type d’animation le plus utile que nous avons à notre disposition.

Comme je l’ai dit précédemment, c’est l’animation qui signale à l’utilisateur que son action — cliquer par exemple — a bien été enregistrée. Son clic était le catalyseur nécessaire pour que quelque chose se passe, si bien qu’il est redirigé vers une autre page, qu’il ouvre une barre latérale ou une fenêtre modale, ou qu’il envoie un mail depuis votre formulaire de contact.

Ce retour d’action n’est pas juste “cool”, c’est essentiel de nos jours, dans ce Web du flat design. Les gens ont besoin de savoir la différence entre interface et esthétisme. Animer vos éléments de manière simple et subtile selon des interactions donne aux utilisateurs une information nécessaire à une navigation agréable. Cela peut être aussi simple que changer la couleur de fond d’un bouton, ou le faire rebondir.

Et ici aussi, c’est toujours dans le but de fournir une information. Ce sont ces animations que vous allez montrer à l’utilisateur quand quelque chose se charge, et que vous ne voulez pas qu’il pique une crise.

L’utilité de ces animations a été prouvée il y a bien longtemps, quand les premières interfaces graphiques ont été inventées. Cela a commencé avec la façon dont le curseur de la souris se transforme en sablier, ou en barre de progression. Apple nous a présenté le “ballon de plage tournant de la Mort” et Windows nous suggère des fichiers volant gracieusement d’un dossier à un autre.

Ces conventions furent très vite adoptées sur le web, et pour de bonnes raisons. Quand les gens commencent à se demander ce qui se passe, ils continuent de cliquer ou appuyer. Cela doit être l’expression de la frustration. Ils doivent croire que cela va accélérer le processus.

SVG loaders par Sam Herbert

Dans tous les cas, dire à votre utilisateur ce qui arrive, ne serait-ce qu’avec une simple barre de progression, peut considérablement dissiper son esprit… même pour certains d’entre nous qui manipulons des ordinateurs depuis longtemps.

Medium, le site de blogging sur lequel vous lisez cet article, et que j’apprécie tout particulièrement, fait appel à une barre de progression verte, qui contraste avec le reste du site en noir et blanc, pour marquer les temps de chargement entre chaque action menée par l’utilisateur.

Backoffice de Medium

Le story-telling avec l’animation va désormais au delà de l’effet cartoonesque. A vrai dire, certains designers réalisent leur site de sorte qu’un utilisateur interagisse avec (par exemple en scrollant la page), des animations sont alors déclenchées ce qui raconte une histoire.

Quelques exemples connus sont les pages qui présentent un nouveau produit en “l’assemblant”. D’autres se jouent plus comme un véritable cartoon, avec des petits personnages qui vous suivent en même temps que vous parcourez la page.

L’efficacité de ces animations est contestable. Typiquement, elles ne sont pas censées améliorer l’utilisabilité, mais plutôt impressionnées l’utilisateur, et lui donner quelques indices sur l‘objectif de la page. Elles peuvent essayer de mettre en avant le savoir-faire à propos d’un produit, ou partager les expériences qui ont guidées la création d’une société.

Le fait que ces animations atteignent leurs objectifs ou non dépendra grandement de la qualité des animations en elles-même, si elles affectent excessivement ou non la performance du site, et le contenu de la page. Si un utilisateur ne trouve pas ce qu’ils cherchent sur votre site, toutes les animations du monde ne régleront pas le problème.

La page dédiée au crayon électronique 53, par exemple, vous montre exactement ce qu’il y a dans ce petit stylo connecté quand vous scrollez.

Pencil Fiftythree. THINK WITH YOUR HANDS.

Il y a un autre exemple d’une marque que j’aime particulièrement et qui a une longue expérience avec ce genre de choses: Apple.

Mac Pro par Apple

Un exemple redondant et pompeux dès qu’on parle de design mais il faut reconnaître que la marque sait s’y prendre quand il s’agit de mettre en valeur leurs produits. La page dédiée au Mac Pro vous montre exactement ce qui se trouve sous le capot de la bécane à chaque nouveau scroll vers le bas de la page.

Pour le meilleur ou pour le pire, certains intègrent de l’animation sur leur site pour ne servir aucune cause sauf celle d’être vue. Est-ce que cela en vaut la peine? Oui… et puis non.

J’éviterais tout simplement ce type d’usage parce qu’il est distrayant. Vous voulez que les yeux de vos utilisateurs soient guidés pour les raisons qui devraient les mener à acheter quoique ce soit que vous vendez, et pour vos call-to-actions. Vous souhaitez qu’ils obtiennent ce pour quoi ils sont venus. Si votre site ne répond pas aux attentes des utilisateurs, ou s’ils sont trop divertis alors qu’ils cherchent justement à identifier leurs attentes, il se peut qu’ils partent pour ne jamais revenir.

Une animation, si elle n’a qu’un objectif esthétique, doit être complètement cachée. Montrez la après que vos visiteurs aient complétés toutes les actions que vous attendiez d’eux. Vous pouvez aussi intégrer des animations subtiles qui sont déclenchées une fois que l’utilisateur fait quelque chose de très spécifique, comme au survol de la souris au dessus d’un petit élément dans le header ou le footer.

Plusieurs exemples comme les “easter eggs” de Google, ou encore cette animation de photojojo.com :

Scrollez jusqu’en bas de n’importe quelle page, et un sympathique dinosaure vous prendra en photo. Sur d’autres pages, un ballon flottera subtilement de droite à gauche.

La publicité, pour beaucoup, c’est leur revenu, et pour d’autres, c’est un fléau. Ajouter une animation à une pub, et BOOM!! Les yeux sont attirés par le mouvement contre leur volonté. C’est un réflexe instinctif. Ajouter du son, et vos internautes vont ressentir une intense haine… C’est aussi un réflexe, et c’est presque inévitable. Si vous voulez que les internautes voient votre pub, les animer est un bon départ. Néanmoins, vous pouvez dans le même temps ne pas être la bienvenue sur quelques réseaux publicitaires modernes qui se vantent de “pubs non-intrusives”. Or, si vos pubs animées ne fonctionnaient déjà pas, on ne les verra pas plus sur ces plateformes.

Cet usage de l’animation pose le même problème que l’animation purement esthétique, c’est qu’elle distrait l’utilisateur de sa tâche première. Dans le e-commerce, par exemple, la distraction est la mort assurée. Finalement, c’est à vous de peser le pour et le contre. Pas de publicité, pubs non-intrusives, ou pubs animées ? C’est un dur compromis à faire.

L’intégration des animations

L’aspect technique de l’intégration importe, mais si vous utilisez gifs, vidéo, CSS, SVG, ou même du Flash, il y a quelques principes qui importent plus. Oubliez, pour un instant, la technologie ou la technique que vous prévoyez d’utiliser, et soyez plutôt prêt à apprendre un peu plus de théorie. Vos utilisateurs vous remercieront.

Vous devez vous dire:

Okay, ça semble évident. Les animations doivent se jouer vite, pas lentement.

Et vous avez raison, c’est évident… en théorie. Le problème est que je trouve encore des sites, fait avec les dernières technologies, mais des animations instables. J’ai personnellement un MacBook Pro (15 pouces, début 2011), qui m’a coûté un certain prix. Ces animations ne devraient pas être si saccadées. J’ai été récemment sur des sites sur lesquels je me suis demandé:

Skyrim se joue plus vite que ça !

Et sans blaguer ou exagérer. Maintenant, imaginez ce que cela serait si vous naviguiez sur ces mêmes sites avec une tablette ou un smartphone bas de gamme. D’un côté, cela serait un bon moyen de réellement tester le caractère de quelqu’un, mais de l’autre, ces sites trop lents ne rapporteront pas plus de bénéfice. Si vos seules options sont des animations lentes ou pas d’animation du tout, vous ferez mieux d’opter pour une interface stable, sans animation.

Faire attendre les gens, c’est le meilleur moyen de perdre du business.

Que dire de plus des sites développés avec tellement d’animations et d’effets spéciaux qu’ils ont besoin d’un écran de chargement avec une barre de progression ? Jamais personne ne devrait attendre que des animations se chargent pour consulter l’information qu’ils veulent ou qu’ils ont besoin. Jamais. Faire attendre les gens, c’est le meilleur moyen de perdre du business.

En d’autres termes:

  • Si Skyrim est plus fluide que votre site sur mon ordinateur, c’est mauvais.
  • Si votre site a besoin d’une barre de chargement avant que les utilisateurs puissent avoir accès à la page d’accueil, c’est très mauvais.

Et j’en profite pour vous donner un petit conseil technique: là où la vitesse et la performance de votre matériel informatique sont impliquées, le CSS est presque toujours meilleur que le Javascript. Dès que vous pouvez avoir le choix, utilisez des animations en CSS, et celles en JS en complément.

Quand on considère l’animation comme un outil de design, plutôt qu’un choix stylistique, il est préférable de commencer petit. La première raison, les petites animations discrètes ont de meilleur résultat (voir la section précédente). La deuxième, les grosses animations tape-à-l’oeil doivent avoir un objectif au delà de juste “être bien faites”, pour être utiles.

La subtilité est la clé d’un design réussi

La plupart des sites internet n’ont besoin d’aucunes animations hormis celles utilisées sur les éléments UI pour rendre l’interface plus “vivante” et semi-naturelle. Avant de commencer à jeter de la parallaxe un peu partout comme du riz durant un mariage, demandez vous si cela va vraiment améliorer l’expérience de vos utilisateurs. Est-ce que faire bouger sur l’écran de grosses choses bien voyantes informerait et dirigerait mieux votre utilisateur qu’un texte ordinaire avec une jolie image?

Dans la plupart des cas, la réponse est certainement “non”. Mais il y a des exceptions bien sûr. Il y en a presque toujours d’ailleurs. Le plus souvent, cependant, il serait mieux d’animer juste vos boutons, faire glisser votre votre barre de navigation cachée, et animer votre fameux message de victoire qui apparaît au moment où un utilisateur a rempli votre formulaire de contact.

La subtilité est la clé d’un design réussi, et encore trop souvent sous-estimé. Commencez par là. Et ensuite, s’il devient clair pour vous que faire quelque chose de plus gros et plus voyant servirait votre propos du point de vue de l’expérience de vos utilisateurs, foncez!

Les animations doivent aller vite, ou plutôt, elles doivent se passer vite. Je ne parle pas de performance ici, mais plutôt le temps qu’un objet met pour exécuter un mouvement.

Pensez à comment nous interagissons avec les objets dans la vie réelle. Parfois nous bougeons vite, parfois plus lentement. La rapidité avec laquelle nous interagissons avec un objet peut dépendre de sa taille, sa fonction en main, ou s’il est plein d’un liquide que nous ne voulons pas renverser ; mais généralement, nous prenons les choses et les bougeons assez rapidement dans l’espace. Certains mouvements peuvent se passer en millième de secondes.

Impossible Bureau, We believe in the impossible

La milliseconde est généralement l’unité de temps demandée pour mesurer des animations d’interface. Plus long, et les gens commence à perdre patience avec leur machine, ou votre produit, ou les deux. Créez des animations courtes, ou simplement lentes. C’est particulièrement vrai pour des sites réalisés pour que les gens les utilisent de manière répétitive. Même si l’animation est “super fun et divertissante”, elle perdra de son attrait à partir de la dixième fois où quelqu’un l’aura vu.

Les objets physiques rebondissent. Certains objets ne le font pas très bien, mais de manière générale tous rebondissent un petit peu, si vous les faites tomber d’assez haut sur une surface dure, et s’il n’y a pas trop de frottement à l’air, et si… Bref vous avez compris.

Interagir avec des éléments UI, c’est comme interagir avec des objets petits et durs. Tu les lances doucement d’un côté, ils rebondissent un petit peu. Puis tu les fais tomber, ils rebondissent un petit peu. Ainsi, il peut être utile, quand c’est approprié, de faire “rebondir” vos animations, particulièrement si vos utilisateurs ont bougé verticalement. C’est simplement dans le but de maintenir l’illusion.

Les objets en mouvement prennent naturellement un petit peu de temps à s’arrêter. Les objets statiques, pris par le mouvement, prennent un petit peu de temps à s’accélérer. La physique mesdames et messieurs!

Acorns, Start Investing Today

Donc, quand vous mettez un objet en mouvement — ou que vous l’arrêtez de bouger — souvenez vous de leur donner un petit temps (en millisecondes généralement) pour ralentir ou accélérer. Aussi appelé “atténuation”, il y a des fonctionnalités pour simuler cet effet en CSS: ease-in et ease-out.

Liens annexes

Les 12 règles de l’Animation enseignées dans les plus grandes écoles depuis plus d’un demi siècle et mis en oeuvre par les meilleurs motion designers dans les classiques de Disney et autres Pixar.

Un tutorial très complet et en anglais sur la manière d’intégrer de l’animation et des transitions en CSS3. Un autre un peu moins long.

Un outil puissant et bien foutu pour créer vos propres animations et transitions en ligne, les tester et générer le code CSS à copier-coller dans votre projet. Vous y trouverez d’autres outils qui peuvent vous être utiles. Ceaser est moins complet et propose des animations plus basiques.

Bonus

Pour le plaisir des yeux, le dernier court-métrage hilarant de l’Âge de Glace mettant en scène le pauvre Scrat toujours à la poursuite de son précieux gland. J’adorerais avoir cette bestiole chez moi, même si…


Traduit et adapté de “The ultimate guide to Web animation” de Ezequiel Bruni

Garry Valette

Written by

UX/UI Designer freelancer. Disruptive project seeker. Entrepreneur. Dreamer. Try to write stuff sometimes.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade