Système de Métriques et Statistiques

Que fait Système de Métriques et Statistiques ?

Objectif

Le système de métriques et statistiques fournit une méthodologie pour visualiser des données quantitatives de manière instantanément compréhensible et contextuellement pertinente. Il va au-delà du simple « affichage d'un nombre » en établissant des règles pour la hiérarchie numérique, la visualisation des tendances et le coloriage sémantique, garantissant que les utilisateurs puissent saisir la signification d'une valeur (par exemple, « 42 % est-ce bon ou mauvais ? ») sans analyse approfondie.

Cas d'utilisation

• Tableaux de bord SaaS : Affichage des indicateurs clés de performance (KPI) comme le MRR, le Churn ou les Utilisateurs actifs.
• Preuve sociale marketing : Mise en avant de sections « En chiffres » (par exemple, « 10k+ Clients », « 99,9 % de disponibilité »).
• Santé et surveillance : Visualisation des performances système, des taux d'erreur ou de l'utilisation des ressources.
• Analyses personnelles : Affichage de la progression vers des objectifs dans les applications de fitness, de finance ou de productivité.
• Commerce électronique : Affichage du nombre d'avis, des niveaux de stock ou des « articles vendus au cours des dernières 24 heures ».

Quand ne PAS utiliser

• Jeux de données bruts : Si l'utilisateur doit trier, filtrer ou comparer 10+ lignes de données multi-attributs, utilisez data-table-ui-system.
• Relations complexes : Si l'objectif principal est de montrer la relation entre des variables au fil du temps, utilisez une bibliothèque complète de graphiques (non couverte par ce système atomique).
• Contenu narratif : Les nombres intégrés dans des phrases doivent suivre la typographie standard ; ce système est destiné aux métriques « d'affichage ».
• Métadonnées de faible valeur : Les petits compteurs (comme les notifications) doivent utiliser badge-and-tag-system.

Entrées

