Partager via

Curseurs

  • Article

Un curseur est un contrôle qui permet à l'utilisateur d'effectuer une sélection parmi une plage de valeurs en déplaçant un bouton le long d'une piste.

Un contrôle curseur

Est-ce le contrôle approprié ?

Utilisez un curseur lorsque vous souhaitez que vos utilisateurs puissent ajuster des valeurs définies et contiguës (un volume ou une luminosité, par exemple) ou une plage de valeurs discrètes (comme la résolution d’un écran).

Un curseur est un bon choix lorsque vous savez que les utilisateurs cherchent une valeur relative, et non une valeur numérique. Par exemple, il s'agit de baisser ou d'augmenter un volume sonore, mais pas de régler sa valeur sur 2 ou 5.

N’utilisez pas de curseur pour les paramètres binaires. Pour cela, utilisez plutôt un bouton à bascule.

Voici quelques facteurs supplémentaires à prendre en compte dans la décision d’utiliser un curseur :

  • Le paramètre s’apparente-t-il à une quantité relative ? Si ce n’est pas le cas, utilisez des cases d'option ou une zone de liste.
  • Le paramètre est-il une valeur numérique exacte connue ? Dans ce cas, utilisez une zone de texte numérique.
  • Un utilisateur va-t-il bénéficier d’un feedback instantané sur l’effet des modifications apportées aux paramètres ? Dans ce cas, utilisez un curseur. Par exemple, les utilisateurs peuvent choisir une couleur plus facilement s'ils voient 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 changer la valeur ? Les curseurs sont destinés à une interaction utilisateur. Si un utilisateur ne peut pas modifier la valeur, utilisez plutôt du texte en lecture seule.

Si vous hésitez entre un curseur et une zone de texte numérique, utilisez plutôt la zone de texte dans les cas suivants :

  • L’espace à l’écran est limité.
  • L’utilisateur est plutôt susceptible d'utiliser le clavier.

Et utilisez un curseur si :

  • Les utilisateurs doivent bénéficier d'un retour d'information instantané.

Recommandations

  • Dimensionnez le contrôle de sorte que les utilisateurs puissent définir facilement la valeur souhaitée. Dans le cas des valeurs discrètes, veillez à ce que l’utilisateur puisse facilement sélectionner n’importe quelle valeur avec la souris. Assurez-vous que les points de terminaison du curseur ne dépassent pas les limites d’une vue.
  • Donnez un retour d'information immédiat pendant ou après qu’un utilisateur effectue une sélection (quand c’est possible). Par exemple, des bips de contrôle de volume Windows qui indiquent le volume sonore sélectionné.
  • Utilisez des étiquettes pour afficher la plage de valeurs. Exception : si le curseur est orienté à la verticale et que le texte de l’étiquette supérieure est Max, Haut, Plus ou un équivalent, vous n’êtes pas obligé d’ajouter les autres étiquettes, car la signification est évidente.
  • Lorsque vous désactivez un curseur, désactivez toutes les étiquettes et tous les retours visuels qui lui sont associés.
  • Prenez en compte la direction du texte lorsque vous définissez le sens de glissement et/ou l’orientation de votre curseur. Le texte se lit de gauche à droite dans certaines langues, mais de droite à gauche dans d’autres.
  • Un curseur n'est pas un indicateur de progression, ne l'utilisez pas à cet effet.
  • Ne modifiez pas la taille par défaut du bouton.
  • Ne créez pas de curseur continu si la plage de valeurs est étendue et que les utilisateurs vont probablement sélectionner une des valeurs représentatives de la plage. Dans ce cas, utilisez plutôt ces valeurs comme seuls incréments autorisés. Par exemple, si une valeur temporelle peut aller jusqu’à 1 mois, mais que les utilisateurs doivent simplement choisir entre 1 minute, 1 heure, 1 jour ou 1 mois, créez un curseur à seulement 4 incréments.

Indications d’utilisation supplémentaires

Choix de la bonne disposition : horizontale ou verticale

Vous pouvez orienter votre curseur horizontalement ou verticalement. Utilisez les instructions suivantes pour déterminer la disposition à utiliser.

  • 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.
  • Si le contrôle est utilisé pour effectuer une recherche dans un média, comme dans une application vidéo, utilisez plutôt une orientation horizontale.
  • Lorsque vous utilisez un curseur dans une page où il est possible d'effectuer un mouvement panoramique dans une certaine direction (horizontale ou verticale), pour le curseur, utilisez une orientation différente de celle du panoramique. Dans le cas contraire, les utilisateurs pourraient faire glisser le curseur et modifier sa valeur accidentellement lorsqu’ils essaient de se déplacer à l'intérieur de la page.
  • Si vous hésitez toujours sur l’orientation à adopter, utilisez celle qui convient le mieux à votre mise en page.

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 à sa valeur maximale.

  • Pour un curseur vertical, situez la valeur maximale en haut du curseur, quel que soit le sens de lecture. Par exemple, pour un curseur de volume, placez toujours la valeur 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.
  • Dans le cas d'une orientation horizontale, placez la valeur minimale du côté gauche du curseur lorsque la page est disposée de gauche à droite, et à droite lorsque la page est disposée de droite à gauche.
  • La seule exception à la recommandation précédente concerne les barres de recherche dans les médias : placez toujours la valeur minimale sur le côté gauche du curseur.

