Lesson 09A / Content Design
Microcopy And UX Writing
Write labels, buttons, instructions, empty states, errors, and confirmations that help people understand what to do next.
Course Role
Studio Support
Best during work sessions, critique, debugging, project planning, or final polish.
Teacher Notes / In-Class Use
Demo Live
- Rewrite weak button labels and error messages from a sample interface.
- Show how better copy changes the user path without changing the visual design.
Try In Class
- Have students highlight every piece of microcopy on one screen.
- Ask students to rewrite five pieces and add one missing empty, error, or success message.
Submit Or Check
- Revised copy should be specific, action-oriented, calm, and useful on mobile.
- Forms should include visible labels, helper text when needed, and actionable errors.
Watch For
- Generic labels like click here, submit, learn more, or invalid input.
- Placeholder text being used as the only form label.
Learning Goals
- Write interface copy that is specific, useful, and easy to scan.
- Improve button labels, form labels, helper text, errors, and confirmations.
- Use microcopy to reduce confusion without over-explaining the interface.
- Check copy for accessibility, tone, inclusion, and action clarity.
Interactive Demo
How to use this demo.
Use the demo as a small lab. Change one thing, observe the result, then connect it back to your own project.
What To Try
- Switch between copy moments such as button labels, helper text, errors, empty states, success messages, and navigation.
- Compare the weak version with the stronger rewrite and read the principle behind the change.
What Changes
- The example copy, reason, and code pattern update together.
- The stronger copy gets more specific about action, destination, requirement, or next step.
What To Notice
- Good microcopy usually reduces uncertainty before visual design changes are needed.
- Accessible copy often starts with specific labels and connected feedback.
Apply It
- Rewrite five pieces of copy in your current project using the same before-and-after pattern.
Interactive Demo
Microcopy Rewrite Lab
Compare weak interface copy with clearer labels, errors, empty states, and confirmations.
Button label
Weak
Click here
Stronger
View project details
Why It Works
The label names the destination and still makes sense out of context.
<a href="/projects/">View project details</a>This demo uses extra JavaScript for teaching. The code sample shows the pattern to practice. View full demo source.
Small Copy Carries Big Responsibility
Microcopy is the small text that helps people move through an interface: labels, buttons, errors, empty states, helper text, confirmations, and status messages.
In student projects, weak microcopy is often the difference between a page that looks finished and an interface that actually helps someone complete a task.
Where Microcopy Appears
| Place | What The Copy Should Do |
|---|---|
| Button labels | Name the action clearly. |
| Links | Describe the destination or result. |
| Form labels | Name the information being requested. |
| Helper text | Clarify format, requirements, or consequences. |
| Error messages | Explain what happened and how to fix it. |
| Empty states | Explain why the area is empty and what to do next. |
| Success messages | Confirm what changed and what happens next. |
| Navigation labels | Help users predict where they will go. |
Button And Link Labels
Good action labels use verbs and specific objects. Avoid labels that only make sense when the user reads everything around them.
| Weak | Stronger |
|---|---|
| Click here | View project details |
| Submit | Submit portfolio |
| Continue | Continue to review |
| Learn more | Read the accessibility checklist |
| OK | Delete draft |
| Go | Search events |
Form Labels And Help Text
- Use visible labels for every input.
- Keep placeholder text as an example, not the only label.
- Put requirements near the field before the user submits.
- Explain format when it matters, such as date, phone, file type, or password rules.
- Avoid blaming the user when something fails.
- Write errors that identify the field, problem, and fix.
Empty States
An empty state is not blank space. It is a moment to explain what belongs there and how the user can move forward.
| Empty State Type | Useful Copy |
|---|---|
| First use | No projects yet. Add your first project to start building your portfolio. |
| No results | No events match those filters. Clear filters or try a broader search. |
| Removed content | This draft was deleted. You can create a new draft from the dashboard. |
| Unavailable feature | Comments are closed for this post. You can still share the link. |
Error Messages
| Weak Error | Better Error |
|---|---|
| Invalid input | Enter an email address using name@example.com. |
| Something went wrong | The image did not upload. Use a JPG or PNG under 2 MB and try again. |
| Required | Project title is required before you can publish. |
| Failed | The form could not be submitted. Check your connection and try again. |
Voice And Tone
- Be direct before being clever.
- Use plain language over internal terminology.
- Match the seriousness of the moment.
- Keep error copy calm and useful.
- Avoid shaming language such as wrong, failed, bad, or invalid when a more specific explanation is possible.
- Use consistent words for the same action across the interface.
Accessibility Checks For Copy
- Link text should make sense out of context.
- Buttons should name the action, not only the visual icon.
- Form labels should remain visible when fields are filled.
- Error messages should be connected to the relevant field when possible.
- Status messages should be visible and programmatically communicated when the interface changes.
- Instructions should not rely on color, position, or shape alone.
Studio Activity: Rewrite The Interface
- Choose one current project screen.
- Highlight every label, button, link, helper text, error, empty state, and confirmation.
- Rewrite five pieces of microcopy using specific, user-centered language.
- Add one missing empty, error, or success message.
- Check that the revised copy still fits on mobile.
- Explain why each rewrite helps the user complete the task.
Submission Checklist
- Buttons and links use specific labels.
- Every form field has a visible label.
- Help text explains requirements before errors happen.
- Errors explain what happened and how to fix it.
- Empty states include a useful next action.
- Copy is consistent, calm, and easy to scan.
Checkpoint
Before moving on, make sure these feel true.
- I can write specific labels, links, buttons, helper text, and feedback messages.
- I can improve empty, error, and success states with useful next steps.
- I can check interface copy for accessibility, tone, and clarity.
Project Connection
This lesson supports current class projects.
Project 02 Responsive Landing Page Create a responsive landing page with a header, hero, featured content, and a contact or signup form that works across mobile, tablet, and desktop layouts. Project 04 Interactive Portfolio Create a multi-page portfolio website that showcases your design skills and programming ability through responsive layout, strong presentation, and at least one interactive element.