Cela fait maintenant deux ans que j’ai écrit ici (NdT: dans 24Ways) un article sur les animations dans un monde sans Flash. Depuis, les animations ont surgi un peu partout, aussi bien sur des interfaces au design épuré que sur des grilles de type magazine. C’est une époque formidable pour tous les mordus d’animation et d’interaction, les passionnés d’expérience utilisateur (UX), les designers d’interface utilisateur (UI) et toute une troupe d’autres acronymes !

Mais dans notre hâte à expérimenter toutes ces possibilités d’animation, il semble que nous nous posions de moins en moins la question de savoir si nous devrions vraiment les utiliser. Nous passons plus de temps à nous creuser les méninges sur la façon d’animer tous les éléments à 60fps qu’à réfléchir aux moyens d’éviter que les utilisateurs souffrant de troubles vestibulaires ne puissent utiliser notre site.

J’aime l’animation web. Je la vis, et j'en fais d’adorables petites choses stupides qui n’auraient pas leur place sur un site qui se respecte. Je sais qu’on peut en abuser. Nous nous sommes tous moqués de la Flash-turbation... mais comme nous oublions vite les leçons apprises de cette époque du design web ! Les effets de parallax scrolling sont peut-être le skip intro de cette génération. Nous avons certainement appris des choses plus intéressantes dans la période de sobriété entre Flash et l’API d’animation web.

Alors voici cinq petits conseils pour nous permettre de prendre un peu de recul par rapport aux excès d’animations. Si nous les gardons bien à l’esprit, nous pouvons faire de 2015 l’année où l’animation web prendra son véritable essor.

Animez délibérément

Malheureusement, l’animation est considérée par la majorité des designers comme un élément décoratif. Les designers d’interfaces utilisateurs et les développeurs d’interaction comprennent mieux ces choses. Mais lorsque je donne un atelier sur l’animation pour l’interaction, je sais que mes étudiants devront mener une rude bataille contre des décideurs qui considèrent cela très joli, mais rangent rapidement le sujet au dernier rang de leurs priorités, quand ils ne l’éliminent pas tout simplement.

Difficile de se défaire de cette tare. Mais tout commence avec la qualité de nos choix : animer de manière délibérée, ou de ne pas animer du tout. Les animations de raccroc causeront toujours plus de mal que de bien. Les utilisateurs risquent de se plaindre qu’elles sont trop lentes ou trop rapides, ou de râler parce qu’ils ne comprennent pas ce qui se passe.

Au dernier Chrome Dev Summit cette année j’ai eu le privilège de m’entretenir avec Roma Sha, responsable UX pour le design matériel de Polymer (et la merveilleuse documentation d’animation). Je lui ai demandé quel conseil elle donnerait aux personnes qui utilisent les animations et les transitions dans leur design. Elle m’a fait cette réponse très simple : animez de manière délibérée. Si vous ne pouvez pas vous poser un instant pour réfléchir à l’animation et pour prendre des décisions bien informées et bien articulées dans l’intérêt de l’utilisateur, alors mieux vaut ne même pas vous lancer là-dedans. Une animation prend de l’énergie, et une mauvaise animation est pire que pas d’animation du tout.

Il faut plus que 12 principes

Nous essayons toujours de faire des corrélations entre des choses disparates qui suscitent notre intérêt. Depuis peu, il semble que de plus en plus de gens mettent The Illusion of Life (NdT: une histoire des animations Disney et des procédés utilisés) dans leur bibliothèque à côté de Understanding Comics (NdT: le manuel de base pour comprendre la bande dessinée). Ces livres nous donnent des aperçus utiles d’autres industries. Cependant, nous ne devrions jamais confondre un site web et un livre de bandes dessinées ou un dessin animé. Certains de ces concepts, s’ils nous aident à considérer notre travail sous un jour nouveau, sont plus ou moins appropriés au domaine qui est le nôtre.

Je pense en particulier aux 12 principes de l’animation, mis en avant par les vétérans des studios Disney dans ce beau livre The Illusion of Life. Ces principes sont très utiles pour faire des animations réalistes et accrocheuses, comme une balle qui rebondit ou un écureuil qui trottine, mais ils ne nous orientent pas du tout pour savoir quand ou comment quelque chose doit être animé dans le cadre d’une expérience interactive améliorée, comme par exemple combien de temps un menu déroulant doit prendre pour se dérouler, ou bien si un groupe d’objets manipulables devrait être animé de manière séquentielle ou simultanée.

