Cards: Make the Point

Top left

Cards give the three-second answer, so they go top left.

SQLBI's 3-30-300 rule describes how people read a report page. In 3 seconds they take in the headline numbers. In 30 seconds they scan the main charts. Only the few who need it spend 300 seconds on the detail: tables, drillthrough, tooltips.

Readers in left-to-right languages start at the top left and move in a Z. So the order of the page should match the order of the reading: cards first, under the page title; charts in the middle; the detail table at the bottom; slicers on the right edge, out of the way.

BeforeCards wherever they fit

The top left, where every reader starts, holds three filters set to "All".
The four numbers that answer the page's question sit in the last place anyone looks.

The same dashboard titled Turnover overview. The four cards form a row under the title (3 seconds), the two charts sit below them (30 seconds), the detail table is at the bottom (300 seconds) and the slicers are in a rail on the right. — Same visuals, new order. A reader who stops after three seconds still leaves with 102 exits, 26 of them in 2015.
The dark labels mark the reading time for each zone. They aren't part of the report.

Put the most important card first, on the left. If one number matters more than the rest, it can also be the widest card in the row. On a phone layout, the cards stay at the top for the same reason.

Context

A number alone can't be judged. Show what it's compared with.

"26" tells the reader nothing. Is it high? Is it getting worse? Was it planned? Every card needs a second, smaller number that answers "compared with what?", and the gap between the two.

Default card showing 26 with the field name Count of Date of Termination under it. — No time frame: 26 exits when?
No comparison, so the reader can't tell good from bad.

Card labelled Exits in 2015 showing 26, with reference labels 2014: 14 and up 12, +86%. — The label names the period.
The prior year and the change make 26 mean something: exits rose 86%.

There are three kinds of comparison. Use whichever the reader actually judges the number by. IBCS, the reporting standard, gives them short names: actual (AC) against previous year (PY), plan (PL) or forecast (FC).

Compare with	Example	Answers
A benchmark	Production 40% vs. company average 34%	Is this part worse than the whole?
The prior period	26 exits in 2015 vs. 14 in 2014	Is it getting better or worse?
A target	Turnover 34% vs. Example target 30%	Are we where we said we'd be?

Three cards with plain labels and no comparison: Production turnover 40%, Exits in 2015 26, Turnover rate 34%. — Clean labels, but the reader still has to supply the context from memory.

The same three cards with reference labels: Production 40% vs company average 34%, up 6 points; Exits in 2015 26 vs 14 in 2014, up 12, +86%; Turnover rate 34% vs Example target 30%, up 4 points. — Benchmark, prior period, target: each card shows the comparison and the gap.
The gap has an arrow and a sign, so it reads without colour.

Show the comparison value itself ("2014: 14"), not only the percentage change. A reader who sees "+86%" alone can't tell whether that's 1 to 2 or 140 to 260.

Never invent a target. The HR data has no target, so every target on this site is labelled "Example target". On your own report, use the real goal or leave it out and compare with last year or the average.

Plain labels

Label the card in plain words, not with the field name.

Power BI labels a card with the aggregation and the column: "Count of Employment Status", "Average of Pay Rate". That describes how the number was calculated, not what it is. Nobody outside the model knows that "Count of Employment Status" here means the people who left.

Three default cards: 102 labelled Count of Employment Status, $31 labelled Average of Pay Rate, 3.0 labelled Average of Tenure Years. — "Count of Employment Status" counts rows, filtered to leavers. The label hides that.
"3.0" of what? The unit is missing.

The same three numbers relabelled: Employees who left 102, of 301 hired 2006-2016; Average pay per hour $31; Average years employed 3.0. — Each label says what is being counted, in the words the reader uses.
A short subtitle defines anything that could be read two ways.

Build cards on measures, not raw columns. A measure named Employees Left gives a clean label everywhere it's used. Dragging a column in gives "Sum of" or "Count of".
Show the label once. Either the card's category label or its title, not both saying the same thing.
Never show "(Blank)". If a filter can empty the card, return 0 or a dash: COALESCE ( [Employees Left], 0 ).

Rounding

Round to what the reader decides with. Two or three digits are enough.

A turnover rate of 0.33887 and one of 34% hold the same information for any decision about people. The extra digits only slow the reader down and suggest a precision the data doesn't have.

