Système de Cartes UI (coastdigitalgroup/coastai-skills)

Système de Cartes UI

Objectif

Le système de cartes UI fournit une méthodologie pour concevoir et structurer les cartes—les blocs de construction modulaires utilisés pour regrouper des informations et des actions connexes. Les cartes sont les blocs fondamentaux des interfaces axées sur la découverte, permettant aux utilisateurs de parcourir et de comparer plusieurs éléments distincts (produits, articles, profils) au sein d'une grille ou d'une liste unifiée. Une approche systématique des cartes garantit que le contenu est scannable, visuellement cohérent et s'adapte gracieusement à différents contextes de mise en page (grilles, carrousels, piles) tout en maintenant l'accessibilité et une intention claire.

Cas d'Usage

• Conception de grilles de produits pour les pages de listage e-commerce (PLPs).
• Création d'aperçus d'articles ou de billets de blog pour des hubs de contenu.
• Création de sections "Fonctionnalités" ou "Services" sur une page d'atterrissage.
• Organisation de widgets de tableau de bord, de points forts de fonctionnalités ou de résumés de données.
• Implémentation de sections "Contenu connexe" en bas des pages.
• Définition d'un composant "Résultat" pour les vues de recherche ou de filtre.

Quand NE PAS Utiliser

• Tableaux de Données Denses : Lorsque les utilisateurs doivent comparer des attributs spécifiques sur de nombreuses lignes de données granulaires simultanément ; utilisez responsive-data-tables à la place (bien que les cartes puissent être un repli responsif).
• Contenu Narratif Unique / Flux de Texte Simples : Lorsque le contenu suit une histoire linéaire stricte ou des paragraphes standard où un wrapper de carte ajouterait du bruit visuel inutile ou interférerait avec le rythme de lecture.
• UI Minimaliste Uniquement Axée sur l'Action : Comme une barre de recherche à champ unique ou un formulaire de connexion simple où un wrapper de carte ajouterait du bruit visuel inutile.

Entrées

1. Anatomie du Contenu : Une liste des éléments requis (par ex., Image, Titre, Catégorie, Prix, Description, CTA).
2. Intention d'Interaction : La carte entière est-elle cliquable, ou y a-t-il des cibles d'action spécifiques ?
3. Contexte Parent : Où la carte vivra-t-elle ? (par ex., grille à 3 colonnes, barre latérale, défileur horizontal ?)
4. Variance du Contenu : Quelle est la quantité minimale et maximale de texte attendue pour les titres et les descriptions ?
5. Systèmes Existants : Espacement fluide, échelles typographiques et palettes de couleurs du système de conception parent.

Sorties

1. Spécification d'Anatomie de la Carte : Régions définies (En-tête, Média, Corps, Pied de page) et leur espacement interne.
2. Plan de la Carte : Une définition structurelle de la mise en page interne et des couches de la carte.
3. Variantes Responsives : Règles pour la façon dont la carte s'adapte (par ex., passer de vertical à horizontal sur mobile).
4. Spécification d'Interaction : États définis (Survol, Focus, Actif) et définitions des zones cliquables.
5. Carte d'Accessibilité : Conseils sur la hiérarchie des titres et les modèles d'interaction au clavier.

Flux de Travail

1. Appliquer la "Règle des Trois Points" et Définir l'Anatomie

Chaque carte doit avoir trois points clairs de hiérarchie pour garantir la scannabilité :

1. L'Ancre (Visuelle) : Une image ou une icône de haute qualité qui fournit une reconnaissance immédiate. Définissez le ratio d'aspect pour les images (par ex., 16:9, 1:1).
2. Le Contexte (Contenu) : Le titre et les métadonnées principales (par ex., Prix, Date, Catégorie).
3. La Cible (Action) : Une action principale claire (par ex., "Ajouter au Panier", "Lire la Suite").

