Intégrer des animations dans vos projets web

Les animations sur les sites internet n’ont pas toujours été bien accueillies par les internautes. En effet, au début du web celles-ci se limitaient à des bannières et publicités clignotantes et intrusives qui, la plupart du temps, ne faisait que gêner la lisibilité du contenu.
En marketing une technique appelée « dark pattern » utilisait les animations pour tromper l’utilisateur et l’inciter à cliquer au mauvais endroit pour vendre un produit ou installer un logiciel au depens de l’internaute.
Mais alors qu’est-ce qui a changé depuis 20 ans ?

COMMENT ET POURQUOI UTILISER L’ANIMATION DANS VOS PROJETS WEB ?

De nos jours et au delà des aspects techniques, un site internet doit être agréable à visiter. Le contenu doit être mis en forme et organisé pour faciliter la lecture de l’utilisateur.
Il existe un moyen efficace et de plus en plus utilisé par les « UX (eXpérience Utilisateur) Designer » pour créer des interfaces plus ergonomiques et plus attractives, l’animation.

Le mouvement

Il permet de mettre en évidence une information importante, un lien, une alerte… en effet le regard est toujours plus attiré par ce qui bouge.
Les éléments animés orientent le visiteur et peuvent, quand ils sont utilisés avec parcimonie, rendre la navigation plus simple et agréable. Cela enrichit les informations textes et aide à la compréhension globale d’un article, d’un site internet ou d’un post sur les réseaux sociaux.
L’animation apporte un côté dynamique et positif à une marque ou à un produit. Elle rend le projet vivant !

Exemple d’animation réalisée par Côté Cube sur le site de l’Europe en Guyane pour mettre en avant la rubrique « offres d’emploi.

L’intéraction

Sur un site internet ce sont des éléments qui s’animent et interagissent avec l’internaute.
Ces éléments graphiques peuvent être codés et animés en javascript ou créés à partir d’un logiciel d’animation et exportés sous forme de gifs ou de vidéos.
Ils peuvent prendre la forme de survols d’images ou de boutons, de chargements de pages, de menus déroulants, de formulaires en « lightbox »…
Les interactions sur un site ou sur une application mobile permettent une navigation plus fluide et plus intuitive.
Grace à l’animation, le visiteur visualisera mieux quand une zone ou un élément est réactif. Il accédera plus facilement et plus rapidement aux informations et aux contenus qu’il recherche.

Exemple d’interaction sur un bouton avec animation au survol et au clic.
Et animation du chargement et de l’action validée. ©CXDojo

QUELS OUTILS UTILISER ?

L’outil principal que les Webdesigners utilisent chez Côté Cube pour la réalisation de séquences animées sur-mesure est Adobe Animate. Il remplace le mythique mais aujourd’hui obsolète Adobe Flash 💀. Il fonctionne de la même manière grâce, entre autre, à un système d’images-clés et d’interpolation de mouvement.
Canva Pro est aussi un outil très pratique et facile d’utilisation pour créer des visuels animés. Il dispose d’une bibliothèque d’éléments et d’effets qui permettent d’exporter des formats vidéos et gifs pour les réseaux sociaux en quelques clics.

Il y’a bien sûr les animations CSS et l’animation d’images .png ou .svg (vectoriel) en javascript. Cette méthode est privilégiée par nos développeurs et offre une souplesse d’utilisation dont ne dispose pas une vidéo ou un .gif. En effet les propriétés de l’animation (positionnement, mouvement, couleurs…) peuvent être modifiées très rapidement en changeant une ligne de code.