Quiconque a été confronté un jour à la création d’un site internet a été, inévitablement, confronté également à la question du formulaire. Du simple email catcher au formulaire de contact, en passant par formulaire d’inscription ou de renseignement, c’est chaque fois l’occasion de se demander : comment designer un formulaire qu’on a vraiment envie de remplir ?
On conviendra facilement que ce n’est pas la partie la plus palpitante du design de votre plateforme… Mais ne vous y trompez pas ! C’est clairement l’une des plus fondamentales. C’est l’entrée privilégiée vers les informations cruciales et essentielles concernant vos prospects et clients. C’est donc tout naturellement le pivot du service que vous proposez. Du formulaire d’un ou deux champs au formulaire complet d’inscription à un service, on pourra voir qu’il existe 4 catégories sur lesquelles vous pourrez agir pour créer ou recréer des formulaires efficaces : la disposition des éléments, les champs, les boutons et l’accessibilité.
Découvrez nos 25 conseils UX pour concevoir des formulaires qu’on remplit à chaque fois !
La disposition
La disposition des éléments de votre formulaire est essentielle lorsqu’il s’agit de donner ou non envie de renseigner des informations personnelles. C’est la première chose qu’on aperçoit et, à ce titre, c’est celle qui déterminera inconsciemment si, oui ou non, on sera disposé à prendre le temps de remplir votre formulaire.
1. Privilégiez 1 seule colonne
Construisez vos formulaires sur une seule colonne, idéalement et si possible, au milieu de votre page. Cela permettra de concentrer toute l’attention de votre utilisateur sur l’action en cours, tout en évitant de le décourager par un formulaire qui lui semblerait interminable.
2. Less is more : demandez le minimum d’informations nécessaire
Ne demandez que les informations pertinentes1. Même lorsque cela semble nécessaire, il est souvent fastidieux de remplir des formulaires extensifs. Évitez par exemple de tout demander d’un coup. Si vous souhaitez, par exemple, connaître le nombre d’enfants de vos utilisateurs, demandez-le dans un second temps ! Recueillez d’abord les informations essentielles, attendez que votre utilisateur ait mis un pied dans votre interface pour lui demander des informations complémentaires.
3. Allez du général au particulier
Il est plus simple de demander une action complexe, ressentie comme difficile, une fois que des actions perçues comme faciles (ou habituelles) ont déjà été effectuées. Tout le monde le ressent intuitivement et c’est ce qu’explique et confirme le principe de cohérence de Dr. Robert Cialdini.
Demandez donc d’abord des informations générales (nom, prénom, adresse…) puis permettez-vous, ensuite seulement, d’aller soit dans un niveau de détail plus précis (avec des réponses ouvertes par exemple), soit de demander des informations plus personnelles. Dans l’idéal même, ne rendez pas ce deuxième niveau obligatoire. Vous pourrez, par la suite, pousser vos utilisateurs à compléter leur profil (avec une jauge de remplissage par exemple).
4. Groupez les champs connexes
L’un des principes fondateurs du gestaltisme2 indique que les utilisateurs d’un service perçoivent spontanément les phénomènes comme des formes globales plutôt que comme une juxtaposition d’éléments simples. Cela s’applique, bien évidemment, à la conception de vos formulaires. S’ils présentent plus de quelques champs, n’hésitez pas à grouper les questions connexes dans des sections communes.
Source : nnggroup.com
5. Ne diluez pas la concentration de l’utilisateur
C’est évident sur le principe mais plus difficile à mettre en place dans les faits, et ça mérite d’être rappelé. Minimisez au maximum les distractions pendant le questionnaire, évitez les pop-ups, les fonds sous forme d’image, les validations intempestives… Restez 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. Bref, vous l’avez compris : faites l’essentiel pour que l’utilisateur qui remplit son formulaire ne soit pas diverti dans son attention.
6. Expliquez pourquoi vous demandez une information sensible
Les informations que vous demandez à vos utilisateurs sont hautement personnelles. Pour vous, c’est un champ dans une base de données, a minima, un moyen d’optimiser vos stats et vos actions, au mieux, un moyen de choyer vos utilisateurs au plus près. Expliquez-lui pourquoi vous avez besoin de cette information personnelle, à quoi elle va vous servir et/ou comment vous l’utilisez. Cela crée une relation de confiance bénéfique pour l’utilisateur tout autant que pour vous et votre service.
Source : Facebook
Les champs
C’est l’aspect le plus technique de la conception de formulaires efficaces. C’est aussi, et logiquement, celui auquel il faut veiller au plus près. Mais c’est également le plus simple à mettre en place !
7. Bien placer la légende
Placez la légende (ou label) au dessus du formulaire correspondant et collez la bien au champ concerné. Statistiquement les utilisateurs complètent de façon plus importante les formulaires conçus de cette façon3.
8. N’utilisez pas que des majuscules
En plus d’être agressifs, les légendes toutes en majuscules sont beaucoup moins faciles à lire et moins compréhensibles
9. Ne légendez pas à l’intérieur des champs
Il est possible de concevoir vos formulaires en changeant le texte du placeholder de vos champs (le texte à l’intérieur). Ne les utilisez pas pour légendez vos champs, pour la simple et bonne raison que la destination du champ deviendrait illisible une fois remplie, ce qui, on le comprend aisément, n’est pas très pratique lorsqu’il s’agit de relire son formulaire en cas d’erreur.
Source : smashingmagazine.com
Sachez qu’il existe également des placeholders “flottants” ou adaptatifs qui viendront se mettre automatiquement en haut de votre champ !
10. Indiquez clairement les erreurs
Rien de plus frustrant qu’un formulaire qu’on valide et pour lequel on indique une erreur sans qu’on parvienne à en comprendre l’origine. Faites le maximum pour préciser de façon exacte où sont situées les erreurs sur votre formulaire. S’il vous est possible de valider chaque champ en temps réel, cela évite même toute frustration !
Source : Ebay
11. Optimisez la lisibilité des textes d’aide
Dans la même logique, mettez en place de textes d’aide propres à chaque champ (évitez le récapitulatif une fois le formulaire validé) et assurez vous qu’ils soient facilement accessibles et clairement lisibles par un humain (évitez les “TEXTTYPE-ERROR 9009”).
Source : UX Planet
12. Montrez toutes les options s’il y a moins de 6 possibilités
N’utilisez les listes déroulantes que s’il y a plus de 5 possibilités. Lorsque vous avez 5 possibilités ou moins, préférez un champ cliquable (radio button) pour plus de lisibilité et moins de clics.
13. Accompagnez l’utilisateur dans le remplissage
Au lieu d’utiliser le placeholder comme légende, pourquoi ne pas l’utiliser comme exemple ! Cela donnera une indication bienvenue pour remplir le champ en question.
De la même façon, vous pouvez utiliser les contraintes de remplissage pour accompagner l’utilisateur lorsqu’il remplit par exemple son numéro de téléphone ou son code postal (les chiffres sont obligatoires et limités en nombre).
Petite astuce : les input type dans le HTML vous seront très utiles pour le mobile en proposant pour chaque champ le clavier adapté !
14. Pré-remplissez quand c’est possible
Si c’est possible, laissez aux navigateurs la possibilité de remplir automatiquement les formulaires (autofill). Cela permet aux formulaires d’être rempli 30% plus vite5, tout en garantissant une frustration moindre !
Source : Google
15. Prévoyez des champs de longueur adéquate
Un champ de taille adaptée évitera à vos utilisateurs de faire des erreurs et, comme pour d’autres des conseils déjà formulés, fera baisser la frustration en faisant comprendre à l’utilisateur immédiatement ce qu’on lui demande.
Source : Prototypr.io
16. Mettez en place un focus automatique
Prévoyez l’autofocus sur votre formulaire dès le premier champ. Cela donnera un jalon pour commencer à remplir le formulaire. Dans la mesure du possible prévoir également un focus visuel sur chacun des champs au fur et à mesure de leur sélection.
Source : Amazon
17. Indiquez uniquement les champs optionnels
Les étoiles rouges sur le bord des formulaires et la mention répétée du caractère obligatoire de tel ou tel champ peuvent être très agaçants durant le remplissage des questionnaires et pousser à l’abandon. Indiquer uniquement les champs optionnels rend le remplissage des formulaires bien plus agréable.
18. Organisez vos options cliquables verticalement
C’est ce qu’on appelle les radio buttons. Qu’ils soient limités à 1 choix ou, au contraire, qu’on puisse en cocher plusieurs, les options cliquables sont plus faciles à processer verticalement.
Les boutons
Troisième composante des formulaires, ils sont indispensables au bon traitement des informations. Ils sont donc à ce titre nécessairement concernés par toute démarche d’optimisation UX.
19. Personnalisez le texte
Ça paraît évident mais ce n’est pas toujours mis en place. Personnalisez le texte de vos boutons. Un bon CTA devrait toujours indiquer ce à quoi il sert !
20. Différenciez action primaire et action secondaire
Ou plus simplement tourné, marquez une différence visuelle entre l’action que vous voudriez que les utilisateurs fassent en premier (l’action primaire, par exemple, valider le formulaire) et l’action que vous préférez qu’ils fassent le moins possible ( l’action secondaire, par exemple annuler ou réinitialiser le formulaire). Selon une étude de Luke Wroblewski6, la différenciation entre les deux actions a un impact important sur le taux de remplissage et la vitesse à laquelle sont remplis les formulaires. Faites donc bien la différence !
Source : Luke Wroblewski
21. Prévoir une seule option dans la mesure du possible
Dans la mesure où une action secondaire peut perturber l’utilisateur, n’hésitez pas à ne prévoir qu’une seule action à l’issue du remplissage du formulaire.
22. Affichez le bouton de validation une fois les infos obligatoires remplies
Vous pourriez même dans l’idéal, et si vous avez mis en place la validation ligne par ligne, n’afficher le bouton de validation qu’une fois le formulaire rempli et les champs valides.
Cela aura pour double avantage de garder déclencher une sentiment de récompense chez l’utilisateur tout en déplaçant son focus sur le bouton apparu qu’il validera sans hésiter.
L’accessibilité
On oublie souvent l’importance de l’accessibilité. C’est pourtant l’un des prochains grands chantiers de Google, comme l’a été le mobile avant lui. Réfléchir en termes d’accessibilité vous permettra de porter votre démarche UX au maximum ! Il serait dommage de passer à côté de ce détail, qui n’en est pas un.
23. Pensez mobile
C’est un poncif, mais il mérite d’être répété. 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 la raison pour laquelle Google a entériné le Mobile First Index il y a peu7. Concevez donc d’abord vos formulaires pour un usage mobile avant de penser desktop ! (Après avoir tout de même fait un tour dans votre outil de webanalyse et vérifier la répartition du trafic par appareil)
24. Pensez aux handicaps
Internet devrait être accessible au plus grand nombre quelque soit le handicap. Il existe de nombreuses façons de rendre accessibles vos formulaires aux personnes malvoyantes (en permettant de grossir le lettrage par exemple) ou atteinte de daltonisme (environ 5% de la population). De la même façon, faciliter le travail des aides vocales est possible. Vous pourrez faire le point sur les normes d’accessibilité en vous rendant à l’adresse de la Web Accessibility Initiative du W3C : https://www.w3.org/WAI/.
25. Faites des tests !
Encore et toujours ! On ne reviendra pas sur l’importance des tests utilisateurs et sur leur bénéfice à court, moyen et long termes. Testez vos formulaires, assurez vous qu’ils fonctionnent parfaitement sur tous les supports, qu’ils sont lisibles pour tous vos interlocuteurs, etc.
Les formulaires sont l’une des pierres angulaires des plateformes dans la mesure où ils constituent le point d’entrée de l’utilisateur dans le service que vous proposez. Il est donc impératif de les soigner au maximum !
N’hésitez pas à nous contacter pour obtenir un retour personnalisé sur la conception de vos formulaires. 🙂
1. Expedia a perdu 12 millions de dollars à cause d’une question supplémentaire… : https://www.zdnet.com/article/expedia-on-how-one-extra-data-field-can-cost-12m/
2. Pour des informations générales : https://fr.wikipedia.org/wiki/Psychologie_de_la_forme
3. Selon Google : https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill?hl=en
4. Voir l’article : https://www.lukew.com/ff/entry.asp?571
5. Pour plus de précisions : https://www.abondance.com/20180703-19395-index-mobile-first-7-points-clarifies-par-google.html
