Listes déroulantes Windows 7 Zones & de liste déroulante

  • Article

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 une liste déroulante ou une zone de liste déroulante, les utilisateurs font un choix parmi une liste de valeurs mutuellement exclusives. Les utilisateurs peuvent choisir une seule option. Avec une liste déroulante standard, les utilisateurs sont limités aux choix de la liste, mais avec une zone de liste modifiable, ils peuvent entrer un choix qui ne figure pas dans la liste.

capture d’écran de la zone de liste déroulante heure du rappel

Zone de liste modifiable classique.

Les termes suivants sont importants à comprendre lorsque vous lisez cet article :

  • Une zone de liste standard est une zone contenant une liste de plusieurs éléments, avec plusieurs éléments visibles.
  • Une liste déroulante est une liste dans laquelle l’élément sélectionné est toujours visible et les autres sont visibles à la demande en cliquant sur un bouton déroulant.
  • Une zone de liste modifiable est une combinaison d’une zone de liste standard ou d’une liste déroulante et d’une zone de texte modifiable, ce qui permet aux utilisateurs d’entrer une valeur qui ne figure pas dans la liste.
    • Une liste déroulante modifiable est une combinaison d’une liste déroulante et d’une zone de texte modifiable.
    • Une zone de liste modifiable est une combinaison d’une zone de liste standard et d’une zone de texte modifiable.

Notes

Les recommandations relatives à la mise en page sont présentées dans un article distinct.

Est-ce le contrôle approprié ?

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

  • Le contrôle est-il utilisé pour choisir une option dans une liste de valeurs mutuellement exclusives ? Si ce n’est pas le cas, utilisez un autre contrôle. Pour choisir plusieurs options, utilisez une liste de sélection multiple standard, case activée liste de zone, générateur de liste ou ajouter/supprimer une liste à la place.
  • Les commandes d’options sont-elles ? Si c’est le cas, utilisez plutôt un bouton de menu ou un bouton fractionné. Utilisez des listes déroulantes et des zones de liste déroulante pour les objets (noms) ou les attributs (adjectifs), mais pas pour les commandes (verbes).
  • La liste présente-t-elle des données plutôt que des options de programme ? Dans les deux cas, une liste déroulante ou une zone de liste déroulante est un choix approprié. En revanche, les cases d’option ne conviennent qu’à un petit nombre d’options de programme.

Listes déroulantes

  • Existe-t-il une option par défaut recommandée pour la plupart des utilisateurs dans la plupart des situations ? L’affichage de l’option sélectionnée est-il beaucoup plus important que de voir les alternatives ? Envisagez d’utiliser une liste déroulante si vous ne souhaitez pas encourager les utilisateurs à apporter des modifications en masquant les alternatives. Si ce n’est pas le cas, envisagez les cases d’option, une liste à sélection unique ou une zone de liste modifiable, qui mettent davantage l’accent sur les autres choix.

    capture d’écran de la plus haute qualité en tant que bouton par défaut

    Dans cet exemple, la qualité de couleur la plus élevée étant le meilleur choix pour la plupart des utilisateurs, une liste déroulante est un bon choix pour minimiser les alternatives.

  • Voulez-vous attirer l’attention sur l’option ? Si c’est le cas, envisagez les cases d’option, une liste à sélection unique ou une zone de liste modifiable, qui ont tendance à attirer davantage l’attention en prenant plus d’espace sur l’écran. Étant donné que les listes déroulantes sont compactes, elles sont de bons choix pour les options que vous souhaitez sous-mettre en avant.

  • L’espace d’écran est-il premium ? Si c’est le cas, utilisez une liste déroulante, car l’espace d’écran utilisé est fixe et indépendant du nombre de choix.

  • Existe-t-il d’autres listes déroulantes dans la fenêtre ? Si c’est le cas, envisagez d’utiliser une liste déroulante pour la cohérence.

Listes déroulantes modifiables

