Microcopy

What is Microcopy?

Microcopy: Small bits of text that guide users through interfaces

Examples

code

Button labels: "Sign Up", "Get Started"
Form labels: "Email", "Password"
Placeholders: "Enter your email"
Tooltips: "Your password must be at least 8 characters"
Empty states: "No messages yet"

Button Copy

Action Buttons

code

Bad:  "Submit"
Good: "Create Account"

Bad:  "Click Here"
Good: "Download Report"

Bad:  "OK"
Good: "Save Changes"

Primary vs Secondary

code

Primary (strong action):
"Save and Continue"

Secondary (alternative):
"Save as Draft"

Destructive Actions

code

Bad:  "Delete"
Good: "Delete Forever"

Confirmation:
"Are you sure you want to delete this project?"
[Cancel] [Delete Project]

Form Labels

Be Clear and Concise

code

Bad:  "Electronic Mail Address"
Good: "Email"

Bad:  "Your Full Legal Name"
Good: "Full Name"

Use Sentence Case

code

Bad:  "EMAIL ADDRESS"
Good: "Email address"

Optional vs Required

code

Required (default):
"Email"

Optional (mark explicitly):
"Phone number (optional)"

Placeholders

Provide Examples

code

Bad:  "Enter email"
Good: "name@example.com"

Bad:  "Enter phone"
Good: "(555) 123-4567"

Bad:  "Enter date"
Good: "MM/DD/YYYY"

Don't Repeat Label

code

Bad:
Label: "Email"
Placeholder: "Email"

Good:
Label: "Email"
Placeholder: "name@example.com"

Don't Use for Instructions

code

Bad:
Placeholder: "Must be at least 8 characters"

Good:
Label: "Password"
Placeholder: "••••••••"
Helper text: "Must be at least 8 characters"

Tooltips

Provide Context

code

Icon: ⓘ
Tooltip: "We use this to send you order updates"

Keep It Short

code

Bad:  "This field is used to collect your email address so that we can send you important notifications about your account and orders."
Good: "We'll send order updates to this email"

Use for Clarification

code

Label: "API Key"
Tooltip: "Find this in Settings > API"

Helper Text

Provide Guidance

code

Password field:
"Must be at least 8 characters with 1 number"

Username field:
"Only letters, numbers, and underscores"

File upload:
"Maximum file size: 10MB"

Show Format

code

Phone: "(555) 123-4567"
Date: "MM/DD/YYYY"
Time: "HH:MM AM/PM"

Empty States

Be Helpful

code

Bad:  "No data"
Good: "No projects yet. Create your first project to get started."

Bad:  "Empty"
Good: "Your inbox is empty. New messages will appear here."

Provide Action

code

"No team members yet"
[Invite Team Members]

"No files uploaded"
[Upload Your First File]

Use Illustrations

code

[Illustration of empty inbox]
"All caught up!"
"You have no new messages"

Success Messages

Be Specific

code

Bad:  "Success"
Good: "Your changes were saved"

Bad:  "Done"
Good: "Email sent to john@example.com"

Confirm Action

code

"Account created successfully"
"Password updated"
"File uploaded"

Loading States

Set Expectations

code

Bad:  "Loading..."
Good: "Loading your dashboard..."

Bad:  "Please wait"
Good: "Uploading file... 45%"

Provide Progress

code

"Processing payment..."
"Creating your account..."
"Sending email..."

Confirmation Dialogs

Be Clear About Consequences

code

Bad:
"Delete?"
[Yes] [No]

Good:
"Delete this project?"
"This will permanently delete 'My Project' and all its files. This can't be undone."
[Cancel] [Delete Project]

Use Specific Actions

code

Bad:  [OK] [Cancel]
Good: [Keep Editing] [Discard Changes]

Navigation Labels

Be Descriptive

code

Bad:  "Items"
Good: "Products"

Bad:  "Stuff"
Good: "Documents"

Use Familiar Terms

code

Good: "Dashboard", "Settings", "Profile"
Bad:  "Control Panel", "Preferences", "Account Info"

Call-to-Action (CTA)

Start with Verb

code

"Get Started"
"Try for Free"
"Download Now"
"Learn More"
"Sign Up"

Be Specific

code

Bad:  "Click Here"
Good: "Download Free Guide"

