Affichages 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 un affichage de liste, les utilisateurs peuvent afficher et interagir avec une collection d’objets de données, à l’aide d’une sélection unique ou d’une sélection multiple.

Affichage de liste classique.

Les affichages de liste offrent plus de flexibilité et de fonctionnalités que les zones de liste. Contrairement aux zones de liste, ils prennent en charge la modification des affichages, le regroupement, plusieurs colonnes avec des en-têtes, le tri par colonnes, la modification de la largeur et de l’ordre des colonnes, le fait d’être une source de glissement ou une cible de déplacement et la copie de données vers et depuis le Presse-papiers.

Notes

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

Est-ce le contrôle approprié ?

Un affichage de liste est plus qu’une zone de liste plus flexible et fonctionnelle : ses fonctionnalités supplémentaires entraînent une utilisation différente. Le tableau suivant présente la comparaison.

Utilisation	Zones de liste	Affichages de liste
Type de données	Options de données et de programme.	Données uniquement.
Contents	Étiquettes uniquement.	Étiquettes et données auxiliaires, éventuellement dans plusieurs colonnes.
Interaction	Utilisé pour effectuer des sélections.	Peut être utilisé pour effectuer des sélections, mais souvent utilisé pour afficher et interagir avec des données. Il peut s’agir d’une source de glisser-glisser ou d’une cible de déplacement.
Présentation	Fixe.	Les utilisateurs peuvent modifier les vues, regrouper, trier par colonnes et modifier la largeur et l’ordre des colonnes.

Pour déterminer s’il s’agit du bon contrôle, tenez compte des questions suivantes :

• La liste présente-t-elle des données plutôt que des options de programme ? Si ce n’est pas le cas, envisagez d’utiliser une zone de liste à la place.
• Les utilisateurs doivent-ils modifier les affichages, regrouper, trier par colonnes ou modifier les largeurs et l’ordre des colonnes ? Si ce n’est pas le cas, utilisez plutôt une zone de liste.
• Le contrôle doit-il être une source de glissement ou une cible de déplacement ? Si c’est le cas, utilisez 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 un affichage liste.

Affichages de liste de case à cocher

• Le contrôle est-il utilisé pour choisir zéro ou plusieurs éléments dans une liste de données ? Pour choisir un élément, utilisez plutôt une sélection unique.
• La sélection multiple est-elle essentielle pour la tâche ou couramment utilisée ? Si c’est le cas, utilisez un affichage de liste case activée zone pour rendre la sélection multiple évidente, en particulier si vos utilisateurs cibles ne sont pas avancés. Si ce n’est pas le cas, utilisez un affichage de 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.

Notes

Parfois, un contrôle qui ressemble à un affichage de liste est implémenté à l’aide d’une zone de 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

Toutes les vues prennent en charge la sélection unique, où les utilisateurs peuvent sélectionner un seul élément à la fois, et la sélection multiple, où les utilisateurs peuvent sélectionner n’importe quel nombre d’éléments, y compris aucun. Les affichages liste prennent en charge le mode de sélection étendu, où la sélection peut être étendue en faisant glisser ou avec Maj+clic ou Ctrl+clic pour sélectionner des groupes de valeurs contiguës ou non adjacentes, respectivement. Contrairement aux zones de liste, elles ne prennent pas en charge le mode de sélection multiple, où le fait de cliquer sur un élément fait basculer son état de sélection indépendamment des touches Maj et Ctrl.

Affichage de liste standard

Le contrôle d’affichage de liste prend en charge cinq vues standard :