Outre les principes qui viennent d’être fournis pour les listes déroulantes, les éléments suivants s’appliquent également :

  • Les choix possibles sont-ils limités ? Si c’est le cas, utilisez plutôt une liste déroulante normale. Les zones de liste déroulante sont destinées à une entrée non contrainte, dans laquelle les utilisateurs peuvent avoir besoin d’entrer une valeur qui n’est pas actuellement dans la liste. Étant donné que l’entrée n’est pas contrainte, si les utilisateurs entrent du texte qui n’est pas valide, vous devez gérer l’erreur avec un message d’erreur.

  • Pouvez-vous énumérer les choix les plus probables à l’avance ? Si ce n’est pas le cas, utilisez une zone de texte à la place.

  • La liste déroulante est-elle utilisée pour répertorier les entrées utilisateur précédentes ? À moins que les utilisateurs n’ont besoin de passer en revue la liste complète des entrées précédentes, utilisez plutôt une zone de texte avec l’option de saisie semi-automatique.

    capture d’écran de la boîte de dialogue Exécuter avec liste déroulante

    Dans cet exemple, les utilisateurs peuvent avoir besoin de passer en revue leur entrée précédente. Une liste déroulante modifiable est donc un bon choix.

    capture d’écran d’Outlook en ligne et saisie automatique

    Dans cet exemple, une zone de texte avec saisie automatique est un bon choix.

  • Les utilisateurs auront-ils besoin d’aide pour sélectionner des valeurs valides ? Si c’est le cas, utilisez plutôt une zone de texte avec un bouton Parcourir .

    capture d’écran d’Outlook pour ligner et parcourir le bouton

    Dans cet exemple, les utilisateurs peuvent cliquer sur « À » pour les aider à sélectionner des valeurs valides.

  • Est-il important d’encourager les utilisateurs à passer en revue les autres choix ou à inviter des modifications ? Si c’est le cas, envisagez plutôt d’utiliser une zone de liste modifiable. Avec une liste déroulante modifiable, les utilisateurs ne seront pas au courant des alternatives tant que la liste n’aura pas été supprimée.

  • Les utilisateurs doivent-ils localiser rapidement un élément dans une grande liste ? (Win32 uniquement) Si c’est le cas, utilisez une zone de liste déroulante, car les utilisateurs peuvent sélectionner un élément en tapant son nom complet. En revanche, la liste déroulante Win32 sélectionne les éléments en fonction uniquement du dernier caractère tapé (par conséquent, taper « Jun » dans une liste de mois correspondrait à novembre, et non juin). Dans ce cas, utilisez une zone de liste modifiable même si les choix possibles sont limités.

Zones de liste modifiables

  • Les choix possibles sont-ils limités ? Si c’est le cas, utilisez plutôt une liste à sélection unique ou une liste déroulante normale. Les zones de liste déroulante sont destinées aux entrées non contraintes, où les utilisateurs peuvent avoir besoin d’entrer une valeur qui n’est pas actuellement dans la liste. Étant donné que l’entrée n’est pas contrainte, si les utilisateurs entrent du texte non valide, vous devez gérer l’erreur avec un message d’erreur.
  • Pouvez-vous énumérer les choix les plus probables à l’avance ? Si ce n’est pas le cas, utilisez une zone de texte à la place.
  • Est-il important d’encourager les utilisateurs à passer en revue les autres choix ou à inviter des modifications ? Si ce n’est pas le cas, envisagez plutôt une liste déroulante modifiable.
  • Voulez-vous attirer l’attention sur l’option ? Si ce n’est pas le cas, envisagez plutôt une liste déroulante modifiable. Étant donné que les listes déroulantes sont compactes, elles sont de bons choix pour les options que vous souhaitez sous-mettre en avant.
  • L’espace d’écran est-il premium ? Si c’est le cas, utilisez une liste déroulante modifiable, car l’espace d’écran utilisé est fixe et indépendant du nombre de choix.

Pour les listes déroulantes, le nombre d’éléments de la liste n’est pas un facteur dans le choix du contrôle , car ils sont mis à l’échelle de milliers d’éléments jusqu’à un seul élément. Les listes déroulantes modifiables passent de milliers d’éléments à aucun, car les utilisateurs peuvent entrer une valeur qui ne figure pas dans la liste. Étant donné que les listes déroulantes peuvent être utilisées pour les données, le nombre d’éléments peut ne pas être connu à l’avance et peut-être ne peut pas être garanti. Incluez toujours au moins trois éléments dans les zones de liste modifiables pour justifier l’espace d’écran supplémentaire.

Modèles d’usage

Les listes déroulantes et les zones de liste déroulante ont plusieurs modèles d’utilisation :

Usage Exemple
Liste déroulante une liste déroulante standard, avec un ensemble fixe de valeurs prédéterminées.
Lorsqu’il est fermé, seul l’élément sélectionné est visible. Lorsque les utilisateurs cliquent sur le bouton déroulant, toutes les options deviennent visibles. Pour modifier la valeur, les utilisateurs peuvent ouvrir la liste et cliquer sur une autre valeur.
capture d’écran de la liste déroulante, options masquées
Dans cet exemple, la liste est dans son état normal.
capture d’écran de la liste déroulante, options affichées
Dans cet exemple, la liste a été supprimée.
Liste déroulante d’aperçu Liste déroulante qui affiche un aperçu des résultats de la sélection pour aider les utilisateurs à choisir.
 capture d’écran des options de couleur et de texte
