Curseurs (Concepts de base de la conception)

Avec un curseur, les utilisateurs peuvent choisir parmi une plage continue de valeurs. Un curseur a une barre qui affiche la plage et un indicateur qui affiche la valeur actuelle. Les graduations facultatives affichent des valeurs.

Curseur classique.

C’est le bon contrôle ?

Utilisez un curseur lorsque vous souhaitez que vos utilisateurs puissent définir des valeurs définies, contiguës (telles que le volume ou la luminosité) ou une plage de valeurs discrètes (telles que les paramètres de résolution d’écran).

Un curseur est un bon choix lorsque vous savez que les utilisateurs considèrent la valeur comme une quantité relative, et non une valeur numérique. 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.

Pour décider, tenez compte de ces questions :

• Le paramètre semble-t-il être une quantité relative ? Si ce n’est pas le cas, utilisez cases d’option, ou une liste déroulante ou liste de sélection unique.
• La définition est-elle une valeur numérique exacte et connue ? Dans ce cas, utilisez une zones de texte numériques.
• Un utilisateur bénéficie-t-il de commentaires instantanés sur l’effet de la définition des modifications ? Dans ce cas, utilisez un curseur. Par exemple, les utilisateurs peuvent choisir une couleur plus facilement en voyant immédiatement l’effet des modifications apportées aux valeurs de teinte, de saturation ou de luminosité.
• Le paramètre a-t-il une plage de quatre valeurs ou plus ? Si ce n’est pas le cas, utilisez des cases d’option.
• L’utilisateur peut-il modifier la valeur ? Les curseurs sont destinés à l’interaction utilisateur. Si un utilisateur ne peut jamais modifier la valeur, utilisez une zone de texte en lecture seule à la place.

Si un curseur ou une zone de texte numérique est possible, utilisez une zone de texte numérique 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

• Utilisez une orientation naturelle. Par exemple, si le curseur représente une valeur réelle qui est normalement affichée verticalement (comme la température), utilisez une orientation verticale.

• Orientez le curseur pour refléter la culture de vos utilisateurs. Par exemple, les cultures occidentales lisent de gauche à droite, de sorte que pour les curseurs horizontaux, placez le bas de la plage à gauche et le haut de gamme à droite. Pour les cultures qui lisent de droite à gauche, faites l’inverse.

• Dimensionner le contrôle afin qu’un utilisateur puisse facilement définir la valeur souhaitée. Pour les paramètres avec des valeurs discrètes, assurez-vous que l’utilisateur peut facilement sélectionner n’importe quelle valeur à l’aide de la souris.

• Envisagez d’utiliser une échelle non linéaire si la plage de valeurs est volumineuse et que les utilisateurs sélectionnent probablement des valeurs à une extrémité de la plage. Par exemple, la valeur de temps peut être de 1 minute, 1 heure, 1 jour ou 1 mois.

• Chaque fois que cela est pratique, donnez des commentaires immédiats pendant ou après qu’un utilisateur effectue une sélection. Par exemple, les bips de contrôle de volume Microsoft Windows pour indiquer le volume audio résultant.

• Utiliser des étiquettes pour afficher la plage de valeurs.

  Exception : Si le curseur est orienté verticalement et que l’étiquette supérieure est Maximum, High, More ou équivalent, vous pouvez omettre les autres étiquettes, car la signification est claire.

  

  Dans cet exemple, l’orientation verticale du curseur rend les étiquettes de plage inutiles.

• Utilisez des graduations lorsque les utilisateurs doivent connaître la valeur approximative du paramètre.

• Utilisez des graduations et une étiquette de valeur lorsque les utilisateurs doivent connaître la valeur exacte du paramètre qu’ils choisissent. Utilisez toujours une étiquette de valeur si un utilisateur doit connaître les unités pour avoir un sens du paramètre.

  

  Dans cet exemple, une étiquette est utilisée pour indiquer clairement la valeur sélectionnée.

• Pour les curseurs orientés horizontalement, placez les graduations sous le curseur. Pour les curseurs orientés verticalement, placez les graduations à droite pour les cultures occidentales ; pour les cultures qui lisent de droite à gauche, faites l’inverse.

• Placez complètement l’étiquette de valeur sous le contrôle curseur afin que la relation soit claire.

  Incorrect :

  

  Dans cet exemple, l’étiquette de valeur n’est pas alignée sous le curseur.

• Lors de la désactivation d’un curseur, désactivez également les étiquettes associées.

• N’utilisez pas à la fois un curseur et une zone de texte numérique pour le même paramètre. Utilisez uniquement le contrôle le plus approprié.

  Exception : utilisez les deux contrôles lorsque l’utilisateur a besoin de commentaires immédiats et de la possibilité de définir une valeur numérique exacte.

• N’utilisez pas de curseur comme indicateur de progression.

• Ne modifiez pas la taille de l’indicateur de curseur par défaut.

  Incorrect :

  par défaut

  Dans cet exemple, une taille inférieure à la valeur par défaut est utilisée.

  correct :

  

  Dans cet exemple, la taille par défaut est utilisée.

• N’étiquetez pas chaque graduation.

Dimensionnement et espacement recommandés

Dimensionnement et espacement recommandés pour les curseurs.

Étiquettes

Étiquettes de curseur

• Utilisez une étiquette de texte statique se terminant par un signe deux-points ou une étiquette de zone de groupe sans ponctuation de fin.
• Attribuez une clé d’accès unique à chaque étiquette. Pour obtenir des instructions sur l’affectation, consultez clavier .
• Utilisez la mise en majuscules de style phrase.
• Positionnez l’étiquette du curseur à gauche du curseur, ou au-dessus et alignée sur le bord gauche du curseur (ou son identificateur de plage gauche, le cas échéant).

Étiquettes de plage

• Étiquetez les deux extrémités de la plage de curseurs, sauf si une orientation verticale rend cela inutile.
• Utilisez uniquement le mot, le cas échéant, pour chaque étiquette.
• N’utilisez pas de ponctuation de fin.
• Vérifiez que ces étiquettes sont descriptives et parallèles. Exemples : Maximum/Minimum, Plus/Moins, Faible/Haut, Soft/Loud.
• Utilisez la mise en majuscules de style phrase.
• N’attribuez pas de clés d’accès.

Étiquettes de valeur

• Si vous avez besoin d’une étiquette de valeur, affichez-la sous le curseur.

• Centrez le texte par rapport au contrôle et incluez les unités (telles que les pixels).

  

  Dans cet exemple, l’étiquette de valeur est centrée sous le curseur et inclut les unités.

Documentation

Lorsque vous faites référence à des curseurs :

• Utilisez le texte exact de l’étiquette, y compris sa mise en majuscule et incluez le curseur de mot. N’incluez pas le trait de soulignement ou le signe deux-points de la clé d’accès.
• Pour décrire l’interaction utilisateur, utilisez le déplacement.
• 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 : Pour augmenter votre résolution d’écran, déplacez le curseur résolution d’écran à droite.

Rubriques connexes

glossaire