Les douze principes sont un excellent point de départ, mais nous avons tellement plus à apprendre. J’ai listé au moins six autres fonctions d’animation interactive applicables à la conception web et d’applications. Lorsque nous pensons à l’animation, nous devrions envisager pourquoi et comment, et non pas seulement aux aspects esthétiques. Ceux-ci ne signifient rien si l’animation est superflue ou source de confusion.

Utile et nécessaire, puis belle

Chez les Shakers, il y a un proverbe qui dit : “Ne fais pas quelque chose si elle n’est pas à la fois nécessaire et utile; mais si elle est à la fois nécessaire et utile, n’hésite pas à la rendre belle”. S’agissant de l’animation et du web, il y a actuellement très peu de documentation sur ce qui la rend utile ou nécessaire. Nous avons tendance à nous concentrer davantage sur la beauté, l’agrément, l’esthétique. Mais même si l’esthétique est importante, elle occupe la banquette arrière par rapport à l’expérience globale de l’utilisateur.

La première fois que j’ai vu l’écran de chargement de Pokemon Yellow sur ma GameBoy j’ai été captivée. À partir de la sixième fois, j’écrasais le bouton Start dès que le logo apparaissait à l’écran. Ce qui nous semble plein de charme et de sens lorsque nous travaillons sur un projet peut apparaître tout autrement à nos utilisateurs. Et même lorsqu’une animation adorable est très bien reçue, comme ce fut le cas de l’écran d’ouverture de Pokemon Yellow, trop de répétitions d’une animation jolie mais devenue inutile peut irriter l’utilisateur.

Si une animation n’aide pas l’utilisateur d’une façon ou d’une autre, c’est une utilisation gratuite de la batterie et des cycles de processing. Plutôt que d’animer pour le seul plaisir d’animer, nous devrions être capables d’articuler deux choses que l’animation réalise pour l’utilisateur. Par exemple, prenons cette icône de menu de Finethought.com (trouvée grâce à Use Your Interface). L’icône fait deux choses lorsqu’elle est cliquée :

1. Elle donne un feedback à l’utilisateur en s’animant, ce qui permet à l’utilisateur de savoir qu’elle a bien été cliquée.
2. Elle montre que sa relation au contenu de la page a changé, en se transformant en bouton de fermeture.

Si nous avons deux bonnes raisons d’animer quelque chose, rien ne s’oppose à ce qu’une troisième raison soit l’agrément de l’utilisateur.

Aller 4 fois plus vite

Il existe une règle générale dans le monde de l’animation traditionnelle qui s’applique très bien à l’animation web : quelle que soit la durée de ton animation, divise-la en deux. Puis divise-la encore en deux. Lorsque nous travaillons sur une animation pendant des heures, notre notion du temps se dilate, ce qui nous paraît rapide est en réalité insupportablement lent pour la plupart des utilisateurs. En fait, la critique la plus courante actuellement de la part des utilisateurs d’interfaces animées est “c’est trop lent !” Une bonne animation est non bloquante, et pour cela, elle doit aller vite.

Lorsque vos animations sont prêtes à être intégrées au site, réduisez leur durée à 25% de leur vitesse originale : un fade-out de 4 secondes sera parfait en 1 seconde.

Installer un bouton stop

Quel que soit l’intérêt ou la nécessité de votre animation, il y aura toujours des gens qu’elle rendra physiquement malades. Pour eux, il est important de prévoir une façon de désactiver les animations sur le site.

Heureusement, les designers web pensent déjà à divers moyens de permettre aux utilisateurs de choisir eux-mêmes leur expérience web. Par exemple, ce site de présentation du film d’animation Little from the Fish Shop permet aux utilisateurs de désactiver la plupart des effets de parallaxe. Même si cela n’annule pas toutes les animations, c’est suffisant pour vous éviter la nausée.

L’animation est un outil puissant dans l’arsenal du web design. Mais la prudence s’impose : si nous abusons de l’animation, elle risque de finir par avoir mauvaise réputation. Si nous la sous-estimons, elle ne sera jamais une priorité. Mais si nous la manions avec sagacité, l’animation est un outil qui nous aidera à construire des sites et des applications plus faciles à utiliser et plus agréables, pour les années qui viennent.

Faisons de 2015 l’année où les animations web se seront mises au service des utilisateurs.

NdT : Les illustrations détournées de Jurassic Park n'ont pas été retenues par l'éditeur de l'article original, Rachel Nabors les a amicalement communiquées à La Cascade.