Dans ces exemples, les listes déroulantes affichent un aperçu des résultats de la sélection.
Liste déroulante modifiable Une zone de liste déroulante qui permet aux utilisateurs d’entrer une valeur qui ne figure pas dans la liste déroulante.
 aa511458.dropdownlists27(en-us,msdn.10).pngcapture d’écran de la zone de liste modifiable de taille de police
Exemples de liste déroulante modifiable en mode édition et en mode supprimé.
Utilisez ce contrôle lorsque vous souhaitez donner la flexibilité d’une zone de texte, mais que vous souhaitez aider les utilisateurs en fournissant une liste pratique des choix probables.
Les zones de liste modifiables sont une zone de liste modifiable, qui permet aux utilisateurs d’entrer une valeur qui ne figure pas dans la liste toujours visible.
capture d’écran de la liste déroulante des options de police
Dans ces exemples, les zones de liste modifiables sont toujours affichées.
Ce contrôle est un meilleur choix que la liste déroulante modifiable lorsqu’il est important d’encourager les utilisateurs à passer en revue les autres choix ou à inviter des modifications.

Consignes

Général

  • N’utilisez pas la modification d’une liste déroulante ou d’une zone de liste déroulante pour :
    • Exécutez des commandes.
    • Affichez d’autres fenêtres, telles qu’une boîte de dialogue pour collecter davantage d’entrées.
    • Affichez dynamiquement d’autres contrôles liés au contrôle sélectionné (les lecteurs d’écran ne peuvent pas détecter de tels événements).

Présentation

  • Triez les éléments de liste dans un ordre logique, par exemple en regroupant des options hautement liées, en plaçant les options les plus courantes en premier ou en utilisant l’ordre alphabétique. Triez les noms par ordre alphabétique, les nombres dans l’ordre numérique et les dates dans l’ordre chronologique. Les listes contenant 12 éléments ou plus doivent être triées par ordre alphabétique pour faciliter la recherche des éléments.

    Correction :capture d’écran de la liste déroulante logique

    Dans cet exemple, les éléments de liste sont triés en fonction de leur relation spatiale.

    Incorrect:capture d’écran de la liste déroulante désorganisée

    Dans cet exemple, il y a tellement d’éléments de liste qu’ils doivent être triés par ordre alphabétique.

    Correct :capture d’écran de la liste déroulante alphabétique

    Dans cet exemple, les éléments de liste sont triés par ordre alphabétique, à l’exception de l’option qui représente tous les éléments.

  • Placez les options qui représentent Tous ou Aucun au début de la liste, quel que soit l’ordre de tri des éléments restants.

  • Placez les méta-options entre parenthèses.

    Capture d’écran montrant une liste déroulante avec « (Aucun) » sélectionné.

    Dans cet exemple, « (None) » est une méta-option, car il ne s’agit pas d’une valeur valide pour le choix, mais indique que l’option elle-même n’est pas utilisée.

  • Lors de la désactivation d’une liste déroulante ou d’une zone de liste déroulante, désactivez également les étiquettes et les boutons de commande associés.

  • Lorsqu’une liste déroulante unique est utilisée pour modifier l’affichage d’un contrôle associé, modifiez la vue immédiatement lors de la sélection au lieu d’exiger un bouton de commande distinct. Utilisez un bouton de commande distinct uniquement si le rendu de la liste prend beaucoup de temps. Toutefois, les en-têtes de liste et les boutons de menu sont les contrôles préférés à cet effet.

  • Les éléments de liste vides n’utilisent pas les méta-options à la place. Les utilisateurs ne savent pas comment interpréter les éléments vides, alors que la signification des méta-options est explicite.

    Correction :capture d’écran de la liste déroulante sans aucun sélectionné

    Incorrect :capture d’écran de la liste déroulante avec vide sélectionné

    Dans l’exemple incorrect, la signification de l’option vide n’est pas claire.

Listes déroulantes en préversion

  • Utilisez des aperçus dans les éléments de liste lorsqu’il est préférable d’afficher avec des images plutôt que de décrire à l’aide du texte seul.

    capture d’écran de la liste déroulante des polices aperçues

    Dans cet exemple, l’aperçu explique les options bien mieux que le texte seul.

  • N’utilisez pas d’icônes inutiles et inutiles dans les préversions.

    Incorrect :capture d’écran de la liste déroulante des étiquettes avec des icônes

    Dans cet exemple, les icônes d’aperçu sont inutiles, car elles ne communiquent aucune information.

