Recommandations en matière de cases d’option

Applies to Windows and Windows Phone

Application Windows : cases d’option

Application Windows : cases d’option

Application Windows Phone : cases d’option

Application Windows Phone : cases d’option

Description

Les cases d’option permettent aux utilisateurs de faire un choix parmi au moins deux possibilités. Chaque option est représentée par une seule case d’option ; un utilisateur peut activer une seule case d’option dans un groupe de cases d’option.

Les cases d’option s’apparentent à des boutons de radio.

Exemple

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

Est-ce le contrôle approprié ?

Utilisez les cases d’option pour présenter à l’utilisateur au moins deux options qui s’excluent mutuellement, comme ci-après.

Groupe de cases d’option

Les cases d’option confèrent plus de clarté et de visibilité aux options les plus importantes de votre application. Utilisez les cases d’option lorsque les options présentées sont suffisamment importantes pour justifier une plus grande occupation de l’espace à l’écran et quand la clarté du choix exige des options très explicites.

Les cases d’option mettent en avant les options de façon identique, ce qui peut donner plus d’importance à une option qu’elle n’en a vraiment. Envisagez d’utiliser d’autres contrôles, à moins que les options ne doivent attirer davantage l’attention de l’utilisateur. Par exemple, si l’option par défaut est recommandée pour la plupart des utilisateurs et dans la plupart des situations, utilisez plutôt une liste déroulante.

S’il existe uniquement deux options qui s’excluent mutuellement, combinez-les dans une case à cocher ou un bouton bascule unique. Par exemple, utilisez une case à cocher pour « J’accepte », plutôt que deux cases d’option pour « J’accepte » et « Je n’accepte pas ».

Deux façons de présenter un choix binaire

Si l’utilisateur peut sélectionner plusieurs options, utilisez plutôt une case à cocher ou une zone de liste.

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

N’utilisez pas de cases d’option lorsque les options sont des nombres incrémentés de manière fixe, comme 10, 20, 30. Dans ce cas, utilisez un contrôle de type curseur .

S’il existe plus de huit options, utilisez une liste déroulante, une zone de liste à sélection unique, ou un affichage de liste.

Si les options disponibles dépendent du contexte actuel de l’application, ou sont amenées à changer de manière dynamique, utilisez une zone de liste à sélection unique.

  • Applies to Windows

Un groupe de cases d’options se comporte comme un seul contrôle quand l’utilisateur y accède via le clavier. Seule l’option sélectionnée est accessible à l’aide de la touche Tabulation, mais les utilisateurs peuvent passer d’une option à l’autre dans le groupe à l’aide des touches de direction.

Pratiques conseillées et déconseillées

  • Assurez-vous que le but et l’état actuel d’un ensemble de cases d’option sont clairs.
  • Fournissez toujours un retour visuel quand l’utilisateur appuie sur une case d’option.
  • Fournissez toujours un retour visuel quand l’utilisateur interagit avec une case d’option. Les exemples d’états d’une case d’option sont : normal, enfoncé, activé ou désactivé. L’utilisateur appuie sur une case d’option pour activer l’option correspondante. Le fait d’appuyer sur une option activée ne la désactive pas, mais le fait d’appuyer sur une autre option active celle-ci.
  • Réservez les animations et les effets visuels au retour tactile et à l’état activé. Dans l’état non activé, les contrôles de cases d’option non activés doivent apparaître inutilisés ou inactifs (mais pas désactivés).
  • Limitez le contenu du texte de la case d’option à une seule ligne. Vous pouvez personnaliser les effets visuels d’une case d’option pour afficher une description de l’option dans une taille inférieure de police apparaissant sous la ligne principale de texte.
  • Si le contenu du texte est dynamique, songez au redimensionnement du bouton et à ses conséquences sur les effets visuels environnant.
  • Utilisez la police par défaut à moins que vos instructions de personnalisation imposent d’en utiliser une autre.
  • Entourez la case d’option d’un élément d’étiquette de sorte que l’appui sur l’étiquette entraîne la sélection de la case d’option.
  • Placez le texte de l’étiquette après le contrôle de case d’option, pas avant ni au-dessus de celle-ci.
  • Personnalisez vos cases d’option. Par défaut, une case d’option se compose de deux cercles concentriques (le cercle intérieur est rempli et affiché quand la case d’option est activée, le cercle extérieur est un trait) et de contenu textuel. Mais, nous vous encourageons à faire preuve de créativité. Les utilisateurs aiment bien interagir directement avec le contenu d’une application. Vous pouvez donc choisir d’afficher le contenu réel à l’aide de graphismes ou sous la forme de subtils boutons bascule textuels.
  • Ne placez pas plus de huit options dans un groupe de cases d’option. Si vous voulez en présenter davantage, utilisez plutôt une liste déroulante, une zone de liste ou un affichage sous forme de liste.
  • Ne placez pas deux groupes de cases d’option en regard l’un de l’autre. Lorsque deux groupes de cases d’option sont adjacents, il est difficile de déterminer quelles cases appartiennent à quel groupe. Utilisez des étiquettes de groupe pour les distinguer.

Indications d’utilisation supplémentaires

Cette illustration montre la manière convenable de positionner et espacer les cases d’option.

Ensemble de cases d’option

Ce schéma met l’accent sur le dimensionnement et l’espacement utilisés dans l’illustration précédente.

Ensemble de cases d’option

Rubriques associées

Pour les concepteurs
Recommandations en matière de boutons
Recommandations en matière de boutons bascule
Recommandations en matière de cases à cocher
Recommandations en matière de listes déroulantes
Recommandations en matière de contrôles d’affichages de liste et d’affichages de grille
Recommandations en matière de curseurs
Recommandations en matière de contrôle de sélection
Pour les développeurs (HTML)
input type="radio"
Ajout de contrôles de sélection
Pour les développeurs (XAML)
Windows.UI.Xaml.Controls RadioButton class
Ajout de cases d’option

 

 

Afficher:
© 2014 Microsoft