Rules 16-22

Make it look professional.

Readers judge the care in a report before they read a number. These seven rules fix the details that cost trust.

Rule 16

Same colour, same meaning. Once a colour means something, it means that everywhere.

Both: presentations and dashboards

Readers link colours across visuals without being told to. If Production is purple in one chart and violet in the next, they have to learn a new key, or they assume the two colours mean two different things.

Power BI hands out its theme colours by position inside each visual. Sort two charts differently and the same department gets a different colour in each. Below, Admin Offices is light blue on the left, and that light blue becomes Executive Office on the right.

BeforeThe key changes between visuals
Two default column charts, Turnover Rate by Department and Average of Pay Rate by Department. Each department has a different theme colour in each chart, and each chart has its own legend.
  • Production is purple on the left and violet on the right.
  • Two legends, each with a different key for the same six departments.
AfterOne colour, one meaning
Two bar charts, Production loses 40% of its staff and Production pays the least: $23.1 an hour. Production is blue in both and every other department is grey.
  • Blue means Production on both visuals, and nothing else is blue.
  • No legend needed: the reader learns the key once.

Red and green carry meaning before anyone reads a word: red is bad, green is good. Keep them for status, and check which direction is good. For turnover, lower is better. A gradient that runs from red (low) to green (high) paints the worst department green.

BeforeGreen on the worst number
Bar chart titled Turnover Rate by Department with a red to green gradient. Production, the highest turnover at 39.9%, is bright green.
  • The gradient says Production is doing best. It's doing worst.
  • Every bar gets a status colour, so nothing stands out.
AfterRed only where it's earned
Bar chart titled Only Production is above the company turnover rate of 34%. Production is red, the rest grey, with a dashed company line at 34%.
  • Red marks the one department above the company rate.
  • The dashed line shows what "above" is measured against.

In Power BI

  1. Set the palette once: View > Themes > Customize current theme > Name and colors. Every new visual starts from it.
  2. Pin a category to a colour: select the visual, open Format visual > Bars > Colors (Columns on a column chart), turn on Show all and set Production. Do the same on every visual that shows departments.
  3. Colour by a rule instead: click fx next to the colour, choose Format style: Field value, and pick a colour measure such as Bar Colour.
  4. If you use Format style: Gradient, set Lowest value to the good colour whenever lower is better.
Rule 17

Never rely on colour alone. Add a sign, an arrow or a label.

Both: presentations and dashboards

About 1 in 12 men has some form of colour vision deficiency, most often red-green. To them, a red/green status chart is two similar shades of olive. Give every status a second cue that survives without colour: a plus or minus sign, an arrow, or a word. Then pick a pair that stays apart for everyone: blue and orange.

Below, each department's turnover rate is compared with the company's 34%. Software Engineering and Admin Offices have only 10 people each, so their gaps rest on a handful of exits. Executive Office (one person) is left out.

