Back to the lesson·Lesson 2 of 8·What it is for
The three numbers first, and everything else lower
The same deck as the downloads, rendered as a page. Start the slideshow to present it full screen — arrow keys or a click advance one slide, Escape leaves.
What this lesson covers
- The order a page is read in
- The tile
- What goes behind a link
- The five-second test, applied to a page
- Print, and the phone
- What the layout cannot fix
- Report it whole
- What comes next
Speaker notes
A reader gives a dashboard about eight seconds before deciding whether it is for them. What they see in those eight seconds is decided by the top of the page, and most dashboards spend it on a logo, a date range picker and a total.The order a page is read in
Position Carries Title and one line What this is and what it decides The tiles The three or four numbers the decision turns on The table The disaggregation the decision needs The figure A shape a table cannot show The context Who it is for and what they are deciding The method and the limits What it does not show Speaker notes
Top-left, then across, then down. That is not a preference, it is what a reader does before deciding whether to keep reading — so the page's argument has to be in that order.The order a page is read in
- Every dashboard on this platform is in that order — and the order is the same in both languages because it is about…
- The two things that usually occupy the top and should not — a logo, and a filter control
Speaker notes
Every dashboard on this platform is in that order, and the order is the same in both languages because it is about reading rather than about wording. The two things that usually occupy the top and should not: a logo, and a filter control. A logo tells a reader nothing they did not know, and a filter asks them to do work before the page has told them why.The tile
- The value, large — One number, at the precision the interval supports
- The label, plain — What it is, in the words the audience uses
- The note, small — The definition compressed to a clause — "improved and within 30 minutes" — because the tile is where…
- Colour only where it is a state — The dashboards here use the signal band on a tile only when the number is a severity…
Speaker notes
Three parts, and each is doing a job. The value, large. One number, at the precision the interval supports.56.3%, never56.26%. The label, plain. What it is, in the words the audience uses. "Basic service", notbasic_water_pct. The note, small. The definition compressed to a clause — "improved and within 30 minutes" — because the tile is where the misunderstanding starts and one clause prevents most of it. Colour only where it is a state. The dashboards here use the signal band on a tile only when the number is a severity or a data-quality flag, for the reason the visualisation course gave: spending green, amber and red on ordinary categories teaches the reader to stop reading them as measurements.What goes behind a link
On the page Behind a link Three headline numbers Every indicator in the logframe One disaggregation Every disaggregation The current round The historic series, as a CSV The finding The notebook that produced it What it does not show The technical documentation that says why Speaker notes
The phrase in the spine is "the detail behind a click", and on a static page the click is a link to another artefact rather than an interaction.What goes behind a link
- A static page can do all of this with an anchor tag — and it survives being printed, emailed and opened offline — which…
- This is a real trade and it is worth naming — An interactive dashboard lets a reader ask their own question; a static…
Speaker notes
A static page can do all of this with an anchor tag, and it survives being printed, emailed and opened offline — which an interactive filter does not. This is a real trade and it is worth naming. An interactive dashboard lets a reader ask their own question; a static one answers the question it was built for and points at the artefact for everything else. For an audience on a metered connection, the second is usually the better bargain, and it is the one this platform took.The five-second test, applied to a page
- If they read the tiles and state the finding, it works
- If they ask "what am I looking at", the title is a file name — "WASH coverage and water quality by district" tells a…
- If they start scrolling immediately, the tiles are not the numbers they need
- If they ask what the number means, the tile has no note
Speaker notes
Show it to somebody who was not in the analysis and ask what it says. If they read the tiles and state the finding, it works. If they ask "what am I looking at", the title is a file name. "WASH coverage and water quality by district" tells a reader what it is. "Dashboard" does not. If they start scrolling immediately, the tiles are not the numbers they need. If they ask what the number means, the tile has no note.Print, and the phone — Example
@media print { body { background: #fff; padding: 0; font-size: 11pt; } }Speaker notes
The two displays a programme dashboard is actually read on.Print, and the phone — In R
# A dashboard that cannot be printed is one that cannot go in a meeting pack.Print, and the phone
- Somebody will print it — It goes into a meeting pack, it gets photocopied, and the version everyone in the room holds…
- And somebody will open it on a phone — Tiles in a grid that reflows to one column, a table that scrolls horizontally…
Speaker notes
Somebody will print it. It goes into a meeting pack, it gets photocopied, and the version everyone in the room holds is monochrome. The tiles have to survive that, which is the greyscale rule from the visualisation course arriving as a layout constraint. And somebody will open it on a phone. Tiles in a grid that reflows to one column, a table that scrolls horizontally inside its own container rather than pushing the page sideways, and no fixed width anywhere.What the layout cannot fix
- A page whose question is wrong — Ordering the wrong three numbers well produces a well-ordered wrong page, and the last…
- A number nobody trusts — Layout does not create confidence; provenance does, and that is the next lesson
- A finding nobody wants — A dashboard cannot make an unwelcome result welcome, and the attempt — burying it below the…
Speaker notes
A page whose question is wrong. Ordering the wrong three numbers well produces a well-ordered wrong page, and the last lesson is the one that catches that. A number nobody trusts. Layout does not create confidence; provenance does, and that is the next lesson. A finding nobody wants. A dashboard cannot make an unwelcome result welcome, and the attempt — burying it below the fold, choosing a flattering disaggregation — is the failure this course ends on.Report it whole — Example
Dashboard layout Reading order: title and purpose, four tiles, district table, figure, commissioning context, method and limits. Tiles carry a value at the precision the interval supports, a plain label, and a one-clause definition. Signal colours appear only where the value is a severity or a quality flag. The historic series, the full indicator set and the analysis notebook are linked rather than embedded. The page is 8 kB, prints to one side of A4 in greyscale, and reflows to a single column below 640 px.Report it whole
- The size is worth stating — Eight kilobytes is a number a reader on a metered connection can weigh, and it is a claim…
Speaker notes
The size is worth stating. Eight kilobytes is a number a reader on a metered connection can weigh, and it is a claim the file itself either supports or does not.What comes next
- A well-laid-out number that nobody can source is a number that gets challenged every month.
Speaker notes
A well-laid-out number that nobody can source is a number that gets challenged every month. The next lesson attaches the as-of date, the source file and the refresh cadence to every figure on the page.