Alignement des champs et des étiquettes avec les espaces
Je conçois un formulaire avec une page large typique de 970 px. J'ai essayé de lire aussi autant que possible pour les alignements d'étiquettes . Quelle est la meilleure façon de résoudre une abondance d'espace blanc à droite du formulaire?
Par exemple, les étiquettes supérieures ressemblent à: 
Alors que le formulaire étiqueté aligné à droite ressemble à: 
L'avantage des étiquettes supérieures est qu'il est très facile/rapide à traiter, mais il y a une très grande quantité d'espace blanc à droite du formulaire et rend la forme plus haute. Étant donné que l'application Web est très axée sur les formulaires, que puis-je faire pour "réduire" cet espace blanc? Est-ce même important?
J'aime les étiquettes alignées à droite pour "résoudre" ce problème, mais l'en-tête "Créer un utilisateur" semble très déplacé. Si vous choisissez des étiquettes alignées à droite, comment cette bizarrerie est-elle résolue?
Il existe différentes façons de procéder. Voici quelques exemples:
Wordpress utilise des champs massifs:
Vimeo a une image intéressante
Twitter a une colonne uniquement pour l'appel à l'action et pour les messages d'aide. En fait, je pense que c'est une utilisation puissante et impressionnante des espaces dans la conception
Moo centralise tout dans une boîte et fait du blanc un élément de design
Lee Munroe donne une petite information alternative
Animoto va double largeur
Facebook sépare l'en-tête/l'appel à l'action du formulaire
Mais - Paypal échoue complètement à résoudre le problème! Dull n'est-ce pas?
Voir page d'inscription de Handcraft et écran de connexion pour deux exemples de la façon dont j'ai résolu ce problème.
- Les deux exemples, tout d'abord, n'utilisent pas le même modèle 970px que le reste du site. Il est tout simplement inutile de réclamer tout cet espace si vous n'allez pas l'utiliser.
- Deuxièmement, étant donné que l'objectif de la page est de remplir le formulaire, j'ai supprimé tout ce qui n'est pas lié à cela (c'est parce que nous sommes en train de concevoir pour la conversion que vous pourriez ne pas être, Donc, retiens-le bien).
- Sur la page d'inscription, j'ai divisé les champs en deux colonnes pour réduire la hauteur globale.
- J'ai également centré le corps et l'en-tête dans la fenêtre pour résoudre le problème d'alignement des en-têtes que vous décrivez.
- Je n'ai pas aligné correctement les champs de formulaire car les formulaires sont incroyablement courts (intentionnellement) et l'espace est mieux utilisé dans ce format. Je pense que les champs alignés à droite sur votre formulaire fonctionnent mieux, car c'est un formulaire plus long.
Donc, en bref, utilisez des espaces comme élément de conception et n'ayez pas peur de mélanger certaines des conventions que vous rencontrez.
Je ne pense pas que ce grand espace blanc soit un problème - la focalisation sur l'utilisateur est bien meilleure. Cependant, il existe parfois des aspects de conception, et dans ce cas (la forme n'est pas si longue), les étiquettes alignées à droite sont également correctes. Les étiquettes alignées en haut sont beaucoup plus scannables, mais utilisez ce que vous voulez, dans ce cas les deux sont appropriés.
J'ai généralement les étiquettes alignées à gauche.
Une autre alternative consiste à avoir les étiquettes à droite des zones de saisie, comme dans la section des commentaires du blog SE: blog.stackoverflow.com