25 conseils pour designer des formulaires efficaces

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 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.

 

I. 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.

Formulaire 1 seule colonne

Source : crazyegg.com

II. 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.

Formulaire informations minimum

Source : UX Planet

III. 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).

IV. 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

V. 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.

VI. 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.

Un formulaire Facebook

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 !

VII. 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.

Champs connexes formulaires 1
Champs connexes formulaires Z

Source : crazyegg.com

VIII. 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

Formulaire majuscules

Source : crazyegg.com

IX. 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.

Champs intérieur légende

Source : smashingmagazine.com

Sachez qu’il existe également des placeholders “flottants” ou adaptatifs qui viendront se mettre automatiquement en haut de votre champ4 !

X. 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 !

Champs erreurs indiquées

Source : Ebay

XI. 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”).

Lisibilité des textes d'aide formulaire

Source : UX Planet

XII. 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.

Options visibles formulaire

Source : crazyegg.com

XIII. 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.

Placeholder remplissage formulaire

Source : smashingmagazine.com

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).

Source : Josh Morony

Petite astuce : les input type dans le HTML vous seront très utiles pour le mobile en proposant pour chaque champ le clavier adapté !

XIV. 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 !

Préremplissage Google

Source : Google

XV. 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.

Placeholder remplissage formulaire

Source : Prototypr.io

XVI. 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.

Autofocus formulaire

Source : Amazon

XVII. 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.

Champs optionnels formulaire

Source : UX Planet

XVIII. 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.

Options cliquables formulaire

Source : UX Planet

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.

XIX. 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 !

CTA boutons formulaire

Source : Crazyegg

XX. 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 !

Action primaire action secondaire boutons formulaire

Source : Luke Wroblewski

XXI. 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.

XXII. 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.

XXIII. 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)

XIV. 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/.

Action primaire action secondaire boutons formulaire

Source : UX Planet

XV. 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. Sur ce sujet : https://www.crazyegg.com/blog/guides/great-form-ui-and-ux/

4. Cf : https://www.jqueryscript.net/images/JVFloat-js-demo.gif

5. Selon Google : https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill?hl=en

6. Voir l’article : https://www.lukew.com/ff/entry.asp?571

7. Pour plus de précisions : https://www.abondance.com/20180703-19395-index-mobile-first-7-points-clarifies-par-google.html

Shopping Basket

Envoyé

Merci, nous avons bien
reçu votre message

Envoyé

Merci, nous avons bien
reçu votre message