Incréments et graduations

  • Utilisez des incréments si vous ne souhaitez pas que le curseur se positionne sur des valeurs arbitraires entre le minimum et le maximum. Par exemple, si vous utilisez un curseur pour préciser un nombre de places de cinéma à acheter, n’autorisez pas les valeurs décimales. Définissez une valeur d’incrément de 1.
  • Si vous spécifiez des incréments (également appelés points d’accrochage), assurez-vous que la position finale s’aligne sur la valeur maximale du curseur.
  • Utilisez des graduations lorsque vous souhaitez montrer aux utilisateurs la position de valeurs importantes ou significatives. Par exemple, un curseur qui contrôle un zoom peut avoir des 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 une étiquette avec la valeur pour que les utilisateurs puissent connaître la valeur exacte du paramètre qu’ils choisissent sans avoir à interagir avec le contrôle. Dans le cas contraire, ils peuvent utiliser l’info-bulle pour visualiser la valeur exacte.
  • Lorsque les incréments ne sont pas évidents, affichez toujours les graduations. Par exemple, si le curseur fait 200 pixels de large et est défini par 200 incréments, vous pouvez masquer les graduations, car les utilisateurs ne seront pas en mesure de sentir les points d'accrochage. En revanche, s'il n’y a que 10 points d’ancrage, vous pouvez afficher les graduations.

Étiquettes

  • Étiquettes de curseur

    Une étiquette de curseur indique à quoi sert le curseur.

    • L'étiquette ne doit pas avoir de ponctuation finale (cette convention est applicable à toutes les étiquettes de contrôle).
    • Positionnez les étiquettes au-dessus du curseur lorsque celui-ci fait partie d'un formulaire où la plupart des étiquettes sont placées au-dessus des contrôles correspondants.
    • Positionnez les étiquettes sur les côtés lorsque le curseur fait partie d'un formulaire où la plupart des étiquettes sont placées à côté des contrôles correspondants.
    • Évitez de placer les étiquettes sous le curseur, car le doigt de l’utilisateur pourrait les masquer en faisant glisser le curseur.

  • Étiquettes de plage

    Les étiquettes de plage, ou de remplissage, décrivent la valeur minimale et la valeur maximale du curseur.

    • Étiquetez les deux extrémités de la plage du curseur, sauf dans le cas d'une orientation verticale rendant cela superflu.
    • Si possible, n'utilisez qu'un seul mot pour chaque étiquette.
    • N’utilisez pas de ponctuation finale.
    • Assurez-vous que les étiquettes sont descriptives et parallèles. Exemples : Maximum/Minimum, Plus/Moins, Bas/Haut, Faible/Fort.

  • Étiquettes de valeur

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

    • Si vous avez besoin d’une étiquette de valeur, placez-la sous le curseur.
    • Centrez le texte par rapport au contrôle et précisez les unités (pixels, par exemple).
    • É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. Par exemple, un curseur servant à ajuster la taille d'un texte peut afficher sur le côté un échantillon à la taille correspondante.

Apparence et interaction

Un curseur est composé d’une piste et d’un bouton. La piste est une barre (qui peut éventuellement afficher différents styles de graduations) représentant la plage de valeurs susceptibles d'être saisies. Le bouton est un sélecteur que l’utilisateur peut positionner en tapant sur la piste ou en le faisant glisser d'avant en arrière.

La cible tactile d'un curseur est large. Pour maintenir son accessibilité tactile, il doit être positionné assez loin du bord de l'écran.

Au moment de concevoir 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. Utilisez une étiquette de valeur si un utilisateur a besoin de connaître les unités pour comprendre le paramètre. Trouvez des moyens créatifs de représenter ces valeurs sous forme graphique. Un curseur qui contrôle le volume, par exemple, peut afficher un graphique de haut-parleur sans ondes sonores à l'extrémité minimale du curseur et un graphique de haut-parleur avec des ondes sonores à l'extrémité maximale.

Exemples

Curseur gradué de 10 en 10, de 0 à 100.

Curseur avec des graduations

UWP et WinUI 2

Important

Les informations et les exemples de cet article sont optimisés pour les applications qui utilisent le SDK d'application Windows et WinUI 3, mais qui s’appliquent généralement aux applications UWP qui utilisent WinUI 2. Consultez la référence API de la plateforme Windows universelle pour obtenir des informations et des exemples spécifiques à la plateforme.

Cette section contient les informations dont vous avez besoin pour utiliser le contrôle dans une application de la plateforme Windows universelle ou de WinUI 2.

Les API de ce contrôle existent dans l’espace de noms Windows.UI.Xaml.Controls.

Nous vous recommandons d’utiliser la dernière version de WinUI 2 pour obtenir les styles et fonctionnalités les plus récents pour tous les contrôles. WinUI version 2.2 ou ultérieure inclut pour ce contrôle un nouveau modèle qui utilise des angles arrondis. Pour plus d’informations, consultez Rayons des angles.

Créer un curseur

Ouvrez l’application WinUI 3 Gallery et voyez le curseur en action.

L’application WinUI 3 Gallery comprend des exemples interactifs de la plupart des contrôles et des fonctionnalités WinUI 3. Procurez-vous l’application sur le Microsoft Store ou le code source sur GitHub.

Voici comment créer un curseur en XAML.

<Slider x:Name="volumeSlider" Header="Volume" Width="200"
        ValueChanged="Slider_ValueChanged"/>

Voici comment créer un curseur en code.

Slider volumeSlider = new Slider();
volumeSlider.Header = "Volume";
volumeSlider.Width = 200;
volumeSlider.ValueChanged += Slider_ValueChanged;

// Add the slider to a parent container in the visual tree.
stackPanel1.Children.Add(volumeSlider);

Vous obtenez et définissez la valeur du curseur à partir de la propriété Value. Pour répondre aux modifications de valeur, vous pouvez utiliser la liaison de données pour établir une liaison à la propriété Value ou traiter l’événement ValueChanged.

private void Slider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
{
    Slider slider = sender as Slider;
    if (slider != null)
    {
        media.Volume = slider.Value;
    }
}

Obtenir l’exemple de code