learn-product-design-with-phoebe / Session 5 of 6
Learn Product Design with Phoebe · Session 5 of 6

Interaction and copy

A screen that scores 100 on structure and colour can still leave somebody unsure whether they just cancelled their subscription. Tonight is the layer where that gets fixed: what happens in the second after a tap, the words on every button and every error, the fields you should delete rather than improve, how much motion is too much, and the confirmation that names the consequence instead of asking whether you are sure.

🟠 Hands-on Designers, PMs and engineers - the copy is usually written by whoever is closest Bring your session 4 screen 45 min
0-3 · Welcome 3-18 · Feedback, words, forms, motion 18-40 · Build-along: write the whole screen 40-45 · Q&A
Part 0

Where we are

The screen is structured and it is legible. Tonight it starts talking, and the thing to notice all evening is how much of what we call interaction design is actually writing.

🎫 Clear all three quiz questions to stamp your passport Live = presented in the 45 minutes Self-study = the full depth, after class

★ What you walk out with tonight. Every word on your screen written on purpose, a form with fewer fields than it had this morning, a motion budget in milliseconds, and a confirmation dialog that tells somebody what is about to happen to their money.

Part 1 · covers feedback

The second after the tap

5 min live

Every action needs an answer, and the answer needs to arrive before the person starts wondering. Uncertainty is the expensive state: it produces the second tap, the support ticket and the duplicate charge.

Under 100 ms Feels instant Show the result. No spinner, a spinner here makes it feel slower 100 ms to 1 s Noticed, tolerated Change the button state so the tap is acknowledged immediately Over 1 s They start wondering Skeleton or progress, and say what is happening in words The failure this prevents Nothing visible happens for two seconds, so they tap Pause again. Now there are two requests, and if the back end is not idempotent there are two pauses, or a pause and an error, and a person who no longer knows what state their subscription is in.
🔍 Click to zoom - the second tap is a design failure, not a user error
LiveThe motion budget4 min▶

Motion has exactly two jobs: showing that one thing caused another, and showing where something went. Anything beyond those two is decoration, and decoration on a repeated action becomes a tax.

  • 150 to 250 ms for most interface transitions. Long enough to be seen, short enough not to be waited for.
  • Anything over about 300 ms on an action people repeat is a tax you charge every single time. The animation that delighted you in the review is the animation somebody sits through forty times a day.
  • Nothing should block input. If a person cannot tap during your animation, the animation is now part of your response time.
  • Respect reduced motion. The prefers-reduced-motion setting exists because motion makes some people physically unwell. Honouring it is a two-line change and it is not optional.
Part 2 · covers the words

Microcopy is interface, and it is usually written last by whoever is nearest

7 min live

On a screen like this one the words carry more of the experience than the layout does, and they are the part with no owner and no review step.

"Are you sure you want to pause your subscription? [Cancel] [OK]"

Sure about what, exactly? Does the price change? Does the coffee I chose stay reserved? What does OK do - OK to pausing, or OK to closing this box? And "Cancel" on a subscription screen is the single worst button label available, because Cancel here means "do not pause" and Cancel one screen away means "end my subscription".

"Pause for three weeks? No box will arrive until 22 September. Your price stays the same and your Ethiopia Guji stays reserved. [Keep my deliveries] [Pause until 22 September]"

Both buttons name their own outcome, so neither can be misread and the dialog can be answered without reading the body text. The two fears from session 2 - the box on the doorstep and losing your coffee - are both addressed in one sentence each.

LiveFive rules that fix most interface copy5 min▶
  • Buttons name their outcome, never their agreement. "Pause until 22 September", not "OK". A person should be able to answer a dialog by reading only the buttons.
  • Never use "Cancel" as a dismiss on a screen where cancelling is a real action. This is not pedantry, it is the most common genuinely dangerous copy bug in subscription products.
  • Errors say three things: what happened, whether anything changed, what to do. In that order. "We could not reach your subscription. Nothing has changed. Try again."
  • Write the number, not the abstraction. "Until 22 September" beats "for the selected period". Dates, amounts and counts are what people are actually checking.
  • Use their words, from session 2. Participants said "box", not "shipment"; "how often", not "frequency". Your internal vocabulary is a private dialect and the interface is not the place for it.

The read-aloud test catches nearly everything: read the whole flow out loud as if you were telling a friend what is happening. Anywhere you would not say the sentence to a person is a sentence to rewrite.

That seeded message is 19 words and does none of the three jobs. It does not say what happened, it does not say whether anything changed - which is the thing the person is actually worried about - and "try again later" is not an action, it is a shrug with punctuation. The good version is shorter.

Part 3 · covers forms

Most forms improve by deletion

4 min live
The pause form as drafted What each field is actually for Pause start date Default to the next delivery. Rarely changed Pause end date Keep. This is the actual decision Reason for pausing Delete. This is for you, not for them Confirm email address Delete. They are logged in Notify me before resuming On by default. P4 was burned by this Marketing preferences Delete. Not this screen, not this moment Six fields becomes one question and one date. The rest were defaults or somebody's analytics.
🔍 Click to zoom - "reason for pausing" is a research question that escaped into the product
Self-studyThe four questions to ask every field3 min▶
  1. Can I already know this? They are logged in, so you have the email, the plan and the next delivery date. Every field that asks for something you hold is a small insult.
  2. Can it have a default? A sensible default converts a decision into a confirmation, which is roughly ten times cheaper for the person.
  3. Who is it for? "Reason for pausing" is for your dashboard. If a field serves you rather than them, it needs to justify the cost in completions, and usually it cannot. Ask it afterwards, optionally, once the thing they came for is done.
  4. What happens if it is wrong? If a mistake is cheap to fix later, do not validate it aggressively now. Aggressive validation on a reversible field is a tax on everybody to prevent an inconvenience for a few.

