Forms & Microcopy
Helpful error messages
A good error explains the problem and the fix, right next to the field.
See it
Don't
- 'Invalid input' doesn't say which rule failed
- No hint on how to fix it
Do
Password
••••••
Use at least 8 characters. You have 6, add 2 more.
Create accountWhy it matters
Say what's wrong and how to fix it, in human words. 'Invalid input' makes users guess.
How to apply it
- Place the message beside the field that caused it
- State the rule and how far off the user is
- Validate when the user leaves a field, not on every keystroke
Common mistakes
- Invalid input
- Clearing the form after an error
Quick answers
What is Helpful error messages?
A good error explains the problem and the fix, right next to the field. Say what's wrong and how to fix it, in human words. 'Invalid input' makes users guess.
How do I apply Helpful error messages in UI design?
Place the message beside the field that caused it. State the rule and how far off the user is. Validate when the user leaves a field, not on every keystroke.
What are common mistakes with Helpful error messages?
Invalid input. Clearing the form after an error.