Sur les formulaires, le texte d'espace réservé en ligne est-il meilleur qu'une étiquette à l'extérieur de chaque champ?

Question

Je connais la recherche sur le placement des étiquettes à gauche ou au-dessus. J'ai tendance à aller à droite justifié avec l'étiquette à gauche du champ pour mes conceptions de formulaire.

Cependant, le texte d'espace réservé en ligne est tendance et il réduit davantage l'encombrement des pages. Existe-t-il des recherches sur son utilisation? Quelqu'un a-t-il mené des études d'utilisabilité sur ses formulaires qu'ils peuvent partager?

Liens de recherche:

http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php

http://www.lukew.com/resources/articles/web_forms.html

Answer 1

Le problème majeur avec le texte d'espace réservé en ligne est qu'après avoir rempli un certain nombre de champs, il est difficile, voire impossible, de déterminer quel était le but initial de ce champ.

Supposons, par exemple, que vous remplissez un formulaire et décidez de modifier votre saisie, de sorte que vous l'effaciez, puis que vous soyez détourné par un appel téléphonique d'autre chose. Existe-t-il un moyen de savoir à quoi ce champ était destiné sans actualiser la page?

Avec une étiquette alignée à droite ou en haut (ou à gauche), il est toujours clair quel est l'objectif d'un champ.

Voici un lien vers un article qui traite des inconvénients du texte d'espace réservé . Il ne parle pas de l'opportunité de l'utiliser seul, mais il parle des complications qui peuvent être créées en l'utilisant. Les points de discussion vont des utilisateurs qui n'effacent pas complètement le texte d'espace réservé à l'erreur de prendre le texte d'espace réservé comme un champ rempli:

Comme les utilisateurs travaillent sur la plupart des formulaires:

Ils voient une boîte vierge. Ils tapent. La boîte semble maintenant remplie. Chaque fois que cela se produit, les utilisateurs apprennent que

• les cases à remplir sont vides
• les cases contenant du texte sont déjà remplies

Answer 2

Il y a eu quelques développements sympas pour les widgets depuis que cette question a été posée.

Le vieux monde

• Les concepteurs devaient choisir entre placeholder only, label only, ou label + placeholder.
• Chacun a ses inconvénients:
  • Placeholder only est problématique car la signification du champ est obscurcie lorsqu'elle est remplie (voir les autres réponses).
  • Label only est problématique car (1) la forme occupe beaucoup d'espace vertical ou horizontal, ce qui est problématique pour les appareils mobiles visuellement massifs; (2) le contraste de répartition étiquette/entrée/étiquette/entrée peut perturber le flux visuel, en particulier lorsque l'utilisateur arrive pour la première fois sur le formulaire et doit traiter les champs.
  • Placeholder + label présente un mur de texte aux utilisateurs, ce qui représente beaucoup de charge cognitive.

---

Aujourd'hui

En examinant la micro-interaction d'entrée, les concepteurs ont réalisé que il n'y a aucune raison qu'un espace réservé ne puisse pas également être une étiquette .

Voici une démonstration d'une entrée hybride utilisée dans Google Material Design :

Dans le cas où ce lien vers la démo se briserait à l'avenir, l'entrée ressemblerait à ceci: 

Dans de nombreuses situations (mais pas toutes!), Ces widgets hybrides peuvent fournir les avantages de mise en page simplifiée d'un espace réservé, tout en conservant les meilleurs avantages d'une étiquette.

Answer 3

Les champs de formulaire peuvent avoir à la fois des étiquettes et du texte d'espace réservé. Ce sont deux choses différentes.

Tous les champs du formulaire doivent avoir des étiquettes. Tous les champs ne nécessitent pas de texte d'espace réservé.

Vous pouvez également positionner une étiquette sur le champ afin qu'elle ressemble au texte d'espace réservé, mais reste une étiquette réelle. Vous pouvez également masquer l'étiquette et n'afficher que le texte de l'espace réservé, mais cela serait gênant pour un lecteur d'écran (car il lirait les deux).

Donc, tout cela dit, vous devez:

• avoir toujours une étiquette
• si vous ne voulez pas que l'étiquette soit en dehors du champ, vous devez la positionner visuellement à l'intérieur du champ plutôt que d'utiliser du texte d'espace réservé. Et puis ajoutez le javascript approprié pour faire fonctionner l'interaction.
• n'oubliez pas que la balise label et l'attribut placeholder sont conçus à des fins différentes en termes de contenu et d'accessibilité. Les espaces réservés ne remplacent pas les étiquettes.
• Les espaces réservés peuvent causer plus de problèmes que de solutions

Les problèmes les plus courants que je rencontre que j'aime essayer de résoudre:

• attribut d'espace réservé utilisé à la place de la balise label. Si le texte d'espace réservé agit comme une étiquette pour le champ, il doit s'agir d'une balise d'étiquette réelle .
• Des espaces réservés qui répètent inutilement l'étiquette. Un exemple courant que je rencontre est, disons, un champ intitulé "Nom" et le texte de l'espace réservé indiquant "Entrez votre nom".

Answer 4

La réponse dépend de la fréquence à laquelle l'utilisateur touche les commandes:

Si la personne utilise souvent le formulaire, vous pouvez lui expliquer ce qu'est chaque domaine. La mémoire musculaire prend le relais et ils arrêtent de lire les étiquettes; interne ou externe. C'est la raison pour laquelle gMail utilise des espaces réservés. Les gens utilisent gMail tous les jours et surmontent la courbe d'apprentissage des espaces réservés.

Si un utilisateur ne voit le formulaire qu'une seule fois, il est impératif que le formulaire utilise ses connaissances a priori sur le comportement des formulaires sur le Web. Il y a très peu de cas d'utilisation où l'amélioration esthétique l'emporte sur le détriment de l'utilisabilité.