Cartographiez la hiérarchie interne complète : En-tête (méta-informations comme les tags/dates), Zone Média, Contenu/Corps (titre + description), et Pied de page/Actions (CTAs, prix, preuve sociale).

2. Établir l'Espacement Interne et la Grille Interne

Appliquez le fluid-spacing-system à l'intérieur de la carte :

• Rembourrage : L'espace entre le bord de la carte et son contenu (généralement --space-m).
• Écarts d'Empilement : L'espace vertical entre les éléments internes (généralement --space-xs ou --space-s).

Déterminez comment le contenu est distribué dans la carte :

• De Haut en Bas (Standard) : Image en haut, contenu au milieu, action en bas.
• Côte à Côte (Horizontal) : Image à gauche, contenu et action à droite (meilleur pour les listes mobiles ou les barres latérales).
• Superposition : Le contenu se trouve au-dessus de l'image (nécessite des traitements à contraste élevé pour la lisibilité).

3. Concevoir la Hiérarchie Visuelle et Gérer la Variance du Contenu

Appliquez les leviers du visual-hierarchy-system pour distinguer le contenu :

• Poids : Rendre le Titre en gras et plus grand que la description.
• Contraste : Utilisez une couleur atténuée pour le méta-texte (par ex., "Publié le 24 Oct.").
• Élévation : Utilisez des bordures ou des ombres de boîte subtiles pour séparer la carte de l'arrière-plan.

Concevez pour le scénario de contenu "le pire cas" :

• Troncature vs. Enveloppement : Décidez si les longs titres doivent être tronqués avec des points de suspension ou s'enrouler sur plusieurs lignes.
• Alignement : Utilisez Flexbox margin-top: auto sur le conteneur d'action pour garantir que les boutons s'alignent parfaitement sur les cartes de différentes hauteurs dans une grille.

4. Établir les Modèles d'Interaction

Choisissez un modèle fonctionnel pour l'interaction :

• La Grande Boîte : La carte entière est un lien (nécessite une gestion d'accessibilité minutieuse pour les lecteurs d'écran).
• L'Action Imbriquée : Seuls des boutons spécifiques ou le titre sont cliquables.
• L'Hybride : La surface de la carte a un effet de survol, mais des actions spécifiques effectuent différentes tâches (par ex., "Ajouter au Panier" vs. "Voir les Détails").

Utilisez des transformations subtiles au survol (par ex., léger soulèvement, changement de couleur de bordure) pour indiquer l'interactivité.

5. Définir les Adaptations Responsives et Vérifier l'Accessibilité

Planifiez comment la carte survit à différentes fenêtres :

• Vertical à Horizontal : Pour mobile, une carte peut passer d'une mise en page avec image en haut à une mise en page avec image à gauche pour économiser de l'espace vertical.

Vérifiez l'accessibilité avant la validation :

• Niveaux de Titre : Assurez-vous que les titres des cartes utilisent des niveaux de titre appropriés (généralement H3 ou H4) pour maintenir le plan du document de la page.
• Cibles Tactiles : Tout élément interactif dans la carte doit respecter WCAG 2.2 SC 2.5.8 (minimum 24x24px, avec un espacement adéquat si des cibles plus petites sont inévitables) ; préférez 44x44px là où l'espace le permet.
• Texte Alternatif : Chaque image d'ancrage doit avoir un texte alternatif descriptif ou être marquée comme décorative.
• Navigation au Clavier : Chaque élément interactif à l'intérieur d'une carte doit être accessible via Tab et avoir un indicateur de focus qui n'est pas coupé ou caché par des cartes sœurs ou des en-têtes collants (WCAG 2.2 SC 2.4.11, Focus Non Obscurci).

Règles de Décision

