Pathwise

Manuals / UI/UX Foundations / Chapter 9

C · Structure · advanced · Week 4–5 · Chapter 9 of 13

Empty, loading, error & success states

Production UI is mostly edge states. Design all four for one feature — reviewers notice missing error paths.

Path progress
64%

Step 1 of 3

State inventory

For one list or form feature: default, loading, empty, error, success.

State inventoryDrag stickies · tap for tips
Study mapDrag stickies · tap for tipsKeep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Assert the UIdrag · tap →Retry wiselydrag · tap →Seed datadrag · tap →Close the loopdrag · tap →Keep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Pathwise hackdrag · tap →State inventorydrag · tap →Try thisdrag · tap →Follow the dashed drag · tap →

Do this now

Table in notebook: state × user need × UI treatment.

Was this step clear?
Chapter learning outcomes
  • Four state model
  • Skeleton vs spinner
  • Error copy that helps
  • Success confirmation

Clear these before you leave

Side quest

Trigger states

Use DevTools network throttle or airplane mode to screenshot real app states — compare to yours.