Four cards with raw formats: Turnover rate 0.33887, Average pay per hour $30.715, Recruiting spend one year $84.46K, Average tenure 3.04. — A rate shown as a decimal, pay to a tenth of a cent, auto units with two decimals.
Every card uses different precision, so the row looks noisy.

The same four cards rounded: Turnover rate 34%, Average pay per hour $31, Recruiting spend one year $84K, Average tenure 3.0 yrs. — 34%, $31, $84K, 3.0 yrs: each one readable at a glance.
The unit is on the number or in the label, never left to guess.

Number	Rule	Example
Rates and shares	Percent, 0 decimals (1 if the differences are small)	0.33887 → 34%
Money	3-4 significant digits, units set to K or M by hand	$84,460 → $84K
Small amounts	Whole units unless the cents matter	$30.715 → $31
Averages of time	1 decimal, with the unit	3.04 → 3.0 yrs

Set display units yourself instead of leaving them on Auto. Auto picks the unit from the current value, so a slicer can turn "$84K" into "$0.4K". Keep the same precision across a row of cards.

Exception colour

Colour only the card that needs action. If every card is coloured, none stands out.

Traffic-light colour on every card looks busy and forces the reader to decode each one. Most numbers are fine most of the time. Leave them in ink and colour only the gap that is off target, so the eye goes straight to the one problem.

Turnover by department: four cards with solid traffic-light backgrounds, Production 40% red, Software Engineering 30% amber, IT/IS 24% green, Sales 13% green. No target shown. — Four loud colours and no target on screen, so the reader can't tell what the colours are measured against.
Red and green alone fail for colour-blind readers.

The same four cards in white with each value in ink and Example target 35% under it. Only Production's gap, up 5 points over target, is red; the others show grey down arrows. — Only Production's gap is red, and it has an arrow and words as well as colour.
The headline values stay in ink. Colour the gap, not the number.

Two more rules for status colour:

Mind the direction. For turnover, lower is better, so a value below target is good. Build the colour rule around "better or worse", not "higher or lower".
Watch small groups. Software Engineering's 30% rests on only 10 people: one more exit would push it to 40%. Say so on the card, or don't flag it.

How many

Three to five cards per page. More than that and they compete.

Cards of equal size and weight give the eye no place to start. With eight, the reader has to read all of them to find the two that matter, which defeats the three-second answer. Each extra card also takes the space a comparison needed.

Turnover overview with eight equal cards: Employees hired 301, Started 290, Still here 188, Left 102, Turnover rate 34%, Retention rate 66%, Average tenure 3.0 yrs, Average pay $31/hr. None has a comparison. — Retention 66% is just 100% minus turnover 34%: the same fact twice. Still here (188) is Started (290) minus Left (102).
No room left for a single comparison.

Turnover overview with four cards, each with context: Employees who left 102, 34% of 301 hired since 2006; Exits in 2015 26, up 12 vs 14 in 2014 in red; Average time before leaving 2.1 years vs 3.7 for stayers; Production turnover 40% vs company 34%. — Each card earns its place and carries its own comparison.
The rest moved to the detail table, where readers who need them can still find them.

To decide what to cut, use the 20% test: if this number moved 20% tomorrow, would anyone do something differently? If not, it doesn't need a card. Then cut duplicates: show each number once per page.

One number as text

For one or two numbers, skip the chart.

Cole Nussbaumer Knaflic makes this point in Storytelling with Data: when you have just one or two numbers to share, simple text is often the best way to show them. A chart adds axes, slices and a legend for the reader to decode, and adds no information. On a presentation page, a big number with a sentence under it is clearer.

Presentation page titled Production loses staff three times as fast as Sales, with two donut charts, Production and Sales, each split into Left and Did not leave, with a legend and labels like 83 (39.90%), plus a callout. — Two charts, a legend and four labels with two decimals, to carry two numbers.
Comparing 40% with 13% means comparing two arcs on two separate circles.

The same page with two big numbers as text: 40% of Production staff have left, 83 of the 208 people hired; 13% of Sales staff have left, 4 of the 31 people hired. The callout reads Production is 69% of staff but 81% of the people who left. — The comparison the title makes is now the first thing on the page.
The sentences carry the counts the donuts hid: 83 of 208, and only 31 people in Sales.

