Zones de liste

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 actuelles en matière de conception.

Avec une zone de liste, les utilisateurs peuvent effectuer une sélection parmi un ensemble de valeurs présentées dans une liste toujours visible. Avec une zone de liste à sélection unique, les utilisateurs sélectionnent un élément dans une liste de valeurs mutuellement exclusives. Avec une zone de liste à sélection multiple, les utilisateurs sélectionnent zéro ou plusieurs éléments dans une liste de valeurs.

Zone de liste à sélection unique classique.

Notes

Les instructions relatives aux affichagesde disposition et de liste sont présentées dans des articles distincts.

Est-ce le contrôle approprié ?

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

• La liste présente-t-elle des données plutôt que des options de programme ? Dans les deux cas, une zone de liste est un choix approprié, quel que soit le nombre d’éléments. En revanche, les cases d’option ou les boîtes de case activée ne conviennent qu’à un petit nombre d’options de programme.
• Les utilisateurs doivent-ils modifier les affichages, regrouper, trier par colonnes ou modifier les largeurs et l’ordre des colonnes ? Si c’est le cas, utilisez plutôt un affichage liste .
• Le contrôle doit-il être une source de glissement ou une cible de déplacement ? Si c’est le cas, utilisez plutôt un affichage liste.
• Les éléments de liste doivent-ils être copiés ou collés à partir du Presse-papiers ? Si c’est le cas, utilisez plutôt un affichage liste.

Listes à sélection unique

• 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 plutôt une liste à sélection multiple standard, une liste de case activée zone, un générateur de liste ou une liste d’ajout/suppression.
• Existe-t-il une option par défaut recommandée pour la plupart des utilisateurs dans la plupart des situations ? Est-ce que voir l’option sélectionnée est beaucoup plus important que de voir les alternatives ? Si c’est le cas, envisagez d’utiliser une liste déroulante si vous ne souhaitez pas encourager les utilisateurs à apporter des modifications en masquant les alternatives.

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

• La liste nécessite-t-elle une interaction constante ? Si c’est le cas, utilisez une liste à sélection unique pour simplifier l’interaction.

Dans cet exemple, les utilisateurs modifient constamment l’élément sélectionné dans la liste Éléments d’affichage pour définir les couleurs de premier plan et d’arrière-plan. Dans ce cas, l’utilisation d’une liste déroulante serait très fastidieuse.

• Le paramètre semble-t-il une quantité relative ? Les utilisateurs bénéficieraient-ils de commentaires instantanés sur l’effet des modifications de définition ? Si c’est le cas, envisagez d’utiliser un curseur à la place.
• Existe-t-il une relation hiérarchique significative entre les éléments de liste ? Si c’est le cas, utilisez plutôt un contrôle d’arborescence .
• L’espace d’écran est-il une prime ? Dans ce cas, utilisez plutôt une liste déroulante, car l’espace d’écran utilisé est fixe et indépendant du nombre d’éléments de liste.

Listes à sélection multiple standard et listes de boîtes de case activée

• La sélection multiple est-elle essentielle pour la tâche ou couramment utilisée ? Si c’est le cas, utilisez une liste de zone de case activée pour rendre la sélection multiple évidente, en particulier si vos utilisateurs cibles ne sont pas avancés. De nombreux utilisateurs ne se rendent pas compte qu’une liste à sélection multiple standard prend en charge la sélection multiple. Utilisez une liste à sélection multiple standard si les zones case activée attirent trop l’attention sur la sélection multiple ou entraînent trop d’encombrement de l’écran.
• La stabilité de la sélection multiple est-elle importante ? Si c’est le cas, utilisez une liste de zone de case activée, un générateur de liste ou ajouter/supprimer une liste, car un clic ne modifie qu’un seul élément à la fois. Avec une liste de sélection multiple standard, il est très facile d’effacer toutes les sélections, même par accident.
• Le contrôle est-il utilisé pour choisir zéro ou plusieurs éléments dans une liste de valeurs ? Si ce n’est pas le cas, utilisez un autre contrôle. Pour choisir un élément, utilisez plutôt une liste à sélection unique.

