diff options
| author | Peter Ng <petergng@google.com> | 2012-08-06 11:44:48 -0700 |
|---|---|---|
| committer | Peter Ng <petergng@google.com> | 2012-08-13 13:22:21 -0700 |
| commit | 02123630ca652d88191dc8739dcb2e5559655bd5 (patch) | |
| tree | 26d0d694899fc541432033cda8422e8df6fe64e7 | |
| parent | 252d23d8bb9e3ab05fb851d4ea53558c205bfaea (diff) | |
| download | base-02123630ca652d88191dc8739dcb2e5559655bd5.tar.gz | |
Multiple design styleguide fixes
-Changing extras to videos
-new bullet item in swipeviews
-new in 4.0 removal
-Ui overview notification info
-reppling typo fixed
Bug: 6936546
Bug: 6936394
Bug: 6958972
Bug: 6960355
Bug: 6937850
Bug: 6937856
Bug: 6912380
Bug: 6941255
Bug: 6937723
Bug: 5836846
Bug: 6915055
Bug: 6915259
Bug: 6651973
Bug: 6937070
Bug: 6947018
Bug: 6924456
Bug: 6915152
Bug: 6936797
Bug: 6924201
Bug: 6922994
Bug: 6924137
Bug: 6907998
Bug: 6912377
Bug: 6937761
Bug: 6923664
Bug: 6946790
Bug: 6918869
Change-Id: Ic5f39fe5b9f56c911af8bde9a254007748f6530e
40 files changed, 349 insertions, 194 deletions
diff --git a/docs/html/design/building-blocks/dialogs.jd b/docs/html/design/building-blocks/dialogs.jd index 2820471c93e6..728821e21162 100644 --- a/docs/html/design/building-blocks/dialogs.jd +++ b/docs/html/design/building-blocks/dialogs.jd @@ -81,7 +81,46 @@ available based on the title and the text of the action buttons.</p> </div> </div> +<p>When crafting a confirmation dialog, make the title meaningful by echoing the requested action.</p> +<div class="layout-content-row"> + <div class="layout-content-col span-4"> + <div class="do-dont-label bad">Don't</div> + <table class="ui-table bad"> + <thead> + <tr> + <th class="label"> + Are you sure? + </th> + </tr> + </thead> + </table> + </div> + <div class="layout-content-col span-4"> + <div class="do-dont-label bad">Don't</div> + <table class="ui-table bad"> + <thead> + <tr> + <th class="label"> + Warning! + </th> + </tr> + </thead> + </table> + </div> + <div class="layout-content-col span-5"> + <div class="do-dont-label good">Do</div> + <table class="ui-table good"> + <thead> + <tr> + <th class="label"> + Erase USB storage? + </th> + </tr> + </thead> + </table> + </div> +</div> <h2 id="popups">Popups</h2> diff --git a/docs/html/design/building-blocks/tabs.jd b/docs/html/design/building-blocks/tabs.jd index 8a2eb41455b5..fe05f80a6272 100644 --- a/docs/html/design/building-blocks/tabs.jd +++ b/docs/html/design/building-blocks/tabs.jd @@ -35,9 +35,8 @@ to the next/previous view, swipe left or right.</p> <h2 id="fixed">Fixed Tabs</h2> - - <p>Fixed tabs display all items concurrently. To navigate to a different view, touch the tab, or swipe left or right.</p> +<p>Fixed tabs are displayed with equal width, based on the width of the widest tab label. If there is insufficient room to display all tabs, the tab labels themselves will be scrollable. For this reason, fixed tabs are best suited for displaying 3 or fewer tabs.</p> <img src="{@docRoot}design/media/tabs_standard.png"> <div class="figure-caption"> diff --git a/docs/html/design/design_toc.cs b/docs/html/design/design_toc.cs index 72007f59bf6b..c3020e102c7f 100644 --- a/docs/html/design/design_toc.cs +++ b/docs/html/design/design_toc.cs @@ -34,13 +34,14 @@ <li><a href="<?cs var:toroot ?>design/patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li> <li><a href="<?cs var:toroot ?>design/patterns/swipe-views.html">Swipe Views</a></li> <li><a href="<?cs var:toroot ?>design/patterns/selection.html">Selection</a></li> + <li><a href="<?cs var:toroot ?>design/patterns/confirming-acknowledging.html">Confirming & Acknowledging</a></li> <li><a href="<?cs var:toroot ?>design/patterns/notifications.html">Notifications</a></li> + <li><a href="<?cs var:toroot ?>design/patterns/widgets.html">Widgets</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/accessibility.html">Accessibility</a></li> <li><a href="<?cs var:toroot ?>design/patterns/pure-android.html">Pure Android</a></li> - <li><a href="<?cs var:toroot ?>design/patterns/confirming-acknowledging.html">Confirming & Acknowledging</a></li> </ul> </li> @@ -67,7 +68,7 @@ </li> <li class="nav-section"> - <div class="nav-section-header empty"><a href="<?cs var:toroot ?>design/extras/index.html">Extras</a></div> + <div class="nav-section-header empty"><a href="<?cs var:toroot ?>design/videos/index.html">Videos</a></div> </li> </ul>
\ No newline at end of file diff --git a/docs/html/design/extras/index.jd b/docs/html/design/extras/index.jd deleted file mode 100644 index 4546f7580c8e..000000000000 --- a/docs/html/design/extras/index.jd +++ /dev/null @@ -1,22 +0,0 @@ -page.title=Extras -@jd:body - -<p>The Android Design Team was pleased to present five fantastic design-oriented sessions at Google I/O 2012. Visit these pages to view the videos and presentations from the conference.</p> -<img src="{@docRoot}design/media/extras_googleio_12.png"> - -<h3 id="design-for-success"><a href="https://developers.google.com/events/io/sessions/gooio2012/112/">Android Design for Success</a></h3> -<p>You have a great idea for an Android app. You want it to stand out among hundreds of thousands. You want your users to love it and tell everyone they know. The Android User Experience team is here to help. We talk about the Android Design guide and other tricks of the trade for creating apps that delight users and help them accomplish their goals. No design background is required.</p> - -<h3 id="design-for-engineers"><a href="https://developers.google.com/events/io/sessions/gooio2012/1204/">Android Design for Engineers</a></h3> -<p>Design isn't black magic, it's a field that people can learn. In this talk two elite designers from Google give you an advanced crash course in interactive and visual design. Topics include mental models, natural mappings, metaphors, mode errors, visual hierarchies, typography and gestalt principles. Correctly applied, this knowledge can drastically improve the quality of your work.</p> - -<h3 id="navigation-in-android"><a href="https://developers.google.com/events/io/sessions/gooio2012/114/">Navigation in Android</a></h3> -<p>An app is useless if people can't find their way around it. Android introduced big navigation-support changes in 3.0 and 4.0. The Action Bar offers a convenient control for Up navigation, the Back key's behavior became more consistent within tasks, and the Recent Tasks UI got an overhaul. In this talk, we discuss how and why we got where we are today, how to think about navigation when designing your app's user experience, and how to write apps that offer effortless navigation in multiple Android versions.</p> - -<h3 id="now-what"><a href="https://developers.google.com/events/io/sessions/gooio2012/115/">So You've Read the Design Guide; Now What?</a></h3> -<p>The Android Design Guide describes how to design beautiful Android apps, but not how to build them. In this talk we give practical tips for how to apply fit & finish as you implement your design, we show you how to avoid some common pitfalls, we describe some useful patterns, and show how tools can help.</p> - -<h3 id="playing-with-patterns"><a href="https://developers.google.com/events/io/sessions/gooio2012/131/">Playing with Patterns</a></h3> -<p>Best-in-class application designers and developers talk about their experience in developing for Android, showing screenshots from their app, exploring the challenges they faced, and offering creative solutions congruent with the Android Design guide. Guests are invited to show examples of visual and interaction patterns in their application that manage to keep it simultaneously consistent and personal.</p> - -<p>Videos for the entire Design Track can also be found on the <a href="http://www.youtube.com/playlist?list=PL54FA004D676C3EE9">Android Developers Channel</a> on YouTube.</p>
\ No newline at end of file diff --git a/docs/html/design/get-started/creative-vision.jd b/docs/html/design/get-started/creative-vision.jd index 792b97d6d616..c57b185c701b 100644 --- a/docs/html/design/get-started/creative-vision.jd +++ b/docs/html/design/get-started/creative-vision.jd @@ -5,13 +5,7 @@ page.title=Creative Vision <div class="vspace size-1"> </div> -<p>Ice Cream Sandwich (Android 4.0) marks a major milestone for Android design. We touched nearly every -pixel of the system as we expanded the new design approaches introduced in Honeycomb tablets to all -types of mobile devices. Starting with the most basic elements, we introduced a new font, Roboto, -designed for high-resolution displays. Other big changes include framework-level action bars on -phones and support for new phones without physical buttons.</p> -<p>We focused the design work with three overarching goals for our core apps and the system at large. -As you design apps to work with Android, consider these goals:</p> +<p>We focused the design of Android around three overarching goals, which apply to our core apps as well as the system at large. As you design apps to work with Android, consider these goals:</p> <div class="vspace size-1"> </div> diff --git a/docs/html/design/get-started/ui-overview.jd b/docs/html/design/get-started/ui-overview.jd index 34cdd067e94d..bfb9ec9eaec4 100644 --- a/docs/html/design/get-started/ui-overview.jd +++ b/docs/html/design/get-started/ui-overview.jd @@ -101,8 +101,7 @@ notification opens the associated app. <a href="{@docRoot}design/patterns/notifi <img src="{@docRoot}design/media/notifications_dismiss.png"> -<p>Most notifications have a one-line title and a one-line message. The recommended layout for a -notification includes two lines. If necessary, you can add a third line. Timestamps are optional.</p> +<p>Notifications can be expanded to uncover more details and relevant actions. When collapsed, notifications have a one-line title and a one-line message.The recommended layout for a notification includes two lines. If necessary, you can add a third line.</p> <p>Swiping a notification right or left removes it from the notification drawer.</p> </div> diff --git a/docs/html/design/media/action_bar_pattern_share_pack.png b/docs/html/design/media/action_bar_pattern_share_pack.png Binary files differindex dde18f39f81e..c8cff6163c4b 100644 --- a/docs/html/design/media/action_bar_pattern_share_pack.png +++ b/docs/html/design/media/action_bar_pattern_share_pack.png diff --git a/docs/html/design/media/confirm_ack_flowchart.png b/docs/html/design/media/confirm_ack_flowchart.png Binary files differindex 277cb11e74a9..3935d47e68d6 100644 --- a/docs/html/design/media/confirm_ack_flowchart.png +++ b/docs/html/design/media/confirm_ack_flowchart.png diff --git a/docs/html/design/media/downloads_stencils.png b/docs/html/design/media/downloads_stencils.png Binary files differindex 9e09319b1789..9b1a9feb0a10 100644 --- a/docs/html/design/media/downloads_stencils.png +++ b/docs/html/design/media/downloads_stencils.png diff --git a/docs/html/design/media/help_better.png b/docs/html/design/media/help_better.png Binary files differindex fde5cb297ea6..83d7b07fadeb 100644 --- a/docs/html/design/media/help_better.png +++ b/docs/html/design/media/help_better.png diff --git a/docs/html/design/media/help_dont.png b/docs/html/design/media/help_dont.png Binary files differindex a1c9841df7ac..3c52c97ceb70 100644 --- a/docs/html/design/media/help_dont.png +++ b/docs/html/design/media/help_dont.png diff --git a/docs/html/design/media/help_evenbetter.png b/docs/html/design/media/help_evenbetter.png Binary files differindex beb88f8ebb4f..66b9d162219c 100644 --- a/docs/html/design/media/help_evenbetter.png +++ b/docs/html/design/media/help_evenbetter.png diff --git a/docs/html/design/media/multipane_expand.png b/docs/html/design/media/multipane_expand.png Binary files differindex f761e5f80226..6014cc83a61d 100644 --- a/docs/html/design/media/multipane_expand.png +++ b/docs/html/design/media/multipane_expand.png diff --git a/docs/html/design/media/new_notifications.png b/docs/html/design/media/new_notifications.png Binary files differindex 1d9bcf5d242d..a7293c855387 100644 --- a/docs/html/design/media/new_notifications.png +++ b/docs/html/design/media/new_notifications.png diff --git a/docs/html/design/media/notifications_expand_contract_msg.png b/docs/html/design/media/notifications_expand_contract_msg.png Binary files differindex f37ec2ca8a8a..056c9f20a95c 100644 --- a/docs/html/design/media/notifications_expand_contract_msg.png +++ b/docs/html/design/media/notifications_expand_contract_msg.png diff --git a/docs/html/design/media/notifications_pattern_dialog_toast.png b/docs/html/design/media/notifications_pattern_dialog_toast.png Binary files differdeleted file mode 100644 index 517d57b3743c..000000000000 --- a/docs/html/design/media/notifications_pattern_dialog_toast.png +++ /dev/null diff --git a/docs/html/design/media/notifications_pattern_expandable.png b/docs/html/design/media/notifications_pattern_expandable.png Binary files differindex 309267601e3e..31cb3f13dcb2 100644 --- a/docs/html/design/media/notifications_pattern_expandable.png +++ b/docs/html/design/media/notifications_pattern_expandable.png diff --git a/docs/html/design/media/notifications_pattern_personal.png b/docs/html/design/media/notifications_pattern_personal.png Binary files differindex 08880b24ee70..a7293c855387 100644 --- a/docs/html/design/media/notifications_pattern_personal.png +++ b/docs/html/design/media/notifications_pattern_personal.png diff --git a/docs/html/design/media/swipe_views2.png b/docs/html/design/media/swipe_views2.png Binary files differindex 6479a2f3fc10..ee0f2c40e8ed 100644 --- a/docs/html/design/media/swipe_views2.png +++ b/docs/html/design/media/swipe_views2.png diff --git a/docs/html/design/media/swipe_views3.png b/docs/html/design/media/swipe_views3.png Binary files differnew file mode 100644 index 000000000000..bdf999446dce --- /dev/null +++ b/docs/html/design/media/swipe_views3.png diff --git a/docs/html/design/media/widgets_collection_bookmarks.png b/docs/html/design/media/widgets_collection_bookmarks.png Binary files differnew file mode 100644 index 000000000000..86d4d889691b --- /dev/null +++ b/docs/html/design/media/widgets_collection_bookmarks.png diff --git a/docs/html/design/media/widgets_collection_gmail.png b/docs/html/design/media/widgets_collection_gmail.png Binary files differnew file mode 100644 index 000000000000..bbd538d23a0a --- /dev/null +++ b/docs/html/design/media/widgets_collection_gmail.png diff --git a/docs/html/design/media/widgets_config.png b/docs/html/design/media/widgets_config.png Binary files differnew file mode 100644 index 000000000000..0ac3473bf405 --- /dev/null +++ b/docs/html/design/media/widgets_config.png diff --git a/docs/html/design/media/widgets_control.png b/docs/html/design/media/widgets_control.png Binary files differnew file mode 100644 index 000000000000..a46add86903f --- /dev/null +++ b/docs/html/design/media/widgets_control.png diff --git a/docs/html/design/media/widgets_gestures.png b/docs/html/design/media/widgets_gestures.png Binary files differnew file mode 100644 index 000000000000..f991609e747c --- /dev/null +++ b/docs/html/design/media/widgets_gestures.png diff --git a/docs/html/design/media/widgets_hybrid.png b/docs/html/design/media/widgets_hybrid.png Binary files differnew file mode 100644 index 000000000000..470f75fbbba4 --- /dev/null +++ b/docs/html/design/media/widgets_hybrid.png diff --git a/docs/html/design/media/widgets_info.png b/docs/html/design/media/widgets_info.png Binary files differnew file mode 100644 index 000000000000..6621158fed62 --- /dev/null +++ b/docs/html/design/media/widgets_info.png diff --git a/docs/html/design/media/widgets_resizing01.png b/docs/html/design/media/widgets_resizing01.png Binary files differnew file mode 100644 index 000000000000..5c85df6d5148 --- /dev/null +++ b/docs/html/design/media/widgets_resizing01.png diff --git a/docs/html/design/media/widgets_resizing02.png b/docs/html/design/media/widgets_resizing02.png Binary files differnew file mode 100644 index 000000000000..28f9461cfae8 --- /dev/null +++ b/docs/html/design/media/widgets_resizing02.png diff --git a/docs/html/design/patterns/actionbar.jd b/docs/html/design/patterns/actionbar.jd index 80aa77d3368d..9ceb499da739 100644 --- a/docs/html/design/patterns/actionbar.jd +++ b/docs/html/design/patterns/actionbar.jd @@ -3,20 +3,15 @@ page.title=Action Bar <img src="{@docRoot}design/media/action_bar_pattern_overview.png"> -<p>The <em>action bar</em> is arguably the most important structural element of an Android app. It's a -dedicated piece of real estate at the top of each screen that is generally persistent throughout the -app.</p> -<p><strong>The main purpose of the action bar is to</strong>:</p> +<p>The <em>action bar</em> is a dedicated piece of real estate at the top of each screen that is generally persistent throughout the app.</p> +<p><strong>It provides several key functions</strong>:</p> <ul> -<li>Make important actions (such as <em>New</em> or <em>Search</em>, etc) prominent and accessible in a predictable - way.</li> -<li>Support consistent navigation and view switching within apps.</li> -<li>Reduce clutter by providing an action overflow for rarely used actions.</li> -<li>Provide a dedicated space for giving your app an identity.</li> + <li>Makes important actions prominent and accessible in a predictable way (such as <em>New</em> or <em>Search</em>).</li> + <li>Supports consistent navigation and view switching within apps.</li> + <li>Reduces clutter by providing an action overflow for rarely used actions.</li> + <li>Provides a dedicated space for giving your app an identity.</li> </ul> -<p>If you're new to writing Android apps, note that the action bar is one of the most important design -elements you can implement. Following the guidelines described here will go a long way toward making -your app's interface consistent with the core Android apps.</p> +<p>If you're new to writing Android apps, note that the action bar is one of the most important design elements you can implement. Following the guidelines described here will go a long way toward making your app's interface consistent with the core Android apps.</p> <h2 id="organization">General Organization</h2> <p>The action bar is split into four different functional areas that apply to most apps.</p> @@ -224,7 +219,7 @@ tabs. Fixed tabs in the main action bar can move to the top bar when the screen <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>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.) Additionally, a drawer can be revealed by an edge swipe from the left of the screen, and dismissed by swiping from the right edge of the drawer. However, because many users will rely on Up navigation to open a drawer, it 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> diff --git a/docs/html/design/patterns/confirming-acknowledging.jd b/docs/html/design/patterns/confirming-acknowledging.jd index 28e4427844c8..ce0631bad500 100644 --- a/docs/html/design/patterns/confirming-acknowledging.jd +++ b/docs/html/design/patterns/confirming-acknowledging.jd @@ -23,37 +23,30 @@ page.title=Confirming & Acknowledging <h2>Confirming</h2> <div class="layout-content-row"> <div class="layout-content-col span-6"> - <img src="{@docRoot}design/media/confirm_ack_ex_books.png"> <h4>Example: Google Play Books</h4> - <p>In this example, the user has requested to delete a book from their Google Play library. A dialog appears to confirm this action because it's important to understand that the book will no longer be available from any device.</p> + <img src="{@docRoot}design/media/confirm_ack_ex_books.png"> + <p>In this example, the user has requested to delete a book from their Google Play library. An <a href="{@docRoot}design/building-blocks/dialogs.html#alerts">alert</a> appears to confirm this action because it's important to understand that the book will no longer be available from any device.</p> <p>When crafting a confirmation dialog, make the title meaningful by echoing the requested action.</p> - - <ul class="nolist"> - <li class="do-dont-label bad">Don't<p><b>Are you sure?</b></p></li> - <li class="do-dont-label bad">Don't<p><b>Warning!</b></p></li> - <li class="do-dont-label good">Do<p><b>Delete from library?</b></p></li> - </ul> - </div> <div class="layout-content-col span-7"> - <img src="{@docRoot}design/media/confirm_ack_ex_beam.png"> <h4>Example: Android Beam</h4> - <p>Confirmations don't necessarily have to be presented in a dialog with two buttons. After initiating Android Beam, the user is prompted to touch the content to be shared (in this example, it's a photo). If they decide not to proceed, they simply move their phone away.</p> + <img src="{@docRoot}design/media/confirm_ack_ex_beam.png"> + <p>Confirmations don't necessarily have to be presented in an alert with two buttons. After initiating Android Beam, the user is prompted to touch the content to be shared (in this example, it's a photo). If they decide not to proceed, they simply move their phone away.</p> </div> </div> <h2>Acknowledging</h2> <div class="layout-content-row"> <div class="layout-content-col span-6"> - <img src="{@docRoot}design/media/confirm_ack_ex_draftsave.png"> <h4>Example: Abandoned Gmail draft saved</h4> + <img src="{@docRoot}design/media/confirm_ack_ex_draftsave.png"> <p>In this example, if the user navigates back or up from the Gmail compose screen, something possibly unexpected happens: the current draft is automatically saved. An acknowledgment in the form of a toast makes that apparent. It fades after a few seconds.</p> <p>Undo isn't appropriate here because saving was initiated by the app, not the user. And it's quick and easy to resume composing the message by navigating to the list of drafts.</p> </div> <div class="layout-content-col span-6"> - <img src="{@docRoot}design/media/confirm_ack_draft_deleted.png"> <h4>Example: Gmail conversation deleted</h4> + <img src="{@docRoot}design/media/confirm_ack_draft_deleted.png"> <p>After the user deletes a conversation from the list in Gmail, an acknowledgment appears with an undo option. The acknowledgment remains until the user takes an unrelated action, such as scrolling the list.</p> </div> </div> @@ -61,16 +54,16 @@ page.title=Confirming & Acknowledging <h2>No Confirmation or Acknowledgment</h2> <div class="layout-content-row"> <div class="layout-content-col span-6"> - <img src="{@docRoot}design/media/confirm_ack_ex_removeapp.png"> + <h4>Example: +1'ing</h4> + <img style="padding: 33px 0 30px;" src="{@docRoot}design/media/confirm_ack_ex_plus1.png"> + <p><strong>Confirmation is unnecessary</strong>. If the user +1'd by accident, it's not a big deal. They can just touch the button again to undo the action.</p> + <p><strong>Acknowledgment is unnecessary</strong>. The user will see the +1 button bounce and turn red. That's a very clear signal.</p> + </div> + <div class="layout-content-col span-7"> <h4>Example: Removing an app from the Home Screen</h4> + <img src="{@docRoot}design/media/confirm_ack_ex_removeapp.png"> <p><strong>Confirmation is unnecessary</strong>. This is a deliberate action: the user must drag and drop an item onto a relatively large and isolated target. Therefore, accidents are highly unlikely. But if the user regrets the decision, it only takes a few seconds to bring it back again.</p> <p><strong>Acknowledgment is unnecessary</strong>. The user will know the app is gone from the Home Screen because they made it disappear by dragging it away.</p> </div> - <div class="layout-content-col span-7"> - <img src="{@docRoot}design/media/confirm_ack_ex_plus1.png"> - <h4>Example: +1'ing</h4> - <p><strong>Confirmation is unnecessary</strong>. If the user +1'd by accident, it's not a big deal. They can just touch the button again to undo the action.</p> - <p><strong>Acknowledgment is unnecessary</strong>. The user will see the +1 button bounce and turn red. That's a very clear signal.</p> - </div> </div>
\ No newline at end of file diff --git a/docs/html/design/patterns/help.jd b/docs/html/design/patterns/help.jd index e42ea26cbb27..cdac54d3242c 100644 --- a/docs/html/design/patterns/help.jd +++ b/docs/html/design/patterns/help.jd @@ -17,20 +17,18 @@ page.title=Help <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> +<em>To teach high value functionality that's only available through 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> + <ul> <li><strong>High value</strong> - <p style="margin-top="0">Without it, users wouldn't be able to customize the most frequently-visited Android screen to meet their needs.</p></li> + <p style="margin-top:0;">Without it, users wouldn't be able to customize the most frequently visited Android screen to meet their needs.</p></li> <li><strong>Available only through a gesture</strong> - <p style="margin-top="0">Users can't do this through a button or a menu.</p></li> - <li><strong>Atypical for the gesture</strong> - <p style="margin-top="0">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> + <p style="margin-top:0;">Because there's no button or menu for it, users might not ever discover it on their own.</p></li> + </ul> + <p>However, not all high value gesture-only functionality needs a tutorial. For example, don't teach users how to scroll content. They already know how because it's a fundamental, system-wide interaction.</p> </div> <div class="layout-content-col span-5"> <img src="{@docRoot}design/media/help_cling.png"> @@ -60,9 +58,9 @@ page.title=Help <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>In addition to help, you might want to expose 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>Let users access this information through the Help menu item, but optimize the flow for people with 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> @@ -91,7 +89,7 @@ page.title=Help </div> <div class="layout-content-col span-5"> <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>Build a help screen in your app and offer other options in the action bar. For example, you could let users contact you with questions or feedback through an action button. The action overflow is the ideal place for non-help information that users rarely need.</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> diff --git a/docs/html/design/patterns/index.jd b/docs/html/design/patterns/index.jd index 6f88e6d99fd0..4416de1daa5b 100644 --- a/docs/html/design/patterns/index.jd +++ b/docs/html/design/patterns/index.jd @@ -20,10 +20,10 @@ footer.hide=1 <div id="text-overlay"> Design apps that behave in a consistent, predictable fashion. <br><br> - <a href="{@docRoot}design/patterns/new-4-0.html" class="landing-page-link">New in Android 4.0</a> + <a href="{@docRoot}design/patterns/new.html" class="landing-page-link">New in Android</a> </div> - <a href="{@docRoot}design/patterns/new-4-0.html"> + <a href="{@docRoot}design/patterns/new.html"> <img src="{@docRoot}design/media/patterns_landing.png"> </a> </div> diff --git a/docs/html/design/patterns/multi-pane-layouts.jd b/docs/html/design/patterns/multi-pane-layouts.jd index f752be257ac0..ad888e9bc0fe 100644 --- a/docs/html/design/patterns/multi-pane-layouts.jd +++ b/docs/html/design/patterns/multi-pane-layouts.jd @@ -67,9 +67,7 @@ you can use to adjust the layout after orientation change while keeping function <div class="layout-content-col span-5"> <h4>Expand/collapse</h4> -<p>When the device rotates, collapse the left pane view to only show the most important information. -Provide an <em>expand</em> control that allows the user to bring the left pane content back to its original -width and vice versa.</p> +<p>When the device rotates, collapse the left pane view to only show the most important information.</p> </div> </div> diff --git a/docs/html/design/patterns/notifications.jd b/docs/html/design/patterns/notifications.jd index fbb05e307899..75bfff290fc0 100644 --- a/docs/html/design/patterns/notifications.jd +++ b/docs/html/design/patterns/notifications.jd @@ -7,8 +7,7 @@ page.title=Notifications <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>Notifications are now more flexible in size and layout. They can be expanded to show additional information details.</li> <li>A priority flag was introduced that helps to sort notifications by importance rather than time only.</li> </ul> @@ -21,10 +20,10 @@ page.title=Notifications <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> + <li>a timestamp</li> + <li>a secondary icon to identify the sending application when the senders 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> + <p>The information arrangement of the base 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"> @@ -35,7 +34,7 @@ page.title=Notifications </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> +<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"> @@ -53,7 +52,7 @@ page.title=Notifications <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> + <li>duplicative of the default action of the notification (such as "Read" or "Open")</li> </ul> </div> <div class="layout-content-col span-7"> @@ -64,7 +63,7 @@ page.title=Notifications </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> +<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"> @@ -79,27 +78,13 @@ page.title=Notifications </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> +<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 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> @@ -126,6 +111,7 @@ tailor a response.</p> <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 @@ -145,29 +131,30 @@ notifications of a particular kind are pending.</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> +<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 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> +<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. 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>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>Time sensitive events are great opportunities for valuable notifications with high priority, especially if these synchronous events involve other people. 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> <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 @@ -187,27 +174,19 @@ attention, because the event is imminent, and calendar events often involve othe <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> +<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> +<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> +<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> +<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> +<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 @@ -233,11 +212,8 @@ develop a widget that they can choose to place on their home screen.</p> </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> + <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> @@ -245,8 +221,7 @@ right on a notification removes it from the drawer.</p> <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> +<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"> @@ -265,27 +240,14 @@ notification drawer is opened by touching anywhere inside the notification area. <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> +<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> - + <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> - -<div class="vspace size-1"> </div> - -<img src="{@docRoot}design/media/notifications_pattern_dialog_toast.png"> +</div>
\ No newline at end of file diff --git a/docs/html/design/patterns/selection.jd b/docs/html/design/patterns/selection.jd index e3ee90ed73ad..612c3702ac8e 100644 --- a/docs/html/design/patterns/selection.jd +++ b/docs/html/design/patterns/selection.jd @@ -1,8 +1,7 @@ page.title=Selection @jd:body -<p>Android 3.0 introduced the <em>long press</em> gesture—that is, a touch that's held in the same -position for a moment—as the global gesture to select data. This affects the way you should +<p>Android 3.0 changed the <em>long press</em> gesture—that is, a touch that's held in the same position for a moment—to be the global gesture to select data.. This affects the way you should handle multi-select and contextual actions in your apps.</p> <div class="vspace size-1"> </div> diff --git a/docs/html/design/patterns/settings.jd b/docs/html/design/patterns/settings.jd index 3b28b849319f..d10f0d3e6eeb 100644 --- a/docs/html/design/patterns/settings.jd +++ b/docs/html/design/patterns/settings.jd @@ -429,7 +429,7 @@ it or provide instructions. Starting in Ice Cream Sandwich, we're using secondar <tbody> <tr> <td class="secondary-text"> - After 10 minutes of activity + After 10 minutes of inactivity </td> </tr> </tbody> @@ -551,7 +551,7 @@ more direct and understandable.</p> <tbody> <tr> <td class="secondary-text"> - After 10 minutes of activity + After 10 minutes of inactivity </td> </tr> </tbody> diff --git a/docs/html/design/patterns/swipe-views.jd b/docs/html/design/patterns/swipe-views.jd index b98a06381e3c..252343da8e22 100644 --- a/docs/html/design/patterns/swipe-views.jd +++ b/docs/html/design/patterns/swipe-views.jd @@ -24,7 +24,12 @@ using the swipe gesture to navigate to the next/previous detail view.</p> <img src="{@docRoot}design/media/swipe_views2.png"> <div class="figure-caption"> - Navigating between consecutive Email messages using the swipe gesture. + Navigating between consecutive Email messages using the swipe gesture. 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. +</div> + +<img src="{@docRoot}design/media/swipe_views3.png"> +<div class="figure-caption"> + Scrolling within a wide Email message using the swipe gesture before navigating to the next message. </div> <h2 id="between-tabs">Swiping Between Tabs</h2> @@ -46,32 +51,29 @@ using the swipe gesture to navigate to the next/previous detail view.</p> </div> <div class="layout-content-col span-8"> + <p>If your app uses action bar tabs, use swipe to navigate between the different views.</p> + <div class="vspace size-1"> </div> -<p>If your app uses action bar tabs, use swipe to navigate between the different views.</p> -<div class="vspace size-2"> </div> - -<h2 id="checklist">Checklist</h2> - -<ul> -<li> -<p>Use swipe to quickly navigate between detail views or tabs.</p> -</li> -<li> -<p>Transition between the views as the user performs the swipe gesture. Do not wait for the - gesture to complete and then transition between views.</p> -</li> -<li> -<p>If you used buttons in the past for previous/next navigation, replace them with - the swipe gesture.</p> -</li> -<li> -<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 - relative list position of the currently visible item.</p> -</li> -</ul> - + <h2 id="checklist">Checklist</h2> + <ul> + <li> + <p>Use swipe to quickly navigate between detail views or tabs.</p> + </li> + <li> + <p>Transition between the views as the user performs the swipe gesture. Do not wait for the + gesture to complete and then transition between views.</p> + </li> + <li> + <p>If you used buttons in the past for previous/next navigation, replace them with + the swipe gesture.</p> + </li> + <li> + <p>Consider adding contextual information in your detail view that informs the user about the + relative list position of the currently visible item.</p> + </li> + <li> + <p>For more details on how to build swipe views, read the developer documentation on <a href="{@docRoot}training/implementing-navigation/lateral.html#horizontal-paging">Implementing Lateral Navigation</a>.</p> + </li> + </ul> </div> </div> diff --git a/docs/html/design/patterns/widgets.jd b/docs/html/design/patterns/widgets.jd new file mode 100644 index 000000000000..cf4c74f990e0 --- /dev/null +++ b/docs/html/design/patterns/widgets.jd @@ -0,0 +1,131 @@ +page.title=Widgets +@jd:body + +<p>Widgets are an essential aspect of home screen customization. You can imagine them as "at-a-glance" views of an app's most important data and functionality that is accessible right from the user's home screen. Users can move widgets across their home screen panels, and, if supported, resize them to tailor the amount of information within a widget to their preference.</p> + +<h2>Widget types</h2> +<p>As you begin planning your widget, think about what kind of widget you're trying to build. Widgets typically fall into one of the following categories:</p> + +<h3>Information widgets</h3> +<img style="float:right;" src="{@docRoot}design/media/widgets_info.png"> +<p>Information widgets typically display a few crucial information elements that are important to a user and track how that information changes over time. Good examples for information widgets are weather widgets, clock widgets or sports score trackers. Touching information widgets typically launches the associated app and opens a detail view of the widget information.</p> + +<div class="vspace size-2"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-6"> + <h3>Collection widgets</h3> + <p>As the name implies, collection widgets specialize on displaying multitude elements of the same type, such as a collection of pictures from a gallery app, a collection of articles from a news app or a collection of emails/messages from a communication app. Collection widgets typically focus on two use cases: browsing the collection, and opening an element of the collection to its detail view for consumption. Collection widgets can scroll vertically.</p> + </div> + <div class="layout-content-col span-3"> + <img src="{@docRoot}design/media/widgets_collection_gmail.png"> + <div class="figure-caption"> + ListView widget + </div> + </div> + <div class="layout-content-col span-4"> + <img src="{@docRoot}design/media/widgets_collection_bookmarks.png"> + <div class="figure-caption"> + GridView widget + </div> + </div> +</div> + +<h3>Control widgets</h3> +<img style="float:right;" src="{@docRoot}design/media/widgets_control.png"> +<p>The main purpose of a control widget is to display often used functions that the user can trigger right from the home screen without having to open the app first. Think of them as remote controls for an app. A typical example of control widgets are music app widgets that allow the user to play, pause or skip music tracks from outside the actual music app.</p> +<p>Interacting with control widgets may or may not progress to an associated detail view depending on if the control widget's function generated a data set, such as in the case of a search widget.</p> + +<div class="vspace size-2"> </div> + +<h3>Hybrid widgets</h3> +<img style="float:right;" src="{@docRoot}design/media/widgets_hybrid.png"> +<p>While all widgets tend to gravitate towards one of the three types described above, many widgets in reality are hybrids that combine elements of different types.</p> +<p>For the purpose of your widget planning, center your widget around one of the base types and add elements of other types if needed.</p> +<div class="figure-caption"> +A music player widget is primarily a control widget, but also keeps the user informed about what track is currently playing. It essentially combines a control widget with elements of an information widget type. +</div> + +<h2>Widget limitations</h2> +<p>While widgets could be understood as "mini apps", there are certain limitations that are important to understand before you start to embark on designing your widget:</p> + +<h3>Gestures</h3> +<p>Because widgets live on the home screen, they have to co-exist with the navigation that is established there. This limits the gesture support that is available in a widget compared to a full-screen app. While apps for example may support a view pager that allows the user to navigate between screens laterally, that gesture is already taken on the home screen for the purpose of navigating between home panels.</p> +<p>The only gestures available for widgets are:</p> +<ul> + <li>Touch</li> + <li>Vertical swipe</li> +</ul> +<img src="{@docRoot}design/media/widgets_gestures.png"> + +<h3>Elements</h3> +<p>Given the above interaction limitations, some of the UI building blocks that rely on restricted gestures are not available for widgets. For a complete list of supported building blocks and more information on layout restrictions, please refer to the "Creating App Widget Layouts" section in the <a href="{@docRoot}guide/topics/appwidgets/index.html">App Widgets</a> API Guide.</p> + +<h2>Design guidelines</h2> + +<h3>Widget content</h3> +<p>Widgets are a great mechanism to attract a user to your app by "advertising" new and interesting content that is available for consumption in your app.</p> +<p>Just like the teasers on the front page of a newspaper, widgets should consolidate and concentrate an app's information and then provide a connection to richer detail within the app; or in other words: the widget is the information "snack" while the app is the "meal." As a bottom line, always make sure that your app shows more detail about an information item than what the widget already displays.</p> + +<h3>Widget navigation</h3> +<p>Besides the pure information content, you should also consider to round out your widget's offering by providing navigation links to frequently used areas of your app. This lets users complete tasks quicker and extends the functional reach of the app to the home screen.</p> +<p>Good candidates for navigation links to surface on widgets are:</p> +<ul> + <li>Generative functions: These are the functions that allow the user to create new content for an app, such as creating a new document or a new message.</li> + <li>Open application at top level: Tapping on an information element will usually navigate the user to a lower level detail screen. Providing access to the top level of your application provides more navigation flexibility and can replace a dedicated app shortcut that users would otherwise use to navigate to the app from the home screen. Using your application icon as an affordance can also provide your widget with a clear identity in case the data you're displaying is ambiguous.</li> +</ul> + +<div class="layout-content-row"> + <div class="layout-content-col span-6"> + <h3>Widget resizing</h3> + <p>With version 3.1, Android introduced resizable widgets to the platform. Resizing allows users to adjust the height and/or the width of a widget within the constraints of the home panel placement grid. You can decide if your widget is freely resizable or if it is constrained to horizontal or vertical size changes. You do not have to support resizing if your particular widget is inherently fixed-size.</p> + <p>Allowing users to resize widgets has important benefits:</p> + <ul> + <li>They can fine-tune how much information they want to see on each widget.</li> + <li>They can better influence the layout of widgets and shortcuts on their home panels.</li> + </ul> + </div> + + <div class="layout-content-col span-7"> + <img src="{@docRoot}design/media/widgets_resizing01.png"> + <div class="figure-caption"> + A long press and subsequent release sets resizable widgets into resize mode. Users can use the drag handles or the widget corners to set the desired size. + </div> + </div> +</div> + +<p>Planning a resize strategy for your widget depends on the type of widget you're creating. List or grid-based collection widgets are usually straightforward because resizing the widget will simply expand or contract the vertical scrolling area. Regardless of the of the widget's size, the user can still scroll all information elements into view. Information widgets on the other hand require a bit more hands-on planning, since they are not scrollable and all content has to fit within a given size. You will have to dynamically adjust your widget's content and layout to the size the user defined through the resize operation.</p> +<img src="{@docRoot}design/media/widgets_resizing02.png"> +<p>In this simple example the user can horizontally resize a weather widget in 4 steps and expose richer information about the weather at the current location as the widget grows.</p> +<p>For each widget size determine how much of your app's information should surface. For smaller sizes concentrate on the essential and then add more contextual information as the widget grows horizontally and vertically.</p> + +<h3>Layout considerations</h3> +<p>It will be tempting to layout your widgets according to the dimensions of the placement grid of a particular device that you own and develop with. This can be a useful initial approximation as you layout your widget, but keep the following in mind:</p> +<ul> + <li>The number, size and spacing of cells can vary widely from device to device, and hence it is very important that your widget is flexible and can accommodate more or less space than anticipated.</li> + <li>In fact, as the user resizes a widget, the system will respond with a dp size range in which your widget can redraw itself. Planning your widget resizing strategy across "size buckets" rather than variable grid dimensions will give you the most reliable results.</li> +</ul> + +<h3>Widget configuration</h3> +<div class="layout-content-row"> + <div class="layout-content-col span-6"> + <p>Sometimes widgets need to be setup before they can become useful. Think of an email widget for example, where you need to provide an account before the inbox can be displayed. Or a static photo widget where the user has to assign the picture that is to be displayed from the gallery.</p> + <p>Android widgets display their configuration choices right after the widget is dropped onto a home panel. Keep the widget configuration light and don't present more than 2-3 configuration elements. Use dialog-style instead of full-screen activities to present configuration choices and retain the user's context of place, even if doing so requires use of multiple dialogs.</p> +<p>Once setup, there typically is not a lot of reason to revisit the setup. Therefore Android widgets do not show a "Setup" or "Configuration" button.</p> + </div> + + <div class="layout-content-col span-6"> + <img src="{@docRoot}design/media/widgets_config.png"> + <div class="figure-caption"> + After adding a Play widget to a home panel, the widget asks the user to specify the type of media the widget should display. + </div> + </div> +</div> + +<h3>Checklist</h3> +<ul> + <li>Focus on small portions of glanceable information on your widget. Expand on the information in your app.</li> + <li>Choose the right widget type for your purpose.</li> + <li>For resizable widgets, plan how the content for your widget should adapt to different sizes.</li> + <li>Make your widget orientation and device independent by ensuring that the layout is capable of stretching and contracting.</li> +</ul>
\ No newline at end of file diff --git a/docs/html/design/videos/index.jd b/docs/html/design/videos/index.jd new file mode 100644 index 000000000000..272183f5e8c5 --- /dev/null +++ b/docs/html/design/videos/index.jd @@ -0,0 +1,67 @@ +page.title=Videos +@jd:body + +<p>The Android Design Team was pleased to present five fantastic design-oriented sessions at Google I/O 2012. Visit these pages to view the videos and presentations from the conference.</p> +<img src="{@docRoot}design/media/extras_googleio_12.png"> + +<div class="vspace size-2"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-7"> + <h3 id="design-for-success"><a href="https://developers.google.com/events/io/sessions/gooio2012/112/">Android Design for Success</a></h3> + <p>You have a great idea for an Android app. You want it to stand out among hundreds of thousands. You want your users to love it and tell everyone they know. The Android User Experience team is here to help. We talk about the Android Design guide and other tricks of the trade for creating apps that delight users and help them accomplish their goals. No design background is required.</p> + </div> + <div class="layout-content-col span-6"> + <iframe width="355" height="200" src="http://www.youtube.com/embed/2NL_83EG0no" frameborder="0" allowfullscreen=""></iframe> + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-7"> + <h3 id="design-for-engineers"><a href="https://developers.google.com/events/io/sessions/gooio2012/1204/">Android Design for Engineers</a></h3> + <p>Design isn't black magic, it's a field that people can learn. In this talk two elite designers from Google give you an advanced crash course in interactive and visual design. Topics include mental models, natural mappings, metaphors, mode errors, visual hierarchies, typography and gestalt principles. Correctly applied, this knowledge can drastically improve the quality of your work.</p> + </div> + <div class="layout-content-col span-6"> + <iframe width="355" height="200" src="http://www.youtube.com/embed/iJDoxOTyMdk" frameborder="0" allowfullscreen=""></iframe> + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-7"> + <h3 id="navigation-in-android"><a href="https://developers.google.com/events/io/sessions/gooio2012/114/">Navigation in Android</a></h3> + <p>An app is useless if people can't find their way around it. Android introduced big navigation-support changes in 3.0 and 4.0. The Action Bar offers a convenient control for Up navigation, the Back key's behavior became more consistent within tasks, and the Recent Tasks UI got an overhaul. In this talk, we discuss how and why we got where we are today, how to think about navigation when designing your app's user experience, and how to write apps that offer effortless navigation in multiple Android versions.</p> + </div> + <div class="layout-content-col span-6"> + <iframe width="355" height="200" src="http://www.youtube.com/embed/XwGHJJYBs0Q" frameborder="0" allowfullscreen=""></iframe> + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-7"> + <h3 id="now-what"><a href="https://developers.google.com/events/io/sessions/gooio2012/115/">So You've Read the Design Guide; Now What?</a></h3> + <p>The Android Design Guide describes how to design beautiful Android apps, but not how to build them. In this talk we give practical tips for how to apply fit & finish as you implement your design, we show you how to avoid some common pitfalls, we describe some useful patterns, and show how tools can help.</p> + </div> + <div class="layout-content-col span-6"> + <iframe width="355" height="200" src="http://www.youtube.com/embed/2jCVmfCse1E" frameborder="0" allowfullscreen=""></iframe> + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-7"> + <h3 id="playing-with-patterns"><a href="https://developers.google.com/events/io/sessions/gooio2012/131/">Playing with Patterns</a></h3> + <p>Best-in-class application designers and developers talk about their experience in developing for Android, showing screenshots from their app, exploring the challenges they faced, and offering creative solutions congruent with the Android Design guide. Guests are invited to show examples of visual and interaction patterns in their application that manage to keep it simultaneously consistent and personal.</p> + </div> + <div class="layout-content-col span-6"> + <iframe width="355" height="200" src="http://www.youtube.com/embed/8iUbr8RZKtg" frameborder="0" allowfullscreen=""></iframe> + </div> +</div> + +<p>Videos for the entire Design Track can also be found on the <a href="http://www.youtube.com/playlist?list=PL54FA004D676C3EE9">Android Developers Channel</a> on YouTube.</p> |
