killerapp_copywriter/references/ux-patterns.md

UX Writing Patterns

Button Labels

// Bad: Vague
<Button>Submit</Button>
<Button>OK</Button>

// Good: Verb + Noun, shows outcome
<Button>Create Account</Button>
<Button>Save Changes</Button>
<Button>Start Free Trial</Button>

Error Messages

Formula: What happened → Why → How to fix

// Bad
"Invalid input"
"Error 422"

// Good
"Please enter a valid email address"
"Password must be at least 8 characters"

Empty States

Formula: Headline → Explanation → Action

<EmptyState
  title="No results found"
  description="Try adjusting your search or filters"
  action={<Button>Clear Filters</Button>}
/>

Form Labels

<Label>
  Email Address
  <HelpText>We'll never share your email</HelpText>
</Label>

Loading States

// Bad: "Loading..."
// Good: "Creating your account..." / "Uploading (2/5)..."

Success Messages

<Toast
  message="Post published!"
  action={<Button>View Post</Button>}
/>

Tooltips

// Bad: Repeats label
<Tooltip content="Click to delete">

// Good: Adds context
<Tooltip content="This action cannot be undone">

Confirmation Dialogs

<Dialog
  title="Delete this post?"
  message="This will be permanently deleted."
  confirmButton="Delete Post"
  variant="destructive"
/>

Placeholder Text

// Bad: "Enter value"
// Good: "e.g., john@example.com"