Label ou placeholder : le détail de formulaire qui coûte des conversions

C'est une mode qui revient à chaque refonte : supprimer les labels au-dessus des champs et écrire l'intitulé directement dans le champ, en texte grisé. Le formulaire paraît plus court, plus épuré, plus « design ». Le problème : ce texte grisé — le placeholder — disparaît au moment précis où l'utilisateur en a besoin, c'est-à-dire quand il clique et commence à taper. Sur une landing page dont le formulaire est l'unique point de conversion, ce choix esthétique se paie en abandons. Voici ce que la recherche sur les formulaires web en dit, et comment avoir un formulaire à la fois épuré et utilisable.

Pourquoi le placeholder seul pose problème

• La mémoire de travail est sollicitée inutilement — l'intitulé disparaît dès la saisie : sur un formulaire de plusieurs champs, l'utilisateur doit retenir ce que chaque champ demandait, ou effacer sa saisie pour relire l'intitulé.
• La relecture avant envoi devient impossible — un formulaire rempli n'affiche plus que des valeurs, sans les questions : impossible de vérifier qu'on a mis le bon contenu dans le bon champ sans tout effacer.
• Les champs remplis se confondent avec les champs vides — un placeholder gris ressemble à une valeur saisie ; des utilisateurs sautent des champs qu'ils croient déjà remplis, notamment en pilote automatique sur mobile.
• L'accessibilité en souffre — le contraste des placeholders est généralement insuffisant, certains lecteurs d'écran les ignorent, et l'absence de label programmatique viole les critères d'accessibilité détaillés dans notre article sur le RGAA.
• La correction d'erreur devient laborieuse — en cas de message d'erreur, l'utilisateur revient sur un champ dont l'intitulé n'est plus visible : il corrige à l'aveugle.

Ce que disent les études sur les formulaires web

La recherche sur l'ergonomie des formulaires est étonnamment fournie, et remarquablement convergente. Les travaux de référence de Bargas-Avila et son équipe à l'Université de Bâle, synthétisés dans « Simple but Crucial User Interfaces in the World Wide Web: Introducing 20 Guidelines for Usable Web Form Design » (2011), recommandent explicitement de placer l'intitulé au-dessus du champ, en texte permanent, et de réserver le placeholder à un exemple de format (« jean.dupont@email.fr ») plutôt qu'à l'intitulé lui-même. Ces lignes directrices ont ensuite été validées empiriquement : l'étude de Seckler, Heinz, Bargas-Avila, Opwis et Tuch présentée à CHI 2014 (« Designing Usable Web Forms: Empirical Evaluation of Web Form Improvement Guidelines ») mesure que les formulaires appliquant ces règles sont remplis plus vite, avec moins d'erreurs et une satisfaction supérieure — l'écart étant le plus net précisément sur les points qui touchent à la clarté des intitulés.

Les bonnes pratiques, champ par champ

• Label permanent au-dessus du champ — au-dessus plutôt qu'à gauche : la lecture verticale est plus rapide sur desktop et c'est la seule disposition qui fonctionne bien sur mobile.
• Placeholder réservé aux exemples de format — numéro de téléphone, format de date, structure d'email : un exemple, pas une consigne, et jamais une information qui n'existe que là.
• Floating label si l'esthétique l'exige — l'intitulé placé dans le champ qui se réduit et remonte au focus est un compromis acceptable : l'information reste visible en permanence. Attention au contraste et à la taille réduite de l'intitulé flottant.
• Indications de champ requises visibles avant la saisie — mention « optionnel » sur les champs facultatifs (plutôt que des astérisques partout), consignes de format avant le champ et non après l'erreur, comme détaillé dans notre guide de la microcopie de formulaire.

Et l'argument « le formulaire paraît plus long avec des labels » ?

Il est réel mais mal orienté : ce qui décourage, ce n'est pas la hauteur en pixels du formulaire, c'est le nombre de décisions et de saisies demandées. Un formulaire de quatre champs avec labels clairs se remplit plus vite — et avec moins d'abandons — qu'un formulaire de quatre champs « épuré » où chaque champ demande un effort de déduction. Si la longueur perçue est vraiment un sujet, les leviers efficaces sont ailleurs : réduire le nombre de champs, passer en formulaire multi-étapes, ou reporter les questions secondaires après la conversion. Supprimer les labels ne raccourcit pas le formulaire, il ne fait que cacher les questions.

Sur une landing page, le formulaire est l'endroit exact où la conversion se joue : c'est le pire endroit pour sacrifier la clarté à l'esthétique. Les formulaires des templates LanderKit (89 € l'unité, 229 € le pack de 10) appliquent ces règles d'office — labels permanents, placeholders réservés aux exemples, messages d'erreur sous le champ concerné — pour que le travail restant soit celui qui compte : choisir les bonnes questions. Pour aller plus loin, nos guides sur les messages d'erreur et l'abandon de formulaire complètent celui-ci.