As a webmaster, you don't want to be sent nonsensical or dangerous data, that would mean lost orders/leads and bad customer service. So you must validate what the users input before they can send it to you, this is form validation.
We covered this as one of the points in our recent 7 deadly sins download, however, we then thought it was worthy of a post to go into more detail explaining the issues poor form validation can cause you. There's a vast amount you could write about the technical implementations of data validation and security, but this article is primarily just looking at the client side, visual best practices.
Building a website can be boiled down to a long string of trade offs. One such trade-off is this: You want accurate data posted through a form, but you don't want to put off users with a strict form and lots of error messages. So, our recommendations on how to balance it?
- Validation Styles
- Validation Messages
- When to show validation
Most modern browsers have some built in validation, such as showing a popup for required fields if you leave them blank. When on a mobile browser it's super helpful when a date selector, '.com' or @ buttons appear on the main keyboard, instead of buried amongst the punctuation keys. This is easy to implement through url, email or date type inputs so there's really no excuse not to!
You definitely shouldn't rely solely on these browser defaults, they don't catch much and they don't match the styles of your site. You should be aiming to make your form error messages fit in to your brand and website aesthetics.
Red is fairly well known for indicating errors or warnings, but try desaturating it slightly to make it easier to read. Likewise, consider users with accessibility issues such as colour blindness, or users with English as a second language. Icons can help these barriers.
Error messages should be positioned near to the field where the error has appeared, as opposed to just listing them all at the top or bottom of the form. they can be above, below or at the side of a field, which ever it is just keep it consistent!
The text you put in your error messages should be as helpful as possible. Don't just use "There was a problem with this field" by default. Put something relevant, on brand and in keeping with your target audience like, "This username is not available", "This date is in the past" or "The location you've entered is not in this country". Setting up dynamic error messages like this will take a bit more effort, but using the defaults is lazy, and users will pick up on this.
Don't blame the user or be overly critical. Be humble and accept that the user has made a mistake because you didn't make it clear enough what to do. A lot of us older windows users can remember this ditty: "This program has performed an illegal operation and will be shut down". This is so alarmist! Try writing something for humans, not for robots.
- Please review your information
- Sorry, we couldn't find that info
- We didn't recognise this ID
- Short passwords are easy to guess, try one with at least 8 characters
- Something went wrong
- This field has errors
- Submission failed
- There was a problem
- Entry prohibited
When to show validation
When to show form validation can be grouped in to two categories:
- After submission
After submission is just as it sounds, the user completes the form and clicks submit, then the system checks all of the entries and displays error messages. Depending on how your form is built, sometimes this will reload the page, sometimes not.
Inline form validation is when fields are validated as the user is filling out the form. Generally this approach is preferred over After submission, as it is promoting a conversational feeling with the form. You enter a value and get immediate feedback, rather than having to traipse back over content you've already completed. It's especially helpful for fields that are likely to go wrong, such as URLs or having to pick a unique username.
Sticking with Inline validation for a moment, there is still some choice for when to fire the validation. If you show the validation before a user has finished filling out a specific field they might shout "Hey, I'm not done yet!". Firing validation when a user clicks out of a field is generally favoured, as then they see the error before moving on, but not before they're done.
There are a number of things to watch out for when considering form validation. Is your form validation trying to gloss over a fundamental flaw with your fields? Are they poorly labelled? Are you requiring space in post code or phone numbers? Investigate which fields users are having the most trouble with and consider restructuring and redesigning the form.
Remember, you are not the user. Just because something seems easy to you, doesn't mean it's easy for everyone else. Consider user testing or session recordings to get to the bottom of where real users are getting tripped up.
To discuss how we could turbo-charge your forms, get in touch about our UX auditing services.