Key Insight
Every interface state-loading, empty, error, success-is a moment that either builds or breaks user trust; design each one intentionally.
Key Points
- •Loading thresholds: <100ms show nothing, 100ms–1s use a subtle spinner, 1–10s show progress with explanation, >10s allow users to do other tasks
- •Skeleton screens feel 15–20% faster than spinners because they set layout expectations and reduce perceived wait time
- •Empty states should explain what will appear, guide users toward their first action, and add personality to build engagement
- •Error states must appear inline near the problem, use color + icon + text (never color alone), and explain both what went wrong AND how to fix it
- •Success confirmation should acknowledge the completed action, suggest logical next steps, and avoid blocking the user with unnecessary modals
- •Every interactive component needs defined states: default, hover, focus, active, disabled-design all of them intentionally
Guidelines
- ✓Use optimistic UI for low-risk actions (likes, toggles) to provide instant feedback while the server catches up
- ✓Show a loading delay indicator only after 300ms-most actions complete before then and flashing a spinner feels janky
- ✓Write error messages in plain language: "That email is already registered. Try signing in instead." not "Error 409: Conflict"
- ✓Animate state transitions (200–300ms) so changes feel connected rather than jarring
- ✓Design empty states as onboarding opportunities: show what's possible and invite the first action
- ✓For destructive actions, confirm with a reversible undo rather than a blocking "Are you sure?" dialog
Want to learn this interactively?
Experience hands-on experiments and test your understanding.
🔥
Practice this topic
Active recall - strengthens long-term retention