Listes en préversion

• Les options sont-elles plus faciles à sélectionner avec des images qu’avec du texte seul ? Si c’est le cas, utilisez une liste d’aperçu.

Répertorier les générateurs et ajouter/supprimer des listes

• Le contrôle est-il utilisé pour choisir zéro ou plusieurs éléments dans une liste de valeurs ? Si ce n’est pas le cas, utilisez un autre contrôle. Pour choisir un élément, utilisez plutôt une liste à sélection unique.
• L’ordre des éléments sélectionnés est-il important ? Si c’est le cas, le générateur de listes et les modèles d’ajout/suppression de liste prennent en charge l’ordre, contrairement aux autres modèles de sélection multiple.
• Est-il important pour les utilisateurs de voir un résumé de tous les éléments sélectionnés ? Si c’est le cas, le générateur de listes et les modèles d’ajout/suppression de liste affichent uniquement les éléments sélectionnés, contrairement aux autres modèles à sélection multiple.
• Les choix possibles sont-ils sans contrainte ? Si c’est le cas, utilisez une liste d’ajout/suppression afin que les utilisateurs puissent choisir des valeurs qui ne se trouvent pas actuellement dans la liste.
• L’ajout d’une valeur à la liste nécessite-t-il une boîte de dialogue spécialisée pour le choix des objets ? Si c’est le cas, utilisez une liste d’ajout/suppression et affichez la boîte de dialogue lorsque les utilisateurs cliquent sur Ajouter.
• L’espace d’écran est-il une prime ? Si c’est le cas, utilisez plutôt une liste d’ajout/suppression, car elle utilise moins d’espace d’écran en n’affichant pas toujours l’ensemble d’options.

Pour les zones de liste, 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 pour les listes à sélection unique (et aucun pour les listes à sélection multiple). Étant donné que les zones de liste peuvent être utilisées pour les données, le nombre d’éléments peut ne pas être connu à l’avance.

Note: Parfois, un contrôle qui ressemble à une zone de liste est implémenté à l’aide d’un affichage liste et vice versa. Dans ce cas, appliquez les instructions en fonction de l’utilisation, et non de l’implémentation.

Modèles d’usage

Les zones de liste ont plusieurs modèles d’utilisation :