Usage	Exemple
Vignette chaque élément apparaît sous la forme d’une icône moyenne, avec une étiquette et des détails facultatifs à droite.	Le mode Vignette affiche des icônes moyennes avec des étiquettes et des détails facultatifs à droite.
Grande icône chaque élément apparaît sous la forme d’une icône extra grande, grande ou moyenne avec une étiquette en dessous.	La vue Grande Icône affiche chaque élément sous la forme d’une grande icône avec une étiquette en dessous.
Petite icône chaque élément apparaît sous la forme d’une petite icône avec une étiquette à droite.	La vue Petite icône affiche chaque élément sous la forme d’une petite icône avec son étiquette à droite.
Liste chaque élément apparaît sous la forme d’une petite icône avec une étiquette à droite.	en mode liste, cette vue trie les éléments dans les colonnes et utilise une barre de défilement horizontale. en revanche, les modes d’affichage d’icônes classent les éléments dans les lignes et utilisent une barre de défilement verticale. Le mode Liste affiche chaque élément sous la forme d’une petite icône avec son étiquette à droite.
Détails chaque élément apparaît sous forme de ligne dans un format tabulaire. la colonne la plus à gauche contient à la fois l’icône et l’étiquette facultatives de l’élément, et les colonnes suivantes contiennent des informations supplémentaires, telles que les propriétés de l’élément.	en outre, les colonnes peuvent être ajoutées ou supprimées, puis réorganisées et redimensionnées. les lignes peuvent être regroupées, triées par colonne. La vue Détails affiche chaque élément sous forme de ligne dans un format de tableau.

Variantes de l’affichage liste

Étiquette	Valeur
Sélecteur de colonnes Les affichages de liste contiennent parfois tellement de colonnes qu’il n’est pas pratique de les afficher toutes. Dans ce cas, la meilleure approche consiste à afficher les colonnes les plus utiles par défaut et à permettre aux utilisateurs d’ajouter ou de supprimer des colonnes en fonction des besoins.	Cliquer avec le bouton droit sur l’en-tête de colonne affiche un menu contextuel qui permet aux utilisateurs d’ajouter ou de supprimer des colonnes. Cliquez sur Plus dans le menu contextuel de l’en-tête de colonne pour afficher la boîte de dialogue Choisir des colonnes, qui permet aux utilisateurs d’ajouter ou de supprimer des colonnes et de les réorganiser.
Affichage liste des cases à cocher Autoriser les utilisateurs à sélectionner plusieurs éléments.	Les affichages de liste à sélection multiple ont exactement la même apparence que les affichages de liste à sélection unique. Il n’existe donc aucun indice visuel indiquant qu’ils prennent en charge la sélection multiple. Un case activée affichage de liste de zone peut être utilisé pour indiquer clairement que la sélection multiple est possible. Par conséquent, ce modèle doit être utilisé pour les tâches où la sélection multiple est essentielle ou couramment utilisée. Dans cet exemple, un affichage Petite icône utilise case activée zones, car la sélection multiple est essentielle pour la tâche.
Affichages de liste avec des groupes Organisez les données en groupes.	Bien que les affichages Détails prennent souvent en charge le tri des données selon l’une des colonnes, les affichages de liste permettent aux utilisateurs d’organiser les éléments en groupes. Voici quelques-uns des avantages du regroupement : Les groupes fonctionnent dans tous les affichages (à l’exception de la liste). Par exemple, les utilisateurs peuvent regrouper une vue d’icônes très volumineuses d’albums par artiste. Les groupes peuvent être des collections de haut niveau, qui sont souvent plus significatives que le regroupement directement hors des données. Par exemple, Windows Explorer groupes de dates dans Aujourd’hui, Hier, Dernière semaine, Plus tôt cette année et Il y a longtemps. Dans cet exemple, le Centre d’accueil Windows affiche des éléments groupés dans un affichage de liste.

Consignes

Présentation

• Triez les éléments de liste dans un ordre logique. Triez les noms par ordre alphabétique, les nombres dans l’ordre numérique et les dates dans l’ordre chronologique.

• Le cas échéant, autorisez les utilisateurs à modifier l’ordre de tri. Le tri utilisateur est important si la liste contient de nombreux éléments ou s’il existe des scénarios où les éléments sont trouvés plus efficacement à l’aide d’un ordre de tri autre que celui par défaut.

• Utilisez l’attribut Always Show Selection afin que les utilisateurs puissent facilement déterminer l’élément sélectionné, même lorsque le contrôle n’a pas le focus.

• Évitez de présenter des affichages de liste vides. Si les utilisateurs créent une liste, initialisez la liste avec des instructions ou des exemples d’éléments dont les utilisateurs peuvent avoir besoin.

  

  Dans cet exemple, l’affichage Liste de recherche présente initialement des instructions.

