Partager via


Contrôles spin

Note

Ce guide de conception a été créé pour Windows 7 et n’a pas été mis à jour pour les versions plus récentes de Windows. La plupart des conseils s’appliquent toujours en principe, mais la présentation et les exemples ne reflètent pas nos conseils de conception actuels.

Avec un contrôle de rotation, les utilisateurs peuvent cliquer sur des boutons de direction pour modifier de manière incrémentielle la valeur dans sa zone de texte numérique associée. La zone de rotation de terme fait référence à la combinaison d’une zone de texte et de son contrôle de rotation associé.

capture d’écran du contrôle de rotation et de la zone de texte

Une boîte de rotation classique.

Les utilisateurs préfèrent souvent les contrôles spin, car ils peuvent apporter des modifications sans déplacer leurs mains de la souris. Lorsque le contrôle spin est associé à une zone de texte, les utilisateurs peuvent taper ou coller une entrée directement dans la zone de texte. L’utilisation du contrôle spin est donc facultative.

Bien que les contrôles de rotation soient utilisés pour l’entrée numérique, l’entrée n’a pas besoin d’être un nombre entier pur. L’entrée peut être des nombres décimaux et il peut avoir des signes négatifs, des délimiteurs (tels que des points-virgules ou des traits d’union) et des modificateurs d’unité.

Note

Les instructions relatives aux zones de texte et disposition sont présentées dans des articles distincts.

 

C’est le bon contrôle ?

Pour décider, tenez compte de ces questions :

  • Le contrôle est-il utilisé pour l’entrée numérique ? Si ce n’est pas le cas, utilisez un autre contrôle, tel qu’une liste déroulante ou curseur, pour effectuer une sélection dans un ensemble fixe de valeurs. Utilisez des barres de défilement pour le défilement.

  • Les utilisateurs considèrent-ils la valeur comme une quantité relative, et non comme une valeur numérique ? Dans ce cas, utilisez plutôt un curseur. Utilisez des zones de rotation uniquement pour les valeurs numériques exactes et connues. Par exemple, les utilisateurs pensent à définir leur volume audio sur faible ou moyen, et non sur la définition de la valeur sur 2 ou 5.

  • Le contrôle est-il associé à une zone de texte ? Si ce n’est pas le cas, n’utilisez pas. Les contrôles spin ne doivent pas être utilisés seul ou avec d’autres types de contrôles en plus d’une zone de texte.

    Incorrect :

    capture d’écran du contrôle spin, graphique, aucune zone de texte

    Dans cet exemple, un contrôle spin est utilisé pour contrôler un graphique dynamique.

  • Les plages de valeurs contiguës sont-elles valides ? Si ce n’est pas le cas, utilisez plutôt une liste déroulante de valeurs valides.

    capture d’écran de la liste déroulante

    Dans cet exemple, tous les numéros de lecteur de disque ne sont pas valides. Par conséquent, une liste déroulante est un meilleur choix.

  • L’utilisation du contrôle spin est-elle pratique ? L’utilisation d’un contrôle de rotation est pratique pour :

    • Entrer un petit nombre, généralement moins de 100.
    • Apporter de petites modifications à une valeur existante ou par défaut.

    Bien que les contrôles de rotation puissent être utilisés pour n’importe quelle entrée numérique, ils sont inefficaces dans des situations autres que celles-ci.

  • Le contrôle spin est-il utile ? Le contrôle est-il utilisé dans un contexte où les utilisateurs sont susceptibles d’utiliser leur souris ? Si ce n’est pas le cas, envisagez un contrôle de rotation facultatif.

  • Les listes déroulantes des contrôles frères sont-elles disponibles ? S’il existe d’autres listes déroulantes, envisagez d’utiliser une liste déroulante pour assurer la cohérence.

    capture d’écran de la boîte de dialogue avec des listes déroulantes

    Dans cet exemple, une zone de rotation peut être utilisée, mais une liste déroulante est utilisée pour la cohérence.

  • Les utilisateurs tactiles ou de stylet sont-ils une cible principale ? Si c’est le cas, envisagez d’utiliser une liste déroulante à la place. Les boutons de flèche d’un contrôle de rotation sont trop petits pour être utilisés efficacement avec une touche ou un stylet.

Si un curseur ou une zone de rotation est possible, utilisez une zone de rotation si :

  • L’espace de l’écran est serré.
  • Un utilisateur est susceptible de préférer utiliser le clavier.

