Blog · Réussir ses formulaires
Libellés ou placeholders
Les formulaires à placeholders seuls ont l'air propres sur une maquette et s'effondrent à l'usage. Pourquoi le libellé doit rester visible, à quoi servent vraiment les placeholders, et ce qu'entend un lecteur d'écran quand le libellé manque.
Le formulaire le plus propre cache ses propres instructions
Il y a une conception de formulaire qui gagne chaque revue interne : pas de libellés, seulement des indications en gris clair à l'intérieur de chaque champ vide. Cela paraît calme, moderne et plus court que l'alternative. L'ennui est que la revue porte sur un formulaire vide, et que personne ne remplit un formulaire vide. Le visiteur fait la seule chose pour laquelle le formulaire existe (il tape), et l'instruction sur laquelle il comptait disparaît sous sa propre réponse.
C'est tout le débat en une phrase. Un libellé se tient hors du champ et reste en place. Un placeholder se tient dans le champ et s'efface à l'instant où quelqu'un agit dessus. Tout le reste de cette décision découle de celui de ces deux comportements que vous pouvez vous permettre.
Ce qui disparaît vraiment quand le placeholder s'en va
Sur un formulaire de contact à trois champs, pas grand-chose : la plupart des gens peuvent garder nom, e-mail, message en tête. Mais les formulaires des organisations avec lesquelles nous travaillons ont rarement trois champs. Formulaires d'inscription, demandes de subvention, questions de visa et consulaires, renouvellements d'adhésion : une douzaine de champs, certains qui se ressemblent. Une fois chaque champ rempli, un formulaire à placeholders seuls est une page de boîtes anonymes. Le visiteur qui veut revérifier ses réponses avant d'envoyer n'a rien contre quoi les vérifier.
Les interruptions aggravent les choses. Quelqu'un commence le formulaire, prend un appel, et revient à un écran qui ne s'explique plus. Cette seconde boîte, était-ce un téléphone professionnel ou un mobile ? La seule façon de le savoir est d'effacer ce qu'il a tapé et de regarder ce qui réapparaît, ce qui est une chose vraiment absurde à demander à une personne, et pourtant c'est le vrai chemin de récupération que cette conception lui laisse.
Le remplissage automatique le casse aussi, et c'est ainsi qu'une grande part des vrais visiteurs remplit désormais les formulaires. Le navigateur verse les valeurs enregistrées dans tous les champs à la fois, et le travail du visiteur passe de taper à vérifier. Sur un formulaire libellé, vérifier prend un coup d'œil. Sur un formulaire à placeholders seuls, chaque champ rempli a recouvert son propre nom.
Ce qu'entend un lecteur d'écran
Pour quiconque utilise un lecteur d'écran, la différence cesse d'être un désagrément et devient un mur. Un libellé correctement associé est annoncé quand le champ reçoit le focus : le visiteur entend ce qui est demandé, puis répond. Le texte du placeholder n'a pas cette garantie : la prise en charge est inégale d'un lecteur d'écran à l'autre, et un placeholder n'a jamais été conçu pour être le nom d'un champ. Un formulaire qui ne repose que sur des placeholders parie que la technologie d'assistance de chaque visiteur bouchera un trou dans le balisage.
Pour les administrations et les institutions publiques, ce n'est pas une question de goût. Les normes d'accessibilité auxquelles les sites du secteur public sont tenus attendent que les champs de formulaire aient de vrais libellés, et un champ sans libellé est l'un des échecs les plus courants que relèvent les audits automatiques. Le libellé visible et le libellé annoncé doivent être la même chose, associée au champ dans le balisage. Ainsi le correctif pour l'utilisabilité et le correctif pour la conformité ne font qu'un.
Il y a aussi un coût d'accessibilité plus discret : le texte du placeholder s'affiche par convention dans un gris à faible contraste, précisément pour ne pas ressembler à une réponse. Un texte délibérément pâle est un endroit étrange pour conserver la seule copie de vos instructions.
À quoi servent vraiment les placeholders
Rien de tout cela ne rend le placeholder inutile. Il excelle à exactement une tâche : montrer à quoi ressemble une bonne réponse. Un libellé dit « Numéro de téléphone » ; un placeholder dit « (555) 012-3456 ». Le libellé porte la question, le placeholder démontre le format, et quand la démonstration disparaît sous la vraie frappe, rien n'est perdu. Le visiteur n'a plus besoin de l'exemple, et le libellé est toujours là.
Les libellés flottants (le motif où le placeholder glisse vers le haut et rétrécit en position de libellé quand la frappe commence) sont un compromis raisonnable quand l'espace vertical manque vraiment. Mais c'est un compromis à construire avec soin : le texte flotté a encore besoin d'un vrai contraste, le balisage a encore besoin d'un vrai libellé, et l'animation vous achète une ligne de hauteur au prix d'une certaine fragilité. La plupart des formulaires ne sont pas si à l'étroit qu'un simple libellé visible n'aurait pas été plus simple.
L'échange que vous faites en réalité
Garder les libellés visibles coûte un peu d'espace vertical et un peu de calme visuel. Les cacher coûte la compréhension pour tous, la récupération pour quiconque est interrompu, la vérification pour tous ceux qui remplissent automatiquement, et l'accès pour les personnes qui utilisent un lecteur d'écran. Présenté ainsi, ce n'est pas vraiment une décision : l'esthétique du formulaire vide est la seule chose de l'autre côté de la balance, et personne n'a jamais contacté votre organisation parce que le formulaire était joli tant qu'il était vide.
C'est le schéma auquel cette série revient sans cesse : les petits choix qui se lisent comme des questions de style sont généralement des questions d'exploitation déguisées. La suite de la série : ce qui doit se passer dans les secondes qui suivent l'appui sur Envoyer, et pourquoi « la page ne s'est pas rechargée » n'est pas la même chose que « ça a marché ».