• Si les utilisateurs peuvent modifier les affichages, regrouper, trier par colonnes ou modifier les colonnes, ainsi que leurs largeurs et leur ordre, faites en sorte que ces paramètres soient conservés afin qu’ils prennent effet la prochaine fois que l’affichage de liste est affiché. Faites-les persister sur une vue par liste, par utilisateur.

Interaction

• Utilisez un simple clic pour sélectionner l’élément de liste vers lequel l’utilisateur pointe. Exception : pour le modèle de liste de liens de commandes, un simple clic sélectionne l’élément et ferme la fenêtre ou accède à la page suivante.

• 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 un élément de liste nécessite une explication supplémentaire, fournissez l’explication dans uneinfo-bulle. Utilisez des phrases complètes et une ponctuation de fin.

  

  Dans cet exemple, une info-bulle est utilisée pour fournir des informations supplémentaires.

• Fournissez des menus contextuels des commandes pertinentes. Ces commandes incluent Couper, Copier, Coller, Supprimer ou Supprimer, Renommer et Propriétés.

• Si les utilisateurs peuvent modifier l’ordre de tri et le regroupement, fournissez les menus contextuels Trier par et Regrouper par. Le premier clic sur un nom de colonne trie ou regroupe la liste dans l’ordre croissant de cette colonne, le deuxième clic trie ou groupes dans l’ordre décroissant. Utilisez l’ordre précédent (d’une autre colonne) comme clé secondaire.

  

  Dans cet exemple, le menu contextuel Trier par modifie l’ordre de tri. Cliquer une fois sur Nom trie par nom dans l’ordre croissant. Cliquer à nouveau sur Nom trie par nom dans l’ordre décroissant.

• Rendez l’en-tête de colonne d’affichage liste accessible à l’aide du clavier.

  • Développeurs: Pour ce faire, définissez le focus sur le contrôle d’en-tête de colonne. Cette fonctionnalité est nouvelle dans Windows Vista.

• Lors de la désactivation d’un affichage de liste, désactivez également les étiquettes et les boutons de commande associés.

• Évitez le défilement horizontal. Le mode Liste utilise le défilement horizontal. Ce mode est généralement le plus compact, mais le défilement horizontal est généralement plus difficile à utiliser que le défilement vertical. Envisagez plutôt d’utiliser la vue Petite icône si la compacité n’est pas importante. Toutefois, le mode Liste est un bon choix lorsqu’il existe de nombreux éléments triés par ordre alphabétique et suffisamment d’espace d’écran pour un contrôle large.

  Acceptable:

  

  Dans cet exemple, le mode Liste est utilisé, 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 fournissent non seulement des commentaires utiles, mais elles indiquent également clairement que l’affichage liste prend en charge la sélection multiple.

  

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

• Au lieu du nombre d’éléments sélectionnés, vous pouvez également 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 de composants sélectionnés.

• Pour case activée affichages de liste de zone, s’il existe potentiellement de nombreux éléments 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 tout.

• Utilisez des zones de case activée à état mixte pour indiquer la sélection partielle des éléments d’un conteneur. L’état mixte n’est pas utilisé comme troisième état pour un élément individuel.

Modification des affichages

Si les utilisateurs peuvent modifier les vues :

• Choisissez l’affichage le plus pratique par défaut. Toutes les modifications apportées par les utilisateurs doivent être rendues persistantes par affichage de liste, par utilisateur.

• Modifiez l’affichage à l’aide d’un bouton fractionné, d’un bouton de menu ou d’une liste déroulante. Dans la mesure du possible, utilisez un bouton fractionné dans la barre d’outils et modifiez l’étiquette du bouton pour refléter l’affichage actuel.

  

  Dans cet exemple, un bouton fractionné dans la barre d’outils est utilisé pour modifier les vues.

• Fournissez un menu contextuel Affichage.

  

Dans cet exemple, un menu contextuel Affichage est utilisé pour modifier les vues.

Affichages détails

