Passer au contenu principal

Fiches

Fiches dans Storybook

Utilisation​

Présentation​

Une fiche est un élément d'interface utilisateur regroupant les informations associées dans un conteneur. Les fiches comprennent des blocs de contenu qui, ensemble, font référence à un sujet, une rubrique ou une destination unique. Ces objets de contenu interactifs et indépendants sont disposés sur une page d'application. Les conceptions reposant sur des fiches, simples, intuitives et esthétiques, sont particulièrement adaptées aux applications Web. Les fiches sont conçues pour répondre à des besoins spécifiques en matière de contenu. Leur disposition varie en fonction du contenu. De ce fait, une structure reposant sur des fiches est un puissant outil de conception réactive.

Quand l'utiliser​

  • Pour regrouper plusieurs informations connexes en unités condensées.
  • Pour rendre les informations facilement analysables et exploitables.
  • Pour accéder à des informations supplémentaires.

Quand ne pas l'utiliser​

  • Lorsque des informations non connexes ne bénéficient pas d’un regroupement.
  • Lorsque les informations sont trop complexes pour être décomposées dans un format de fiche.
  • Lorsque la cohérence d'un contenu ou d'une mise en page ne peut pas être assurée au sein d'une série.

Formatage​

Structure​

formatage des fiches

Structures à grilles et points d'arrêt pour les applications de conception Web réactive​

Les fiches sont des rectangles aux angles arrondis, à ombre portée. Leur apparence est variable et dépend du contenu. Les fiches peuvent inclure différents éléments, notamment des supports, du texte d'accompagnement et des actions. Le conteneur de fiche est le seul élément requis. Les éléments de fiche, comme le texte et les images, sont organisés de manière hiérarchique pour faciliter les recherches.

Les fiches comprennent les éléments suivants :

Principes de base des fiches​

  1. Conteneur de fiche : le conteneur de fiche contient tous les éléments d'une fiche. La taille des conteneurs de fiche dépend de leur contenu. Les fiches de base sont blanches avec une ombre portée et un trait clair et reposent sur un fond légèrement teinté.
  2. Support : les images sont disposées dans la partie supérieure de la fiche et peuvent s'étaler sur toute sa largeur.
  3. Texte d'en-tête : le style du texte d'en-tête est conforme aux règles typographiques de Jutro.
  4. Texte de corps : le style du texte de corps est conforme aux règles typographiques de Jutro. Le corps du texte comporte notamment des données synthétiques et des descriptions.
  5. Icônes et étiquettes : les icônes et les étiquettes sont placées en bas des fiches et sont mises en forme selon les règles iconographiques de Jutro. Les icônes peuvent être utilisées pour des actions supplémentaires.
  6. Boutons : les fiches peuvent inclure des interactions, comme des boutons.

Structures à grilles et points d'arrêt pour les applications de conception Web réactive​

  1. Structure large (ordinateur de bureau)
  2. Structure moyenne (ordinateur de bureau)
  3. Structure mobile (colonne unique)

Meilleures pratiques​

Important: Les fiches doivent être détachées pour pouvoir y placer du contenu. Les composants ou les styles qu'elles contiennent continueront à bénéficier de mises à jour.
  • Les fiches doivent ressembler à des fiches physiques et avoir un aspect réel (pour les écrans tactiles, des interactions tactiles peuvent être ajoutées).
  • Utilisez les ombres de manière dynamique (à différentes profondeurs) pour faciliter l’interaction avec les fiches. Par exemple, vous pouvez reproduire le fait de récupérer et de déplacer une fiche en créant l’illusion qu'elle se soulève légèrement. Pour ce faire, utilisez une ombre extérieure plus intense pendant l'interaction.
  • La hiérarchie des éléments des fiches doit être bien conçue et cohérente dans une série de fiches.
  • Les gestes possibles doivent être intégrés avec cohérence dans une série de fiches. Le glissement, la sélection et le déplacement, et le défilement font partie des gestes fréquemment utilisés sur les fiches.
  • Les fiches doivent contenir un nombre limité d'actions et utiliser des liens pour attirer les utilisateurs vers des zones avancées de l'expérience de contenu.
  • Les fiches sont coplanaires et plusieurs fiches sur une page doivent être regroupées pour constituer une série.
  • Veillez à ce que le format des fiches soit facile à utiliser. Les fiches doivent pouvoir être parcourues rapidement et disposées selon des modèles cohérents.
  • Disposez les fiches sous la forme d'un tableau de bord pour les sujets sans lien mais devant toutefois être regroupés sous une même section.

