Need the #1 custom application developer in Brisbane?Click here →

KPI and Metric Displays

8 min read

The metric card is the most-read element of any dashboard. A single number with context. If designed well, it communicates instantly. Designed poorly, it misleads.

The Metric Card Anatomy

Metric name: "Monthly Revenue". Clear and specific.

Current value: the big number. $500,000.

Comparison: previous period or target. "Up 5% from last month" or "Target: $600k".

Trend indicator: visual indicator of direction. Green up arrow, red down arrow.

Trend Indicators: Context is Critical

"Up is good, down is bad" is wrong. Revenue up is good. Error rate up is bad. Churn up is bad. Cost down is good.

Always label the direction. "Revenue up 5%" (good). "Churn up 2%" (bad). Users shouldn't have to think about what the arrow means.

Sparklines: Trend at a Glance

A tiny chart showing recent trend. Instead of text "up 5%", a small line chart shows the trend visually.

Sparklines take up minimal space but convey pattern information. Is the metric steadily increasing, volatile, or flat?

Percentage Change

Show both absolute and percentage change. "Revenue: $500k (up 5%)" is better than just "Revenue: $525k".

Percentage alone is misleading for small numbers. "User count: 10 (up 100%)" sounds huge but is just 5 users yesterday.

Comparison Periods

vs Yesterday, vs Last Week, vs Last Month, vs Last Year, vs Target. Give users options. Daily metrics compare to yesterday. Strategic metrics compare to last quarter.

Let users choose the comparison period. Some care about day-over-day, others about year-over-year.

Targets and Thresholds

Show progress toward a goal. Revenue Target: $600k, Current: $500k, Progress: 83%.

Color coding: green if on track, red if below target.

The Vanity Metric Problem

Metrics that always go up and tell you nothing: total users ever registered (includes inactive accounts), page views (higher isn't always better), visits (could be crawlers).

Remove vanity metrics. They're decoration. Replace with actionable metrics.

Good KPI Selection by Business Type

SaaS: MRR (Monthly Recurring Revenue), ARR (Annual), churn rate, CAC (Customer Acquisition Cost), LTV (Lifetime Value).

E-commerce: Revenue, conversion rate, AOV (Average Order Value), CAC, returns rate.

Marketplace: GMV (Gross Merchandise Value), take rate, supply/demand ratio, active buyers/sellers.

Each business has 5-7 key metrics that matter. Focus on those.

Real-Time vs Daily Updates

Revenue usually updates at end of day. User count can update in real-time. Match update frequency to the metric's nature.

Real-time updates require infrastructure. Don't add real-time unless it's valuable. Daily updates are fine for strategic metrics.

Metric Formatting

Large numbers need formatting. $500000 is hard to read. $500K is clear.

Percentages: show one decimal place. 85.3% not 85.32% not 0.853.

Metric Definitions

Users ask: "How is this calculated?" Hover or info icon reveals definition. "MRR: all active subscription revenue, excluding trials".

Definitions prevent confusion and enable trust.

Metric Drilldown

Clicking a metric reveals more detail. "Revenue up 5%" clicks to show revenue by product, by region.

This bridges metric cards and detailed dashboards.

Tip
Most dashboards have too many metrics. Pick the essential 5-7. Quality over quantity. Users won't remember 30 metrics.
Developer Insight
A/B test metric displays. Which format do users understand fastest? Which leads to better decisions? Design matters.