Design problem

Data-heavy interfaces

Thousands of rows, dozens of columns, and an interface that makes people export to a spreadsheet instead.

How you know you have it

1Put filter and sort state in the URL.
2Freeze the identifying column and the header row.
3Offer a density control rather than choosing for everyone.
4On narrow screens, switch to a per-record layout instead of shrinking the table.

Finding one record and comparing many are different jobs. A single layout rarely serves both well.

Filters, sorts and selections that are not in the URL cannot be shared, bookmarked or restored.

Analysts want more rows. Occasional users want breathing room. A density control settles the argument.

Table work turns on state, comparison and density, so these entries cover the pattern, the component and the foundations that decide readability.

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

Recognition Over Recall
Recognising something on screen is far easier than remembering it, so keep the information visible.
HeuristicExpert heuristic
Flexibility and Efficiency of Use
Accelerators that experts use and novices ignore let one interface serve both populations.
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
Doherty Threshold
Below roughly 400 milliseconds of system response, people stop waiting on the machine and productivity rises sharply.
LawEstablished 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
Alignment
Shared edges create invisible lines that organise a layout and make it feel deliberate.
UI foundationCraft convention
Readability
How easily continuous text can be read, governed mostly by size, line length, leading and contrast.
UI foundationMixed evidence
Contrast
Difference is what makes anything perceivable, and it is measurable for text against its background.
UI foundationCraft convention
Grids
A shared structure that makes alignment automatic and layout decisions repeatable.
UI foundationCraft convention
Responsive Layout
One layout that reflows across sizes, ideally driven by content limits rather than by device categories.
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
Bulk Actions
Acting on many items at once, which is the difference between a tool and a chore for anyone working at volume.
PatternCraft convention
Infinite Scroll and Pagination
Three ways to handle long result sets, each with a different cost, and the right choice depends on the task.
PatternCraft convention
Comparison
Putting options side by side so differences can be seen rather than remembered.
PatternCraft convention
Loading States
What to show while waiting, chosen by how long the wait is and whether its length is known.
PatternCraft convention

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

Data Table
The right tool for comparing many records across many attributes, and a large amount of behaviour to specify.
ComponentCraft convention
Pagination
Splitting results into pages, which preserves position and keeps the footer reachable.
ComponentCraft convention
Checkbox
Independent on or off choices, where the label is part of the target.
ComponentCraft convention
Menu
A list of actions revealed on demand, which is where infrequent operations belong.
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.

Keyboard Navigation
Everything must be operable with a keyboard alone, which is the single most load-bearing accessibility requirement.
AccessibilityCraft convention
Screen Readers
Software that reads the interface aloud, navigating by structure rather than by layout.
AccessibilityCraft convention
Reflow and Zoom
Content must work at 400 percent zoom without horizontal scrolling, which is the same as working at 320 pixels wide.
AccessibilityCraft convention
Focus Indicators
The visible marker showing where keyboard focus is, which must never be removed.
AccessibilityCraft convention

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

Contextual Inquiry
Watching people work in their own environment, which surfaces the context that interviews miss.
Research methodEstablished research
Usability Testing
Watching people attempt real tasks, which is the most direct evidence available about whether a design works.
Research methodEstablished research

Interactive review passes, with progress saved in your browser.

UX Audit Checklist
A structured pass across the whole product, organised by the same categories as the audit tool.
ChecklistExpert heuristic
Mobile UX Checklist
Touch targets, reach, input, performance and the assumptions that only fail on a phone.
ChecklistCraft convention

Worked cases, including the options that were rejected.

Putting a Data Table on a Phone
Hiding columns on small screens made the table tidy and removed the data field staff had opened it to see.
Case studyCraft convention
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.