Blaming the User How-tos

How to: Error Messages

Error messages. You encounter them just about every day. No single person is perfect, nor is every website. Error messages are an inevitability. Thus learning to both deal with them, and make them a seamless part of your user experience is key.

Errors are a key component of learning, it is through trial and error as children that we learn how the world works. It is continuous – we all make mistakes and we learn from them. Regardless, this doesn’t detract from the frustration of being met by the red banded text. Glaring in your face like a matador’s cape, as your face blends to a similar tone of maroon – all because, ‘the computer says no’.

Errors differ, and the responding message has to be appropriate to the situation. It isn’t always a case of the user learning from the their mistakes, as the mistake isn’t always made by the user. All too easily errors can be the source of unlimited frustrations. Frustration leads to anger, and if your visitors are getting angry, that’s a sure sign of a terrible user experience. Why would they come back?

There are a few ways we can ease these frustrations; coax the user into reaching the intended result, recover from their error or explain a situation.

Colour

One of the most amazing properties of colour is its great ability to carry cultural associations. With colour so abundant around us, we have grown used to associating specific parts of light’s spectrum to areas of our everyday life. Colour has the ability to draw on and relay emotion, creating subconscious reactions for the reader

One of the main uses of colour is to draw attention to areas that require attention. Distinguishing these from the rest of the screen.

Red Errors

As we can see red is abundant, and the reason obvious. In western society we relate red to danger, to problems. An alert wanting our attention. Colouring our error adds added emphasis to it, and red offers the intended impression – it tells the user to be alert and take action. A green error would merely create confusion. Our instinct tells us it’s safe and all well. Whereas the text is telling us otherwise. It is counter intuitive to the user and only slows down the resolution process. Having errors resolved as quickly as possible it key to a good user experience.

Red and Green
Which makes the most sense? We automatically associate the red warning with danger, whereas the green seems to imply the opposite…

Choice

Choice has a huge effect on user experience. Users, whether knowingly or unknowingly, want to be taken down a linear journey. It’s a myth that increased choice is a good thing. It only complicates matters, confusing and frustrating your users. Show them a defined process, a logical start and finish.

Errors should encapsulate this. When your user’s frustration has peaked, you don’t want to push them over the edge with a complex error message. Offer them only the essential options. Let them take action, resolve and move on as quickly and efficiently as possible.

Messy and Clean
Rather than giving the user some complex jargon to then pass onto someone else, direct to a troubleshooting page or the like, so they may quickly resolve the issue themselves.

Not only is the amount of choice you offer essential, but the quality. We don’t want to overcomplicate things, yet if we simplify it too much we can all too easily trap the user. Don’t trap them with dialogue boxes. The aim is to recover, so offer the appropriate options. Again, simple and intuitive.

Trapped User
Which am I meant to choose?

Tone of Voice

Much like any customer service situation, the tone of voice is essential in relieving the problems of your user. The tone of voice changes with the situation, but in general you must be understanding and apologetic. It may be a user error, but paring them off as ‘stupid users’ will get you nowhere – without them no one gets paid.

Firstly, feedback is essential. It is essential the user is informed of the situation.

unknown error
Telling the user there’s an error simply isn’t enough, give a brief description of the error to help orientate them.

Check what you are saying. Humour can be appropriate in some situations to help break the ice, and relive some of that stress. It is entirely based on the situation however. A poorly timed joke will do far more harm than good. 404 pages are a good place to start however. They are non-threatening errors which will cause relatively little annoyance.

404
Source: O2a.net

On top of this, do your utmost to avoid ‘geek speak’. Again, this may be situational. If you know who your audience is, and know they will understand, then fine. Otherwise, avoid at all costs. Explain the situation in simplistic terms, and let the user recover.

Geek Speak
Errors written by programmers, for programmers usually don’t go down too well.

It is also important to be humble, admit you’ve made a mistake if you have. However, even if it is a user error we’re dealing with, NEVER blame the user.

Blaming the User
Perhaps slightly over the top, but you get the idea!

Apologetic
Just say sorry!

Other important aspects to consider include the font used, and its styling. This is essential in creating the conversation with your user. More detailed information on this can be read here.

Positioning

Finally, the positioning of your error messages are key. This all comes down to good User Experience design practice. Logical positioning not only saves you further detailing the situation, but also allows the user to quickly see where they are going wrong and – that word again – recover!

Intuitive Errors
On the left, it isn’t too obvious which error refers to which field, by placing them more intuitively, it is obvious!

Takeaways

  • Use colour to help enforce and highlight errors, but use it logically
  • Ensure errors are quick and easy to recover from by the user
  • Do not trap your user with illogical dialogue boxes
  • Describe the situation to your user, don’t leave them guessing
  • Humour can be beneficial, but must be used in the correct context!
  • Avoid geek-speak at all costs! Speak in a user-friendly language.
  • Never blame the user, be humble.
  • Position logically so your users understand the context of the error

7 comments

  1. Abinash Mohanty

    Thanks Oliver for the article, this is indeed a nice article especially the examples you came up with, which are quite helpful for others.

  2. Oliver McGough

    No problem, I’m glad you like it!

  3. Robin

    Mwohaha, oh the irony. When I click on the O2a.net link I get an….error message (page not found)! :-P

  4. Oliver McGough

    Ha, brilliant! I’ll take it look at it!

  5. Pete Avey

    very ironic Source: O2a.net

  6. Emm

    Thanks for the UX tips. One thing I’m still trying to discover is if there’s a best place to position a page-level alert. I feel it should be top-level under the header and navigation, but my boss feels it should display under the page heading. Because the colors are also very muted, I just don’t think this positioning/color-scheme is noticeable enough. Also, if the site has breadcrumbs, should it go above or below? A few tips on best practices for positioning of page-level alerts would be much appreciated! Thanks!

  7. Oliver McGough

    Thanks Emm :) Those are some great musings. I’ve seen stuff about where best to place CTAs (here) but not errors or breadcrumbs. Would be interesting tests to run. I may look into it in the next couple of weeks for you!

Leave a Reply

Your email address will not be published. Required fields are marked *