Aller directement au contenu

UX/UI des formulaires : comment les optimiser

05/04/2022
0

UX UI des Formulaires

 

Image à la une : Nikita Krushko Dribbble

Si vous avez été confronté à la création d’un site internet alors, inévitablement, vous avez abordé la question du formulaire. Du simple “email catcher”* au formulaire de contact, en passant par le formulaire d’inscription ou de renseignement, c’est chaque fois l’occasion de se demander : comment proposer un formulaire que l’on a vraiment envie de compléter ?

*email catcher désigne l’outil dédié à la récupération des adresses e-mail des internautes sur un site web.

Le “design” d’un formulaire

On conviendra facilement que le formulaire n’est pas la partie la plus palpitante du design de votre plateforme. Et pourtant, c’est l’une des plus fondamentales. Le formulaire est l’entrée privilégiée vers les informations cruciales et essentielles concernant vos prospects et clients. Il est donc le pivot du service que vous proposez. Passons en revue les astuces et bonnes pratiques UX qui semblent pertinentes pour permettre au formulaire de remplir ses fonctions de façon optimale.

Contexte et enjeux

Bien avant de commencer le design du formulaire, il est essentiel et indispensable d’en comprendre le contexte et les enjeux.

Côté utilisateurs :

  • A quel moment du parcours utilisateur sera-t-il disponible ?
  • A quelle fréquence et par combien d’utilisateurs sera-t-il utilisé ?
  • Dans quel but ?
  • Quelles sont les éventuelles questions que se posera un utilisateur à cet instant ?
  • De quels éléments a-t-il besoin, quels éléments a-t-il à sa disposition ?

Côté business :

  • Quel est l’objectif à atteindre : un taux de conversion spécifique, gérer des demandes d’informations et/ou de support, finaliser un parcours utilisateur ou client ?
  • Quels sont les risques si les utilisateurs n’utilisent pas le formulaire ?
  • De quelles données a-t-on vraiment besoin ?

Les réponses à ces questions vous permettront d’arbitrer et de prioriser vos efforts.

De même que le moment où l’on demande des informations personnelles a son importance, comme le montre l’exemple ci-dessous :

Bonne et mauvaise pratique - Formulaire

Sur un site e-commerce, permettre à l’utilisateur de voir son panier et les options de livraison avant de remplir le formulaire de création de compte a un impact positif sur le taux de conversion.

Uniquement la complétion des champs nécessaires :

Remplir un formulaire est un moment contraignant pour les utilisateurs. Il est donc important de les afficher au bon moment du parcours, et de laisser aux utilisateurs une certaine liberté comme par exemple : revenir en arrière, s’ils ont oublié une information. Il est fortement recommandé de ne demander que les données qui vous sont utiles et/ou que vous pouvez traiter.

Exemple : The Zebra, un site américain de comparaison d’assurances auto et habitation.

Zebra - Formulaire

Non seulement leur formulaire ne prend que quelques minutes mais leur argument de vente est que vous pouvez “comparer des devis d’assurance instantanément”.

La disposition des éléments d’un formulaire

La disposition des éléments de votre formulaire est essentielle lorsqu’il s’agit de renseigner des informations personnelles. C’est la première étape aperçue et, à ce titre, c’est celle qui déterminera si, oui ou non, l’internaute sera disposé à prendre le temps de remplir le formulaire.

  • Une seule colonne : construire vos formulaires sur une seule colonne, idéalement et si possible, au milieu de votre page afin de concentrer toute l’attention de l’utilisateur sur l’action en cours.
  • Le moins d’information possible : recueillir d’abord les informations essentielles, attendre que votre utilisateur ait mis un pied dans votre interface pour lui demander des informations complémentaires
  • Prioriser la demande d’information : demander d’abord des informations générales (nom, prénom, adresse…) puis permettre un cran supplémentaire comme aller dans un niveau de détail plus précis (avec des réponses ouvertes par exemple) ou demander des informations plus personnelles.
  • Miser sur la concentration utilisateur : minimiser au maximum les distractions pendant le remplissage du formulaire (éviter les pop-ups, les fonds sous forme d’image, les validations intempestives…). Rester discret lorsque vous validez un champ ou une partie du formulaire, sauf s’il s’agit d’indiquer qu’une étape a été complétée.
  • Créer la confiance : il est important d’expliquer pourquoi vous avez besoin d’une information personnelle, à quoi elle va servir et/ou comment elle sera utilisée. Cela crée une relation de confiance bénéfique entre l’utilisateur, vous et votre service.

