Recommandations en matière de cases à cocher

Applies to Windows and Windows Phone

Application Windows : états de case à cocher

Application Windows : états de case à cocher

Application Windows Phone : états de case à cocher

Application Windows Phone : états de case à cocher

Description

Généralement, une case à cocher permet à l’utilisateur d’effectuer un choix entre deux options distinctes et opposées. Par exemple, il peut être amené à choisir de s’abonner à un bulletin d’information ou de sélectionner chaque courrier électronique dans une liste. Dans quelques cas, une case à cocher ne sera ni désélectionnée, ni sélectionnée, mais dans un état dit « indéterminé ». Par exemple, l’état sélectionné d’une case à cocher est indéterminé quand celle-ci représente une collection de sous-choix aux valeurs mélangées.

Lorsque l’utilisateur interagit avec la case à cocher, celle-ci réagit en changeant son état et donc son apparence. Les exemples d’états d’une case à cocher sont : normal, enfoncé, désélectionné, sélectionné et désactivé.

L’utilisateur appuie sur la case à cocher pour sélectionner la valeur opposée.

Exemple

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

Est-ce le contrôle approprié ?

Utilisez des cases à cocher pour proposer aux utilisateurs un choix binaire, une ou plusieurs options qui ne qui s’excluent pas mutuellement ou un choix mixte.

Utilisez une seule case à cocher pour un choix se résumant à oui ou non.

Case à cocher unique pour un choix individuel

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 :

Pratiques conseillées et déconseillées

  • 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.
  • Insérez la case à cocher dans une étiquette comportant une case à cocher, 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.

  • 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é.

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 (HTML)
Démarrage rapide : ajout de contrôles de case à cocher
Comment appliquer un style aux contrôles de case à cocher
input type="checkbox"
indeterminate property
Pour les développeurs (XAML)
Comment ajouter une case à cocher
Styles et modèles de case à cocher
CheckBox
Indeterminate event

 

 

Afficher:
© 2014 Microsoft