Design problem

Dense dashboards

Twenty charts, no argument. The dashboard reports numbers without telling anyone what to do.

How you know you have it

1Write the three questions this dashboard answers, and delete widgets that answer none of them.
2Give the primary metric more size, weight and space than the rest, deliberately.
3Add a comparison to every number: previous period, target, or benchmark.
4Label series directly instead of sending the eye to a legend.

A dashboard assembled from what the warehouse exposes answers nothing in particular.

Comfortable spacing for a monitoring wall and compact spacing for an analyst are different products. Picking neither produces both badly.

Numbers without a baseline, a target or a previous period cannot be interpreted, only read aloud.

Dashboards fail on hierarchy, density and chart choice more often than on data, so these entries cover the three together.

The mechanism underneath the symptom. Read these when the fix needs justifying to somebody else.

Visibility of System Status
The interface should always tell the user what is going on, through timely and appropriate feedback.
HeuristicExpert heuristic
Cognitive Load
Working memory is a narrow channel, and interfaces spend it on three kinds of work, only one of which is useful.
PsychologyEstablished research
Recognition Over Recall
Recognising something on screen is far easier than remembering it, so keep the information visible.
HeuristicExpert heuristic
Miller's Law
Working memory holds a small number of chunks, so the design lever is what counts as a chunk, not the raw item count.
LawEstablished research
Anchoring Bias
The first number a person sees shapes every judgement that follows, even when it is obviously arbitrary.
Cognitive biasEstablished research

The visual and structural levers that produce or relieve this problem.

Density
How much information occupies a given area, which should follow the user's expertise and task rather than a house style.
UI foundationCraft convention
Visual Hierarchy
The order in which elements are noticed, controlled by size, weight, colour, position and space.
UI foundationCraft convention
Scale
Relative size is the fastest signal of importance and the easiest one to overuse.
UI foundationCraft convention
Grids
A shared structure that makes alignment automatic and layout decisions repeatable.
UI foundationCraft convention
Whitespace
Empty space is a design element that groups, emphasises and sets pace, not leftover area.
UI foundationCraft convention
Data Visualization Color
Charts need three kinds of palette, and the choice between them is determined by the data, not by taste.
UI foundationCraft convention
Typographic Hierarchy
Using size, weight, colour and space to make the structure of text visible before it is read.
UI foundationCraft convention

Recognised solutions, with the conditions under which each earns its place.

Filtering
Narrowing a large set by attributes, which is what makes large catalogues navigable at all.
PatternCraft convention
Sorting
Reordering a set, where the default order is the decision that matters most.
PatternCraft convention
Empty States
The screen before there is anything to show, which is a teaching opportunity rather than a gap.
PatternCraft convention
Loading States
What to show while waiting, chosen by how long the wait is and whether its length is known.
PatternCraft convention
Comparison
Putting options side by side so differences can be seen rather than remembered.
PatternCraft convention

States, behaviour and the accessibility contract you will need to specify.

Chart
A visual encoding of data, which is only useful if the encoding matches the question being asked.
ComponentEstablished research
Data Table
The right tool for comparing many records across many attributes, and a large amount of behaviour to specify.
ComponentCraft convention
Tabs
Parallel views in one space, which works only when users never need to compare across them.
ComponentCraft convention
Date Picker
One of the hardest components to get right, and one where typing is often faster than picking.
ComponentCraft convention
Tooltip
A short description on hover or focus, which must never be the only place information lives.
ComponentCraft convention

Where the words carry more of the fix than the layout does.

Microcopy
The small pieces of text that do most of the work: labels, hints, empty states, errors and confirmations.
UX writingCraft convention
Content Design
Deciding what content a user needs and in what order, which is a design activity rather than a writing one.
UX writingCraft convention

The requirements this problem raises, mapped to the decisions that produce them.

Use of Color
Colour may reinforce meaning but must never be the only thing carrying it.
AccessibilityCraft convention
Keyboard Navigation
Everything must be operable with a keyboard alone, which is the single most load-bearing accessibility requirement.
AccessibilityCraft convention
Contrast
Difference is what makes anything perceivable, and it is measurable for text against its background.
UI foundationCraft convention

Methods suited to confirming the cause before you commit to a fix.

User Interviews
Structured conversations about what people actually did, which is far more reliable than what they say they will do.
Research methodEstablished research
Product Analytics
Measuring what people do at scale, which tells you where problems are and never why they exist.
Research methodCraft convention

Interactive review passes, with progress saved in your browser.

Dashboard UX Checklist
Whether a dashboard answers a question or just displays numbers.
ChecklistCraft convention

Worked cases, including the options that were rejected.

Choosing a Density for an Analytics Dashboard
A generous, modern-looking redesign made a dashboard slower for the people who used it all day.
Case studyCraft convention

The same material, organised around the surface you are building rather than the symptom you are fixing.