The Erroneous Design of Error-messages!
In the first three apps that I designed, in my excitement I made perhaps the worst design decisions ever — none of the three designs had provisions for error messages.
It’s been quite a long time since that blunder and I now know that error messages are perhaps one of the most significant components of any design system. But the new problem that has cropped up is that — the error messages themselves are being designed in a poor fashion. This justifies the existence of this guideline-of-sorts to make sure that you do not make errors while designing your error messages.
But.. why?
Why are good error messages so necessary in the first place?
- They help mistake-makers to move forward faster
- Decreases the chance of making the same mistake again
- This makes sure that the net number of complaints, also drops
- Last but not the least, increases usability and boosts user satisfaction
Does the word “cortisol” ring a bell? It’s the stress hormone. And the levels of cortisol spiked in people who were dealing with poorly designed error messages whenever there was any hitch whatsoever. So effectively, poorly designed error messages are not just bad to look at and step around, but they are also harming harmful. Physically! Now you know why it is your responsibility to make sure that your bad UX design choices don’t meddle with the health of users. You need to make sure your error messages are error-free themselves.
So.. how?
Oh am I glad you asked!
The to-do list to ensure that your error messages are not erroneous, is long but exhaustive (one would hope). Here are some of the rather crucial things to bear in mind the next time you are plotting possible error scenarios, and designing the complementary error messages.
- Explicitly mention that something has gone wrong
- Do not be rude in indicating that and error has been committed — do not blame the user
- Make sure that the error and its message are on the same screen and are consistent with respect to the style guide
- Provide concise and precise description of the error scenario — do not be vague or over-communicative
- Stay away from technical jargon — make sure any layman can understand at first glance, what went wrong, and how to deal with it
- Provide specific and relevant sense of direction to the user
- Actionable buttons or options should have labels consistent with the actual way to move forward
- Make sure the message does not contain labels in ALL CAPS or exclamation marks! — embrace humour and try to let users feel that they are interacting with a human, not a machine
- Give one single reason for the error — you can give multiple reasons, provided there are multiple clearly-defined solutions
- Use proper principles of UI design to make sure that the look and feel of the error message is not outlandish and conforms with the brand style guidelines
And.. the takeaway?
So what I really want you to have a clear comprehension of, is that the error messages that you design should not just be alert warnings but more of actionable helpers — that anyone can understand and work around. Only then will you be doing it right.
And if you’re unsure about their effectiveness, let a non-technical person try out some errors, and observe how they perceive your error messages. The way they deal with your product will speak volumes about what you are doing right, and what you need to do right.
All said and done, try to keep one very important thing in mind — the absolute best error message is that, which never pops up. Read that again.
Got it? The best design is that which leaves no scope for making errors at all. Think about it — is the user never got a chance to make an error in the first place, the need for an error message (irrespective of how user-friendly or unfriendly it is) would never arise. Shouldn’t we, ideally aspire to be that designer?
Have fun designing!
P.S. I did eventually add error messages to all the three apps. Shame on you for judging!
If you are new to the vibrant meadow of Design, you might want to get acquainted with the terminology and the basic design jargon.
Here are some articles that will probably lead you down the right path —
For the “pro”-s out there, here’s some food for thought —
Cheers!
