note · 2026-07-01 · 3 min
Designing useful empty states
Empty states should explain what happened and give users a credible next action.
Name the kind of empty
An empty product, an empty search result, and a loading failure are different states. Using one generic illustration and sentence for all three hides the action users need.
Preserve context
For filtered results, repeat the active constraint and offer to clear it. For first use, explain the value of adding the first item. For permissions, identify who can change access.
Keep it operable
The next action should be a real button or link, keyboard reachable, and described without relying on a decorative icon. Dynamic result counts and empty messages should be announced without stealing focus.
Related writing