Small Screens, Big Claims: Designing UK Charts That Read in Seconds

A chart published by a UK transport body, a hospital trust or a district council is rarely studied. It is encountered. Someone thumbing through a feed on the 07:42 to Reading sees perhaps four square centimetres of it before deciding whether to stop. If the graphic cannot deliver its claim in that pause, the designer's intentions are irrelevant: the reader has already moved on.

That is the working premise behind what we at WHP Information Graphics call the five-second rule. Not a rule about aesthetics, but about priority. Whatever a graphic asserts must be visible, legible and defensible before the reader's attention snaps away.

What actually happens on a phone

Desktop chart review is a fiction for most audiences. A reader on a handset holds the device roughly 30 centimetres from the eye, often in motion, frequently in poor light. A graphic designed at 800 pixels wide is rendered at something nearer 320. Type set at 12 points becomes 4.8. Hairlines disappear. A six-item legend collapses into an unreadable smear.

Two further constraints matter. First, most charts are met inside a feed rather than a report, so they compete with everything above and below them. Second, they are met without a caption in the reader's mind: the surrounding article may be skipped entirely. The graphic has to stand alone.

What survives at thumbnail size

Three properties distinguish graphics that read at speed from those that merely exist.

One claim, stated in type. A title that names the finding — 'Bus punctuality fell furthest in the north-east' — outperforms any label that names the subject. The reader should not have to derive the point from the shape.

Fewer marks than feels comfortable. Four series is generous at thumbnail size. Two is often right. Where a long tail of categories exists, aggregate it and say so.

Direct labelling over legends. A legend forces a lookup, and lookups are the first thing lost when a chart shrinks. Labels placed next to the line or bar cost nothing in reading order.

A checklist for static graphics

Before a graphic is signed off, put it on a phone and step back. Then work through the following.

• Squint: if the pattern is not obvious, the contrast hierarchy is wrong, not the reader.
• Read the title aloud; it should contain the finding, not the theme.
• Confirm every annotation is legible at the size it will actually appear, not the size in the design file.
• Check the smallest type in the piece; if it is below 10 pixels rendered, it is decoration.
• Remove one colour. If nothing is lost, remove another.
• Verify that colour is not the only carrier of meaning — the point covered in our earlier piece on readable charts for every eye.
• Test in greyscale and at 200 per cent zoom.
• Ask a colleague who has not seen the data what the chart says. If they hesitate, revise.

Before and after: three UK cases

Transport. A regional punctuality graphic originally showed twelve operators across five years in a multi-line chart, with a legend occupying a third of the frame. At thumbnail size it read as grey noise. The redesign fixed on three operators — the best, the worst, the average — plotted as thick lines with end labels, and a single sentence stating the gap in percentage points. Nothing was concealed; the remaining operators moved to a supporting table.

Health. A trust's waiting-time chart used a stacked bar with nine bands and a colour ramp that repeated itself. Rendered small, the bands merged. The revision used two bands — within target and beyond target — and annotated the single month where the balance shifted, with the cause named in five words. The chart became an argument rather than an inventory.

Local government. A budget monitoring graphic plotted forecast against actual across nine service areas, with a zero line lost in the gridlines. At thumbnail size the overspend was invisible. The fix was to sort by variance, drop the gridlines, and label the three largest gaps directly. The reader sees the problem before reading a word.

When interactivity earns its place

Interactive graphics are frequently offered as the solution to density. They rarely are. A tooltip that appears on hover is unavailable on a touchscreen, invisible in a screenshot and absent when the graphic is syndicated. Where interactivity is used well, it does one of two things: it allows a reader to locate their own place in the data — a postcode, a trust, a ward — or it allows a defensible choice between two framings, both of which are complete in themselves.

Where it is used badly, it hides the finding behind a click, and the proportion of readers who click is small. A static default state should always carry the story; the interactive layer should add detail for the minority who want it.

The uncomfortable verdict

Most charts are too ambitious for their distribution. They are designed for the attention of an analyst and published to the attention of a passer-by. The five-second rule is not an argument for simplification as an end in itself, nor for stripping out nuance that a reader needs. It is an argument about sequence: make the claim visible first, then let detail reward the reader who stays.

A graphic that requires a minute to understand is not necessarily a bad graphic. But if it is going to be met for five seconds, it must be honest about what those five seconds will contain.