Nous contacter

  1. Accueil
  2. Blog
  3. Webdesign
  4. Les placeholders ont-ils le même rôle que les labels ?

Les placeholders ont-ils le même rôle que les labels ?

Le 16/07/2015

Dans Webdesign

Le web design est une discipline complexe, ou il faut savoir faire cohabiter plein de contradictions, plus ou moins fortes. Parmi elles se trouve la plus importante à mon goût : Ergonomie vs. Design.

Il y a une dizaine d’années, nous sortions d'une période très sombre (mais si vous savez, quand vos sites étaient pleins de tables…) et avions enfin la possibilité de coller à des standards. L'ergonomie et l’accessibilité étaient vraiment importantes, et nous faisions des efforts pour valider nos sites W3C. L'ergonomie gagnait clairement le bras de fer.

Maintenant, les choses ont bien changé. La validation W3C est quelque chose qui n’intéresse plus grand monde, et l’accessibilité s'incline face à des impératifs comme l'obtention d'un design le plus épuré possible, ou l'affichage de pubs toujours plus rentables.

Je pourrais prendre de nombreux sujets pour illustrer mon propos, tous plus énervants les uns que les autres (redirections sauvages sur mobile, je pense à vous), mais celui qui me tient le plus à coeur est le suivant : L'utilisation de placeholders à la place de labels.

Les placeholders ont-ils le même rôle que les labels ?

D’après Wikipédia, un placeholder est "une marque substitutive (ou placeholder en anglais « remplisseur ») est un terme, signe ou autres marques qui tient la place d'un contenu inconnu ou non identifié". Nous voilà bien avancé, n'est-ce pas ?

Plus sérieusement, les placeholders sont les contenus par défauts gris qui apparaissent dans les champs de texte, et qui s'effacent dès les premiers caractères tapes. Ils sont très pratiques pour indiquer le format dans laquelle la valeur demandée doit être insérée.

Les labels, quant à eux, sont tout simplement les noms des champs.

Quelques exemples

Un bon exemple d'utilisation de ces deux éléments est par exemple le formulaire suivant :

See the Pen Dynamic form placeholders by Stelios Constantinides (@stothelios) on CodePen.

Les labels indiquent clairement le rôle de chaque champ, et les placeholders sont utilisés pour des choses qui font sens : le format attendu pour le numéro de téléphone, et si les champs sont requis ou optionnels. Pourquoi ces informations font sens ? Car nous n'en avons plus besoin une fois que le champ est rempli. Elles disparaissent, et c'est bien normal. Seul reproche : je ne sais pas si le champ numéro de téléphone est optionnel ou pas.

Les bons exemples, c'est chouette, mais malheureusement, la plupart des formulaires que vous pourrez trouver sur le Web ressemblent au suivant :

See the Pen Form border feedback by Clément Paris (@ClementParis016) on CodePen.

Ici, les labels sont affichés sous la forme de placeholders, ce qui est certes plus minimaliste et épuré, mais qui posent de nombreux soucis.

  • Une fois le champ rempli, nous ne savons plus à quoi il correspond. De plus, si le formulaire a été pre rempli par le navigateur, l'utilisateur peut tout à fait soumettre un formulaire sans jamais avoir vu à quoi correspondent les champs.
  • Il n'y a plus de place pour le placeholder. Logique, car le label a pris sa place, mais triste car votre visiteur y a perdu une information.
  • Les liseuses ne traitent pas les placeholders comme des labels, et les handicapent ne sauront donc pas à quoi correspondent vos champs.

Autre exemple de formulaire qui ne fait pas vraiment d'effort avec le suivant : 

See the Pen Form Feedback by CrocoDillon (@CrocoDillon) on CodePen.

Ici, il y a des labels, ce qui est un bon point. Par contre, les placeholders n'affichent aucune information supplémentaire, et ne servent donc à rien. Dommage.

Des solutions à proposer ?

Bien sur que oui ! Il est possible de rappeler le type du champ avec une petite icône comme l'exemple suivant. Cette icône ne disparaissant pas, il sert de rappel sur le type du champ. Ce n'est pas la meilleure solution, mais c'est viable.

Il est aussi possible de déplacer le placeholder sous la forme de label après remplissage. Mention spéciale pour ce formulaire, qui se permet d'afficher l’état du champ, le label et un picto pour les personnes ne parlant pas la langue.

See the Pen Form Styling by Ryan Miller (@Rpmiller80) on CodePen.

Enfin, et j’espère que vous y avez pensé aussi, il est toujours possible d'ajouter simplement un label au-dessus/à cote de vos champs.

See the Pen Dynamic form placeholders by Stelios Constantinides (@stothelios) on CodePen.