L'animation Web à l'ère post-flash

Dans cet environnement extrêmement concurrentiel, les entreprises recherchent frénétiquement des moyens de capter et de retenir l'attention des gens. Au cours de notre vie quotidienne, le flux incessant de stimulations visuelles qui jaillissent sur nous des publicités animées dans la rue, des vidéos sur nos mobiles, sans parler de nos flux de médias sociaux, crée un sentiment de mouvement constant qui rivalise pour attirer notre attention.

La réaction d'une fraction de seconde au mouvement dans notre environnement a été développée à partir du besoin de survivre et déclenchée par des stimuli environnementaux perçus comme potentiellement menaçants ou nuisibles ; les gens accordent une attention particulière aux choses qui bougent. Lorsque nous attrapons quelque chose se déplaçant rapidement du coin de l'œil, le cerveau nous alerte en une fraction de seconde car notre cerveau subconscient a déjà réagi au danger avant que notre esprit conscient n'ait eu le temps de traiter l'information.

Les annonceurs le savent, et c'est pourquoi nous avons des publicités de rue animées aux arrêts de bus et sur les quais de métro, des publicités vidéo apparaissant dans les flux de médias sociaux et des panneaux d'affichage électroniques avec vidéo en plein écran. La technique est un effet coup de poing unique conçu pour diffuser des messages marketing. Premièrement, en captant notre attention, et deuxièmement, en utilisant la vidéo et l'animation pour faire passer le message.

Si une image statique vaut mille mots, combien vaut une animation ?

C'est là que l'animation Web entre en jeu. Les concepteurs Web espèrent capter et retenir notre attention, et peut-être ajouter une touche de joie inattendue. L'animation Web peut être utilisée pour visualiser différentes étapes d'un processus ou d'une idée complexe, pour illustrer un message marketing simple ou pour déplacer des éléments sur une page Web de manière naturelle et fluide au fur et à mesure que les gens défilent, encore une fois, pour attirer l'attention sur quelque chose.

Comment l'animation Web a commencé, l'essor des GIF

Au début du World Wide Web, les choses étaient plutôt statiques et ennuyeuses. Les pages Web étaient principalement basées sur la conception graphique et les mises en page du monde de l'impression. Cependant, certains concepteurs ont fait un effort concerté - malgré les défis techniques et de bande passante - pour inclure les premières formes d'animation Web afin de les rendre plus dynamiques et attrayantes. L'un des premiers ajouts d'une animation GIF à un site Web était sur Batman Forever de Jeffrey Zeldman en 1995. Les visiteurs ont été accueillis par le vol de Batman vers eux, animé comme une séquence d'images.

Le site promotionnel Batman Forever était l'un des sites les plus populaires à l'époque. Cela a inspiré d'autres concepteurs et développeurs Web à incorporer l'animation Web GIF en tant qu'élément original et accrocheur dans leurs sites Web.

Avance rapide de 20 ans et les GIF animés sont maintenant partout. Ils sont sur Twitter, Messenger, iMessage, WhatsApp, Skype, Instagram et Facebook. Les GIF conviennent aux animations en boucle courte, aux séquences d'images et même aux courtes boucles vidéo. Une lacune malheureuse cependant est que le format de fichier GIF n'a pas de transparence variable et ne prend pas en charge un canal alpha ; par conséquent, tous les pixels sont soit totalement opaques, soit totalement transparents.

Les animations GIF ont marqué le début d'une renaissance de la conception Web, mais elles n'étaient pas idéales. Surtout au début de l'accès commuté et des vitesses Internet lentes, les GIF étaient des porcs de bande passante. Le résultat était une séquence pixélisée à basse résolution. L'inconvénient pour les concepteurs devant compresser les GIF à la plus petite taille possible était une palette limitée de 8 bits, ce qui entraînait beaucoup de tramage. Cela a changé avec la généralisation de l'Internet haut débit au 21e siècle et, par conséquent, l'animation Web est devenue plus belle avec des millions de couleurs et plus fluide avec des fréquences d'images plus élevées.

L'aube de l'animation Web Flash

Le grand boom de l'animation Web est venu avec l'introduction de Flash en 1996 lorsque Macromedia a annoncé son plugin Web et l'outil d'animation basé sur les images qui l'accompagne : Macromedia Flash (après avoir acquis FutureSplash Animator, un programme d'animation vectorielle). Flash a joué un rôle de premier plan dans l'apport de nouvelles fonctionnalités sur le Web. De l'audio et de l'animation à l'interactivité et à la vidéo, Flash a contribué à faire avancer Internet.