Étiquette	Valeur
Listes à sélection unique Autoriser les utilisateurs à sélectionner un élément à la fois.	Dans cet exemple, les utilisateurs peuvent sélectionner un seul élément d’affichage.
Listes à sélection multiple standard Autoriser les utilisateurs à sélectionner un nombre quelconque d’éléments, y compris aucun.	Les listes à sélection multiple standard ont exactement la même apparence que les listes à sélection unique. Il n’existe donc aucun indice visuel indiquant qu’une zone de liste prend en charge la sélection multiple. Étant donné que les utilisateurs doivent découvrir cette fonctionnalité, ce modèle de liste est mieux utilisé pour les tâches où la sélection multiple n’est pas essentielle et est rarement utilisée. Il existe deux modes de sélection multiple différents : multiple et étendu. Le mode de sélection étendu est de loin le plus courant, où la sélection peut être étendue en faisant glisser ou avec Maj+clic et Ctrl+Clic pour sélectionner des groupes de valeurs contiguës et non adjacentes, respectivement. En mode à sélection multiple, le fait de cliquer sur un élément active son état de sélection, quelles que soient les touches Maj et Ctrl. Compte tenu de ce comportement inhabituel, le mode de sélection multiple est déconseillé et vous devez utiliser case activée listes de boîtes à la place. Dans cet exemple, les utilisateurs peuvent sélectionner un nombre quelconque d’éléments à l’aide du mode de sélection multiple.
Listes de cases à cocher Comme les zones de liste à sélection multiple standard, case activée listes de zones permettent aux utilisateurs de sélectionner n’importe quel nombre d’éléments, y compris aucun.	Contrairement aux listes à sélection multiple standard, les zones case activée indiquent clairement que la sélection multiple est possible. Utilisez ce modèle de liste pour les tâches où la sélection multiple est essentielle ou couramment utilisée. Dans cet exemple, les utilisateurs sélectionnent généralement plusieurs éléments afin d’utiliser une liste case activée zone. Étant donné cette indication claire de la sélection multiple, vous pouvez supposer que les listes de zone case activée sont préférables aux listes à sélection multiple standard. Dans la pratique, peu de tâches nécessitent une sélection multiple ou l’utilisent fortement ; l’utilisation d’une liste de zone de case activée dans de tels cas attire trop l’attention sur la sélection. Par conséquent, les listes à sélection multiple standard sont beaucoup plus courantes.
Listes en préversion Il peut s’agir d’une sélection unique ou multiple, mais ils affichent un aperçu de l’effet de la sélection plutôt que du texte.	Dans cet exemple, un aperçu de chaque option montre clairement l’effet du choix, ce qui est plus efficace que d’utiliser du texte seul.
Générateurs de listes Autorisez les utilisateurs à créer une liste de choix en ajoutant un élément à la fois et en définissant éventuellement l’ordre de liste.	Un générateur de listes se compose de deux listes à sélection unique : la liste à gauche est un ensemble fixe d’options et la liste à droite est la liste en cours de génération. Il existe deux boutons de commande entre les listes : Bouton Ajouter qui déplace l’option actuellement sélectionnée vers la liste en cours de génération, insérée avant l’élément sélectionné. (Le double-clic sur un élément d’option a le même effet.) Bouton Supprimer qui supprime l’élément sélectionné de la liste générée et le retourne à la liste d’options. (Le double-clic sur un élément dans la liste générée a le même effet.) La liste générée peut éventuellement avoir des commandes Monter et Descendre pour classer les éléments de liste. Dans cet exemple, un générateur de listes est utilisé pour créer une barre d’outils en sélectionnant des éléments dans un ensemble d’options disponibles et en définissant leur ordre.
Ajouter/supprimer des listes Autoriser les utilisateurs à créer une liste de choix en ajoutant un ou plusieurs éléments à la fois et en définissant éventuellement l’ordre de liste (par exemple, les générateurs de listes).	Contrairement à un générateur de listes, cliquer sur Ajouter affiche une boîte de dialogue pour sélectionner les éléments à ajouter à la liste. L’utilisation d’une boîte de dialogue distincte permet une grande flexibilité dans le choix des éléments, vous pouvez utiliser un sélecteur d’objets spécialisé ou même une boîte de dialogue commune. Par rapport au générateur de listes, cette variante est plus compacte, mais nécessite un peu plus d’efforts pour ajouter des éléments. Dans cet exemple, les utilisateurs peuvent ajouter ou supprimer des outils d’un menu, ainsi que définir l’ordre. Bien que le générateur de listes et les modèles d’ajout/suppression de liste soient considérablement plus lourds que les autres listes à sélection multiple, ils offrent deux avantages uniques : Les utilisateurs contrôlent l’ordre de liste, à la fois lors de la génération de la liste et après. Les utilisateurs peuvent passer en revue un résumé des éléments sélectionnés, ce qui peut être un avantage significatif si le nombre de choix est important. Leurs inconvénients sont qu’ils nécessitent beaucoup plus d’espace d’écran et peuvent être difficiles à utiliser lors de la création d’une grande liste d’éléments à partir de zéro. Par conséquent, ils sont mieux utilisés pour créer des listes courtes ou modifier des listes qui existent déjà.

Consignes

Présentation

• Triez les éléments de liste dans un ordre logique, par exemple en regroupant les options associées, en plaçant les éléments les plus fréquemment utilisés 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.

Correct :

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

Incorrect:

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

