Chaque champ que vous ajoutez à un formulaire est une décision. Les études montrent que chaque champ obligatoire supplémentaire fait baisser les taux de complétion de 10 à 15 %. Mais demander moins de données, c'est aussi obtenir moins de données. Pour faire bouger la conversion, il ne s'agit pas de supprimer des champs, mais d'être stratégique : quels champs marquer comme obligatoires, lesquels comme facultatifs et lesquels masquer jusqu'à ce qu'ils deviennent pertinents.
Ce que les champs obligatoires font vraiment aux taux de conversion
Quand quelqu'un arrive sur votre formulaire, il le parcourt en quelques secondes. Pas mot à mot. Il regarde combien de champs il y a, combien il devra faire défiler et si les demandes semblent raisonnables.
Les champs obligatoires envoient un signal. Chacun dit « j'ai besoin de ça de votre part ». Deux ou trois champs obligatoires paraissent gérables. Sept champs obligatoires ressemblent à une candidature. La différence de taux d'abandon n'est pas petite.
Prenez n'importe quel paiement en boutique en ligne et vous verrez l'effet. Si le code postal est marqué facultatif mais l'adresse de livraison obligatoire, les clients restent. Si les deux sont obligatoires sans être clairement indiqués, l'abandon de panier grimpe. La psychologie est simple. Les visiteurs dans le doute partent.
La règle de la minorité : quand marquer l'obligatoire, quand marquer le facultatif
La plupart des formulaires sont déséquilibrés. Un formulaire de contact peut avoir cinq champs obligatoires et un facultatif. Un formulaire d'inscription peut avoir huit champs obligatoires et deux facultatifs. Dans ces cas, marquer chaque champ obligatoire gaspille de la place et de l'effort mental.
La meilleure approche est de ne marquer que la minorité. Si 80 % de vos champs sont obligatoires, ne marquez que les facultatifs avec la mention « (facultatif) » à côté du libellé. Les champs non marqués seront considérés comme obligatoires. Cela réduit le désordre visuel et donne l'impression d'un formulaire plus court.
En revanche, regardez les formulaires complexes où les champs obligatoires sont dispersés. Les demandes d'assurance, les dossiers de prêt et les enquêtes de plusieurs pages mélangent souvent champs obligatoires et facultatifs. Dans ce cas, marquez les deux. Utilisez un astérisque (*) pour les champs obligatoires et « (facultatif) » pour les facultatifs. Un étiquetage clair vaut mieux que des conventions sous-entendues.
La règle est simple. Marquez la minorité, quelle qu'elle soit.
Comment signaler les champs obligatoires pour qu'on les remarque vraiment
Un astérisque seul ne suffit pas. Les utilisateurs de lecteurs d'écran n'entendent pas un astérisque. Les personnes qui ne maîtrisent pas la langue peuvent ne pas connaître cette convention. Les utilisateurs qui défilent vite peuvent rater un petit symbole.
La solution est un étiquetage à plusieurs niveaux. Il vous faut l'astérisque, le mot « obligatoire », le tout visible et clair pour le code.
Utilisez un astérisque associé au mot « obligatoire »
Les études montrent qu'associer un astérisque rouge (*) au texte « obligatoire » dans le libellé supprime la confusion. L'astérisque attire l'œil. Le mot « obligatoire » confirme sa signification. Ensemble, ils fonctionnent pour les utilisateurs voyants, ceux qui utilisent un lecteur d'écran et les personnes ayant des troubles cognitifs.
Essayez Adresse e-mail * (obligatoire) ou Numéro de téléphone * suivi d'un texte qui dit « Les champs marqués d'un astérisque sont obligatoires ». Ce format fonctionne bien.
Ajoutez une légende qui explique ce que signifie « obligatoire »
Avant le début des champs, ajoutez une simple ligne disant « * = champ obligatoire » ou « Les champs marqués d'un astérisque (*) sont obligatoires. » Cette phrase évite aux utilisateurs d'avoir à interpréter le symbole seuls.
Associez-la à des attributs HTML. Dans le code de votre formulaire, ajoutez required ou aria-required="true" à chaque champ obligatoire. Cela indique au navigateur et au lecteur d'écran que le champ est obligatoire sans dépendre uniquement de l'apparence visuelle.
La couleur compte moins que le contraste et la position
Les astérisques rouges sont la convention, mais le vrai sujet est le contraste. Si votre astérisque est d'un gris pâle ou se fond dans le libellé, les personnes malvoyantes le manqueront. Mettez l'astérisque en gras et assurez un fort contraste avec l'arrière-plan.
La position compte aussi. Placez l'astérisque juste après le texte du libellé, pas isolé. Le signal « obligatoire » reste ainsi lié visuellement au nom du champ et se lit de gauche à droite.
Quand masquer les champs facultatifs vaut mieux que les marquer
Certains formulaires profitent d'une autre approche, l'affichage progressif. Masquez les champs facultatifs jusqu'à ce qu'ils deviennent pertinents. Cela marche quand votre formulaire a un parcours principal clair et que les champs facultatifs ne concernent que certains utilisateurs.
Prenez un formulaire de réservation. « Nom de la marque » peut être obligatoire pour les clients professionnels mais facultatif pour les particuliers. Plutôt que de le marquer facultatif et d'encombrer le parcours principal, affichez-le seulement après que l'utilisateur a choisi « professionnel » comme type de réservation. Il ne voit jamais le champ s'il ne le concerne pas.
L'affichage progressif donne l'impression d'un formulaire plus court
Les formulaires qui masquent les champs facultatifs jusqu'à ce qu'ils soient utiles convertissent mieux que ceux qui montrent tout d'emblée. La raison, c'est la perception. Un formulaire qui montre 12 champs (même si 3 sont facultatifs) paraît plus long qu'un formulaire qui en montre 9 et en révèle 3 de plus selon les réponses de l'utilisateur.
La logique conditionnelle révèle des champs selon les réponses précédentes
Les créateurs de formulaires modernes la gèrent nativement. Quand un utilisateur choisit une option, un nouveau champ apparaît. Quand il change d'option, le champ disparaît. Le formulaire s'adapte à ses besoins en temps réel.
C'est là que la logique conditionnelle de WEMASY brille. Vous pouvez définir des règles comme « si le secteur est la santé, afficher le champ de conformité HIPAA » ou « si le budget est inférieur à 1000 $, afficher les options de paiement des petites offres ». L'utilisateur ne voit que les questions qui le concernent.
Les champs obligatoires conditionnels : obligatoires seulement quand c'est logique
La conception avancée de formulaires va un cran plus loin. Certains champs sont facultatifs par défaut mais deviennent obligatoires selon les réponses précédentes de l'utilisateur. C'est le bon équilibre entre collecte de données et expérience utilisateur.
Supposons que « Parlez-nous de votre marque » soit facultatif à l'inscription gratuite. Mais si l'utilisateur choisit « Je suis propriétaire d'une marque » dans une liste déroulante, le même champ devient obligatoire. Le formulaire change l'exigence à la volée.
Montrez clairement la transition
Quand un champ passe de facultatif à obligatoire, l'utilisateur doit le savoir. La meilleure approche est d'ajouter l'astérisque et la mention « (obligatoire) » dès que le champ le devient. Certains créateurs de formulaires soulignent le changement avec une légère animation ou un changement de couleur. Cela signale qu'il y a eu un changement sans brusquer.
Les erreurs qui font baisser discrètement vos taux de complétion
Même avec les bonnes règles, de petites erreurs s'additionnent et augmentent l'abandon. Surveillez celles-ci.
Mélanger les symboles sans légende
Utiliser un astérisque sur certains champs et le texte « (obligatoire) » sur d'autres crée de la confusion. Choisissez une approche et tenez-vous-y. La cohérence sur toute votre marque compte plus que le choix du symbole.
Marquer par erreur des champs facultatifs comme obligatoires
C'est courant dans les formulaires migrés depuis d'anciens systèmes ou quand les exigences changent en cours de projet. Un champ est libellé facultatif mais le serveur l'exige, ou l'inverse. L'utilisateur remplit un champ qu'il croyait facultatif, envoie le formulaire et reçoit une erreur. Il abandonne.
Cacher des informations que les utilisateurs doivent voir
L'affichage progressif marche quand le champ masqué est vraiment facultatif ou vraiment conditionnel. Il se retourne contre vous quand vous cachez des champs obligatoires derrière une logique complexe. Si un champ est essentiel, montrez-le. Ne laissez pas les utilisateurs se demander s'ils doivent le remplir.
Utiliser des astérisques sans texte explicatif
Un astérisque seul est un mystère pour ceux qui n'ont jamais vu cette convention. Sans légende, certains utilisateurs sauteront le champ en le croyant facultatif. Ajoutez la légende. Une ligne en haut. Cinq mots. Elle évite l'abandon.
Changer le statut obligatoire en cours de formulaire
Si un champ est obligatoire, gardez-le obligatoire. Si vous devez le rendre facultatif plus tard selon l'évolution des besoins de votre marque, faites une révision complète. Ne passez pas discrètement un champ d'obligatoire à facultatif en espérant que personne ne le remarque. Les utilisateurs le verront et seront perdus.
Comment WEMASY aide pour les champs obligatoires et facultatifs
Le créateur de formulaires de WEMASY vous donne un contrôle total sur les exigences des champs sans toucher au code. Définissez n'importe quel champ comme obligatoire ou facultatif depuis l'éditeur. Ajoutez une logique conditionnelle qui rend un champ obligatoire seulement si des conditions précises sont remplies. Ajoutez des légendes personnalisées pour expliquer vos symboles de champs obligatoires.
Vous voyez aussi en temps réel quels champs provoquent le plus d'abandons. Si un champ facultatif ralentit vos conversions, vous pouvez le masquer avec l'affichage progressif. Si les utilisateurs sont perdus par un champ obligatoire, vous pouvez passer au marquage des seuls champs facultatifs et voir quelle approche convertit le mieux.