L’art de l’animation sur le Web

Savoir quand utiliser des effets animés dans la conception Web de votre boutique est plus un art qu’une science. Poursuivez votre lecture pour découvrir les cinq contextes dans lesquels les animations améliorent l’expérience utilisateur globale de votre site Web.

L’expérience utilisateur est une considération importante pour garder les clients engagés sur votre site Web et avec l’expérience utilisateur vient le sujet de l’animation Web et des effets de transition. Le navigateur moderne nous permet de donner vie au Web en utilisant HTML, CSS et JavaScript.

À un certain moment, cependant, ces caractéristiques peuvent être excessives. Avez-vous déjà vu ces présentations PowerPoint qui semblaient avoir utilisé tous les effets de transition offerts par le logiciel? Une tendance similaire a commencé à émerger sur le Web. Ce n’est pas une question de pouvez tu le fais, mais devrait Tu le fais.

Que sont les animations?

Pour les besoins de cet article, les animations Web font référence aux différents effets de transition principalement effectués par CSS et parfois jQuery / JavaScript. Ces effets peuvent aller d’un simple fondu de couleur à un effet de zoom sur une image. Fondamentalement, il s’agit de tout changement stylistique d’un élément d’un état à un autre.

Les outils d’aujourd’hui nous permettent d’implémenter facilement des effets animés, mais l’essentiel est de savoir comment et quand les utiliser. Ajouter trop d’effets peut distraire l’utilisateur de son objectif final et peut également augmenter le temps de chargement de la page; qui peuvent tous deux épuiser la patience de votre utilisateur.

Épargnez les flocons de neige

Pensez aux sites que vous avez visités avec beaucoup trop d’animations. Tout d’abord, une fenêtre contextuelle apparaît sur votre écran vous invitant à vous inscrire à une newsletter. Vous fermez cette boîte uniquement pour constater que le site que vous visitez a des flocons de neige flottant sur l’écran pour promouvoir une vente d’hiver. Vous cliquez sur un produit et attendez sans cesse le chargement de la page (et de tous ses flocons de neige). Ceci est un parfait exemple de ce ne pas faire.

Quand devriez-vous utiliser des animations?

Les animations peuvent être la cerise sur le gâteau pour un beau site Web. Lorsqu’ils sont exécutés correctement, ils peuvent même améliorer l’expérience utilisateur globale de votre site Web. La clé est de vous assurer que vous les utilisez dans un but précis.

Voici cinq raisons d’ajouter une animation à votre boutique:

1. Pour se concentrer

L’effet de transition utilisé ici permet d’isoler l’image de chaque sport et de diriger l’attention de l’utilisateur.

En relation :  Qu'est-ce que le commerce mobile et quel est son avenir? Définitions, tendances et statistiques du M-Commerce

2. Pour indiquer

allusion

Cet effet de survol donne à l’utilisateur des informations supplémentaires sur l’échantillon de couleur en identifiant le nom de couleur spécifique.

3. Pour notifier

notifier

Cet effet de liste déroulante d’ajout au panier permet d’informer l’utilisateur qu’un article a été ajouté à son panier.

4. Réagir

réagir

Ce champ de formulaire réagit lorsqu’un utilisateur ajoute du texte et clique sur la flèche suivante en affichant une barre de progression sous le champ pour montrer qui grandit avec chaque soumission.

5. Orienter

orient2

Cette carte Google est un exemple parfait de la façon dont un simple effet de zoom peut améliorer la capacité de l’utilisateur à s’orienter sur la page.

Dans l’ensemble, si vous souhaitez utiliser une animation qui empêche de quelque manière que ce soit les utilisateurs d’accomplir ce qu’ils veulent sur un site, ne le faites pas. Si vous souhaitez ajouter une animation qui améliorera l’expérience globale de la visite d’un site Web, allez-y!

Bonne vente!
-Ashley Hebler, Moyens I/O


Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.