Table des matières

Depuis plus de 20 ans, les animations web sont présentes pour dynamiser les sites internet. Bien que les technologies ont évolués avec les années, l’importance du mouvement sur le web s’est vu affirmé et réaffirmé pour aujourd’hui être littéralement partout, que ces animations soient subtiles ou complexes. Mais pourquoi sont-elles aussi importantes, comment les utiliser à bon escient ? 

L’attention des utilisateurs est la grande monnaie d’échange sur le web, il faut réussir à intriguer le visiteur de votre site pour lui donner envie d’en savoir plus sur votre société ou vos produits. Et le faire rapidement. En effet, il faut seulement 0.05 secondes pour que vos visiteurs se fasse une opinion après le chargement de votre site. L’UX, l’expérience utilisateur, c’est-à-dire l’expérience faite par un utilisateur (visiteur) sur votre site internet, doit être la plus agréable possible. 

Les animations web vont permettre de créer une expérience utilisateur originale et accentuer l’attractivité de votre site. On vous explique. 

Les animations web sont très diverses, on pourrait tout d’abord les diviser en deux catégories : les interactions et les animations.

Donne un nouveau souffle à ton site web

Site vitrine ou site e-commerce, Webalia t’accompagne dans la création ou refonte de ton site internet

Refonte du design d'un site web

Les micro-interactions

Les micro-interactions, c’est quoi ? Ce sont des éléments au sein de la page web qui vont interagir en fonction des actions de l’utilisateur, pour dynamiser les contenus. Cela peut être des survols de boutons, des chargements de pages, des animations de graphique, au clic, etc.

Ces interactions sont souvent le fruit d’un travail au niveau du CSS voir de code JavaScript au sein de votre site. Elles sont très brèves, parfois subtiles ou bien un peu plus complexes pour ajouter de la créativité à la page. On les retrouve à de nombreux endroits dans la page comme sur les menus de navigation, les survols de liens, de boutons, d’éléments cliquables. 

Voici quelques exemples de micro-interactions ou les animations CSS ou Javascript :

334c20a45c845383b33fe3a97fecfb44
par CXDojo
72b6d4ed973d4f01fd4d84a0a279a88f
par Yancy Min

Les animations et micro-animations

Les animations web sont plus largement tous les éléments immobiles qui viennent “prendre vie” sur votre site. On peut les retrouver sur de nombreux éléments dans votre page. 

La vidéo peut être un atout afin de dynamiser votre site dès la page d’accueil, notamment par le biais d’une animation de fond, comme une vidéo en arrière-plan. Il faut cependant faire attention au poids et au temps de chargement de ces supports. 

Les animations s’illustrent également dans les apparitions des éléments de votre page, dans les transitions ou le défilement de votre site. Au fil du scroll de la page, les différents blocs composant la page vont venir apparaitre d’une manière particulière, donnant l’impression que la page se construit en même temps que l’on défile. 

Les temps d’attentes ne sont généralement peu appréciés des internautes, penser à des animations lors des temps de chargement aidera à garder l’attention et l’intérêt de votre visiteur lors d’un chargement de page un peu plus long, ou d’un aperçu photo, de l’envoi d’un formulaire, etc. 

Vous n’avez pas besoin de penser grand en termes d’animation, des petites animations placés aux endroits stratégiques de votre page comme sur votre logo, vos icons, apporteront une touche vivante à votre site tout en gardant une sobriété dans le design. 

La navigation sur votre site est un élément important pour l’expérience utilisateur, il sera probablement l’élément le plus utilisé de votre site. Réfléchir à votre menu sera primordial pour qu’il soit adapté aux attentes et habitudes de vos visiteurs. C’est également un élément qui concentre des liens, des redirections, et très souvent des composants qui s’affiche et se masque. Afin de faciliter et amélioration l’expérience de la navigation du menu, les animations web ont leur rôle à jouer. Elles vont pouvoir rendre l’utilisation plus agréable pour l’utilisateur. 

Pour finir, votre page peut intégrer des galeries et diaporama de photos qui pourront amener le visiteur à interagir avec ces éléments.

Voici quelques exemples d’animations :

