Pourquoi utiliser les animations sur un site ?

Depuis ses débuts, le monde du web a toujours voulu rendre animé ses interfaces. Les développeurs de l’époque avaient compris que le web permettait ce que le papier ne pouvait pas, c’est-à-dire pouvoir animer les éléments d’une page.

Pourquoi utiliser les animations sur un site ? Cliquez pour tweeter

Le Flash a installé cette notion d’animation jusqu’à rendre certains sites aussi interactifs qu’un jeu vidéo. Depuis, le Flash est mort et nous avons aussi réduit le nombre d’animation sur un site. Aujourd’hui encore, sur de nombreux sites il n’y a que les boutons qui changent d’états, hormis ça et les liens, rien n’est vraiment différent de la lecture d’un e-book ou d’un pdf.

Maintenant que nous maîtrisons les différents langages de codes pour rendre une interface aussi interactive que l’on souhaite, il faut user de ces principes d’animation qui ne feront qu’améliorer l’expérience utilisateur.

Le mouvement, c’est surtout humain

N’avez-vous jamais cliqué sur un bouton plusieurs fois de suite, simplement parce que vous aimiez l’animation que ce dernier entraînait ?

Source : Dribbble

 

Par définition notre environnement est en perpétuel mouvement, donc nos yeux et notre cerveau sont plus habitués au mouvement plutôt qu’à une image statique.

Si vous fixez un paysage quasi désert, sans personne, ni vent, le moindre mouvement va forcément attirer votre regard et vous allez plus facilement le discerner du reste.

De plus notre cerveau s’est habitué aux mouvements répétitifs et instinctifs, le simple fait que notre terre a une force de gravitation, tous les mouvements qui s’y passe sont régis par cette même loi d’attraction.

Lancez une balle en l’air, vous savez très bien quel comportement elle va avoir : retomber.

Plantez un clou avec un marteau, en fonction de la vitesse et la force que vous emploierez, vous pourrez facilement juger du comportement qu’auront les deux objets lors de leurs interactions.

L’animation des corps est devenue naturelle chez nous et cela constitue notre base de toute observation.

Et ça, Walt Disney l’avait bien compris, il a aussi compris qu’en amplifiant/modifiant l’allure des mouvements, on pouvait donner une touche émotionnelle. Et aussi que la justesse des animations donneraient de la cohérence à son histoire. C’est en partie pourquoi  les films d’animations de Walt Disney sont devenus des histoires inoubliables.

Source : The illusion of life from cento lodigiani

Pour rendre la navigation d’un site mémorable, il faut ajouter de l’animation aux interactions en leurs donnant du sens, de l’émotion et inciter l’action.

Une interface sans design d’interaction sera difficile à comprendre et ne sollicitera aucun intérêt particulier pour l’utilisateur, un peu comme si l’on regardait un film Disney avec 1 image toutes les 30 secondes.

Voici 5 façons d’utiliser le design d’interaction afin d’enrichir son interface.

Donner un feedback à l’utilisateur

Comme dans la vraie vie, les objets répondent à nos sollicitations. On appuie sur un interrupteur > la lumière s’allume. On tourne une poignée > la porte s’ouvre. On pousse un tiroir > il s’ouvre automatiquement grâce à un ressort (ici le feedback c’est la résistance du tiroir lors de la poussée) etc. On peut utiliser différents moyens pour donner cette réponse à l’action de l’utilisateur : un bruit, un mouvement …

Source : Dribbble

Source: Dribbble

Afficher l’état du système

Comme vu plus haut, différents états sont possibles, et l’interaction entraîne souvent l’action donc minimum 3 états : initial, en cours, fini. Celui qui nous intéresse c’est évidemment celui “en cours” pendant que l’action se passe, l’utilisateur lui est inactif ou en attente.

 

Source : Dribbble

 

Guider et faciliter l’utilisation

“Une image vaut 1000 mots, une animation en vaut le triple.”

L’explication par l’animation c’est 0 effort pour l’utilisateur pour une compréhension dans le confort. Montrer l’action à faire, anticiper l’interaction, afficher des guides visuels, cela facilite et encourage l’action de l’utilisateur.

Source : Dribbble 

Source : Dribbble

Attirer l’attention et provoquer l’interaction

Le regard se tourne toujours vers la lumière, le mouvement et le son. Le design d’interaction joue ce rôle important de guider le regard de l’utilisateur vers les points importants du parcours. Un texte mis en valeur, une image qui s’affiche progressivement, cela va créer un décalage avec le contexte/fond et va permettre de mettre en valeur l’élément voulu.

 

 

Donner du sens aux interactions

La navigation est un mélange complexe entre des actions qui entraînent des réactions qui elles-mêmes modifient l’interface et les informations présentes, c’est une chaîne continue avec différents points d’entrée. Généralement dans une navigation, on ouvre des pop up, on déploie des encarts, on rempli des champs de formulaire, on clique sur des boutons, on drag and drop des éléments, on fait défiler des images/textes, on scroll, etc. Afin de donner de la cohérence et de la continuité dans ces actions, le design d’interaction a une place importante dans ces transitions.

Source : Dribbble

Apporter de l’émotion

Les animations ont cette force de pouvoir provoquer des sentiments à l’utilisateur, on connaît tous un GIF qui nous a fait rire. Le design d’interaction fonctionne de la même façon : une animation courte basée sur des principes d’animation courants et humains, à la façon du dessin animé.

Source : Dribbble

Source : Dribbble

Articles sources :

The principle of UX choreography 

Transitional interfaces

Smart transitions in User experience design

Image de couverture source : tandemseven