03

Chapter 3 · Design

Effective Visuals Design

Your audience has a fixed amount of mental energy. Every unnecessary element spends some of it. Design is the work of spending that budget on the message instead of on decoding the chart.

1Cognitive load

  1. Cognitive load is the mental effort required to take in information.
  2. When you present data you are spending your audience's processing power, and the supply is limited.
  3. Less load means better reception and better retention.
  4. Too much load and they disengage, or they misinterpret, which is worse than not showing the chart at all.
Fig 3.1The 3D chart problem, on real numbers

Depth adds no information, and the front bars physically block the ones behind. The same data as flat bars conveys more with less effort. 3D on a 2D screen always costs and never pays. The test: put yourself in the audience's position and ask whether the visual is easy to perceive. If you have to explain it, it has failed.

Clutter

Clutter is any visual element that takes up space without adding understanding.

CategoryHow it goes wrongFix
1 FrameHeavy background colour or shading adds noise with no dataPrefer white space to a border
2 Graphical objectsUnnecessary colouring or creative styling on the marksChoose the object for the job, keep it plain
3 AxesDistorted scales, or an axis kept when only a few points matterRemove the axis if labels give the values
4 LabelsLegends that force the eye back and forthLabel the series directly
5 Overlay objectsA useful callout placed where it blocks the chartKeep it, but position it so it does not obstruct

The overlay case is worth noting: the problem is usually placement, not existence. A text box explaining the key point is valuable. The same box sitting on top of the data is clutter.

Four more types of clutter

Lack of visual order

Elements arranged with no logic, so the eye finds no path. Sort by value, and use colour and alignment to impose order.

Poor alignment

Centred text is harder to scan. Left-align it, because we read top to bottom and left to right.

Ineffective white space

Text spread across the whole graphic, so nothing stands out. Condense the text and let empty space create contrast.

Non-strategic contrast

Everything highlighted, so nothing is. One strong colour for your subject, grey for everything else.

Two rules that come up in every answer

White space is an active tool, not leftover space. It works the way a pause works in speech. And on contrast: if you try to make many things stand out, nothing does. Never set text at an angle, and abbreviate labels so they fit horizontally rather than rotating them to make room.

The decluttering sequence

A repeatable order of operations. Start by asking who the audience is and what decision the visual supports, then work down.

Fig 3.2Six steps, applied one at a time to one chart
step

Nothing about the data changes across the six steps. What changes is how much work the reader has to do before the trend arrives. Direct labelling only works with few series and enough space between them. With many series a legend is the lesser evil, and not every step applies to every chart.

Memory, and why it governs design

IconicShort-termLong-term
DurationFraction of a secondA few secondsMinutes to lifetime
CapacityVery large but very briefAbout 4 chunksEffectively unlimited
ProcessingUnconsciousConsciousBoth
HoldsVisuals, pre-attentive attributesSmall amounts of dataVisual and verbal
PurposeDetect changes fastTemporary working storeStore patterns and experience
Design responseStrong visuals and contrastAvoid clutter, stay under the limitCombine visuals with words

The traffic light. A red light stops you before you think about it. A written STOP sign takes measurably longer, because it has to be read. That gap is iconic memory against conscious processing, and it is the whole argument for pre-attentive design.

Fig 3.3The four-chunk limit, made concrete
series on one chart

Short-term memory holds roughly four chunks at once. Any visual demanding that a reader hold more than that simultaneously will fail, no matter how accurate it is. The limit is the reader's, not the chart's, which is why adding a ninth series never solves anything.

Pre-attentive attributes

Visual properties the brain processes instantly, before conscious attention. They work because iconic memory picks them up unconsciously, which is why they feel effortless, and they lower cognitive load because the reader is spared a search.

FORM · orientationshapeline lengthline width sizecurvatureadded marksenclosure COLOUR · hueintensityPOSITIONMOTION
Fig 3.4Find the one that is different, in each panel
Colour and size are the strongest, and italics or subtle shape changes are much weaker. Hover any panel to see how long the search actually takes you. Do not overdo them. Too many attention points and the message is lost, exactly as with contrast.

