Why

• The system should always provide feedback to user’s actions. Feedback messages help the user to understand how the system interprets his actions and guide the user towards his goals.
• The feedback should be given in context, not out of the context. Same-page feedback messages tells user what he needs to know where he need to know it.
  • If the user makes a mistake on a form, seeing an error message and the form at the same time makes it easier for the user to fix the problem, compared to a situation where the message is shown on a separate page or in a dialog box.
  • When the user completes a task, showing a success message in context explains the result of user’s actions and allows user to continue his work without interruption.

How it works

General

• Keep the number of different message styles within an application at minimum to keep it simple. Usually you need only two different types of messages: success messages and error messages.
• Make the messages clearly stand out from other content. You need to be sure the user notices them and understands their significance immediately. Use bold text, different text and background colors, success and error icons etc.
• Style each message type differently. Use red color for error messages, yellow for warnings, and green for success messages.

Errors

• Prevent user errors when possible.
  • Clearly indicate required or optional fields on a form (see Required Form Fields pattern).
  • Avoid text fields when possible and use radio buttons, drop-down lists, and other input controls instead that minimize input errors (see Input Controls pattern).
  • Help the users to give an answer by suggesting valid answers from which to pick from (see Inline Suggestions pattern).
• Show a styled message at the top of the form, which tells the user an error has happened. It is a place where users look first.
• Highlight clearly each field that is in error. For example, change the background color of the input fields, or add thickened borders around them.
• Provide clear instructions on how to fix the problems. Usually it is a good way to show the instructions on how to recover both in the top of the form message and next to the input fields in error.
• Try to guess the correct action to fix the problem if possible. For example, provide some alternatives from user can choose from.

Success

• Show original page again with a success message after a successful action. Usually the best place for the message is at the top of the page, but sometimes it is better to show the message closer to a control that triggered the action.
• Allow user to hide the success message. An alternative is to make the message disappear automatically after a while when appropriate.
• Provide undo button or link with the message if possible (see Undo pattern).
• Make it easy for the user to do the same task again. Don’t get in the user’s way.

Guidelines for writing feedback messages

• Keep the messages short and precise. Less is more.
• Use clear, natural language instead of computer terms. “Please enter a a title for your post” is more informative and easier to understand than just “Title is missing”.
• Be polite. Don’t annoy the user.

History

The pattern was last updated on March 4, 2009. The first version was created on March 11, 2008 by Janne Lammi. It is inspired by several articles, design patterns, and books on the topic.

Pattern Gallery

Show Your Pattern Examples Here!

Add your examples to this pattern by adding them to flickr.com group UIPatternFactory.com and tagging with this tag:

More photos in Flickr group "UIPatternFactory.com" tagged with messages