Design problem
The interface feels slow
Every action pauses. Whether the numbers are bad or not, the product feels heavy to use.
How you know you have it
- Spinners appear for operations that complete in under a second.
- Content jumps as images and panels finish loading.
- Typing lags behind the keyboard in a search field.
- People double-submit because nothing acknowledged the first attempt.
Do these first
- 1Acknowledge every action immediately, even if the result is not ready.
- 2Reserve space for anything that arrives asynchronously.
- 3Use optimistic updates where rollback is cheap and honest.
- 4Show determinate progress for anything over a couple of seconds.
Why it happens
Unacknowledged actions
Perceived speed is mostly about feedback timing. An action acknowledged in under a tenth of a second feels immediate even when the result takes longer.
Layout that settles after arrival
Reserved space costs nothing and removes the most irritating category of slowness.
Waiting shown without progress
An indeterminate spinner for a long operation gives no information and makes the wait feel longer than it is.
What to read, and why
Perceived performance is an interface problem before it is an engineering one, so these entries cover feedback, skeletons and optimistic updates alongside the measurement work.
Why it behaves this way
5The mechanism underneath the symptom. Read these when the fix needs justifying to somebody else.
Doherty Threshold
Below roughly 400 milliseconds of system response, people stop waiting on the machine and productivity rises sharply.
LawEstablished research
Feedback
Every action needs a perceivable response that says it was received and what it did.
PrincipleExpert heuristic
Visibility of System Status
The interface should always tell the user what is going on, through timely and appropriate feedback.
HeuristicExpert heuristic
Flow
Absorbed, effortless concentration occurs when challenge and skill are balanced, and interruptions destroy it.
PsychologyEstablished research
Peak-End Rule
People judge an experience by its most intense moment and its ending, not by the average of the whole thing.
LawEstablished research
The craft decisions
3The visual and structural levers that produce or relieve this problem.
Motion
Animation should explain a change, and anything that does not explain something is delay.
UI foundationCraft convention
Visual States
Every interactive element needs a defined appearance for every state it can be in, and most designs specify only two.
UI foundationCraft convention
Whitespace
Empty space is a design element that groups, emphasises and sets pace, not leftover area.
UI foundationCraft convention
Patterns that address it
4Recognised solutions, with the conditions under which each earns its place.
Loading States
What to show while waiting, chosen by how long the wait is and whether its length is known.
PatternCraft convention
Skeleton Screens
Grey placeholders in the shape of the content that is coming, which reads as progress rather than as waiting.
PatternMixed evidence
Optimistic UI
Apply the change immediately and reconcile with the server afterwards, so the interface never waits on the network.
PatternCraft convention
Empty States
The screen before there is anything to show, which is a teaching opportunity rather than a gap.
PatternCraft convention
Components involved
3States, behaviour and the accessibility contract you will need to specify.
Progress Indicator
Communicating how far through something the user is, which requires honesty about what you can measure.
ComponentCraft convention
Toast
A brief confirmation that disappears, which makes it unsuitable for anything the user must act on.
ComponentCraft convention
Button
Triggers an action. If it navigates somewhere, it should be a link instead.
ComponentCraft convention
Language
1Where 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
Accessibility requirements
2The requirements this problem raises, mapped to the decisions that produce them.
Status Messages and Live Regions
Telling assistive technology that something changed, when focus did not move to say so.
AccessibilityCraft convention
Reduced Motion
Large-scale motion can cause nausea and dizziness, so the system preference must be honoured.
AccessibilityEstablished research
How to find out
2Methods suited to confirming the cause before you commit to a fix.
Product Analytics
Measuring what people do at scale, which tells you where problems are and never why they exist.
Research methodCraft convention
Usability Testing
Watching people attempt real tasks, which is the most direct evidence available about whether a design works.
Research methodEstablished research
Check your work
2Interactive review passes, with progress saved in your browser.
Pre-Launch Checklist
The pass before shipping, covering states, edge cases, accessibility, performance and the things that only break in production.
ChecklistCraft convention
Mobile UX Checklist
Touch targets, reach, input, performance and the assumptions that only fail on a phone.
ChecklistCraft convention
Decisions other teams made
1Worked cases, including the options that were rejected.
Fixing a Search That Returned Nothing
A large share of searches returned nothing, and the fix was vocabulary rather than the search engine.
Case studyCraft convention
Where this usually shows up
The same material, organised around the surface you are building rather than the symptom you are fixing.