Formez la position de l'étiquette pour une meilleure utilisation

16

Je crée une forme qui demandera un visiteur pour leur firstname, middle initialet lastname. Je veux que ces champs de texte soient tous en ligne, mais où dois-je placer les étiquettes? À gauche, en haut ou sous les champs.

Je recherche la meilleure approche du point de vue de l'utilisabilité.

html usability user-input forms Shane Stillwell
la source
N'est-ce pas plus approprié pour uxexchange.com? ( uxexchange.com )
Bobby Jack
Wow, je ne savais pas que uxechange.com existait, merci. À en juger par le nombre de votes positifs sur cette question, c'est certainement dans l'esprit des Pro Webmasters.
Shane Stillwell
Oui - c'est un peu un «problème». Je crois que uxexchange a été mis en place en utilisant l'ancien modèle SO. Les sites utilisant le nouveau modèle, tels que les webmasters, semblent attirer beaucoup plus l'attention. Donc, quelque chose de plus pertinent pour uxexchange finit par avoir plus de succès sur les webmasters. Je ne sais pas quelle est la solution - migrer uxexchange?
Bobby Jack

Réponses:

10

Jetez un œil à cette étude réalisée par UXmatters . Il est assez détaillé, comprend des données sur le suivi des yeux et conclut que les étiquettes sur le dessus sont globalement la meilleure solution.

Il y a un article similaire de Luke Wroblewski , également assez détaillé. Les deux articles méritent d'être lus!

Grant Palin
la source
+1 J'allais publier ces mêmes ressources. Vraiment, toute réponse à cette question devrait inclure des études.
Virtuosi Media
C'est ce que je cherchais, quelques comparaisons entre gauche et haut. Je suis sûr qu'une grande partie est subjective, mais néanmoins, il devrait y avoir des mises en page qui sont légèrement meilleures toutes choses égales par ailleurs. Merci.
Shane Stillwell
Ce qui est également intéressant à propos de l'article UXmatters, c'est qu'ils ont trouvé que les étiquettes en gras distrayaient les visiteurs et ... "Les étiquettes en gras étaient plus difficiles à lire et à percevoir pour les utilisateurs - probablement parce qu'il y avait plus de confusion visuelle entre le texte en gras et les lourdes bordures adjacentes des champs de saisie. " Bon à savoir.
Shane Stillwell
ne pas être un nelly négatif, mais uxmatters.com n'a pas de section "top articles" ni même utilise les outils Google pour les webmasters afin que je puisse trouver leurs articles les plus lus, ce qui n'est pas très pratique pour les utilisateurs!
Neil McGuigan
5

La chose la plus importante est d'être cohérent avec le reste de votre site. En général, la plupart des sites Web font les étiquettes à gauche des champs de texte. Dans cette cause, ce serait une longue description alors assurez-vous d'avoir de la place et ça coule bien.

Si à gauche ne semble pas à droite ou qu'il n'y a pas de place pour le faire, alors je ferais ci-dessus. Comme c'est très clair.

La seule méthode que j'éviterais serait de placer les étiquettes sous les champs de texte. lorsque les étiquettes sont sous les champs, c'est plus déroutant.

Ben Hoffman
la source
3
Dans tous les cas, n'oubliez pas l' forattribut.
Pierre-Alain Vigeant
4

Normalement, pour votre situation, en haut ou à gauche est le meilleur. Assurez-vous simplement que l'étiquette vient avant le champ de saisie pour l'accessibilité.

Il existe encore de nombreuses façons de mettre en page une page et d'être accessible.

Les étiquettes de formulaire peuvent vraiment apparaître à peu près partout où vous le souhaitez tant qu'elles le font depuis. Ce recours vaut le détour, http://patterntap.com/tap/collection/forms

Kevin
la source
3

Deux options sont considérées comme les meilleures:

  • les étiquettes à gauche du champ, rincées à droite afin qu'elles soient proches de l'entrée.
  • étiquettes au-dessus du champ lui-même

une autre chose importante à noter pour la convivialité pour vous assurer que vous utilisez l'attribut for de l'étiquette, de sorte que cliquer sur l'étiquette se concentre sur le champ qu'elle étiquette.

GSto
la source
1

Réponse: Aucune de ces réponses. Utilisez du texte d' espace réservé à l'intérieur du champ lui-même. L'attribut d'espace réservé est une partie intégrée de HTML-5.

Sinon, je dirais de le placer au-dessus des champs, aligné à gauche.

Adam L Davis
la source
0

C'est un peu tangent - mais veuillez ne pas utiliser prénom / nom / initiale. Le nom de tout le monde ne tombe pas dans ce groupe soigné.

Me citant sur StackOverflow:

De nombreuses cultures asiatiques privilégient le nom de famille , car la famille est considérée comme plus importante que l'individu.

Notant qu'il y a un bon nombre de personnes qui utilisent un nom qui n'est pas celui attribué par leurs parents, j'ai utilisé le schéma suivant avec un certain succès:

Nom complet (tel qu'il est normalement écrit pour l'adressage du courrier); Nom de famille; Connu comme (le nom couramment utilisé dans la conversation).

Par exemple:

Nom complet: William Gates III; Nom de famille: Gates; Connu comme: Bill

Nom complet: Soong Li; Nom de famille: Soong; Connu comme: Lisa

Voir /programming/259634/splitting-a-persons-name-into-forename-and-surname/259694#259694 pour plus.

Bevan
la source
Je vois la valeur de votre recommandation, mais la question clé sera "qui est votre public cible?" Si 99% de mon public sera américain, je choisirais Firstname / MI / Lastname. Je pense que de nombreux Américains ne comprendraient pas immédiatement ce que serait un nom de famille. Comme l'a dit @RandomBen, vous devez être cohérent et la plupart des sites américains utilisent Firstname / MI / Lastname.
Shane Stillwell