Windows Dev Center

Recommandations en matière de cases à cocher

Une case à cocher est utilisée pour sélectionner ou désélectionner des éléments d’action et peut être utilisée pour un seul ou plusieurs éléments de liste. Le contrôle possède trois états de sélection : désélectionné, sélectionné et indéterminé. L’état indéterminé s’affiche lorsqu’une collection de sous-choix possèdent les états désélectionné et sélectionné.

Exemple de case à cocher avec quatre états

Exemple

Capture d’écran du contrôle de case à cocher standard

Est-ce le contrôle approprié ?

Utilisez une seule case à cocher pour un choix binaire Oui/Non, comme dans le cas d’un scénario de connexion « Mémoriser mes informations ? » ou avec les conditions du contrat de service.

Case à cocher unique pour un choix individuel

Utilisez plusieurs cases à cocher pour les scénarios à sélection multiple dans lesquels un utilisateur choisit un ou plusieurs éléments à partir d’un groupe d’options qui ne s’excluent pas mutuellement.

Dans le cas d’un choix binaire, la seule différence entre une case à cocher et un bouton bascule est que le premier désigne un état, tandis que le deuxième indique une action. Vous pouvez retarder la validation d’une opération de case à cocher (par exemple, dans le cadre de l’envoi d’un formulaire) alors que l’utilisation d’un bouton bascule nécessite une action immédiate de votre part. Seules les cases à cocher autorisent une sélection multiple.

Créez un groupe de cases à cocher quand les utilisateurs peuvent choisir une combinaison quelconque d’options.

Sélection de plusieurs options à l’aide de cases à cocher

Contrairement aux cases d’option, pour lesquelles un groupe représente un choix unique, chaque case à cocher dans un groupe représente un choix distinct et indépendant. Lorsque plusieurs options sont disponibles mais qu’une seule peut être choisie, utilisez une case d’option à la place.

Lorsqu’une option s’applique à plusieurs objets, vous pouvez utiliser une case à cocher pour indiquer si elle concerne la totalité, une partie ou aucun de ces objets. Si l’option concerne quelques objets seulement et non la totalité, optez pour l’état indéterminé de la case à cocher pour indiquer un choix mixte. Un exemple de choix mixte est une case à cocher « Sélectionner tout » qui devient indéterminée quand un utilisateur sélectionne une partie, et non l’ensemble, des éléments.

Cases à cocher indiquant un choix mixte

Pour plus d’informations, voir :

Recommandations

  • Assurez-vous que le but et l’état actuel de la case à cocher sont clairs. L’objectif de la désélection d’une case à cocher doit être clair. Par exemple, si vous utilisez une case à cocher pour l’orientation Paysage, il n’est pas évident que l’orientation passera en mode Portrait en désélectionnant la case à cocher. Dans ce cas, vous pouvez utiliser deux cases d’option : Paysage et Portrait.
  • Limitez le texte de la case à cocher à deux lignes.
  • Formulez le texte de sorte que la case à cocher sélectionnée corresponde à True, et à l’inverse, que la case à cocher désélectionnée corresponde à False.
  • Utilisez la police par défaut à moins que vos instructions de personnalisation imposent d’en utiliser une autre.
  • Si vous avez plusieurs choix à présenter, songez à utiliser le contrôle de la visionneuse à défilement avec un panneau de disposition.
  • Utilisez l’état indéterminé pour signaler qu’une option est définie pour une poignée de sous-choix, mais pas pour tous.

  • Si vous avez recours à l’état indéterminé, utilisez des cases à cocher subordonnées pour indiquer les options sélectionnées et celles qui ne le sont pas. Concevez l’interface utilisateur afin que l’utilisateur puisse voir les sous-choix.

  • Si le contenu du texte est dynamique, songez au redimensionnement du contrôle et à ses conséquences sur les effets visuels environnant.
  • Ne mettez pas deux groupes de cases à cocher l’un à côté de l’autre, car les utilisateurs ne pourront pas déterminer quelles options appartiennent à quel groupe. Utilisez des étiquettes de groupe pour les distinguer.

  • N’utilisez pas de case à cocher comme contrôle pour sélectionner/désélectionner ou exécuter une commande ; utilisez plutôt un bouton bascule.

  • N’utilisez pas de case à cocher pour afficher d’autres contrôles, tels qu’une boîte de dialogue.
  • N’utilisez pas l’état indéterminé pour désigner un troisième état. L’état indéterminé sert à indiquer qu’une option est définie pour une poignée de sous-choix et non la totalité. N’autorisez donc pas les utilisateurs à définir directement un état indéterminé.

    Parfait exemple à ne pas suivre, la case à cocher qui suit utilise l’état indéterminé pour indiquer un goût moyennement épicé :

    Case à cocher avec un état indéterminé

    Utilisez plutôt un groupe de cases d’options proposant trois options : Non épicé, Épicé et Très épicé.

    Groupe de cases d’options proposant trois options : Non épicé, Épicé et Très épicé.

  • (HTML uniquement) Insérez la case à cocher dans une étiquette de façon à sélectionner/désélectionner la case à cocher en cliquant sur l’étiquette. En procédant de cette manière, vous augmentez la taille de la zone de sélection et rendez la case à cocher plus accessible aux utilisateurs qui interagissent par voie tactile.

Rubriques associées

Pour les concepteurs
Recommandations en matière de boutons
Recommandations en matière de cases d’option
Recommandations en matière de contrôle de sélection
Recommandations en matière de boutons bascule
Pour les développeurs (XAML)
Comment ajouter une case à cocher
Styles et modèles de case à cocher
CheckBox class
Indeterminate event
Pour les développeurs (HTML)
Démarrage rapide : ajout de contrôles de case à cocher
Comment appliquer un style aux contrôles de case à cocher
input type="checkbox" element
indeterminate property

 

 

Afficher:
© 2015 Microsoft