• Envisagez d’utiliser la vue vignettes pour améliorer la lisibilité.

  Acceptable:

  

  Dans cet exemple, il y a trop de données et la fenêtre, la liste et les colonnes sont trop petites, ce qui rend les éléments de liste difficiles à lire.

  Mieux :

  

  Dans cet exemple, le mode Vignette affiche les données sans troncation.

• Choisissez les largeurs de colonne par défaut appropriées pour les données les plus longues. Les vues de liste tronquent automatiquement les données longues avec des ellipses, de sorte que les largeurs de colonne sont appropriées si peu d’ellipses sont affichées par défaut. Bien que les utilisateurs puissent redimensionner des colonnes, préférez d’autres solutions :

  • Dimensionner chaque largeur de colonne pour l’adapter à ses données.
  • Dimensionner la largeur du contrôle pour l’adapter à ses colonnes, ainsi que les barres de défilement probables.
  • Si nécessaire, utilisez le défilement horizontal.
  • Avoir des données tronquées uniquement pour les éléments de taille impaire ou en dernier recours.

  Si les données de taille normale doivent être tronquées par défaut, rendez la fenêtre et l’affichage liste redimensionnables. Incluez 30 % supplémentaires (jusqu’à 200 % pour le texte plus court) pour tout texte (mais pas les nombres) qui sera localisé.

  Incorrect :

  

  Dans cet exemple, la plupart des données sont tronquées. Les nombreux points de suspension indiquent clairement que les largeurs de contrôle et de colonne sont trop petites pour les données.

  Incorrect :

  

  Dans cet exemple, les données sont tronquées sans raison.

• Choisissez un ordre de colonne par défaut approprié. En règle générale, triez les colonnes comme suit :

  • Tout d’abord, le nom de l’élément ou les données d’identification.
  • Ensuite, d’autres données utiles pour différencier les éléments de liste.
  • Ensuite, les données les plus utiles (de préférence courtes ou de longueur fixe).
  • Ensuite, les données moins utiles (de longueur courte ou fixe préférable).
  • Dernières données longues et de longueur variable.

  Les données de longueur variable et longues sont placées dans les dernières colonnes pour réduire le besoin de défilement horizontal. Dans ces catégories, placez les informations associées ensemble dans une séquence logique.

• Le cas échéant, permettez aux utilisateurs d’ajouter et de supprimer des colonnes, ainsi que de modifier l’ordre. Affichez les colonnes les plus utiles par défaut. Pour ce faire, l’attribut Glisser-déplacer d’en-tête est atteint.

• Choisissez un alignement approprié pour les données. Utilisez les règles suivantes :

  • Aligner à droite les nombres, les devises et les heures.
  • Alignez à gauche le texte, les ID (même s’ils sont numériques) et les dates.

• Pour les en-têtes de colonne triables, le premier clic sur un titre trie la liste par ordre croissant pour la colonne, le deuxième clic trie dans l’ordre décroissant. Utilisez l’ordre de tri précédent (à partir d’une autre colonne) comme clé de tri secondaire.

  

  Dans cet exemple, on a d’abord cliqué sur la colonne Nom, puis sur la colonne Type. Par conséquent, Type dans l’ordre croissant est la clé de tri primaire, et Name dans l’ordre croissant est secondaire.

• Utilisez l’attribut Full Row Select afin que les utilisateurs puissent facilement déterminer les éléments sélectionnés dans toutes les colonnes.

• N’utilisez pas d’en-tête de colonne triable, sauf si les données peuvent être triées.

• N’utilisez pas d’en-tête de colonne s’il n’y a qu’une seule colonne et qu’il n’est pas nécessaire d’inverser le tri. Utilisez plutôt une étiquette pour identifier les données.

  Incorrect :

  

  Correct :

  

  Dans l’exemple correct, une étiquette est utilisée au lieu d’un en-tête de colonne.

Dimensionnement et espacement recommandés

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

