Alignement des étiquettes supérieures sur les formulaires: aligner avec le texte (typographiquement) ou avec les bordures d'entrée (géométriquement)?
EDIT: J'ai ajouté un psd de l'écran pour rendre le problème plus clair. Vous voyez comment le texte bat [*] à droite alors qu'il est aligné et semble en fait plus facile à lire à gauche?
Message d'origine: J'ai un différend avec mes collègues ici sur l'emplacement exact des meilleures étiquettes. Doivent-ils s'aligner sur les entrées de texte des champs de formulaire (typographiquement) ou sur les bordures des champs de formulaire eux-mêmes (géométriquement)? Quelqu'un a une idée s'il y a des recherches sur cette question?
[*] est-ce le bon mot pour ça?
Je suis pour la version à droite. Voici pourquoi, d'un point de vue typographique, élément de conception et humain.
Du point de vue de l'alignement typographique
Dans les exemples que je montre, j'ai supprimé la zone de saisie pour que vous puissiez la voir uniquement dans une perspective typographique.
La hiérarchie visuelle ressemble à ceci:
See me first
- See me second
See me third
- See me fourth
Remarquez comment les informations sont échelonnées.
Si l'utilisateur voulait parcourir rapidement toutes les étiquettes, cela ressemblerait à ceci:
See me first
- Ignore me
See me second
- Ignore me
Les avoir séparés visuellement par l'espace, permet à la personne de voir visuellement plus facilement ce qui est quoi. Si tout le texte est aligné, il sera lu comme ceci:
See me first
See me Second
See me third
See me fourth
Tout le texte s'estompe et il n'y a pas de moyen facile pour l'utilisateur de parcourir le contenu.
Du point de vue des éléments de conception
Élément de liste
L'autre façon de voir les choses est la forme. Si vous l'abstrayez, tous les mots dans les boîtes font partie de la forme de la boîte. Par conséquent, l'alignement du texte avec la zone de saisie est le plus logique.
Voici un exemple d'alignement de la copie avec du texte dans une boîte. Il est généralement aligné par sa forme.
Je n'ai jamais vu de cas où le texte soit aligné avec le texte du bouton.
Je comprends que dans l'exemple ce n'est PAS une boîte de saisie mais un bouton mais en principe c'est par forme.
Voici quelques exemples:
Google a également fait ce saut. Ici, vous pouvez clairement voir leur utilisation de la grille pour nettoyer la conception.
D'un point de vue humain
Lors du remplissage des formulaires, nous laissons naturellement un espace avant d'écrire.
Source: Mon expérience formellement formée en tant que graphiste et ayant travaillé dans le domaine pendant de nombreuses années.
Cela n'est basé sur aucune recherche, sauf pour le fait que mes yeux fondent à cause de la laideur de l'option de gauche.
L'étiquette doit définitivement être alignée avec le bord de la zone de saisie.
Alors que l'option de droite crée une différence de classe entre l'étiquette et la valeur. Cela crée également une confusion visuelle en raison des alignements. Maintenant, nous pouvons aligner les étiquettes avec la bordure de la zone de saisie, nous ne pouvons pas faire de même avec les valeurs.
La meilleure solution possible serait d'aligner l'étiquette et la valeur ensemble, et de créer la différence de classe entre l'étiquette et la valeur, en utilisant des couleurs différentes.
Si je devais choisir entre ces 2 ... Je voterais personnellement pour l'option de droite, car c'est une façon plus hiérarchique/logique de présenter les relations questions/réponses. En scannant rapidement le formulaire, il est plus facile de différencier la question de la réponse.
Cependant, si vous souhaitez aligner le texte sur le champ d'entrée, il serait plus approprié de créer un élément conteneur: regrouper ces 2 éléments. Cela créera une hiérarchie visuelle et personnellement, cela a ma préférence:
