Monday, February 6, 2012

Error Message Design

As everyday computer users, I'm sure each of us have received error messages at least once, if not a couple of times already. An error message is essentially used to alert the user that a problem has occurred. A warning on the other hand will alert the user of a problem that is most likely to occur in the near future.Error messages are often displayed using modal dialog boxes, in-place messages, notifications, or balloons. A good error message should entail the following:
  • Inform the user that a problem has occurred
  • Briefly describe the problem using terms understandable even to the IT noob
  • Provide the user with a solution 
Apart from the information presented, how we present it also plays a very important role. We may be presenting the user with all the useful information, but just the way we present it might not be user-friendly and could lead to discomfort and dissatisfaction. The 10 Golden rules certainly have to be adhered to:
  • Visibility
  • Consistency
  • Familiarity
  • Affordability
  • Constraints
  • Navigation
  • Feedback
  • Recovery
  • Flexibility
  • Style
This aside, the following are the basic guidelines to follow. Examples have been provided wherever necessary. 
  • Avoid error messages if possible - Introduce constraints wherever possible thereby reducing the chances of going wrong. If the error can be automatically rectified, refrain from involving or interrupting the user. Also consider if the problem is relevant to what the user is currently working on.

  • Explicit indication that something has gone wrong - Do not use misguiding icons. For instance, dont use the warning icon to display an error. It may water down the severity of the presentation, but the user might be left confused. Also do not just tell the user that there is an error. Should try as much as possible to be specific even if we're unsure of the error.


Compare the above unknown error dialogue to the one below. Clearly goes to show that even if the problem is unknown, try to point the user to other sources which may be of help.

  • Human-readable language - We need to keep in mind the fact that non-IT professionals use the system as well. When we try to explain the reason behind an error, we need to be as non-technical as possible. For experts within the field, they may be given the option to view such details. But on the outset, it's best we dont baffle the user.

  • Polite phrasing- without blaming the user or imply that user is stupid or is doing something wrong
Do not blame the user as above. Use passive voice instead. Compare with below.

  • Precise descriptions of exact problems. Do not over communicate to the user. It would result in nothing more than confusion.
The above error message is good. But it tries to provide the user with all the information at one go. Compare this with the one below which essentially tries to solve the same problem.

  • Constructive advice on how to fix the problem. It's not enough to only highlight the problem. A workable solution is to be provided as well.

We've encountered this problem innumerable times! Sending or not sending an error report makes no difference. It closes the application anyway and sometimes results in the system hanging. When the suggestion is of no use, might as well not provide it.

  • Visible and highly noticeable - both in terms of message itself and how it indicates which dialogue element users must repair
  • Reduce the work of correcting the error (e.g. list of possibilities)
  • Hypertext links may be used to connect a concise error message to a page with additional background information or explanation of the problem.

  • Avoid Sound alerts - It's best not to have jarring sounds accompanying the dialogue boxes. Again, this depends on the environment in which the user is working. In an already chaotic environment, this feature would be of no use. Only when the error is extremely critical and needs immediate user attention we may employ this feature.

1 comment:

  1. A balanced mix of your view/opinion and facts, well referenced, and interesting coherent flow. The screen shots helps to illustrate your points better.

    Nicely done. Very good!

    ReplyDelete