Comment puis-je indiquer au mieux les champs obligatoires?
Je travaille souvent sur des pages contenant des formulaires avec des exigences et des sous-formulaires complexes. L'exemple ci-dessous a ces attributs:
- Le bouton par défaut - c'est-à-dire le bouton sur lequel on cliquera lorsque l'utilisateur frappe
Enter- est indiqué par un bouton de texte blanc/fond bleu foncé. - La mise au point est indiquée par un halo bleu clair.
- Les champs obligatoires sont indiqués par une barre orange (leur étiquette associée a une étoile orange).
- Les champs Informations générales de la liste et les données du tableau sont les données qui font partie du formulaire principal et finissent par être enregistrées lorsque Soumettre est cliqué.
- Les exigences pour le formulaire principal sont Auteur et Date de mise à jour .
- Le contenu de la zone de groupe Rechercher des voitures pour la liste est un sous-formulaire qui ajoute dans la table toutes les lignes de la base de données qui correspondent aux champs de filtrage. Un des champs doit être rempli pour éviter une erreur (rien ne l'indique avant d'appuyer sur le bouton Ajouter à la liste ).
- Les champs et boutons au-dessus du tableau sont un autre sous-formulaire qui permet à l'utilisateur de définir la couleur préférée pour les lignes ou de les supprimer de la liste.
- Les exigences pour le sous-formulaire Liste des voitures varient en fonction de l'utilisation prévue. Pour mettre à jour les lignes, le premier champ Lignes à affecter et Couleur préférée sont obligatoire. Pour supprimer des lignes, seul le premier champ Lignes à affecter est requis.
Veuillez ignorer toute sottise dans le contenu ou la conception autre que la façon dont les champs requis conditionnellement sont affichés.
La question centrale:
Comment puis-je charger au mieux les exigences du formulaire dans des cas comme celui-ci? Je veux aider les utilisateurs à éviter les erreurs, mais le basculement des exigences lors de leur modification introduit un comportement déroutant (IMO). Par exemple, si l'utilisateur parcourt le sous-formulaire Liste des voitures , il ressemble à Couleur préférée est requis même si l'intention de l'utilisateur est d'utiliser le bouton Supprimer les lignes . Dois-je simplement abandonner toute tentative d'afficher les exigences pour les formulaires complexes et laisser les utilisateurs cliquer sur les boutons pour obtenir des messages d'erreur?
La confusion de la conception est que vous avez 4 actions potentielles différentes sous une seule forme. Plusieurs actions, avec des exigences différentes, prennent des mesures sur le même formulaire. Il est préférable de fournir une orientation claire aux utilisateurs.
Considérez la forme comme un puzzle. Je vous présente 4 puzzles différents, pour simplifier, disons qu'ils sont tous de 10 pièces chacun et tous d'une seule couleur. Pas très excitant, mais facile de savoir quelle pièce appartient à quel puzzle.
Je ne vais pas vous demander de choisir 1 puzzle et de le mettre ensemble. Bien qu'il soit facile de savoir quelle pièce appartient à quel puzzle, je vous propose deux choix:
- Prenez un sac de 40 pièces de puzzle, décidez quel puzzle vous voulez assembler, puis choisissez les pièces appropriées.
- Demandez-vous quel puzzle vous voulez assembler, puis remettez-vous un sac de 10 pièces de puzzle pour ce puzzle particulier.
À moins que vous ne vous ennuyiez vraiment, vous choisirez l'option 2. Faites de chacun de ces puzzles un paysage de 100 pièces et vous seriez fou de choisir autre chose que l'option 2!
Je ne sais pas comment ce formulaire interagit avec sa destination, il peut donc manquer quelque chose ...
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Chaque action est maintenant très claire. J'ajoute ou modifie une liste existante qui comporte 3 sections principales: auteur, date de mise à jour, liste des voitures. Si je veux modifier la liste des voitures, j'entre dans ce flux de tâches.
Un bouton d'ajout fait apparaître une boîte de dialogue ou ajoute une nouvelle ligne au tableau qui permet de modifier le tableau en ligne. Dans les deux cas, l'action est très claire et les champs résultants font clairement partie de cette action.
Supprimer une ligne est aussi simple que de sélectionner la ligne souhaitée et de cliquer sur le bouton Supprimer. Vous souhaitez toujours que l'utilisateur saisisse un numéro de ligne? Ouvrez une boîte de dialogue pour leur demander. Encore une fois, l'action et les champs résultants sont clairement liés.
Comment éditez-vous? Vous pouvez en ajouter un autre sous le tableau et prendre en charge la modification de la ligne de surbrillance. Vous pouvez également fournir un bouton d'édition en ligne pour chaque ligne qui entre en mode d'édition pour cette ligne. Encore une fois, les champs résultants qui apparaissent à la suite de l'action ont un objectif clair.
En fin de compte, vous ne présentez pas un tas d'actions avec des champs appropriés mélangés. Vous posez d'abord à l'utilisateur une question simple: "Que voulez-vous faire?" Lorsqu'ils vous disent ce qu'ils sont, vous interrogez pour obtenir les informations nécessaires.