Accessibility notes that belong here and get skipped: every field needs a real label, not a placeholder standing in for one; touch targets want to be around 44 by 44 pixels; and focus order should follow the visual order, which it does not by default the moment you start rearranging with CSS.

Build-along

Write the whole screen

★ 22 min · everyone builds

Every string, in one document. This is the copy deck, and in session 6 it is part of the handoff, because a developer who is not given the words will write them.

Buttons. Every one names its own outcome. Read the buttons alone, with the rest of the screen covered: could someone answer correctly? If not, rewrite.

States. The empty, loading and error copy from session 3, now final. Error format: what happened, whether anything changed, what to do.

Confirm. Name the consequence, the date, and what does not change. Two of session 2's fears - the box on the doorstep and losing your reserved coffee - get one sentence each.

Form. Run the four questions over every field. Delete, default, or defer. Daybreak's six fields become one question and one date.

Read aloud. The entire flow, out loud, as if explaining to a friend. Anywhere you would not say it, rewrite it. This takes four minutes and catches more than any review.

Write your button labels first. Then cover everything else on the screen and read only the buttons. This one test catches "OK", "Submit", "Continue" and every other label that describes agreement rather than outcome.

Hunt your dangerous Cancel. Any screen where "cancel" is both a real action and a dismiss button. Rename the dismiss to what it does: "Keep my deliveries", "Go back", "Not now".

Write one error properly. Three parts, in order. Then check that the middle part is true - if you do not actually know whether anything changed, that is an engineering question you have just discovered by writing a sentence.

Run the four questions over your form. Count the fields before and after. If nothing was deleted, ask again who each one is for.

Set your motion budget. Write the numbers down: 200 ms for transitions, nothing over 300 on repeated actions, nothing blocking input, reduced motion honoured. Four lines, and they go in the handoff.

Read the whole flow out loud to another person. Including the confirmation and the error. Watch for the moment they frown - that is the sentence.

Now check what you promised. Session 2's participant 4 paused successfully and still got ambushed by a box. Does your copy tell them when it resumes, and does something actually send that reminder? A promise in a confirmation is a feature somebody has to build.

If you take one thing from tonight. Cover the screen, read only the buttons. If the decision is not answerable from the buttons alone, the words are doing decoration rather than work.

Homework

Before session 6

30 min
  1. Write the copy deck for your screen. Every string, one document. Bring it - it is part of the handoff pack in session 6.
  2. Find your dangerous Cancel. Most subscription, billing and booking products have one.
  3. Rewrite one real error message into the three-part format, and check whether you can honestly write the middle part.
  4. Delete one form field. Actually delete it. Note who objects and what they say - it is almost always an analytics reason, which is worth having in the open.
  5. Write your motion budget. Four lines. Then check whether your product currently honours reduced motion, which takes about thirty seconds and is usually a no.
Check yourself

Three questions

Clear all three and session 5 gets stamped in your passport.

1 · What is wrong with "Are you sure? [Cancel] [OK]" on a subscription screen?

A person should be able to answer a dialog by reading only the buttons. "Keep my deliveries" and "Pause until 22 September" cannot be misread. Reusing "Cancel" as a dismiss where cancelling is also a real action is the most common genuinely dangerous copy bug in subscription products.

2 · An error message says "An unexpected error occurred. Please try again later." What is the most important thing it is missing?

Three parts, in order: what happened, whether anything changed, what to do. The middle one carries the anxiety. "Nothing has changed" is three words and it is worth more than a paragraph of apology - and if you cannot honestly write it, you have just found an engineering question.

3 · A form asks "reason for pausing" as a required field. What is the design problem?

It is a research question that escaped into the product. If you want it, ask afterwards and optionally, once the thing they came for is done. Every required field that serves the company has to justify itself in completions, and this one cannot.

Sources covered

What this session teaches, and where it came from

✓Response feedback bandsUnder 100 ms show the result, under a second acknowledge the tap, over a second say what is happening. The second-tap failure it prevents
✓Microcopy as interfaceButtons name outcomes, never reuse Cancel as a dismiss, three-part errors, write the number, use their vocabulary from session 2
✓Forms improved by deletionThe four questions per field: can I know it, can it default, who is it for, what if it is wrong. Six fields to two
✓Motion budget150 to 250 ms, nothing over 300 on repeated actions, never block input, honour prefers-reduced-motion
✓Confirmations that name the consequenceDate, price and what does not change, addressing the two fears research surfaced
◐Full accessibility auditLabels, 44px targets and focus order are named here. Complete audit method lives in the a11y skills; contrast was session 4

Every fact on this page, and its verification tier, is recorded in the course's source map. Daybreak's participants and figures are a teaching scenario.

Session 5 cheat sheet · pin this

Buttons name outcomesCover the screen, read only the buttons. Answerable? If not, rewrite.
Never a dangerous CancelDo not use Cancel as a dismiss where cancelling is a real action.
Errors in three partsWhat happened. Whether anything changed. What to do. The middle one carries the fear.
Delete, default, deferFour questions per field. If it serves you, ask it after the task, optionally.
200 msNothing over 300 on repeated actions, never block input, honour reduced motion.
Read it out loudAnywhere you would not say the sentence to a friend, rewrite it.