Cases d’option

Avec une case d’option, les utilisateurs font un choix parmi un ensemble d’options mutuellement exclusives et connexes. Les utilisateurs peuvent choisir une seule et unique option. Les cases d’option sont ainsi appelées parce qu’elles fonctionnent comme les présélections de canal sur les radios.

Un groupe typique de cases d’option.

Un groupe de cases d’option se comporte comme un seul contrôle. Seul le choix sélectionné est accessible à l’aide de la touche Tab, mais les utilisateurs peuvent parcourir le groupe à l’aide des touches de direction.

Est-ce le bon dispositif de contrôle ?

Pour décider, tenez compte de ces questions :

• Le contrôle utilisé pour choisir une option parmi un ensemble de choix mutuellement exclusifs ? Sinon, utilisez un autre contrôle. Pour choisir plusieurs options, utilisez plutôt des cases à cocher, une liste de sélections multiples ou une liste de cases à cocher.

• Le nombre d’options entre deux et sept ? Étant donné que l’espace d’écran utilisé est proportionnel au nombre d’options, conservez le nombre d’options dans un groupe compris entre deux et sept. Pour huit options ou plus, utilisez une liste déroulante ou une liste de sélection unique.

• Une case à cocher serait-elle un meilleur choix ? S’il n’existe que deux options, vous pouvez utiliser une case à cocher unique à la place. Toutefois, les cases à cocher ne conviennent qu’à l’activation ou à la désactivation d’une seule option, tandis que les cases d’option peuvent être utilisées pour différentes alternatives. Si les deux solutions sont possibles :

  • Utilisez des cases d’option si la signification de la case à cocher désactivée n’est pas complètement évidente.

    Incorrect :

    

    correct :

    

    Dans l’exemple correct, les choix ne sont pas opposés, de sorte que les cases d’option sont le meilleur choix.

  • Utilisez des cases d’option sur les pages de l’Assistant pour effacer les alternatives, même si une case à cocher est acceptable.

  • Utilisez les cases d’option si vous avez suffisamment d’espace d’écran et que les options sont suffisamment importantes pour être une bonne utilisation de cet espace d’écran. Sinon, utilisez une case à cocher ou une liste déroulante.

    Incorrect :

    

    Dans cet exemple, les options ne sont pas suffisamment importantes pour utiliser les cases d’option.

    correct :

    

    Dans cet exemple, une case à cocher est une utilisation efficace de l’espace d’écran pour cette option périphérique.

  • Utilisez une case à cocher s’il y a d’autres cases à cocher sur la page.

• Une liste déroulante serait-elle un meilleur choix ? Si l’option par défaut est recommandée pour la plupart des utilisateurs dans la plupart des cas, les cases d’option peuvent attirer davantage l’attention sur les options que nécessaire.

  • Envisagez d’utiliser une liste déroulante si vous ne souhaitez pas attirer l’attention sur les options, ou si vous ne souhaitez pas encourager les utilisateurs à apporter des modifications. Une liste déroulante se concentre sur la sélection actuelle, tandis que les cases d’option mettent en évidence toutes les options de façon égale.

    

    Dans cet exemple, une liste déroulante se concentre sur la sélection actuelle et empêche les utilisateurs d’apporter des modifications.

  • Considérez une liste déroulante s’il existe d’autres listes déroulantes sur la page.

• Un ensemble de boutons de commande, de liens de commande ou de bouton fractionné serait-il un meilleur choix ? Si les cases d’option sont utilisées uniquement pour affecter la façon dont une commande est effectuée, il est souvent préférable de présenter les variantes de commande à la place. Cela permet aux utilisateurs de choisir la commande appropriée avec une seule interaction.

• Les options présentent-elles des options de programme plutôt que des données ? Les valeurs des options ne doivent pas être basées sur le contexte ou d’autres données. Pour les données, utilisez une liste déroulante ou une liste de sélection unique.

• Si le contrôle est utilisé sur une page d’Assistant ou un panneau de configuration, le contrôle répond-il à l’instruction principale et les utilisateurs peuvent-ils modifier ultérieurement le choix ? Si c’est le cas, envisagez d’utiliser des liens de commande au lieu de cases d’option pour rendre l’interaction plus efficace.

• Les valeurs ne sont-elles pas numériques ? Pour les données numériques, utilisez des zones de texte, des listes déroulantes ou des curseurs.

Lignes directrices

Généralités

• Répertoriez les options dans un ordre logique, par exemple, les plus susceptibles d’être sélectionnées au moins, opération la plus simple pour le plus complexe, ou le moins risque pour la plupart. L’ordre alphabétique n’est pas recommandé, car il dépend de la langue et n’est donc pas localisable.