Zones de liste déroulante

  • Limitez la longueur du texte d’entrée lorsque vous le pouvez. Par exemple, si l’entrée valide est un nombre compris entre 0 et 999, utilisez une zone de liste modifiable limitée à trois caractères.

  • S’il existe de nombreuses options possibles, concentrez le contenu de la liste sur les options les plus probables. Étant donné que les utilisateurs peuvent entrer des valeurs qui ne figurent pas dans la liste, les zones de liste déroulante n’ont pas besoin de répertorier tous les choix, uniquement les choix probables ou un exemple représentatif.

    capture d’écran de la liste déroulante des tailles de police

    Dans cet exemple, de nombreux choix valides ne sont pas répertoriés, tels que 15, ou des polices de demi-taille telles que 9.5.

Valeurs par défaut

  • Sélectionnez l’option la plus sûre (pour éviter la perte de données ou d’accès au système) et la plus sécurisée par défaut. Si la sûreté et la sécurité ne sont pas des facteurs, sélectionnez l’option la plus probable ou la plus pratique.
    • Exception: Affiche une valeur par défaut vide si le contrôle représente une propriété dans un état mixte, ce qui se produit lors de l’affichage d’une propriété pour plusieurs objets qui n’ont pas le même paramètre.

Invites

Une invite est une étiquette ou une instruction courte placée à l’intérieur d’une liste déroulante modifiable comme valeur par défaut. Contrairement au texte statique, les invites disparaissent de l’écran une fois que les utilisateurs tapent quelque chose dans la zone de liste déroulante ou qu’il obtient le focus d’entrée.

capture d’écran d’une zone de recherche

Invite classique.

Utilisez une invite dans les cas suivants :

  • L’espace d’écran est tellement premium que l’utilisation d’une étiquette ou d’une instruction n’est pas souhaitable, par exemple dans une barre d’outils.
  • L’invite sert principalement à identifier l’objectif de la liste de manière compacte. Il ne doit pas s’agir d’informations cruciales que les utilisateurs doivent voir lors de l’utilisation de la zone de liste déroulante.

N’utilisez pas d’invites simplement pour demander aux utilisateurs de sélectionner un élément dans la liste ou de cliquer sur des boutons. Par exemple, les invites comme Sélectionner une option ou Entrer un nom de fichier, puis cliquez sur Envoyer sont inutiles.

Lors de l’utilisation des invites :

  • Dessinez le texte d’invite en gris italique et le texte réel dans un noir normal. Le texte d’invite ne doit pas être confondu avec du texte réel.
  • Gardez le texte d’invite concis. Vous pouvez utiliser des fragments au lieu de phrases complètes.
  • Utilisez la majuscule de style phrase.
  • N’utilisez pas de ponctuation ou de points de suspension de fin.
  • Le texte d’invite ne doit pas être modifiable et doit disparaître une fois que les utilisateurs cliquent dans ou dans la zone de texte.
    • Exception: L’invite s’affiche si la zone de texte a le focus d’entrée par défaut et ne disparaît qu’une fois que l’utilisateur commence à taper.
  • Le texte d’invite est restauré si la zone de texte est toujours vide lorsqu’elle perd le focus d’entrée.

Incorrect :capture d’écran de six listes déroulantes modifiables

Dans cet exemple, l’espace d’écran n’est pas premium ; une fois qu’une liste déroulante modifiable est remplie, il est difficile pour les utilisateurs de se souvenir de son objet ; et le texte d’invite est modifiable et dessiné de la même façon que le texte réel.

capture d’écran de la liste déroulante et des spécifications

Dimensionnement et espacement recommandés pour les listes déroulantes et les zones de liste déroulante.

  • Choisissez une largeur appropriée pour les données valides les plus longues. Les listes déroulantes ne pouvant pas être défiler horizontalement, les utilisateurs peuvent voir uniquement ce qui est visible dans le contrôle. (Notez toutefois que les zones de liste déroulante peuvent avoir la fonctionnalité de inscription automatique activée.)
  • Incluez 30 % supplémentaires (jusqu’à 200 % pour le texte plus court) pour tout texte (mais pas les nombres) qui sera localisé.
  • Choisissez une longueur de liste qui élimine le défilement vertical inutile. Étant donné que les listes déroulantes sont affichées à la demande, leurs listes doivent afficher jusqu’à 30 éléments. Les zones de liste modifiables (celles qui n’ont pas de bouton déroulant) doivent afficher entre 3 et 12 éléments.

