web-dev-qa-db-fra.com

Afficher les sous-cases à cocher sur un formulaire?

J'ai un formulaire où j'ai un groupe de cases à cocher qui ne sont applicables que si une case à cocher "maître" est cochée. Pour le moment, lorsque la case n'est pas cochée, cela ressemble à ceci: enter image description here

Lorsque la zone de texte est cochée par l'utilisateur, un groupe de sous-zones de texte se glisse ensuite en dessous. Cela ressemble à ceci: enter image description here

Cependant, tout cela semble assez maladroit. Sans oublier, cela n'a pas l'air très intuitif. Quelqu'un aurait-il des recommandations sur un modèle qui pourrait être utilisé pour résoudre ce problème?

10
rheotron

Vous devez structurer les options afin qu'il soit clair que ce sont des options enfants de l'option principale et ne peuvent être cochées que si l'option principale est sélectionnée. De plus, je suggère:

  • ne pas cacher les options enfant à l'utilisateur - il devrait voir ce qu'il y a à l'intérieur avant de sélectionner la principale. S'il y avait beaucoup de choses à afficher, il y aurait une raison de le cacher, mais dans ce cas, il ne semble pas y avoir de raison (enfin, peut-être s'il y a vraiment beaucoup d'autres options). Au lieu de cela, montrer que les options enfants sont désactivées pour sélectionner.

  • regroupant les options en colonnes - il existe deux groupes: événements et erreurs. Le regroupement vertical sera plus clair pour l'utilisateur (en raison de la numérisation de haut en bas). Je ne pense pas que vous ayez besoin de fournir des en-têtes pour ces colonnes dans ce cas.

  • la case à cocher doit être sur le côté gauche de l'étiquette - de cette façon, vous évitez qu'il soit plus proche ou plus éloigné du texte tout en les alignant dans les colonnes.

  • changement de position des boutons de soumission - celui qui est censé terminer le processus est [Enregistrer la configuration] donc il doit être placé à la position la plus à droite (mais peut-être que je suis démodé).

  • En même temps Annuler devrait être à la fois visible et dégradé - Je l'ai changé en lien au lieu de bouton.

Voici un filaire rapide pour vous (l'application que j'utilise ne permet pas beaucoup de modifications, donc désolé pour certains détails, comme les boîtes [x] ou les couleurs):

enter image description here

8
Dominik Oslizlo

Personne ne semble avoir mentionné le fait qu'avoir une étiquette comme "Activer la journalisation du texte" avec une case à cocher est une conception d'interface utilisateur sous-optimale.

La case à cocher rapide et facile est un exemple de contrôle sans contrainte qui diminue la visibilité du système et nous oblige à verrouiller l'action (Activer) dans l'étiquette.

Cela oblige l'utilisateur à penser "non coché" activé "est désactivé, coché" activé "activé", et lors de la numérisation de la page, l'état du système n'est pas immédiatement évident.

Un contrôle plus contraint, comme une bascule on/off (ou activée/désactivée), nous permet de supprimer l'action de l'étiquette (maintenant juste "Text Logging") et offre une meilleure visibilité du système en un coup d'œil.

mockup

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

Si vous êtes préoccupé par une interface utilisateur/interface utilisateur optimale et que vous avez les ressources pour le faire, vous devriez perdre la case à cocher et utiliser les bascules.

1
dennislees