The item that differs from its neighbours is the one that gets noticed and remembered.
LAW·009
I'm designing
A Dashboard
Analytics, monitoring or any screen whose job is to answer a question at a glance.
What this surface turns on
- The specific question this dashboard answers.
- Which one or two metrics dominate, and what everything else is doing there.
- What each number is compared against.
- The density, and whether one density suits every user.
Where these usually go wrong
- Twelve metric cards of identical weight, so the reader has to evaluate all twelve.
- Numbers with no comparison, which are decoration rather than information.
- The active time range and filters not visible, so figures are misread with confidence.
- A failed request rendered as an empty state, telling the user their data is gone.
- Truncated chart axes that exaggerate differences.
Why these
Dashboards carry high information density, several decisions per screen, filtering, comparison across time, and content that has to be readable at a glance. The selection leans on hierarchy, density and chart choice, because those three decide whether anyone can act on the page.
Why it works the way it does
The reasoning layer. Read these when a decision needs justifying, or when something is failing and you cannot say why.
Working memory is a narrow channel, and interfaces spend it on three kinds of work, only one of which is useful.
PSY·001
Below roughly 400 milliseconds of system response, people stop waiting on the machine and productivity rises sharply.
LAW·006
Focused attention makes people miss things in plain sight, including changes to the interface they are using.
PSY·004
A small share of features carries most of the use, which is a prompt to go and measure rather than an excuse to cut.
PRIN·002
The craft decisions
The visual and structural foundations that carry most of the weight on this surface.
The order in which elements are noticed, controlled by size, weight, colour, position and space.
FND·001
How much information occupies a given area, which should follow the user's expertise and task rather than a house style.
FND·016
Charts need three kinds of palette, and the choice between them is determined by the data, not by taste.
FND·029
Shared edges create invisible lines that organise a layout and make it feel deliberate.
FND·003
Empty space is a design element that groups, emphasises and sets pace, not leftover area.
FND·015
Around one in twelve men has a colour vision deficiency, so colour has to be reinforced by something else.
FND·028
Patterns to reach for
Solutions people already recognise, with the conditions under which each one earns its place.
Narrowing a large set by attributes, which is what makes large catalogues navigable at all.
PAT·004
What to show while waiting, chosen by how long the wait is and whether its length is known.
PAT·011
The screen before there is anything to show, which is a teaching opportunity rather than a gap.
PAT·010
A chronological record of what happened, which needs grouping and filtering to stay readable.
PAT·019
Components you will specify
Each entry covers the states, behaviour and accessibility contract you need to define.
A visual encoding of data, which is only useful if the encoding matches the question being asked.
CMP·028
The right tool for comparing many records across many attributes, and a large amount of behaviour to specify.
CMP·025
A container that groups content about one object, and the most over-applied component in modern UI.
CMP·022
A small marker of status, category or count, which must not look like something you can press.
CMP·023
Splitting results into pages, which preserves position and keeps the footer reachable.
CMP·021
Accessibility requirements
Not a separate pass. These are the requirements this surface raises, mapped to the decisions that produce them.
Difference is what makes anything perceivable, and it is measurable for text against its background.
FND·002
The text equivalent of an image, which depends on the image's purpose in that specific context.
A11Y·007
Everything must be operable with a keyboard alone, which is the single most load-bearing accessibility requirement.
A11Y·002
Telling assistive technology that something changed, when focus did not move to say so.
A11Y·009
Language and content
The words do more work here than most teams budget for.
The small pieces of text that do most of the work: labels, hints, empty states, errors and confirmations.
WRT·001
Deciding what content a user needs and in what order, which is a design activity rather than a writing one.
WRT·004
How to find out
Research methods suited to the questions this surface raises.
Watching people work in their own environment, which surfaces the context that interviews miss.
RES·012
Measuring what people do at scale, which tells you where problems are and never why they exist.
RES·010
Watching people attempt real tasks, which is the most direct evidence available about whether a design works.
RES·001
Check your work
Interactive checklists, with progress saved in your browser.
A practical WCAG 2.2 AA review pass, ordered so the checks that find the most problems come first.
CHK·002
Documents you might need
Fillable templates, prefilled so they are usable rather than empty.
The problem, the constraints and the success measures, agreed before design starts.
TPL·010
A feature specification that covers states, edge cases and accessibility rather than only the happy path.
TPL·011
Decisions other teams made
Worked cases, including the options that were rejected and why.
A generous, modern-looking redesign made a dashboard slower for the people who used it all day.
CASE·004
Hiding columns on small screens made the table tidy and removed the data field staff had opened it to see.
CASE·005
Designing something else?
Neighbouring territory. Each surface reuses much of the same material, arranged around the decisions that surface turns on.