--- name: Microcopy description: Comprehensive guide to writing effective microcopy including buttons, labels, tooltips, placeholders, and empty states --- # 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 ```html ``` ### Use ARIA Labels ```html ``` --- ## 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