web-dev-qa-db-fra.com

Pourquoi les étiquettes sont-elles plus importantes que les valeurs dans les formulaires?

C'est quelque chose que je me suis toujours demandé: lors de la conception d'un formulaire, pourquoi les étiquettes contiennent-elles plus poids que de valeurs lorsque les valeurs sont importantes?

Considérez les exemples suivants (la colonne de gauche est les champs du formulaire, la colonne de droite pour la sortie):

enter image description here

L'exemple 1 est l'approche la plus courante: L'étiquette a plus de poids que la valeur dans le champ de saisie (en fait, c'est l'approche SE)

L'exemple 2 est ce qui semble le plus logique: la valeur est plus importante que l'étiquette. Si certains sites utilisent cette approche, c'est loin d'être le plus courant.

L'exemple 3 détient le même poids pour les deux éléments. Je pense que c'est assez déroutant, mais d'un autre côté, les données (valeur) ne sont pas moins importantes que les étiquettes. Notez que même si j'ai atténué les deux options, cela pourrait être du noir pur, l'important est que l'étiquette et les valeurs aient le même style et la même taille (Maintenant que je le vois, les valeurs sont plus petites, mais pensez-y comme si elles étaient de la même taille, c'est juste une erreur que j'ai commise)

L'exemple 4 est ce que j'ai tendance à utiliser de nos jours: les valeurs sont bien plus importantes que les étiquettes. Je pense que c'est la chose la plus logique à faire, mais c'est l'option la moins populaire de toutes.

Pourquoi est-ce? Quel est le raisonnement derrière les étiquettes plus importantes que les valeurs? Qu'est-ce que je manque ici? Je demande en général, des cas pas très particuliers.

De plus: les sorties de formulaire devraient-elles "hériter" des styles d'entrée pour la cohérence?

Édition importante : alors que certaines réponses mentionnent les exemples comme placeholders, les images montrent l'état de rempli = champs, donc le processus de numérisation a eu lieu avant de remplir ces champs, désolé pour l'erreur

5
Devin

Question interessante! J'ai toujours (distraitement: P) mis l'accent sur les labels et cela m'a finalement amené à me pencher sur la question car je suis moi-même UX Engineer.

C'est ce que j'ai pu rassembler et ceux-ci sont uniquement basés sur mes recherches et pourraient donc ne pas être crédibles. Mais en tant qu'utilisateur, voici pourquoi je pensais que les étiquettes devaient être soulignées:

Besoin de concentration

Chaque écran doit avoir des points de focalisation qui aident l'utilisateur à naviguer. Le fait d'avoir des informations qui ne sont pas notées, marquées, mises en surbrillance, étiquetées, à puces ou titrées fait perdre au lecteur de la concentration, ce qui réduit à son tour la lisibilité.

C'est pourquoi je me sens Exemple 3 ne sera pas bon et moi aussi "je me sens confus"

Concentrez-vous sur quoi

Les étiquettes sont comme les lignes blanches/jaunes sur l'autoroute. Ils ne sont pas entièrement obligatoires et n'empêcheraient pas les conducteurs de violer les voies mais sans eux, le chaos (et bien plus) est une certitude!

Les étiquettes fournissent une orientation à l'utilisateur. Prenez ce scénario comme exemple. Supposons que j'ouvre une page de produit sur un site de commerce électronique et que je souhaite vérifier ses dimensions.

Infos dont j'ai besoin -> 30x40x12ft ou 15x10x5ft ou 10x10x15ft ou = ... (je ne sais pas vraiment)

Ce que je rechercherai -> Dimension

Par conséquent, le mot "Dimension en gras" m'aiderait car je SAIS que ce serait sur la page

Le formulaire ci-dessous est propre mais manque de focus

Example of a confusing form

Le formulaire ci-dessous est compliqué mais j'ai l'impression qu'il m'aide à naviguer facilement

Example of a focused form

6
Shreyas Tripathy

Les étiquettes ont plus de poids parce que les gens ne lisent pas les informations, ils scannent les informations.

Si vous numérisez, que recherchez-vous:

a) Pâtes Alfredo, Spaghetti Carbonara, Spaghetti à la bolognaise b) Plats à base de nouilles

Vous opterez pour l'option b si vous souhaitez trouver l'option souhaitée dès que possible.

Lors de la conception de formulaires, c'est exactement comme ça, vous recherchez les étiquettes et la plupart du temps vous ne lisez même pas les valeurs, généralement vous ne faites cela que lorsque quelque chose s'est mal passé.

tl; dr: les étiquettes aident l'utilisateur à scanner

3
Pectoralis Major

Les étiquettes sont mises en valeur car elles sont plus importantes pour les utilisateurs que la valeur elle-même. Les utilisateurs recherchent des mots dans des étiquettes qui leur indiquent à quoi sert le formulaire et quelle action est attendue d'eux. Ils sont surtout intéressés à simplement remplir le formulaire aussi rapidement et sans effort que possible. Pour ce faire, ils recherchent - et non lisent - tout ce qui ressemble à une étiquette.

Pour la plupart des gens, cela signifie qu'ils recherchent des mots ou des phrases courtes au-dessus ou à côté d'un champ de saisie. Dans votre exemple de (4), les yeux sont attirés très fortement sur le contenu du champ de saisie. Et c'est là que ça devient dangereux.

field emphasised

L'utilisateur va maintenant probablement lire l'espace réservé, puis l'étiquette, puis revenir à l'espace réservé pour le modifier. Beaucoup de va-et-vient si vous avez une forme plus longue. À lui seul, cela entraîne plus de temps et d'énergie dépensés sur chaque champ, mais il existe un autre risque. Vous iriez à l'encontre de l'attente de l'utilisateur de ne rencontrer que du texte souligné dans ce champ lorsqu'il est déjà considéré comme rempli. C'est un problème parce que beaucoup de gens regardent tout ce qui semble pré-rempli. Plus à ce sujet ici .

label emphasised

Ce format permet aux utilisateurs de numériser naturellement de haut en bas.

Bien sûr, les utilisateurs sauront à un moment donné comment fonctionne votre formulaire particulier, mais cela nécessite beaucoup plus d'énergie pour le faire, ce qui peut entraîner une pire conversion sur votre formulaire. Et ce n'est généralement pas quelque chose qu'une entreprise voudrait risquer.

3
Wendy Wojenka

ne étiquette pour un contrôle de formulaire aide tout le monde à mieux comprendre son objectif.

Par exemple, la cuisine peut être un passe-temps, une profession, un emploi à temps partiel. Si quelqu'un cherche un cuisinier professionnel sur le portail d'emploi; la première chose qu'ils examineront sera le Label de profession, puis la valeur.

0
DPS