Les animations UX  peuvent permettre de simplifier la compréhension du contenu d’une page pour l’utilisateur.

L’interactivité de celles-ci rend l’expérience plus agréable et peut permettre d’expliquer plus rapidement voire plus efficacement un thème donné en tenant en jout l’utilisateur plus longtemps qu’avec un gros pavé de texte.

Les animations peuvent avoir un rôle purement esthétique comme on peut en trouver sur Stripe ou Comet et d’autres permettent réellement d’améliorer et d'accélérer la compréhension du contenu.

Les animations s’illustrent généralement à travers 3 objectifs principaux que nous analyserons aujourd’hui :

  • Animations UX liées aux retours visuels (feedback)
  • Animations UX purement esthétiques
  • Animations UX centrées sur le contenu

Animations UX pour les retours visuels

Les retours visuels sont des éléments importants qui permettent de faire comprendre à l’utilisateur qu’il progresse sur sa recherche, que ces actions ont du sens, quelles sont comprises et qu’elles aboutissent réellement à quelque chose.

Il n’est pas nécessaire que ces retours visuels soient forcément animés mais cela permet de rendre l’expérience utilisateur plus fluide, vivante et incite le visiteur a généré plus d'interactions sur votre site.

Le risque serait d’en faire trop en terme d’animation, si elles sont trop frivoles par exemple, cela pourrait faire perdre en sérieux l’image de votre site même si tout dépend du ton de votre marque.

Voici une liste d’éléments sur lesquels vous pouvez animer votre site :

  • Lien avec des effets de survol
  • Ouverture / fermeture d'un menu avec effet d'apparition/disparition
  • Bouton avec effet de survol
  • Notifications de succès/échecs avec effet d'apparition/disparition
  • Champ de formulaire : modification du graissage et/ou couleurs

Formulaire Google

Formulaire avec animation UX sur retour visuel Google
Animation UX à chaque clic sur un formulaire pour savoir où l'on se situe

Les formulaires Google sont un parfait exemple de la gestion des retours visuels sur les actions d’un utilisateur. Elles sont jouissives et efficaces et donnent des informations utiles sur notre progression (erreurs, position, recommandations etc...).

Page d'achat Apple

Page d'achat Apple

Ici, à chaque validation d’une caractéristique, la page scrolle automatiquement à l’étape suivante, on remarque également la présence de retours visuels sur les éléments validés, survolés et non-sélectionnés.

Tout est mis en œuvre pour garder l’utilisateur concentré sur ce qui compte et éviter de l’inonder d’informations par rapport aux caractéristiques qu’il aura à choisir.

Animations UX décoratives

Il est possible d’ajouter des animations purement esthétiques sur son site pour animer le contenu de vos pages même si elles n’apportent rien à la compréhension du contenu, elles peuvent rendre plus agréable la navigation sur une page et rendre son expérience unique.

Homepage Comet
Sur la homepage le cercle blanc fait le tour de la planète bleue de manière infinie

Ces animations peuvent être inspirées de l’identité visuelle de votre marque, comme ici avec Comet, sur lequel on peut observer des planètes et fusées s’animer, ce qui vient correspondre à l’esprit “Univers/Planète/Cosmos” de la marque.

Cependant, il est très important que ces animations restent secondaires dans le but d’éviter de distraire le visiteur du réel contenu, ce qui pourrait être fatale pour vos conversions.

On les retrouve souvent en fond de page et détacher des blocs de contenu.

Ces animations centrées uniquement sur l’esthétique perdent, également tout leur intérêt si elles ont un impact trop important sur le temps de chargement de vos pages ou si elles viennent créer des bugs qui empêchent la bonne lecture/compréhension de celles-ci.

Sur SDLV par exemple, l’animation html au début de notre page service se lance uniquement une fois tous les éléments de la page chargés.

Animations UX centrées sur le contenu

Les animations centrées sur le contenu influent directement sur la prise d’informations et la volonté de vos utilisateurs, ils permettent d’accélérer et faciliter la compréhension de l’information.

Correctement utilisées, elles permettent de fortement réduire le scroll de la page et maintenir un niveau de concentration élevé sur le contenu important de vos pages.

On retrouve ce type d’animation à travers des carrousels ou encore des vidéos, gifs et animations html explicatives.

