web-dev-qa-db-fra.com

Alignement des champs de saisie dans un formulaire avec du texte brut

J'ai une page de détails contenant une liste d'informations et de champs de saisie en même temps. Les sections alternent entre les champs d'information et de saisie.

Je débat entre l'alignement des données. L'option 1 consiste à aligner les informations sur la gauche des zones de saisie, l'option 2 à aligner le texte les unes sur les autres (que ce soit dans une zone de saisie ou non).

Existe-t-il une manière correcte de faire cet alignement ou est-ce davantage basé sur l'opinion.

enter image description here

formsinput-fieldsgridalignment
8
Jason McFarlane

Généralement, alignez la gauche du champ, pas le contenu du texte:

enter image description here

Il y a plusieurs raisons à cela:

  • Meilleur alignement . Pour les éléments d'entrée encadrés (c'est-à-dire avec des contours, des bordures ou des ombres), la verticale | les bords de la boîte ont tendance à attirer l'œil alors qu'il scanne la colonne de gauche, de sorte que le formulaire sera perçu comme plus organisé si cette ligne verticale est alignée à gauche.

  • Utilisation correcte de l'espace blanc . Pour les colonnes alignées sur la grille comme votre mise en page, l'œil utilise la marge de l'espace blanc à côté de la colonne pour percevoir la colonne elle-même. Les éléments qui pénètrent dans cet espace blanc se sentiront mal alignés sur l'utilisateur et créeront une dissonance cognitive. Voici un exemple de la façon dont l'intrusion est perceptible (la disposition semble toujours organisée, mais ne ressemble plus autant à une colonne):

enter image description here

  • Meilleure différenciation du champ lui-même . Un champ de saisie est différent du texte. L'alignement de l'ensemble du champ avec le paragraphe de texte fournit une sémantique visuelle correcte car vous voulez que l'utilisateur lise le paragraphe, puis perçoive le champ de saisie en premier (c'est-à-dire "c'est un élément interactif, différent du texte brut ") avant de lire un espace réservé ou des valeurs de texte.

  • Hiérarchie visuelle . Pour la conception de formulaire traditionnelle où les étiquettes apparaissent au-dessus des zones de saisie, le léger décalage des espaces réservés par rapport à la zone de saisie Edge permet de fournir une hiérarchie visuelle d'étiquette-> entrée qui peut aider avec les lignes de numérisation et l'organisation pour l'ensemble du formulaire.

Quelques exemples réels d'alignement à gauche du texte brut + du champ ...

  • Formulaire de paiement Apple iTunes  enter image description here

  • Formulaire d'inscription à Google  enter image description here

  • Formulaire d'inscription Facebook

    enter image description here

Encore une fois, il s'agit d'une règle générale, il peut donc y avoir des exceptions pour des raisons UX spécifiques (par exemple, utilisation délibérée de dissonance, contours décolorés, etc.) ou différentes conceptions de widget (par exemple, des zones de saisie de soulignement simples).

Pour un article plus complet sur la conception de formulaires, je recommanderais Luke Wroblewski présentation sur la conception de formulaires comme aperçu, mais il existe de nombreuses autres ressources.

12
tohster

Pense que c'est plutôt basé sur l'opinion. Je pense qu'il est plus courant que les informations soient alignées sur les zones de texte, c'est-à-dire l'option 1.

cependant en plus de votre question, pensez que vous devriez également considérer les étiquettes au-dessus des zones de texte qui semblent être plus faciles à utiliser http://uxmovement.com/forms/faster-with-top-aligned-labels/

c'est aussi un guide assez détaillé http://www.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/

0
Ameen Akbar

C'est une question courante dans les écoles de design, et la réponse est vraiment simple: vous devez aligner l'extrême gauche d'un paragraphe ou d'un bloc de contenu avec l'extrême gauche du champ de saisie. Fondamentalement, à l'exception des blocs de contenu avec des rembourrages (comme les citations de blocs), tout le texte doit être aligné selon l'option d'alignement souhaitée (gauche, droite, centre).

Et c'est très facile à prouver: écrivez simplement votre code HTML sans aucun style et vous verrez ce qui se passe. C'est pour de nombreuses raisons, mais pensez à ceci: si vous alignez le contenu interne d'entrée avec des paragraphes, alors lorsque les champs d'entrée seront vides, ils seront hors ligne. Ou dans 0 zones de remplissage, l'entrée débordera le conteneur. Etc.

En bref, votre première option est la bonne en termes de conception

0
Devin