Design Pattern Library 1.5

General Guidelines

Desktop/Web

Mobile (Tablet & Phone)

Visual Design Guidelines

Messages - Notifications

Problem

The system needs to inform the user of a non-critical event, but not in a way that will disrupt the user's attention to the tasks being focused on.

Solution

Notifications help users maintain their flow by presenting useful, relevant information that can easily be ignored. Notifications are presented in a low-key, peripheral way, and they don't require interaction.

 

 

Code

HTML code here
	
CSS code here
	

Why

The information in a notification is useful and relevant, but never critical. Consequently, notifications don't require immediate user action and users can freely ignore them.

A notification informs users of events that are unrelated to the current user activity, by briefly displaying a balloon from an icon in the notification area. The notification could result from a user action or significant system event, or could offer potentially useful information from the application.

How

Notifications are displayed for a fixed duration of 9 seconds. Notifications aren't displayed immediately when users are inactive or screen savers are running. The application should queue notifications during these times, and display the queued notifications when the user resumes regular activity. Consequently, you don't have to do anything to handle these special circumstances.

Notifications are for asynchronous information only. If the information is the immediate, direct result of users' interaction with your application, display this synchronous information directly within your application instead using a notification.

If a notification is used for an event that users can safely ignore at first, but that must addressed eventually, an alternative UI should be used when the situation becomes critical. This technique is known as progressive escalation.

Developers and designers often want to present their notifications in a way that users can't ignore. This goal completely undermines the primary benefit of notifications because it would break users' flow. If users are distracted by your notifications or feel obligated to read them, your notification design has failed.

If you are concerned that users are ignoring your notifications, consider the following:

  • If you are using notifications correctly and they don't require immediate user action, then having users choose to ignore them is by design. Don't change this.
  • If the event requires immediate user action, use an alternative user interface (UI) that users cannot ignore.
  • Use progressive escalation where applicable.

Examples