UX writingExpert heuristicFoundational
Loading and Progress Copy
Say what is happening, how long it will take if you know, and whether it is safe to leave.
Definition
Loading copy accompanies any wait the reader can perceive. Its job is to convert an unexplained pause into an understood one, and to say whether the reader is needed.
Expert heuristic. A review criterion developed by practitioners. Useful and widely taught, but evaluated by judgement rather than measurement.
On this page
The same wait, three ways
| Weak | Better | Best | Why the last one wins |
|---|---|---|---|
| Loading… | Loading your reports | Loading 12 months of reports, about 10 seconds | Sets an expectation that the reader can decide against. |
| Please wait | Uploading | Uploading 3 of 8 files. You can keep working. | Says the wait does not require attention. |
| Processing | Generating your export | Generating your export. We will email you when it is ready. | Releases the reader from the screen entirely. |
| Almost there | Finishing up | Applying changes to 1,204 records | Describes real work instead of pretending to be nearly done. |
What to show at each duration
The threshold matters more than the wording. Words cannot rescue an unacknowledged action.
- Under about 100 milliseconds: nothing. Feedback that appears and vanishes reads as a glitch.
- Up to about a second: an immediate state change on the control itself, with no text.
- One to about ten seconds: a skeleton or determinate progress, plus a sentence naming the work.
- Longer than that: progress, an estimate if honest, and a way to leave and be notified.
Writing them
Do
- Name the specific work: 'Checking availability', not 'Processing'.
- Say when the reader is free to go elsewhere.
- Announce completion through a live region so it is not missed by anyone not watching that area.
- Keep the message stable. Text that cycles through jokes makes a long wait feel longer.
Do not
- Do not claim progress you are not measuring.
- Do not use humour on a wait that might fail.
- Do not leave a failed operation showing a spinner.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Related concept
Connected closely enough to change how you apply this.
- Status Messages and Live RegionsAccessibility
- Progress IndicatorComponent
- Loading StatesPattern
- Skeleton ScreensPattern
- MicrocopyUX writing