Étiquettes

Étiquettes de contrôle

  • Écrivez l’étiquette sous forme de mot ou d’expression, et non de phrase, et terminez-la par deux-points. Exceptions :

    • Listes déroulantes modifiables avec des invites situées où l’espace est premium.
    • Si une liste déroulante ou une zone de liste déroulante est subordonnée à une case d’option ou à case activée zone et que son étiquette se termine par un signe deux-points, ne placez pas d’étiquette supplémentaire sur le contrôle.

  • Attribuez une clé d’accès unique pour chaque étiquette. Pour obtenir des instructions, consultez Clavier.

  • Utilisez la majuscule de style phrase.

  • Positionnez l’étiquette à gauche ou au-dessus du contrôle, puis alignez l’étiquette sur le bord gauche du contrôle. Si l’étiquette se trouve à gauche, alignez verticalement le texte de l’étiquette sur le texte du contrôle.

    Correction :capture d’écran de l’alignement de l’étiquette de liste déroulante

    Dans cet exemple, l’étiquette est correctement alignée sur le texte du contrôle.

    Incorrect :capture d’écran de la liste déroulante incorrectement alignée

    Dans cet exemple, l’étiquette est incorrectement alignée sur le texte du contrôle.

  • Vous pouvez spécifier des unités (secondes, connexions, etc.) entre parenthèses après l’étiquette.

  • Ne faites pas partie du contenu de la liste déroulante ou de la zone de liste déroulante (ou de son étiquette d’unités) d’une phrase, car cela n’est pas localisable.

Texte de l’option

  • Attribuez un nom unique à chaque option.
  • Utilisez la mise en majuscules de style phrase, sauf si un élément est un nom propre.
  • Écrivez l’étiquette sous la forme d’un mot ou d’une expression, et non sous forme de phrase, et n’utilisez aucune ponctuation de fin.
  • Utilisez une formulation parallèle et essayez de conserver la longueur à peu près la même pour toutes les options.

Texte d’instruction

  • Si vous devez ajouter du texte d’instructions sur une liste déroulante ou une zone de liste déroulante, ajoutez-le au-dessus de l’étiquette. Utilisez des phrases complètes avec une ponctuation de fin.

  • Utilisez la mise en majuscules de style phrase.

  • Les informations supplémentaires utiles, mais non nécessaires, doivent être courtes. Placez ces informations entre parenthèses entre l’étiquette et le signe deux-points, ou sans parenthèses sous le contrôle.

    capture d’écran de la liste déroulante avec des données ajoutées

    Cet exemple montre des informations supplémentaires placées sous le contrôle .

Documentation

Lorsque vous faites référence à des listes déroulantes :

  • Utilisez le texte exact de l’étiquette, y compris sa mise en majuscule, mais n’incluez pas le trait de soulignement ou le signe deux-points de la clé d’accès ; inclure une liste ou une zone, selon ce qui est le plus clair.
  • Pour les options de liste, utilisez le texte d’option exact, y compris sa mise en majuscule.
  • Dans la programmation et d’autres documents techniques, reportez-vous aux listes déroulantes en tant que listes déroulantes. Partout ailleurs, utilisez la liste ou la zone, selon ce qui est le plus clair.
  • Pour décrire l’interaction utilisateur, utilisez click.
  • Lorsque cela est possible, mettez en forme les options d’étiquette et de liste à l’aide de texte gras. Sinon, placez l’étiquette et les options entre guillemets uniquement si nécessaire pour éviter toute confusion.

Exemple : Dans la liste Taille de police, cliquez sur Polices volumineuses.

Lorsque vous faites référence à des zones de liste déroulante :

  • Utilisez le texte exact de l’étiquette, y compris sa mise en majuscule, mais n’incluez pas le trait de soulignement ou le signe deux-points de la clé d’accès ; inclure la zone de mots.
  • Pour les options de liste, utilisez le texte d’option exact, y compris sa mise en majuscule.
  • Dans la programmation et d’autres documentations techniques, reportez-vous aux zones de liste déroulante en tant que zones de liste modifiable. Partout ailleurs, utilisez la boîte.
  • Pour décrire l’interaction utilisateur, utilisez Entrée.
  • Lorsque cela est possible, mettez en forme les options d’étiquette et de liste à l’aide de texte gras. Sinon, placez l’étiquette et les options entre guillemets uniquement si nécessaire pour éviter toute confusion.

Exemple : dans la zone Police , entrez la police que vous souhaitez utiliser.