Partager via


Contrôles de rotation

Notes

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 la zone de texte numérique associée. Le terme spin box 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

Boîte de rotation classique.

Les utilisateurs préfèrent souvent les contrôles de rotation, car ils peuvent apporter des modifications sans déplacer leurs mains de la souris. Lorsque le contrôle de rotation 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 de rotation 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 avoir des signes négatifs, des délimiteurs (tels que des points-virgules ou des traits d’union) et des modificateurs d’unité.

Notes

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

 

Est-ce le contrôle approprié ?

Pour vous décider, posez-vous les questions suivantes :

  • 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 un curseur, pour sélectionner à partir d’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, pas comme une valeur numérique ? Si c’est le cas, utilisez plutôt un curseur. Utilisez des zones de rotation uniquement pour les valeurs numériques exactes et connues. Par exemple, dans le cas du volume, ils le régleront sur faible ou moyen, et pas 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 de rotation ne doivent pas être utilisés seuls ou avec d’autres types de contrôles en plus d’une zone de texte.

    Incorrect :

    capture d’écran du contrôle de rotation, graphique, pas de 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. Une liste déroulante est donc un meilleur choix.

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

    • Entrée d’un petit nombre, généralement inférieur à 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 de rotation 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, considérez un contrôle de rotation facultatif.

  • Les contrôles frères sont-ils des listes déroulantes ? S’il existe d’autres listes déroulantes, envisagez d’utiliser une liste déroulante pour 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 plutôt d’utiliser une liste déroulante. Les boutons de flèche d’un contrôle de rotation sont trop petits pour être utilisés efficacement avec le toucher 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 réduit ;
  • Un utilisateur préférera probablement utiliser le clavier.

Utilisez un curseur si :

  • les utilisateurs bénéficieront d’un résultat instantané.

Consignes

Général

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

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

    Correct :

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

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

    Incorrect :

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

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

  • Faites toujours d’un contrôle de rotation le « buddy » 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 de rotation placé à l’intérieur de la zone de texte

    Incorrect :

    capture d’écran du contrôle de rotation placé à l’extérieur de la zone de texte

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

  • Désactivez un contrôle de rotation 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é en est une, mais il doit s’agir de la plus petite modification de valeur commune. Dans l’idéal, le contrôle de rotation doit couvrir toutes les valeurs valides, et il doit être plus pratique que de taper du texte.

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

    Dans cet exemple, le fait de cliquer sur un contrôle de rotation modifie les valeurs par .1, qui est la plus petite modification courante de 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 de rotation pour limiter l’entrée à des valeurs valides. L’utilisation d’un contrôle de rotation 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 de rotation est que l’utilisateur fait tourner une roue de valeurs, d’où ce comportement semblable à celui de la roue.

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

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

      Dans cet exemple, le fait de cliquer sur le bouton flèche vers le bas ne redémarre pas la plage (en accédant à la valeur maximale), car cette valeur est sûrement incorrecte.

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

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

    Dans cet exemple, Jamais est une valeur spéciale, mais les utilisateurs peuvent y 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 de manipuler les segments numériques individuellement.

    capture d’écran du contrôle time spin, minutes sélectionnées

    Dans cet exemple, le contrôle spin affecte les valeurs des heures, des minutes, des secondes et des 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 time spin, ' a.m. ' sélectionné

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

Étiquettes

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

Documentation

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

  • Ne faites pas référence aux contrôles de rotation 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 d’autres documentations techniques.

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

Glossaire