Correction :

Dans cet exemple, les éléments de liste sont plus faciles à trouver, car ils sont triés par ordre alphabétique. Toutefois, l’élément « Tous les produits Windows » se trouve au début de la liste, quel que soit son ordre de tri.

• 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.

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

• 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.

Incorrect :

Dans cet exemple, la signification de l’élément vide n’est pas claire.

Correction :

Dans cet exemple, la méta-option « (none) » est utilisée à la place.

Interaction

• Envisagez de fournir un comportement de double-clic. Le double-clic doit avoir le même effet que la sélection d’un élément et l’exécution de sa commande par défaut.
• Rendre le comportement de double-clic redondant. Il doit toujours y avoir un bouton de commande ou une commande de menu contextuel qui a le même effet.
• Si les utilisateurs ne peuvent rien faire avec les éléments sélectionnés, n’autorisez pas la sélection.

Correction :

Cette zone de liste affiche une liste de modifications en lecture seule ; il n’est pas nécessaire de sélectionner.

• Lors de la désactivation d’une zone de liste, désactivez également les étiquettes et les boutons de commande associés.
• N’utilisez pas la modification de l’élément sélectionné dans une zone de liste 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). Exception: Vous pouvez modifier dynamiquement le texte statique utilisé pour décrire l’élément sélectionné.

Acceptable :

Dans cet exemple, la modification de l’élément sélectionné modifie la description.

• Évitez le défilement horizontal. Les listes multicolonnes s’appuient sur le défilement horizontal, qui est généralement plus difficile à utiliser que le défilement vertical. Les listes multicolonnes qui nécessitent un défilement horizontal peuvent être utilisées lorsque vous disposez de nombreux éléments triés par ordre alphabétique et d’un espace d’écran suffisant pour un contrôle large.

Acceptable :

Dans cet exemple, plusieurs colonnes qui nécessitent un défilement horizontal sont utilisées, car il existe de nombreux éléments et beaucoup d’espace d’écran disponible pour un contrôle large.

Listes à sélection multiple

• Envisagez d’afficher le nombre d’éléments sélectionnés sous la liste, en particulier si les utilisateurs sont susceptibles de sélectionner plusieurs éléments. Ces informations non seulement fournissent des commentaires utiles, mais elles indiquent également clairement que la zone de liste prend en charge la sélection multiple.

Dans cet exemple, le nombre d’éléments sélectionnés s’affiche sous la liste.

• Vous pouvez fournir d’autres métriques de sélection qui peuvent être plus significatives, telles que les ressources requises pour les sélections.

Dans cet exemple, l’espace disque requis pour installer les composants est plus significatif que le nombre d’éléments sélectionnés.

• S’il existe potentiellement de nombreux éléments de liste et que la sélection ou l’effacement de tous les éléments est probable, ajoutez les boutons de commande Sélectionner tout et Effacer tous les boutons de commande.
• Pour les listes à sélection multiple standard, n’utilisez pas le mode de sélection multiple, car ce mode de sélection a été déprécié. Pour un comportement équivalent, utilisez plutôt une liste de boîtes de case activée.

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: Ne sélectionnez aucun élément 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.

Dimensionnement et espacement recommandés

Dimensionnement et espacement recommandés pour les zones de liste.

• Choisissez une largeur de zone de liste appropriée pour les données valides les plus longues. Les zones de liste standard ne peuvent pas être défiler horizontalement, de sorte que les utilisateurs peuvent voir uniquement ce qui est visible dans le contrôle.
• Incluez 30 % supplémentaires (jusqu’à 200 % pour le texte plus court) pour tout texte (mais pas les nombres) qui sera localisé.
• Choisissez une hauteur de zone de liste qui affiche un nombre intégral d’éléments. Évitez de tronquer des éléments verticalement.
• Choisissez une hauteur de zone de liste qui élimine le défilement vertical inutile. Les zones de liste doivent afficher entre 3 et 20 éléments sans qu’il soit nécessaire de faire défiler. Envisagez de rendre une zone de liste légèrement plus longue si cela élimine la barre de défilement verticale. Les listes avec potentiellement plusieurs éléments doivent afficher au moins cinq éléments pour faciliter le défilement en affichant plus d’éléments à la fois et en facilitant la position de la barre de défilement.
• Si les utilisateurs tirent parti de l’augmentation de la zone de liste, rendez la zone de liste et sa fenêtre parente redimensionnables. Cela permet aux utilisateurs d’ajuster la taille de la zone de liste en fonction des besoins. Toutefois, les zones de liste redimensionnables doivent afficher au moins trois éléments.

