Recommandations en matière de curseurs

Applies to Windows and Windows Phone

Application Windows : contrôles de type curseur

Application Windows : contrôles de type curseur

Application Windows Phone : contrôles de type curseur

Application Windows Phone : contrôles de type curseur

Description

Avec un contrôle de curseur (également appelé contrôle de plage), un utilisateur peut spécifier une valeur comprise dans une plage donnée en appuyant sur une piste ou en déplaçant le curseur le long de cette piste.

Exemples

Capture d’écran du contrôle de curseur standard

Est-ce le contrôle approprié ?

Utilisez un curseur lorsque vous voulez donner la possibilité à l’utilisateur de spécifier des valeurs définies et contiguës (telles que le volume ou la luminosité) ou une plage de valeurs distinctes (comme les paramètres de résolution d’écran).

Un curseur représente un bon choix lorsque vous savez que les utilisateurs considèrent la valeur comme une quantité relative, et non comme une valeur numérique. Par exemple, dans le cas du volume, ils le régleront sur faible ou moyen, et pas sur 2 ou 5.

N’utilisez pas un curseur pour les paramètres binaires. Utilisez un bouton bascule à la place.

Voici les autres facteurs à prendre en compte lorsque vous hésitez à utiliser un curseur :

  • Le paramètre ressemble-t-il à une quantité relative ? Dans la négative, utilisez des cases d’option ou des contrôles de sélection.
  • Le paramètre est-il une valeur numérique connue, exacte ? Si oui, utilisez une zone de texte numérique.
  • L’ utilisateur bénéficiera-t-il du résultat instantané des modifications de ses paramètres ? Si c’est le cas, utilisez un curseur. Par exemple, les utilisateurs choisissent plus facilement une couleur lorsqu’ils voient immédiatement le résultat des modifications qu’ils ont apportées aux valeurs de teinte, de saturation ou de luminosité.
  • La plage du paramètre comporte-t-elle quatre valeurs ou davantage ? Si ce n’est pas le cas, utilisez des cases d’option.
  • L’utilisateur peut-il modifier la valeur ? Les curseurs sont parfaitement adaptés à l’interaction utilisateur. En revanche, si l’utilisateur n’est jamais autorisé à modifier la valeur, utilisez plutôt du texte en lecture seule.

Si vous devez choisir entre un curseur et une zone de texte numérique, utilisez plutôt une zone de texte numérique si :

  • l’espace de l’écran est réduit ;
  • l’utilisateur préfère probablement utiliser un clavier.

Utilisez un curseur si :

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

Pratiques conseillées et déconseillées

  • Veillez à ce que la taille du contrôle permette à l’utilisateur de définir facilement la valeur souhaitée. Pour les paramètres ayant des valeurs distinctes, assurez-vous que l’utilisateur peut facilement sélectionner n’importe quelle valeur à l’aide de la souris. Assurez-vous que les extrémités du curseur restent toujours dans les limites de la zone d’affichage.
  • Fournissez un retour immédiat pendant ou juste après une sélection de l’utilisateur (lorsque cela est faisable). Par exemple, le contrôle du volume Windows émet un son pour indiquer le volume audio sélectionné.
  • Utilisez des étiquettes pour afficher les différentes valeurs de la plage. Exception : si le curseur est orienté à la verticale et que l’étiquette supérieure est Maximum, Haut, Plus ou un équivalent, vous n’êtes pas obligé d’ajouter les autres étiquettes, car la signification est évidente.
  • Si vous désactivez le curseur, désactivez aussi l’ensemble des étiquettes ou retours visuels associés.
  • Tenez compte de l’orientation du texte lorsque vous définissez la direction du flux et/ou l’orientation de votre curseur. Selon la langue, le script est lu de gauche à droite ou de droite à gauche.
  • N’utilisez pas un curseur comme indicateur de progression.
  • Ne modifiez pas la taille du curseur de défilement à partir de la taille par défaut.
  • Ne créez pas de curseur continu si la plage de valeurs est grande et s’il y a toutes les chances que l’utilisateur ne sélectionne qu’une seule des valeurs représentatives de la plage. Utilisez plutôt ces valeurs comme les seuls points d’ancrage autorisés. Par exemple, si la valeur exprimant une durée peut aller jusqu’à 1 mois mais que l’utilisateur a uniquement besoin de choisir entre 1 minute, 1 heure, 1 jour ou 1 mois, créez un curseur avec seulement 4 points d’ancrage.

Indications d’utilisation supplémentaires

Choix de la disposition appropriée : horizontale ou verticale

Vous pouvez orienter votre curseur à l’horizontale ou à la verticale. Utilisez ces recommandations pour déterminer la disposition à utiliser.

  • Utilisez une orientation naturelle. Par exemple, si le curseur représente une valeur du monde réelle qui est normalement affichée à la verticale (telle que la température), utilisez une orientation verticale.
  • Si le contrôle est utilisé pour effectuer une recherche dans une application multimédia, telle qu’une application vidéo, utilisez une orientation horizontale.
  • Lorsque vous utilisez un curseur dans une page où il est possible de faire un mouvement panoramique dans un sens (horizontal ou vertical), utilisez pour le curseur une orientation différente de celle du panoramique. Sinon, les utilisateurs peuvent balayer le curseur et modifier sa valeur par accident en essayant de faire défiler la page.
  • Si vous ne savez toujours pas quelle orientation utiliser, préférez celle qui s’adapte le mieux à la disposition de votre page.

Recommandations en matière de direction de la plage