d7616f8c089969d0a063bf87795cf30c
par Synchronized
3a7654ad8cdd68dcc1b106db357cf66b
par Victor Martin
d0f1510468542c69c8902b683430699c
par Ali Nazari

Leur influence sur l’UX

C’est bien beau d’intégrer toutes ces animations, mais quelle est l’utilité pour votre site web ?

Les animations web vont avoir un impact immédiat sur l’utilisation et son expérience de votre site. Ainsi, un utilisateur ayant une expérience positive via votre site aura une image positive de votre marque et produits et sera plus à même de continuer sa visite sur votre site. L’UX design aura aussi un réel impact sur le SEO de votre site.

Le but principal des animations et interactions dans votre site sera de le rendre vivant, dynamique, de rapprocher l’utilisateur de votre projet, de votre marque. On va vouloir procurer des émotions aux utilisateurs, de les aider dans la compréhension du site pour créer une expérience plus marquante. 

Voici quelques avantages aux animations sur votre site :

  • Faciliter la navigation : notamment par le menu, les animations vont pouvoir guider l’utilisateur dans son parcours
  • Attirer l’attention et retenir l’intérêt des visiteurs : les éléments en mouvement et l’originalité de vos créations vont intriguer vos visiteurs
  • Influencer le comportement de l’utilisateur : les éléments animés permettent de guider le visiteur, de lui montrer où regarder en priorité, d’attirer son attention sur des éléments stratégiques comme les CTA (Call To Action), et permettent de mettre en valeur certains éléments de la page 
  • Ajouter de la valeur au site : les animations vont donner une image travaillée de votre site web, qui sera projeter sur votre image
  • Rendre le site mémorable : l’idée est de travailler l’expérience utilisateur pour qu’elle soit marquante dans l’esprit des internautes
  • Appuie votre storytelling : des animations bien pensées et ancrées dans votre univers va permettre de servir votre storytelling 

Quelques conseils

Le premier conseil pour un site marquant les esprits avec une expérience utilisateur unique est l’originalité de vos créations. Avoir ses propres animations web permettra d’intriguer les visiteurs de la page avec des interactions et animations qu’il n’a jamais vues.

Il faut en faire, mais pas de trop. Même si vous aimez beaucoup vos animations, n’agressez pas vos visiteurs avec une quantité monstre de celle-ci. N’en abusez pas, privilégiez des animations bien placées dans votre page qui permettront d’attirer l’attention du visiteur à des endroits stratégiques. 

Les internautes sont généralement impatients, les animations courtes sont donc à privilégier. On parle habituellement de 400 ms pour des micro-interactions dans la page. Les animations peuvent être un peu plus longues, mais ne doivent pas ralentir la progression de l’utilisateur sur votre site, dans la navigation et dans l’accès aux informations

Ne cherchez pas à faire trop complexe, les internautes doivent être en mesure de comprendre ces animations. Vous pouvez pour cela vous appuyer sur des bases, les connaissances acquises par tous, devenues la norme sur une majorité de site web. 

Enfin, vos animations et interactions devront conserver le style graphique de votre site, et créer une harmonie visuelle avec les autres éléments de votre page. 46% des consommateurs en ligne jugent par l’esthétique et l’attrait visuel la crédibilité de votre site. Il est en conséquence important d’adopter une charte graphique pour l’ensemble des éléments composants votre site même si leur nature est différente.

N’oubliez pas votre stratégie

Le mouvement est au service de votre stratégie web, les animations doivent être réfléchies pour mettre en valeur les informations, les éléments utiles à votre stratégie. Oubliez donc les pages où chaque recoin est animé, restez plutôt simple, léger et bien aligné sur votre marque.

Partagez cet article

Facebook
Twitter
LinkedIn

LIRE PLUS

Nos articles recommandés

Que vous soyez un entrepreneur, un artiste, un blogueur, et vous souhaitez partager votre travail, ou trouver des clients sur internet, vous avez besoin d’un…
Vous vous posez la question de code ou utiliser un CMS ? Vous avez un projet de création ou refonte de site internet ? Et…
WordPress est le système de gestion de contenu (CMS) le plus utilisé sur le web, cela en fait une cible de choix pour les pirates…