Pour aider un utilisateur à saisir des données dans un <input>
champ, nous prévoyons de fournir des info-bulles et des espaces réservés. Je voulais comprendre les directives et les normes sur "quand" utiliser placeholder
contre tooltips
. Et en général, comment placeholder
ou tooltip
fournit-il une meilleure assistance que label
et une sorte de help
. Tous les exemples et explications seront utiles.
Lorsque vous utilisez placeholder
, l'élément d'information, l'aide ou l'exemple qu'il essaie de transmettre à l'utilisateur est masqué à partir du moment où un utilisateur tape quelque chose. Pour révéler les informations, l'utilisateur doit effacer le champ (par exemple, couper le texte dans le presse-papiers, à coller après la lecture). Je suis même tenté de dire que la plupart des utilisateurs ne seront pas en mesure de trouver un moyen de récupérer le texte de l'espace réservé, mais je n'en ai aucune preuve.
En ce sens, il est conseillé de préférer une info-bulle à placeholder
car le texte de l'info-bulle peut être affiché à tout moment, sans avoir à modifier le texte déjà tapé. Cependant, une info-bulle nécessite une action explicite (survol de la souris, entrée focus) pour révéler son contenu alors qu'une étiquette est toujours visible.
Donc, il faut considérer les aspects de l'étiquette par rapport à l'infobulle; utilité, longueur, etc. À mon avis (pas si humble), utilisez placeholder
avec parcimonie, et utilisez plutôt des étiquettes significatives. Si un champ nécessite une explication ou un exemple plus long, fournissez-lui une info-bulle.
Le texte d'espace réservé est utile pour montrer un exemple unique du type d'entrée que vous souhaitez. Le meilleur exemple auquel je peux penser est celui des dates, car il existe de nombreuses façons d'exprimer la date. Votre texte d'espace réservé peut facilement afficher yyyy/mm/dd
et donnez une indication sur le type d'entrée souhaité. Cependant, le texte de l'espace réservé disparaîtra à un moment donné, donc c'est OK pour un indice, mais pas d'instructions.
Les info-bulles ne sont pas aussi limitées par la taille et la forme que le texte d'espace réservé, et elles peuvent être utilisées pour des instructions ou des informations plus élaborées. Par exemple, où vous auriez pu avoir un exemple de mise en forme d'un horodatage comme indice, votre info-bulle peut dire: "Please enter a date in yyyy/mm/dd format. You can also enter N/A or leave the field blank."
Vous devez fournir un indice à l'utilisateur afin qu'il sache où placer la souris pour afficher l'info-bulle ou au moins utiliser un emplacement standard.
Lorsque les info-bulles et les espaces réservés vous indiquent ce que vous êtes censé mettre dans une entrée, l'étiquette vous indique ce qu'est l'entrée. Est-ce une date de naissance? Une date de début? Date limite, etc? L'étiquette doit être courte et indiquer clairement ce que les données représentent.
Une note rapide sur les étiquettes par rapport aux espaces réservés - si vous ne pouvez pas penser à un espace réservé plus descriptif ou utile que l'étiquette, n'en utilisez pas. Il n'est pas utile d'étiqueter un champ "Prénom", puis de lui attribuer un espace réservé de "prénom". Une étiquette "Anniversaire" et un espace réservé de "aaaa/mm/jj" ont du sens, car l'espace réservé vous indique quelque chose de nouveau.
Existe-t-il des normes? Non, mais il existe des bonnes pratiques * pour chacune en fonction de leurs propriétés intrinsèques. Je vais en énumérer quelques-unes qui me viennent à l'esprit. Deux bons, 1 mauvais.
Espaces réservés:
Sont bonnes lorsque l'espace est un problème car elles combinent des méta-informations sur l'entrée à l'intérieur de l'élément d'entrée lui-même.
Ajoutez une utilité supplémentaire lorsque le texte de l'espace réservé fait allusion à une structure d'entrée telle que (xxx) xxx-xxxx
Peut confondre les utilisateurs en leur faisant croire que le texte est déjà rempli.
Info-bulles
Ils sont également bons lorsque l'espace est un problème car ils prennent des méta-informations sur l'entrée en dehors de la structure du formulaire. Réduisant ainsi l'encombrement et préservant l'espace pour les éléments concernés.
Sont un bon choix pour fournir des informations supplémentaires sur l'entrée descriptive. Par exemple, "Numéro de téléphone: [] info-bulle:" Nous ne vous appellerons que si votre commande ne passe pas "
Ne fonctionne pas bien dans les environnements mobiles et peut distraire les utilisateurs de leur action prévue.
* Je laisse la meilleure solution à une tâche utilisateur l'emporter sur les "meilleures" pratiques. En fait, c'est comme ça qu'on en arrive.
J'espère que cela t'aides.