Alignement des étiquettes et des zones de texte. Lire le cas
Remarque: J'ai lu cette question vaguement similaire et ses réponses: Pourquoi les étiquettes de champs alignés à droite pourraient-elles être meilleures?
Cas: J'ai un long (environ 10-15 champs sous 1 forme) forme B2B dans lequel j'ai décidé d'avoir différentes tailles des zones de texte pour prendre les entrées selon leur taille de données d'entrée attendue/longueur. ILe formulaire est censé être rempli par des responsables financiers/commerciaux - et je veux m'assurer qu'ils ne le font pas; dans toute sorte de hâte/hâte; faire toutes sortes d'erreurs.
Question: J'ai suivant 6 (référez-vous à l'image ci-jointe) options possibles d'aligner les étiquettes avec les text_boxes. Lequel devrais-je choisir? Pourquoi?
Luke Wroblewski (alias LukeW) a écrit un article sur la position différente des étiquettes. Comme beaucoup de choses dans UX Design, c'est une question sur les avantages et les inconvénients . http://www.lukew.com/ff/entry.asp?1502
Mateo Penzo a ensuite fait un tour d'horizon pour tester l'article de Luke sur le placement des étiquettes: http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
Pour les étiquettes alignées à gauche au-dessus du champ:
Placer une étiquette juste au-dessus de son champ de saisie a permis aux utilisateurs de capturer les deux éléments avec un seul mouvement des yeux.
Pour les étiquettes alignées à gauche:
Des distances excessives entre certaines étiquettes et leurs champs de saisie ont forcé les utilisateurs à prendre inutilement plus de temps pour interagir visuellement avec le formulaire
Pour les étiquettes alignées à droite:
Le bon alignement des étiquettes a réduit le nombre total de fixations de près de la moitié, ce qui montre que cette disposition a considérablement réduit la charge cognitive nécessaire aux utilisateurs pour terminer la tâche.
Donc, en fonction de vos options, 5 semble être le meilleur. Si votre solution doit être traduite pour une utilisation globale, envisagez de placer des étiquettes au-dessus du champ, simplement parce que la longueur des étiquettes augmente souvent lorsque vous traduisez dans certaines langues.
Bien que je n'ai pas de preuves scientifiques réelles avec des représentations graphiques comme SteveD ci-dessus (excellent post BTW), je passe généralement entre les étiquettes verticalement affichées et les étiquettes horizontales alignées à droite (et les champs alignés à gauche).
Ma règle générale est que si les étiquettes sont de taille similaire, j'ai tendance à suivre l'approche étiquette droite/champ aligné à gauche. De cette façon, la lisibilité n'est pas autant compromise et cela permet à l'utilisateur de mieux circuler dans le formulaire que vous souhaitez qu'il remplisse. Si les étiquettes sont de plusieurs tailles, il est préférable d'opter pour l'approche verticale des étiquettes. Il existe quelques exceptions à cette règle, principalement en fonction de la taille de la fenêtre d'affichage et du contenu du formulaire.
Instance # 1 - Lorsque vous affichez la page sur un appareil mobile , quelle que soit la conception d'origine, je passe généralement à étiquettes verticales. Étant donné que l'espace est un gros problème d'un côté à l'autre, les étiquettes verticales ont tendance à bien couler sur le petit écran.
Instance # 2 - Lorsque vous avez différentes longueurs d'étiquettes, mais ces étiquettes plus ou moins longues peuvent être divisées en différentes sections - J'utilise toujours l'approche étiquette alignée à droite/champ aligné à gauche. Par exemple, vous avez un tas de champs pour les informations de contact (par exemple, prénom, nom, adresse, numéro de téléphone, adresse e-mail). Ensuite, vous avez un ou deux champs demandant des informations plus détaillées (par exemple, Instructions spéciales d'expédition, Nom de jeune fille de la mère, etc.). Ces champs pourraient être ajoutés sous la première section séparés par une règle horizontale. De cette façon, les champs sont toujours sur la même page en utilisant la même mise en forme de base, mais l'espace supplémentaire et la règle horizontale aident à les assembler un peu plus facilement.
Avec tout cela à l'esprit, pour répondre directement à votre question, je serais d'accord avec SteveD ci-dessus et je dirais que Option 5 serait votre meilleur pari.
C'est une question d'utilisation.
En tant que personne qui a fait de la saisie de données dans le passé, je peux dire que les éléments les plus importants pour la saisie répétitive sont:
Bon ordre - les champs doivent être ordonnés pour correspondre soit à une relation logique, soit s'ils sont transférés à partir d'un support physique, ils doivent correspondre à l'ordre de lecture de ce support. Les organiser en fonction de leur ordre de stockage des données oblige l'humain à s'adapter en permanence à tout écart entre la façon dont son cerveau essaie de cartographier les informations et l'ordre préféré par la machine, ce qui augmente la charge cognitive, ralentit les choses et augmente la probabilité d'erreur.
Les étiquettes numérisables sont utiles car elles facilitent le suivi de votre emplacement dans la commande. Il est donc utile d'avoir des étiquettes dans une liste avec un Edge de numérisation facile.
Champs de saisie alignés à gauche - aide au placement du curseur. Avoir un emplacement visuel cohérent facilite le suivi du curseur et vous aide si vous devez repositionner votre emplacement avec la souris. Les champs alignés à droite sont cohérents lorsque vous parcourez la longueur de l'écran, mais ils sont visuellement plus éloignés des étiquettes, ce qui vous oblige à un tout petit peu plus de temps pour numériser l'élément.
Tous les éléments ci-dessus sont spécifiques à la saisie répétitive de données. Pour un formulaire occasionnel rempli une fois par un utilisateur, les étiquettes en ligne peuvent mieux guider l'utilisateur dans le processus. Mais les utilisateurs saisissant des données répétitives apprendront les formulaires, donc les choses qui facilitent l'orientation des données et les relations spatiales seront plus importantes à long terme.