| page.title=Notifications in Android 4.4 and Lower |
| @jd:body |
| |
| <a class="notice-developers" href="{@docRoot}training/notify-user/index.html"> |
| <div> |
| <h3>Developer Docs</h3> |
| <p>Notifying the User</p> |
| </div> |
| </a> |
| |
| <a class="notice-designers" href="notifications.html"> |
| <div> |
| <h3>Notifications in Android 5.0</h3> |
| </div> |
| </a> |
| |
| <p itemprop="description">The notification system allows your app to keep the |
| user informed about events, such as new chat messages or a calendar event. |
| Think of notifications as a news channel that alerts the user to important |
| events as they happen or a log that chronicles events while the user is not |
| paying attention.</p> |
| |
| <h2>Anatomy of a notification</h2> |
| |
| <div class="layout-content-row"> |
| <div class="layout-content-col span-6"> |
| <h4>Base Layout</h4> |
| <p>At a minimum, all notifications consist of a base layout, including:</p> |
| <ul> |
| <li>the sending application's notification icon or the sender's photo</li> |
| <li>a notification title and message</li> |
| <li>a timestamp</li> |
| <li>a secondary icon to identify the sending application when the sender's |
| image is shown for the main icon</li> |
| </ul> |
| </div> |
| <div class="layout-content-col span-6"> |
| <img src="{@docRoot}design/media/notifications_pattern_anatomy.png"> |
| <div class="figure-caption"> |
| Base layout of a notification |
| </div> |
| </div> |
| </div> |
| |
| <h4>Expanded layouts</h4> |
| <p>You have the option to provide more event detail. You can use this to show |
| the first few lines of a message or show a larger image preview. This provides |
| the user with additional context, and - in some cases - may allow the user to |
| read a message in its entirety. The user can pinch-zoom or two-finger glide in |
| order to toggle between base and expanded layouts. For single event |
| notifications, Android provides two expanded layout templates (text and image) |
| for you to re-use in your application.</p> |
| |
| <img src="{@docRoot}design/media/notifications_pattern_expandable.png"> |
| |
| <h4>Actions</h4> |
| <div class="layout-content-row"> |
| <div class="layout-content-col span-6"> |
| <p>Android supports optional actions that are displayed at the bottom of |
| the notification. With actions, users can handle the most common tasks for a |
| particular notification from within the notification shade without having to |
| open the originating application. This speeds up interaction and, in |
| conjunction with "swipe-to-dismiss", helps users to streamline their |
| notification triaging experience.</p> |
| <p>Be judicious with how many actions you include with a notification. The |
| more actions you include, the more cognitive complexity you create. Limit |
| yourself to the fewest number of actions possible by only including the most |
| imminently important and meaningful ones.</p> |
| <p>Good candidates for actions on notifications are actions that are:</p> |
| <ul> |
| <li>essential, frequent and typical for the content type you're |
| displaying</li> |
| <li>time-critical</li> |
| <li>not overlapping with neighboring actions</li> |
| </ul> |
| <p>Avoid actions that are:</p> |
| <ul> |
| <li>ambiguous</li> |
| <li>duplicative of the default action of the notification (such as "Read" |
| or "Open")</li> |
| </ul> |
| </div> |
| <div class="layout-content-col span-7"> |
| <img src="{@docRoot}design/media/notifications_pattern_two_actions.png"> |
| <div class="figure-caption"> |
| Calendar reminder notification with two actions |
| </div> |
| </div> |
| </div> |
| |
| <p>You can specify a maximum of three actions, each consisting of an action |
| icon and an action name. Adding actions to a simple base layout will make the |
| notification expandable, even if the notification doesn't have an expanded |
| layout. Since actions are only shown for expanded notifications and are |
| otherwise hidden, you must make sure that any action a user can invoke from a |
| notification is available from within the associated application as well.</p> |
| |
| <h2>Design guidelines</h2> |
| <div class="layout-content-row"> |
| <div class="layout-content-col span-6"> |
| <img src="{@docRoot}design/media/notifications_pattern_personal.png"> |
| </div> |
| <div class="layout-content-col span-7"> |
| <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 the body of a notification (outside of the action |
| buttons), 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 such as 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>Correctly set and manage notification priority</h4> |
| <p>Starting with Jelly Bean, Android supports a priority flag for |
| notifications. This flag allows you to influence where your notification will |
| appear in comparison to other notifications and help to make sure that users |
| always see their most important notifications first. You can choose from the |
| following priority levels when posting a notification:</p> |
| |
| <table> |
| <tr> |
| <th><strong>Priority</strong></th> |
| <th><strong>Use</strong></th> |
| </tr> |
| <tr> |
| <td>MAX</td> |
| <td>Use for critical and urgent notifications that alert the user to a |
| condition that is time-critical or needs to be resolved before they can |
| continue with a particular task.</td> |
| </tr> |
| <tr> |
| <td>HIGH</td> |
| <td>Use high priority notifications primarily for important communication, |
| such as message or chat events with content that is particularly interesting |
| for the user.</td> |
| </tr> |
| <tr> |
| <td>DEFAULT</td> |
| <td>The default priority. Keep all notifications that don't fall into any |
| of the other categories at this priority level.</td> |
| </tr> |
| <tr> |
| <td>LOW</td> |
| <td>Use for notifications that you still want the user to be informed |
| about, but that rate low in urgency.</td> |
| </tr> |
| <tr> |
| <td>MIN</td> |
| <td>Contextual/background information (e.g. weather information, contextual |
| location information). Minimum priority notifications will not show in the |
| status bar. The user will only discover them when they expand the notification |
| tray.</td> |
| </tr> |
| </table> |
| <img src="{@docRoot}design/media/notifications_pattern_priority.png"> |
| |
| <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>You can provide more detail about the individual notifications that make up |
| a stack by using the expanded digest layout. This allows users to gain a better |
| sense of which notifications are pending and if they are interesting enough to |
| be read in detail within the associated app.</p> |
| |
| <img src="{@docRoot}design/media/notifications_expand_contract_msg.png"> |
| |
| <h4>Make notifications optional</h4> |
| <p>Users should always be in control of notifications. Allow the user to |
| disable your apps notifications or change their alert properties, such as alert |
| sound and whether to use vibration, 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 kinds of notifications are currently pending.</p> |
| |
| <div class="do-dont-label good"><strong>Do</strong></div> |
| <p style="margin-top:0;">Look at the notification icons the Android apps |
| already provide and create notification icons for your app that are |
| sufficiently distinct in appearance.</p> |
| <div class="do-dont-label good"><strong>Do</strong></div> |
| <p style="margin-top:0;">Use the proper <a |
| href="{@docRoot}design/style/iconography.html#notification">notification icon |
| style</a> for small icons, and the Holo Dark <a |
| href="{@docRoot}design/style/iconography.html#action-bar">action bar icon |
| style</a> for your action icons.</p> |
| <div class="do-dont-label good"><strong>Do</strong></div> |
| <p style="margin-top:0;">Keep your icons visually simple and avoid excessive |
| detail that is hard to discern.</p> |
| <div class="do-dont-label bad"><strong>Don't</strong></div> |
| <p style="margin-top:0;">Use color to distinguish your app from others.</p> |
| |
| <h4>Pulse the notification LED appropriately</h4> |
| <p>Many Android devices contain a tiny lamp, called the notification <acronym |
| title="Light-Emitting Diode">LED</acronym>, which is used to keep the user |
| informed about events while the screen is off. Notifications with a priority |
| level of MAX, HIGH, or DEFAULT should cause the LED to glow, while those with |
| lower priority (LOW and MIN) should not.</p> |
| |
| <p>The user's control over notifications should extend to the LED. By default, |
| the LED will glow with a white color. Your notifications shouldn't use a |
| different color unless the user has explicitly customized it.</p> |
| |
| <h2>Building notifications that users care about</h2> |
| <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. While Android's notification system |
| has been designed |
| to minimize the impact of notifications on the users attention, it is |
| nonetheless still important |
| to be aware of the fact that notifications are potentially interrupting the |
| users task flow. As you |
| plan your notifications, ask yourself if they are important enough to warrant |
| an interruption. If |
| you are unsure, allow the user to opt into a notification using your apps |
| notification settings or |
| adjust the notifications priority flag.</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>Avoid notifying 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 generally |
| do not warrant a real time interruption. For the users that do care about them, |
| allow them to opt-in.</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 create notifications that have no true notification content and merely |
| advertise your app. A notification should inform the user about a state and |
| should not be used to merely launch an app.</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="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><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></p> |
| |
| </div> |
| <div class="layout-content-col span-6"> |
| |
| <img src="{@docRoot}design/media/notifications_pattern_ongoing_music.png"> |
| |
| </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 further guidance on the |
| use of dialogs and toasts, refer to <a |
| href="{@docRoot}design/patterns/confirming-acknowledging.html">Confirming & |
| Acknowledging</a>.</p> |
| </div> |
| </div> |