Marks and surfaces

In 1786 William Playfair drew England’s imports and exports as two lines and tinted the area between them. The tint is the balance of trade. Nobody has to subtract, because the quantity that matters is a shape on the page.

Engineers who design displays for power plants turned the same idea into a method. Ecological interface design, set out by Kim Vicente and Jens Rasmussen in 1992, asks a display to make the constraints of the system directly visible. Kevin Bennett and John Flach describe the result as a configural display. Variables are drawn so that their lawful relationship forms a figure, and a fault deforms the figure.

Planning and accounts are full of such laws, and a balance is the simplest. Cash at the start of a month, plus what comes in, equals what goes out plus the cash left at the end. Two stacked bars on one scale state the law: opening cash and receipts in one, payments and closing cash in the other. When the figures are right the bars end level, so the closing balance is read as a length, and a wrong figure breaks the shape. A waterfall chart shows the same numbers and leaves the reader to walk the steps.

Eduard Imhof spent a career drawing Swiss mountain maps and wrote down his rules for colour in Cartographic Relief Presentation. The first one, which Edward Tufte later brought to information design, says that strong colours are unbearable over large adjoining areas and effective in small ones set against a muted ground. A dashboard that keeps its large areas quiet can let one saturated hue do real work.

Two findings from perception explain why quiet surfaces can still organise a screen. Stephen Palmer showed that elements inside a common region are seen as a group, and that enclosure overrides nearness. Every panel boundary is therefore a claim about what belongs together. Josef Albers showed that a colour is read against its surround, so the same grey looks lighter on a dark parent and darker on a light one. A tone can mark a level in a hierarchy. It cannot be trusted to carry a value from one surface to another.

Tone is also a poor carrier of amount. William Cleveland and Robert McGill ranked the ways a reader decodes a quantity from a chart. In their ranking position on a common scale came first and shading came last. Their experiments, and the replication by Jeffrey Heer and Michael Bostock, measured the upper part of that order: position, length, angle and area. The figures in this guide use four opaque surface tones, each with one job, and print the number wherever the amount matters. Translucent panels would give a similar softness, and Beverly Harrison and colleagues studied the trade-off they bring: what shows through helps awareness of the background and competes with reading the foreground.

Design systems now state the same idea as roles. IBM’s Carbon names background, layer and field as separate tokens, and in its light themes the layers alternate between white and a pale grey. Accessibility guidance sets the limit of what tone can do. The parts of a control that a reader must see have to reach a contrast of three to one against what is next to them. Quiet surfaces sit far below that, so they can group things but cannot be the only sign of a control or a state.

Most dashboards give colour too many jobs. The accent marks the headline figure, the forecast line, the selected tab and the button. Business reporting has a better convention. The International Business Communication Standards, developed by Rolf Hichert and colleagues and set out with Jürgen Faisst in Solid, Outlined, Hatched, separate scenarios by fill. Actual figures are solid, plans are outlined and forecasts are hatched. Hue is left free.

The figure below keeps the principle, in greys, and makes no claim of compliance. Actual months are solid slate, planned values a dashed outline, the forecast hatched, and last year a paler slate because it is context. The fill says how firm a quantity is: solid for what has happened, hatched for what is expected, an outline for what is only intended. Hatching needs room. It reads on a bar a month wide and turns to texture on a mark as small as a twelve-pixel rail. Ink is kept for the one mark that matters most, such as a shortfall, so nothing needs red. Selection is a raised white pill, so no fill ever means clickable.

Jacques Bertin listed value, the lightness of a mark, among his visual variables in 1967, and classed it as ordered: a darker mark reads as more. Strength of fill can therefore carry a ranking that hue cannot. It also survives a grey printer, a washed-out projector and a reader who cannot tell two hues apart.