Module 20: Writing for UI — Design & Code Foundations

09

undefined

Permanence

Print

📖

Fixed

Text is permanent once printed; errors require reprints

Web

✏️

Editable

Copy can be A/B tested, updated instantly

Context

Print

Linear reading

Start to finish

Reader controls pace; more tolerance for length

Web

Task-oriented

Goal-driven

Users scan for action; brevity essential

Feedback

Print

One-way

No response

Text is static, no user interaction

Web

Interactive

Real-time

Copy responds to user actions, states, errors

Localization

Print

Separate editions

Manual process

Different print runs per language

Web

Dynamic i18n

Same interface

One codebase, many languages via translation keys

10

undefined

Cognitive Load

undefined

Processing Fluency

undefined

Trust Signals

undefined

11

Microcopy Excellence

How top products craft their interface text.

Conversational

"You're all caught up!"

Principles Identified:

Friendly voice Casual, approachable language throughout

Celebration Positive reinforcement for completed work

Onboarding Slackbot guides new users conversationally

Key insight: Slack's friendly voice makes work feel less like work. Their bot uses first-person to feel human.

Developer-focused

Clear, technical, helpful

Principles Identified:

Precision Exact error messages with solutions

Context Errors explain what went wrong and why

Action Every message includes next steps

Key insight: Stripe's error messages are legendary—they tell you exactly what failed and how to fix it.

High-fives

"High fives! Your campaign is sent."

Principles Identified:

Celebration Genuine excitement for user success

Anxiety reduction Reassurance before big actions

Personality Consistent quirky voice

Key insight: Mailchimp reduces send-anxiety with reassuring copy before you launch to thousands.

12

Microcopy Mistakes

Common writing errors that frustrate users.

Failure: Vague Buttons

Submit what?

Fix: Use specific action verbs

Clear action

Rule: Button text should describe exactly what happens when clicked.

Failure: Technical Errors

Error 422: Unprocessable Entity

What do I do?

Fix: Explain in human terms with solution

That email is already registered.

Try signing in or use a different email.

Rule: Translate technical errors into problems and solutions.

Failure: Blaming the User

You entered an invalid date.

Accusatory

Fix: Take responsibility, focus on solution

Please use format MM/DD/YYYY

Helpful

Rule: Never start with 'You'. Focus on the solution, not the mistake.

Failure: Empty Empty States

No results

Fix: Explain, guide, and provide action

No results for "xyz"

Try searching for "abc" instead

Rule: Empty states should explain why and what to do next.

13

Copy Testing Methods

Validate your microcopy works for real users.

01

5-Second Test

Tests: Clarity

Show a screen for 5 seconds. Ask: What would you click? What does this button do? If users hesitate, the copy is unclear.

⏱️

What would you click?

02

Cloze Test

Tests: Predictability

Remove key words and ask users to fill in blanks. 'Click ___ to create your account.' If users guess correctly, your copy is intuitive.

Click _______ to save your changes.

What word fits?

03

Error Scenario Testing

Tests: Helpfulness

Create errors intentionally. Ask: Do you understand what went wrong? Do you know how to fix it? Rate helpfulness 1-5.

1. Understand the problem?

2. Know the solution?

3. Rate helpfulness: ___/5

04

A/B Testing

Tests: Conversion

Test button labels, headlines, and CTAs. Measure click-through, completion, and conversion rates. Statistical significance required.

"Sign Up"

12% CTR

"Get Started Free"

18% CTR

14

Implementing Copy States

CSS patterns for dynamic microcopy.

.error-message {
  color: #dc2626;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.error-message::before {
  content: '⚠';
}

.input-error {
  border-color: #dc2626;
}

.input-error:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
}

Error Message Styling via CSS

Icon prefix - Visual indicator before text
Associated input - Border highlights the problem field
Focus state - Shadow reinforces error state

Tip: Place error messages immediately below the relevant input field.

.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: #6b7280;
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.empty-state-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.5rem;
}

.empty-state-action {
  margin-top: 1rem;
}

Empty State Pattern via CSS

Centered layout - Visual focus on empty content
Subtle icon - Visual interest without distraction
Clear CTA - Obvious next action

Tip: Always include a primary action button in empty states.

.button-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.button-loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

.button-text-loading {
  /* Keep text, add spinner */
  padding-left: 1.5rem;
}

Loading & Processing States via CSS

Spinner overlay - Replace or accompany text
pointer-events: none - Prevent double-clicks
Text option - "Saving..." with spinner

Tip: Change button text to reflect action: 'Save' → 'Saving...' → 'Saved!'

15

Self-Assessment

Test your understanding of UI writing principles.

Q1

Why is 'Submit' a poor button label?

Click to reveal

Q2

What three things should an error message include?

Click to reveal

Q3

How do effective empty states help users?

Click to reveal

Q4

What's the difference between voice and tone?

Click to reveal

Q5

Why should you 'front-load' important words?

Click to reveal

Writing for UI

Print vs Web

undefined

Science & Psychology

undefined

Real-World Examples

Microcopy Excellence

Common Failures

Microcopy Mistakes

Visual Tests

Copy Testing Methods

5-Second Test

Cloze Test

Error Scenario Testing

A/B Testing

CSS Implementation

Implementing Copy States

Self-Assessment

Self-Assessment

Key Takeaways