Forms, Errors and Microcopy

Introduction

Forms are where people give you something: an order, a sign-up, a message. Every extra field and every confusing error is a chance for them to give up. Good form design, and the careful little words around it, often make the biggest difference to a product.

Ask for less

• Ask only what you truly need, now. Every field costs effort. Ask yourself: what will we do with this? If the answer is "nothing yet", remove it.
• Do not ask twice. Avoid "confirm email" fields where you can, and let people see their password instead.
• Use smart defaults and pre-fill known information.
• Split long forms into logical steps, with a progress indicator, and let people go back.
• Respect privacy: explain why you ask for sensitive information, and collect no more than needed.

Layout and labels

• One column layouts are easiest to scan and complete.
• Put labels above their fields, and always show them. Placeholder text is not a label, because it disappears when typing and has weak contrast.
• Use clear, plain labels such as "Email address".
• Mark optional fields as optional, rather than starring every required one, when most are required.
• Group related fields, and use logical order.
• Use the right input type: email, number, date or phone, so mobile devices show the right keyboard. Use autocomplete attributes so browsers can fill details.
• Make buttons descriptive: "Create account" beats "Submit".
• Make touch targets large enough.

Validation and errors

Errors will happen. How you handle them decides whether people continue.

• Prevent errors with constraints and examples: "Date, for example 27 3 2026".
• Validate at sensible moments: usually after a field is completed, not on every keystroke.
• Explain what is wrong and how to fix it, in plain language. Compare:
  • Poor: "Invalid input."
  • Better: "Enter your email in the format [email protected]."
• Place the message next to the field, and also summarise at the top for longer forms, with links to each problem.
• Do not erase what people typed.
• Do not blame: "You entered an invalid date" feels worse than "Enter a date in the future."
• Do not rely on colour alone for errors. Use text and icons, and make sure screen readers announce them.
• For serious failures, say what happened and what to do next.

Microcopy

Microcopy is the small text in interfaces: buttons, labels, hints, empty states, confirmations and error messages. It guides, reassures and sets the tone.

Principles:

• Be clear before clever. Humour can fail, especially in errors.
• Use plain language and short sentences.
• Say what will happen: "We will email a link to reset your password."
• Reassure at sensitive moments: "We never share your email."
• Be consistent in terms and tone.
• Write for the situation: calm and helpful for errors, brief for routine actions.
• Make empty states useful: "No recipes saved yet. Search for one and tap the heart to save it."

Examples of improved microcopy:

Test it

Watch real people fill in the form. See where they hesitate, correct or abandon. Measure completion rate, time and error rate before and after changes.

Accessibility

Labels must be linked to their fields in code, so screen readers announce them. Keyboard users must be able to complete the form, with visible focus and a logical tab order. Errors must be reachable and announced.

Try it yourself

Take a sign-up form you use. Count the fields and remove those you think are unnecessary. Rewrite three error messages and the button label in plain, helpful language. Ask someone to complete the new version and note where they pause.

Summary

• Ask for less, use one column and visible labels, and choose the right input types and button text.
• Write error messages that explain the problem and the fix, next to the field, without erasing input.
• Microcopy should be clear, plain and reassuring, and tested with real people.