You spend twenty minutes polishing a button.
Then the form tells someone: “Invalid input.”
Invalid what? The date? The phone number? The file?
A neat interface still needs to explain what to do next.
Change the message, not just its color
Imagine a profile form that accepts JPG and PNG images up to 5 MB. Someone selects a larger file.
“Upload failed” only reports the failure.
“Your image is over 5 MB. Choose a smaller JPG or PNG” gives the person a next step.
The wording must match the real rule. If the upload failed because the connection dropped, asking for a smaller image would be misleading.
The same idea works elsewhere:
- “Invalid date” → “Enter the date as DD/MM/YYYY.”
- “Required” → “Enter an email address so we can send your receipt.”
- “Something went wrong” → explain the known problem, or say that you could not identify it. Do not invent a cause.
Put the help where the problem is
Show the message near the field. Keep the person's other entries. A red outline alone does not explain the fix.
W3C's form notification guidance recommends clear error descriptions and simple correction instructions. For developers, it also describes linking fields and messages with aria-describedby so that assistive technology can connect them.
A quick review: deliberately submit the wrong value. Read only the message. Does it tell you which field needs attention and how to continue?
If you have to ask the developer what the message means, the wording needs another pass.
Which error message in your product would you rewrite first?
Top comments (0)