• Si aucune des options n’est un choix valide, ajoutez une autre option pour refléter ce choix, par exemple Aucun ou Ne s’applique pas.

• Préférez aligner verticalement les cases d’option plutôt que horizontalement. L’alignement horizontal est plus difficile à lire et à localiser.

  correct :

  

  Dans cet exemple, les cases d’option sont alignées verticalement.

  Incorrect :

  

  Dans cet exemple, l’alignement horizontal est plus difficile à lire.

• Reconsidérer l’utilisation de zones de groupe pour organiser des groupes de cases d’option, ce qui entraîne souvent un encombrement inutile de l’écran.

• N’utilisez pas d’étiquettes de case d’option comme étiquettes de zone de groupe.

• N’utilisez pas la sélection d’une case d’option pour :

  • Exécuter des commandes.
  • Afficher d’autres fenêtres, comme une boîte de dialogue pour recueillir plus de saisies.
  • Afficher ou masquer dynamiquement d’autres contrôles liés au contrôle sélectionné (les lecteurs d’écran ne peuvent pas détecter ces événements). Toutefois, vous pouvez modifier dynamiquement le texte en fonction de la sélection.

Contrôles subordonnés

• Placez les contrôles subordonnés à droite ou inférieure (mis en retrait, videz avec l’étiquette de case d’option) la case d’option et son étiquette. Terminez l’étiquette de case d’option avec un signe deux-points.

  

  Dans cet exemple, la case d’option et son contrôle subordonné partagent l’étiquette de case d’option et sa touche d’accès. Dans ce cas, les touches de direction déplacent le focus de la case d’option vers sa zone de texte subordonnée.

• Laissez les zones de texte modifiables dépendantes et les listes déroulantes activées s’ils partagent l’étiquette de la case d’option. Lorsque les utilisateurs tapez ou collez quoi que ce soit dans la zone, sélectionnez automatiquement l’option correspondante. Cela simplifie l’interaction.

  

  Dans cet exemple, l’entrée d’un numéro de page sélectionne automatiquement pages.

• Évitez d’imbriquer des cases d’option avec d’autres cases d’option ou cases à cocher. Si possible, conservez toutes les options au même niveau.

  correct :

  

  Dans cet exemple, les options sont au même niveau.

  Incorrect :

  

  Dans cet exemple, l’utilisation d’options imbriquées ajoute une complexité inutile.

• Si vous imbriquez des cases d’option avec d’autres cases d’option ou cases à cocher, désactivez ces contrôles subordonnés jusqu’à ce que l’option de haut niveau soit sélectionnée. Cela évite toute confusion quant à la signification des contrôles subordonnés.

Valeurs par défaut

• Étant donné qu’un groupe de cases d’option représente un ensemble de choix mutuellement exclusifs, utilisez toujours une case d’option sélectionnée par défaut. Sélectionnez le plus sûr (pour éviter la perte de données ou d’accès au système) et l’option la plus sécurisée et privée. Si la sécurité et la sécurité ne sont pas des facteurs, sélectionnez l’option la plus probable ou la plus pratique.

• Exceptions: N’avez pas de sélection par défaut si :

  • Il n’existe aucune option par défaut acceptable pour la sécurité, la sécurité ou les raisons juridiques, et par conséquent, l’utilisateur doit faire un choix explicite. Si l’utilisateur n’effectue pas de sélection, affichez un message d’erreur pour en forcer un.
  • L’interface utilisateur doit refléter l’état actuel et l’option n’a pas encore été définie. Une valeur par défaut implique incorrectement que l’utilisateur n’a pas besoin d’effectuer une sélection.
  • L’objectif est de collecter des données non biaisées. Les valeurs par défaut biaisent la collecte de données.
  • Le groupe de cases d’option représente une propriété dans un état mixte, qui se produit lors de l’affichage d’une propriété pour plusieurs objets qui n’ont pas le même paramètre. N’affichez pas de message d’erreur dans ce cas, car chaque objet a un état valide.

• Faites de la première option l’option par défaut, car les utilisateurs s’attendent souvent à ce que cet ordre ne soit pas logique. Pour ce faire, vous devrez peut-être modifier les étiquettes d’option.

  Incorrect :

  

  Dans cet exemple, l’option par défaut n’est pas la première option.

  correct :

  

  Dans cet exemple, les étiquettes d’option sont réécrites pour rendre la première option l’option par défaut.

Dimensionnement et espacement recommandés

Dimensionnement et espacement recommandés pour les cases d’option.

Étiquettes

