Most of us working in the web space already know that paying attention to how your application communicates with the person using it is an important part of user experience.
Yet, way too often we focus on getting the app working with all the functionality and we forget to allocate time to deal with a small, but important aspect of an application: what happens when things go wrong.
Here’s a list of very common scenarios that I’ve noticed, and how to avoid them when building an app. I’m not going to name-and-shame anyone, but these examples are all inspired by working web-apps and websites that I’ve used.
The worst offender: Not having a text error message at all
Yes, believe it or not, this happens and it can be a very frustrating experience for the user. For instance, imagine you’re filling out a long form and hitting submit. And then, nothing happens. You hit “submit” a few more times, but still nothing happens. So, in frustration, you scroll up and notice one of the field’s outline turned red. Great! So, the site is unhappy about something…but what? Especially if it hadn’t told you that the field was mandatory before you hit submit.
Having a non-human error message
This is a crime most of us are guilty of. We’re so familiar with the developing environment and the jargon used that we just think everyone gets it. Well, they don’t! Error codes “Error 3454!” do not help. “Unexpected input in field #123” does not help either. The internet has somewhat educated us about what the error 404 and error 500 are yet we still prefer our pages saying “Oops, something went wrong!”.
Being rude
Just to make it clear, I’m not expecting any sort of overly apologetic or sumptuous language. Using a sentence like “User not found” can work. They tell the user what went wrong, but they do so in a very dire, non-friendly way. You wouldn’t address you customers like that in real life, would you?
Explaining what went wrong, and nicely too
I’ve been leading up to this, so why is this a mistake? You may be thinking…but I’ve used “I’m sorry, we were unable to process this request”. What’s wrong with that? It’s common language, it’s friendly, it’s polite. It’s not wrong, but it could be better. In formulating an error message, try to provide a way out. “It looks like you haven’t registered with this email yet. Please contact us if you think this is a mistake.”
Lastly, a few tips to improve user experience and general user happiness when encountering error messages:
- If you have a web form that your users need to fill out, make sure you provide in-line help and examples. In what format do you expect the date? What do you accept as a valid password? Is that field numbers only? Make sure your user knows this even before entering anything. This number cannot be more than 10 digits. Limit the field to 10, and explain why typing doesn’t work when you’re trying to enter the 11th character. Mandatory fields. Mark them as such. Also, consider disabling the submit button until the mandatory fields are completed.
- Use CSS3 tricks to animate buttons to suggest that the form is being submitted, replace the button with a “loading” animation or at least change the button text to “wait…” while you’re processing the form. This is good practice, not only to prevent double submissions but also because the user stays informed of the progress. If they know the form is being process, they won’t be looking for possible errors that they may have made.
- Ensure that your error messages tone and language matches your brand. If you’ve been using “Buzz us if you’re stuck!” as a call to action for live help, don’t say “please submit a contact form if you require assistance” in the error message.
Allocating enough time and attention to get handling errors “right” can go a long way in ensuring that your customers stay happy and use your product. It can also be a good way to showcase your excellent attention to detail, a trait that is essential to most businesses success. So next time you are designing a website or app, try these simple techniques to ensure your users get the experience they deserve, even when things go wrong.
What has your experience been? Do you have any tips or examples related to error messages? Please share your thoughts in the comments!
