microcopy

Microcopy

What is Microcopy?

Microcopy: Small bits of text that guide users through interfaces

Examples

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

Bad:  "Submit"
Good: "Create Account"

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

Bad:  "OK"
Good: "Save Changes"

Primary vs Secondary

Primary (strong action):
"Save and Continue"

Secondary (alternative):
"Save as Draft"

Destructive Actions

Bad:  "Delete"
Good: "Delete Forever"

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

---

Form Labels

Be Clear and Concise

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

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

Use Sentence Case

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

Optional vs Required

Required (default):
"Email"

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

---

Placeholders

Provide Examples

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

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

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

Don't Use for Instructions

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

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

---

Tooltips

Provide Context

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

Keep It Short

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

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

---

Helper Text

Provide Guidance

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

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

---

Empty States

Be Helpful

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

"No team members yet"
[Invite Team Members]

"No files uploaded"
[Upload Your First File]

Use Illustrations

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

---

Success Messages

Be Specific

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

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

Confirm Action

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

---

Loading States

Set Expectations

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

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

Provide Progress

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

---

Confirmation Dialogs

Be Clear About Consequences

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

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

---

Navigation Labels

Be Descriptive

Bad:  "Items"
Good: "Products"

Bad:  "Stuff"
Good: "Documents"

Use Familiar Terms

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

---

Call-to-Action (CTA)

Start with Verb

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

Be Specific

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

Bad:  "Submit"
Good: "Create Account"

Create Urgency (When Appropriate)

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

---

Checkbox and Radio Labels

Be Clear

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

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

Use Positive Language

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

---

Search

Placeholder

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

No Results

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

Suggestions

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

---

Notifications

Be Timely

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

Be Actionable

"New comment on your post"
[View Comment]

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

---

Onboarding

Welcome Message

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

Progress Indicators

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

Completion

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

---

Pricing

Be Transparent

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

Highlight Value

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

---

Legal Copy

Make It Scannable

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

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

---

Voice and Tone

Friendly but Professional

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

Empathetic

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

Consistent

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

---

Accessibility

Use Descriptive Link Text

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

Provide Alt Text

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

Use ARIA Labels

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

---

Testing Microcopy

Read Aloud

Does it sound natural?
Is it clear?

Test with Users

Do they understand?
Do they know what to do?

A/B Test

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

---

Best Practices

1. Be Concise

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

2. Be Specific

Bad:  "Submit"
Good: "Send Message"

3. Be Helpful

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

4. Be Consistent

Use same terms throughout app

5. Be Human

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

---

Common Mistakes

❌ Too Vague

"Click here"
"Submit"
"OK"

❌ Too Wordy

"Please click the button below to proceed"

❌ Inconsistent

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

❌ Jargon

"Initiate transaction"
"Execute query"

---

Microcopy Checklist

☐ 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