Vue Liste

Présentation

Les vues Liste permettent d'afficher rapidement de grands ensembles de données. Les vues Liste existent conjointement avec une vue de table et affichent des données structurées. Les vues Liste peuvent également exister en tant qu'élément d'interface utilisateur qui n'affiche qu'une liste d'éléments. Un élément de liste est léger et ne contient généralement qu'une seule ligne de détail, ainsi que des actions intégrées.

Quand l'utiliser

• Pour afficher des données générées par le système telles qu'une liste d'activités récentes, l'historique des révisions, des contacts ou des enregistrements récemment ajoutés.
• Pour afficher des éléments légers tels que des notes ou une liste de documents.
• Si le cas d'utilisation principal est l'affichage de données.

Quand ne pas l'utiliser

• Si le cas d'utilisation principal est la comparaison de données. Utilisez plutôt la vue Table.
• Si vous avez des données complexes à afficher. Utilisez plutôt la vue Table.
• Si vous souhaitez attirer l'attention de l'utilisateur sur un seul objet. Utilisez plutôt la vue Fiche.

Formatage

Structure

1. Titre (obligatoire) : donne une brève indication de l'objet de la vue Liste, avec un nombre facultatif indiquant le nombre d'éléments de liste dans la vue.
2. Filtre de recherche (facultatif) : permet de filtrer l'ensemble de données en recherchant des mots-clés.
3. Sous-titre (facultatif) : le sous-titre fournit des informations contextuelles supplémentaires si nécessaire.
4. Actions de la vue Liste (facultatif) : permet d'effectuer des actions sur les données, soit sur l'ensemble entier, soit sur des ensembles de données sélectionnés à partir de la vue Liste.
5. Élément de liste (obligatoire) : élément de la vue Liste qui apparaît dans la vue au format défini.
6. Commande de pagination (facultatif) : permet d'afficher davantage d'éléments de liste selon les besoins de l'utilisateur.

Détails des éléments de liste

Chaque élément de liste comprend les éléments suivants :

1. Commande de sélection (facultatif) : permet de sélectionner un ou plusieurs éléments de liste.
2. Zone de détails (obligatoire) : affiche des informations dépendantes de l'application sur l'élément de liste.
3. Actions des éléments de liste (facultatif) : permet d'effectuer des actions sur l'élément de liste.

Tous les éléments de la vue Liste doivent contenir les mêmes types de données. N'introduisez pas de détails dans un élément de liste que les autres éléments de liste n'ont pas.

Utilisez les icônes uniquement pour fournir un contexte supplémentaire aux données et améliorer visuellement le contenu qui les accompagne. L'utilisation des icônes pour tous les éléments de liste doit être cohérente : soit tous les éléments de liste sont associés à des icônes, soit aucun d'entre eux n'est associé.

Les actions des éléments de liste peuvent prendre la forme de boutons d'action ou de boutons avec icône.

Disposition, dimensionnement et comportement des nouveaux flux

• La vue Liste et les éléments de liste qui l'accompagnent occupent toujours toute la largeur du conteneur.
• Tout le contenu d'un élément de liste doit être visible. Le texte plus long sur un élément de liste est renvoyé à la ligne suivante avec une option permettant d'en afficher davantage dans une vue de détails (tiroir d'applications, nouvelle page, modal). Ne tronquez pas le texte sur les éléments de liste.

Fonctionnalités de la vue Liste

État vide et état de chargement

• Lorsqu'il n'y a pas de données à afficher ou lorsque les conditions empêchent l'affichage des données, utilisez l'état vide pour informer les utilisateurs. Le message doit clairement indiquer le problème et les moyens de le résoudre.
• Lorsque des données sont extraites, utilisez l'état de chargement pour informer les utilisateurs. Le message doit clairement indiquer que les données sont en cours de chargement et expliquer pourquoi l'utilisateur attend.
• Les boutons d'action peuvent être utilisés pour déclencher le rechargement d'une page si nécessaire.

Exemple d'état vide d'une vue Liste

Exemple d'état de chargement d'une vue Liste

Réactivité

Les vues Liste sont entièrement réactives et s'adaptent à la taille de leur conteneur à différents formats.

De gauche à droite : vue Liste sur ordinateur de bureau, tablette et appareil mobile.

Filtres de la vue Liste

Les filtres permettent de manipuler des ensembles de données spécifiques. Le filtrage peut être effectué à partir du filtre de recherche, dans lequel les utilisateurs peuvent affiner l'ensemble de données en saisissant un mot-clé.

Sélection d'éléments de liste

Dans la vue Liste, la sélection unique ou la sélection multiple d'éléments de liste peut être activée en fonction du cas d'utilisation.

Ressources

Téléchargez un fichier ZIP contenant tous les derniers modèles Jutro et commencez à concevoir des expériences.

Bibliothèque de modèles Jutro (19.6 MB)