Des animations ou pas d’animation, telle est la question lorsque vous créez un site internet. Ceux qui sont pour vous diront que cela dynamise votre site, donne du mouvement et permet donc d’offrir une meilleure expérience à vos visiteurs. En plus de cela, c’est une des grandes tendances du web design, ce qui veut dire que les internautes s’attendent à les trouver sur vos pages. Quant aux détracteurs, ils diront que les animations distraient les visiteurs du sujet principal de votre site et qu’elles ne sont pas assez professionnelles.

Alors, comment trancher ? En réalité, il ne s’agit pas de choisir un côté ou l’autre, mais de faire des compromis. Les animations peuvent apporter beaucoup à votre site si vous les utilisez de la bonne façon. Elles doivent être utiles à votre design, tout en servant l’objectif principal de votre page. Comment fait-on cela ? C’est ce que nous allons voir dans cet article. Découvrez ce qu’il faut faire, ou ce qu’il faut éviter lorsque vous ajoutez des animations sur votre site.

Apprenez les bases

Premièrement, vous devez savoir qu’il existe toutes sortes d’animations. Elles peuvent être subtiles, comme un léger mouvement du bouton, ou spectaculaires comme tout un arrière-plan. Vous pouvez les programmer pour réagir en fonction des actions de vos visiteurs ou pas. Elles peuvent s’appliquer à un tout petit élément ou à l’intégralité de votre page. En sachant tout ce que vous pouvez faire avec, vous pourrez choisir comment les utiliser.

Lorsque les designers de Wix utilisent des animations pour les sites et les Templates, ils les séparent en trois catégories :

• Les micro interactions : elles sont utilisées pour créer une légère interaction avec l’utilisateur lorsqu’il effectue une action (comme cliquer sur un bouton). Vous pouvez les reproduire avec la boîte de survol.
  

• Les transitions et comportements des pages : elles sont utilisées pour faciliter la navigation d’une page à une autre et d’une section à une autre.
  

• Les décorations : elles permettent de donner du peps à vos pages, comme les effets parallax.

Faites preuve de modération

En animation, comme pour toutes les bonnes choses de la vie (le chocolat et La Casa de Papel y compris), il faut savoir faire preuve de modération. Évitez de surcharger vos pages en mettant tous vos éléments en mouvement. Premièrement, car en créant un site trop lourd, vous détournez l’attention de vos visiteurs, mais ils peuvent aussi se sentir perdus au milieu de toutes ces actions. Ce qui nous amène à la deuxième raison : cela risque d’impacter grandement la performance de votre site. Pour faire mieux, faites simple. En gardant votre design clair, vous offrez une meilleure expérience de navigation.

Une animation = une mission

Voici la règle à suivre pour s’assurer de bien utiliser les animations : elles doivent remplir une mission. Chaque animation doit avoir un objectif précis – et un seul ! Voici quelques exemples :

• Guider vos visiteurs en leur suggérant où cliquer ou comment faire défiler la page.
  

• Raconter une histoire en faisant apparaître des éléments les uns à la suite des autres.
  

• Montrer le résultat de votre produit ou service.
  

• Casser le rythme du site avec une pointe de mouvement.
  

• Créer une atmosphère particulière en accord avec votre entreprise, comme pour une boutique en ligne de vêtements pour enfants.

Ce qui doit être animé (ou pas)

Certains éléments sont presque conçus pour être animés, d’autres pas vraiment. Concentrez-vous sur les bonnes parties de votre site :

• Les éléments qui déclenchent une action (un bouton, un lien, une image liée à une autre page).
  

• Les éléments qui donnent une direction (une flèche, un arrière-plan qui défile).
  

• Les barres de chargement.
  

• Les éléments dont le but est d’attirer l’attention (une fenêtre pop-up, une icône lorsque vous recevez un nouveau message, un bouton pour compléter un achat).

À l’inverse, vous voulez éviter toutes les situations où l’animation pourrait avoir un impact négatif sur le but même de votre élément. Par exemple, un texte : en l’animant, vous le rendez moins visible, vous desservez donc sa fonction première. De même pour un formulaire, en ajoutant des animations à ce niveau, vous distrayez les visiteurs alors qu’ils sont en train d’accomplir une action sur votre site.

Les animations pour simplifier votre contenu

Une excellente stratégie est d’utiliser les animations pour rendre une information plus claire sur votre site. Supposons que vous souhaitez expliquer à vos visiteurs comment fonctionne votre entreprise de déménagement. Vous pouvez le faire avec un long texte explicatif, ou plus simplement, avec des éléments visuels qui s’animent au fur et à mesure. C’est ce qu’on appelle la technique d’onboarding. En combinant quelques lignes de texte avec des images qui s’animent, vous créez un contenu simple et facile à mémoriser pour vos visiteurs. C’est à la fois esthétique et informatif, le combo gagnant pour tous les designers.

Pensez à votre public

Il est toujours très important de vous adapter à votre public cible, d’autant plus lorsqu’il s’agit d’animations. Quels sont leurs goûts ? Pourquoi visitent-ils votre site ? Sont-ils à la pointe de la technologie ? Ces réponses vont vous guider dans vos choix. Pour schématiser un peu (très légèrement), si vos clients sont des octogénaires qui se rendent sur votre site pour avoir des informations légales, et qui plus est, naviguent sur Windows XP, les animations n’ont peut-être pas leur place sur votre page.

Réfléchissez à tout cela avant de vous lancer. Si toutes les cases sont cochées et que vos choix sont faits judicieusement, vous aurez un site magnifique, animations ou pas ;).

Prêt à faire sensation sur le Net ? Créez un superbe site internet dès aujourd’hui avec Wix !