The counting demonstration

Fig 3.5Count every 3. Time yourself both ways
0.0 s

Nothing about the data changed. One pre-attentive attribute removed the entire search. There are 16 threes. The same idea works in text and tables through colour, size, bold, italics, underline, enclosure and spatial separation, and combining two or three on one phrase pulls harder than any one alone.

Pre-attentive attributes in graphs

This is the sharpest idea in Chapter 3. A plain chart where everything looks equally important is an exploratory chart. Adding pre-attentive attributes is precisely what converts it into an explanatory one, because it encodes which part you want read first.

Fig 3.6Plain → colour → contrast plus annotation

Step 1 is exploratory: the reader must read every label to find anything. Step 2 puts attention on the frequent issues. Step 3 keeps a strong colour only on the group your story is about, fades everything else, and puts a note beside it. Now the chart argues a point.

Size carries implied importance

Fig 3.7The Google dashboard failure, in miniature

Size communicates importance whether or not you intended it, so equal importance requires equal sizing. The documented case is a Google dashboard where the easiest data to obtain was given the most space, making the least critical data look the most important. If you cannot size something meaningfully, keep it plain.

Strategic use of colour

Colour is the most powerful attribute available and the easiest to misuse. Four principles govern it.

1

Consistency

A colour assigned to a category keeps that meaning across every chart in the deck. Extend it beyond charts: if a region is blue in the chart, colour its name blue in the text too. Colour should signal meaning, never decoration.

2

Accessibility

Acceptance is built on accessibility, which follows directly from being audience-centric. Add cues that do not depend on colour: plus and minus signs, direct values, bold, brightness, size.

3

Emotional tone

Colour carries feeling, so it must match the subject. Orange and red for energy and excitement, green for growth, blue for integrity and stability. Reporting deaths in bright cheerful colours creates friction and loses the message.

4

Brand colours

Brand palettes are built for marketing, not for data encoding, so they are often poor for charts. Use them where they do not dilute the message, and be ready to justify departing from them.

Accessibility, tested rather than assumed

Fig 3.8Red against green, seen the way about 8% of men see it
palette viewer

Avoid red and green together. It is the single most problematic combination for colour-blind viewers, and it is exactly the pairing people reach for to show good against bad. Use blue and orange instead. Colour saturation of a single hue is often more accessible than multiple hues, and usually loses no meaning.

Positioning

A visualization is a spatial arrangement of elements in limited space. The eye reads top to bottom and left to right, tracing a Z across the space, so build your visual along that flow. Anything running right to left or bottom to top fights the reader.

Fig 3.9The Z pattern, and what belongs at each stop
The most important element goes at position 1, with supporting elements below in sequence. Positioning is strategic, never arbitrary: ask whether attention actually reaches the element, and whether it blocks anything. The standard to design to is that the visual feels natural to somebody encountering it without you there to explain it.

Key points

  1. Definition of cognitive load, and why lower load means higher retention.
  2. Why 3D charts fail on a 2D surface.
  3. The five categories of clutter: frame, graphical objects, axes, labels, overlay objects.
  4. Four further clutter types: visual order, alignment, white space, contrast.
  5. White space as an active design tool, and the analogy with pauses in speech.
  6. Why highlighting everything highlights nothing.
  7. The six decluttering steps in order, with the reason for each.
  8. Why removing data markers helps, in terms of the continuity principle.
  9. Three memory types with duration, capacity and design response for each.
  10. The four-chunk limit of short-term memory.
  11. The traffic light example, and what it demonstrates about iconic memory.
  12. The four families of pre-attentive attributes: form, colour, position, motion.
  13. That a plain graph is exploratory and pre-attentive attributes make it explanatory.
  14. Size implies importance, and the Google dashboard failure.
  15. The four colour principles: consistency, accessibility, emotional tone, brand.
  16. Why red and green must be avoided, and what to use instead.
  17. The Z reading pattern, and where the most important element belongs.