web-dev-qa-db-fra.com

Formulaires: exemple de description - pour l'étiquette ou le champ? quel devrait être le placement?

J'ai besoin de placer un exemple de texte d'entrée [[email protected]] pour un champ ou une étiquette. Four examples of places to display example format of acceptable input (example is email address)

Où dois-je placer un exemple (ou un exemple) de description d'entrée? Ici, j'ai montré quatre exemples d'une entrée d'ID de messagerie pour discussion. Les champs de mon cas d'utilisation sont cependant différents.

S'il vous plaît, aidez-moi à choisir la meilleure option et à comprendre le rationnel derrière la décision. Je recherche des contributions du point de vue de l'utilisabilité et de l'accessibilité.

7
Spicerjet

Je pense que tout cela est assez fonctionnel, mais il y a des avantages et des inconvénients pour chacun:

1er: peut nécessiter beaucoup d'espace vertical.

2nd: ne consomme aucun espace supplémentaire, mais disparaîtra une fois que l'utilisateur entrera dans ce champ. C'est assez populaire cependant, et ce n'est pas une mauvaise pratique.

rd: encore une fois, si l'exemple de texte est plus long, cela peut vous forcer à trop faire le côté gauche, et cela peut sembler mauvais si vous décidez d'aligner à droite les noms de champs (ce que je suggérerais , au fait).

4th: à nouveau (et même dans votre exemple), cela vous fait étendre le champ lui-même, car dans ce cas, utiliser un texte d'exemple plus long ressemblera autrement.

Je suggère de faire autre chose et d'utiliser l'espace ci-dessous chaque champ:

enter image description here

8
Dominik Oslizlo

Allez avec la 2e option. C'est une pratique standard suivie par de nombreux sites Web. Il permet montrant des exemples en contexte ce qui est mieux que de donner des instructions à suivre par l'utilisateur. par exemple: entrez l'adresse e-mail ci-dessous, exemple: [email protected]

  • Rend le texte visiblement plus clair (gris) que la couleur par défaut.
  • Facultatif: donnez un aspect visuel supplémentaire, comme changer la couleur de la bordure/arrière-plan de la zone de saisie pour mettre en surbrillance l'entrée au point. (Regardez la barre de recherche dans les échanges de pile)
4
rk.

Je suis d'accord avec Dominik Oslizlo,
dans votre exemple, la description doit être placée sous le champ de texte. Vous pouvez également lire Guide détaillé de l'utilisabilité des formulaires Web

1
Awesh

Je ne sais pas si la question est spécifique ou générale, mais dans ce cas très particulier, je ne recommanderais pas du tout d'utiliser une description.

Vous voulez que l'utilisateur mette son adresse e-mail. Si vous considérez qu'elle peut utiliser cette adresse pour une raison quelconque dans votre candidature, alors elle sait à quoi ressemble une adresse e-mail .

Vous voulez montrer un exemple au cas où l'e-mail est mal orthographié et l'utilisateur a oublié quelque chose. Et seulement dans ce cas:

Ne punissez pas ceux qui l'ont bien fait avec un texte peut-être déroutant, certainement déconcentrant.

Par conséquent, vous souhaitez afficher un message uniquement lorsque l'entrée ne respecte pas le format souhaité.


Si vraiment vous avez peur que l'utilisateur ne sache pas ce qu'elle fait (petits enfants, personnes âgées ...) jetez un œil à inscription sur Twitter . Ils aident vraiment, avec un peu de condescendance mais pas trop.

enter image description here

1
Gildas Frémont

Il y avait une étude réalisée par UX . Ils utilisent l'eye-tracking et l'association sur le terrain dans leur étude.

D'après les résultats de notre deuxième test, nous savions que plus une étiquette est proche de son champ de saisie, plus rapidement les utilisateurs pouvaient passer de l'étiquette au champ de saisie. Ainsi, nous n'avons pas été surpris lorsque nous avons remarqué que la plupart des fixations se trouvaient directement sur les champs de saisie plutôt que sur les étiquettes, comme le montrent les données d'eye-tracking de la figure 3.

Contrairement à cette étude n autre article le démontre:

Alignement des étiquettes: haut vs gauche vs droite Contrairement aux conseils courants, au-dessus du champ de saisie n'est pas toujours l'emplacement le plus utilisable pour une étiquette. C'est idéal si vous souhaitez que les utilisateurs remplissent le formulaire le plus rapidement possible. Mais il y a des moments où vous voudrez les ralentir délibérément, afin qu'ils remarquent et lisent attentivement les étiquettes.

1
AbsoluteƵERØ