Listes déroulantes & zones de liste déroulante
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 recommandations enmatière de conception.
Avec une liste déroulante ou une zone de liste déroulante, les utilisateurs font un choix parmi une liste de valeurs s’excluant mutuellement. Les utilisateurs peuvent choisir une seule et unique 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.

Zone de liste déroulante classique.
Les termes suivants sont importants à connaître lors de la lecture de 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 de liste déroulante.
- 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 textemodifiable, 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 instructions relatives à la disposition 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 s’excluant mutuellement ? Si ce n’est pas le cas, utilisez un autre contrôle. Pour choisir plusieurs options, utilisez une liste à sélection multiple standard, une liste de cases à cocher, un générateur de listes ou une liste ajouter/supprimer à la place.
- Les options sont-elles disponibles ? Dans ce cas, utilisez un bouton de menu ou un bouton partagé à la place. Utilisez les listes déroulantes et les 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 cas ? L’option sélectionnée est-elle beaucoup plus importante que l’affichage des 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 des cases d’option, une liste à sélection unique ou une zone de liste modifiable, ce qui donne plus d’importance aux choix alternatifs.

Dans cet exemple, la qualité de couleur la plus élevée est le meilleur choix pour la plupart des utilisateurs. par conséquent, une liste déroulante est un bon choix pour minimiser les alternatives.
Voulez-vous attirer l’attention sur l’option ? Dans ce cas, envisagez des cases d’option, une liste à sélection unique ou une zone de liste modifiable, qui tend à attirer davantage l’attention en tirant de l’espace à l’écran. Étant donné que les listes déroulantes sont compactes, elles sont de bons choix pour les options que vous souhaitez souligner.
L’espace à l’écran est-il d’un niveau Premium ? Dans ce cas, utilisez une liste déroulante, car l’espace à l’écran utilisé est fixe et indépendant du nombre de choix.
Existe-t-il d’autres listes déroulantes dans la fenêtre ? Dans ce cas, envisagez d’utiliser une liste déroulante pour la cohérence.
Listes déroulantes modifiables
Outre les principes fournis uniquement pour les listes déroulantes, les éléments suivants s’appliquent également :
Les choix possibles sont-ils limités ? Dans ce cas, utilisez plutôt une liste déroulante normale. Les zones de liste modifiable sont destinées à une entrée sans contrainte, dans laquelle les utilisateurs peuvent avoir besoin d’entrer une valeur qui ne se trouve 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 plutôt une zone de texte.
La liste déroulante est-elle utilisée pour répertorier les entrées d’utilisateur précédentes ? À moins que les utilisateurs aient besoin d’examiner la liste complète des entrées précédentes, utilisez plutôt une zone de texte avec l’option de saisie semi-automatique.

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.

Dans cet exemple, une zone de texte avec saisie semi-automatique est un bon choix.
Les utilisateurs auront-ils besoin d’aide pour sélectionner des valeurs valides ? Dans ce cas, utilisez une zone de texte avec un bouton Parcourir à la place.