Formulaire UX : Les erreurs à ne pas commettre et comment les corriger par Bruno Sabot

Concevoir un formulaire : équilibre entre texte et design

Il est fondamental de guider vos utilisateurs dans la complétion du formulaire. Ce guidage passe à la fois par le texte et le design, que ce soit durant la complétion du formulaire ou en cas d’erreur.

Pour les textes, il est recommandé de travailler la microcopie. La microcopie désigne tous les petits textes présents dans une interface qui guident l’action de l’utilisateur comme :

  • Expliquer pourquoi une donnée jugée sensible est demandée ;
  • Expliquer comment retrouver une information essentielle comme un numéro de dossier afin de diminuer les freins et les risques d’abandon.

Exemple de réassurance : L’entreprise Luko, spécialisée dans l’assurance habitation.

Luko - Formulaire

Cette entreprise justifie ses demandes d’informations sensibles sur votre maison par la volonté de vous “offrir les meilleurs tarifs”.

Les mots pour le dire

  • Choisir des titres de champs clairs et compréhensibles. Chaque champ doit avoir un titre qui fait sens pour les utilisateurs. Il faut donc éviter le jargon qu’il soit technique ou propre au métier. L’idée est de supprimer toute ambiguïté.
  • Utiliser des labels de texte par défaut. Il ne faut pas y afficher des informations essentielles mais du texte qui va aider l’utilisateur à comprendre comme par exemple quel format est attendu dans un champ spécifique.

Dans l’exemple ci-dessus, si je dois revenir sur la quantité d’objets que je souhaite commander, sans le label, je ne sais plus de quoi il s’agit.

  • Indiquer clairement l’action engendrée par un Le texte du bouton de validation doit clairement représenter l’action qui sera réalisée. Celui-ci permet à l’utilisateur de se positionner dans le formulaire.

Exemple avec la banque en ligne N26 :

Temps et vaidation N26 - Formulaire

L’ouverture d’un compte ne prend que 8 minutes et le bouton de validation des étapes est clairement identifiable.

Le design accompagne

  • Adapter la taille des champs au format attendu. Quand un champ demande une donnée au format court (une date ou un code postal), utilisez juste la largeur nécessaire pour afficher la donnée en entier, et non une largeur fixe pour tous les champs. De même, lorsqu’un champ demande une donnée plus longue (par exemple, un champ texte pour décrire son problème), utilisez plus de largeur et/ou de hauteur.

Exemple : Le code postal est un champ à 5 chiffres.

Code postal - Formulaire

Le  champ “code postal” nécessite moins d’espace que celle du “Prénom”.

 N’hésitez pas à adapter la taille d’un champ pour limiter la sollicitation psychologique.

  • Distinguer visuellement les boutons primaires et secondaires. Traditionnellement, le bouton de validation est à droite et plus prégnant tandis que celui d’annulation est à gauche et moins prégnant. Cela permet d’éviter des erreurs qui peuvent être décourageantes pour les utilisateurs.

Bouton primaire secondaire - formulaire

L’exemple ci-dessus nous montre deux boutons. En règle générale, vous aurez besoin de deux types de boutons, car la plupart des actions des utilisateurs se séparent en deux catégories. Les actions primaires qui sont utiles pour atteindre leur but et les actions secondaires qui ne le sont pas.

  • Montrer l’envoi des données et le fait de devoir attendre. Quand on clique sur le bouton de validation d’un formulaire, il se peut que la page mette un peu de temps à charger. Les retours visuels sur le navigateur sont peu visibles quand l’attention se focalise sur le bouton, et que l’utilisateur a l’impression que ça n’a pas marché. Mettre un feedback d’envoi des données (icône de chargement qui tourne par exemple) dans le bouton de validation du formulaire réduit les risques que l’utilisateur ne voit pas que ça charge et re-clique de nouveau ou quitte la page.
  • Utiliser des images/icônes pour rendre le formulaire plus engageant. Lorsque cela a un sens, utilisez des images ou icônes pour rendre la complétion du formulaire plus intuitive et plus facile. Dès qu’il est question d’expérience utilisateur, les images/icônes sont utiles.

Images Icones - Formulaire

  • Micro interaction & design émotionnel. Deux points qui permettent d’améliorer l’expérience utilisateur sur le formulaire. Utilisées dans un formulaire, les micros interactions peuvent rappeler le caractère confidentiel du formulaire et “rassurer” l’internaute. Utilisé avec parcimonie, le design émotionnel améliore l’expérience utilisateur sur le site.

