Système de Propriétés et d'Attributs

Que fait Système de Propriétés et d'Attributs ?

Objectif

Le système de propriétés et d'attributs fournit une méthodologie pour concevoir et structurer des paires de métadonnées "Clé : Valeur" pour une entité unique (par exemple, spécifications produit, caractéristiques immobilières, détails utilisateur). Alors que data-table-ui-system gère les comparaisons multi-éléments, ce système se concentre sur la hiérarchie interne et l'organisation spatiale des attributs appartenant à un seul objet. Il garantit que les métadonnées critiques sont scannables, visuellement distinctes du texte narratif et conservent une intégrité structurelle sur différentes largeurs de fenêtre.

Cas d'Utilisation

• Spécifications Produit : Affichage des dimensions, matériaux et détails techniques sur une page détaillée du produit (PDP).
• Annonces Immobilières : Organisation des caractéristiques d'un bien (Chambres, Salles de bain, Surface, Année de construction).
• Profils Utilisateur : Affichage des métadonnées du compte (Date d'inscription, Rôle, Statut d'abonnement).
• Journaux de Transactions / Audit : Affichage des attributs spécifiques d'un événement ou d'une commande.
• En-têtes de Projet : Résumé des métadonnées du projet dans un en-tête ou une barre latérale.

Quand NE PAS Utiliser

• Comparaisons Multi-éléments : lorsque les utilisateurs doivent comparer des attributs sur plusieurs lignes ; utilisez data-table-ui-system.
• Contenu Narratif : pour des descriptions longues ou des histoires ; utilisez article-layout-system.
• Navigation Globale : pour la structure du site ; utilisez site-navigation-system.
• Formulaires Interactifs : lorsque l'objectif principal est la saisie de données ; utilisez form-design-system.

Entrées

1. Inventaire des Attributs : La liste des clés (étiquettes) et des valeurs (données) à afficher.
2. Matrice des Types de Données : Identifier si les valeurs sont des Chaînes, Nombres, Booléens, Icônes ou Liens.
3. Classement par Priorité : Quels attributs sont "Primaires" (haute visibilité) vs "Secondaires" (détaillés/cachés).
4. Contexte de Mise en Page : Cela se trouvera-t-il dans une barre latérale, une colonne de contenu principale ou une modale ?

Sorties

1. Spécification de l'Anatomie de la Liste : Définition de la relation entre l'Étiquette (Clé) et la Valeur (Taille, Poids, Couleur).
2. Matrice d'Alignement : Règles d'empilement horizontal vs vertical en fonction de la largeur du conteneur.
3. Stratégie de Regroupement : Méthodologie pour catégoriser les grands ensembles d'attributs en sous-sections.
4. Blueprint Sémantique : Mappage des attributs à la structure HTML de liste de description (<dl>).

Flux de Travail

1. Catégoriser et Regrouper les Attributs

Pour les entités avec plus de 5 à 7 attributs, regroupez-les en catégories logiques (par exemple, "Dimensions", "Performances", "Conformité"). Cela réduit la charge cognitive et permet aux utilisateurs d'accéder rapidement aux détails pertinents.

2. Choisir le Motif de Mise en Page

Sélectionnez un motif en fonction de l'espace horizontal disponible et de la densité des attributs :

• Horizontal (Côte à côte) : Étiquette à gauche, Valeur à droite. Idéal pour les conteneurs larges et les étiquettes courtes.
• Vertical (Empilé) : Étiquette en haut, Valeur en bas. Idéal pour les conteneurs étroits (barres latérales, mobile) et les valeurs longues.
• Grille (Multi-colonnes) : Attributs disposés en grille de 2 ou 3 colonnes. Idéal pour les statistiques d'"aperçu rapide" de haute densité.

3. Établir une Hiérarchie Visuelle

Distinguez la "Clé" de la "Valeur" :

