Seven improvements for your form error messages
Below are our top tips for keeping users happy and making sure your form error messages are constructive, not destructive.
1. Clearly communicate
Make sure your messages are clear and unambiguous. Simply using the word ‘invalid’ or displaying a confusing error code offers no useful explanation of how to resolve the issue and effectively forces them to guess what the desired input is - or worse, give up and go somewhere else instead.
When an entry has been identified as erroneous, it is important to clearly explain exactly what that error is and how to correct it. For example, if a mobile phone number is too short or the syntax of an email is incorrect. Let the user know exactly what is expected in order to complete the form field.
2. Choose reassuring words, not negative ones
Negative wording is sometimes said to make users flustered and cause them to make more mistakes or abandon your form. Instead, many suggest aiming for concise, directional and friendly copy for your messages, focusing on what the user needs to do to rectify the error. UX Movement shared a list of negative words to avoid in error messages:
- Oops: Oops, something wasn't right
- Error: This form has errors
- Failed: Form submission failed
- Problem: There was a problem creating your account
- Invalid: Invalid fields
- Wrong: Oops, something's gone wrong
- Prohibited: 3 errors prohibited this user from being saved.
However, clear negative feedback is better than ambiguity that could lead the user to abandon the form due to confusion.
3. Don’t be dramatic with colour
Red is the most common colour used to highlight errors, but some believe that this can provoke anxiety due to its negative connotations and associations with danger and fear. Instead, some experts recommend using a ‘warmer’, less aggressive colour such as orange, which will keep users calmer and more focused on correcting mistakes. There is no clear right or wrong here; we but we suggest avoiding being overly dramatic with the use of colour, and be judicious. While red can have negative connotations, learned behaviours on the web means that it can also be the expectation. Whatever colour you choose, make sure there is enough contrast to distinguish from the regular content.
4. Position your error messages wisely
Many sites choose to bunch together their error messages at the top or bottom of the page, in long error summaries. Placing it all at the top leads to an unnatural flow as the user is forced to move their attention away from what they have been doing, back to where they have already been. Instead, placing an error message next to or under the label gives your users a much better understanding of where they have gone wrong and where they need to make changes. Providing one error message at a time, will also minimise confusion.
5. Don’t just presume that the user is wrong
Make sure your validation is up to scratch and doesn’t contradict field labels. Don’t patronise users who keep having to retype information that your site doesn’t recognise as correct. A common failure is disallowing characters such as apostrophes in the name field - a sure way to irritate Mr O’Brien!
6. Simplify, simplify, simplify
The Baymard Institute found that “92% of top ecommerce sites have inadequate form field descriptions in their checkout process” - driving up errors. When it comes to form error messages it is a good idea to seriously think about what might help the user through the process of filling out your form.
Google has employed this method for Gmail account sign up. They clearly explain to the user that they can use letters, numbers and full stops in the email address field, and they have even added the @gmail.com to make it easy for the user to see what data they are being asked for and reduce the amount of typing required.
7. Inline validation
Using inline validation has been shown to reduce user frustration and make form field completion faster and with fewer errors. By alerting the user in real-time to errors that are made, for example, by adding indicators (green checkmarks by valid information and red triangles next to invalid/missed information), users instantly know where they have made a mistake and have a much less complicated journey through the form. It is important to make sure the user has finished typing before telling them that they have made a mistake as this can lead to further frustration.
Having address, email and phone validation in place can reduce frustration associated with completing forms as it ensures accurate details have been entered into your form fields. Learn more about validating your form fields in this way here.