• Choisissez une hauteur d’affichage de liste qui affiche un nombre intégral d’éléments. Évitez de tronquer des éléments verticalement.
• Choisissez une taille d’affichage de liste qui élimine le défilement vertical et horizontal inutile dans toutes les vues prises en charge. Les affichages liste doivent afficher entre 3 et 20 éléments. Envisagez d’agrandir légèrement l’affichage liste si cela élimine une barre de défilement. 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 l’affichage liste, rendez l’affichage liste et sa fenêtre parente redimensionnables. Cela permet aux utilisateurs d’ajuster la taille de l’affichage de liste en fonction des besoins. Toutefois, les affichages de liste redimensionnables doivent afficher au moins trois éléments.

Étiquettes

Étiquettes de contrôle

• Toutes les vues de liste ont besoin d’étiquettes. Écrivez l’étiquette sous la forme d’un mot ou d’une expression, et non sous forme de phrase, se terminant par un signe deux-points à l’aide d’un texte statique.

• 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 au-dessus du contrôle et alignez l’étiquette sur le bord gauche du contrôle.

• Pour les affichages de liste à sélection multiple, écrivez l’étiquette qui indique clairement que plusieurs sélections sont possibles. Les étiquettes d’affichage de liste de case à cocher peuvent être moins explicites.

  Correct :

  

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

  Incorrect :

  

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

  Acceptable:

  

  Dans cet exemple, les zones case activée indiquent clairement que plusieurs sélections sont possibles, 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.

Étiquettes de titre

• Gardez les étiquettes de titre brèves (trois mots ou moins).
• Utilisez un seul substantif ou une expression substantif sans ponctuation de fin.
• Utilisez la majuscule de style phrase.
• Alignez le titre de la même façon que les données.

Étiquettes de groupe

• Utilisez les étiquettes de groupe suivantes pour les collections de haut niveau :
  • Noms : utilisez la première lettre de nom ou les plages de lettres.
  • Tailles : Non spécifié, 0 Ko, 0-10 Ko, 10-100 Ko, 100 Ko - 1 Mo, 1-16 Mo, 16-128 Mo
  • Dates : Aujourd’hui, Hier, Dernière semaine, Plus tôt cette année et Il y a longtemps.
• Sinon, les étiquettes de groupe utilisent le texte exact des données regroupées, y compris la majuscule et la ponctuation.

Texte des données

• Utilisez la majuscule de style phrase.

Texte d’instruction

• Si vous devez ajouter du texte d’instruction sur un affichage de liste, ajoutez-le au-dessus de l’étiquette. Utilisez des phrases complètes avec une ponctuation de fin.
• Utilisez la majuscule de style phrase.
• Les informations supplémentaires utiles, mais non nécessaires, doivent être brèves. Placez ces informations entre parenthèses entre l’étiquette et le signe deux-points ou sans parenthèses sous le contrôle.

Documentation

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

• Utilisez le texte d’étiquette exact, y compris sa majuscule, mais n’incluez pas le trait de soulignement de la clé d’accès ou les deux-points, et incluez la liste de mots. Ne faites pas référence à une zone de liste en tant que zone de liste, affichage de liste ou champ.
• Pour les données de liste, utilisez le texte de données exact, y compris sa majuscule.
• Reportez-vous aux vues de liste en tant que vues de liste uniquement dans la programmation et d’autres documentations techniques. Partout ailleurs, utilisez la liste.
• Pour décrire l’interaction utilisateur, utilisez sélectionner pour les données, puis cliquez sur les en-têtes.
• Lorsque cela est possible, mettez en forme les options d’étiquette et de liste à l’aide d’un texte en gras. Sinon, placez l’étiquette et les options entre guillemets uniquement si nécessaire pour éviter toute confusion.

Exemple : Dans la liste Programmes et services , sélectionnez Partage de fichiers et d’imprimantes.

Lorsque vous faites référence à case activée zones dans un affichage de liste :

• Utilisez le texte d’étiquette exact, y compris sa majuscule, et incluez le mot case activée zone. N’incluez pas le trait de soulignement de la clé d’accès.
• Pour décrire l’interaction utilisateur, utilisez sélectionner et effacer.
• Lorsque cela est possible, mettez en forme l’étiquette à l’aide d’un texte en gras. Sinon, placez l’étiquette entre guillemets uniquement si nécessaire pour éviter toute confusion.

Exemple : sélectionnez la zone Soulignement case activée.