โ† Retour aux demos
Revenue net
847โ€ฏ200โ‚ฌ
โ†‘ +6.2% vs S-1
CPM moyen
2.87โ‚ฌ
โ†‘ +3.2% vs S-1
Fill Rate
64.8%
โ†“ -1.2pp vs S-1
Impressions
295M
โ†‘ +5.0% vs S-1

KPI Cards + Sparklines

Valeur primaire + delta vs periode de reference + sparkline tendance. Toujours above the fold โ€” c'est la premiere chose que l'audience voit. Le delta doit TOUJOURS inclure la periode de comparaison ('vs S-1', pas juste '+6.2%'). La couleur du delta suit la direction semantique de la metrique (hausse de latence = rouge, hausse de revenue = vert).

Ideal pour : Above the fold de tout dashboard โ€” Executive Summary, Partner Health, Publisher Yield

Faire

  • Valeur primaire en grande taille (18px+)
  • Delta avec signe + ou - ET periode de reference
  • 4 minimum, 6 maximum par dashboard
  • Sparkline 7-14 jours sans axes ni labels
  • Couleur du delta selon la direction semantique
  • Double encodage : couleur + symbole fleche

Ne pas faire

  • Delta sans contexte ("-15%" sans "vs hier" ou "vs S-1")
  • Plus de 6 KPI cards (dispersion de l'attention)
  • Memes couleurs pour toutes les metriques
  • Sparkline avec axes (prend plus de place que la courbe)

Anatomie d'une KPI Card

1. Label โ€” Nom de la metrique (12px, uppercase, discret)
2. Valeur primaire โ€” Le chiffre principal (28px+, couleur semantique)
3. Delta โ€” Variation vs reference (signe + fleche + % + "vs S-1")
4. Sparkline โ€” Tendance 14j sans axes (optionnel mais precieux)

Direction semantique des couleurs

MetriqueDirectionHausseBaisse
Revenue, CPM, Fill Rate, Win RatePlus haut = mieuxVertRouge
Latence, Taux d'erreur, DiscrepancyPlus bas = mieuxRougeVert
preview.smilewanted.com ยท main 435d639 ยท changelog