La possibilité de créer des animations Web simples, allégées et vectorielles sur des sites entiers incluant des interactions, a créé ce que l'on pourrait appeler la période «baroque» de la conception Web avec de (trop) nombreux éléments animés encombrant le paysage. Néanmoins, Flash a offert un aperçu des possibilités de la conception Web dynamique, libérant les concepteurs pour expérimenter et déclenchant une période d'évolution rapide de la conception Web.

Les animations Flash sont légères et relativement faciles à réaliser. D'une taille de seulement quelques kilo-octets, ils sont distribués au format de fichier SWF et un fichier utilisant le son avec des graphiques vectoriels nets. La création d'animations Web est devenue un processus simplifié qui n'ajoutait pas grand-chose aux temps de chargement des pages Web. Mais malgré tout cela, un inconvénient important subsistait : un plug-in de navigateur était nécessaire pour son exécution.

De plus, une interaction sophistiquée dans Flash a été rendue possible par ActionScript (AS), un langage de programmation orienté objet similaire à JavaScript. ActionScript a été initialement conçu pour contrôler de simples animations vectorielles 2D, mais a ensuite évolué pour devenir un outil sophistiqué.

Malheureusement, l'animation Flash n'était pas destinée à être réactive, ne fonctionnait pas bien sur tous les appareils et a finalement été supprimée de tous les appareils mobiles populaires. Alors que la taille du fichier était relativement petite, Flash n'était pas bien optimisé et finissait par être gourmand en CPU, ce qui posait également un problème sur les mobiles. La fin de l'ère Flash est survenue après que Steve Jobs a décidé de ne pas prendre en charge Flash sur les appareils mobiles Apple.

Flash a été créé à l'ère du PC, pour les PC et les souris. Mais l'ère mobile concerne les appareils à faible consommation d'énergie, les interfaces tactiles et les normes Web ouvertes, tous des domaines où Flash est insuffisant.

Steve Jobs

L'animation Web aujourd'hui

Aujourd'hui, Flash étant obsolète, nous avons des besoins différents en matière d'animation web. Les outils doivent être souples et légers. Les concepteurs Web doivent créer un contenu réactif et adaptable pour différents appareils (ordinateur de bureau, tablette et mobile), en tenant compte des différentes dimensions de l'écran, des navigateurs, des formats d'image, des densités de pixels, etc. Nos chefs-d'œuvre d'animation Web doivent fonctionner sur un mobile de 5 pouces, 720 pixels, jusqu'à une tablette QXGA de 9,7 pouces, jusqu'à un écran Retina 6K de 32 pouces.

La technologie a mûri à un point tel que même les appareils mobiles sous-alimentés disposent de la bande passante et de la puissance de traitement nécessaires pour gérer des animations Web très exigeantes et du contenu vidéo haute résolution. Cela ne signifie pas que les sites Web doivent être très « occupés ». Comme toujours, il s'agit de trouver le bon équilibre entre l'animation, l'interaction dynamique et les éléments statiques. Le fait que nous puissions implémenter beaucoup d'animations Web sophistiquées aujourd'hui ne signifie pas que nous devrions le faire.

Les concepteurs/animateurs Web doivent également prendre en compte la prise en charge multiplateforme. Il y a dix ans, les concepteurs n'avaient pas à s'assurer que leurs créations seraient belles sur une si large gamme d'appareils. Différents rapports d'aspect, orientations portrait et paysage, ainsi que diverses densités de pixels et distances de visualisation doivent être pris en compte. Cette énigme présente aux concepteurs de sites Web un ensemble de nouveaux défis et de pièges potentiels. Les tests utilisateurs consomment un temps précieux, plus de choses peuvent mal tourner sur une multitude de plates-formes et les animations Web doivent être plus détaillées que jamais.

HTML5, CSS3, JavaScript et SVG (graphiques évolutifs) semblent être les meilleures solutions pour l'animation Web. L'utilisation de ces technologies et langages Web modernes aidera à résoudre la plupart des problèmes ci-dessus, mais pas tous. Mais c'est toujours une bonne idée d'être prudent, surtout en territoire inconnu, et une assurance qualité et des tests approfondis sont indispensables.

Pourquoi utiliser l'animation Web ?

