diff options
Diffstat (limited to 'docs/html/design/patterns/notifications.jd')
-rw-r--r-- | docs/html/design/patterns/notifications.jd | 236 |
1 files changed, 236 insertions, 0 deletions
diff --git a/docs/html/design/patterns/notifications.jd b/docs/html/design/patterns/notifications.jd new file mode 100644 index 0000000..ad88a01 --- /dev/null +++ b/docs/html/design/patterns/notifications.jd @@ -0,0 +1,236 @@ +page.title=Notifications +@jd:body + +<p>The notification system allows your app to keep the user informed about important events, such as +new messages in a chat app or a calendar event.</p> +<p>To create an app that feels streamlined, pleasant, and respectful, it is important to design your +notifications carefully. Notifications embody your app's voice, and contribute to your app's +personality. Unwanted or unimportant notifications can annoy the user, so use them judiciously.</p> +<h4>When to display a notification</h4> +<p>To create an application that people love, it's important to recognize that the user's attention and +focus is a resource that must be protected. To use an analogy that might resonate with software +developers, the user is not a method that can be invoked to return a value. The user's focus is a +resource more akin to a thread, and creating a notification momentarily blocks the user thread as +they process and then dismiss the interruptive notification.</p> +<p>Android's notification system has been designed to quickly inform users of events while they focus +on a task, but it is nonetheless still important to be conscientious when deciding to create a +notification.</p> +<p>While well behaved apps generally only speak when spoken to, there are some limited cases where an +app actually should interrupt the user with an unprompted notification.</p> +<p>Notifications should be used primarily for <strong>time sensitive events</strong>, and especially if these +synchronous events <strong>involve other people</strong>. For instance, an incoming chat is a real time and +synchronous form of communication: there is another user actively waiting on you to respond. +Calendar events are another good example of when to use a notification and grab the user's +attention, because the event is imminent, and calendar events often involve other people.</p> + +<img src="{@docRoot}design/media/notifications_pattern_real_time_people.png"> + +<div class="vspace size-2"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-7"> + +<h4>When not to display a notification</h4> +<p>There are however many other cases where notifications should not be used:</p> +<ul> +<li> +<p>Don't notify the user of information that is not directed specifically at them, or information +that is not truly time sensitive. For instance the asynchronous and undirected updates flowing +through a social network do not warrant a real time interruption.</p> +</li> +<li> +<p>Don't create a notification if the relevant new information is currently on screen. Instead, use +the UI of the application itself to notify the user of new information directly in context. For +instance, a chat application should not create system notifications while the user is actively +chatting with another user.</p> +</li> +<li> +<p>Don't interrupt the user for low level technical operations, like saving or syncing information, +or updating an application, if it is possible for the system to simply take care of itself without +involving the user.</p> +</li> +<li> +<p>Don't interrupt the user to inform them of an error if it is possible for the application to +quickly recover from the error on its own without the user taking any action.</p> +</li> +<li> +<p>Don't use notifications for services that the user cannot manually start or stop.</p> +</li> +<li> +<p>Don't create superfluous notifications just to get your brand in front of users. Such +notifications will only frustrate and likely alienate your audience. The best way to provide the +user with a small amount of updated information and to keep them engaged with your application is to +develop a widget that they can choose to place on their home screen.</p> +</li> +</ul> + + </div> + <div class="layout-content-col span-6"> + + <img src="{@docRoot}design/media/notifications_pattern_social_fail.png"> + + </div> +</div> + +<h2 id="design-guidelines">Design Guidelines</h2> + +<div class="layout-content-row"> + <div class="layout-content-col span-6"> + + <img src="{@docRoot}design/media/notifications_pattern_anatomy.png"> + + </div> + <div class="layout-content-col span-6"> + +<h4>Make it personal</h4> +<p>For notifications of items sent by another user (such as a message or status update), include that +person's image.</p> +<p>Remember to include the app icon as a secondary icon in the notification, so that the user can +still identify which app posted it.</p> + + </div> +</div> + +<h4>Navigate to the right place</h4> +<p>When the user touches a notification, be open your app to the place where the user can consume and +act upon the data referenced in the notification. In most cases this will be the detail view of a +single data item (e.g. a message), but it might also be a summary view if the notification is +stacked (see <em>Stacked notifications</em> below) and references multiple items. If in any of those cases +the user is taken to a hierarchy level below your app's top-level, insert navigation into your app's +back stack to allow them to navigate to your app's top level using the system back key. For more +information, see the chapter on <em>System-to-app navigation</em> in the +<a href="{@docRoot}design/patterns/navigation.html">Navigation</a> design pattern.</p> +<h4>Timestamps for time sensitive events</h4> +<p>By default, standard Android notifications include a timestamp in the upper right corner. Consider +whether the timestamp is valuable in the context of your notification. If the timestamp is not +valuable, consider if the event is important enough to warrant grabbing the user's attention with a +notification. If the notification is important enough, decide if you would like to opt out of +displaying the timestamp.</p> +<p>Include a timestamp if the user likely needs to know how long ago the notification occurred. Good +candidates for timestamps include communication notifications (email, messaging, chat, voicemail) +where the user may need the timestamp information to understand the context of a message or to +tailor a response.</p> +<h4>Stack your notifications</h4> +<p>If your app creates a notification while another of the same type is still pending, avoid creating +an altogether new notification object. Instead, stack the notification.</p> +<p>A stacked notification builds a summary description and allows the user to understand how many +notifications of a particular kind are pending.</p> +<p><strong>Don't</strong>:</p> + +<img src="{@docRoot}design/media/notifications_pattern_additional_fail.png"> + +<p><strong>Do</strong>:</p> + +<img src="{@docRoot}design/media/notifications_pattern_additional_win.png"> + +<p>If you keep the summary and detail information on different screens, a stacked notification may need +to open to a different place in the app than a single notification.</p> +<p>For example, a single email notification should always open to the content of the email, whereas a +stacked email notification opens to the Inbox view.</p> +<h4>Clean up after yourself</h4> +<p>Just like calendar events, some notifications alert the user to an event that happens at a +particular point in time. After that moment has passed, the notification is likely not important to +the user anymore, and you should consider removing it automatically. The same is true for active +chat conversations or voicemail messages the user has listened to, users should not have to manually +dismiss notifications independently from taking action on them.</p> + +<div class="vspace size-1"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-7"> + +<h4>Provide a peek into your notification</h4> +<p>You can provide a short preview of your notification's content by providing optional ticker text. +The ticker text is shown for a short amount of time when the notification enters the system and then +hides automatically.</p> + + </div> + <div class="layout-content-col span-6"> + + <img src="{@docRoot}design/media/notifications_pattern_phone_ticker.png"> + + </div> +</div> + +<h4>Make notifications optional</h4> +<p>Users should always be in control of notifications. Allow the user to silence the notifications from +your app by adding a notification settings item to your application settings.</p> +<h4>Use distinct icons</h4> +<p>By glancing at the notification area, the user should be able to discern what notification types are +currently pending.</p> +<p><strong>Do</strong>:</p> +<ul> +<li>Look at the notification icons the Android apps already provide and create notification icons for + your app that are sufficiently distinct in appearance.</li> +</ul> +<p><strong>Don't</strong>:</p> +<ul> +<li>Use color to distinguish your app from others. Notification icons should generally be monochrome.</li> +</ul> + +<h2 id="interacting-with-notifications">Interacting With Notifications</h2> + +<div class="layout-content-row"> + <div class="layout-content-col span-6"> + + <img src="{@docRoot}design/media/notifications_pattern_phone_icons.png"> + + </div> + <div class="layout-content-col span-6"> + +<p>Notifications are indicated by icons in the notification area and can be accessed by opening the +notification drawer.</p> +<p>Inside the drawer, notifications are chronologically sorted with the latest one on top. Touching a +notification opens the associated app to detailed content matching the notification. Swiping left or +right on a notification removes it from the drawer.</p> + + </div> +</div> + +<div class="layout-content-row"> + <div class="layout-content-col span-6"> + +<p>On tablets, the notification area is integrated with the system bar at the bottom of the screen. The +notification drawer is opened by touching anywhere inside the notification area.</p> + + </div> + <div class="layout-content-col span-6"> + + <img src="{@docRoot}design/media/notifications_pattern_tablet.png"> + + </div> +</div> + +<div class="layout-content-row"> + <div class="layout-content-col span-6"> + + <img src="{@docRoot}design/media/notifications_pattern_ongoing_music.png"> + + </div> + <div class="layout-content-col span-6"> + +<h4>Ongoing notifications</h4> +<p>Ongoing notifications keep users informed about an ongoing process in the background. For example, +music players announce the currently playing track in the notification system and continue to do so +until the user stops the playback. They can also be used to show the user feedback for longer tasks +like downloading a file, or encoding a video. Ongoing notifications cannot be manually removed from +the notification drawer.</p> + + </div> +</div> + +<div class="layout-content-row"> + <div class="layout-content-col span-12"> + +<h4>Dialogs and toasts are for feedback not notification</h4> +<p>Your app should not create a dialog or toast if it is not currently on screen. Dialogs and Toasts +should only be displayed as the immediate response to the user taking an action inside of your app. +For instance, dialogs can be used to confirm that the user understands the severity of an action, +and toasts can echo back that an action has been successfully taken.</p> + + </div> +</div> + +<div class="vspace size-1"> </div> + +<img src="{@docRoot}design/media/notifications_pattern_dialog_toast.png"> |