System States
Everyone polishes the happy path. The empty screens, the spinners, the "all done" — those get left blank, and that's exactly where you get to stand out.
Learn on the move: press play and turn your commute, walk or drive into time that grows your design career.
Listen to the full System States course on DesignPath
These quiet moments are where a product feels either thoughtful or unfinished: a first impression, a held breath, a small celebration. Treat them as opportunities instead of leftovers, and the whole experience starts to feel like someone genuinely cared.
When It Matters Most
- First run and onboarding — the empty state is a new user's very first impression of a feature.
- Slow operations — uploads, imports, payments, where a silent wait breeds doubt.
- High-effort completions — after real work, people deserve a real sense of "done."
These are the moments users feel most uncertain — and the easiest places to quietly exceed their expectations.
What This Module Covers
Two kinds of quiet screen, both worth designing: the empty state that guides instead of just reporting, and the loading and success states that set expectations and bring closure. The next articles show you how.
Empty States
The empty state is the screen every team forgets and every new user sees first. You open a fresh app and there's nothing there yet — no messages, no files, no history. That blank space is either a dead end or your best shot at showing someone what to do next. Most products waste it.
Empty States Should Guide
"There's nothing here yet" describes a state without doing anything useful with it. Empty states are an underused conversion and engagement opportunity. Good empty state copy provides a way out — a specific next step that moves the user toward value:
- ❌ "No messages yet."
- ✓ "No messages yet. Start a conversation with your team →"
- ✓ "You haven't saved anything. Tap the bookmark icon on any article to find it here later."
- Headspace explains how to download favorite sessions from an empty offline library — the empty state teaches the feature rather than just reporting its absence.
Know the Three Empty States
The right words depend on why the space is empty. The same screen has three very different causes, and each needs a different message:
- First use — the user hasn't done anything yet. Onboard them: explain what goes here and give one clear action to fill it.
- User-cleared — they emptied it on purpose (inbox zero, finished todos). Acknowledge the win and, if useful, offer the next thing.
- No results — a search or filter returned nothing. Don't dead-end them: confirm what was searched and offer a way to broaden or reset.
The best empty states anticipate which of these the user is in and speak to that exact situation. (Ask AI to draft a line for each of the three causes, then tighten the one you need.)
Don't Waste the Space
Empty space is room for guidance, not for stating the obvious. Placeholder text that says "Search" or "Press to continue" tells users what they already know. Spend that space on information that actually helps — examples of what they can search for, what a feature will do for them, why it's worth setting up.
