Le guide complet de conception d'animations Web

Croyez-le ou non, vous n'avez pas beaucoup de temps pour convaincre les visiteurs de votre site de rester. Votre fenêtre est en réalité beaucoup plus courte que vous ne le supposez.

En substance, il faut juste secondes 0.05 après le chargement de votre page pour permettre aux visiteurs de se faire une opinion. Plus précisément, cela se traduit par des millisecondes 50. Étonnamment court, non?

Ok, certains vont partir. Mais d'autres pourraient choisir de rester.

Vient ensuite l'étape de l'impression, qui ne dure que 10 secondes. Si votre site ne parvient pas à en gérer un solide, vous perdrez l'essentiel de votre trafic avant même de commencer le processus de conversion. Ils viennent juste de procéder pour frapper le dos ou fermer les boutons.

Et si vous espériez les récupérer, voici la dure vérité. 88% d'entre eux ne sont pas susceptibles de retourner sur un site Web après une mauvaise expérience.

Mais attendez une minute. À qui appartient-il de conserver le trafic Web une fois qu'ils atterrissent sur le site?

Ok, bien sûr, il est naturel de blâmer le gestionnaire de contenu du site. Et vous avez peut-être raison. Mais seulement en partie.

Il s'avère que tout commence avec le concepteur de sites Web. En fait, une étude portant sur un large éventail de commentaires des consommateurs a révélé que 94% des négatifs étaient liés à la conception.

Qu'est-ce que cela signifie?

Pour commencer, il n'y a pas moyen d'y échapper. La responsabilité principale incombe à vous. En plus de mettre en œuvre toutes les meilleures pratiques de conception que nous avons abordées dans nos articles précédents, vous devez porter un chapeau de relations publiques et prendre en compte les éléments qui se connectent efficacement au trafic.

Je parle de choses comme des animations Web.

Et pourquoi suggérons-nous précisément cela?

Eh bien, c'est quelque chose que je vais révéler sous peu. Ce guide vous guidera à travers tous les aspects critiques des animations Web. Mais d'abord, explorons les bases…

Les bases des animations Web

Imaginez votre personnage de dessin animé préféré se promenant sur l'écran. Ou peut-être que le logo de votre téléphone danse autour de l'écran lorsque vous redémarrez l'appareil. Qu'est-ce qu'ils ont en commun?

Eh bien, ce sont deux exemples basiques d’animations.

L'animation se produit essentiellement lorsqu'un élément immobile est «amené à la vie». Il commence alors à présenter une forme de mouvement.

Nous ne savons pas exactement quand cette pratique a commencé. Mais nous avons une idée que le premier film d'animation dans l'histoire a été faite il y a plus d'un siècle. Depuis lors, la tendance s'est considérablement développée grâce aux progrès technologiques.

Cependant, une chose est restée constante: les principes de l'animation. En fait, Ollie Johnston et Frank Thomas, de Disney, ont écrit plus tard à leur sujet dans leur livre:L'illusion de la vie: Animation Disney". Voici la liste complète:

  • Appel
  • Dessin solide
  • Exagération
  • Etat du moment
  • Action secondaire
  • Arc
  • Ralentir et ralentir
  • Suivi et chevauchement des actions
  • Action directe et pose pour poser
  • Mise en scène
  • Anticipation
  • Squash et stretch

Les douze fournissent encore le cadre pour la conception des animations actuelles, y compris celles publiées sur le Web sous forme de vidéos, WebGL, SVG, CSS et GIF.

Désormais, les animations Web peuvent être aussi simples qu'une mise en surbrillance qui apparaît lorsque vous survolez une lettre avec une série complexe de vidéos en plein écran comportant plusieurs couches. En d'autres termes, vous pouvez adopter une approche subtile ou choisir de vous lancer dans des animations dominantes qui appellent l'attention. Cela dépend complètement de la situation.

Et cela soulève la question suivante: quand êtes-vous même censé utiliser des animations?

Quand faut-il utiliser des animations Web?

Bien sûr, ils sont mignons. Et ils seraient certainement des ajouts intéressants à la mise en page de votre site.

Mais tu sais quoi? Leurs niveaux d'efficacité ultérieurs sont totalement différents. Il va donc sans dire que les animations ne conviennent pas à tous les projets de sites Web. Et surtout, ce serait une mauvaise idée de les adopter au hasard.

Il se trouve que 46% de consommateurs en ligne juger de la crédibilité d'un site en fonction de son attrait visuel et de son esthétique. Vous ne pouvez simplement pas vous permettre de le faire avec un framework d'animation mal conçu. Dans le même temps, il serait malheureux de laisser passer de manière persistante des opportunités de conversion en or en ne capitalisant pas sur les animations.

Alors, quand devriez-vous les exploiter?

