Empty State Copy
5 exercises — Practice writing helpful, action-driving empty states for first-time zero states, search results, setup flows, social feeds, and billing pages.
0 / 5 completed
1 / 5
A team collaboration tool shows this empty state when a user has no projects: "No projects." What should the empty state include?
Empty states should turn the blank void into an invitation — with context, value framing, and a single CTA.
The empty state's three jobs:
1. Explain the context — what is a project? Why would they want one?
2. Set the zero-state expectation — this is normal, everyone starts here
3. Provide one clear CTA — the exact next step to fill the empty state
Option A — motivational quotes are a UX anti-pattern; they don't help users accomplish anything
Option B — deflecting to admin is only appropriate for enterprise tools with strict provisioning models
Option D — explains via navigation instruction; verbose; no clear CTA
Option C ✓ — contextualizes + invites action in a visually engaging way
Empty state principles:
• If it's a first-time state, explain the value before asking for action
• If it's a search/filter result empty state, offer to reset filters or broaden search
• If it's a loading/error state, distinguish clearly from empty data
Key vocabulary:
• Empty state — the UI state shown when a section has no content yet
• Zero-state design — designing specifically for first-time users who have no data
• Activation CTA — the CTA that triggers the first meaningful user action
• Value framing — explaining the benefit of a feature before asking users to set it up
The empty state's three jobs:
1. Explain the context — what is a project? Why would they want one?
2. Set the zero-state expectation — this is normal, everyone starts here
3. Provide one clear CTA — the exact next step to fill the empty state
Option A — motivational quotes are a UX anti-pattern; they don't help users accomplish anything
Option B — deflecting to admin is only appropriate for enterprise tools with strict provisioning models
Option D — explains via navigation instruction; verbose; no clear CTA
Option C ✓ — contextualizes + invites action in a visually engaging way
Empty state principles:
• If it's a first-time state, explain the value before asking for action
• If it's a search/filter result empty state, offer to reset filters or broaden search
• If it's a loading/error state, distinguish clearly from empty data
Key vocabulary:
• Empty state — the UI state shown when a section has no content yet
• Zero-state design — designing specifically for first-time users who have no data
• Activation CTA — the CTA that triggers the first meaningful user action
• Value framing — explaining the benefit of a feature before asking users to set it up