help, notificaion page updates and typos
-changed copy to remove instances of eg
Change-Id: Ife1da42ffdd25ffbfe23d0315cd27df4c738e182
diff --git a/docs/html/design/design_toc.cs b/docs/html/design/design_toc.cs
index a31fdd3..c0c843a 100644
--- a/docs/html/design/design_toc.cs
+++ b/docs/html/design/design_toc.cs
@@ -36,6 +36,7 @@
<li><a href="<?cs var:toroot ?>design/patterns/selection.html">Selection</a></li>
<li><a href="<?cs var:toroot ?>design/patterns/notifications.html">Notifications</a></li>
<li><a href="<?cs var:toroot ?>design/patterns/settings.html">Settings</a></li>
+ <li><a href="<?cs var:toroot ?>design/patterns/help.html">Help</a></li>
<li><a href="<?cs var:toroot ?>design/patterns/compatibility.html">Compatibility</a></li>
<li><a href="<?cs var:toroot ?>design/patterns/pure-android.html">Pure Android</a></li>
</ul>
diff --git a/docs/html/design/media/app_structure_book_detail_page_flip.png b/docs/html/design/media/app_structure_book_detail_page_flip.png
index 0cca587..1066094 100644
--- a/docs/html/design/media/app_structure_book_detail_page_flip.png
+++ b/docs/html/design/media/app_structure_book_detail_page_flip.png
Binary files differ
diff --git a/docs/html/design/media/app_structure_gallery_filmstrip.png b/docs/html/design/media/app_structure_gallery_filmstrip.png
index 483bafa..a937533 100644
--- a/docs/html/design/media/app_structure_gallery_filmstrip.png
+++ b/docs/html/design/media/app_structure_gallery_filmstrip.png
Binary files differ
diff --git a/docs/html/design/media/compatibility_physical_buttons.png b/docs/html/design/media/compatibility_physical_buttons.png
index 30d5ddd..66a23c8 100644
--- a/docs/html/design/media/compatibility_physical_buttons.png
+++ b/docs/html/design/media/compatibility_physical_buttons.png
Binary files differ
diff --git a/docs/html/design/media/compatibility_virtual_nav.png b/docs/html/design/media/compatibility_virtual_nav.png
index ea595a4..27d39b2 100644
--- a/docs/html/design/media/compatibility_virtual_nav.png
+++ b/docs/html/design/media/compatibility_virtual_nav.png
Binary files differ
diff --git a/docs/html/design/media/index_landing_page.png b/docs/html/design/media/index_landing_page.png
index 2d6eca4..2065344 100644
--- a/docs/html/design/media/index_landing_page.png
+++ b/docs/html/design/media/index_landing_page.png
Binary files differ
diff --git a/docs/html/design/media/notifications_expand_contract_msg.png b/docs/html/design/media/notifications_expand_contract_msg.png
new file mode 100644
index 0000000..f37ec2c
--- /dev/null
+++ b/docs/html/design/media/notifications_expand_contract_msg.png
Binary files differ
diff --git a/docs/html/design/media/notifications_pattern_additional_fail.png b/docs/html/design/media/notifications_pattern_additional_fail.png
index 707c98c..4f056db 100644
--- a/docs/html/design/media/notifications_pattern_additional_fail.png
+++ b/docs/html/design/media/notifications_pattern_additional_fail.png
Binary files differ
diff --git a/docs/html/design/media/notifications_pattern_additional_win.png b/docs/html/design/media/notifications_pattern_additional_win.png
index eb193d8..9d69dfd 100644
--- a/docs/html/design/media/notifications_pattern_additional_win.png
+++ b/docs/html/design/media/notifications_pattern_additional_win.png
Binary files differ
diff --git a/docs/html/design/media/notifications_pattern_anatomy.png b/docs/html/design/media/notifications_pattern_anatomy.png
index cacc183..c9fdf85 100644
--- a/docs/html/design/media/notifications_pattern_anatomy.png
+++ b/docs/html/design/media/notifications_pattern_anatomy.png
Binary files differ
diff --git a/docs/html/design/media/notifications_pattern_expand_contract.png b/docs/html/design/media/notifications_pattern_expand_contract.png
new file mode 100644
index 0000000..e89835c
--- /dev/null
+++ b/docs/html/design/media/notifications_pattern_expand_contract.png
Binary files differ
diff --git a/docs/html/design/media/notifications_pattern_expandable.png b/docs/html/design/media/notifications_pattern_expandable.png
new file mode 100644
index 0000000..30926760
--- /dev/null
+++ b/docs/html/design/media/notifications_pattern_expandable.png
Binary files differ
diff --git a/docs/html/design/media/notifications_pattern_ongoing_music.png b/docs/html/design/media/notifications_pattern_ongoing_music.png
index 01039bd..77b24ed 100644
--- a/docs/html/design/media/notifications_pattern_ongoing_music.png
+++ b/docs/html/design/media/notifications_pattern_ongoing_music.png
Binary files differ
diff --git a/docs/html/design/media/notifications_pattern_personal.png b/docs/html/design/media/notifications_pattern_personal.png
new file mode 100644
index 0000000..08880b2
--- /dev/null
+++ b/docs/html/design/media/notifications_pattern_personal.png
Binary files differ
diff --git a/docs/html/design/media/notifications_pattern_phone_icons.png b/docs/html/design/media/notifications_pattern_phone_icons.png
index 09d8a83..bee66c9 100644
--- a/docs/html/design/media/notifications_pattern_phone_icons.png
+++ b/docs/html/design/media/notifications_pattern_phone_icons.png
Binary files differ
diff --git a/docs/html/design/media/notifications_pattern_priority.png b/docs/html/design/media/notifications_pattern_priority.png
new file mode 100644
index 0000000..e89835c
--- /dev/null
+++ b/docs/html/design/media/notifications_pattern_priority.png
Binary files differ
diff --git a/docs/html/design/media/notifications_pattern_real_time_people.png b/docs/html/design/media/notifications_pattern_real_time_people.png
index 2af40b8..d03b6f0 100644
--- a/docs/html/design/media/notifications_pattern_real_time_people.png
+++ b/docs/html/design/media/notifications_pattern_real_time_people.png
Binary files differ
diff --git a/docs/html/design/media/notifications_pattern_social_fail.png b/docs/html/design/media/notifications_pattern_social_fail.png
index 2c8fddc..aa0e028 100644
--- a/docs/html/design/media/notifications_pattern_social_fail.png
+++ b/docs/html/design/media/notifications_pattern_social_fail.png
Binary files differ
diff --git a/docs/html/design/media/notifications_pattern_two_actions.png b/docs/html/design/media/notifications_pattern_two_actions.png
new file mode 100644
index 0000000..7c19f2e
--- /dev/null
+++ b/docs/html/design/media/notifications_pattern_two_actions.png
Binary files differ
diff --git a/docs/html/design/media/principles_decide_for_me.png b/docs/html/design/media/principles_decide_for_me.png
index 2d8b883..8080b4e 100644
--- a/docs/html/design/media/principles_decide_for_me.png
+++ b/docs/html/design/media/principles_decide_for_me.png
Binary files differ
diff --git a/docs/html/design/media/principles_error.png b/docs/html/design/media/principles_error.png
index 93767660..c867fe6 100644
--- a/docs/html/design/media/principles_error.png
+++ b/docs/html/design/media/principles_error.png
Binary files differ
diff --git a/docs/html/design/media/principles_information_when_need_it.png b/docs/html/design/media/principles_information_when_need_it.png
index c5ef3ca..d78d5c5 100644
--- a/docs/html/design/media/principles_information_when_need_it.png
+++ b/docs/html/design/media/principles_information_when_need_it.png
Binary files differ
diff --git a/docs/html/design/media/principles_keep_it_brief.png b/docs/html/design/media/principles_keep_it_brief.png
index 9c2813b..ee7dbbb 100644
--- a/docs/html/design/media/principles_keep_it_brief.png
+++ b/docs/html/design/media/principles_keep_it_brief.png
Binary files differ
diff --git a/docs/html/design/media/principles_never_lose_stuff.png b/docs/html/design/media/principles_never_lose_stuff.png
index acbefea..84037d9 100644
--- a/docs/html/design/media/principles_never_lose_stuff.png
+++ b/docs/html/design/media/principles_never_lose_stuff.png
Binary files differ
diff --git a/docs/html/design/patterns/actionbar.jd b/docs/html/design/patterns/actionbar.jd
index 5cdf50b..21e8583 100644
--- a/docs/html/design/patterns/actionbar.jd
+++ b/docs/html/design/patterns/actionbar.jd
@@ -158,18 +158,30 @@
<li>You want the user to be highly aware of the alternate views.</li>
</ul>
+<h4>Fixed tabs</h4>
<div class="layout-content-row">
<div class="layout-content-col span-6">
+<p><em>Fixed tabs</em> are always visible on the screen, and can't be moved out of the way like scrollable
+tabs. Fixed tabs in the main action bar can move to the top bar when the screen orientation changes.</p>
+
+<p>Use fixed tabs to support quick changes between two or three app views. Fixed tabs should always allow the user to navigate between the views by swiping left or right on the content area.</p>
+
+ </div>
+ <div class="layout-content-col span-7">
+
+ <img src="{@docRoot}design/media/action_bar_pattern_default_tabs.png">
+ <div class="figure-caption">
+ Default fixed tabs shown in Holo Dark & Light.
+ </div>
+
+ </div>
+</div>
<h4>Scrollable tabs</h4>
-<p><em>Scrollable tabs</em> always take up the entire width of the bar, with the currently active view item in
-the center, and therefore need to live in a dedicated bar. Scrollable tabs can themselves be
-scrolled horizontally to bring more tabs into view.</p>
-<p>Use scrollable tabs if you have a large number of views or if you're unsure how many views will be
-displayed because your app inserts views dynamically (for example, open chats in a messaging app
-that the user can navigate between). Scrollable tabs should always allow the user to navigate
-between the views by swiping left or right on the content area as well as swiping the tabs
-themselves.</p>
+<div class="layout-content-row">
+ <div class="layout-content-col span-6">
+<p><em>Scrollable tabs</em> always take up the entire width of the bar, with the currently active view item in the center, and therefore need to live in a dedicated bar. Scrollable tabs can themselves be scrolled horizontally to bring more tabs into view.</p>
+<p>Use scrollable tabs if you have a large number of views or if you're unsure how many views will be displayed because your app inserts views dynamically (for example, open chats in a messaging app that the user can navigate between). Scrollable tabs should always allow the user to navigate between the views by swiping left or right on the content area as well as swiping the tabs themselves.</p>
</div>
<div class="layout-content-col span-7">
@@ -190,30 +202,12 @@
<div class="layout-content-row">
<div class="layout-content-col span-6">
-<h4>Fixed tabs</h4>
-<p><em>Fixed tabs</em> are always visible on the screen, and can't be moved out of the way like scrollable
-tabs. Fixed tabs in the main action bar can move to the top bar when the screen orientation changes.</p>
-
- </div>
- <div class="layout-content-col span-7">
-
- <img src="{@docRoot}design/media/action_bar_pattern_default_tabs.png">
- <div class="figure-caption">
- Default fixed tabs shown in Holo Dark & Light.
- </div>
-
- </div>
-</div>
-
-<div class="layout-content-row">
- <div class="layout-content-col span-6">
-
<h4>Spinners</h4>
<p>A <em>spinner</em> is a drop-down menu that allows users to switch between views of your app. </p>
-<p><strong>Use spinners rather than tabs in the main action bar if</strong>:</p>
+<p><strong>Use a spinner in the main action bar if</strong>:</p>
<ul>
<li>You don't want to give up the vertical screen real estate for a dedicated tab bar.</li>
-<li>You expect your app's users to switch views infrequently.</li>
+<li>The user is switching between views of the same data set (for example: calendar events viewed by day, week, or month) or data sets of the same type (such as content for two different accounts).</li>
</ul>
</div>
@@ -227,7 +221,29 @@
</div>
</div>
-<h4>Action buttons</h4>
+<h4>Drawers</h4>
+<div class="layout-content-row">
+ <div class="layout-content-col span-6">
+<p>A <em>drawer</em> is a slide-out menu that allows users to switch between views of your app. It can be opened by touching the action bar's app icon (decorated with the Up caret.) Because it relies on Up navigation, a drawer is only suitable for use at the topmost level of your app's hierarchy.</p>
+
+<p><strong>Open a drawer from the main action bar if</strong>:</p>
+<ul>
+<li>You don't want to give up the vertical screen real estate for a dedicated tab bar.</li>
+<li>You want to provide direct navigation to a number of views within your app which don't have direct relationships between each other.</li>
+</ul>
+
+ </div>
+ <div class="layout-content-col span-7">
+
+ <img src="{@docRoot}design/media/action_bar_pattern_default_tabs.png">
+ <div class="figure-caption">
+ Default fixed tabs shown in Holo Dark & Light.
+ </div>
+
+ </div>
+</div>
+
+<h2>Action buttons</h2>
<p><em>Action buttons</em> on the action bar surface your app's most important activities. Think about which
buttons will get used most often, and order them accordingly. Depending on available screen real
estate, the system shows your most important actions as action buttons and moves the rest to the
diff --git a/docs/html/design/patterns/app-structure.jd b/docs/html/design/patterns/app-structure.jd
index f90e4b1..a483522 100644
--- a/docs/html/design/patterns/app-structure.jd
+++ b/docs/html/design/patterns/app-structure.jd
@@ -225,7 +225,7 @@
<h4>Make navigation between detail views efficient</h4>
<p>If your users are likely to want to look at multiple items in sequence, allow them to navigate
-between items from within the detail view. Use swipe views or other techniques, such as filmstrips,
+between items from within the detail view. Use swipe views or other techniques, such as thumbnail view controls,
to achieve this.</p>
<img src="{@docRoot}design/media/app_structure_gmail_swipe.png">
@@ -235,8 +235,8 @@
<img src="{@docRoot}design/media/app_structure_gallery_filmstrip.png">
<div class="figure-caption">
- In addition to supporting swipe gestures to move left or right through images, Gallery provides a
- filmstrip control that lets people quickly jump to specific images.
+ In addition to supporting swipe gestures to move left or right through pages, Magazines provides a
+ thumbnail view control that lets people quickly jump to specific pages.
</div>
<h2 id="checklist">Checklist</h2>
diff --git a/docs/html/design/patterns/help.jd b/docs/html/design/patterns/help.jd
new file mode 100644
index 0000000..fef7a94
--- /dev/null
+++ b/docs/html/design/patterns/help.jd
@@ -0,0 +1,118 @@
+page.title=Help
+@jd:body
+
+<p>We wish we could guarantee that if you follow every piece of advice on this website, everyone will be able to learn and use your app without a hitch. Sadly, that's not the case.</p>
+
+<p>Some of your users will run into questions or problems along the way. They'll be looking for answers <strong>within your app</strong>, and if they don't find them quickly, they may leave and never come back.</p>
+
+<p>This page covers design patterns for making help accessible in your app and tips for creating help content for users who are eager for assistance.</p>
+
+<h2 id="your-app">Designing Help into Your App</h2>
+
+<h3>Don't show unsolicited help, except in very limited cases</h3>
+<p>Naturally, you want everyone to quickly learn the ropes, discover the cool features, and get the most out of your app. So you might be tempted to present a one-time introductory slideshow, video, or splash screen to all new users when they first open the app. Or you might be drawn to the idea of displaying helpful text bubbles or dialogs when users interact with certain features for the first time.</p>
+<p>In almost all cases, we advise <strong>against</strong> approaches like these because:</p>
+<ul>
+ <li><strong>They're interruptions.</strong> People will be eager to start using your app, and anything you put in front of them will feel like an obstacle or possibly an annoyance, despite your good intentions. And because they didn't ask for it, they probably won't pay close attention to it.</li>
+ <li><strong>They're usually not necessary.</strong> If you have usability concerns about an aspect of your app, don't just throw help at the problem. Try to solve it in the UI. Apply Android design patterns, styles, and building blocks, and you'll go a long way in reducing the need to educate your users.</li>
+</ul>
+<p>The only reason for showing pure help content to new users unsolicited is:<br>
+<em>To teach high value functionality that's only available through an atypical use of a gesture.</em></p>
+
+<p>For example, we use help content to teach users how to place apps on their Home Screen. This functionality is:</p>
+<div class="layout-content-row">
+ <div class="layout-content-col span-8">
+ <ol>
+ <li><h4>High value</h4>
+ <p>Without it, users wouldn't be able to customize the most frequently-visited Android screen to meet their needs.</p></li>
+ <li><h4>Available only through a gesture</h4>
+ <p>Users can't do this through a button or a menu.</p></li>
+ <li><h4>Atypical for the gesture</h4>
+ <p>Many high value functions invoked through a gesture - like scrolling, swiping tabs, and turning pages - are common and yield expected results. Users will be able to discover them in your app, and unsolicited help is unnecessary. But here, the gesture does something unexpected: press and hold doesn't just select an app, it also immediately navigates to the Home Screen and creates a shortcut to the app that can then be dragged around.</p></li>
+ </ol>
+ <p>However, this is an exceptional case. Most functionality doesn't meet all three of these criteria.</p>
+ </div>
+ <div class="layout-content-col span-5">
+ <img src="{@docRoot}design/media/swipe_views.png">
+ <div class="figure-caption">
+ The first time each user visits the All Apps screen, a semi-transparent overlay appears to teach an important gesture.
+ </div>
+ </div>
+ <p class="clearfix">Bottom line: when it comes to offering help in your app, it's much better to <strong>let users come to you</strong> when they need it.</p>
+</div>
+
+<h3 id="standard-design">Follow the standard design for navigating to help</h3>
+
+<p>On every screen in your app, offer help in the <a href="{@docRoot}design/patterns/actionbar.html">action overflow</a>. Always make it the very last item in the menu and label it "Help".</p>
+
+<div class="layout-content-row">
+ <div class="layout-content-col span-7">
+ <img src="{@docRoot}design/media/swipe_views2.png">
+ </div>
+ <div class="layout-content-col span-6">
+ <img src="{@docRoot}design/media/swipe_views2.png">
+ <div class="figure-caption">
+ Even if your screen has no other action overflow items, "Help" should appear there and not be promoted to the action bar.
+ </div>
+ </div>
+ <p>We've established this standard design so that when users are desperate for help, they won't have to hunt to find it (see design principle: <a href="{@docRoot}design/get-started/principles.html#give-me-tricks">Give me tricks that work everywhere</a>).</p>
+</div>
+
+<h3 id="help-urgent">Assume that every call for help is urgent</h3>
+
+<p>In addition to help, you might want to expose miscellaneous other information, such as copyright info, credits, terms of service, and privacy policy.</p>
+
+<p>Let users access this information through your Help menu item, but don't give it prominence equal to the core help content. Optimize the flow for people who have urgent questions about how to do something or why something is happening in your app. The smaller subset of users who are looking for legal fine print or the names of the people who created the app won't be as burdened by taking a few extra steps.</p>
+
+<p>The same is true for any communication options you might want to provide, such as contacting customer support or submitting feedback. Offer these options in a way that doesn't add an extra step before users see help. When you put the help content forward, you increase the likelihood that users will find the answers on their own, which in turn reduces your support costs.</p>
+
+<p>When someone chooses "Help":</p>
+
+<div class="layout-content-row">
+ <div class="layout-content-col span-7">
+ <h4 class="do-dont-label bad">Don't</h4>
+
+ <p>Present a dialog asking them to choose between help and other options.</p>
+ </div>
+ <div class="layout-content-col span-6">
+ <img src="{@docRoot}design/media/swipe_views2.png">
+ </div>
+</div>
+
+<div class="layout-content-row">
+ <div class="layout-content-col span-7">
+ <h4 class="do-dont-label good">Better</h4>
+ <p>Immediately launch a web browser with help content. Place other options in a footer.</p>
+ </div>
+ <div class="layout-content-col span-6">
+ <img src="{@docRoot}design/media/swipe_views2.png">
+ </div>
+</div>
+
+<div class="layout-content-row">
+ <div class="layout-content-col span-7">
+ <h4 class="do-dont-label good">Even Better</h4>
+ <p>Build a help screen in your app and offer other options in the action bar.</p>
+ <p>This requires more development work than launching a web browser, but it's a nicer experience for users because they don't leave your app to get the help they need and doesn't require a network connection.</p>
+ </div>
+ <div class="layout-content-col span-6">
+ <img src="{@docRoot}design/media/swipe_views2.png">
+ </div>
+</div>
+
+<h2>Principles for Writing On-Screen Help Content</h2>
+
+<h4>Help is part of the UI</h4>
+<p>On-screen help is an extension of your app's UI, not a description of it. All words on the screen from the core app to the help should follow our <a href="{@docRoot}design/style/writing.html">Writing Style</a> principles so that the end-to-end experience feels seamless and cohesive.</p>
+
+<h4>Make every pixel count</h4>
+<p>It's not necessary to document every single detail about your app, especially things that are extremely apparent just by looking at the UI, or behaviors that are standard for the platform. Surface just the key additional information that the on-screen text doesn't have room to describe, in a way that makes it easy to map to the screen.</p>
+
+<h4>Pictures are faster than words</h4>
+<p>In describing key UI elements and providing step-by-step instructions, consider combining text with icons, partial screenshots with callouts, and other imagery. You'll need fewer words to explain things, and users will absorb the information more quickly.</p>
+
+<h4>Help me scan, not read</h4>
+<p>People don't read help from start to finish. They scan around, looking for a piece of information containing the answer they need. Make it less burdensome with friendly formatting and layout choices like bold headings, bulleted and numbered lists, tables, and white space between paragraphs. And if you have a large amount of content, divide it into multiple screens to cut down on scrolling.</p>
+
+<h4>Take me straight to the answer</h4>
+<p>What's better than a screen that's easy to scan? A screen that requires no scanning at all because the answer's right there. Consider having each screen in your app navigate to help that's relevant just to that screen. We call this <em>contextual help</em>, and it's the holy grail of user assistance. If you take this approach, be sure to also provide a way to get to the rest of the help content.</p>
\ No newline at end of file
diff --git a/docs/html/design/patterns/notifications.jd b/docs/html/design/patterns/notifications.jd
index ad88a01..fbb05e3 100644
--- a/docs/html/design/patterns/notifications.jd
+++ b/docs/html/design/patterns/notifications.jd
@@ -1,11 +1,164 @@
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>
+<p>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>
+
+<h4>New in Jelly Bean</h4>
+<p>In Jelly Bean, notifications received their most important structural and functional update since the beginning of Android.</p>
+<ul>
+ <li>Notifications can include actions that enable the user to immediately act on a notification from the notification drawer.</li>
+ <li>Notifications are now more flexible in size and layout.</li>
+ <li>Stacked notifications can be collapsed and expanded.</li>
+ <li>A priority flag was introduced that helps to sort notifications by importance rather than time only.</li>
+</ul>
+
+<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>an optional timestamp</li>
+ <li>a secondary icon to identify the sending application when the sender's image is shown for the main icon</li>
+ </ul>
+ <p>The base notification layout has not changed in Jelly Bean, so app notifications designed for versions earlier than Jelly Bean still look and work the same.</p>
+ </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>With Jelly Bean 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>Starting with Jelly Bean, 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>implicit to 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 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 a notification, 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>Timestamps for time sensitive events</h4>
+<p>By default, standard Android notifications include a timestamp. Consider
+whether the timestamp is valuable in the context of your notification.</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>Correctly set and manage notification priority</h4>
+<p>Starting with Jelly Bean, Android now supports a priority flag for notifications. It 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>
+
+<img src="{@docRoot}design/media/notifications_pattern_priority.png">
+
+<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>
+
+<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 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>
+<p>Look at the notification icons the Android apps already provide and create notification icons for
+ your app that are sufficiently distinct in appearance.</p>
+<p><strong>Don't</strong>:</p>
+<p>Use color to distinguish your app from others. Notification icons should be <a href="{@docRoot}design/style/iconography.html#notification">white</a>.</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. To use an analogy that might resonate with software
@@ -66,108 +219,10 @@
</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">
diff --git a/docs/html/design/patterns/swipe-views.jd b/docs/html/design/patterns/swipe-views.jd
index 93592a7c..b98a063 100644
--- a/docs/html/design/patterns/swipe-views.jd
+++ b/docs/html/design/patterns/swipe-views.jd
@@ -65,7 +65,7 @@
the swipe gesture.</p>
</li>
<li>
-<p>If a view contains content that exceeds the width of the screen (e.g. a wide Email message), make sure the user's initial swipes will scroll horizontally within the view. Once the end of the content is reached, an additional swipe should navigate to the next view. In addition, support the use of edge swipes to immediately navigate between views when content scrolls horizontally.</p>
+<p>If a view contains content that exceeds the width of the screen such as a wide Email message, make sure the user's initial swipes will scroll horizontally within the view. Once the end of the content is reached, an additional swipe should navigate to the next view. In addition, support the use of edge swipes to immediately navigate between views when content scrolls horizontally.</p>
</li>
<li>
<p>Consider adding contextual information in your detail view that informs the user about the
