L’essentiel est dans le formulaire

Cette semaine, avec Julien, nous avons eu un atelier sur le svg interactif. Une petite initiation qui donnait envie d’en savoir plus… entre deux démos à couper le souffle, il a abordé l’intérêt d’utiliser des svg pour agrémenter ses formulaires. Pour appuyer son propo, il nous a montré une petite démo :

checkbox animées

Démo et code source

 

Je ne sais pas pour vous mais moi j’adore et j’adhère ! attention, je ne dis pas qu’il faille abuser des animations partout dans votre formulaire. Comme pour toute chose, c’est dans la bonne utilisation et la bonne mesure que vient le salut ! toute la subtilité est là.

Un formulaire dans un site web est un outil essentiel pour collecter des données. Il est donc primordial d’inciter l’utilisateur à remplir ce formulaire. Pour ça, quelques astuces simples :

  • Mettre en évidence son formulaire (ça parait évident mais ce n’est pas toujours le cas) – pourquoi pas directement sur l’accueil du site si cela est pertinent.
  • Définir clairement le but du formulaire – en lui donnant un but précis, l’utilisateur comprend d’emblée l’intérêt de le remplir.
  • Ne pas demander trop d’informations  – se contenter des renseignements importants dans un 1er temps évite de perdre des utilisateurs qui trouveraient tout ça trop fastidieux
  • Trouver un appel à action percutant – plutôt qu’un bête « envoyer », essayez quelque chose de plus actif comme « c’est parti ! » ou  « je veux un devis »,  « je télécharge la brochure »
  • Valoriser les éléments du formulaire avec des couleurs vives (si le design du site s’y prête, bien évident !)

Il y a beaucoup à dire ! donc, j’ajouterais juste : donner envie à l’utilisateur de remplir le formulaire ! et là, l’utilisation de svg interactifs ou d’animations css peut faire la différence.

Grâce à Ali et Kevin, nous avons vu jeudi, un bon exemple d’animation de formulaire ! il y a : de la couleur, peu d’info à la fois, un formulaire bien mis en valeur sur la page… et un design très marqué que l’on peut se permettre quand on s’appelle cartoon network !

cartoon network studios

Let’s see it!

 

Voilà, maintenant je vais vous laisser pour aller tester les animations en svg !

 

En complément :

 

Sources :

2 thoughts on “L’essentiel est dans le formulaire

Laisser un commentaire :

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *