And let’s face it, your visitor may not be thrilled about having to enter their address, credit card information, and more, and therefore, they may move through your form quickly. What is an error message? Most importantly, error messages will enhance your form's user experience — and great user experience means you're more likely to see a boost in conversions. Error Message Design: 6 Mistakes to Avoid and Good Examples to Follow Let’s review six common mistakes you’ll want to avoid while creating error messages for your web forms and six preferable examples you can implement instead. Instead, avoid making your visitors feel confused by placing the message next to the error itself. Don't ever blame them for the error in the form (even if they really did cause the issue). Your message copy should not only be clear, concise, and explain the issue at hand, but it should also give the visitor simple directions on how to fix the error. For example, if you have unclear requirements listed and an error message pops up on the form, your visitors are going to have a hard time understanding how they’re supposed to fix the issue . To avoid this, your error message descriptions should briefly explain the precise actions your visitors can take to fix their mistake. Make your error messages bright, bold, and obvious so your visitors can quickly correct their mistake and move on with their submission.
Your visitors are bound to make the occasional mistake while completing your online forms. When it comes to shipping or registration forms, for example, there are a number of form fields a visitor is required to complete. And let’s face it, your visitor may not be thrilled about having to enter their address, credit card information, and more, and therefore, they may move through your form quickly. Chances are, some visitors will misspell something, type in an incorrect zip code, or miss a number in the credit card field.
You might be wondering how to ensure your visitors stay efficient and accurate so they aren’t wasting any of their own time trying to locate and correct their errors in your forms. You also may be wondering how to achieve this so you don’t waste any of your own time trying to work through incorrect or invalid information.
Enter: Error messages.
What is an error message?
When someone enters an incorrect piece of information in your form, an error message is what pops up (in the best case scenario, in real-time) to notify your visitor about their mistake. Error messages help them easily locate the issue, fix it, and submit the form error-free.
Why Are Error Messages Important?
Error messages play a large role in your visitors’ user experience. If someone is repeatedly unable to submit your form and has no idea why or what the issue is, there’s a large chance they’re going to feel frustrated, angry, or simply leave your site altogether.
By adding well-crafted error messages to your forms, your form will feel professional and thoughtful to your visitors. Most importantly, error messages will enhance your form’s user experience — and great user experience means you’re more likely to see a boost in conversions. It also means more happy customers who are likely to return to your site and become promoters for your business.
To achieve a fantastic user experience, you can’t simply implement any error message in your forms. In fact, there are plenty of forms out there that include error messages that aren’t thoughtful or effective. In this post, we’ll cover some of the most frequently made error message mistakes.
Error Message Design: 6 Mistakes to Avoid and Good Examples to Follow
Let’s review six common mistakes you’ll want to avoid while creating error messages for your web forms and six preferable examples you can implement instead.
1. Error Message Placement
The placement of your error message is crucial. If someone submits your form and then sees a red box with the message “Your form contains errors” they wouldn’t actually know where the errors are located. Instead, avoid making your visitors feel confused by placing the message next to the error itself.
Mistake: Poor error message placement
This is an example of unhelpful and vague error message placement. It would be exceptionally difficult for someone to automatically know the exact location of the error with such an unclear message located in a pop-up box.
Good example: Great error message placement
This is called inline error message placement — it’s located directly inline with the error so your visitors are able to clearly see the issue at hand and quickly fix it.
2. Blame the User
Ever heard that saying, “The customer’s always right”?
Well, that same message applies to your web forms and their error messages. You should avoid any negative language and refrain from blaming your visitors for the error — use positive phrases and don’t place the blame anyone or anything.
The last thing you want to do is target your visitor and make them feel bad or belittled. Don’t ever blame them for the error in the form (even if they really did cause the issue).
You should also avoid negative and vague phrases such as, “Oops!” or “Something went wrong.” Having to correct an error or two might be a frustrating process for a person in a rush or someone who has already worked through multiple other errors in the same form. And lets face it, negative language isn’t going to make your visitors excited about correcting their mistakes — it’s also simply not at all helpful.
Good example: Don’t blame anyone or anything
In your error…