[Résolu] Placeholder

Bonjour,
Je sais que placeholder est complémentaire de label. Mais que mettre dans un placeholder ? Un exemple du format attendu (genre si je veux un site, je met http://example.org ou un prénom je met john doe) ou je répète le label ? Ou réponse D ?
Merci du partage d'expérience.

Bonjour!

Le placeholder sert à fournir un indice supplémentaire afin de remplir le champ. Généralement, c'est soit un exemple, soit une courte explication. Dans pas mal de cas, le placeholder ne sert pas à grand chose et il vaut parfois mieux l'omettre pour ne pas rajouter des informations non nécessaires.

Quelques exemples:

<label>Adresse du site: <input type="text" placeholder="http://www.monsite.com"></label>
<!-- Ici mettre un placeholder renseigne sur le formatage demandé à l'aide d'un exemple -->

<label>Date de naissance: <input type="text" placeholder="jj-mm-aaaa"></label>
<!-- Ici on indique le formatage demandé -->

<label>Nom: <input type="text" placeholder="François Pignon"></label>
<!-- Ici on indique que l'on demande un nom sous la forme «prénom nom» -->

<label>Prénom: <input type="text"></label>
<!-- Prénom semble suffisamment clair -->

<label>Recherche: <input type="text" placeholder="Introduisez un ou plusieurs termes"></label>
<!-- Donner une indication supplémentaire -->

<label>Station de départ: <input type="text" placeholder="Nom/code"></label>
<!-- Donner une indication supplémentaire -->

Modifié par kustolovic (05 Jan 2014 - 21:36)

+1 pour la réponse de custolovic. Le placeholder est un bon endroit pour mettre un exemple montrant le format attendu. C'est généralement plus utile et beaucoup mieux compris qu'une tonne d'explications détaillées. De plus il est inutile de doubler le label, ça ne rendra souvent pas les choses plus claires pour l'utilisateur.

Par exemple, beaucoup de gens non informaticiens confondent adresse URL et adresse e-mail ! Si en guise de placeholder tu as http://www.example.com/ ou john.doe@example.org, ça leur permettra de se dire très rapidement ah, c'est l'adresse qui commence par http, ou ah oui, c'est l'adresse avec le @. Pareil pour les dates et les divers numéros (téléphone, banque, assurances, etc.), les gens fonctionnent beaucoup grâce aux exemples et ça leur permet notamment rapidement de savoir s'il faut mettre des espaces et autres - / . : et j'en passe, ou pas de séparateurs... c'est le genre de chose qu'on ne sait jamais parce que c'est tellement différent d'un site à l'autre que plus personne ne s'y retrouve.


S'il y a besoin d'explications plus détaillées sur comment remplir un champ, le mieux reste de les donner dans le texte, juste avant, ou juste après, ou alors renseigner aria-description et s'arranger pour que cette description s'affiche en info-bulle (aria-description est bien adapté pour des info-bulles d'explications, mais il faut se rappeler qu'il n'est perçu que par les lecteurs d'écran et inversément que les utilisateurs de lecteur d'écran n'ont pas de moyen simple de déclencher l'affichage des info-bulles).

Merci pour vos réponses.

ohweb a écrit :
En même temps si de base le langage employé par le webmaster est mauvais il ne faut pas s'étonner de ce genre d'erreur du visiteur, c'est à nous, administrateur du site, intégrateur ou développeur de faciliter la compréhension du champ dès le départ et ce sans avoir besoin d'user d'artifices comme placeholder, si le langage est clairement adéquat dès le départ : "site internet" , "adresse email", l'internaute n'aura aucun risque de confondre "email" avec "url", puisque vous lui parlez sa langue, et non le charabia informatique qui le perd.

Toi tu n'as jamais fait de SAV ! Entendu x foix :
SAV : Mr c'est quoi l'adresse de votre site internet ?
Client : monadres@wanadoo.fr

ohweb a écrit :
En même temps si de base le langage employé par le webmaster est mauvais il ne faut pas s'étonner de ce genre d'erreur du visiteur, c'est à nous, administrateur du site, intégrateur ou développeur de faciliter la compréhension du champ dès le départ et ce sans avoir besoin d'user d'artifices comme placeholder, si le langage est clairement adéquat dès le départ : "site internet" , "adresse email", l'internaute n'aura aucun risque de confondre "email" avec "url", puisque vous lui parlez sa langue, et non le charabia informatique qui le perd.

"url", "adresse url", "site internet", "adresse du site", aucun de ces intitulés n’est clair pour tout le monde. Cela dépend de la cible, entre autres. Le placeholder sert juste d’ajout, d’information supplémentaire, de sorte que son absence ne nuira pas, mais sa présence permettra une compréhension plus rapide. Mais l’intitulé reste important mais

ohweb a écrit :
Je trouve que placeholder a de l'utilité pour économiser de l'espace, typiquement pour une barre de recherche.

Et c’est typiquement une mauvaise manière d’utiliser placeholder. Placeholder ne remplace pas le label. De plus supprimer de l'information utile pour gagner 15 pixels est plutôt une preuve de mauvaise conception graphique généralement. (oui je sais c’est à la mode et tout le monde le fait, ça en reste pas moins une mauvaise pratique).
Modifié par kustolovic (24 Jan 2014 - 17:48)

a écrit :
même si pour ma part je préfère renseigner ce type d'information en texte dur à côté du champ pour assurer la compatibilité avec IE8-9.

Les deux sont importants je pense. Mème en mettant à part les problèmes de compatibilité, il y a des gens qui fonctionnent mieux avec la pratique (exemples), et d'autres avec la théorie (représentation symbolique du format attendu).

a écrit :

Je trouve que placeholder a de l'utilité pour économiser de l'espace, typiquement pour une barre de recherche.

Et c’est typiquement une mauvaise manière d’utiliser placeholder. Placeholder ne remplace pas le label.
De plus supprimer de l'information utile pour gagner 15 pixels est plutôt une preuve de mauvaise conception graphique généralement. (oui je sais c’est à la mode et tout le monde le fait, ça en reste pas moins une mauvaise pratique).

Kustolovic +1. économiser de l'espace, c'est je dirais même à l'opposé du but initial de placeholder tel qu'imaginé par les concepteurs du W3C.

Ils auraient même dû appeler ça hint, ça aurait sûrement rendu les intégrateurs moins confus. Label et placeholder sont complémentaires, pas concurrents.

ET je suis aussi d'accord avec la deuxième partie, c'est pas parce que c'est tendance et que tout le monde le fait que c'est forcément bien et que c'est absolument ce qu'il faut faire. Vive pas la technique mouton.

EDIT: zut, deux quotes imbriqués, ça ne fonctionne pas.
Modifié par QuentinC (24 Jan 2014 - 23:17)

kustolovic a écrit :

"url", "adresse url", "site internet", "adresse du site", aucun de ces intitulés n’est clair pour tout le monde. Cela dépend de la cible, entre autres. Le placeholder sert juste d’ajout, d’information supplémentaire, de sorte que son absence ne nuira pas, mais sa présence permettra une compréhension plus rapide.

Je n'ai pas parlé des intitulés dont tu parles, j'ai dit que si le webmaster met "adresse url" (ce qui veut rien dire d'ailleurs) et adresse email, effectivement il peut créer un problème de compréhension. Et que si il met d'emblée "site internet" et "adresse email", c'est déjà plus clair. Ce que j'ai dit c'est donc que il faut pas utiliser placeholder pour combler un langage baclé au départ, il faut d'abord réfléchir aux noms qu'on donne et ensuite compléter avec placeholder.

a écrit :
Et c’est typiquement une mauvaise manière d’utiliser placeholder. Placeholder ne remplace pas le label. De plus supprimer de l'information utile pour gagner 15 pixels est plutôt une preuve de mauvaise conception graphique généralement. (oui je sais c’est à la mode et tout le monde le fait, ça en reste pas moins une mauvaise pratique).

Tu n'as pas compris ce que j'ai dit, je dis que placeholder sert également pour une barre de recherche qui est déjà illustrée par une icône loupe par exemple, avec un champ de saisie, dans ce cas il devient inutile de rajouter "Recherche", je dis juste que ça peut servir dans ce genre de cas; sinon cela ne sert à rien. Et il n'est aucunement question de supprimer une information, un attribut alt="" sur l'icône loupe contient toujours "Recherche", et le champ est également de type search.
Modifié par ohweb (27 Jan 2014 - 10:10)

a écrit :
Tu n'as pas compris ce que j'ai dit, je dis que placeholder sert également pour une barre de recherche qui est déjà illustrée par une icône loupe par exemple

Qu'il y ait une icône illustrative ou pas, ça ne change rien, le label est indispensable dans tous les cas et le placeholder n'a pas pour objectif de s'y substituer.

JE dis peut-être des bêtises, mais je pense qu'il doit y avoir des gens pour qui une icône de loupe n'évoquera rien. Le mot "Recherche" ou une invite type "Entrez un ou plusieurs termes" est dans l'idéal aussi important que l'illustration, à mon avis.

Et oui. Je connais ça...