Exemple d’ergonomie de formulaire avec le bouton Mailchimp :

Mailchimp Bouton - Formulaire

Le texte et le design accompagnent l’utilisateur dans la complétion et le bon usage du formulaire mais d’autres paramètres sont à prendre en compte ce qui fait réellement du formulaire un outil auquel il faut sérieusement réfléchir en termes UX/UI.

UX d’un formulaire : ne pas oublier mobilité et accessibilité

Certains ont tendance à oublier l’importance de l’accessibilité. C’est pourtant l’un des prochains grands chantiers de Google : Accessibility content and links for Google websites. Réfléchir en termes d’accessibilité permet de porter la démarche UX au maximum.

Penser mobile

Le mobile est désormais le point d’accès privilégié de nombre d’utilisateurs lorsqu’il s’agit de souscrire à un service. C’est d’ailleurs pour cette raison que Google a entériné le Mobile First Index il y a peu. Il faut donc concevoir le formulaire pour un usage mobile avant de penser desktop. Après, bien entendu, avoir fait le tour dans votre outil de web-analyse et vérifier la répartition du trafic par appareil.

Penser Mobile - Formulaire

Crédit image Faustina Puspamurti Dribbble

Soulager le handicap

Internet devrait être accessible au plus grand nombre quel que soit le handicap. Il existe de nombreuses façons de rendre accessibles vos formulaires aux personnes malvoyantes (par exemple : en permettant de grossir le lettrage) ou atteinte de daltonisme (environ 5% de la population subit ce handicap). De la même façon, faciliter le travail des aides vocales est possible (Cf. Web Accessibility Initiative du W3C.)

Encore une fois toutes ces démarches, aussi utiles soient elles, doivent être vérifiées par les tests utilisateurs : l’un des plus puissants outils de l’UX, y compris pour le formulaire.

Le feedback du test utilisateur

Une seule solution pour s’assurer de l’utilisabilité de vos formulaires et pour comprendre les freins éventuels à la complétion : le test utilisateur. En laissant des utilisateurs potentiels naviguer et compléter le formulaire, vous aurez accès à de précieuses connaissances pour comprendre les freins, besoins et attentes de votre public sur votre produit.

Quel que soit votre public cible, derrière tout formulaire se cache des enjeux :

  • Côté grand public : s’inscrire sur un site, demander un devis, finaliser une commande… où les enjeux de succès sont grands comme par exemple l’augmentation du taux de conversion ;
  • Côté professionnel : remplir rapidement un formulaire suite à la demande d’un client, faire un rapport… où les enjeux se rangent plutôt du côté de l’efficience et du gain de temps.

Le test utilisateur vous permet d’observer directement ce qui fonctionne et ce qui ne fonctionne pas, et surtout de comprendre pourquoi en échangeant avec les participants.

Comprendre la démarche du test utilisateur :

La veille Google Analytics

Enfin, les analytics vous permettent de surveiller l’usage réel de votre formulaire. Tout changement peut entraîner une hausse ou une baisse du taux de complétion. Aussi si vous remarquez une baisse ou un faible taux de complétion, il est peut-être temps de faire un test utilisateur afin de comprendre pourquoi le formulaire n’est pas complété comme il le devrait.

Conclusion

L’optimisation de vos formulaires est un véritable objectif du design UX. Ce processus continu d’amélioration met clairement l’utilisateur et son confort au cœur de sa finalité, pour une meilleure complétion et/ou un bon taux de conversion ou un point d’entrée utilisateur dans le service que vous proposez. Il est donc impératif d’avoir une véritable démarche UX dans ce sens car un bon formulaire sera la pierre angulaire de votre interface.

Bibliographie

Web Form Design - Filling in the Blanks Par Luke WroblewskiWeb Form Design – Filling in the Blanks Par Luke Wroblewski

Publié : Mai 2008 Broché : 226 pages ISBN : 1-933820-24-1 Digital ISBN : 1-933820-25-X

Les formulaires font ou défont les interactions en ligne les plus cruciales : paiement (commerce), inscription (communauté), saisie de données (participation et partage) et toute tâche nécessitant la saisie d’informations. Dans Web Form Design, Luke Wroblewski s’appuie sur des recherches originales, sur son expérience considérable chez Yahoo ! et eBay, et sur les points de vue de nombreux concepteurs de premier plan dans ce domaine pour présenter ses réflexions sur la conception de formulaires Web efficaces et attrayants.

 

Lire aussi :

 

Sur le web :

  • Review: Web Form Design by Luke Wroblewski

Commentaire