UX Writing
End-to-End Workflow
For every piece of UI copy, run these five steps in order.
1. Identify UI context. Which pattern? (button, error, empty state, onboarding, success toast, confirmation, tooltip, placeholder) Match to a template in Microcopy Guide or Error Message Patterns.
2. Determine user emotional state. Curious, frustrated, anxious, accomplished, lost? Look up the row in the Tone Across Contexts table in Voice & Tone Guide.
3. Apply voice + tone. Voice is constant (the product's personality). Tone shifts by context. Pick the tone row that matches step 2.
4. Write the copy using a pattern below.
5. Validate against the checklist at the bottom. If any item fails, revise.
Pattern: Error Message (formula)
What happened + Why (optional) + How to fix it
| Before |
After |
| Error: Invalid input |
That email address doesn't look right. Check that it includes an "@" and a domain like name@example.com. |
| Error 403: Forbidden |
You don't have permission to view this page. Ask the project owner to share access with you. |
| Upload failed |
That file is too large. Max upload is 10 MB. Try compressing the image or choosing a smaller file. |
| Password too short |
Use at least 8 characters for your password. |
| Request timeout |
That took too long. Check your connection and try again. |
| Too many requests |
You've hit the request limit. Wait a minute and try again. |
| Required |
Add a project name to continue |
| Invalid file type |
Upload a PNG, JPG, or GIF. PDFs aren't supported here. |
Rules:
- Plain language, not error codes.
- Don't blame the user ("That file is too large" not "You uploaded a file that's too large").
- Always give a next step.
- Brief, but never at the cost of clarity.
Pattern: Severity → Presentation
| Severity |
Presentation |
Use when |
| Inline validation |
Red text below field |
One field invalid |
| Field-level error |
Highlighted field + message |
Submission with errors |
| Toast/snackbar |
Temporary overlay |
Non-blocking (network retry) |
| Banner |
Persistent banner |
System-wide (maintenance) |
| Full page |
Dedicated error page |
Fatal (404, 500, offline) |
Pattern: Button / CTA
- Use specific verbs: "Save draft", "Publish post", "Send invitation" — not "Submit".
- Front-load the action: "Delete account" not "Permanently remove your account from the system".
- Match context: sign-up form → "Create account", not "Submit".
Full table: Microcopy Guide → Button & CTA Patterns.
Pattern: Empty State
Three types — first-use, user-cleared, error. Full templates in Microcopy Guide → Empty State Type Templates.
Voice vs. Tone (quick definitions)
- Voice = the product's consistent personality (does not change).
- Tone = how voice expresses in this specific context (changes with user emotional state).
Full voice attribute table and tone-by-context table: Voice & Tone Guide.
Core Microcopy Principles
- Clear over clever — "Got it" beats "Roger that, Captain!"
- Brief over verbose — cut every word that doesn't add meaning.
- Specific over vague — "Save to drafts" beats "Save".
- Active voice — "We saved your changes" not "Your changes have been saved".
Validation Checklist
For every piece of copy, confirm:
If any item fails → revise and re-validate.
Deep Dive References
- Microcopy Guide — Buttons, forms, tooltips, navigation, dialogs, status messages, empty states
- Error Message Patterns — Anatomy, types, tone calibration, localization, prevention, audit checklist
- Voice & Tone Guide — Voice attribute table, tone-by-context table, style guide essentials, inclusive language, audit process
Next Steps
1---2name: ux-writing3description: Use when writing or auditing UI copy — button labels, error messages, empty states, onboarding flows, confirmation dialogs, tooltips, success toasts — or when establishing voice and tone documentation for a product.4---56# UX Writing78## End-to-End Workflow910For every piece of UI copy, run these five steps in order.1112**1. Identify UI context.** Which pattern? (button, error, empty state, onboarding, success toast, confirmation, tooltip, placeholder) Match to a template in [Microcopy Guide](references/microcopy-guide.md) or [Error Message Patterns](references/error-message-patterns.md).1314**2. Determine user emotional state.** Curious, frustrated, anxious, accomplished, lost? Look up the row in the Tone Across Contexts table in [Voice & Tone Guide](references/voice-tone-guide.md).1516**3. Apply voice + tone.** Voice is constant (the product's personality). Tone shifts by context. Pick the tone row that matches step 2.1718**4. Write the copy using a pattern below.**1920**5. Validate against the checklist at the bottom.** If any item fails, revise.2122## Pattern: Error Message (formula)2324`What happened + Why (optional) + How to fix it`2526| Before | After |27|--------|-------|28| Error: Invalid input | That email address doesn't look right. Check that it includes an "@" and a domain like name@example.com. |29| Error 403: Forbidden | You don't have permission to view this page. Ask the project owner to share access with you. |30| Upload failed | That file is too large. Max upload is 10 MB. Try compressing the image or choosing a smaller file. |31| Password too short | Use at least 8 characters for your password. |32| Request timeout | That took too long. Check your connection and try again. |33| Too many requests | You've hit the request limit. Wait a minute and try again. |34| Required | Add a project name to continue |35| Invalid file type | Upload a PNG, JPG, or GIF. PDFs aren't supported here. |3637**Rules:**381. Plain language, not error codes.392. Don't blame the user ("That file is too large" not "You uploaded a file that's too large").403. Always give a next step.414. Brief, but never at the cost of clarity.4243## Pattern: Severity → Presentation4445| Severity | Presentation | Use when |46|----------|-------------|----------|47| Inline validation | Red text below field | One field invalid |48| Field-level error | Highlighted field + message | Submission with errors |49| Toast/snackbar | Temporary overlay | Non-blocking (network retry) |50| Banner | Persistent banner | System-wide (maintenance) |51| Full page | Dedicated error page | Fatal (404, 500, offline) |5253## Pattern: Button / CTA5455- Use specific verbs: "Save draft", "Publish post", "Send invitation" — not "Submit".56- Front-load the action: "Delete account" not "Permanently remove your account from the system".57- Match context: sign-up form → "Create account", not "Submit".5859Full table: [Microcopy Guide → Button & CTA Patterns](references/microcopy-guide.md).6061## Pattern: Empty State6263Three types — first-use, user-cleared, error. Full templates in [Microcopy Guide → Empty State Type Templates](references/microcopy-guide.md).6465## Voice vs. Tone (quick definitions)6667- **Voice** = the product's consistent personality (does not change).68- **Tone** = how voice expresses in this specific context (changes with user emotional state).6970Full voice attribute table and tone-by-context table: [Voice & Tone Guide](references/voice-tone-guide.md).7172## Core Microcopy Principles7374- **Clear over clever** — "Got it" beats "Roger that, Captain!"75- **Brief over verbose** — cut every word that doesn't add meaning.76- **Specific over vague** — "Save to drafts" beats "Save".77- **Active voice** — "We saved your changes" not "Your changes have been saved".7879## Validation Checklist8081For every piece of copy, confirm:8283- [ ] Reads aloud naturally in under 3 seconds.84- [ ] No error codes, jargon, or internal system terms.85- [ ] User knows what to do next (action verb or clear path).86- [ ] No blame language ("you uploaded a bad file" → "that file isn't supported").87- [ ] Button label names the outcome, not "Submit"/"OK".88- [ ] Tone matches user emotional state (see Tone table).89- [ ] Localizable: no idioms, contractions handled, no concatenated strings.90- [ ] Plural and zero states both written ("0 results", "1 result", "5 results").91- [ ] Under context-appropriate length: button ≤ 3 words, toast ≤ 60 chars, error summary ≤ 12 words.9293If any item fails → revise and re-validate.9495## Deep Dive References9697- [Microcopy Guide](references/microcopy-guide.md) — Buttons, forms, tooltips, navigation, dialogs, status messages, empty states98- [Error Message Patterns](references/error-message-patterns.md) — Anatomy, types, tone calibration, localization, prevention, audit checklist99- [Voice & Tone Guide](references/voice-tone-guide.md) — Voice attribute table, tone-by-context table, style guide essentials, inclusive language, audit process100101## Next Steps102103- **[Accessibility Audit](../accessibility-audit/SKILL.md)**: Verify copy works with screen readers104- **[User Research](../user-research/SKILL.md)**: Test copy effectiveness with users105- **[Information Architecture](../information-architecture/SKILL.md)**: Align copy with navigation labels106- **[Design System Creation](../design-system-creation/SKILL.md)**: Document voice and tone in the system
uw-ssec