Vue Fiche

Présentation

La vue Fiche est un mécanisme permettant d'afficher et de manipuler des ensembles de données plus petits. Chaque fiche représente un objet avec des détails d'ordre général.

Quand l'utiliser

• L'utilisateur doit se concentrer sur un objet lorsqu'il exécute une tâche.
• L'ordre dans lequel les données sont présentées est sans importance et l'utilisateur n'a pas besoin de contrôler le tri des données.
• Il y a moins de 10 fiches à afficher dans l'interface utilisateur et/ou trop d'espace blanc sur l'interface utilisateur peut gêner les utilisateurs.
• Les données à présenter à l'utilisateur sont très simples et faciles à analyser.
• Le cas d'utilisation ne nécessite pas de comparer des données.

Quand ne pas l'utiliser

• Les utilisateurs sont tenus de comparer les données entre les fiches. Cela ralentit l'utilisateur en augmentant la charge cognitive tout en limitant le nombre d'enregistrements consultables. Utilisez plutôt la vue Table.
• Lorsque des données complexes doivent être présentées à l'utilisateur. Utilisez plutôt la vue Table.

Formatage

Structure

1. Titre (obligatoire) : donne une brève indication de l'objet de la vue Fiche, avec un nombre facultatif indiquant le nombre de fiches dans la vue.
2. Sous-titre (facultatif) : le sous-titre fournit des informations contextuelles supplémentaires si nécessaire.
3. Commandes de la vue Fiche (facultatif) : comprend un ensemble de commandes permettant de manipuler l'affichage des données. Ne confondez pas les commandes de la vue Fiche avec les actions de la vue Fiche.

   1. Filtre de recherche (facultatif) : permet de filtrer l'ensemble de données en recherchant des mots-clés.

   2. Filtre (facultatif) : inclut un ensemble avancé de mécanismes permettant de filtrer l'ensemble de données en fonction de divers paramètres.

   3. Sélecteur de vue (facultatif) : permet de modifier la visualisation des données entre la vue Table et la vue Fiche.

4. Actions de la vue Fiche (facultatif) : permet d'effectuer des actions sur l'ensemble de données, soit sur l'ensemble entier, soit sur des ensembles de données sélectionnés à partir de la vue Fiche.
5. Vue Fiche (obligatoire) : affiche les fiches dans un ordre défini par l'application
6. Fiche individuelle (obligatoire) : affiche les données dans le format défini.

Disposition, dimensionnement et comportement des nouveaux flux

• Les fiches sont configurées et disposées de manière à utiliser au mieux l'espace. La disposition peut être modifiée pour prendre en compte le nombre de fiches disponibles.
• Lorsque vous utilisez des ensembles de données plus petits, envisagez de redimensionner les options pour éviter un espace blanc excessif.
• Prévoyez un espacement approprié entre les fiches pour faciliter l'analyse par les utilisateurs.
• Repositionnez les fiches sur les paramètres de grille sous-jacents lors de l'ajout ou de la suppression de fiches à/de la mise en page.
• Une fois redimensionnée, une largeur de colonne est conservée jusqu'à ce que l'utilisateur la modifie ou la réinitialise sur la valeur par défaut.

Orientation

• L'orientation de la fiche peut être configurée en fonction du cas d'utilisation.
• Pour un texte plus long et plus de trois champs, envisagez d'utiliser une disposition de fiche verticale plutôt qu'horizontale.
• Les mises en page verticales conviennent mieux aux fiches contenant des images ou des icônes.

Détails de la fiche individuelle

1. Icône/Image (facultatif) : donne une indication visuelle des détails de la fiche ou du type de fiche.
2. Titre (obligatoire) : donne une brève indication de l'objet de la fiche.
3. Étiquette d'information (facultatif) : indique le statut d'un objet si disponible.
4. Détails de la fiche (obligatoire) : affiche les données associées à la fiche.
5. Actions de la fiche (facultatif) : permet d'effectuer des actions sur l'objet Fiche.
   • Action principale (facultatif) : utilisez un bouton d'action principale pour l'action principale sur l'objet. Une fiche ne peut avoir qu'une seule action principale.
   • Action secondaire (facultatif) : à utiliser pour les actions de support.
   • Action tertiaire (facultatif) : à utiliser pour les actions de suppression ou moins importantes.
   • Menu de dépassement (facultatif) : permet d'afficher davantage d'actions associées aux données d'objet.

Toutes les fiches de la vue Fiche doivent contenir les mêmes types de données. N'introduisez pas de détails dans une fiche que les autres fiches n'ont pas.

Chaque détail doit être associé à une étiquette, sauf s'il est immédiatement apparent pour l'utilisateur.

Utilisez les icônes uniquement pour fournir un contexte supplémentaire aux données. Utilisez uniquement des icônes communes et facilement reconnaissables pour les icônes qui n'ont pas de texte d'accompagnement.

Tout le contenu d'une cellule doit être visible. Le texte plus long est renvoyé à la ligne suivante avec une option permettant d'en afficher davantage dans une vue de détails (tiroir d'applications, nouvelle page, fenêtre modale). Ne tronquez pas le texte sur les fiches.

Fonctionnalités de la vue Fiche

É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'actions peuvent être utilisés pour déclencher le rechargement d'une page si nécessaire.

Exemple d'état vide d'une vue Fiche

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

Réactivité

La vue Fiche est entièrement réactive pour les tablettes et les appareils mobiles, où les cellules peuvent être supprimées, réorganisées ou combinées d'une manière utile aux utilisateurs.

De gauche à droite : vue Fiche sur les ordinateurs de bureau, les tablettes et les appareils mobiles.

Filtres de la vue Fiche

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

Sélection de fiche

Dans la vue Fiche, la sélection unique ou la sélection multiple de fiches 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)