Provide any requirements first as helper / info text to avoid users falling immediately into invalid states. See Forms validation (component).
- Field label: Phone number
Helper text: Include country code, e.g. +49 30 1234567
- Field label: Password*
Helper text: (empty and requirement only appears after user starts typing) Invalid: Password must have 8 characters.
Provide clear, valid wording when users have met all the validation criteria and can move on.
- Field label: Username*
Valid text: Username available
- Field label: Username*
Valid text: OK
Provide invalid text when user input has not met the specified requirements and explain exactly what requirement is missing.
- Field label: Username*
Invalid text: Username unavailable - Field label: Email address
Invalid text: Missing @ symbol
- Field label: Username*
Invalid text: Bad username - Field label: Email address
Invalid text: Invalid email address
Provide warning text when there is a critical issue or a suggestion related to the success or failure of the user input and explain any consequences clearly.
- Field label: Upload file
Warning text: Upload max 10 MB. Select another file. - Field label: Temperature
Warning text: Hot water temperature limit is too high. There is a risk of scalding.
- Field label: Password
Warning text: Warning: This is a weak password and not secure. - Field label: Min threshold
Warning text: Warning! Wrong threshold!
Dos and Don'ts
- Do provide all the information users need upfront
- Do ensure all constraints are clear
- Don't shame users for making a mistake
- Don't use wording that makes users feel stupid when their input is invalid