Time to hit a target depends on how far away it is and how big it is, which makes size and distance the two levers you control.
LAW·002
I'm designing
A Data Table
Many records, many attributes, and comparison down a column as the actual task.
What this surface turns on
- Which columns are visible by default, and whether users can change that.
- The default sort, which most users will never change.
- How the table behaves on a narrow screen.
- Whether bulk actions are needed, and what their selection scope is.
Where these usually go wrong
- Columns dropped on small screens, removing the data the user came for.
- Sorting with no tiebreaker, so rows shuffle between page loads.
- Numbers left-aligned, or with inconsistent decimal places within a column.
- Div-based tables with no semantics, which are unusable with a screen reader.
- Row action icons too small to hit on touch.
Why these
Tables serve two different jobs, finding one record and comparing many, and most fail by trying to do both identically. The entries cover density, state in the URL, sorting and the mobile reshaping that a wide table always needs.
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 holds a small number of chunks, so the design lever is what counts as a chunk, not the raw item count.
LAW·004
Working memory is a narrow channel, and interfaces spend it on three kinds of work, only one of which is useful.
PSY·001
Time to complete a task falls as a power function of repetitions, so expert speed depends on the interface staying stable.
LAW·015
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.
How much information occupies a given area, which should follow the user's expertise and task rather than a house style.
FND·016
Shared edges create invisible lines that organise a layout and make it feel deliberate.
FND·003
Lines that separate, which should be the second choice after space rather than the first.
FND·047
Using size, weight, colour and space to make the structure of text visible before it is read.
FND·032
Difference is what makes anything perceivable, and it is measurable for text against its background.
FND·002
A fixed set of spacing values, so every gap in the product comes from the same vocabulary.
FND·042
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
Acting on many items at once, which is the difference between a tool and a chore for anyone working at volume.
PAT·017
Three ways to handle long result sets, each with a different cost, and the right choice depends on the task.
PAT·021
The screen before there is anything to show, which is a teaching opportunity rather than a gap.
PAT·010
What to show while waiting, chosen by how long the wait is and whether its length is known.
PAT·011
Components you will specify
Each entry covers the states, behaviour and accessibility contract you need to define.
The right tool for comparing many records across many attributes, and a large amount of behaviour to specify.
CMP·025
Splitting results into pages, which preserves position and keeps the footer reachable.
CMP·021
A small marker of status, category or count, which must not look like something you can press.
CMP·023
Accessibility requirements
Not a separate pass. These are the requirements this surface raises, mapped to the decisions that produce them.
Everything must be operable with a keyboard alone, which is the single most load-bearing accessibility requirement.
A11Y·002
Content must work at 400 percent zoom without horizontal scrolling, which is the same as working at 320 pixels wide.
A11Y·013
Software that reads the interface aloud, navigating by structure rather than by layout.
A11Y·005
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
Designing so the product can be adapted to other languages and regions without being rebuilt.
WRT·006
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
Watching people attempt real tasks, which is the most direct evidence available about whether a design works.
RES·001
Measuring what people do at scale, which tells you where problems are and never why they exist.
RES·010
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
Accounts, teams, permissions, billing and the surfaces every SaaS product needs and few design well.
CHK·007
Documents you might need
Fillable templates, prefilled so they are usable rather than empty.
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.
Hiding columns on small screens made the table tidy and removed the data field staff had opened it to see.
CASE·005
A generous, modern-looking redesign made a dashboard slower for the people who used it all day.
CASE·004
Designing something else?
Neighbouring territory. Each surface reuses much of the same material, arranged around the decisions that surface turns on.