Skip to main content
UX text patterns provide tested, reusable structures for common interface elements. Following these patterns ensures consistency and helps users understand what to expect.

​
Titles

Purpose: Orient users to where they are Format: Noun phrases, sentence case Types:
  • Brand titles (“Settings”, “Dashboard”)
  • Content titles (“Your library”, “Recent orders”)
  • Category titles (“Account”, “Privacy”)
  • Task titles (“Create new post”, “Edit profile”)

​
Examples

Account settings
Your library
Create new post
Use sentence case for all titles: “Account settings” not “Account Settings”
Purpose: Enable users to take action Format: Active imperative verbs, sentence case Pattern: [Verb] [object]

​
Examples

Save changes
Delete account
View details
Download report
Avoid generic labels like “OK”, “Submit”, or “Click here”. They lack context and don’t work well with screen readers.

​
Button length targets

  • Ideal: 2-4 words
  • Maximum: 6 words
  • Character count: 15-25 characters

​
Error messages

Purpose: Explain problem and provide solution Format: Empathetic, clear, actionable Pattern: [What failed]. [Why/context]. [What to do]. Error messages adapt based on type and severity:
When to use: Show as user completes field or on blurPattern: [Field] [specific requirement]Examples:
  • “Email must include @”
  • “Password must be at least 8 characters”
  • “Choose a date in the future”
Timing: Real-time or on field exitLocation: Below or beside the field
When to use: When backend operations failPattern: [Action failed]. [Likely cause]. [Recovery step].Examples:
  • “Payment failed. Your card was declined. Try a different payment method.”
  • “Couldn’t save changes. Connection lost. Reconnect and try again.”
  • “Upload failed. File is too large. Choose a file under 10MB.”
Timing: Immediately after failureLocation: Modal dialog or prominent banner
When to use: Prevent continued use until resolvedPattern: [What's blocked]. [Why]. [Specific action needed].Examples:
  • “Update required. This version is no longer supported. Update now to continue.”
  • “Subscription expired. Your account is paused. Renew subscription to restore access.”
  • “Verification needed. Confirm your email to access features. Check your inbox.”
Timing: On app launch or feature accessLocation: Full screen or large modal
When to use: When requesting device permissionsPattern: [User benefit]. [Permission needed].Examples:
  • “Get notified when orders ship. Enable notifications.”
  • “Find nearby stores. Allow location access.”
  • “Back up your photos. Grant storage permission.”
Timing: When feature is first usedLocation: In context of the feature

​
What to avoid in error messages

Never use these in error messages:
  • Technical codes without explanation (“Error 403”)
  • Blame language (“invalid input”, “illegal character”)
  • Robotic tone (“An error has occurred”)
  • Dead ends (error with no recovery path)
  • Vague causes (“Something went wrong”)

​
Success messages

Purpose: Confirm action completion Format: Past tense, specific, encouraging Pattern: [Action] [result/benefit]

​
Examples

Changes saved
Email sent
Profile updated
Photo uploaded
Use past tense to confirm the action is complete: “Changes saved” not “Saving changes”

​
Length targets

  • Simple actions: 2-3 words (“Changes saved”)
  • Complex actions: 4-6 words (“Profile updated. Your changes are live.”)
  • Maximum: 10-15 words total

​
Empty states

Purpose: Guide users when content is absent Types:
  • First-use (never had content)
  • User-cleared (user removed all content)
  • Error/no results (search or filter returned nothing)
Format: Explanation + CTA to populate

​
Examples

No messages yet. Start a conversation to connect with your team.
Empty states should always include a clear next action. Don’t leave users stuck.

​
Structure

  1. Headline: Explain why it’s empty (3-6 words)
  2. Description: Provide context (8-12 words)
  3. CTA: Clear action to populate (2-4 words)

​
Form fields

Form fields need multiple text elements working together:
Purpose: Describe what input is neededFormat: Clear noun phrasesExamples:
  • “Email address”
  • “Phone number”
  • “Date of birth”
Best practices:
  • Always visible (not hidden as placeholder)
  • Sentence case
  • No punctuation at end
Purpose: Explain why information is needed or how to format itFormat: Verb-first, clear purposeExamples:
  • “We’ll use this to contact you about your order”
  • “Choose a password with at least 8 characters”
  • “Enter your code in the format: XXX-XXX-XXX”
Display:
  • Static (always visible) for important requirements
  • On-demand (tooltip/help icon) for optional context
Purpose: Show format example for standard inputsFormat: Example, not instructionExamples:Best practices:
  • Use sparingly
  • Never replace labels
  • Only for standard, recognizable formats
Purpose: Provide additional guidance or constraintsFormat: Brief, specificExamples:
  • “Maximum 160 characters”
  • “Only letters and numbers allowed”
  • “This will be visible to other users”
Timing:
  • Static for important information
  • Dynamic (on focus) for helpful hints

​
Notifications

Purpose: Deliver timely, valuable information Types:
  • Action-required (intrusive, demands attention)
  • Passive (less intrusive, informational)
Format: Verb-first title + contextual description

​
Examples

Title: Update required
Body: Install the latest version to continue.

​
Structure

  1. Title: Action or event (3-6 words)
  2. Body: Context and details (8-12 words)
  3. CTA: Optional action button (2-4 words)

​
Length targets

  • Title: 35-45 characters
  • Body: 10-15 words
  • Total: 15-20 words maximum
Don’t overuse action-required notifications. Too many interruptions train users to ignore all notifications.