Disposition des cases à cocher dans les formulaires
J'ai des formulaires assez volumineux composés principalement de champs de texte et de listes déroulantes. Cependant, il y a aussi des cases à cocher dispersées ici et là. J'essaie de trouver la meilleure façon de les disposer. Voici le problème:
Si j'aligne mon étiquette à droite et le contrôle lui-même à gauche, mes cases à cocher ne sont pas dans la même colonne que tous mes autres contrôles
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Si j'aligne le contrôle vers la droite, son étiquette n'est pas alignée avec le reste des contrôles et je crains qu'il puisse être manqué.
La solution semble être de séparer l'étiquette du contrôle. Ce qui me dérange dans cette solution, c'est que la zone cible de la case à cocher est petite et même si je l'agrandis, les utilisateurs peuvent penser qu'ils doivent "sniper" dans la case à cocher elle-même.
Pour résoudre ce problème, j'ai essayé de fournir une étiquette générale et une étiquette spécifique pour le contrôle, mais dans la plupart des cas, cela semble très naturel et forcé. Au lieu de dire par exemple "Inclure l'horodatage", je suis obligé de faire des choses comme "Horodatage: Inclure", ce qui semble terrible.
Il me semble que la meilleure option est 3, mais peut-être que je manque quelque chose. Existe-t-il des directives ou de meilleures solutions pour cela?
J'essaierais de regrouper autant de cases à cocher que possible sous une seule étiquette:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Vous pouvez également remplacer la case à cocher unique par une paire de boutons radio. Cela vous donnera à la fois une étiquette de "description" indépendante et un contrôle étiqueté pour l'entrée utilisateur.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Un effet secondaire positif de cette solution est que vous obtenez une troisième valeur implicite, à savoir "sans réponse" .
Dans certaines circonstances, il peut être important que l'utilisateur choisisse "Oui" ou "Non" par action.
Un autre effet secondaire positif est que vous pouvez fournir de meilleures valeurs par défaut.
Parcourez rapidement les guides de style habituels, je ne trouve pas de directives explicites, mais, sur la base des exemples des guides de style, Apple semble favoriser votre deuxième option . Des séparateurs ou des espaces blancs sont utilisés pour faire ressortir la case à cocher et ne pas sembler être subordonné au contrôle ci-dessus.
Dans Windows et Gnome , les cases à cocher sont alignées à gauche avec les étiquettes des contrôles de champ:
Si vous le regardez assez longtemps, il commence à paraître bizarre, mais il est épuré (pas de mots en excès) et peu encombrant. C'est beaucoup utilisé, et je n'ai vu personne réagir négativement (ou même le remarquer), donc je suppose que ça va.
Une autre option, si vous avez l'espace vertical, consiste à aligner à gauche les contrôles et à placer l'étiquette au-dessus des champs, ce qui peut avoir certains avantages en termes d'efficacité lorsqu'un utilisateur remplit un formulaire pour la première fois.
