Applications Windows
Réduire la table des matières
Développer la table des matières

Recommandations en matière d’affichage Liste et Grille

[Cet article contient des informations propres aux applications de plateforme Windows universelle (UWP) et à Windows 10. Pour obtenir de l’aide concernant Windows 8.1, téléchargez le document PDF de recommandations pour Windows 8.1 (en anglais).]

Les listes permettent d’afficher le contenu d’applications basées sur des collections et d’interagir avec ce contenu de façon cohérente et optimisée pour la navigation tactile. Les contrôles en mode Liste et Grille peuvent vous aider à afficher des listes efficacement. Grâce à eux, vous pouvez classer les éléments et affecter des en-têtes de groupe, glisser-déplacer des éléments, traiter du contenu et réorganiser des éléments.

Affichage en mode Liste ou en mode Grille ?

Bien que les affichages Liste et Grille comportent des fonctionnalités similaires, leur utilisation varie.

Les affichages Liste sont recommandés dans les cas suivants :

  • affichage de collections de contenu comportant essentiellement du texte ;
  • navigation dans une collection de contenu unique ou catégorisée ;
  • création du volet principal dans l’affichage Maître/Détails. Le modèle Maître/Détails est souvent utilisé dans les applications de messagerie, dans lesquelles un volet contient une liste d’éléments sélectionnables pendant que l’autre volet affiche une vue détaillée de l’élément sélectionné. Pour découvrir un exemple de cet affichage, consultez la section Choix du modèle approprié dans cet article.

La disposition en liste comporte des en-têtes de groupe et une seule colonne dont la lecture s’effectue de haut en bas, tandis que son défilement ou mouvement panoramique est toujours vertical.

Exemple d’affichage Liste avec quatre types d’unité principale

Les affichages Grille sont recommandés dans les cas suivants :

  • affichage de collections de contenu comportant essentiellement des images ;
  • affichage des bibliothèques de contenu ; Consultez la section Choix du modèle approprié dans cet article pour obtenir un exemple de cet affichage.
  • mise en forme des deux affichages de contenu associés avec le zoom sémantique.

Avec la disposition en grille, le mouvement panoramique est vertical, et les éléments sont disposés suivant leur ordre de lecture de gauche à droite, puis de haut en bas.

Exemple de disposition d’affichage Grille

Choix du modèle approprié

Les listes permettent d’afficher des bibliothèques de contenu, des données maître/détails ou des données statiques.

  • Bibliothèque de contenu

    Utilisez une bibliothèque de contenu pour afficher une collection, une bibliothèque ou du contenu. Il est souvent utilisé pour présenter du contenu multimédia, comme des images et des vidéos. Dans une bibliothèque de contenu, l’utilisateur s’attend à appuyer sur un élément pour appeler une action.

    Exemple de bibliothèque de contenu

     

  • Données Maître/Détails

    Lorsque vous utilisez un modèle Maître/Détails, vous pouvez utiliser l’affichage Liste pour organiser le volet principal. Ce dernier affiche une liste d’éléments sélectionnables. Lorsque l’utilisateur sélectionne un élément dans le volet maître, des informations supplémentaires concernant l’élément sélectionné apparaissent dans le volet de détails. Le volet Détails contient souvent un affichage en mode Grille.

    Exemple de modèle Maître/Détails

     

    Vous pouvez relier plusieurs listes pour créer des hiérarchies Maître/Détails complexes. Pour plus d’informations, consultez le modèle Maître/Détails.

  • Données statiques

    Les données statiques sont uniquement utilisées pour la présentation de contenus non interactifs, puisque la plupart des types d’interactivité y sont désactivés. Ces données sont particulièrement indiquées pour les collections d’éléments en lecture seule, qui ne peuvent pas être activées ou parcourues.

Mode Sélection

Ce mode permet aux utilisateurs de sélectionner des éléments et d’effectuer des actions. Il peut être appelé par le biais d’un menu contextuel, à l’aide de la combinaison CTRL + clic ou MAJ + clic sur un élément, ou par la substitution d’une cible sur un élément dans un affichage Galerie.

Il existe trois différents modes de sélection :

  • Unique : l’utilisateur ne peut sélectionner qu’un élément à la fois.
  • Multiple : l’utilisateur peut sélectionner plusieurs éléments sans utiliser de modificateur.
  • Étendu : l’utilisateur peut sélectionner plusieurs éléments avec un modificateur, par exemple en appuyant longuement sur la touche MAJ.

Lorsque le mode Sélection est actif, des cases à cocher s’affichent en regard de chaque élément de la liste, et des actions peuvent apparaître en haut ou en bas de l’écran.

L’appui sur une zone quelconque d’un élément entraîne la sélection de ce dernier. L’appui sur une action de la barre de commandes affecte tous les éléments sélectionnés. Si aucun élément n’est sélectionné, toutes les actions de la barre de commandes doivent être inactives, à l’exception de l’action Sélectionner tout.

Le mode Sélection ne comporte pas de modèle d’abandon interactif ; l’appui sur une zone à l’extérieur du cadre dans lequel le mode Sélection est actif ne permet pas d’annuler ce mode. Ceci empêche toute désactivation accidentelle du mode. En cliquant sur le bouton Précédent, vous fermez le mode de sélection multiple.

La sélection d’une action doit être signalée par une confirmation visuelle. Le cas échéant, affichez des animations. Pensez à afficher une boîte de dialogue de confirmation pour certaines actions, notamment pour les opérations destructrices, comme la suppression.

Le mode Sélection est limité à la page dans laquelle il est actif et ne peut pas affecter les éléments situés à l’extérieur de cette page.

Le point d’entrée du mode Sélection doit être juxtaposé au contenu concerné.

Pour des recommandations relatives à la barre de commandes, voir Recommandations en matière de barres de commandes.

Mode de sélection multiple

Le mode Édition permet de manipuler des lignes. Ce mode peut être appelé par le biais du bouton du mode Édition dans la barre de commandes ou via un menu contextuel.

Un point d’entrée pour le mode de sélection multiple doit être placé dans la liste qu’il modifie.

En cliquant sur le bouton Précédent, vous fermez le mode de sélection multiple. Le passage en mode Édition supprime toutes les barres de commandes. Si d’autres cadres sont visibles lorsque le mode Sélection est activé, ces cadres sont estompés.

Le mode Édition ne comporte pas de modèle d’abandon interactif ; l’appui sur une zone à l’extérieur du cadre dans lequel le mode Édition est actif ne permet pas d’annuler ce mode. Ceci empêche toute désactivation accidentelle du mode.

Le mode Édition est limité à la page dans laquelle il est actif et ne peut pas affecter les éléments situés à l’extérieur de cette page.

Recommandations

  • Les éléments figurant dans le même affichage Liste ou Grille doivent avoir le même comportement.
  • Si votre liste est répartie en groupes, utilisez le zoom sémantique, ce qui permet aux utilisateurs de naviguer plus facilement dans le contenu regroupé.

Rubriques associées

Hub
Maître/détails
Volet de navigation
Zoom sémantique

 

 

Afficher:
© 2017 Microsoft