L'animation Web peut attirer et retenir l'attention des gens plus longtemps qu'une page Web statique et communique une idée ou un concept plus clairement et plus efficacement. Une excellente animation Web transmet une histoire derrière chaque mouvement. Il s'agit de donner vie à une animation avec un sens et une « âme » (lat. anima).

L'animation Web doit être fluide, significative et accompagner le parcours du visiteur. Le concepteur/animateur Web doit être conscient de la façon dont l'animation s'intègre dans l'expérience utilisateur, essayer de prédire les flux d'utilisateurs probables, puis la prendre en charge de manière significative.

Les concepteurs de sites Web ne doivent pas considérer l'animation Web d'un point de vue purement technique ; ils doivent l'examiner du point de vue de l'utilisateur.

L'une des choses essentielles de l'animation est le timing. Un bon timing donne un sens physique et émotionnel à une animation. L'expérience doit être transparente et logique. Si l'animation n'est pas fluide (a un problème de timing), les gens pourraient le percevoir comme un bug et perdre toute motivation pour explorer davantage le site.

L'animateur doit utiliser un timing approprié pour produire l'effet escompté. Combien d'images clés doivent être utilisées dans l'animation ? Quel type de changement dynamique dans l'animation est dû à l'interaction du visiteur, et à quelle vitesse la réponse intervient-elle après l'interaction ? L'animation est-elle fantaisiste, sérieuse, divertissante ?

D'un point de vue logique, nous pouvons diviser l'animation Web en deux types de base :

• Une animation Web statique et non interactive, par exemple une animation GIF.
• Une animation Web dynamique avec engagement de l'utilisateur et interactivité qui change en fonction de l'entrée de l'utilisateur.

Le meilleur exemple d'animation dynamique est un jeu, où les utilisateurs manipulent le contenu à l'écran. Un autre exemple simple consisterait à modifier la position de certains éléments lorsqu'un visiteur de site Web fait défiler un site Web à défilement parallaxe. L'animation n'est pas passive, elle varie en fonction des actions de l'utilisateur.

L'animation Web dynamique est souvent utilisée pour présenter des infographies animées sur un site Web, afin que les gens accordent plus d'attention à des zones spécifiques tout en faisant défiler la page. C'est un moyen puissant de mettre en évidence les informations pertinentes.

Les avantages et les inconvénients de l'animation Web

Voici quelques avantages et inconvénients des techniques d'animation Web, y compris les solutions héritées qui ne sont plus utilisées.

Qu'en est-il des avantages et des inconvénients de l'animation Web en général ? Une animation Web bien exécutée peut toujours sembler déplacée, c'est donc toujours une bonne idée de poser quelques questions cruciales (ainsi qu'aux clients du quiz et aux autres membres de l'équipe) avant de procéder à l'intégration de l'animation dans la conception d'un site Web.

Tout d'abord, nous devons vérifier comment l'animation affectera l'expérience utilisateur. Cela améliorera -t-il l'UX du site ? Les concepteurs doivent :

• Examiner la conception du site Web existant (si disponible)
• Vérifiez le public cible et les plates-formes matérielles qu'ils utilisent
• Vérifiez les temps de chargement du site et la charge du processeur
• Explorer d'autres alternatives
• Gardez un œil sur la convivialité

Ce n'est pas une bonne idée d'utiliser l'animation Web sur un site pour simplement suivre les tendances.

La décision d'utiliser l'animation Web doit être traitée comme toute autre décision de conception ; Les concepteurs de sites Web doivent peser le pour et le contre et s'assurer que l'expérience utilisateur n'est pas compromise. Ils doivent également travailler avec les développeurs pour déterminer les exigences du code et s'assurer qu'ils ne se retrouveront pas coincés avec un code inefficace qui devra peut-être être modifié ultérieurement.

La technologie moderne d'animation Web a considérablement évolué au cours des 20 dernières années. Les performances, la bande passante disponible et la qualité de rendu ont augmenté. Cependant, les concepteurs doivent faire preuve de prudence et n'ajouter une animation à un site Web que si cela améliore de manière significative l'expérience utilisateur.

Pour en savoir plus sur le blog Toptal Design :

• Comment créer des animations de chargement personnalisées pour réduire les taux de rebond
• Créer des illustrations époustouflantes avec Sketch et Looper en un rien de temps
• Un guide étape par étape de l'animation de l'interface utilisateur avec principe et croquis
• Inspirations d'animation de logo pour rendre votre marque plus pertinente
• Un guide étape par étape pour créer des vidéos explicatives de produits animées