UX Rule: Notification of Completion

Notification bars

So, as I move into exploring the realm of user experience(UX), I'm going to work on building a collection of rules for creating good user experiences. These rules are fast, but they aren't hard: every situation is different, and although these rules will be starting points, some negotiation may be required.

Rule One: All processing must display a notification to the user.

Read more to see my thoughts on when and how to do this.

Why Notifications?

Without a visual notification that the user's action was accomplished, the user may not realize that the desired action was completed. They might also not know that they caused something to happen unintentionally. For example, if you have a list of articles and a link to delete the article, the user might not notice that they accidentally hit the link.

When and What to Notify

Every display page that appears after some kind of processing is complete should display a notification to the user that the processing was accomplished. If the processing is accomplished via Ajax, then the notification should display in real time on the current page.

Notifications generally come in one of four flavors:

  • Success – The user completed an action, such as saving, updating, or deleting a record.
  • Failure – An action failed to complete due to an error, such as missing information or an actual error like failing to connect to a database.
  • Warning – An action could not be completed due to something within the scope of the application, such as insufficient privileges to complete the action.
  • Information – The user needs to be made aware of some information about the action.

How to Display a Notification

Notifications should be displayed at the top of the standard content area, below any normal headers or navigation. They should be made to stand out from the normal design by means of margins and spacing, but should still blend with the visual design of the site. Commonly these messages should be marked up with the standard color scheme listed below, but that does not prove to be sufficient for color blind users. In these cases, an icon and text notification should be used as well.

  • Success – Green is the predominate color. Common icons are check marks.
  • Failure – Red is the predominate color. Common icons are X's.
  • Warning – Yellow or orange are used most often. Common icons are exclamation points.
  • Information – Blue or gray work well for information. Common icons would be I's, or question marks.

If an action caused the creation of a record, or changes to a record, that record should be highlighted on the page as well. This will further help to indicate to the user which record was created or changed. Also, all notification messages should be a specific as possible. For example, rather then just saying "Record Deleted", you should say "User record for Jon Hartmann has been deleted."

Examples

Success: User removed.
Error: User could not be deleted.
Warning: You do not have permissions to delete this account.
The user has been deleted, but they can be retrieved from the "Deleted Users" section.

 

Related Blog Entries

Comments

Jason Dean's Gravatar I like this advice. This is something I have only recently started doing, and I agree that it is a much better user experience. You've given me some additional ideas to bring to my applications. Thanks.
Sami Hoda's Gravatar We will be using this lib for notifications:
http://www.stanlemon.net/projects/jgrowl.html
Tom Mollerus's Gravatar I agree that your UX rule makes sense, and is nicely implemented. I happen to have the same habit as this, which I learned from the Movable Type blogging application.
Comments are not allowed for this entry.
Jon Hartmann, July 2011

I'm Jon Hartmann and I'm a Javascript fanatic, UX/UI evangelist and former ColdFusion master. I blog about mysterious error messages, user interface design questions, and all things baffling and irksome about programming for the web.

Learn more about me on LinkedIn.