templates/empty-state-template.md

Empty State Template

Use this template to guide users when content is absent and help them take action to populate the space.

Structure

[Title explaining the empty state] [Brief explanation or encouragement] [Clear call to action]

Template Types

First-Use Empty State

Purpose: Guide new users to populate content Tone: Inviting, encouraging, clear on benefit

**Title**: [What's empty]
**Body**: [Brief benefit of adding content]
**Button**: [Specific action to populate]

Example:

**Title**: No projects yet
**Body**: Create your first project to start organizing work.
**Button**: Create project

User-Cleared Empty State

Purpose: Confirm completion, positive reinforcement Tone: Positive, celebratory (appropriately)

**Title**: [Positive completion statement]
**Body**: [Optional: What happens next or when new content appears]

Example:

**Title**: You're all caught up
**Body**: New tasks will appear here when they're assigned to you.

Error/No Results Empty State

Purpose: Suggest alternatives when search/filter returns nothing Tone: Helpful, solution-focused

**Title**: [What wasn't found]
**Body**: [Suggestion to modify or alternative action]
**Button**: [Alternative action]

Example:

**Title**: No results for "vintage cameras"
**Body**: Try different keywords or browse all items.
**Button**: Browse all items

Empty State Checklist

Before finalizing an empty state, verify:

• Clear context — User knows what's empty and why
• Actionable — Provides specific next step
• Appropriate tone — Matches emotional context
• Value-focused — Shows benefit of taking action
• Concise — Brief enough to scan quickly
• Avoids negativity — No "nothing here" or "you have no..."

Content Patterns by Type

First-Use (Onboarding)

Pattern: "No [content] yet. [Benefit statement]. [Action]"

Examples:

• "No contacts yet. Import contacts to start messaging. Import contacts"
• "No favorites saved. Save items to find them quickly later. Browse items"
• "No team members yet. Invite people to collaborate on projects. Invite team"

User-Cleared (Completion)

Pattern: "All [done/complete/caught up]. [Optional: when more appears]"

Examples:

• "All tasks complete. New tasks appear when teammates assign them to you."
• "Inbox zero! You've read all your messages."
• "You're all set. Check back tomorrow for new recommendations."

No Results (Search/Filter)

Pattern: "No [content] match [criteria]. [Suggestion]. [Alternative]"

Examples:

• "No files match your search. Try different keywords or view all files."
• "No events this month. See upcoming events or create an event."
• "No team members match these filters. Clear filters to see all members."

Permission/Access Required

Pattern: "[Content] isn't available. [Why]. [How to get access]"

Examples:

• "Reports aren't available yet. Upgrade to Premium to access detailed analytics. View plans"
• "This folder is private. Ask the owner to share it with you."
• "Calendar events are hidden. Enable calendar sync in settings to see events."

Voice Variations

Professional/B2B Product

**Title**: No documents uploaded
**Body**: Upload files to share with your team.
**Button**: Upload document

Consumer/Friendly Product

**Title**: Nothing here yet!
**Body**: Start adding favorites to build your collection.
**Button**: Find favorites

Serious/High-Stakes Product

**Title**: No alerts
**Body**: Your systems are running normally.

Illustration Guidance

When working with designers on empty state illustrations:

First-use: Optimistic, inviting imagery (open boxes, blank canvases, starting points) User-cleared: Positive, completion imagery (checkmarks, clean spaces, celebrations) No results: Neutral, helpful imagery (search icons, magnifying glasses, directional arrows)

Common Mistakes to Avoid

❌ Negative framing: "You have no contacts" ✅ Neutral/positive: "No contacts yet"

❌ No guidance: "Empty" ✅ Actionable: "No contacts yet. Import to get started."

❌ Multiple CTAs: Three different buttons competing ✅ Single primary CTA: One clear next action

❌ Too much text: Long paragraph explaining the feature ✅ Concise: One sentence benefit, clear button

❌ Technical: "No records found in database" ✅ Human: "No projects found"

Quick Fill Template

Use this for rapid empty state drafting:

Empty state type: (First-use / User-cleared / No results / Permission) What's empty: Why it's empty: What user should do: User benefit:

Draft: Title: [What's empty] Body: [Benefit of action or what happens next] Button: [Specific action]

Example filled:

• Type: First-use
• What's empty: Saved reports
• Why: New user
• What to do: Create or save a report
• Benefit: Quick access to important data

Draft: Title: No saved reports yet Body: Save reports to access your most important data quickly. Button: Create report