Handle with Care: 5 Simple Rules for Dealing with Web Form Error Messaging
We’ve all been there, you’ve spent what feels like years of your life filling in a web form and you’re finally ready to hit submit, only to find that ‘an error has occurred’.
The very same thing happened to me about a year ago. Unfortunately I was far too enraged to take a screen grab of the offending form, but I remember the details clearly enough. I was filling in a form on the British Airways website in preparation for a forthcoming trip to America. I had spent a good 10 minutes filling out this form, which culminated in having to provide the details of the hotel I would be staying at during my trip. As I hit the submit button, the dreaded red text appeared at the top of the form; ‘Your form contains errors’ — or words to that effect — a completely useless, nondescript rejection of the information I had just spent so many precious minutes of my life carefully completing. With no obvious signs of missed input fields or unchecked boxes, I began reviewing each field in turn. To cut a long and painful story short, it turned out that the hotel address, which I had entered as it appeared on my booking confirmation, contained a hyphen. This hyphen was a special character, and special characters were not valid on this form… not that this information was provided at any point. I suspect I only found the solution at all because I have enough technical knowledge to guess that this could be the problem. I imagine there are less computer literate users all over the place putting their fists through their computer monitors on a routine basis out of sheer frustration.
When presented in this way, error messages are the archetypal ‘computer says no’ frustration of digital life. No wonder large swathes of people break out in a cold sweat as soon as they see them. As UX designers, we have the opportunity to set right a lot of the wrongs that web forms inflict on users.
The five rules below are a great starting point.
Make them easy to understand
For this first rule, I’ll point you straight in the direction of Google’s Material Design guidelines on writing:
“Clear, accurate, and concise text makes interfaces more usable and builds trust. Strive to write text that is understandable by anyone, anywhere, regardless of their culture or language.”
This is a great place to start for making sure your error message actually describes the problem coherently, and without jargon.
Add a human touch
This rule follows on strongly from the previous but is worth keeping in mind at all times. Remember that these forms are being filled out by humans, who have a million things to do in any given day besides spending hours filling in your web form. Avoid language that sounds like it was written by machines for machines. Yes, it’s a fine balancing act to make a message clear and concise as well as human, but it’s worth spending time on.
Avoid negative language
Don’t be a Debbie Downer; where it’s appropriate, try to keep things as positive as possible and put the blame on you. The last thing a user wants to be told is that it’s their fault that it didn’t work. Don’t allow your users to feel stupid. As Don Norman states in The Design of Everyday Things, people have a natural tendency to blame themselves anyway, so try not to rub it in.
Give users a next step
Rather than just informing the user of what happened to go wrong, try and offer them an action point so they know how to proceed. Leaving them in a state of limbo with no obvious signs of how to end the web form hell is a surefire way to get a user to close the browser and never return. Try adding some helpful hints, or if they’re really stuck, a chance to scrap it all and start again.
Try to avoid the error in the first place
This may seem obvious but it’s surprising how many web forms provide you with the password character restrictions after you’ve already tried to create one, much like the one used below by Ryanair.
A lot of errors can be avoided in the first place by clearly written instruction, in-line form validation and creating clear and concise goals for the user to achieve. Provide as much upfront information as possible, and work on getting the microcopy as good as it can be.
Hopefully, by following these rules, the future of web forms may not be the all-encompassing torture it seems to be at present.
