Alignement du libellé du formulaire en haut ou à gauche?
Bien que j'aie fait des recherches sur l'alignement des étiquettes de formulaire d'entrée, j'ai besoin de suggestions solides sur le moment d'utiliser l'alignement des étiquettes de formulaire en haut et quand utiliser à gauche et pourquoi?
Par exemple, dans le formulaire ci-dessous, le nom d'utilisateur et le mot de passe sont alignés à gauche.
Ici, le nom d'utilisateur et le mot de passe sont alignés en haut.
Luke Wroblewski est le gourou de ce domaine.
Il a écrit un livre entier sur la conception de formulaires Web ( Web Form Design ) et il a publié un article intéressant sur la question des étiquettes il y a quelques années.
Vous pouvez lire l'article complet ici: http://www.lukew.com/resources/articles/web_forms.html
Résumé de l'article:
Étiquettes verticales
Doit être utilisé lorsque:
- Le temps nécessaire pour remplir un formulaire doit être minimisé
- Les données collectées sont généralement familières aux utilisateurs
Étiquettes horizontales justifiées à gauche
Doit être utilisé lorsque:
- Les données collectées par un formulaire ne sont pas familières
- Les données ne tombent pas dans des groupes faciles à traiter
- Les données collectées sont généralement familières aux utilisateurs [...]
Étiquettes horizontales justifiées à droite
La distance entre les étiquettes [justifiées à gauche] et les champs de saisie est souvent allongée par de longues étiquettes. [...] Une mise en page alternative, aligne à droite les étiquettes des champs de saisie afin que l'association entre le champ de saisie et l'étiquette soit claire.
Une chose que je ne vois pas mentionnée qui m'a conduit à utiliser par défaut les top-labels ces jours-ci est le Web mobile. Un grand avantage des étiquettes supérieures est qu'elles rendent votre formulaire beaucoup plus prêt à être utilisé sur un téléphone portable sans avoir à reconstruire l'intégralité du CSS pour un appareil mobile.
Étant donné que de nombreux téléphones de nos jours zoomeront sur votre champ de formulaire, l'avoir à gauche du champ signifie que vous avez perdu l'étiquette de votre champ dans ce mode zoomé. Les top-labels ne remédient pas complètement à cela dans tous les cas, mais sont définitivement préférés par rapport à la gauche (il est généralement plus facile pour un utilisateur de téléphone de faire défiler la page vers le haut plutôt que d'avoir à faire PLUS panoramique à gauche et à droite).
Et oui, quoi que LukeW dise. ;)
Voici quelques conseils tirés de Quince , qui contient de nombreux exemples de sites et de logiciels utilisant efficacement chaque modèle. Consultez certainement ce site .
Justification derrière l'alignement supérieur
"Chaque étiquette et champ d'entrée est groupé par proximité verticale et l'alignement cohérent des champs d'entrée et des étiquettes réduit le mouvement des yeux et le temps de traitement. Les utilisateurs n'ont qu'à se déplacer dans une seule direction: vers le bas. Comme le contenu peut s'étendre horizontalement sur la longueur des étiquettes des contrôles d'entrée localisés et complexes peuvent être utilisés sans affecter la mise en page. Les études d'eyeracking montrent que le fait de placer une étiquette juste au-dessus de son champ de saisie permet aux utilisateurs de capturer les deux éléments d'un seul mouvement des yeux. De plus, si une étiquette indique des données qui étaient très les utilisateurs - par exemple, leur prénom ou leur nom de famille - les utilisateurs n’ont pas fixé l’étiquette séparément pour le lire. Ils ont pu afficher l’étiquette et le champ de saisie dans la même zone, éliminant ainsi le besoin de fixations supplémentaires. "
Justification de l'alignement à gauche
"La principale raison du choix des libellés alignés à gauche est de faciliter au maximum la numérisation des demandes du formulaire ou de les modifier. Cela peut être utile à plusieurs fins. Les utilisateurs peuvent numériser pour voir s'ils avoir les informations requises ou peut-être simplement pour confirmer qu'il s'agit du bon formulaire. S'il s'agit d'un formulaire utilisé pour mettre à jour des valeurs existantes, ils peuvent numériser pour trouver plus rapidement la valeur qu'ils souhaitent mettre à jour, ou peut-être si vous n'en avez que quelques-uns requis champs, ils peuvent scanner votre formulaire plus rapidement pour les trouver. "
Justification de l'alignement à droite
"Pour clarifier les relations entre les informations, alignez les étiquettes à droite sur les informations ou les champs qu'elles décrivent, en laissant un espace cohérent entre elles.
Les objets qui sont plus proches les uns des autres sont perçus comme étant liés, plus que les objets plus éloignés. Parce que vous souhaitez que les champs et les étiquettes textuelles qui les décrivent soient perçus comme étant liés les uns aux autres, vous devez les rapprocher. Lorsque ce modèle est appliqué à une longue liste de paires d'étiquettes et de champs textuels, il devient plus facile de remarquer que chaque étiquette textuelle décrit chaque champ qui lui est adjacent. "
Je suis d'accord avec les pros des labos alignés en haut et d'autres types d'étiquettes. Cependant, ma question est - est-il plutôt impératif que le type d'étiquetage soit cohérent dans l'ensemble de l'application, c'est-à-dire pour l'ensemble de l'application Internet Banking ou la meilleure pratique est plutôt d'utiliser tous les types d'alignement compte tenu des différents types de formulaires?