Eh bien, voici la chose. Les animations Web sont principalement idéales lorsque vous avez besoin d'améliorer la convivialité en attirant peut-être l'attention ou en aidant les utilisateurs avec le processus de navigation.

Comment?

Généralement, il faut secondes 2.6 pour que les yeux des visiteurs atterrissent sur la section du site Web qui influence principalement leur première impression. Utiliser habilement une animation peut toutefois accélérer les choses en attirant immédiatement leur attention sur les zones les plus critiques du site.

Les animations sont également utiles lorsque vous cherchez à diriger les utilisateurs à travers l’entonnoir de conversion. Un formulaire animé, par exemple, constituerait une stratégie judicieuse pour créer des listes de diffusion. Ensuite, lorsqu’il s’agit du processus d’achat, vous pouvez envisager d’intégrer des vidéos. Ils ont été prouvés pour convaincre 73% des acheteurs procéder et acheter un produit ou un service.

Enfin, vous pouvez utiliser des animations Web uniquement à des fins esthétiques. Une animation décorative fluide et transparente peut améliorer considérablement l'attrait visuel global, puis établir par conséquent un lien affectif entre les utilisateurs et l'interface. Et c’est ainsi que vous augmenterez progressivement les niveaux d’engagement des utilisateurs.

Outils d'animation Web

Prêt à commencer à créer des animations Web? Parfait! Mais par où devriez-vous commencer?

Eh bien, pourquoi ne pas chercher un outil robuste pour convertir vos idées en animations réelles? Heureusement, il existe une vaste gamme d'options sur le Web, qui sont bien optimisées pour différents utilisateurs et différents types d'animations. Ce que vous choisissez pour vos projets dépend de vos compétences, de vos objectifs principaux, de votre budget et du type de site sur lequel vous travaillez.

Cela dit, voici quelques exemples remarquables, chacun ayant son propre cas d'utilisation:

  • js
  • Animation de lignes 3D avec Three.js
  • js
  • Flubber
  • Animation de couleur
  • jqClouds
  • Scrollissimo
  • Cel-animation
  • js
  • js
  • Animation CSS3
  • Transformer quand
  • js
  • Rellax
  • A
  • js
  • ScrollTrigger
  • Scrollanim
  • js
  • js
  • js
  • js
  • Foxholder
  • Animatelo
  • css
  • Animista
  • js
  • CAAT
  • AnimateMate
  • js
  • Stylie
  • GFX
  • js
  • js
  • js
  • jQuery DrawSVG
  • Ramjet
  • Coup
  • Mélanger
  • css
  • css
  • js
  • Ceaser
  • CSSynth
  • Safran
  • CSShake
  • css
  • js
  • fusée
  • Transit
  • css
  • js
  • Popmotion
  • GSAP de GreenSock
  • js
  • js
  • CSS Animate
  • C'est mardi
  • Sournois
  • js
  • js
  • js
  • js
  • js
  • Attendre! Animer
  • Motion UI
  • js
  • Peintre de lignes paresseux
  • js
  • js
  • js
  • AnijS
  • js
  • Animations Magiques
  • css

Conception d'animations Web

Effets de survol

Les animations en survol sont sans aucun doute parmi les plus simples du Web. Ils s'animent et mettent en évidence des éléments sélectionnés lorsque le pointeur les survole. L'animation elle-même peut se présenter sous différentes formes, comme un changement de taille ou de couleur.

Le truc ici est d’adopter les effets avec parcimonie. Sinon, vous risquez de mettre en évidence un trop grand nombre d'éléments, ce qui risquerait de désorienter les utilisateurs.

Il est également conseillé de maintenir une forme de cohérence avec la méthodologie sur tout le site. Par exemple, si les boutons de votre page d’accueil passent du vert au rouge, utilisez le même cadre pour des surlignages supplémentaires dans d’autres pages Web.

Animations de fond

L'intégration d'une animation en arrière-plan est une stratégie efficace pour ajouter de l'excitation et de la vitalité à votre page Web sans nécessairement interférer avec l'accent principal. Vous pouvez utiliser n'importe quoi, des vidéos aux images subtiles qui se déplacent de manière séquentielle.

La meilleure approche consiste à garder les choses structurées et simples. Si vous choisissez d'intégrer une vidéo, raccourcissez-la en conséquence et conservez une boucle adaptée à votre site. Ensuite, assurez-vous que les mouvements sont suffisamment subtils pour attirer l'attention sans submerger les utilisateurs.

Animations de style GIF

Si vous êtes particulièrement intéressé par une animation extrêmement facile à configurer, un GIF est utile. Un exemple typique peut être quelque chose comme un texte décalé ou un clown souriant intégré dans la mise en page de votre contenu.