Animations UX explicatives

Dans l’exemple d’un outil de maquettage tel qu’Adobe XD où un nombre important de fonctionnalités complexes sont à expliquer, ils parviennent à tout regrouper au même endroit grâce à une animation html qui réagit au scroll.

On peut dire que cette section développée sur-mesure est réussie car elle rend l’explication du produit plus simple, plus claire et attractive à travers 3 thèmes dans 6 “chapitres” différents.

Des boutons de commandes sont visibles sur le côté pour passer d'une section à l'autre et des titres bien clairs sont affichés pour chaque section.

Ce type d'animation complexe réalisée en partie en HTML, nécessite tout de même l'intervention d'un intégrateur ou d'un développeur front end.

Animation UX du contenu via carrousel

Le carrousel (ou slide) est l’une des méthodes les plus fréquemment utilisée pour présenter plusieurs sections de contenu au même endroit.

Elle reprend généralement le mécanisme bien connu de la diapositive en superposant plusieurs blocs de contenu différents.

Si vous vous servez d’un carrousel, vous devez veiller à bien rendre visible les commandes pour naviguer à travers vos volets d’informations, que ce soit sur format bureau ou mobile.

Dans le cas contraire, vos utilisateurs peuvent passer à travers des informations importantes qui aurait potentiellement pu faire changer d’avis (positivement ou non) le visiteur sur vos produits.

Le site d’Octobre Editions a par exemple abandonner leur carrousel de présentation des actualités et collections sur l’accueil, pour laisser place à une page simple présentant les actualités dans des blocs distincts et clairs, avec des titres et liens bien apparents à l’instar de la page d’accueil du site d’Apple par exemple.

Page d'accueil Octobre Editions
Page d'accueil Octobre Edition présentant des commandes fondues sur les photos et ne donnant aucune information sur la quantité d'informations présente sur la page
Page d'accueil Octobre
Nouvelle page d'accueil Octobre sans carrousel

5 exemples de gestions d'Animations UX

Hotjar

Sur la page d'accueil d’hotjar on observe une animation UX centrée sur le contenu représentée ici par un carrousel qui fait preuve d’une efficacité redoutable dans ce cas de figure.

Immédiatement après la mise en contexte via le titre et/ou phrase d’accroche, il permet de faire un tour de l’outil en entier en présentant 6 fonctionnalités différentes sur une surface aussi réduite qu’une seule section de contenu.

Les commandes de navigations sont claires, correctement identifiées et catégorisées par thèmes.

Chaque appels à l’action important sont accompagnées d’animations UX basées sur les retours visuels (ou feedback) avec les effets de survol qui conviennent :

  • Nuance de la couleur d'accentuation
  • Animation horizontale des flèches présents sur les boutons
  • Modification des graissages de polices

Apple

Sur le site d’Apple leurs pages sont systématiquement séparées en deux catégories différentes.

Présentation iPhone 12
Distinction de deux pages différentes, une pour découvrir le produit et une autre pour l'acheter (En savoir plus, Acheter)

Le premier type de page (découverte) a pour but de présenter les produits en impressionnant le client, on est réellement dans de la démonstration.

On y retrouve une quantité importante d’animations purement esthétiques, n’apportant rien de supplémentaire à la compréhension du contenu ou des caractéristiques.

A la fin d’un parcours complet de ce type de page, le visiteur est généralement émotionnellement investi (surprise, émerveillement etc..), le but restant d’amorcer une intention d’achat.

Ces animations sont en générales bien réalisées, mais ici, aucune modération n’est utilisée de la part d’Apple quant à l’utilisation de fichiers volumineux et animations lourdes pour présenter leurs produits.

L'animation la plus connue et très souvent associée à Apple et celle où l’on voit s’animer l’un de leur produit au fur et à mesure que l’on progresse sur la page grâce à une vidéo qui progresse en fonction de votre niveau de scroll.

Sur leur page de présentation de l’IPhone 12, beaucoup d’animations ne se chargent pas (ou en différée) pour les connexions avec de faibles débits, tout comme de nombreuses images volumineuses.

Utilisation d'une animation trop lourde pour illustrer la magie d'Apple qui prive l'utilisateur d'informations potentiellement importantes