• La Règle des "Trois Points" : Une carte doit rarement avoir plus de 3 priorités distinctes (par ex., 1. Image, 2. Titre, 3. Prix). Trop de détails en fait une "mini-page", pas une carte.
• La Règle du Ratio d'Aspect : Utilisez des ratios d'aspect cohérents pour les images (par ex., 4:3, 16:9, ou 1:1) pour éviter les mises en page "sautantes" dans une grille.
• Score de Proximité : L'écart entre le Titre et la Description doit être plus petit que l'écart entre la Description et le CTA.
• La Règle du "Pas d'Orphelin" : Si une carte fait partie d'une grille, la grille doit gérer gracieusement l'espace restant (par ex., grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))).
• Hauteurs Égales : Dans une grille, les cartes d'une même ligne doivent idéalement être de la même hauteur (en utilisant Flexbox align-items: stretch).
• Actions Primaires vs. Secondaires : Une seule action doit être visuellement dominante (CTA Primaire). Les autres actions (par ex., "Sauvegarder dans la Liste de Souhaits") doivent être des icônes ou des liens à faible contraste.
• Affordance Interactive : Si une carte est cliquable, elle doit avoir un état de survol visible.

Contraintes

• Réactivité : Les cartes ne doivent jamais dépasser la largeur de la fenêtre ou avoir une largeur fixe ; elles doivent s'étendre sur des colonnes dans un responsive-grid-system et s'empiler verticalement ou passer à une disposition horizontale sur les petits écrans.
• Accessibilité : Doit supporter la navigation au clavier (Tab à travers les éléments interactifs) et maintenir un ratio de contraste minimum de 4.5:1 pour le texte. Si la carte entière est cliquable, utilisez le modèle de "lien étiré" pour éviter les liens redondants pour les lecteurs d'écran.
• Performance : Évitez les images excessivement grandes ; utilisez srcset pour servir des ressources de taille appropriée pour le conteneur de la carte.
• Mise en Page : Préférez CSS Grid avec auto-fill/auto-fit et des écarts basés sur clamp() plutôt que des points de rupture fixes afin que les cartes se réorganisent naturellement ; utilisez des requêtes de conteneur (@container) lorsque la mise en page interne d'une carte doit s'adapter à sa propre largeur plutôt qu'à la fenêtre (par ex., la même carte dans une grille pleine largeur et une barre latérale étroite).

Modèles d'Échec Courants

• L'Effet "Escalier / Boutons Décalés" : Boutons situés à des hauteurs différentes en raison de longueurs de titre variables, rendant la grille désordonnée.
• Sur-Décoration : Utiliser trop de bordures, d'ombres et de dégradés, rendant le contenu difficile à lire.
• Faible Densité d'Informations : Rendre les cartes trop grandes avec trop peu de contenu, forçant un défilement inutile.
• Surcharge d'Informations : Essayer de faire tenir trop de détails dans une seule carte, brisant la Règle des Trois Points et déroutant l'utilisateur.
• Cibles de Clic Inaccessibles / Invisibles : Petits boutons ou liens difficiles à taper sur les appareils mobiles, ou rendre une carte d'apparence cliquable avec seulement une minuscule icône comme déclencheur réel.
• Manque de Rembourrage : Texte collé contre le bord de la carte ou l'image.

Critères de Validation

• La "Règle des Trois Points" est clairement visible (Ancre, Contexte, Cible).
• L'espacement interne (rembourrage/écarts) utilise des jetons du système d'espacement fluide.
• La typographie suit l'échelle et la hiérarchie établies du site.
• Les actions primaires (boutons) sont alignées en bas de la ligne de grille.
• Les ratios d'aspect des images sont cohérents sur toutes les cartes du système.
• Les états interactifs (Survol/Focus) sont définis et accessibles.
• Les cartes dans une grille s'alignent correctement et gèrent gracieusement les longueurs de contenu variables.
• Les niveaux de titre suivent une hiérarchie logique dans la page.
• Les cibles tactiles respectent WCAG 2.2 SC 2.5.8 (minimum 24x24px).
• Les indicateurs de focus ne sont jamais obscurcis par des cartes, images ou éléments collants qui se chevauchent (WCAG 2.2 SC 2.4.11).