web-dev-qa-db-fra.com

Est-il utile d'avoir tous les contrôles d'entrée dans un formulaire de la même largeur?

Tous les contrôles d'entrée sont de la même taille dans cette question sur la conception du formulaire: Pourquoi les étiquettes de champ alignées à droite pourraient-elles être meilleures?

Ma question est de savoir si cela aide quelque chose, ou si c'est juste une question de goût?

Ne serait-ce pas un gaspillage d'avoir par exemple, un widget calendrier, qui ne reçoit que 10 caractères en entrée, de la même taille que les autres éléments?

8
elias

La taille (longueur) d'un champ est une question de convivialité dans la mesure où elle peut fournir une valeur ajoutée précieuse à l'utilisateur.

Prenons l'exemple suivant:

mockup

télécharger la source bmml - Wireframes créés avec Balsamiq Mockups

Même sans étiquettes, vous pouvez probablement deviner quels sont les champs:

mockup

télécharger la source bmml

Citation Wroblewsky obligatoire (l'exemple ci-dessus est tiré du chapitre 5 de son livre Web Form Design (p. 73-74)):

Parce que les abordations fournissent des indices précieux sur la façon de structurer les réponses, les gens prendront naturellement en compte ces indices lorsqu'ils réfléchiront à la manière de remplir un champ de saisie. Si ce champ de saisie est de taille arbitraire, vous pouvez laisser les gens penser à ce que cela signifie sans raison. [...] Autrement dit, si ce champ de saisie est long mais ma réponse est courte, ai-je mal compris la question? Mieux vaut ne pas faire trop réfléchir les gens et utiliser à la place une longueur cohérente pour tous les domaines qui ne bénéficient pas de possibilités claires.

En ce qui concerne votre question, non, il n'est pas utile d'avoir tous les champs de saisie de la même largeur .

Selon le contexte des données que l'utilisateur saisira, il peut être judicieux d'avoir des largeurs variables, bien que ces largeurs ne doivent pas être arbitraires. Au contraire, les largeurs de champ devraient plutôt donner à l'utilisateur un indice (possibilité) quant à ce qui doit être entré dans le champ, le cas échéant.

8
Charles Wesley

C'est principalement une question de design, pas de convivialité. Le problème principal est qu'ils sont alignés à gauche (pour les langues de gauche à droite), et non pas qu'ils sont tous de la même longueur.

Je dirais cependant qu'il est préférable de créer un champ pour lequel vous connaissez la longueur du contenu (comme un code postal) aussi longtemps que le contenu le serait. L'allonger peut laisser entendre que vous vous attendez à une entrée plus longue et provoquer une certaine confusion.

En résumé: Si vous connaissez la longueur de l'entrée, prolongez les entrées un peu plus longtemps, sauf si vous avez une raison de ne pas le faire.

4
JohnGB

Les éléments de formulaire sont délicats et doivent être groupés logiquement, visuellement groupés et également visuellement distinguables en même temps. Les éléments de forme lorsqu'ils sont regroupés visuellement respectent les lois de Proximité . Maintenant où la proximité est bonne, elle devient une "prison" visuelle lorsqu'elle est sur-utilisée. Regardez ces exemples.

Un formulaire sans proximité

An over use of Proximity

Proximité trop utilisée  A form with over-use of proximity - the other side of bad example

Quelque chose de bien  Something right.

-- Résumer --

  • Groupez les éléments du formulaire de façon logique avant de les regrouper visuellement. Si le regroupement logique fonctionne, il ne vous reste que peu de besoins de regroupement visuel.
  • Si vous avez dû appliquer une "largeur égale" sur différents éléments de formulaire, ne l'appliquez pas sur plus de 4 éléments de formulaire ensemble. Si tous les éléments étaient du même type (par exemple toutes les zones de saisie), vous pouvez conserver leur largeur identique.

  • Personnellement, j'aime introduire un espace périodique dans les éléments du formulaire pour briser cette "prison visuelle". Cette approche fonctionne et pourrait également être utile dans votre cas. A personal work example

3
Salman Ehsan

À mon avis, la question la plus importante à vous poser n'est pas de savoir si elles doivent toutes être de la même taille ou non, mais si l'entrée doit être contrainte/validée ou non.

S'il n'y aura pas de contraintes ou de validation sur l'entrée, alors c'est simplement une question d'esthétique de la rendre aussi soignée et organisée que possible (et les faire tout de même est une façon d'obtenir une netteté particulière).

S'il existe des contraintes ou une validation, l'utilisation de modèles communs pour la saisie (qui inclut la taille et le type de champ de saisie) offre la meilleure convivialité et aide à réduire les erreurs de l'utilisateur.

1
Michael Lai