Guide section 14 of 31
KPI & Scorecard Patterns
A KPI should make the primary value, comparison basis and status legible without forcing the user to decode several competing numbers.
Standard comparison hierarchy
Primary value ├─ vs Budget / Target ├─ vs Benchmark / Norm └─ vs Previous period / LY
Use only the comparisons needed for the decision. When two deltas are needed, keep the primary value visually dominant and label each comparison explicitly.
| Element | Guidance |
|---|---|
| Current value | The main measure; strongest visual emphasis. |
| Target / budget | Expected/committed level; label units and period. |
| Benchmark / norm | Peer/standard reference; distinguish from target. |
| Previous period | Temporal reference such as previous week/year. |
| Delta | Absolute difference; include sign and unit. |
| Percentage delta | Relative difference; do not confuse with percentage-point change. |
| Trend | Small trend context only if it materially helps interpretation. |
| Status | Use icon/text + semantic color; avoid color-only status. |
| Explanation | Short reason/definition when needed; move deeper diagnosis to analysis. |
| Comparison hierarchy | Consistent order across cards/pages. |
Native implementation options
- Card (current/new Card visual): preferred for one or a small set of high-priority measures with reference values.
- KPI visual: useful for indicator + target/trend scenarios where its built-in structure fits the need.
- Gauge: native but use cautiously; compact linear target patterns often use space more efficiently.
- Scorecard / Metrics: situational; use for objective/KPI tracking when that product experience is actually required.
- Bullet-style KPI: prefer a native linear bar/column + target/reference treatment where sufficient. Use a custom bullet visual only when the analytical requirement cannot be met natively.