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.
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.
Working memory is a narrow channel, and interfaces spend it on three kinds of work, only one of which is useful.
Time to complete a task falls as a power function of repetitions, so expert speed depends on the interface staying stable.
A small share of features carries most of the use, which is a prompt to go and measure rather than an excuse to cut.
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.
Shared edges create invisible lines that organise a layout and make it feel deliberate.
Lines that separate, which should be the second choice after space rather than the first.
Using size, weight, colour and space to make the structure of text visible before it is read.
Difference is what makes anything perceivable, and it is measurable for text against its background.
A fixed set of spacing values, so every gap in the product comes from the same vocabulary.
Patterns to reach for
Solutions people already recognise, with the conditions under which each one earns its place.
Reordering a set, where the default order is the decision that matters most.
Narrowing a large set by attributes, which is what makes large catalogues navigable at all.
Acting on many items at once, which is the difference between a tool and a chore for anyone working at volume.
Three ways to handle long result sets, each with a different cost, and the right choice depends on the task.
The screen before there is anything to show, which is a teaching opportunity rather than a gap.
What to show while waiting, chosen by how long the wait is and whether its length is known.
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.
Splitting results into pages, which preserves position and keeps the footer reachable.
Independent on or off choices, where the label is part of the target.
A small marker of status, category or count, which must not look like something you can press.
A list of actions revealed on demand, which is where infrequent operations belong.
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.
Content must work at 400 percent zoom without horizontal scrolling, which is the same as working at 320 pixels wide.
Interactive targets need to be large enough and spaced enough to hit reliably.
Software that reads the interface aloud, navigating by structure rather than by layout.
Telling assistive technology that something changed, when focus did not move to say so.
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.
Designing so the product can be adapted to other languages and regions without being rebuilt.
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.
Watching people attempt real tasks, which is the most direct evidence available about whether a design works.
Measuring what people do at scale, which tells you where problems are and never why they exist.
Check your work
Interactive checklists, with progress saved in your browser.
Whether a dashboard answers a question or just displays numbers.
A practical WCAG 2.2 AA review pass, ordered so the checks that find the most problems come first.
Accounts, teams, permissions, billing and the surfaces every SaaS product needs and few design well.
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.
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.
A generous, modern-looking redesign made a dashboard slower for the people who used it all day.
Designing something else?
Neighbouring territory. Each surface reuses much of the same material, arranged around the decisions that surface turns on.