Introduction de l'article de wulin.com (www.vevb.com): Une brève discussion sur la conception de formulaires dans la conception Web quotidienne.
Le boîtier d'entrée (entrée) doit être logiquement divisé en groupes afin que le cerveau puisse bien gérer la relation entre les grandes zones. - "Guide HTML faisant autorité"
Les applications Web utilisent toujours des formulaires pour gérer la saisie et la configuration des données, mais tous les formulaires ne sont pas cohérents. L'alignement de la zone d'entrée, des étiquettes respectives, des méthodes de fonctionnement et des éléments visuels environnants affecteront plus ou moins le comportement de l'utilisateur.
Disposition de formulaire
Étant donné que l'utilisateur doit remplir le formulaire aussi court que possible, et les données collectées sont familières à l'utilisateur (telles que le nom, l'adresse, les informations payantes, etc.), les étiquettes et les boîtes d'entrée alignées verticalement peuvent être considérées comme les meilleures. Chaque paire d'étiquettes et boîtes d'entrée est alignée verticalement pour donner une sensation d'être proche des deux, et un alignement gauche cohérent réduit le mouvement des yeux et le temps de traitement. L'utilisateur doit seulement se déplacer dans une direction: en bas.
Dans cette disposition, des étiquettes en gras sont recommandées, ce qui peut augmenter leur poids visuel et augmenter leur saillance. Si ce n'est pas audacieux, du point de vue de l'utilisateur, le texte de la balise et de la boîte d'entrée sera presque le même.
Si les données sur un formulaire ne sont pas familières ou regroupées logiquement (comme plusieurs composantes d'une adresse), les balises alignées à gauche peuvent facilement lire les informations du formulaire. Les utilisateurs n'ont qu'à rechercher et à descendre l'étiquette de la colonne de gauche sans interrompre leur réflexion par la zone d'entrée. Mais de cette manière, la distance entre l'étiquette et sa boîte d'entrée correspondante est généralement allongée par une étiquette plus longue, ce qui peut affecter le temps pour remplir le formulaire. L'utilisateur doit sauter d'avant en arrière pour trouver les deux balises et boîtes d'entrée correspondantes.
Cela crée une solution alternative, la disposition alignée à droite des balises, ce qui rapproche la connexion entre les balises et les boîtes d'entrée. Cependant, le résultat est que les blancs et les étiquettes inégaux à gauche rendent difficile pour les utilisateurs de récupérer rapidement ce que le formulaire doit être rempli. Dans les pays occidentaux, les gens sont habitués à l'écriture de gauche à droite, de sorte que cette disposition alignée à droite provoque une dyslexie pour les utilisateurs.
À l'aide d'éléments visuels
En raison des avantages de la disposition à gauche de l'étiquette (facile à récupérer et à réduire la hauteur verticale), il est tentant de corriger ses principaux inconvénients (la séparation de l'étiquette et de la boîte d'entrée).
Une solution consiste à ajouter des couleurs d'arrière-plan et des lignes divisées. Différentes couleurs d'arrière-plan produisent une colonne d'étiquettes verticales et une colonne de boîtes d'entrée verticales. Chaque ensemble d'étiquettes et de boîtes d'entrée est séparé par des lignes horizontales claires. Bien que cela semble bon, il y a encore des problèmes.
En comparant la forme précédente (distinction visuelle subjective de l'utilisateur), cela ajoute 15 éléments visuels: lignes médianes, cellules de couleur arrière et lignes horizontales. Ces éléments détournent l'attention de l'utilisateur et rendent difficile pour l'utilisateur de se concentrer sur des éléments importants, tels que les balises et les boîtes d'entrée. Comme l'a souligné Edward Tufte: il y a des différences dans l'information elle-même, ce qui conduit inévitablement à des différences sensorielles. En d'autres termes, tout élément visuel inutile pour la mise en page perturbera constamment la disposition. Lorsque vous essayez de parcourir les étiquettes à gauche, vous constaterez que votre vue est toujours interrompue, arrêtez-vous pour réfléchir à ces lignes horizontales, cellules et couleurs d'arrière-plan.
Bien sûr, cela ne signifie pas abandonner les couleurs et les lignes d'arrière-plan. Ils sont toujours très efficaces pour diviser les informations pertinentes sur la zone. Par exemple, une ligne horizontale mince ou une couleur d'arrière-plan de lumière peut être combinée visuellement avec des données pertinentes. Les couleurs et les lignes d'arrière-plan sont particulièrement efficaces pour les principaux boutons de fonctionnement qui distinguent la forme.
Opérations primaires et secondaires
Le fonctionnement principal d'un formulaire (généralement soumis ou économise) nécessite un poids visuel relativement fort (dans l'exemple ci-dessus, des tons lumineux, des polices audacieuses, des couleurs d'arrière-plan, etc.). Cela équivaut à donner à l'utilisateur une invite: vous avez / êtes sur le point de remplir le formulaire.
Lorsqu'un formulaire a plusieurs opérations, comme la poursuite et le retour, il est nécessaire de réduire le poids visuel des opérations secondaires. Cela minimise le risque d'erreurs opérationnelles potentielles pour les utilisateurs.
Bien que le contenu ci-dessus puisse mieux vous permettre de concevoir des formulaires, la combinaison de la disposition, des éléments visuels et du contenu nécessite toujours des tests des utilisateurs et une analyse des données (évaluation de l'achèvement, rapports d'erreurs, etc.).