Pourquoi les étiquettes de champ alignées à droite pourraient-elles être meilleures?
Pendant longtemps, j'ai utilisé des étiquettes alignées à gauche dans mes formulaires, comme ceci:
J'ai fait cela parce que je pensais qu'aligner les étiquettes à gauche facilitait la lecture de la liste des étiquettes par les lecteurs.
Cependant, j'ai trouvé mon axiome contesté récemment en regardant la vidéo du discours de Billy Hollis de NDC 2011 , dans lequel Billy affirme que les étiquettes alignées à droite sont simplement meilleures, comme ceci :
J'ai fait un tas de recherches et trouvé beaucoup de discussions, y compris cette question UX , qui compare et contraste les approches, mais rien de définitif.
En particulier, je n'ai pas pu trouver quoi que ce soit pour expliquer pourquoi Billy Hollis a changé son opinion d'alignement gauche à droite pour les labels (apparemment, il a changé de 2007).
Je pense que Billy est trop intelligent pour avoir fait le changement sans preuves - je suis donc intéressé à voir ces preuves par moi-même.
Luke Wroblewski a écrit à ce sujet dans Étiquettes de formulaire alignées en haut, à droite ou à gauche (avril 2007).
Dans ce document, il fait référence à des données oculaires d'un article de Matteo Penzo intitulé Label Placement in Forms (juillet 2006). Matteo a tiré plusieurs conclusions de cette étude, notamment que les étiquettes alignées à droite ont une charge de travail cognitive plus légère pour les utilisateurs:
Alignement des étiquettes - Dans la plupart des cas, lorsque vous placez des étiquettes à gauche des champs de saisie, l'utilisation d'étiquettes alignées à gauche impose une lourde charge de travail cognitive aux utilisateurs. Il est préférable de placer des étiquettes au-dessus des champs de saisie, mais si vous choisissez de les placer à gauche des champs de saisie, faites-les au moins alignés à droite.
Il est possible que Billy ait vu l'article de Luke et ait changé sa position en fonction de cela.
Certainement aligné à droite.
Vous pouvez voir cela comme une fonction des Gestalt Grouping Principles : les objets qui sont proches seront analysés visuellement et interprétés comme appartenant ensemble. De toute évidence, cela est utile pour que les gens puissent lire facilement de l'étiquette au champ de texte. Par conséquent, en alignant à droite les étiquettes à côté de leurs champs de texte correspondants, vous créez une lisibilité plus facile, car votre système visuel associe naturellement l'étiquette au champ.
Dans l'exemple que vous montrez, je déplacerais même les étiquettes légèrement plus près des champs de texte qu'elles ne le sont déjà, car les champs eux-mêmes sont plus proches les uns des autres (encore une fois, le regroupement implicite) que les étiquettes et les champs, et nous savons que la proximité est généralement le signal le plus important pour le regroupement ( Quinlan & Wilton, 1998 ). Il faut plus de temps au cerveau pour traiter le texte que pour prendre des décisions sur l'endroit où se trouvent les formes ("où?" Obtient généralement une réponse avant "quoi?"), Il vaut donc la peine de le rendre aussi simple que possible pour le lecteur, l'OMI.
Parfois, je positionne mes étiquettes immédiatement au-dessus ou parfois immédiatement à gauche des éléments du formulaire. Cela dépend simplement des contraintes d'espace de la page avec laquelle je travaille. Mais une fois que j'ai pris ma décision, je suis en accord avec elle.
Il y a quelques directives que je suis pour chaque cas:
- Si vous placez l'étiquette au-dessus de la zone de texte, assurez-vous de fournir un espacement ample sous la zone de texte. Vous ne voulez pas que l'utilisateur confonde les étiquettes car elles sont trop serrées.
- Si vous placez l'étiquette à gauche de l'élément de formulaire, toujours aligner à droite l'étiquette. Cela facilite beaucoup la connexion de l'étiquette à la zone de texte en un coup d'œil. Cela est particulièrement vrai lorsque les étiquettes varient considérablement en longueur.
Je crois que la chose la plus importante ici n'est pas pour l'utilisateur de pouvoir numériser les étiquettes rapidement comme s'il s'agissait d'une liste, mais plutôt d'associer les étiquettes à leurs éléments de formulaire respectifs aussi rapidement et sans effort que possible.
J'ai récemment mené une étude approfondie sur la convivialité de la conception de formulaires Web et voici mes principales conclusions:
Le meilleur alignement est autour d'un axe central (c'est-à-dire des étiquettes alignées à droite et des champs alignés à gauche).
Un alignement différent peut tout aussi bien fonctionner si la surbrillance du champ est utilisée (un contour coloré ou un surlignage sur le champ actuellement utilisé).
Les messages de validation des utilisateurs doivent être en ligne et intégrés avec des conseils d'aide et une confirmation - c.-à-d. Lorsqu'un utilisateur entre dans un champ, quelque chose apparaît à côté de lui expliquant quoi faire, et lorsqu'ils le quittent, ils obtiennent "il y a un problème" ou "c'est grand "(généralement sous forme de symboles comme les tiques et les croix).
Les boutons de continuation doivent être en bas à droite (malgré certaines théories avancées sur la base du suivi des yeux!), Doivent être en minuscules/phrase et doivent indiquer la direction (par exemple une flèche pointant vers la droite).
Bien sûr, j'ai appris beaucoup plus, mais j'espère que ces points clés ci-dessus vous aideront! Ils ne sont en aucun cas révolutionnaires, ils ne font que confirmer ce que nous pensions déjà savoir.
Il y a ne grande discussion de tous les côtés de cet argument à UX Matters.
La version courte est qu'il existe différentes situations où différentes méthodes fonctionnent le mieux. Je suis en train de créer un très long formulaire où la tâche la plus importante consiste à analyser la liste des champs pour celui dans lequel vous souhaitez entrer des données. Dans ce cas, j'ai opté pour l'alignement à gauche. Pour les formulaires plus courts ou les formulaires dans lesquels tous les champs doivent être remplis en séquence, l'alignement à droite est probablement préférable.
Les étiquettes plus proches des champs ont toujours été plus utilisables grâce au principe de proximité . En effet, "le cerveau regroupe les éléments au lieu de traiter un grand nombre de stimuli plus petits, ce qui nous permet de comprendre et de conceptualiser les informations plus rapidement".
Ce qui est encore plus utilisable que les étiquettes alignées à droite sont les étiquettes alignées en haut. Il permet aux utilisateurs d'être plus proches des champs, mais il aide également les utilisateurs mobiles à voir l'étiquette lorsqu'ils zooment dans un champ. Et lorsque les étiquettes deviennent longues à partir des traductions linguistiques, les utilisateurs pourront toujours voir l'étiquette car elle se trouve au-dessus du champ, pas du côté où elle peut être coupée. Voir l'article ci-dessous pour des exemples visuels.
n autre cas pour les étiquettes de formulaire les plus alignées
Un commentaire sur les étiquettes alignées à gauche qui plaisent mieux qu'à droite. La plupart des commentaires se réfèrent uniquement aux étiquettes et aux champs associés, la seule chose qui n'est pas prise en compte est l'espace blanc et l'équilibre du formulaire global. L'utilisation de bords gauches irréguliers crée un fort sentiment de déséquilibre lorsque l'utilisateur regarde le formulaire pour la première fois (lors du traitement d'un utilisateur, il regarde un champ à la fois, c'est vrai, mais lorsque le formulaire s'ouvre pour la première fois, l'utilisateur scanne tout le formulaire et le résultat) la première impression a un impact significatif sur le fait qu'ils "aiment" ou "n'aiment pas" le programme en général.
Le seul avantage de l'alignement à gauche auquel je peux penser est que la plupart des champs ne sont pas pertinents pour chaque utilisateur. Dans ce cas, vous devez vous aligner à gauche pour aider les utilisateurs à sélectionner les champs dont ils ont besoin (car ils lisent les pages Web en forme de F et trouvent les meilleures choses lorsqu'ils sont `` ancrés '' à la marge).
Là encore, si la plupart de vos champs ne sont pas pertinents, il y a probablement un problème avec votre formulaire. Vous pouvez le diviser en différentes variantes pour différents types de répondants, ou regarder l'élagage de champs étrangers.