This is a presentation-page technique. On a dashboard the same idea becomes a card row: a few numbers, each with its comparison.

In Power BI

The Card visual, plus three measures.

Add the card and label it

In the Visualizations pane, pick Card (shown as Card (new) in older versions; the original is now Card (legacy)).
Drag a measure, such as Exits 2015, into the Data well.
Double-click the field in the well and type a plain label, for example "Exits in 2015". This renames it for this visual only.
In Format visual > Visual > Label, keep the label on. Turn the visual Title off under General so the name doesn't appear twice.

Round the callout value

Format visual > Visual > Callout value > Values: set Display units to None or Thousands (not Auto) and Value decimal places to 0 or 1.
Better, format the measure once for every visual: select it in the Data pane, then Measure tools > Format (Percentage, 0 decimal places).
For a column that shows "Sum of", select it and set Column tools > Summarization to Don't summarize, then use a measure instead.

Add the comparison as reference labels

Drag Exits 2014 and Exits Change into the Reference labels well.
In Format visual > Visual > Reference labels, set each label's title (for example "2014"), turn on the Divider and set Layout to show the labels below the callout value.
Keep reference labels smaller and greyer than the callout value.

Colour only the exception

Create a colour measure such as Gap Colour below.
In Reference labels, find the value's Color and click fx. Choose Format style: Field value and pick Gap Colour.
Leave the callout value's colour in the theme's text colour.

The measures behind these cards:

Employees Left =
CALCULATE ( COUNTROWS ( Employees ), Employees[Left Company] = 1 )

Turnover Rate = DIVIDE ( [Employees Left], COUNTROWS ( Employees ) )

-- Benchmark: the same rate with the department filter removed
Company Turnover Rate =
CALCULATE ( [Turnover Rate], REMOVEFILTERS ( Employees[Department] ) )

Gap vs Company =
VAR Gap = ROUND ( ( [Turnover Rate] - [Company Turnover Rate] ) * 100, 0 )
RETURN
    IF ( Gap >= 0, "▲ " & Gap & " pts above",
                   "▼ " & ABS ( Gap ) & " pts below" )

-- Prior period
Exits 2015 =
CALCULATE ( [Employees Left], YEAR ( Employees[Date of Termination] ) = 2015 )

Exits 2014 =
CALCULATE ( [Employees Left], YEAR ( Employees[Date of Termination] ) = 2014 )

Exits Change =
VAR Diff = [Exits 2015] - [Exits 2014]
RETURN
    IF ( Diff >= 0, "▲ ", "▼ " ) & ABS ( Diff ) & " ("
        & FORMAT ( DIVIDE ( Diff, [Exits 2014] ), "+0%;-0%" ) & ")"

-- Target (an example value: use your real target)
Example Target = 0.35

Gap Colour =
IF ( [Turnover Rate] > [Example Target], "#C4343A", "#605E5C" )

With a date table in the model, replace the fixed years with SAMEPERIODLASTYEAR so the comparison follows the year slicer.

Test your eye

Fix these cards before you open the answer.

A card reads "0.33887" with the label "Turnover Rate". What two things would you change?

Format it as a percentage with no decimals (34%), and add a comparison so the reader can judge it: the company average for a department card, last year, or a target labelled as one.

A dashboard has eight equal cards, including Turnover rate 34% and Retention rate 66%. Which card would you cut first?

Retention rate (or turnover rate, but not both). 66% is 100% minus 34%, so the pair says one thing twice. Then apply the 20% test to the rest and keep the three to five that would change a decision.

Every card on a page has a red or green background. Why is that a problem, even if the colours are correct?

Colour only works as a signal when it's rare. If every card is coloured, the reader has to check each one, and the one that needs action doesn't stand out. Keep values in ink and colour only the off-target gap, with an arrow so colour isn't the only cue.

The card row sits at the bottom of the page under a large table. Where should it go, and why?

Top left, directly under the page title. Readers start there, and the cards are the three-second answer in the 3-30-300 order. The table is the 300-second detail and belongs at the bottom.

A presentation slide shows one column chart with a single bar: 40%. What would Knaflic suggest?

Show the number as text. Write "40%" large, with one sentence that gives it meaning: "of Production staff have left, against 13% in Sales".

A big number needs a small one next to it.