experience utilisateur

Expérience utilisateur : Animation d’un formulaire avec un Yéti

Darin Senneff, un développeur qui habite à Washington DC, nous propose un formulaire animé très intéressant qui peut considérablement améliorer l’expérience utilisateur. Vous pourrez trouver son site ici. Cet élément UX a d’abord été partagé sur codepen.io le 16 décembre 2017 puis a été partagé en Inde et fait aujourd’hui le tour du monde.

L’animation réalisée en SVG met en scène un Yeti au-dessus d’un formulaire. Quand vous tapez vos informations, email et mot de passe, il suit la progression du remplissage. Par exemple, lorsque vous complétez le mot de passe, le Yéti réagit en se cache les yeux.

Plus précisément un jeu subtil entre le dessin SVG du yéti et la captation des actions de l’utilisateur en javascript. Le Yéti est réalisé avec de multiples vecteurs qui réagissent en interaction avec l’utilisateur. C’est le code javascript qui permet de l’animer selon l’action de l’utilisateur (détection du type de champ du formulaire) de façon fluide et naturelle et embellit l’expérience utilisateur.

Améliorer l’expérience utilisateur grâce à son formulaire

De nos jours, même si l’on veut améliorer l’expérience utilisateur sur un site (qualité des visuels, travail éditorial, univers de marque…), l’étape du formulaire reste ennuyeuse.

Pour réaliser un formulaire qui fonctionne, vous pouvez à votre niveau, respecter certaines bonnes pratiques :

  • Ne collecter que les infos essentielles pour le client
  • Humaniser les messages d’erreurs
  • Créer une animation progressive qui signifie les étapes qui restent à accomplir et qui incite à passer à la suivante
  • Collecter les informations de manière détournée et séquencée sur le site

Cette animation ludique permet d’apporter de l’originalité lors de l’action récurrente de la connexion à un compte. Le yéti amuse l’utilisateur et détourne donc le sentiment négatif lorsque l’on complète un formulaire standard.

De plus, la curiosité incite l’utilisateur à terminer de remplir le formulaire. Sur des sites e-commerce, cela peut permettre d’augmenter le taux de conversion.