C · StructureAdvanced45 min read
9. Empty, loading, error & success states
UI/UX Foundations · 52 pages source format
Production UI is mostly edge states. Design all four for one feature — reviewers notice missing error paths.
What you'll learn
- Four state model
- Skeleton vs spinner
- Error copy that helps
- Success confirmation
State inventory
For one list or form feature: default, loading, empty, error, success.
Do this now
Table in notebook: state × user need × UI treatment.
Clear?
Design four frames
Notifications list or order history — design loading, empty, error, success in Figma.
Do this now
4 Figma frames with consistent layout shell.
Clear?
Error copy
Say what happened + what to do. No “Error 422”.
Bad: "Something went wrong."
Good: "Payment didn't go through. Check card number or try another card."Do this now
Rewrite 2 error messages from your app into human copy.
Clear?