370 lines
15 KiB
Plaintext
370 lines
15 KiB
Plaintext
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="cols">
|
|
<div class="col-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="col-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="cols">
|
|
<div class="col-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="col-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="cols">
|
|
<div class="col-6">
|
|
<img src="{@docRoot}design/media/notifications_pattern_personal.png">
|
|
</div>
|
|
<div class="col-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="cols">
|
|
<div class="col-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="col-6">
|
|
<img src="{@docRoot}design/media/notifications_pattern_social_fail.png">
|
|
</div>
|
|
</div>
|
|
|
|
<h2 id="interacting-with-notifications">Interacting With Notifications</h2>
|
|
|
|
<div class="cols">
|
|
<div class="col-6">
|
|
|
|
<img src="{@docRoot}design/media/notifications_pattern_phone_icons.png">
|
|
|
|
</div>
|
|
<div class="col-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="cols">
|
|
<div class="col-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="col-6">
|
|
|
|
<img src="{@docRoot}design/media/notifications_pattern_ongoing_music.png">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cols">
|
|
<div class="col-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>
|