Error Message Design: The Good, The Bad & The Guidelines

Error Messages

This week, we delve into something which everyone has encountered at least once in their lives: Error Messages.

Purpose of Error Messages (courtesty of http://msdn.microsoft.com)

An error message alerts users of a problem that has encountered. This may apply for both online and offline operations.

Our belief: We believe that an error message is one which alerts users of a problem in a way which is simple and understandable. The solution to solving the error should be put forth in a simple and concise manner too.

Key Design Guidelines

Positive Image & Clear Layout. Usage of image and colors positively can reduce the frustration and anger that the user may experience. Colors such as pink, blue and green are known to have a calming effect and using these colors in an error message could enhance the user experience. Positive images can too reduce anger when portrayed correctly.

Tone of Language. Users are like customers and hence, the usage of a friendly tone helps in getting the user re-visit the website or re-try the operation. Furthermore, using a non-accusatory tone allows the user to understand that the error was due to the website and not by them.

Links & Exit Routes. It is always ideal to provide users with exit routes. An exit route is a step or a solution to attempt to solve the error. Provision of exit routes or links is likely to encourage users to re-attempt the specific operation or re-enter the website. 

Human – Readable Language. Clear and concise language should be adopted by all error messages. If the cause of the error is due to technical faults and explanation may be too complicated, it is advisable not to include the cause. Deciding to include a complicated explanation may further frustrate the user and he may make incorrect decisions to rectify the problem.

Bad Examples

Famous “Blue Screen of Death”

– Wordy
The error message is too wordy. It provides a novice user facing the error with too much information. Doing so much increase the frustration of the user as he may think there are too much steps needed to solve the problem.

– Poor choice of colors
While it was mentioned earlier that blue has a calming effect. This dark shade of blue gives a perception of coldness while white gives a perception of unfriendliness in this context. It lacks a personal touch which may be threatening to the user.

Technical Information
A novice user just need to know the possible solutions to rectify the error. The designers however, assumes that their users are tech-savvy and understand the technical terms which confuses them and makes the situation more unbearable for the user.


– Unclear Instructions
A nice and simple layout is most of the time key to sending a message to the user. However in this example there is practically no way a average user is going to understand what he or she is going to do next!
 
– Poor choice of colours
Red is usually associated with anger, and flashing red during error message is not going to help the frustrated users.
 

Fanciful Design

– Bad layout
No doubt the first thing that users notice is the astronaut, which sometimes confuse users that the website they are entering has become a space related website.

– Poor communication
For users who know what Error 404 means, looking at this will be a good entertainment. However, for the average users, it will only confused the users even more.

Good Examples

Improved version of the Blue Screen of Death as shown in Windows 8

+ Human Readable Language
The improved version of the Blue Screen of Death has shown user just the necessary information (which is to just restart the computer!). For the techincal geeks, they are able to see they summarised error in the smaller font just below the main text.

+ Light colours and simple layout
Blue colour is always nice and pleasant to see. The use of SMS type smiley face is sure to bring a giggle to the user watching it, lowering the chance of the computer been tossed out.

+ Proposed action
Probably what the typical user need to know is to restart the computer, which is been presented nicely.

+ Light colors and a positive image
The light blue color and the smiling image on the coffee have a calming effect which pacifies frustrated or angry users.

+ Personal tone of language
The choice of words used are good. The message informs the user that there is a problem in a casual tone. Furthermore, the font type is informal which allows a calming effect to the user.

+ Proposed Solutions
Various solutions are proposed to the user to attempt to rectify the problem. A customer-centric approach is evident given that services to rectify the error is provided for free; implying that this error is their responsibility and not the user’s.

+ Human Readable Language
The cause of the error may not be known but the designer did not bother the user with any unnecessary information and provided the proposed solution. No technical knowledge is needed to understand the error and the solutions are clearly stated.

Conclusion

It is important that error messages are designed and presented to the user in the most friendly manner possible. Providing a good user experience is key to retaining the user in using its product. There are certainly many way in designing a good error message, and they always follow the few key design guidelines that we have presented in the above section.

Something to end this post with

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s