Templates

Fillable templates for writing error messages, empty states, and onboarding flows

Use these templates to write consistent, effective UX text for common interface patterns. Each template includes structure, examples, and checklists.

Available templates

Error message template

Write clear, actionable error messages

Empty state template

Guide users when content is absent

Onboarding flow template

Design clear onboarding experiences

---

Error message template

Use this template to write clear, actionable error messages that help users recover.

Structure

[What failed] [Why it might have failed, if known] [What to do next]

Inline error (form validation)

Format: Brief, immediate correction guidance

[Field requirement or constraint]

Examples

• Email must include @
• Password needs 8+ characters
• Card number is incomplete
• Choose a future date

Detour error (recoverable problem)

Format: Problem + Solution

Structure

Title: [Action that failed]
Body: [Brief explanation]. [Recovery instruction].
Button: [Specific recovery action]

Blocking error (system issue)

Format: Clear explanation + Timeline + Reassurance

Structure

Title: [What's unavailable]
Body: [Why it's unavailable]. [When it will be available]. [Reassurance about user data].
Button: [Status check or alternative action]

Error message checklist

Before finalizing an error message, verify:

• Avoids blame — No “invalid,” “illegal,” “wrong,” “error”
• Empathetic tone — Acknowledge user frustration
• Specific problem — Not generic “something went wrong”
• Clear recovery — Tell user exactly what to do
• Front-loaded — Most important info first
• Active voice — “We couldn’t save” not “changes could not be saved”
• Human language — Not system codes or technical jargon

Voice variations by context

High-stakes error (payment, security, data loss)

Tone: Serious, clear, reassuring

We couldn't process your payment. Your card wasn't charged. Check your card details and try again.

Low-stakes error (optional feature, nice-to-have)

Tone: Light, helpful, not dramatic

Couldn't load preview. Refresh to try again.

First-time user error

Tone: Educational, patient

Profile photo must be under 5MB. Try a smaller file or compress your image.

Common mistakes

Don't

• “An error occurred”
• “Invalid email address”
• “ERR_CONNECTION_TIMEOUT”
• “Upload failed”
• “Your request could not be processed”

Do

• “We couldn’t save your changes”
• “Email must include @”
• “Connection timed out. Check your internet and try again.”
• “Upload failed. Check your file size and try again.”
• “We couldn’t process your request”

Quick fill template

Use this for rapid error message drafting:

1. Identify what failed

   What action or operation didn’t work?

2. Determine why (if known)

   What likely caused the failure?

3. Specify what user should do

   What specific action will help them recover?

4. Write the draft

   [What failed]. [Why, if known]. [Next action].

Example:

• What failed: Couldn’t send invite
• Why: Email bounced
• What to do: Check spelling
• Draft: “Couldn’t send invite. Check the email address and try again.”

---

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]

First-use empty state

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

Structure

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

User-cleared empty state

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

Structure

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

Error/no results empty state

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

Structure

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

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

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

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

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 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.

Common mistakes

Don't

• “You have no contacts”
• “Empty”
• Three different buttons competing
• Long paragraph explaining the feature
• “No records found in database”

Do

• “No contacts yet”
• “No contacts yet. Import to get started.”
• One clear next action
• One sentence benefit, clear button
• “No projects found”

---

Onboarding flow template

Use this template to design clear, encouraging onboarding experiences that help users succeed quickly.

Onboarding principles

Show value early

Help users succeed in their first session

Progressive disclosure

Don’t overwhelm with all features at once

Optional whenever possible

Let users skip and explore

Celebrate small wins

Acknowledge each completed step

Be concise

Users want to start using the product, not read about it

Core flow structure

1. Welcome

   Orient user and set expectations

2. Setup

   Collect essential information only

3. First success

   Guide user to their first win

4. Next steps

   Suggest logical next actions

Each step should answer:

• Where am I? (Progress indicator)
• What do I do here? (Clear instruction)
• Why does this matter? (Benefit to user)
• Can I skip this? (Exit option)

Welcome screen template

Purpose: Orient user and set expectations

Structure

Headline: [Welcome + value proposition]
Body: [2-3 benefits, bulleted]
Primary CTA: [Get started action]
Secondary CTA: [Sign in, if applicable]

Account setup template

Purpose: Collect essential information only

Structure

Title: [Action-oriented title]
Body: [Why this information is needed]
Fields: [Minimum required fields]
Primary CTA: [Continue/Next action]
Secondary CTA: [Skip, if truly optional]

Best practices:

• Only ask for what you absolutely need now
• Explain why each field is required
• Use smart defaults when possible
• Allow skipping optional steps

Feature introduction template

Purpose: Teach one feature at a time through action

Structure

Title: [Feature name + benefit]
Body: [Brief explanation, 1-2 sentences]
Visual: [Screenshot or illustration]
Primary CTA: [Action to try the feature]
Secondary CTA: Skip / Next
Progress: [X of Y steps]

Best practices:

• Show, don’t tell (use visuals)
• Let users try immediately
• Keep explanations under 20 words
• Always allow skipping

Success/completion template

Purpose: Celebrate user’s first win, encourage next action

Structure

Title: [Celebratory statement]
Body: [What they accomplished + what's possible next]
Primary CTA: [Next natural action]
Secondary CTA: [Alternative or exit to product]

Best practices:

• Use exclamation points sparingly (once per flow max)
• Make the celebration feel earned
• Suggest logical next step
• Provide exit to main product

Onboarding step checklist

For each step in your onboarding flow, verify:

• Single focus — One action or concept per step
• Clear value — User knows why this matters
• Actionable — User knows exactly what to do
• Skipable — Optional steps can be skipped
• Progress visible — User knows how many steps remain
• Concise — Body text under 30 words
• Appropriate tone — Encouraging without being patronizing

Content patterns by step type

Welcome/Introduction

Pattern: “Welcome to [Product]. [Do X to achieve Y].”

Examples:

• “Welcome to Notion. Create beautiful docs, wikis, and projects.”
• “Welcome to Figma. Design, prototype, and collaborate in real time.”

Permission request

Pattern: “Enable [permission] to [specific benefit]”

Examples:

• “Enable notifications to stay updated on team activity”
• “Allow camera access to scan documents instantly”

Feature tutorial

Pattern: “[Action]. [Brief benefit].”

Examples:

• “Add your first task. Stay organized and never miss a deadline.”
• “Create a workspace. Collaborate with your team in one place.”

Completion

Pattern: “[Celebration]! [What’s now possible]. [Optional: Next step]”

Examples:

• “You’re ready to go! Start creating, or invite teammates to collaborate.”
• “Setup complete! Your workspace is ready for your team.”

Tone variations

Professional/B2B

Title: Set up your workspace
Body: Add team members and create your first project.
CTA: Continue setup

Consumer/casual

Title: Let's get you started!
Body: This will only take a minute.
CTA: Let's go

Technical/developer

Title: Configure your environment
Body: Connect your repository to start deploying.
CTA: Connect repo

Multi-screen flow example

View complete 4-screen flow

Screen 1: Welcome

Welcome to WriteRight

Write better, faster with AI-powered editing.

• Fix grammar instantly
• Improve clarity and tone
• Write with confidence

[Get started]

Screen 2: Setup

What brings you to WriteRight? (2 of 4)

Select all that apply:
□ Business writing
□ Creative writing
□ Student papers
□ Personal projects

[Continue] [Skip]

Screen 3: First action

Try it out (3 of 4)

Paste any text below and watch WriteRight improve it.

[Text input box]

[Analyze my writing] [Skip]

Screen 4: Success

Nice work!

You improved your first piece of writing. Ready to write your next masterpiece?

[Start writing] [See tips]

Common mistakes

Don't

• Too many steps (10+ screens)
• Feature dump (“Here are 47 things!”)
• No skip option
• Passive voice (“Your account has been created”)
• Corporate speak (“Facilitate enhanced productivity”)

Do

• Focused flow (3-5 steps to first value)
• Progressive disclosure (one key feature at a time)
• Respect choice (skip available)
• Active voice (“You created your account!”)
• Plain language (“Get more done”)

Testing your onboarding

Questions to answer:

Can users complete onboarding in under 2 minutes?

Time your onboarding flow from start to finish. If it takes longer than 2 minutes, consider removing steps or making more optional.

Do users achieve something meaningful in their first session?

Users should complete at least one core action (create project, send message, upload file) before onboarding ends.

Can users skip optional steps without confusion?

Test that skip buttons work and users aren’t penalized for skipping.

Is the tone encouraging without being condescending?

Read your copy out loud. Does it sound patronizing or genuinely helpful?

Does each screen have a single, clear purpose?

Each screen should teach one concept or collect one piece of information.