BeforeRed and green, faint labels
Diverging bar chart titled Turnover Gap by Department. Production's bar is red, the rest green, with light grey labels such as 6.00 and -21.00 and no units.
  • Good and bad are coded only by red and green.
  • Light grey labels (#B3B0AD) reach 2.2:1 contrast on white. They fail.
  • "6.00" of what? No unit.
AfterBlue and orange, plus signs
Diverging bar chart titled Only Production loses people faster than the company as a whole. Production in orange labelled up arrow +6 pts; the others in blue labelled with down arrows, from -4 to -21 pts.
  • Orange is above the company rate, blue below, and the arrow and sign say it again.
  • Labels in dark text with the unit: "+6 pts".

Here are the same two charts as a reader with red-green colour blindness (deuteranopia) sees them. The simulation uses the Machado colour-vision model.

BeforeSimulated red-green colour blindness
The red and green Turnover Gap by Department chart as seen with deuteranopia. Above and below the company rate are both the same olive colour.
Above and below the company rate are now the same colour. The only remaining cue is a faint minus sign.
AfterSimulated red-green colour blindness
The blue and orange chart titled Only Production loses people faster than the company as a whole, as seen with deuteranopia. Production stays clearly different from the blue bars, and the arrows and signs still read.
Orange shifts toward gold but stays clearly apart from blue, and the arrows still carry the message.

Contrast. Text needs a contrast ratio of at least 4.5:1 against its background, or 3:1 for large text (18 pt, or 14 pt bold). Power BI's dark grey #605E5C reaches 6.5:1 on white. Pale greys that look elegant on your monitor often fall below 3:1.

In Power BI

  1. Measure the gap in points: Gap vs Company = ( [Turnover Rate] - CALCULATE ( [Turnover Rate], REMOVEFILTERS ( Employees[Department] ) ) ) * 100
  2. Add the arrow and sign in the number itself: select the measure, then Measure tools > Format > Custom and enter "▲ +"0" pts";"▼ −"0" pts";"0 pts". The three parts are positive, negative and zero.
  3. Colour by sign: Format visual > Bars > Colors > fx, Format style: Rules. If value > 0, #EB6834 (orange). If value < 0, #2A78D6 (blue).
  4. Keep data labels at #605E5C or darker: Format visual > Data labels > Values > Color.
  5. On line charts, give each series its own marker shape: Format visual > Markers > Shape, per series.
  6. Describe each visual for screen readers: Format visual > General > Alt text.
Rule 18

One font, few sizes. Left-aligned, in sentence case.

Both: presentations and dashboards

Every extra font, size or alignment is something the reader notices instead of the data. Segoe UI is Power BI's own font, built for screens and installed on every Windows machine, so it looks the same for every reader. A custom font can fall back to a substitute on someone else's computer.

Centred titles make the eye hunt for where each line starts. ALL CAPS and Title Case slow reading down. Sentence case reads like a sentence, which is what an action title is.

BeforeSix fonts, seven sizes, centred
Report page titled HR TURNOVER AND PAY ANALYSIS in centred capitals. Visual titles in Arial Black and italic Trebuchet, labels in Courier New and Verdana, values in Georgia.
  • Georgia, Arial Black, Trebuchet, Courier New, Verdana and Times New Roman on one page.
  • Centred, capitalised titles that each start in a different place.
  • Labels at 10 px next to bold 15 px values: the eye can't tell what matters.
AfterSegoe UI, three sizes
The same page in Segoe UI, titled Turnover is highest where pay is lowest, in Production. Visual titles Share who left, by department and Average pay per hour, by department, all left-aligned.
  • One family. Three sizes: page title, visual title, labels.
  • Every title starts at the same left edge, in sentence case.

A type scale that covers almost every page:

RoleFontSize
Page titleSegoe UI Semibold20-24 pt
Visual titleSegoe UI Semibold14 pt
Subtitle, labels, axesSegoe UI, grey10-11 pt
Card numberSegoe UI Semibold28-36 pt
Source and date footerSegoe UI, grey10 pt

Nothing goes below 10 pt. If a label doesn't fit at 10 pt, shorten the label or give the visual more room.

In Power BI

  1. Set the fonts once for the whole report: View > Themes > Customize current theme > Text. Set General to Segoe UI and Title to Segoe UI Semibold.
  2. For each visual title: Format visual > General > Title. Font Segoe UI Semibold, size 14, Horizontal alignment: Left.
  3. Type titles in sentence case. Power BI has no setting that does it for you.
  4. Copy a finished visual's formatting to the others with Home > Format painter.
Rule 19

Skip gauges, 3D and radial charts. They look busy and hide the comparison.

Both: presentations and dashboards

A gauge spends a whole visual on one number. The arc asks the reader to judge an angle, while the two things that matter, the value and the gap to target, sit in small text. The IBCS standards single out speedometer gauges as one of the least useful visuals. A card with a bullet bar shows the same number and the gap in less space.

The HR data has no turnover target, so the 25% below is an example, labelled as one.

BeforeA gauge
Default Power BI gauge titled Turnover Rate, showing 33.89% on an arc from 0.00% to 67.77%, with a tick marked Example target 25.00%.
  • The maximum, 67.77%, is just double the value: Power BI's default.
  • Is 33.89% good? The reader has to work out the gap alone.
AfterA card with a bullet bar
Card titled Turnover rate showing 34%, with up arrow 9 pts above the example target, and a bar to 34% with a tick at Example target 25%.
  • The number, the gap and the target, read in one glance.
  • A straight bar is judged by length, which people read accurately.

Radial bar charts, available as AppSource visuals, bend bars into rings. An outer ring is longer than an inner ring at the same value, so length stops meaning size. Below, Admin Offices' outer ring at 20% is almost as long as Production's inner ring at 40%. 3D charts do the same harm with perspective: nearer bars look bigger. Power BI has no built-in 3D charts. Don't import one.

BeforeA radial bar chart
Radial bar chart titled Turnover Rate by Department: six coloured rings of different lengths with a legend and no values.
  • Which ring is longest? The answer depends on where the ring sits.
  • No values, six colours, and a legend to decode.
AfterA sorted bar
Sorted bar chart titled Production loses 40% of its staff, three times the rate in Sales, with Production in blue and Sales in light blue.
  • All bars share one baseline, so length is a fair comparison.
  • Sorted, labelled, and the title says what to see.

In Power BI

  1. Swap the gauge for a Card (new) with the turnover measure.
  2. Add the target: Format visual > Callout > Reference labels > Add, set the value to your target measure and the title to "Example target" (or the real target's name).
  3. For a bar with a target, use a Clustered bar chart. In the Analytics pane, add an X-axis constant line at the target, turn on its Data label and name it.
  4. Replace a radial or 3D chart with a clustered bar, then sort it: More options (…) > Sort axis > Turnover Rate, and Sort descending.
Rule 20

Slicers on the edge, never top left. The top left belongs to the answer.

Dashboard

Readers start at the top left. Put a slicer there and the first thing they see is a list of checkboxes, not the number that answers their question. Slicers dropped wherever there was space break the grid and make the reader hunt for the filters.

Group them in one place, a rail on the right or a thin band under the title, with plain-word headers, in the same spot on every page. A presentation page usually needs no slicers at all.

BeforeSlicers first, and scattered
Dashboard page with a Department checkbox slicer in the top left, a Performance Score dropdown below it, cards and a bar chart titled Which departments lose the most people? to the right, and a Hire Year dropdown floating under the chart.
  • The top left, the most-read spot on the page, holds a checkbox list.
  • Three slicers in three places, with field names as headers.
AfterAnswer first, filters in a rail
Dashboard page titled Turnover: who is leaving? with three cards in the top left (34%, 26 left in 2015, Production 40%), the bar chart below, and a right rail titled Filters with Department, Performance rating and Year hired dropdowns and a Clear all slicers button.
  • Cards top left, chart below, filters together on the right.
  • Dropdowns with plain headers take a fraction of the space of checkbox lists.

In Power BI

  1. Make each slicer a dropdown: Format visual > Visual > Slicer settings > Options > Style: Dropdown.
  2. Rename the header in plain words: Format visual > Visual > Slicer header > Title text, for example "Performance rating".
  3. Stack them in the rail: select them all, then Format > Align > Align left and Distribute vertically.
  4. Apply them to every page: View > Sync slicers, and tick each page.
  5. Add a reset: Insert > Buttons > Clear all slicers.
Rule 21

Consulting page anatomy. Same parts, same spots, every page.

Presentation

Consulting firms such as McKinsey, BCG and Bain build every slide on the same frame: a tracker, an action title, a subtitle with units, the exhibit, a takeaway, and a footer with the source and date. Readers learn where to look once, then spend their attention on the content.

The footer answers the first question a careful reader asks: where is this from, and how current is it?

BeforeA chart on a page
Presentation page with only a centred label title, Turnover by Department, and a default multi-coloured column chart with a legend. No subtitle, takeaway, source or date.
  • No message, no units, no source, no date.
  • The reader can't tell what to conclude or whether to trust it.
AfterThe full anatomy
Presentation page with six numbered parts: tracker Turnover review, Page 1 of 4; action title Production loses 40% of its staff, three times the rate in Sales; subtitle with units; the bar chart; a takeaway box Fix Production first; and a footer with the source, the definition of left and the data date, June 2016.
  1. Tracker: where this page sits in the deck.
  2. Action title: the finding, with a number and a comparison.
  3. Subtitle: what is measured, the unit and the period.
  4. Exhibit: one chart that proves the title.
  5. Takeaway: what to do about it.
  6. Footer: source, definitions and the as-of date.

In Power BI

  1. Build the frame on one page with Insert > Text box for the tracker, title, subtitle and footer.
  2. Fix their positions: Format > General > Properties > Size and Position, then use the same X and Y on every page.
  3. Make the as-of date update itself. In Home > Transform data, add a blank query named Refresh: = #table(type table [Refreshed = datetime], {{DateTime.LocalNow()}}).
  4. Add a measure As Of = "Data as of " & FORMAT ( MAX ( Refresh[Refreshed] ), "d mmm yyyy" ) and show it in the footer text box with + Value.
  5. Duplicate the page for each new slide (right-click the page tab, Duplicate page) so the frame never drifts.
Rule 22

Story order across pages. Read only the titles, and they tell the story.

Presentation

Barbara Minto's Pyramid Principle puts the answer first, then the reasons, strongest first. You work out a finding from the bottom up, but you present it from the top down. In a report, each page title is one line of that argument.

Busy readers skim titles. If the titles alone carry the story, the report works even for someone who reads nothing else.

BeforeTopics, answer last
Five page titles in order: Overview, Turnover by Department, Count of Reason For Term, Term Year Trend, Summary and Next Steps.
  • Each title names a topic, so the five together say nothing.
  • The answer waits on page 5, where many readers never get.
AfterA storyline, answer first
Five page titles in order: Fix Production first: it loses 40% of its staff, three times the rate in Sales. Production accounts for 83 of the 102 people who left. All 25 people who left unhappy or for more money worked in Production. Watch IT/IS too: it lost 7 people in 2015, after 0 in 2014. Next: exit interviews in Production on pay and morale, tracked monthly.
  • Page 1 is the answer and the action.
  • Pages 2-4 are the proof, then the next step.
PageIts jobIn the example
1The answer and what to doFix Production first
2The strongest proof83 of the 102 leavers came from Production
3The whyEvery exit for unhappiness or more money was in Production
4What else matters, brieflyIT/IS jumped in 2015
5Next steps, with an owner and a date where you canExit interviews, tracked monthly

In Power BI

  1. Put the pages in story order: drag the page tabs at the bottom of the canvas.
  2. Keep every page title in the same text box position, so readers flipping pages see them in one place.
  3. Test the storyline: add a page, list every page title on it in order, and read the list aloud. If it doesn't sound like an argument, rewrite the titles. Then hide the page (right-click the tab, Hide page).
Test your eye

Name the rule before you open the answer.

Sales is green on page 1 of a report and orange on page 3. What's wrong, and how do you fix it?

Rule 16: the same thing has two colours, so readers assume two meanings. Pin Sales to one colour on every visual (Format visual > Colors > Show all), or better, grey everything except the department each page is about.

A KPI card turns red when turnover rises and green when it falls. What's missing?

Rule 17: a cue that works without colour. Add a sign and an arrow to the number with a custom format string such as "▲ +"0" pts";"▼ −"0" pts". If you keep a colour, make it blue or orange rather than red against green.

The page title is centred, in capitals, in Georgia. The visual titles use Arial. Which three changes fix it?

Rule 18: set the theme's fonts to Segoe UI (Customize current theme > Text), set each title's Horizontal alignment to Left, and retype the titles in sentence case.

A manager asks for a gauge showing turnover against target. What do you build instead?

Rule 19: a card with the turnover rate and a reference label for the target, or a bar with a constant line at the target. Both show the value and the gap in a straight line. If the target is made up for the example, label it "Example target".

A deck's page titles read: "Headcount", "Turnover", "Pay", "Conclusion". What's the problem?

Rule 22: they are topics, and the answer is last. Put the conclusion first as an action title, then give each proof page a title that states its finding, for example "Production pays $23.1 an hour, the lowest of any department".