Étiquettes de case d’option

• Étiquetez chaque case d’option.

• Affectez une clé d’accès unique à chaque étiquette. Pour les directives, voir Clavier.

• Utilisez majuscules de style phrase.

• Écrivez l’étiquette en tant qu’expression, pas comme phrase, et n’utilisez pas de ponctuation de fin.

  • Exception: Si une étiquette de case d’option étiquette étiquette également un contrôle subordonné qui le suit, terminez l’étiquette par un signe deux-points.

• Utilisez des formulations parallèles et essayez de conserver la longueur sur la même longueur pour toutes les étiquettes.

• Concentrez le texte de l’étiquette sur les différences entre les options. Si toutes les options ont le même texte d’introduction, déplacez ce texte vers l’étiquette de groupe.

• Utilisez des formulations positives. Par exemple, utilisez plutôt que ne pas imprimer, et imprimez au lieu de ne pas imprimer.

• Décrivez simplement l’option avec l’étiquette. Gardez les étiquettes brèves afin qu’il soit facile de les référencer dans les messages et la documentation. Si l’option nécessite une explication supplémentaire, fournissez l’explication dans un texte statique contrôle à l’aide de phrases complètes et de ponctuation de fin.

  

  Dans cet exemple, les options sont expliquées à l’aide de contrôles de texte statique distincts.

  Remarque

  L’ajout d’une explication à une case d’option ne signifie pas que vous devez fournir des explications pour toutes les cases d’option. Fournissez les informations pertinentes dans l’étiquette si vous le pouvez et utilisez des explications uniquement si nécessaire. Ne restez pas simplement l’étiquette pour la cohérence.

   

• Si une option est fortement recommandée, ajoutez « (recommandé) » à l’étiquette. Veillez à ajouter à l’étiquette de contrôle, et non aux notes supplémentaires.

• Si une option est destinée uniquement aux utilisateurs avancés, ajoutez « (avancé) » à l’étiquette. Veillez à ajouter à l’étiquette de contrôle, et non aux notes supplémentaires.

• Si vous devez utiliser des étiquettes multilignes, alignez le haut de l’étiquette avec la case d’option.

• N’utilisez pas de contrôle subordonné, les valeurs qu’il contient ou son étiquette d’unités pour créer une phrase ou une expression. Une telle conception n’est pas localisable, car la structure de phrases varie selon la langue.

Étiquettes de groupe de cases d’option

• Utilisez l’étiquette de groupe pour expliquer l’objectif du groupe, et non comment effectuer la sélection. Supposons que les utilisateurs savent comment utiliser des cases d’option. Par exemple, ne dites pas « Sélectionner l’un des choix suivants ».

• Tous les groupes de cases d’option ont besoin d’étiquettes. Écrivez l’étiquette sous la forme d’un mot ou d’une expression, et non en tant que phrase, en se terminant par un signe deux-points à l’aide d’un texte statique ou d’une zone de groupe.

  Exception : Omettez l’étiquette si elle n’est qu’une répétition de l’instruction principale de la boîte de dialogue. Dans ce cas, l’instruction principale prend le signe deux-points (sauf s’il s’agit d’une question) et la clé d’accès (s’il en existe un).

  acceptable :

  

  Dans cet exemple, l’étiquette du groupe de cases d’option n’est qu’une remise en forme de l’instruction principale.

  Mieux :

  

  Dans cet exemple, l’étiquette redondante est supprimée, de sorte que l’instruction principale accepte le signe deux-points.

• N’assignez pas de touche d’accès à l’étiquette. Cela n’est pas nécessaire et rend les autres clés d’accès plus difficiles à affecter.

  • Exception: Si tous les contrôles ne peuvent pas avoir de clés d’accès uniques, vous pouvez affecter une clé d’accès à l’étiquette au lieu des contrôles individuels. Pour plus d’informations, consultez clavier .

Documentation

Lorsque vous faites référence à des cases d’option :

• Utilisez le texte exact de l’étiquette, y compris sa mise en majuscule, mais n’incluez pas le trait de soulignement ou le signe deux-points de la clé d’accès.
• Dans la programmation et d’autres documents techniques, reportez-vous aux cases d’option comme cases d’option. Partout ailleurs, utilisez des boutons d’option, en particulier dans la documentation utilisateur.
• Pour décrire l’interaction utilisateur, utilisez un clic.
• Lorsque cela est possible, mettez en forme l’étiquette à l’aide du texte en gras. Sinon, placez l’étiquette entre guillemets uniquement si nécessaire pour éviter toute confusion.

Exemple : cliquez sur La page Active, puis sur OK.