By name: design-empty-states description: Create helpful, actionable zero-content states domain: ui-design skill-type: generative version: 1.0.0 author: refactoring-ui-expert prerequisites: [] dependencies: - 05-design-button-hierarchy
Skill: Design Empty States
Purpose
Create helpful, actionable empty/zero states that guide users forward instead of leaving them at a dead end.
Type
Generative + Evaluative
Input
- Context (what would be here normally)
- User state (first-time vs. cleared content)
- Available actions (what can the user do)
Output
- Empty state design specification
- Copy recommendations
- Primary action to highlight
- Pass/Fail assessment
Transformation Performed
Transforms blank screens into onboarding/guidance moments with context, explanation, and clear next steps.
Decision Criteria
PASS (Good Empty State)
- Explains what would be here (sets expectation)
- Tells user how to add content (clear instruction)
- Provides clear primary action button
- Uses appropriate illustration/icon (not generic)
- Friendly, helpful tone (not "No items found")
- Hides useless UI (tabs, filters that don't work without content)
FAIL (Poor Empty State)
- Blank screen or just "No data"
- Technical error message as empty state
- No guidance on what to do next
- Generic illustration unrelated to context
- Dead end with no actions
Empty State Components
Illustration/Icon (optional but helpful)
- Relevant to the content type
- Not generic "404" style
- Can be simple icon or custom illustration
Headline
- Friendly, explanatory
- Not "Empty" or "No items"
- Example: "No projects yet" or "Start your first campaign"
Description
- Brief explanation of what this area is for
- How to add content
- Benefits of adding content
Primary Action
- Clear CTA button
- Takes user to creation flow
- Obvious next step
Secondary Info (optional)
- Learn more link
- Example/template
- Import option
Types of Empty States
| Type | Context | Approach |
|---|---|---|
| First-time | New user, no content | Onboarding, education, clear CTA |
| User-cleared | User deleted everything | Confirmation, undo option, re-add CTA |
| No results | Search/filter returned nothing | Adjust filters, clear search, try different terms |
| No access | Permission restrictions | Explain why, how to request access |
| Error state | Failed to load | Retry action, support contact |
Common Failure Modes
| Failure | Description | Fix |
|---|---|---|
| The Void | Blank white space | Add context, illustration, CTA |
| Error as Empty | "404" or "Null" message | Distinguish error states from empty states |
| No Way Forward | Message but no action | Always provide primary CTA |
| Generic Illustration | Unrelated cute character | Use relevant icon or context illustration |
| Negative Framing | "You have no friends" | Positive framing: "Connect with people" |
| Too Much Info | Paragraphs of text | Keep to 1-2 sentences + CTA |
Prerequisites
- Understanding of user goals
- Knowledge of creation flow
Dependencies
design-button-hierarchy(needs clear primary action)apply-typography-scale(headline + body hierarchy)
Refactoring UI References
- "Never leave users at a dead end"
- "Empty states are opportunities"
- "Set expectations"
Example Assessment
Input: Dashboard showing "No data available" in small gray text, no other content
Evaluation: FAIL
- Negative framing
- No context about what should be here
- No action to take
- Visual treatment too subtle
Recommendation:
- Headline: "No reports yet"
- Description: "Create your first report to start tracking metrics"
- Primary button: "Create Report"
- Optional: Small illustration or icon
- Consider: Template/example preview