Utilisez un curseur si :

  • Les utilisateurs bénéficieront de commentaires instantanés.

Lignes directrices

Généralités

  • Utilisez des contrôles de rotation chaque fois qu’ils sont pratiques et utiles. Voyez Est-ce que c’est le bon contrôle ?

    • Exception : Pour être cohérent avec d’autres zones de texte sur la même interface utilisateur, utilisez des contrôles de rotation même s’ils ne sont pas toujours pratiques.

    correct :

    capture d’écran du mois, du jour, des contrôles de rotation de l’année

    Dans cet exemple, un contrôle spin est utilisé avec le contrôle année pour la cohérence, même s’il n’est pas toujours pratique.

    Incorrect :

    capture d’écran du contrôle de rotation d’adresse IP

    Dans cet exemple, le contrôle spin est inutilisable.

  • Toujours faire un contrôle spin le « pote » de la zone de texte. Cela place le contrôle spin à l’intérieur de la zone de texte.

    correct :

    capture d’écran du contrôle spin placé dans la zone de texte

    Incorrect :

    capture d’écran du contrôle spin placé en dehors de la zone de texte

    Dans l’exemple correct, le contrôle spin est placé à l’intérieur de sa zone de texte associée.

  • Désactivez un contrôle spin lorsque sa zone de texte associée est désactivée. Le contrôle spin est une méthode d’entrée supplémentaire, jamais la seule méthode d’entrée.

Valeurs

  • Définissez le bouton supérieur pour augmenter la valeur d’une unité et le bouton inférieur pour diminuer d’une unité. En règle générale, l’unité est une unité, mais elle doit être la plus petite modification courante de la valeur. Dans l’idéal, le contrôle spin doit couvrir toutes les valeurs valides et il doit être plus pratique que de taper dans le texte.

    capture d’écran du contrôle de rotation « marges »

    Dans cet exemple, le fait de cliquer sur un contrôle spin modifie les valeurs de .1, ce qui est la plus petite modification courante de la valeur. L’utilisation d’une unité plus petite couvre la plage de valeurs valides, mais rend les contrôles de rotation inutilisables.

  • Utilisez le contrôle spin pour limiter l’entrée aux valeurs valides. L’utilisation d’un contrôle spin ne doit jamais entraîner une valeur incorrecte.

  • À la fin d’une plage de valeurs valides, redémarrez la plage. La métaphore du contrôle spin est que l’utilisateur tourne une roue de valeurs, ce comportement semblable à la roue.

    • Exception : Ne redémarrez pas la plage si la valeur résultante est certaine d’être incorrecte.

      capture d’écran du contrôle de rotation « nombre de copies »

      Dans cet exemple, cliquer sur le bouton flèche bas ne redémarre pas la plage (en accédant à la valeur maximale), car cette valeur est certaine d’être incorrecte.

  • Utilisez du texte au lieu de valeurs numériques spéciales. Autoriser les utilisateurs à effectuer une rotation vers ces valeurs spéciales au lieu de les connaître et de les taper.

    capture d’écran du contrôle de rotation « veille après (jamais) »

    Dans cet exemple, Never est une valeur spéciale, mais les utilisateurs peuvent y faire tourner.

  • Si la valeur comporte des délimiteurs, la zone de texte associée doit avoir plusieurs points de focus d’entrée. Cela permet aux segments numériques d’être manipulés individuellement.

    capture d’écran du contrôle de rotation de temps, minutes sélectionnées

    Dans cet exemple, le contrôle spin affecte les valeurs des heures, minutes, secondes et A.M./P.M., selon le focus.

  • Si la valeur a des unités, utilisez également le contrôle spin pour modifier ces unités.

    capture d’écran du contrôle de rotation de temps, 'a.m.' sélectionné

    Dans cet exemple, le contrôle spin peut être utilisé pour modifier les unités.

Étiquettes

  • Appliquez l’étiquetage de zone de texte instructions pour étiqueter la zone de texte associée. Les contrôles spin ne sont jamais étiquetés directement.

Documentation

Lorsque vous faites référence à des contrôles de rotation :

  • Ne faites pas référence aux contrôles spin dans la documentation utilisateur. Au lieu de cela, reportez-vous à l’étiquette de la zone de texte associée.
  • Reportez-vous aux contrôles de rotation et aux zones de rotation uniquement dans la programmation et dans d’autres documents techniques.

Exemple : dans la zone Date, tapez ou sélectionnez la partie de la date à modifier.

glossaire