Étiquettes

Étiquettes de contrôle

• Toutes les zones de liste ont besoin d’étiquettes. Écrire l’étiquette sous forme de mot ou d’expression, et non sous forme de phrase ; utilisez un signe deux-points à la fin de l’étiquette.

Exception: Omettez l’étiquette s’il s’agit simplement d’une reformulation de l’instruction main d’une boîte de dialogue. Dans ce cas, l’instruction main prend les deux-points (sauf s’il s’agit d’une question) et la clé d’accès.

Acceptable :

Dans cet exemple, l’étiquette de zone de liste restaurait simplement l’instruction main.

Better:

Dans cet exemple, l’étiquette redondante est supprimée, de sorte que l’instruction main prend les deux-points et la clé d’accès.

• Si une zone de liste est subordonnée à une case d’option ou case activée zone et qu’elle est introduite par l’étiquette de ce contrôle se terminant par un signe deux-points, ne placez pas d’étiquette supplémentaire sur le contrôle de zone de liste.

Dans cet exemple, la zone de liste est subordonnée à une case d’option et partage son étiquette.

• Attribuez une clé d’accès unique. Pour obtenir des instructions, consultez Clavier.
• Utilisez la mise en majuscules 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 la première ligne de texte du contrôle.

Correction :

Dans ces exemples, l’étiquette en haut s’aligne sur le bord gauche de la zone de liste et l’étiquette à gauche s’aligne sur le texte de la zone de liste.

Incorrect :

Dans ces exemples incorrects, l’étiquette en haut s’aligne sur le texte de la zone de liste et l’étiquette à gauche s’aligne sur la partie supérieure de la zone de liste.

• Pour les zones de liste à sélection multiple, utilisez une étiquette qui indique clairement que la sélection multiple est possible. Les étiquettes de liste de case à cocher peuvent être moins explicites.

Correction :

Dans cet exemple, l’étiquette indique clairement que plusieurs sélections sont possibles.

Incorrect :

Dans cet exemple, l’étiquette ne fournit aucune information évidente sur la sélection multiple.

Meilleure

Dans cet exemple, les zones case activée indiquent clairement que la sélection multiple est possible, de sorte que l’étiquette n’a pas besoin d’être explicite.

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

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 et de supplément

• Si vous devez ajouter du texte d’instructions sur une zone de liste, 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 ce texte entre parenthèses entre l’étiquette et le signe deux-points, ou sans parenthèses sous le contrôle.

Dans cet exemple, le texte supplémentaire est placé sous la liste.

Documentation

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

• 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. Incluez la liste de mots. Ne faites pas référence à une zone de liste en tant que zone de liste ou champ.
• Pour les éléments de liste, utilisez le texte exact de l’élément, y compris sa mise en majuscule.
• Dans la programmation et d’autres documents techniques, reportez-vous aux zones de liste en tant que zones de liste. Partout ailleurs, utilisez la liste.
• Pour décrire l’interaction utilisateur, utilisez select.
• Lorsque cela est possible, mettez en forme les éléments d’étiquette et de liste à l’aide d’un texte en gras. Sinon, placez l’étiquette et les éléments entre guillemets uniquement si nécessaire pour éviter toute confusion.

Exemple : dans la liste Accéder à quoi , sélectionnez Signet.