Bad:  "Submit"
Good: "Create Account"

Create Urgency (When Appropriate)

code

"Start Free Trial Today"
"Limited Time Offer"
"Join 10,000+ Users"

Checkbox and Radio Labels

Be Clear

code

Bad:  "I agree"
Good: "I agree to the Terms of Service"

Bad:  "Remember"
Good: "Remember me on this device"

Use Positive Language

code

Bad:  "Don't send me emails"
Good: "Send me product updates"

Search

Placeholder

code

"Search products..."
"Search by name or email..."
"What are you looking for?"

No Results

code

Bad:  "No results"
Good: "No results for 'laptop'"
       "Try searching for something else"

Suggestions

code

"Did you mean 'laptop'?"
"Popular searches: iPhone, MacBook, iPad"

Notifications

Be Timely

code

"New message from John"
"Your order has shipped"
"Payment received"

Be Actionable

code

"New comment on your post"
[View Comment]

"Your trial ends in 3 days"
[Upgrade Now]

Onboarding

Welcome Message

code

"Welcome to [Product]!"
"Let's get you set up in 3 easy steps"

Progress Indicators

code

"Step 1 of 3: Create your account"
"Step 2 of 3: Add team members"
"Step 3 of 3: Customize settings"

Completion

code

"You're all set!"
"Start exploring [Product]"
[Go to Dashboard]

Pricing

Be Transparent

code

"$9/month"
"$99/year (save 17%)"
"Free forever"

Highlight Value

code

"Everything in Free, plus:"
"Unlimited projects"
"Priority support"

Legal Copy

Make It Scannable

code

Bad:
"By clicking Sign Up, you agree to our Terms of Service and Privacy Policy and acknowledge that you have read and understood our Cookie Policy."

Good:
"By signing up, you agree to our Terms and Privacy Policy."

Link to Full Text

code

"By continuing, you agree to our [Terms of Service] and [Privacy Policy]"

Voice and Tone

Friendly but Professional

code

Too casual: "Yo! Sign up here!"
Too formal: "Please proceed to create an account"
Just right: "Create your account"

Empathetic

code

Error: "Oops! Something went wrong"
Success: "Great! Your account is ready"

Consistent

code

Use same terminology throughout:
- "Sign Up" (not "Register" elsewhere)
- "Log In" (not "Sign In" elsewhere)

Accessibility

Use Descriptive Link Text

code

Bad:  "Click here to learn more"
Good: "Learn more about our pricing"

Provide Alt Text

html

<button>
  <img src="trash.svg" alt="Delete" />
</button>

Use ARIA Labels

html

<button aria-label="Close dialog">
  ×
</button>

Testing Microcopy

Read Aloud

code

Does it sound natural?
Is it clear?

Test with Users

code

Do they understand?
Do they know what to do?

A/B Test

code

Test different button labels:
"Sign Up" vs "Get Started"
"Buy Now" vs "Add to Cart"

Best Practices

1. Be Concise

code

Bad:  "Please click the button below to proceed with creating your account"
Good: "Create account"

2. Be Specific

code

Bad:  "Submit"
Good: "Send Message"

3. Be Helpful

code

Bad:  "Error"
Good: "Email is required"

4. Be Consistent

code

Use same terms throughout app

5. Be Human

code

Bad:  "Initiate download sequence"
Good: "Download"

Common Mistakes

❌ Too Vague

code

"Click here"
"Submit"
"OK"

❌ Too Wordy

code

"Please click the button below to proceed"

❌ Inconsistent

code

"Sign Up" on one page
"Register" on another page

❌ Jargon

code

"Initiate transaction"
"Execute query"

Microcopy Checklist

code

☐ Clear and concise
☐ Action-oriented (verbs)
☐ Specific (not vague)
☐ Helpful (guides user)
☐ Consistent (same terms)
☐ Accessible (descriptive)
☐ Tested with users
☐ Matches brand voice

Summary

Microcopy: Small text that guides users

Types:

•Buttons
•Labels
•Placeholders
•Tooltips
•Empty states
•Success messages
•Loading states

Best Practices:

•Be concise
•Be specific
•Be helpful
•Be consistent
•Be human

Avoid:

•Vague text ("Click here")
•Too wordy
•Inconsistent terms
•Jargon