À l’heure de la vidéo, des gifs et des animations, le webdesign dégaine aussi ses armes : les effets dynamiques ! Bien utilisés, ces derniers fluidifient la navigation et accompagnent le parcours d’achat des visiteurs.
Cependant, 88 % des utilisateurs évitent de retourner sur un site web après une mauvaise expérience de navigation. Tandis qu’optimiser l’expérience utilisateur par le design et l’ergonomie permet d’augmenter votre taux de conversion jusqu’à 400 %.
Comment utiliser les animations pour améliorer le design, sans pénaliser la navigation ? Découvrez nos conseils !
1. Réfléchir à chaque création d’animations
See the Pen
Exploring UI Animation #4 by mario s maselli (@mariosmaselli)
on CodePen.
Pour éviter de donner la migraine à vos visiteurs, posez-vous des questions sur la pertinence de l’animation, à chaque fois que vous souhaitez en ajouter une.
- A-t-elle un réel intérêt pour la navigation ?
- Va-t-elle accompagner l’utilisateur ?
- Ou possède-t-elle une vocation uniquement esthétique ?
Les effets dynamiques doivent toujours attirer l’attention sur un élément ou une information importante.
À cet effet, positionnez des animations dont le but est :
- Accueillir le visiteur
- Impliquer l’internaute
- Mettre l’accent sur une offre
- Ajouter une touche de modernité à votre site internet
Les animations peuvent également servir votre storytelling. La narration animée peut transmettre beaucoup d’informations et rendre votre histoire encore plus captivante.
Par exemple, si vous possédez un hôtel, vous pouvez ajouter un slider qui fait défiler des photos de votre établissement, des chambres et de l’extérieur. Vous pouvez aussi montrer des photos d’archives, durant sa construction.
Si vous vendez un produit technique, imaginez une animation qui démontre son processus d’utilisation ou d’installation.
Apprenez à créer des animations CSS grâce à notre tutoriel.
2. Utiliser les animations comme vecteurs de patience
See the Pen
SVG Loading icons by Aurer (@aurer)
on CodePen.
Les utilisateurs détestent attendre ! 40 % des internautes déclarent quitter une page si elle ne se charge pas en 3 secondes. Alors que, sur mobile, par exemple, il faut en moyenne 22 secondes pour charger complètement une landing page.
Sur ce point, les animations vous apportent une belle solution ! Une progress bar, un loader dynamique, l’affichage progressif du contenu… ces éléments divertissent l’utilisateur en attente. Poussez encore plus loin ces animations avec un décompte ou même le défilement de conseils. L’objectif est de conserver l’internaute jusqu’au chargement complet de la page.
À lire aussi : 10 ressources pour créer des animations CSS
3. Le hover : à utiliser avec modération
See the Pen
Button Hover Draw – CSS Only by Luke Meyrick (@lukemeyrick)
on CodePen.
Parmi les animations les plus utilisées sur un site internet, on retrouve le hover. Vous savez, ce mouvement qui accompagne le survol d’un élément (bouton, image, lien…).
S’il apporte de la fluidité à la navigation, il peut vite entraver l’expérience utilisateur en concentrant le regard sur une zone peu pertinente.
Ajoutez cet effet sur les éléments importants, comme les call-to-action qui accompagnent le parcours ou les vidéos de présentation qui aideront le visiteur à mieux vous connaître.
À lire aussi : 6 signes d’une mauvaise UX sur votre site
4. Les animations, pour guider la navigation
See the Pen
CSS Animation Form by Kyle T (@Ampix0)
on CodePen.
Vous voulez garder et fidéliser un visiteur ? Facilitez-lui la navigation ! Avec les animations placées au bon endroit, vous pouvez structurer le contenu de vos pages, ce qui permet de guider l’internaute.
Discrètement, les effets dynamiques attirent son attention sur un point stratégique du site (call-to-action, formulaire, page de vente…).
Afin de booster les conversions, utilisez une animation amusante plutôt qu’un pop-up classique. Le prospect sera plus enclin à cliquer sur le bouton ou à remplir un formulaire.
Par ailleurs, lorsque vous utilisez le défilement d’une page ou un changement de fond, vous indiquez au visiteur qu’il passe dans une rubrique différente. Cela l’aide à se repérer sur votre site internet. Il sait qu’il peut revenir à l’accueil, ou sur la page précédente, à tout moment.
De plus, s’il ressort du site avec un ressenti positif, car il a réussi à obtenir facilement les renseignements cherchés, il sera enclin à revenir.
À lire aussi : UX : 6 techniques de pro pour conserver l’attention de vos utilisateurs
5. L’importance du timing et de la durée
On l’a dit, le temps de chargement est un point de douleur important dans l’utilisation d’un site web. Si vous devez utiliser des animations pour faire patienter vos visiteurs, elles ne doivent pas allonger le délai d’attente des internautes.
La durée de l’animation doit être suffisamment lente pour être perçue, tout en étant rapide pour éviter l’impatience. Oui, c’est tout un art !
La vitesse optimale pour une animation se situe entre 200 et 500 millisecondes. Sur les appareils mobiles, elle est plutôt de 200 à 300 ms.
Dynamiques, mais pas agressifs, c’est la clé pour des effets positifs qui vont rendre l’utilisation du site plus agréable.
À lire aussi : 7 erreurs UX courantes à éviter
Étant donné qu’il n’est pas facile de juger par soi-même la durée, la qualité et le volume d’animations respectables, le mieux est de faire tester la navigation ! Demandez à vos collègues et proches de donner leur avis sur l’ergonomie du design et vous saurez si vous êtes sur la bonne voie.
Le cas échéant, n’hésitez pas à demander l’aide d’un webdesigner professionnel, sur Codeur.com, pour dynamiser votre site internet, sans entraver l’expérience utilisateur !
