L’animation UI n’est pas un outil à craindre. Il permet de fasciner les utilisateurs, allant du minimaliste aux restitutions détaillées. Utilisées dans un certain contexte, les animations ajoutent un sens à une interface utilisateur et offrent une interactivité immersive pour le visiteur. De plus, l’animation apporte une touche de subtilité, il peut apparaître comme un bon moyen de promouvoir un produit.
[su_spacer]
[Tweet « #UI #UX Animation UI – Ajouter un sens à une interface utilisateur »]
[su_spacer]
Animateur web, l’évolution.
Au cours des dernières années, l’animation UI a évolué en une forme plus diversifiée. Ce crédit va à l’introduction de l’amélioration du CSS3. Son avènement a apporté avec elle une toute nouvelle vague de propriétés dynamique (animation et transitions), ce qui rend assez facile son utilisation et permet aux concepteurs de créer des animations fluides.
Cela signifie également que les animateurs web peuvent enfin dire adieu aux animations JavaScript plus complexes. Après tout, JS a toujours coûté beaucoup de temps et de matière grise, que l’animateur UI préfèrent garder pour la conception d’une application web ou d’un site mobile.
En dehors de la compétence que @keyframes CSS3 et -webkit offrent, les animateurs web ont maintenant la possibilité d’accéder à une bibliothèque infinie de codes personnalisés. Les sites comme Github ou CodePen offrent un accès gratuit à une palette de codes qui peuvent être une bonne source d’inspiration, pour l’animation UI, mais aussi pour l’UX designer et le webdesigner.
[su_spacer]
Animation UI, les meilleurs pratiques et exemples
Nos esprits sont génétiquement créés pour détecter les mouvements dans notre environnement. Ce sens inné peut être mis à profit pour influencer et améliorer l’expérience utilisateur des visiteurs de nos sites web.
[su_spacer]
Naviguer vers l’inconnu
Pour créer une interface idéal, il ne faut pas compter sur l’intelligence de l’utilisateur pour comprendre comment se rendre à l’endroit où aller à partir de la page d’accueil, chercher plus d’informations sur le produit ou cliquer pour aller à la page désirée. Après tout, le but d’une interface utilisateur est d’agir comme une toile riche en information où l’information recherchée peut être facilement localisée. Voilà la raison pour laquelle il faut garder une cohérence dans la structure d’un site web.
Par exemple, l’utilisation du web nous a appris à regarder le bas des pages pour vérifier les conditions d’utilisation ou Politique de confidentialité. De même, quand nous voulons lancer une recherche dans un site web, notre regard flotte automatiquement voir même instinctivement vers la barre de recherche en haut à droite.
Cependant, une telle cohérence ne peut pas toujours être maintenue tout au long de la mise en page. Il peut y avoir certaines zones qui sont étrangères aux utilisateurs. Pour aider les utilisateurs navigué dans l’inconnu et avec peu ou pas de confusion, des balises de guidage ou des cellules d’informations doivent être placées.
Tels que dans cet exemple, la flèche qui indique le bas de la page, incite les utilisateurs à défiler vers le bas et d’explorer le reste du contenu.
[su_spacer]
Modification par l’utilisateur
Les visiteurs ne veulent pas être laissés dans l’obscurité, en essayant de comprendre ce qui change. Ils veulent être tenus au courant de toutes les modifications causées par leurs activités.
Pour ce faire, vous n’êtes pas obligé de les informer de leurs actions par le biais de pop-up. Au lieu de cela, vous pouvez créer des visuels significatifs pour indiquer des changements en raison de leurs activités.
L’exemple illustre une variété de différentes animations et transitions qui sont possibles via CSS3 et JS. Lorsque les utilisateurs recharges la page, une animation leur permet de comprendre que leurs actions à bien étaient prises en compte par le site internet. La transition donne des signaux sensoriels aux utilisateurs quand quelque chose ce charge, permettant la compréhension de l’animation mais aussi de rendre le temps moins long.
[su_spacer]
Conclusion
Une chose que les utilisateurs détestent est un changement implicite, surtout si elle est abrupte. Des changements soudains ont tendance à nuire à l’expérience utilisateur, puisque l’utilisateur ne sait pas ce qu’il vient de se passer et comment devrait-il réagir.
Par conséquent, le travail des UX designer et des animateurs UI est de fournir aux utilisateurs un indice pour les aider à comprendre ce qui se passe.