1. La valeur : Le nombre ou le pourcentage principal à afficher.
2. L'étiquette : Une description claire et concise de ce que représente la valeur.
3. Contexte/Tendance : Données comparatives (par exemple, par rapport au mois dernier, par rapport à l'objectif).
4. Unité/Format : Symboles de devise, pourcentages ou unités (par exemple, « ms », « Go »).
5. Priorité hiérarchique : S'agit-il d'un « KPI principal » ou d'une « statistique secondaire » ?

Sorties

1. Spécification de la carte statistique : La disposition spatiale de la valeur, de l'étiquette et de la tendance dans un conteneur.
2. Échelle typographique : Tailles définies pour les nombres « d'affichage » par rapport aux étiquettes.
3. Logique de tendance : Règles visuelles pour les états Haut, Bas et Neutre (couleur + icônes).
4. Stratégie responsive : Comment les grilles de métriques se réduisent ou se redimensionnent sur mobile.

Workflow

1. Catégoriser le type de métrique

Déterminez la « gravité » visuelle requise :

• Niveau 1 : Métrique Héro. Grande, centrée, souvent sans bordure. Utilisée pour la preuve sociale de haut niveau sur les pages d'atterrissage.
• Niveau 2 : Carte KPI. Contenue dans une carte, souvent dans une grille. Utilisée pour les résumés de tableau de bord.
• Niveau 3 : Statistique en ligne. Petite, haute densité d'affichage. Utilisée dans les en-têtes ou les barres latérales.

2. Établir la hiérarchie numérique

Appliquez les règles de « typographie d'affichage » :

• La valeur : Doit être l'élément le plus grand (généralement 200–400 % de la taille du corps).
• L'étiquette : Placée directement au-dessus ou en dessous de la valeur. Utilisez une couleur atténuée ou un poids plus petit pour éviter la compétition.
• L'unité : Les symboles (%, $) doivent être légèrement plus petits que le nombre pour ne pas « casser » la focalisation de l'œil sur la valeur.

3. Fournir un contexte de tendance et de comparaison

Un nombre sans contexte est souvent dénué de sens. Ajoutez une « couche de comparaison » :

• Indicateur de tendance : Utilisez une flèche (↑/↓) associée à un pourcentage ou à un changement de valeur.
• Étiquette de période : Spécifiez toujours la période de comparaison (par exemple, « vs les 30 derniers jours »).
• Coloriage sémantique : Appliquez la couleur à la tendance, pas nécessairement à la valeur.
  • Tendance positive : Vert (généralement).
  • Tendance négative : Rouge (généralement).
  • Neutre : Gris.

4. Appliquer le rythme spatial (la grille)

Les métriques sont rarement affichées isolément. Regroupez-les en utilisant responsive-grid-system :

• Disposition en grille : 3 ou 4 colonnes sur desktop ; 1 ou 2 sur mobile.
• Remplissage interne : Assurez un espace blanc généreux (--space-l ou --space-xl) autour de la valeur pour la faire « ressortir ».

5. Concevoir pour les états de chargement et vides

• Squelette : Utilisez skeleton-state-system pour la valeur et la tendance pendant le chargement des données.
• États zéro : Si une métrique est à 0, décidez si elle doit être affichée comme « 0 » ou un tiret (—).

Règles de décision

• La règle du « bon/mauvais » : N'utilisez jamais le Vert/Rouge pour les tendances si la métrique n'est pas intrinsèquement positive/négative (par exemple, la « Température » ne devrait pas être verte simplement parce qu'elle a augmenté). Utilisez le Neutre (Gris/Bleu) pour les changements non valorisés.
• Logique d'arrondi : Pour les statistiques marketing, arrondissez au « K » ou « M » le plus proche pour une lecture instantanée (par exemple, « 12,4K » vs « 12 432 »). Pour les tableaux de bord, utilisez la précision requise pour la tâche.
• Utilisation des icônes : Utilisez les icônes uniquement si elles aident à distinguer différentes catégories de métriques (par exemple, une icône « Utilisateurs » vs une icône « Revenu »). N'utilisez pas les icônes simplement pour la décoration.
• Placement de l'étiquette : Les étiquettes alignées en haut sont meilleures pour parcourir une grille de métriques similaires ; les étiquettes alignées en bas sont meilleures pour les statistiques « Héro » où le nombre est l'attraction principale.

Contraintes

• Accessibilité : Utilisez aria-label pour fournir le contexte complet (par exemple, « Revenu : 12 000 dollars, en hausse de 5 % par rapport au mois dernier »). Assurez un contraste de couleur pour les indicateurs de tendance conforme aux WCAG AA (4,5:1).
• Responsivité : Les valeurs des métriques ne doivent jamais déborder de leurs conteneurs. Utilisez une typographie fluide (CSS clamp()) ou une logique « shrink-to-fit » pour les très grands nombres.
• Cohérence : Toutes les métriques d'un même groupe doivent utiliser le même arrondi, le même alignement et le même style de tendance.

Schémas d'échec courants

• Le « nombre nu » : Afficher une valeur sans étiquette ni contexte, laissant l'utilisateur deviner ce qu'elle signifie.
• Dépendance excessive aux couleurs : Utiliser uniquement le Rouge/Vert pour indiquer la tendance sans icônes (↑/↓), rendant inaccessible pour les utilisateurs daltoniens.
• Inversion de hiérarchie : Rendre l'étiquette plus grande ou plus grasse que la valeur, ralentissant le processus de « parcourir et comprendre ».
• Entassement des métriques : Placer trop de métriques sur une seule ligne, provoquant la fusion des nombres.
• Surcharge de précision : Afficher 4 décimales sur une page marketing, créant une charge cognitive inutile.

Critères de validation

• Chaque métrique a une étiquette claire et visible.
• Les valeurs utilisent une taille de typographie « d'affichage » distincte (plus grande que le texte du corps).
• Les tendances (Haut/Bas) sont indiquées à la fois par la couleur et par une icône/symbole.
• Le contexte de comparaison (par exemple, la période) est explicitement indiqué.
• Les couleurs sémantiques (Vert/Rouge) ne sont utilisées que pour les changements valorisés.
• La disposition en grille maintient la lisibilité sur mobile (pas de débordements).
• Accessibilité : le contexte complet est disponible pour les lecteurs d'écran via ARIA.