• L'Étiquette (Clé) : Utilisez une couleur atténuée, une taille de police plus petite ou un style en majuscules pour indiquer qu'il s'agit d'un descripteur.
• La Valeur (Données) : Utilisez une couleur plus contrastée, une graisse plus épaisse ou une taille plus grande pour garantir que les données réelles sont le principal point focal.
• Séparation : Utilisez des séparateurs subtils ou un rythme vertical cohérent (--space-s à --space-m) pour séparer les paires.

4. Définir l'Alignement et la Scannabilité

• Alignement Horizontal : Pour les dispositions côte à côte, alignez les étiquettes à gauche. Si les étiquettes varient considérablement en longueur, envisagez une colonne d'étiquettes à largeur fixe pour créer un "axe" vertical propre pour les valeurs.
• Justification : Évitez la "Justification Extrême" (Étiquette à l'extrême gauche, Valeur à l'extrême droite) dans les conteneurs larges, car cela oblige l'œil à parcourir une trop grande distance. Gardez-les étroitement appariées.

5. Planifier les Transformations Responsives

Les listes d'attributs sont les "métamorphes" de l'interface utilisateur :

• Le Changement d'Empilement : Transition de l'horizontal (Bureau) au vertical (Mobile) pour éviter le chevauchement de texte ou le wrapping extrême.
• L'Effondrement de la Grille : Les grilles multi-colonnes doivent se réduire à 1 ou 2 colonnes sur les écrans plus petits.

Règles de Décision

• La Règle de l'"Axe" : Dans une liste horizontale, les valeurs doivent partager une ligne d'alignement vertical (axe) pour permettre à l'œil de scanner les données sans sauter.
• Valeurs Vides : Ne laissez jamais une valeur vide. Utilisez "—" ou "Aucun" pour confirmer que l'attribut est intentionnellement vide, et non une erreur système.
• Utilisation d'Icônes : N'utilisez des icônes que si elles fournissent une différenciation sémantique immédiate (par exemple, une icône "Règle" pour les dimensions). Évitez les icônes si elles ajoutent du bruit visuel sans clarté.
• Logique de Densité : Utilisez la densité "Standard" (espacement de 16px) pour les profils généraux et la densité "Compacte" (espacement de 8px) pour les spécifications techniques et les tableaux de bord.

Contraintes

• Accessibilité : Utilisez l'élément HTML <dl> (Liste de Description) pour la correction sémantique (<dt> pour les étiquettes, <dd> pour les valeurs). Cela garantit que les lecteurs d'écran communiquent la relation entre les paires.
• Contraste : Les étiquettes et les valeurs doivent respecter les ratios de contraste WCAG AA (4,5:1). Même si l'étiquette est "atténuée", elle doit rester lisible.
• Réactivité : Les listes ne doivent jamais déborder de la fenêtre. Le retour à la ligne du texte doit être géré avec élégance sans briser l'"axe" de la liste.

Schémas d'Échec Courants

• Le "Flou Valeur/Étiquette" : Rendre l'étiquette et la valeur identiques en poids et en couleur, rendant impossible le balayage de la liste.
• Justification Extrême : Pousser les valeurs vers le bord droit d'un écran large, les séparant de leurs étiquettes.
• Abus de Tableau : Utiliser une <table> pour une liste d'attributs d'un seul objet, ce qui ajoute une surcharge de balisage inutile et est plus difficile à styliser de manière adaptative.
• Alignement Incohérent : Mélanger l'empilement horizontal et vertical dans la même liste sans une rupture logique claire.
• États Vides Manquants : Laisser une propriété vide, ce qui laisse l'utilisateur se demander si les données sont en cours de chargement ou simplement absentes.

Critères de Validation

• Les étiquettes et les valeurs sont visuellement distinctes par le poids, la taille ou la couleur.
• Les attributs sont marqués sémantiquement à l'aide de <dl>, <dt> et <dd>.
• Les listes passent de l'empilement horizontal à vertical sur les fenêtres mobiles.
• Les grands ensembles d'attributs sont regroupés en sous-catégories logiques.
• L'alignement crée un "axe" vertical clair pour les valeurs de données.
• Les états vides (par exemple, "—") sont définis pour les propriétés manquantes.
• Les ratios de contraste pour tout le texte respectent les normes WCAG AA.