Beaucoup est attendu d’une entreprise tel qu’Apple encore plus que les autres notamment sur le visuel, à l’instar de leurs produits qui résulte comme à leur habitude à une expérience unique, ce type de page prend tout son sens dans le contexte de la marque de luxe que représente Apple.

Cependant sur leur page de vente, aucune animation uniquement esthétique n’est utilisée, les images secondaires sont fortement compressées et tout est simplifié pour éviter de distraire l’utilisateur et concrétiser son intention d’achat.

Page d'achat de l'Iphone
Affichage simple d'un téléphone avec informations sur la sélection des caractéristiques simple en noir sur blanc.
Informations complémentaire page d'achat Iphone
Utilisation d'image simple et légère en dessous de la section d'achat
Carrousel d'image page d'achat Apple
Le carrousel d'image comporte ici des images très simple, fortement compressées et presque pixelisées pour ne pas impacter le temps de chargement de la page.

Stripe

Sur le site de Stripe on retrouve une quantité justement dosée d’animations esthétiques venant détendre l’atmosphère assez sérieuse que pourrait avoir une une entreprise de paiement autrement que par les couleurs vives de leur identité visuelle.

Les animations restent donc au second plan, sont assez passives et il ne tombe pas dans le cliché du site internet “moderne” d’une entreprise tech sur lesquels on retrouve des animations d’apparitions un peu partout par exemple, qui peuvent très vite devenir lourde.

Animation html terminal de paiement Stripe
Animations html permettant de comprendre comment fonctionne leur terminal de paiement
Animations html permettant de montrer un exemple d'intégration de leur application sur un site internet
Animation html et js d'un globe interactif pour illustrer l'aspect internationale de leur application

JetBrains

Page d'accueil JetBrains
Aucune animation passive présente sur le site, seule des animations liées aux retours visuels sont installées

Sur le site de JetBrains, on retrouve une page exempt de toutes animations superflues et il se contente d’animations UX informatives centrées sur les retours visuels, les appels à l’action et interactions sur le menu.

Menu du Site JetBrains
Au survol d'un élément du menu principal un sous-menu apparaît, au survol d'un lien : graissage de la police et apparition d'une icone. Ecxeption pour les 20ans de l'entreprise une animation est présente sur le logo du menu

Tout le mouvement sur la page est créé grâce à la disposition des blocs du site, qui viennent donner un peu plus de vie à la page avec l’utilisation d’éléments graphiques reprenant l’identité visuelle de la marque.

Audemars Piguet

Le site d’Audemars Piguet est un autre bon exemple de marque de luxe ayant pour but d’impressionner le client.

Page d'accueil Audemars Piguet

On y retrouvait précédemment un nombre incalculable d’animations aussi impressionnantes les unes que les autres pour présenter leurs produits.

Cependant ne représentant aucune pertinence en terme d'explication du contenu ou du contexte, l’aspect purement esthétique n’est pas suffisamment efficace pour faire passer le client à l’achat ou à prendre contact.

Une grosse refonte de leur site a eu lieu, supprimant la totalité de ces animations esthétiques sur l’accueil, en adoptant à l’instar de la page d'Accueil d’Apple des sections de contenu simple avec un titre, une courte description et un lien bien identifié.

Seul les animations classiques liées aux retours visuels sont présentes :  effets de survol, retour visuel après clic, notifications succès/échec…

  • Dois-je ajouter des animations UX sur mon site ?

    Bien qu’on observe des degrés d’utilités différents pour chaque types d’animations, elles doivent garder un rôle secondaire. Il faut éviter d’en faire trop, la simple mise en place d’animations centrées sur les retours visuels peuvent entièrement suffirent. Sur les pages de vente des sites marchands les plus populaires, les animations liées aux feedback sont les seuls visibles.

  • Combien peut me coûter la mise en place d’animations UX ?

    Tout dépend du type d’animations utilisé, les animations liées aux retours visuels sont en générales proposées sans surcoût conséquent voir nul par la plupart des prestataires. Si vous êtes sur Wordpress, les animations les plus populaires sont proposées par des plugins ou thèmes Wordpress gratuit et/ou payant. Pour des animations plus avancées vous allez devoir faire appel à un développeur front-end ou un intégrateur web.