Contenu​

Directives générales relatives à la rédaction​

  • Mettez une majuscule en début de phrase pour tous les aspects relatifs à la conception des interfaces de produit Guidewire. Ne mettez pas la 1re lettre du 1er mot du titre en majuscule.
  • Utilisez des verbes au présent et la forme active dans la plupart des cas.
  • Utilisez des contractions courantes pour donner à votre texte un ton plus naturel et informel.
  • Utilisez un langage simple. Évitez tout jargon inutile et les formulations complexes.
  • Utilisez des termes et des phrases concis.

Instructions de rédaction propres aux fiches​

  • Soyez sélectif lorsque vous déterminez le contenu à présenter dans les fiches. Elles sont conçues pour servir de point d'accès à des informations plus détaillées. Tout contenu inutile peut surcharger les fiches et perturber les utilisateurs.
  • Organisez le contenu de façon hiérarchique dans les fiches pour en faciliter la visualisation.
  • Utilisez différents degrés de mise en évidence du contenu afin d'en indiquer la position dans la hiérarchie.
  • Si une fiche comporte plus de deux actions supplémentaires, utilisez un menu de dépassement.
  • Limitez le nombre d'actions sur une fiche uniquement aux éléments essentiels.
  • Dans les fiches, commencez les phrases, les en-têtes et les titres par une majuscule. Mettez une majuscule à la première lettre des noms propres.

Réactivité​

Les structures à grilles et points d'arrêt pour les applications de conception Web réactive comprennent les éléments suivants :

  1. Structure large : la structure large est la plus grande largeur de page autorisée. Elle peut accueillir entre 3 et 4 fiches à l'horizontale.
  2. Structure moyenne : la structure moyenne est adaptée aux petits écrans, à l'utilisation de plusieurs navigateurs et aux navigateurs de tablette. Elle peut accueillir 3 fiches à l'horizontale.
  3. Structure mobile : la structure mobile utilise une colonne unique pour compenser la réduction drastique de la taille réelle de l'écran lors du passage d'un ordinateur de bureau à une tablette.

Interactions​

Clavier​

Le contenu disponible dans le composant de fiche (c'est-à-dire l'info-bulle) est accessible et actionnable par l'intermédiaire du clavier.

La fiche cliquable est également accessible par clavier et actionnable via la barre d'espace et la touche Entrée.

Lecteur d'écran​

Par défaut, le champ d'en-tête de la fiche implémente le contenu <h2>, qui est de ce fait accessible à partir du raccourci vers les en-têtes du lecteur d'écran. L'infobulle inclut un attribut aria-label en permettant l'affichage. Elle utilise aria-live='polite', qui permet au lecteur d'écran d'en énoncer automatiquement le contenu.

La fiche cliquable utilise l'élément <button> HTML5. De ce fait, le texte entre les balises devient le nom accessible de la fiche.

Accessibilité​

Ce composant a été validé pour répondre aux directives d’accessibilité WCAG 2.2 AA dans sa configuration de base par défaut. Il s’agit notamment de s’assurer que :

  • Le rapport de contraste des éléments textuels par rapport à leur arrière-plan est supérieur à 4.5:1.
  • Le contenu non textuel qui doit transmettre le sens (comme les icônes et les indicateurs de focus) a un rapport de contraste d’au moins 3:1 avec ses couleurs adjacentes.
  • Cet élément peut être utilisé à l’aide d’un clavier et d’une souris.
  • Le contenu est accessible à l’aide de lecteurs d’écran, tels que JAWS et VoiceOver.

La conformité de l’accessibilité dépend en définitive de la façon dont ce composant est implémenté et personnalisé. Les modifications apportées par l’auteur du contenu peuvent affecter l’accessibilité. Pour en savoir plus sur notre modèle de responsabilité partagée, consultez notre Déclaration d’accessibilité Jutro complète.

Lors de l'ajout de contenu à la fiche, veillez à suivre les directives d'accessibilité, notamment, par exemple, les exigences relatives au contraste des couleurs, et l'utilisation d'en-têtes appropriés, si nécessaire, et de texte alternatif sur les images à caractère informatif.