La direction de la plage est le sens dans lequel vous déplacez le curseur lorsque vous le faites glisser de sa valeur actuelle vers sa valeur maximale.

  • Pour les curseurs verticaux, placez la valeur la plus grande au sommet du curseur, quel que soit le sens de lecture. Par exemple, dans le cas d’un curseur de volume, placez toujours le paramètre de volume maximal en haut du curseur. Pour d’autres types de valeurs (comme les jours de la semaine), suivez la direction de lecture de la page.
  • Pour les curseurs horizontaux, placez la valeur la plus faible du côté gauche du curseur pour les pages qui se lisent de gauche à droite et à droite pour les pages qui se lisent de droite à gauche.
  • La seule exception à la recommandation précédente concerne les barres de recherche multimédias : placez toujours la valeur inférieure à gauche du curseur.

Recommandations en matière de étapes et les graduations

  • Utilisez des points d’ancrage si vous ne souhaitez pas que le curseur autorise des valeurs arbitraires entre la valeur minimale et la valeur maximale. Par exemple, si vous utilisez un curseur pour spécifier le nombre de tickets de cinéma à acheter, n’autorisez pas les valeurs à virgule flottante. Définissez un point d’ancrage de valeur 1.
  • Si vous spécifiez des points d’ancrage, veillez à ce que le dernier point corresponde à la valeur maximale du curseur.
  • Utilisez la graduation lorsque vous voulez indiquer aux utilisateurs l’emplacement de valeurs importantes ou significatives. Par exemple, un curseur qui contrôle un zoom pourrait être pourvu de graduations pour 50 %, 100 % et 200 %.
  • Affichez des graduations lorsque les utilisateurs ont besoin de connaître la valeur approximative du paramètre.
  • Affichez des graduations et l’étiquette des valeurs lorsque les utilisateurs ont besoin de connaître la valeur exacte du réglage choisi, sans interagir avec le contrôle. Sinon, ils peuvent connaître la valeur exacte via l’info-bulle contenant la valeur.
  • Affichez systématiquement des graduations lorsque les points d’ancrage ne sont pas clairement identifiables. Par exemple, si le curseur a une largeur de 200 pixels et a 200 points d’ancrage, vous pouvez masquer les graduations, car les utilisateurs ne remarqueront pas le comportement d’ancrage. Mais s’il existe seulement 10 points d’ancrage, affichez les graduations.

Recommandations en matière d’étiquettes

  • Étiquettes de curseur

    L’étiquette du curseur indique à quoi sert le curseur.

    • Utilisez une étiquette sans ponctuation à la fin.
    • Placez les étiquettes au-dessus du curseur lorsque ce dernier se trouve dans un écran où la plupart des étiquettes sont placées au-dessus des contrôles.
    • Placez les étiquettes sur le côté lorsque le curseur se trouve dans un écran où la plupart des étiquettes sont placées sur le côté des contrôles.
    • Évitez de placer les étiquettes au-dessous du curseur, car les doigts de l’utilisateur risquent de masquer l’étiquette lorsque ce dernier touche le curseur.
  • Étiquettes de plage

    Les étiquettes de plage ou de remplissage décrivent les valeurs minimales et maximales du curseur.

    • Étiqueter les deux extrémités de la plage du curseur, à moins que cela ne soit pas nécessaire avec une orientation verticale.
    • Utilisez un seul mot, si possible, pour chaque étiquette.
    • N’utilisez pas de ponctuation finale.
    • Veillez à ce que ces étiquettes soient descriptives et balancées. Exemples : Maximum/Minimum, Plus/Moins, Bas/Haut, Faible/Fort.
  • Étiquettes de valeur

    Une étiquette de valeur affiche la valeur actuelle du curseur.

    • Si vous nécessitez une étiquette de valeur, affichez-la sous le curseur.
    • Centrez le texte relatif au contrôle et ajoutez les unités (telles que pixels).
    • Étant donné que le contrôle de défilement du curseur est masqué pendant son déplacement, affichez la valeur actuelle d’une autre manière, avec une étiquette ou un autre élément visuel de votre choix. Vous pouvez définir une taille de texte afin d’afficher du texte dans la taille appropriée en dessous du curseur.

Apparence et interaction

Un curseur est constitué d’une piste et d’un contrôle de défilement. La piste a la forme d’une barre (sur laquelle peuvent éventuellement s’afficher différents styles de graduations). Cette barre représente la plage de valeurs proposées à l’utilisateur. Le contrôle de défilement est un sélecteur dont la position est réglable. L’utilisateur définit sa position en appuyant sur la piste ou en déplaçant le contrôle le long de cette piste.

Un curseur offre une large cible tactile. Pour garantir une accessibilité en mode tactile, un curseur ne doit pas être placé trop près du bord de l’écran.

Lors de la conception d’un curseur personnalisé, réfléchissez à la meilleure façon de présenter toutes les informations à l’utilisateur en encombrant le moins possible l’écran. Ajoutez une étiquette de valeur si vous souhaitez indiquer à l’utilisateur les unités utilisées pour l’aider à définir le paramètre. Trouvez une manière attrayante de représenter graphiquement ces valeurs. Prenons l’exemple d’un curseur contrôlant le volume. Ce curseur peut afficher une image de haut-parleur sans aucune onde sonore lorsque le volume est au plus bas et, à l’inverse, une image de haut-parleur avec des ondes sonores lorsque le volume est au plus haut.

Rubriques associées

Pour les concepteurs
Recommandations en matière de boutons bascule
Pour les développeurs (HTML)
input type=range element | input type=range object
Pour les développeurs (XAML)
Slider class

 

 

Afficher:
© 2014 Microsoft