Tout ce que vous avez à faire est de trouver une idée solide, d’obtenir une vidéo ou une image pertinente, puis de la convertir en GIF parfait en utilisant un logiciel de montage approprié. Le téléchargement de la création résultante au format GIF génère une animation de type vidéo qui se charge aussi vite qu'une petite image.

Animations de transition

Les animations de transition sont utilisées pour introduire la vigueur lorsque les utilisateurs se déplacent d’une section du site à une autre. Elles ressemblent aux animations de diaporama qui apparaissent lorsque vous passez d’une diapositive à la suivante.

Générique de l'illustration: Shutterstock

Pour un résultat parfait, assurez-vous que les animations sont fluides et cohérentes sur tout le site. Ils devraient également être suffisamment courts pour ne pas retarder le processus de transition.

Chargement des animations

Le fait est- 47% de consommateurs en ligne attendez-vous à ce que vos pages Web se chargent en au moins 2 secondes. Si vous n'y parvenez pas, chaque seconde supplémentaire correspond à 7% de conversions en moins.

Aller par le temps de chargement moyen actuel de 22 secondes, il est assez évident qu'il est assez difficile de répondre aux attentes de 2. Cependant, vous pouvez récupérer une partie importante du trafic en les occupant avec des animations tandis que d'autres éléments du site continuent à se charger.

Concentrez-vous sur la création de composants simples et suffisamment légers pour charger presque immédiatement le trafic est redirigé sur votre site. Ils devraient être conçus de manière à présenter systématiquement aux visiteurs la marque et le thème général du site Web.

Animations déclenchées par le défilement

Des études de suivi oculaire ont montré que les utilisateurs du site Web dépensent environ 57% de leur temps au-dessus du pli. Mais, il s'avère que beaucoup d'entre eux sont disposés à faire défiler l'écran tant que vous fournissez une structure et un mécanisme de conception favorables.

Et c’est précisément là que les animations déclenchées par le défilement entrent en jeu. Elles passent immédiatement à l’action, puis les utilisateurs se mettent à défiler pour créer l’illusion d’une page lisse et sans fin. C'est un moyen judicieux d'éliminer les transitions qui décourageraient autrement le défilement.

Animations de navigation et de menu

Soyons honnêtes. Les options de menu occupent une quantité d'écran considérable, en particulier sur les sites dynamiques avec plusieurs niveaux de sélection. Heureusement, vous pouvez utiliser les animations pour masquer les options, puis les révéler uniquement lorsqu'un utilisateur clique sur les boutons correspondants ou les survole.

Ce type d'animation rationalise et simplifie également le processus de navigation en comprimant la structure entière dans des options de menu connectées visuellement. La structure doit être conçue avec des segments de sous-menu qui apparaissent systématiquement chaque fois qu'un utilisateur clique ou pointe sur les options de menu superposées.

Galerie et diaporamas

Peut-être sans surprise, le durée d'attention moyenne d'êtres humains est 8 secondes - au moins selon une étude récente menée par Microsoft. Même un poisson rouge est capable de rester attentif plus longtemps qu'un individu typique. Par conséquent, vous pouvez parier que la plupart des visiteurs de votre site ne seront pas assez persistants pour cliquer sur tous les éléments de votre galerie.

Mais devinez quoi? Vous pouvez utiliser intelligemment les animations de galeries et de diaporamas pour présenter automatiquement de nombreuses images, sans forcer les utilisateurs à les parcourir.

La chose la plus importante ici est la durée d'affichage de l'image. Les affichages courts avec des transitions rapides donneraient l'impression d'être pressés, alors que les affichages longs avec des transitions lentes s'avéreraient ennuyeux et lents. Dans cet esprit, concevez la disposition générale de manière à afficher chaque image pendant environ 5 à 8 secondes, avant de passer rapidement à la suivante.

Conclusion

Dans l’ensemble, vous devriez analyser les animations en fonction de l’amélioration ultérieure de leur expérience utilisateur. Un bon lecteur devrait soit déclencher une connexion émotionnelle entre les utilisateurs, soit faciliter le processus de navigation. Un parfait, en revanche, devrait pouvoir facilement atteindre les deux en même temps.

Pour ce faire, prenez le temps d'évaluer de manière critique tous les paramètres pertinents lors de la conception et de l'intégration d'animations dans votre site. Et rappelez-vous: restez simple, léger et bien aligné avec votre marque.

image d'en-tête avec la permission de Alfrey Davilla | vaneltia

Bogdan Rancea

Bogdan est un membre fondateur d’Inspired Mag, ayant accumulé près de 14 années d’expérience 6 au cours de cette période. Dans ses temps libres, il aime étudier la musique classique et explorer les arts visuels. Il est également obsédé par les fixies. Il possède déjà 5.