Dans cet exemple, les utilisateurs peuvent cliquer sur « to » pour les aider à sélectionner des valeurs valides.
Est-il important d’encourager les utilisateurs à passer en revue les choix alternatifs ou d’inviter des modifications ? Dans ce cas, envisagez d’utiliser une zone de liste modifiable à la place. Avec une liste déroulante modifiable, les utilisateurs n’ont pas connaissance des alternatives tant que la liste n’est pas supprimée.
Les utilisateurs doivent-ils localiser rapidement un élément dans une grande liste ? (Win32 uniquement) Dans ce 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 uniquement en fonction du dernier caractère tapé (par conséquent, la saisie de « juin » dans une liste de mois correspond à 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 ? Dans ce cas, utilisez une liste de sélection unique ou une liste déroulante normale à la place. Les zones de liste modifiable sont destinées à une entrée sans contrainte, 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 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 plutôt une zone de texte.
- Est-il important d’encourager les utilisateurs à passer en revue les choix alternatifs ou d’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 souligner.
- L’espace à l’écran est-il d’un niveau Premium ? Dans ce cas, utilisez une liste déroulante modifiable, car l’espace à l’écran utilisé est fixe et indépendant du nombre de choix.
Pour les listes déroulantes, le nombre d’éléments dans la liste n’est pas un facteur de choix du contrôle , car ils sont mis à l’échelle de milliers d’éléments jusqu’à un. Les listes déroulantes modifiables sont mises à l’échelle de milliers d’éléments jusqu’à 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 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 liste déroulante standard, avec un ensemble fixe de valeurs prédéterminées. |
Une fois fermé, seul l’élément sélectionné est visible. Quand les utilisateurs cliquent sur le bouton de liste déroulante, toutes les options deviennent visibles. Pour modifier la valeur, les utilisateurs peuvent ouvrir la liste et cliquer sur une autre valeur.![]() Dans cet exemple, la liste est dans son état normal. ![]() Dans cet exemple, la liste a été déroulée. |
| Liste déroulante d’aperçu une liste déroulante qui affiche un Aperçu des résultats de la sélection pour aider les utilisateurs à choisir. |
![]() 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. |
![]() ![]() Exemples d’une liste déroulante modifiable dans les modes modifier et déroulant. 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 possibles. |
| Zones de liste modifiables zone de liste modifiable standard, qui permet aux utilisateurs d’entrer une valeur qui ne figure pas dans la liste toujours visible. |
![]() 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 choix alternatifs ou d’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écuter des commandes.
- Affichez d’autres fenêtres, telles qu’une boîte de dialogue pour recueillir davantage d’entrées.
- Afficher dynamiquement d’autres contrôles en rapport avec le contrôle sélectionné (leslecteurs 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 les options très liées, en plaçant d’abord les options les plus courantes ou en utilisant l’ordre alphabétique. Triez les noms dans l’ordre alphabétique, les nombres dans l’ordre numérique et les dates dans l’ordre chronologique. Les listes avec 12 éléments ou plus doivent être triées par ordre alphabétique pour faciliter la recherche d’éléments.
Correct :

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

Dans cet exemple, un grand nombre d’éléments de liste doivent être triés par ordre alphabétique.
Correct :

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 tout ou aucune 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.

Dans cet exemple, « (None) » est une méta-option, car il ne s’agit pas d’une valeur valide pour le choix. elle décrit plutôt 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.
Listes déroulantes
Quand une liste déroulante unique est utilisée pour modifier l’affichage d’un contrôle associé, Modifiez la vue immédiatement sur la sélection au lieu de demander un bouton de commande distinct. Utilisez un bouton de commande distinct uniquement si la liste prend beaucoup de temps à restituer. 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 options méta à la place. Les utilisateurs ne savent pas comment interpréter les éléments vides, alors que la signification des méta-options est explicite.
Correct :

Incorrect :

Dans l’exemple incorrect, la signification de l’option Blank n’est pas claire.
Listes déroulantes d’aperçu
Utilisez des aperçus dans les éléments de liste lorsqu’il est préférable de les afficher avec des images plutôt que de les décrire à l’aide de texte seul.

Dans cet exemple, la version préliminaire explique les options bien meilleures que le texte seul.
N’utilisez pas d’icônes inutiles et inutilisables dans les aperçus.
Incorrect :

Dans cet exemple, les icônes d’aperçu ne sont pas nécessaires, car elles ne communiquent aucune information.
Zones de liste modifiable
Lorsque vous le pouvez, limitez la longueur du texte d’entrée. Par exemple, si l’entrée valide est un nombre compris entre 0 et 999, utilisez une zone de liste déroulante 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 modifiable n’ont pas besoin de répertorier tous les choix, mais uniquement les choix probables ou un échantillon représentatif.

Dans cet exemple, un grand nombre de choix valides ne sont pas listés, par exemple, 15, ou des polices de demi-taille telles que 9,5.
Valeurs par défaut
- Sélectionnez le niveau de sécurité le plus sûr (pour éviter la perte de données ou l’accès au système) et l’option la plus sécurisée par défaut. Si la sécurité et la sécurité ne sont pas des facteurs, sélectionnez l’option la plus probable ou la plus pratique.
- Exception : Affichez une valeur par défaut vide si le contrôle représente une propriété dans un État mixte, 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 brève instruction placée à l’intérieur d’une liste déroulante modifiable en tant que valeur par défaut. Contrairement au texte statique, les invites disparaissent de l’écran une fois que les utilisateurs ont tapé un texte dans la zone de liste déroulante ou qu’il obtient le focus d’entrée.

Invite classique.
Utilisez une invite dans les cas suivants :
- L’espace à l’écran est d’une qualité telle que l’utilisation d’une étiquette ou d’une instruction n’est pas souhaitable, par exemple dans une barre d’outils.
- L’invite est principalement destinée à identifier l’objectif de la liste de manière compacte. Il ne doit pas s’agir d’informations essentielles que les utilisateurs doivent voir lors de l’utilisation de la zone de liste modifiable.
N’utilisez pas les invites uniquement pour demander aux utilisateurs de sélectionner un nom dans la liste ou de cliquer sur les boutons. Par exemple, les invites comme sélectionner une option ou entrer un nom de fichier, puis cliquer sur Envoyer ne sont pas nécessaires.
Quand vous utilisez des invites :
- Dessinez le texte de l’invite en italique gris et en texte réel en noir normal. Le texte de l’invite ne doit pas être confondu avec du texte réel.
- Conservez le texte de l’invite concis. Vous pouvez utiliser des fragments au lieu de phrases entières.
- Utilisez la mise en majuscules de style phrase.
- N’utilisez pas de ponctuation de fin ni de points de suspension.
- Le texte de l’invite ne doit pas être modifiable et doit disparaître une fois que les utilisateurs ont cliqué dans ou sur l’onglet 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 disparaît uniquement une fois que l’utilisateur a commencé à taper.
- Le texte d’invite est restauré si la zone de texte est toujours vide lorsqu’il perd le focus d’entrée.
Incorrect : 
Dans cet exemple, l’espace à l’écran n’est pas à un niveau Premium. une fois qu’une liste déroulante modifiable est remplie, il est difficile pour les utilisateurs de se souvenir de leur rôle. et le texte d’invite est modifiable et dessiné de la même façon que le texte réel.
Dimensionnement et espacement recommandés

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 peuvent pas faire l’objet d’un défilement horizontalement, de sorte que les utilisateurs ne voient que ce qui est visible dans le contrôle. (Notez, toutefois, que la fonctionnalité de défilement automatique peut être activée pour les zones de liste déroulante.)
- Incluez 30 pour cent supplémentaires (jusqu’à 200 pour cent pour du texte plus petit) 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 la forme d’un mot ou d’une expression, et non pas en tant que phrase, et terminez-la par un signe deux-points. Exceptions :
- Listes déroulantes modifiables avec des invites à l’emplacement où l’espace est à un niveau Premium.
- Si une liste déroulante ou une zone de liste déroulante est subordonnée à une case d’option ou à une case à cocher et qu’elle est introduite par son étiquette se terminant 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 mise en majuscules de style phrase.
Placez l’étiquette à gauche ou au-dessus du contrôle, puis alignez l’étiquette sur le bord gauche du contrôle. Si l’étiquette est située à gauche, aligne verticalement le texte de l’étiquette avec le texte du contrôle.
Correct :

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

Dans cet exemple, l’étiquette est alignée de manière incorrecte avec le texte du contrôle.
Vous pouvez spécifier des unités (secondes, connexions, etc.) entre parenthèses après l’étiquette.
Ne définissez pas le contenu de la zone de liste déroulante ou de la zone de liste déroulante (ou son étiquette d’unités) dans 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 pas en tant que phrase, et n’utilisez pas de ponctuation finale.
- Utilisez une formulation parallèle et essayez de conserver la même longueur pour toutes les options.
Texte d’instructions
Si vous devez ajouter du texte d’instructions sur une liste déroulante ou une zone de liste déroulante, ajoutez-la au-dessus de l’étiquette. Utilisez des phrases complètes avec la ponctuation finale.
Utilisez la mise en majuscules de style phrase.
Les informations supplémentaires qui sont utiles, mais pas 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.

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 majuscules, mais n’incluez pas le trait de soulignement ou le signe deux-points ; incluez une liste ou une zone, selon la valeur la plus claire.
- Pour les options de liste, utilisez le texte exact de l’option, y compris sa mise en majuscules.
- Pour la programmation et d’autres documents techniques, reportez-vous aux listes déroulantes sous forme de listes déroulantes. Partout ailleurs, utilisez la liste ou la zone, selon la valeur la plus claire.
- Pour décrire l’interaction de l’utilisateur, utilisez le clic.
- Dans la mesure du possible, mettez en forme les options d’étiquette et de liste en 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 grandes polices.
Lorsque vous faites référence à des zones de liste déroulante :
- Utilisez le texte exact de l’étiquette, y compris sa mise en majuscules, mais n’incluez pas le trait de soulignement ou le signe deux-points ; incluez le mot zone.
- Pour les options de liste, utilisez le texte exact de l’option, y compris sa mise en majuscules.
- Pour la programmation et d’autres documents techniques, reportez-vous aux zones de liste modifiable. Partout ailleurs, utilisez Box.
- Pour décrire l’interaction de l’utilisateur, utilisez Enter.
- Dans la mesure du possible, mettez en forme les options d’étiquette et de liste en 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.




