From c9506415d533c61a9607c5b61a1993747bafb406 Mon Sep 17 00:00:00 2001 From: Scott Main Date: Wed, 1 Aug 2012 15:51:29 -0700 Subject: Group revert of the following commits for design docs: ce470e17fd4298c1b8aa9a5fd7493bde7a6be840 8874ab0473f4db10e71bf0537c0703db03bac4ee bdd8d0fada73dabbda7f6f174c17317d1e30a79e 6443ca4cd9406ed8e9ba55461d4b2eb677aad17a 5ac5a324b377c8c5f29a3d368ebfdc76b0d02e3e 1edd4ae5c4748bd9d1e64f65dc554790063d59b8 be13fa0b7ac7929e65b1f3e40b2834ed0d9ed7ff 6a681afd38d9881154207436e5e145856e9d2f75 353474c0acdad9b8ffdb86d3d5f32137885dd720 2b1584c1d53cd1070d5157c07158828b4baf8844 Had to revert these because they're not ready to be published. Change-Id: I704cf0df1db9aa159295bdf78e97cef9605addc6 --- docs/html/design/building-blocks/dialogs.jd | 43 ++-- docs/html/design/building-blocks/index.jd | 2 +- docs/html/design/building-blocks/progress.jd | 83 +++---- docs/html/design/building-blocks/tabs.jd | 3 +- docs/html/design/design_toc.cs | 9 +- docs/html/design/extras/index.jd | 22 -- .../design/media/accessibility_contentdesc.png | Bin 200466 -> 0 bytes docs/html/design/media/actionbar_drawer.png | Bin 49964 -> 0 bytes .../media/app_structure_book_detail_page_flip.png | Bin 148026 -> 199586 bytes .../media/app_structure_gallery_filmstrip.png | Bin 89920 -> 199164 bytes docs/html/design/media/building_blocks_landing.png | Bin 166158 -> 141888 bytes docs/html/design/media/color_spectrum.png | Bin 2867 -> 2529 bytes .../media/compatibility_physical_buttons.png | Bin 108379 -> 116257 bytes .../design/media/compatibility_virtual_nav.png | Bin 132744 -> 136460 bytes docs/html/design/media/confirm_ack_acknowledge.png | Bin 13116 -> 0 bytes docs/html/design/media/confirm_ack_confirming.png | Bin 113657 -> 0 bytes .../design/media/confirm_ack_draft_deleted.png | Bin 20600 -> 0 bytes docs/html/design/media/confirm_ack_ex_beam.png | Bin 175447 -> 0 bytes docs/html/design/media/confirm_ack_ex_books.png | Bin 73478 -> 0 bytes .../html/design/media/confirm_ack_ex_draftsave.png | Bin 25504 -> 0 bytes docs/html/design/media/confirm_ack_ex_plus1.png | Bin 4500 -> 0 bytes .../html/design/media/confirm_ack_ex_removeapp.png | Bin 59334 -> 0 bytes docs/html/design/media/confirm_ack_flowchart.png | Bin 318408 -> 0 bytes docs/html/design/media/dialogs_popups_example.png | Bin 132934 -> 140850 bytes docs/html/design/media/extras_googleio_12.png | Bin 4898 -> 0 bytes docs/html/design/media/help_better.png | Bin 6360 -> 0 bytes docs/html/design/media/help_cling.png | Bin 47170 -> 0 bytes docs/html/design/media/help_dont.png | Bin 14031 -> 0 bytes docs/html/design/media/help_evenbetter.png | Bin 11309 -> 0 bytes docs/html/design/media/help_overflow.png | Bin 18959 -> 0 bytes docs/html/design/media/help_solo_overflow.png | Bin 8805 -> 0 bytes .../media/iconography_notification_focal.png | Bin 3530 -> 2329 bytes docs/html/design/media/index_landing_page.png | Bin 284971 -> 354256 bytes docs/html/design/media/multipane_show.png | Bin 87619 -> 159034 bytes docs/html/design/media/new_accessibility.png | Bin 2364 -> 0 bytes docs/html/design/media/new_notifications.png | Bin 24282 -> 0 bytes docs/html/design/media/new_widgets.png | Bin 23738 -> 0 bytes docs/html/design/media/notifications_dismiss.png | Bin 27896 -> 57718 bytes .../media/notifications_expand_contract_msg.png | Bin 23119 -> 0 bytes .../notifications_pattern_additional_fail.png | Bin 50112 -> 54755 bytes .../media/notifications_pattern_additional_win.png | Bin 39624 -> 42822 bytes .../design/media/notifications_pattern_anatomy.png | Bin 19658 -> 19598 bytes .../notifications_pattern_expand_contract.png | Bin 14826 -> 0 bytes .../media/notifications_pattern_expandable.png | Bin 161690 -> 0 bytes .../media/notifications_pattern_ongoing_music.png | Bin 17781 -> 19821 bytes .../media/notifications_pattern_personal.png | Bin 14983 -> 0 bytes .../media/notifications_pattern_phone_icons.png | Bin 9101 -> 35597 bytes .../media/notifications_pattern_priority.png | Bin 14826 -> 0 bytes .../notifications_pattern_real_time_people.png | Bin 21546 -> 26354 bytes .../media/notifications_pattern_social_fail.png | Bin 30060 -> 75200 bytes .../media/notifications_pattern_two_actions.png | Bin 10180 -> 0 bytes .../html/design/media/principles_decide_for_me.png | Bin 97922 -> 113676 bytes docs/html/design/media/principles_error.png | Bin 12388 -> 28963 bytes .../media/principles_information_when_need_it.png | Bin 48451 -> 8885 bytes .../html/design/media/principles_keep_it_brief.png | Bin 18056 -> 21830 bytes .../design/media/principles_never_lose_stuff.png | Bin 26197 -> 21561 bytes .../html/design/media/progress_activity_custom.png | Bin 19494 -> 0 bytes .../design/media/progress_activity_custom_app.png | Bin 411337 -> 0 bytes docs/html/design/media/progress_activity_do.png | Bin 2501 -> 0 bytes docs/html/design/media/progress_activity_dont.png | Bin 4148 -> 0 bytes docs/html/design/media/tabs_youtube.png | Bin 28290 -> 68907 bytes docs/html/design/media/themes_holo_dark.png | Bin 25031 -> 28203 bytes docs/html/design/media/themes_holo_inverse.png | Bin 68280 -> 66350 bytes docs/html/design/media/themes_holo_light.png | Bin 69149 -> 85709 bytes .../design/media/ui_overview_notifications.png | Bin 42615 -> 59824 bytes docs/html/design/patterns/accessibility.jd | 80 ------- docs/html/design/patterns/actionbar.jd | 73 +++--- docs/html/design/patterns/app-structure.jd | 38 ++- .../design/patterns/confirming-acknowledging.jd | 76 ------ docs/html/design/patterns/help.jd | 114 --------- docs/html/design/patterns/multi-pane-layouts.jd | 10 +- docs/html/design/patterns/new-4-0.jd | 71 ++++++ docs/html/design/patterns/new.jd | 114 --------- docs/html/design/patterns/notifications.jd | 261 ++++++++------------- docs/html/design/patterns/swipe-views.jd | 3 - 75 files changed, 279 insertions(+), 723 deletions(-) delete mode 100644 docs/html/design/extras/index.jd delete mode 100644 docs/html/design/media/accessibility_contentdesc.png delete mode 100644 docs/html/design/media/actionbar_drawer.png delete mode 100644 docs/html/design/media/confirm_ack_acknowledge.png delete mode 100644 docs/html/design/media/confirm_ack_confirming.png delete mode 100644 docs/html/design/media/confirm_ack_draft_deleted.png delete mode 100644 docs/html/design/media/confirm_ack_ex_beam.png delete mode 100644 docs/html/design/media/confirm_ack_ex_books.png delete mode 100644 docs/html/design/media/confirm_ack_ex_draftsave.png delete mode 100644 docs/html/design/media/confirm_ack_ex_plus1.png delete mode 100644 docs/html/design/media/confirm_ack_ex_removeapp.png delete mode 100644 docs/html/design/media/confirm_ack_flowchart.png delete mode 100644 docs/html/design/media/extras_googleio_12.png delete mode 100644 docs/html/design/media/help_better.png delete mode 100644 docs/html/design/media/help_cling.png delete mode 100644 docs/html/design/media/help_dont.png delete mode 100644 docs/html/design/media/help_evenbetter.png delete mode 100644 docs/html/design/media/help_overflow.png delete mode 100644 docs/html/design/media/help_solo_overflow.png delete mode 100644 docs/html/design/media/new_accessibility.png delete mode 100644 docs/html/design/media/new_notifications.png delete mode 100644 docs/html/design/media/new_widgets.png delete mode 100644 docs/html/design/media/notifications_expand_contract_msg.png delete mode 100644 docs/html/design/media/notifications_pattern_expand_contract.png delete mode 100644 docs/html/design/media/notifications_pattern_expandable.png delete mode 100644 docs/html/design/media/notifications_pattern_personal.png delete mode 100644 docs/html/design/media/notifications_pattern_priority.png delete mode 100644 docs/html/design/media/notifications_pattern_two_actions.png delete mode 100644 docs/html/design/media/progress_activity_custom.png delete mode 100644 docs/html/design/media/progress_activity_custom_app.png delete mode 100644 docs/html/design/media/progress_activity_do.png delete mode 100644 docs/html/design/media/progress_activity_dont.png delete mode 100644 docs/html/design/patterns/accessibility.jd delete mode 100644 docs/html/design/patterns/confirming-acknowledging.jd delete mode 100644 docs/html/design/patterns/help.jd create mode 100644 docs/html/design/patterns/new-4-0.jd delete mode 100644 docs/html/design/patterns/new.jd (limited to 'docs/html') diff --git a/docs/html/design/building-blocks/dialogs.jd b/docs/html/design/building-blocks/dialogs.jd index 2820471..9b653ee 100644 --- a/docs/html/design/building-blocks/dialogs.jd +++ b/docs/html/design/building-blocks/dialogs.jd @@ -10,29 +10,28 @@ user to adjust settings or enter text.

    -
  1. -

    Optional title region

    -

    The title introduces the content of your dialog. It can, for example, identify the name of a - setting that the user is about to change, or request a decision.

    -
    2. -
  2. -

    Content area

    -

    Dialog content varies widely. For settings dialogs, a dialog may contain UI elements such as - sliders, text fields, checkboxes, or radio buttons that allow the user to change app or system - settings. In other cases, such as alerts, the content may consist solely of text that provides - further context for a user decision.

    -
    3. - -
  3. -

    Action buttons

    -

    Action buttons are typically Cancel and/or OK, with OK indicating the preferred or most likely action. However, if the options consist of specific actions such as Close or Wait rather than a confirmation or cancellation of the action described in the content, then all the buttons should be active verbs. Order actions following these rules:

    -
      - -
    • The dismissive action of a dialog is always on the left. Dismissive actions return to the user to the previous state.
      • -
    • The affirmative actions are on the right. Affirmative actions continue progress toward the user goal that triggered the dialog.
      • -
    -
    4. +
  4. +

    Optional title region

    +

    The title introduces the content of your dialog. It can, for example, identify the name of a + setting that the user is about to change, or request a decision.

    +
    5. +
  5. +

    Content area

    +

    Dialog content varies widely. For settings dialogs, a dialog may contain UI elements such as + sliders, text fields, checkboxes, or radio buttons that allow the user to change app or system + settings. In other cases, such as alerts, the content may consist solely of text that provides + further context for a user decision.

    +
    6. +
  6. +

    Action buttons

    +

    Action buttons are typically Cancel and/or OK, with OK indicating the preferred or most likely + action. However, if the options consist of specific actions such as Close or Wait rather than + a confirmation or cancellation of the action described in the content, then all the buttons + should be active verbs. As a rule, the dismissive action of a dialog is always on the left + whereas the affirmative actions are on the right.

    +
+
diff --git a/docs/html/design/building-blocks/index.jd b/docs/html/design/building-blocks/index.jd index e554775..d915aae 100644 --- a/docs/html/design/building-blocks/index.jd +++ b/docs/html/design/building-blocks/index.jd @@ -11,7 +11,7 @@ footer.hide=1 #text-overlay { position: absolute; left: 0; - top: 520px; + top: 472px; width: 450px; } diff --git a/docs/html/design/building-blocks/progress.jd b/docs/html/design/building-blocks/progress.jd index 7342387..03fc09c 100644 --- a/docs/html/design/building-blocks/progress.jd +++ b/docs/html/design/building-blocks/progress.jd @@ -1,14 +1,19 @@ -page.title=Progress & Activity +page.title=Progress and Activity @jd:body -

Progress bars and activity indicators signal to users that something is happening that will take a moment.

-

Progress bars

+

When an operation of interest to the user is taking place over a relatively long period of time, +provide visual feedback that it's still happening and in the process of being completed.

+

Progress

-

Progress bars are for situations where the percentage completed can be determined. They give users a quick sense of how much longer an operation will take.

+

If you know the percentage of the operation that has been completed, use a determinate progress bar +to give the user a sense of how much longer it will take.

-

A progress bar should always fill from 0% to 100% and never move backwards to a lower value. If multiple operations are happening in sequence, use the progress bar to represent the delay as a whole, so that when the bar reaches 100%, it doesn't return back to 0%.

+

The progress bar should always travel from 0% to 100% completion. Avoid setting the bar to a lower +value than a previous value, or using the same progress bar to represent the progress of multiple +events, since doing so makes the display meaningless. If you're not sure how long a particular +operation will take, use an indeterminate progress indicator.

 
@@ -17,11 +22,12 @@ page.title=Progress & Activity Progress bar in Holo Dark and Holo Light. -

Activity indicators

+

Activity

-

Activity indicators are for operations of an indeterminate length. They ask users to wait a moment while something finishes up, without getting into specifics about what's happening behind the scenes.

+

If you don't know how much longer an operation will continue, use an indeterminate progress +indicator. There are two styles available: a flat bar and a circle. Use the one that best fits the +available space.

-

Two styles are available: a bar and a circle. Each is offered in a variety of sizes, in both Holo Light and Holo Dark themes. Choose the appropriate style and size for the surrounding context. For example, the largest activity circle works well when displayed in a blank content area, but not in a smaller dialog box. Each operation should only be represented by one activity indicator.

@@ -32,8 +38,14 @@ page.title=Progress & Activity
    -

  1. Activity bar

    -

    In this example, an activity bar (in Holo Dark) appears when a user first requests a download. There's an unknown period of time when the download has not yet started. As soon as the download starts, this activity bar transforms into a progress bar.

    +

  2. Activity bar (shown with the Holo Dark theme)

    +

    + +An indeterminate activity bar is used at the start of an application download because the Play Store +app hasn't been able to contact the server yet, and it's not possible to determine how long it will +take for the download to begin. + +

@@ -49,19 +61,12 @@ page.title=Progress & Activity
    -

  1. Activity circle

    -

    In this example, an activity circle (in Holo Light) is used in the Gmail application when a message is being loaded because it's not possible to determine how long it will take to download the email.

    -

    When displaying an activity circle, do not include text to communicate what the app is doing. The moving circle alone provides sufficient feedback about the delay, and does so in an understated way that minimizes the impact.

    +

  2. Activity circle (shown with the Holo Light theme)

    -

    -
    Don't
    - -
    - -
    -
    Do
    - -
    + +An indeterminate activity circle is used in the Gmail application when a message is being +loaded because it's not possible to determine how long it will take to download the email. +

@@ -69,34 +74,6 @@ page.title=Progress & Activity
-

Custom indicators

-

The standard progress bar and activity indicators work well for most situations and should be used whenever possible to provide a consistent experience across Android. However, some situations may call for something more custom.

- -

Here's an example:
-In all of the Google Play apps (Music, Books, Movies, Magazines), we wanted the current download state of each item to be visible at all times at the top-level screen. These states are: -

    -
  • Not downloaded
    • -
  • Temporarily downloaded (automatically cached by the app)
    • -
  • Permanently downloaded on the device at the user's request
    • -
-

-

We also needed to indicate progress from one download state to another, because downloading is not instantaneous.

-

This presented a challenge, because the Google Play apps use a variety of different layouts, and some of them are highly space-constrained. We didn't want this information to clutter the top-level screens, or compete too much with the cover art.

-

So we designed a custom indicator that could show all of the information in a tiny footprint, with the flexibility to appear on top of content if necessary.

- - - -

The color indicates whether it's downloaded (blue) or not (gray). The appearance of the pin indicates whether the download is permanent (white, upright) or temporary (gray, diagonal). And when state is in the process of changing, progress is indicated by a moving pie chart.

- -
-
- -
-
-
- Across Google Play apps with different layouts, the same custom indicator appears with each item. It communicates download state as well as progress, in a compact package that can be incorporated into any screen design. -
-
-
- -

If you find that the standard indicators aren't meeting your needs (due to space constraints, state complexities), by all means design your own. Make it feel like part of the Android family by injecting some of the visual characteristics of the standard indicators. In this example, we carried over the circular shape, the same shade of blue, and the flat and simple style.

+

You should only use one activity indicator on screen per activity, and it should appropriately sized +for the surrounding context. For example, the largest activity circle works well when displayed in a +blank content area, but not in a smaller dialog box.

diff --git a/docs/html/design/building-blocks/tabs.jd b/docs/html/design/building-blocks/tabs.jd index 8a2eb41..19ed1c3 100644 --- a/docs/html/design/building-blocks/tabs.jd +++ b/docs/html/design/building-blocks/tabs.jd @@ -6,7 +6,6 @@ page.title=Tabs

Tabs in the action bar make it easy to explore and switch between different views or functional aspects of your app, or to browse categorized data sets.

-

For details on using gestures to move between tabs, see the Swipe Views pattern.

Scrollable Tabs

@@ -37,7 +36,7 @@ to the next/previous view, swipe left or right.

Fixed Tabs

-

Fixed tabs display all items concurrently. To navigate to a different view, touch the tab, or swipe left or right.

+

Fixed tabs display all items concurrently. To navigate to a different view, touch the tab.

diff --git a/docs/html/design/design_toc.cs b/docs/html/design/design_toc.cs index 72007f5..a31fdd3 100644 --- a/docs/html/design/design_toc.cs +++ b/docs/html/design/design_toc.cs @@ -26,7 +26,7 @@
  • Patterns
    • @@ -66,8 +63,4 @@
    Downloads
    -
  • -
    Extras
    -
    • - \ 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 4546f75..0000000 --- a/docs/html/design/extras/index.jd +++ /dev/null @@ -1,22 +0,0 @@ -page.title=Extras -@jd:body - -

    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.

    - - -

    Android Design for Success

    -

    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.

    - -

    Android Design for Engineers

    -

    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.

    - - -

    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.

    - -

    So You've Read the Design Guide; Now What?

    -

    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.

    - -

    Playing with Patterns

    -

    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.

    - -

    Videos for the entire Design Track can also be found on the Android Developers Channel on YouTube.

    \ No newline at end of file diff --git a/docs/html/design/media/accessibility_contentdesc.png b/docs/html/design/media/accessibility_contentdesc.png deleted file mode 100644 index 6515711..0000000 Binary files a/docs/html/design/media/accessibility_contentdesc.png and /dev/null differ diff --git a/docs/html/design/media/actionbar_drawer.png b/docs/html/design/media/actionbar_drawer.png deleted file mode 100644 index 95e04f5..0000000 Binary files a/docs/html/design/media/actionbar_drawer.png and /dev/null differ 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 1066094..0cca587 100644 Binary files a/docs/html/design/media/app_structure_book_detail_page_flip.png and b/docs/html/design/media/app_structure_book_detail_page_flip.png differ diff --git a/docs/html/design/media/app_structure_gallery_filmstrip.png b/docs/html/design/media/app_structure_gallery_filmstrip.png index a937533..483bafa 100644 Binary files a/docs/html/design/media/app_structure_gallery_filmstrip.png and b/docs/html/design/media/app_structure_gallery_filmstrip.png differ diff --git a/docs/html/design/media/building_blocks_landing.png b/docs/html/design/media/building_blocks_landing.png index 40ab0da..2da47b7 100644 Binary files a/docs/html/design/media/building_blocks_landing.png and b/docs/html/design/media/building_blocks_landing.png differ diff --git a/docs/html/design/media/color_spectrum.png b/docs/html/design/media/color_spectrum.png index b7ab309..7d2c023 100644 Binary files a/docs/html/design/media/color_spectrum.png and b/docs/html/design/media/color_spectrum.png differ diff --git a/docs/html/design/media/compatibility_physical_buttons.png b/docs/html/design/media/compatibility_physical_buttons.png index 66a23c8..30d5ddd 100644 Binary files a/docs/html/design/media/compatibility_physical_buttons.png and b/docs/html/design/media/compatibility_physical_buttons.png differ diff --git a/docs/html/design/media/compatibility_virtual_nav.png b/docs/html/design/media/compatibility_virtual_nav.png index 27d39b2..ea595a4 100644 Binary files a/docs/html/design/media/compatibility_virtual_nav.png and b/docs/html/design/media/compatibility_virtual_nav.png differ diff --git a/docs/html/design/media/confirm_ack_acknowledge.png b/docs/html/design/media/confirm_ack_acknowledge.png deleted file mode 100644 index b78eb14..0000000 Binary files a/docs/html/design/media/confirm_ack_acknowledge.png and /dev/null differ diff --git a/docs/html/design/media/confirm_ack_confirming.png b/docs/html/design/media/confirm_ack_confirming.png deleted file mode 100644 index 20a9c02..0000000 Binary files a/docs/html/design/media/confirm_ack_confirming.png and /dev/null differ diff --git a/docs/html/design/media/confirm_ack_draft_deleted.png b/docs/html/design/media/confirm_ack_draft_deleted.png deleted file mode 100644 index f189db9..0000000 Binary files a/docs/html/design/media/confirm_ack_draft_deleted.png and /dev/null differ diff --git a/docs/html/design/media/confirm_ack_ex_beam.png b/docs/html/design/media/confirm_ack_ex_beam.png deleted file mode 100644 index d099912..0000000 Binary files a/docs/html/design/media/confirm_ack_ex_beam.png and /dev/null differ diff --git a/docs/html/design/media/confirm_ack_ex_books.png b/docs/html/design/media/confirm_ack_ex_books.png deleted file mode 100644 index 634d7b9..0000000 Binary files a/docs/html/design/media/confirm_ack_ex_books.png and /dev/null differ diff --git a/docs/html/design/media/confirm_ack_ex_draftsave.png b/docs/html/design/media/confirm_ack_ex_draftsave.png deleted file mode 100644 index 473368d..0000000 Binary files a/docs/html/design/media/confirm_ack_ex_draftsave.png and /dev/null differ diff --git a/docs/html/design/media/confirm_ack_ex_plus1.png b/docs/html/design/media/confirm_ack_ex_plus1.png deleted file mode 100644 index 6de6710..0000000 Binary files a/docs/html/design/media/confirm_ack_ex_plus1.png and /dev/null differ diff --git a/docs/html/design/media/confirm_ack_ex_removeapp.png b/docs/html/design/media/confirm_ack_ex_removeapp.png deleted file mode 100644 index 0abacce..0000000 Binary files a/docs/html/design/media/confirm_ack_ex_removeapp.png and /dev/null differ diff --git a/docs/html/design/media/confirm_ack_flowchart.png b/docs/html/design/media/confirm_ack_flowchart.png deleted file mode 100644 index 277cb11..0000000 Binary files a/docs/html/design/media/confirm_ack_flowchart.png and /dev/null differ diff --git a/docs/html/design/media/dialogs_popups_example.png b/docs/html/design/media/dialogs_popups_example.png index c7536f3..2deb00d 100644 Binary files a/docs/html/design/media/dialogs_popups_example.png and b/docs/html/design/media/dialogs_popups_example.png differ diff --git a/docs/html/design/media/extras_googleio_12.png b/docs/html/design/media/extras_googleio_12.png deleted file mode 100644 index 7ab994d..0000000 Binary files a/docs/html/design/media/extras_googleio_12.png and /dev/null differ diff --git a/docs/html/design/media/help_better.png b/docs/html/design/media/help_better.png deleted file mode 100644 index fde5cb2..0000000 Binary files a/docs/html/design/media/help_better.png and /dev/null differ diff --git a/docs/html/design/media/help_cling.png b/docs/html/design/media/help_cling.png deleted file mode 100644 index c91d189..0000000 Binary files a/docs/html/design/media/help_cling.png and /dev/null differ diff --git a/docs/html/design/media/help_dont.png b/docs/html/design/media/help_dont.png deleted file mode 100644 index a1c9841..0000000 Binary files a/docs/html/design/media/help_dont.png and /dev/null differ diff --git a/docs/html/design/media/help_evenbetter.png b/docs/html/design/media/help_evenbetter.png deleted file mode 100644 index beb88f8..0000000 Binary files a/docs/html/design/media/help_evenbetter.png and /dev/null differ diff --git a/docs/html/design/media/help_overflow.png b/docs/html/design/media/help_overflow.png deleted file mode 100644 index fb2bc0a..0000000 Binary files a/docs/html/design/media/help_overflow.png and /dev/null differ diff --git a/docs/html/design/media/help_solo_overflow.png b/docs/html/design/media/help_solo_overflow.png deleted file mode 100644 index 9423ede..0000000 Binary files a/docs/html/design/media/help_solo_overflow.png and /dev/null differ diff --git a/docs/html/design/media/iconography_notification_focal.png b/docs/html/design/media/iconography_notification_focal.png index f21954f..20d5e8f 100644 Binary files a/docs/html/design/media/iconography_notification_focal.png and b/docs/html/design/media/iconography_notification_focal.png differ diff --git a/docs/html/design/media/index_landing_page.png b/docs/html/design/media/index_landing_page.png index 2065344..3f319b0 100644 Binary files a/docs/html/design/media/index_landing_page.png and b/docs/html/design/media/index_landing_page.png differ diff --git a/docs/html/design/media/multipane_show.png b/docs/html/design/media/multipane_show.png index 9993c9b..b10c91c 100644 Binary files a/docs/html/design/media/multipane_show.png and b/docs/html/design/media/multipane_show.png differ diff --git a/docs/html/design/media/new_accessibility.png b/docs/html/design/media/new_accessibility.png deleted file mode 100644 index 864ee5c..0000000 Binary files a/docs/html/design/media/new_accessibility.png and /dev/null differ diff --git a/docs/html/design/media/new_notifications.png b/docs/html/design/media/new_notifications.png deleted file mode 100644 index 1d9bcf5..0000000 Binary files a/docs/html/design/media/new_notifications.png and /dev/null differ diff --git a/docs/html/design/media/new_widgets.png b/docs/html/design/media/new_widgets.png deleted file mode 100644 index 7e6201b..0000000 Binary files a/docs/html/design/media/new_widgets.png and /dev/null differ diff --git a/docs/html/design/media/notifications_dismiss.png b/docs/html/design/media/notifications_dismiss.png index 696a97f..71bed4f 100644 Binary files a/docs/html/design/media/notifications_dismiss.png and b/docs/html/design/media/notifications_dismiss.png differ diff --git a/docs/html/design/media/notifications_expand_contract_msg.png b/docs/html/design/media/notifications_expand_contract_msg.png deleted file mode 100644 index f37ec2c..0000000 Binary files a/docs/html/design/media/notifications_expand_contract_msg.png and /dev/null differ diff --git a/docs/html/design/media/notifications_pattern_additional_fail.png b/docs/html/design/media/notifications_pattern_additional_fail.png index 4f056db..707c98c 100644 Binary files a/docs/html/design/media/notifications_pattern_additional_fail.png and b/docs/html/design/media/notifications_pattern_additional_fail.png differ diff --git a/docs/html/design/media/notifications_pattern_additional_win.png b/docs/html/design/media/notifications_pattern_additional_win.png index 9d69dfd..eb193d8 100644 Binary files a/docs/html/design/media/notifications_pattern_additional_win.png and b/docs/html/design/media/notifications_pattern_additional_win.png differ diff --git a/docs/html/design/media/notifications_pattern_anatomy.png b/docs/html/design/media/notifications_pattern_anatomy.png index c9fdf85..cacc183 100644 Binary files a/docs/html/design/media/notifications_pattern_anatomy.png and b/docs/html/design/media/notifications_pattern_anatomy.png differ diff --git a/docs/html/design/media/notifications_pattern_expand_contract.png b/docs/html/design/media/notifications_pattern_expand_contract.png deleted file mode 100644 index e89835c..0000000 Binary files a/docs/html/design/media/notifications_pattern_expand_contract.png and /dev/null differ diff --git a/docs/html/design/media/notifications_pattern_expandable.png b/docs/html/design/media/notifications_pattern_expandable.png deleted file mode 100644 index 3092676..0000000 Binary files a/docs/html/design/media/notifications_pattern_expandable.png and /dev/null differ diff --git a/docs/html/design/media/notifications_pattern_ongoing_music.png b/docs/html/design/media/notifications_pattern_ongoing_music.png index 77b24ed..01039bd 100644 Binary files a/docs/html/design/media/notifications_pattern_ongoing_music.png and b/docs/html/design/media/notifications_pattern_ongoing_music.png differ diff --git a/docs/html/design/media/notifications_pattern_personal.png b/docs/html/design/media/notifications_pattern_personal.png deleted file mode 100644 index 08880b2..0000000 Binary files a/docs/html/design/media/notifications_pattern_personal.png and /dev/null differ diff --git a/docs/html/design/media/notifications_pattern_phone_icons.png b/docs/html/design/media/notifications_pattern_phone_icons.png index bee66c9..09d8a83 100644 Binary files a/docs/html/design/media/notifications_pattern_phone_icons.png and b/docs/html/design/media/notifications_pattern_phone_icons.png differ diff --git a/docs/html/design/media/notifications_pattern_priority.png b/docs/html/design/media/notifications_pattern_priority.png deleted file mode 100644 index e89835c..0000000 Binary files a/docs/html/design/media/notifications_pattern_priority.png and /dev/null 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 d03b6f0..2af40b8 100644 Binary files a/docs/html/design/media/notifications_pattern_real_time_people.png and b/docs/html/design/media/notifications_pattern_real_time_people.png differ diff --git a/docs/html/design/media/notifications_pattern_social_fail.png b/docs/html/design/media/notifications_pattern_social_fail.png index aa0e028..2c8fddc 100644 Binary files a/docs/html/design/media/notifications_pattern_social_fail.png and b/docs/html/design/media/notifications_pattern_social_fail.png differ diff --git a/docs/html/design/media/notifications_pattern_two_actions.png b/docs/html/design/media/notifications_pattern_two_actions.png deleted file mode 100644 index 7c19f2e..0000000 Binary files a/docs/html/design/media/notifications_pattern_two_actions.png and /dev/null differ diff --git a/docs/html/design/media/principles_decide_for_me.png b/docs/html/design/media/principles_decide_for_me.png index 8080b4e..2d8b883 100644 Binary files a/docs/html/design/media/principles_decide_for_me.png and b/docs/html/design/media/principles_decide_for_me.png differ diff --git a/docs/html/design/media/principles_error.png b/docs/html/design/media/principles_error.png index c867fe6..9376766 100644 Binary files a/docs/html/design/media/principles_error.png and b/docs/html/design/media/principles_error.png 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 d78d5c5..c5ef3ca 100644 Binary files a/docs/html/design/media/principles_information_when_need_it.png and b/docs/html/design/media/principles_information_when_need_it.png differ diff --git a/docs/html/design/media/principles_keep_it_brief.png b/docs/html/design/media/principles_keep_it_brief.png index ee7dbbb..9c2813b 100644 Binary files a/docs/html/design/media/principles_keep_it_brief.png and b/docs/html/design/media/principles_keep_it_brief.png differ diff --git a/docs/html/design/media/principles_never_lose_stuff.png b/docs/html/design/media/principles_never_lose_stuff.png index 84037d9..acbefea 100644 Binary files a/docs/html/design/media/principles_never_lose_stuff.png and b/docs/html/design/media/principles_never_lose_stuff.png differ diff --git a/docs/html/design/media/progress_activity_custom.png b/docs/html/design/media/progress_activity_custom.png deleted file mode 100644 index 2bfdd52..0000000 Binary files a/docs/html/design/media/progress_activity_custom.png and /dev/null differ diff --git a/docs/html/design/media/progress_activity_custom_app.png b/docs/html/design/media/progress_activity_custom_app.png deleted file mode 100644 index e572508..0000000 Binary files a/docs/html/design/media/progress_activity_custom_app.png and /dev/null differ diff --git a/docs/html/design/media/progress_activity_do.png b/docs/html/design/media/progress_activity_do.png deleted file mode 100644 index fd22436..0000000 Binary files a/docs/html/design/media/progress_activity_do.png and /dev/null differ diff --git a/docs/html/design/media/progress_activity_dont.png b/docs/html/design/media/progress_activity_dont.png deleted file mode 100644 index 08c4b5d..0000000 Binary files a/docs/html/design/media/progress_activity_dont.png and /dev/null differ diff --git a/docs/html/design/media/tabs_youtube.png b/docs/html/design/media/tabs_youtube.png index 4ea6c1c..69e9268 100644 Binary files a/docs/html/design/media/tabs_youtube.png and b/docs/html/design/media/tabs_youtube.png differ diff --git a/docs/html/design/media/themes_holo_dark.png b/docs/html/design/media/themes_holo_dark.png index e1f4477..0a5876a 100644 Binary files a/docs/html/design/media/themes_holo_dark.png and b/docs/html/design/media/themes_holo_dark.png differ diff --git a/docs/html/design/media/themes_holo_inverse.png b/docs/html/design/media/themes_holo_inverse.png index 528d119..50be4fb 100644 Binary files a/docs/html/design/media/themes_holo_inverse.png and b/docs/html/design/media/themes_holo_inverse.png differ diff --git a/docs/html/design/media/themes_holo_light.png b/docs/html/design/media/themes_holo_light.png index 4f34bb3..edc7f77 100644 Binary files a/docs/html/design/media/themes_holo_light.png and b/docs/html/design/media/themes_holo_light.png differ diff --git a/docs/html/design/media/ui_overview_notifications.png b/docs/html/design/media/ui_overview_notifications.png index fe4375e..bc0513f 100644 Binary files a/docs/html/design/media/ui_overview_notifications.png and b/docs/html/design/media/ui_overview_notifications.png differ diff --git a/docs/html/design/patterns/accessibility.jd b/docs/html/design/patterns/accessibility.jd deleted file mode 100644 index b2fbda9..0000000 --- a/docs/html/design/patterns/accessibility.jd +++ /dev/null @@ -1,80 +0,0 @@ -page.title=Accessibility -@jd:body - -

    One of Android's missions is to organize the world's information and make it universally accessible and useful. Accessibility is the measure of how successfully a product can be used by people with varying abilities. Our mission applies to all users-including people with disabilities such as visual impairment, color deficiency, hearing loss, and limited dexterity.

    -

    Universal design is the practice of making products that are inherently accessible to all users, regardless of ability. The Android design patterns were created in accordance with universal design principles, and following them will help your app meet basic usability standards. Adhering to universal design and enabling Android's accessibility tools will make your app as accessible as possible.

    -

    Robust support for accessibility will increase your app's user base. It may also be required for adoption by some organizations.

    -

    Learn more about Google and accessibility.

    - -

    Android's Accessibility Tools

    -

    Android includes several features that support access for users with visual impairments; they don't require drastic visual changes to your app.

    - -
      -
    • TalkBack is a pre-installed screen reader service provided by Google. It uses spoken feedback to describe the results of actions such as launching an app, and events such as notifications.
      • -
    • Explore by Touch is a system feature that works with TalkBack, allowing you to touch your device's screen and hear what's under your finger via spoken feedback. This feature is helpful to users with low vision.
      • -
    • Accessibility settings let you modify your device's display and sound options, such as increasing the text size, changing the speed at which text is spoken, and more.
      • -
    - -

    Some users use hardware or software directional controllers (such as a D-pad, trackball, keyboard) to jump from selection to selection on a screen. They interact with the structure of your app in a linear fashion, similar to 4-way remote control navigation on a television.

    - -

    Guidelines

    -

    The Android design principle "I should always know where I am" is key for accessibility concerns. As a user navigates through an application, they need feedback and a mental model of where they are. All users benefit from a strong sense of information hierarchy and an architecture that makes sense. Most users benefit from visual and haptic feedback during their navigation (such as labels, colors, icons, touch feedback) Low vision users benefit from explicit verbal descriptions and large visuals with high contrast.

    -

    As you design your app, think about the labels and notations needed to navigate your app by sound. When using Explore by Touch, the user enables an invisible but audible layer of structure in your application. Like any other aspect of app design, this structure can be simple, elegant, and robust. The following are Android's recommended guidelines to enable effective navigation for all users.

    - -

    Make navigation intuitive

    -

    Design well-defined, clear task flows with minimal navigation steps, especially for major user tasks. Make sure those tasks are navigable via focus controls.

    - -

    Use recommended touch target sizes

    -

    48 dp is the recommended touch target size for on screen elements. Read about Android Metrics and Grids to learn about implementation strategies to help most of your users. For certain users, it may be appropriate to use larger touch targets. An example of this is educational apps, where buttons larger than the minimum recommendations are appropriate for children with developing motor skills and people with manual dexterity challenges.

    - - -

    Label visual UI elements meaningfully

    -

    In your wireframes, label functional UI components that have no visible text. Those components might be buttons, icons, tabs with icons, and icons with state (like stars). Developers can use the contentDescription attribute to set the label.

    - -
    -
    - -
    -
    -
      -
    1. group
      2. -
    2. all contacts
      3. -
    3. favorites
      4. -
    4. search
      5. -
    5. action overflow button
      6. -
    6. - when starred: remove from favorites
      - when not starred: add to favorties
      7. -
    7. action overflow button
      8. -
    8. text message
      9. -
    9. video chat
      10. -
    -
    -
    - -

    Provide alternatives to affordances that time out

    -

    Your app may have icons or controls that disappear after a certain amount of time. For example, five seconds after starting a video, playback controls may fade from the screen.

    - -

    Due to the way that TalkBack works, those controls are not read out loud unless they are focused on. If they fade out from the screen quickly, your user may not even be aware that they are available. Therefore, make sure that you are not relying on timed out controls for high priority task flows. (This is a good universal design guideline too.) If the controls enable an important function, make sure that the user can turn on the controls again and/or their function is duplicated elsewhere. You can also change the behavior of your app when accessibility services are turned on. Your developer may be able to make sure that timed-out controls won't disappear.

    - -

    Use standard framework controls or enable TalkBack for custom controls

    -

    Standard Android framework controls work automatically with accessibility services and have ContentDescriptions built in by default.

    - -

    An oft-overlooked system control is font size. Users can turn on a system-wide large font size in Settings; using the default system font size in your application will enable the user's preferences in your app as well. To enable system font size in your app, mark text and their associated containers to be measured in scale pixels.

    - -

    Also, keep in mind that when users have large fonts enabled or speak a different language than you, their type might be larger than the space you've allotted for it. Read Devices and Displays and Supporting Multiple Screens for design strategies.

    - -

    If you use custom controls, Android has the developer tools in place to allow adherence to the above guidelines and provide meaningful descriptions about the UI. Provide adequate notation on your wireframes and direct your developer to the Custom Views documentation.

    - -

    Try it out yourself

    -

    Turn on the TalkBack service in Settings > Accessibility and navigate your application using directional controls or eyes-free navigation.

    - -

    Checklist

    -
      -
    • Make navigation intuitive
      • -
    • Use recommended touch target sizes
      • -
    • Label visual UI elements meaningfully
      • -
    • Provide alternatives to affordances that time out
      • -
    • Use standard framework controls or enable TalkBack for custom controls
      • -
    • Try it out yourself
      • -
    \ No newline at end of file diff --git a/docs/html/design/patterns/actionbar.jd b/docs/html/design/patterns/actionbar.jd index 80aa77d..4206301 100644 --- a/docs/html/design/patterns/actionbar.jd +++ b/docs/html/design/patterns/actionbar.jd @@ -66,7 +66,7 @@ content, such as an app title or longer branding information.

    Show the most important actions of your app in the actions section. Actions that don't fit in the -action bar are moved automatically to the action overflow. Long-press on an icon to view the action's name. +action bar are moved automatically to the action overflow.

    @@ -144,44 +144,28 @@ content of a CAB in order to insert the actions you would like the user to be ab

    For more information, refer to the Selection pattern.

    -

    View Controls

    -

    If your app displays data in different views, the action bar has three different controls to allow users to switch between them: tabs, spinners, and drawers.

    +

    Action Bar Elements

    Tabs

    -

    Tabs display app views concurrently and make it easy to explore and switch between them. Tabs may be fixed, where all tabs are simultaneously displayed, or may scroll, allowing a larger number of views to be presented.

    +

    Tabs display app views concurrently and make it easy to explore and switch between them. Use tabs +if you expect your users to switch views frequently.

    -

    Use tabs if:

    -
      -
    • You expect your app's users to switch views frequently.
      • -
    • You want the user to be highly aware of the alternate views.
      • -
    +

    There are two types of tabs: fixed and scrollable.

    -

    Fixed tabs

    -

    Fixed tabs 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.

    - -

    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.

    - -
    -
    - - -
    - Default fixed tabs shown in Holo Dark & Light. -
    - -
    -

    Scrollable tabs

    -
    -
    -

    Scrollable tabs 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.

    -

    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.

    +

    Scrollable tabs 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.

    +

    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.

    @@ -202,43 +186,44 @@ tabs. Fixed tabs in the main action bar can move to the top bar when the screen
    -

    Spinners

    -

    A spinner is a drop-down menu that allows users to switch between views of your app.

    -

    Use a spinner in the main action bar if:

    -
      -
    • You don't want to give up the vertical screen real estate for a dedicated tab bar.
      • -
    • 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).
      • -
    +

    Fixed tabs

    +

    Fixed tabs 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.

    - +
    - Action bar spinner from Calendar application. + Default fixed tabs shown in Holo Dark & Light.
    -

    Drawers

    -

    A drawer 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.

    -

    Open a drawer from the main action bar if:

    +

    Spinners

    +

    A spinner is a drop-down menu that allows users to switch between views of your app.

    +

    Use spinners rather than tabs in the main action bar if:

    • You don't want to give up the vertical screen real estate for a dedicated tab bar.
      • -
    • You want to provide direct navigation to a number of views within your app which don't have direct relationships between each other.
      • +
    • You expect your app's users to switch views infrequently.
    - + + +
    + Action bar spinner from Calendar application. +
    +
    -

    Action buttons

    +

    Action buttons

    Action buttons 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 a483522..e2398ed 100644 --- a/docs/html/design/patterns/app-structure.jd +++ b/docs/html/design/patterns/app-structure.jd @@ -185,18 +185,28 @@ collections of items. Then use multi-select to allow application of those action in a category view.

    Details

    -

    The detail view allows you to view and act on your data. The layout of the detail view depends on the data type being displayed, and therefore differs widely among apps.

    +

    The detail view allows you to view and act on your data. The layout of the detail view depends on +the data type being displayed, and therefore differs widely among apps.

    Layout

    -

    Consider the activities people will perform in the detail view and arrange the layout accordingly.

    +

    Consider the activities people will perform in the detail view and arrange the layout accordingly. +For immersive content, make use of the lights-out mode to allow for distraction-free viewing of +full-screen content.

    + +
    - + +
    + Google Books' detail view is all about replicating the experience of reading an actual book. + The page-flip animation reinforces that notion. To create an immersive experience the app + enters lights-out mode, which hides all system UI affordances. +
    The purpose of the People app's detail view is to surface communication options. The list view @@ -207,25 +217,9 @@ in a category view.

    -
    -
    - -

    Lights-out mode

    -

    Immersive content like media and games is best experienced full screen without distractions. But that doesn't mean you can't also offer actions on the content like sharing, commenting, or searching. If the user hasn't interacted with any of the controls after a short period of time, automatically fade away the action bar and all system UI affordances so the user can lean back and enjoy the content. We call this lights-out mode. Later, if the user wants to take some action, they can touch anywhere on the screen to exit lights-out mode and bring back the controls.

    - -
    -
    - - -
    - Google Books' detail view replicates the immersive experience of reading an actual book through lights-out mode and a page-flip animation. -
    -
    -
    -

    Make navigation between detail views efficient

    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 thumbnail view controls, +between items from within the detail view. Use swipe views or other techniques, such as filmstrips, to achieve this.

    @@ -235,8 +229,8 @@ to achieve this.

    - 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. + 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.

    Checklist

    diff --git a/docs/html/design/patterns/confirming-acknowledging.jd b/docs/html/design/patterns/confirming-acknowledging.jd deleted file mode 100644 index 28e4427..0000000 --- a/docs/html/design/patterns/confirming-acknowledging.jd +++ /dev/null @@ -1,76 +0,0 @@ -page.title=Confirming & Acknowledging -@jd:body - -

    In some situations, when a user invokes an action in your app, it's a good idea to confirm or acknowledge that action through text.

    - -
    -
    - -

    Confirming is asking the user to verify that they truly want to proceed with an action they just invoked. In some cases, the confirmation is presented along with a warning or critical information related to the action that they need to consider.

    -
    -
    - -

    Acknowledging is displaying text to let the user know that the action they just invoked has been completed. This removes uncertainty about implicit operations that the system is taking. In some cases, the acknowledgment is presented along with an option to undo the action.

    -
    -
    - -

    Communicating to users in these ways can help alleviate uncertainty about things that have happened or will happen. Confirming or acknowledging can also prevent users from making mistakes they might regret.

    - -

    When to Confirm or Acknowledge User Actions

    -

    Not all actions warrant a confirmation or an acknowledgment. Use this flowchart to guide your design decisions.

    - - -

    Confirming

    -
    -
    - -

    Example: Google Play Books

    -

    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.

    -

    When crafting a confirmation dialog, make the title meaningful by echoing the requested action.

    - -
      -
    • Don't

      Are you sure?

      • -
    • Don't

      Warning!

      • -
    • Do

      Delete from library?

      • -
    - -
    -
    - -

    Example: Android Beam

    -

    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.

    -
    -
    - -

    Acknowledging

    -
    -
    - -

    Example: Abandoned Gmail draft saved

    -

    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.

    -

    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.

    - -
    -
    - -

    Example: Gmail conversation deleted

    -

    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.

    -
    -
    - -

    No Confirmation or Acknowledgment

    -
    -
    - -

    Example: Removing an app from the Home Screen

    -

    Confirmation is unnecessary. 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.

    -

    Acknowledgment is unnecessary. The user will know the app is gone from the Home Screen because they made it disappear by dragging it away.

    - -
    -
    - -

    Example: +1'ing

    -

    Confirmation is unnecessary. If the user +1'd by accident, it's not a big deal. They can just touch the button again to undo the action.

    -

    Acknowledgment is unnecessary. The user will see the +1 button bounce and turn red. That's a very clear signal.

    -
    -
    \ No newline at end of file diff --git a/docs/html/design/patterns/help.jd b/docs/html/design/patterns/help.jd deleted file mode 100644 index e42ea26..0000000 --- a/docs/html/design/patterns/help.jd +++ /dev/null @@ -1,114 +0,0 @@ -page.title=Help -@jd:body - -

    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.

    - -

    Some of your users will run into questions or problems along the way. They'll be looking for answers within your app, and if they don't find them quickly, they may leave and never come back.

    - -

    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.

    - -

    Designing Help into Your App

    - -

    Don't show unsolicited help, except in very limited cases

    -

    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.

    -

    In almost all cases, we advise against approaches like these because:

    -
      -
    • They're interruptions. 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.
      • -
    • They're usually not necessary. 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.
      • -
    -

    The only reason for showing pure help content to new users unsolicited is:
    -To teach high value functionality that's only available through an atypical use of a gesture.

    - -

    For example, we use help content to teach users how to place apps on their Home Screen. This functionality is:

    -
    -
    -
      -
    1. High value -

      Without it, users wouldn't be able to customize the most frequently-visited Android screen to meet their needs.

      2. -
    2. Available only through a gesture -

      Users can't do this through a button or a menu.

      3. -
    3. Atypical for the gesture -

      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.

      4. -
    -

    However, this is an exceptional case. Most functionality doesn't meet all three of these criteria.

    -
    -
    - -
    - The first time each user visits the All Apps screen, a semi-transparent overlay appears to teach an important gesture. -
    -
    -

    Bottom line: when it comes to offering help in your app, it's much better to let users come to you when they need it.

    -
    - -

    Follow the standard design for navigating to help

    - -

    On every screen in your app, offer help in the action overflow. Always make it the very last item in the menu and label it "Help".

    - -
    -
    - -
    -
    - -
    - Even if your screen has no other action overflow items, "Help" should appear there and not be promoted to the action bar. -
    -
    -

    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: Give me tricks that work everywhere).

    -
    - -

    Assume that every call for help is urgent

    - -

    In addition to help, you might want to expose miscellaneous other information, such as copyright info, credits, terms of service, and privacy policy.

    - -

    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.

    - -

    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.

    - -

    When someone chooses "Help":

    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -

    Don't

    -

    Present a dialog asking them to choose between help and other options.

    -
    -
    -

    Better

    -

    Immediately launch a web browser with help content. Place other options in a footer.

    -
    -
    -

    Even Better

    -

    Build a help screen in your app and offer other options in the action bar.

    -

    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.

    -
    -
    - -

    Principles for Writing On-Screen Help Content

    - -

    Help is part of the UI

    -

    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 Writing Style principles so that the end-to-end experience feels seamless and cohesive.

    - -

    Make every pixel count

    -

    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.

    - -

    Pictures are faster than words

    -

    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.

    - -

    Help me scan, not read

    -

    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.

    - -

    Take me straight to the answer

    -

    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 contextual help, 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.

    \ No newline at end of file diff --git a/docs/html/design/patterns/multi-pane-layouts.jd b/docs/html/design/patterns/multi-pane-layouts.jd index f752be2..0e63e32 100644 --- a/docs/html/design/patterns/multi-pane-layouts.jd +++ b/docs/html/design/patterns/multi-pane-layouts.jd @@ -26,8 +26,8 @@ left pane. Make sure to keep the item in the left pane selected in order to esta relationship between the panels.

    Compound Views and Orientation Changes

    -

    Screens should strive to have the same functionality regardless of orientation. If you use a compound view in -one orientation, try not to split it up when the user rotates the screen. There are several techniques +

    Screens should have the same functionality regardless of orientation. If you use a compound view in +one orientation, don't split it up when the user rotates the screen. There are several techniques you can use to adjust the layout after orientation change while keeping functional parity intact.

    @@ -83,7 +83,9 @@ width and vice versa.

    Show/hide

    -

    If your screen cannot accommodate the compound view on rotation show the right pane in full screen view on rotation to portrait. Use the Up icon in action bar to show the parent screen.

    +

    After rotating the device, show the right pane in fullscreen view. Use the Up icon in the action bar +to show the left panel and allow navigation to a different email. Hide the left panel by touching +the content in the detail panel.

    @@ -102,7 +104,7 @@ width and vice versa.

    Look for opportunities to consolidate your views into multi-panel compound views.

  • -

    Make sure that your screens try to provide functional parity after the screen orientation +

    Make sure that your screens provide functional parity after the screen orientation changes.

    • diff --git a/docs/html/design/patterns/new-4-0.jd b/docs/html/design/patterns/new-4-0.jd new file mode 100644 index 0000000..91ebba7 --- /dev/null +++ b/docs/html/design/patterns/new-4-0.jd @@ -0,0 +1,71 @@ +page.title=New in Android 4.0 +@jd:body + +
    +
    + +

    Navigation bar

    +

    Android 4.0 removes the need for traditional hardware keys on phones by replacing them with a +virtual navigation bar that houses the Back, Home and Recents buttons. Read the +Compatibility pattern to learn how the OS adapts to +phones with hardware buttons and how pre-Android 3.0 apps that rely on menu keys are supported.

    + +
    +
    + + + +
    +
    + +
     
    + +
    +
    + +

    Action bar

    +

    The action bar is the most important structural element of an Android app. It provides consistent +navigation across the platform and allows your app to surface actions.

    + +
    +
    + + + +
    +
    + +
     
    + +
    +
    + +

    Multi-pane layouts

    +

    Creating apps that scale well across different form factors and screen sizes is important in the +Android world. Multi-pane layouts allow you to combine different activities that show separately on +smaller devices into richer compound views for tablets.

    + +
    +
    + + + +
    +
    + +
     
    + +
    +
    + +

    Selection

    +

    The long press gesture which was traditionally used to show contextual actions for objects is now +used for data selection. When selecting data, contextual action bars allow you to surface actions.

    + +
    +
    + + + +
    +
    diff --git a/docs/html/design/patterns/new.jd b/docs/html/design/patterns/new.jd deleted file mode 100644 index 1fc4987..0000000 --- a/docs/html/design/patterns/new.jd +++ /dev/null @@ -1,114 +0,0 @@ -page.title=New in Android -@jd:body - -

    Jelly Bean - Android 4.1

    - -

    Notifications

    -
    -
    -

    Notifications have received some notable enhancements in Android 4.1:

    -
      -
    • Users can act on notifications immediately from the drawer
      • -
    • Notifications are more flexible in size and layout
      • -
    • A priority flag helps sort notifications by importance
      • -
    • Notifications can be collapsed and expanded
      • -
    - -

    The base notification layout has not changed, so app notifications designed for versions earlier than Jelly Bean still look and work the same. Check the updated Notifications page for more details.

    -
    -
    - -
    -
    - -
     
    - -

    Resizable Application Widgets

    -
    -
    -

    Widgets are an essential aspect of home screen customization, allowing "at-a-glance" views of an app's most important data and functionality right from the user's home screen. Android 4.1 introduces improved App Widgets that can automatically resize and load different content based upon a number of factors including:

    -
      -
    • Where the user drops them on the home screen
      • -
    • The size to which the user expands them
      • -
    • The amount of room available on the home screen
      • -
    - -

    You can supply separate landscape and portrait layouts for your widgets, which the system inflates as appropriate when the screen orientation changes. The Application Widgets has useful details about widget types, limitations, and design considerations.

    -
    -
    - -
    -
    - -
     
    - -

    Accessibility

    -
    -
    -

    One of Android's missions is to organize the world's information and make it universally accessible and useful. Our mission applies to all users-including people with disabilities such as visual impairment, color deficiency, hearing loss, and limited dexterity.

    -

    The new Accessibility page provides details on how to design your app to be as accessible as possible by:

    -
      -
    • Making navigation intuitive
      • -
    • Using recommended touch target sizes
      • -
    • Labeling visual UI elements meaningfully
      • -
    • Providing alternatives to affordances that time out
      • -
    • Using standard framework controls or enable TalkBack for custom controls
      • -
    • Trying it out yourself
      • -
    - -

    You can supply separate landscape and portrait layouts for your widgets, which the system inflates as appropriate when the screen orientation changes. The [Application Widgets] (should be link) has useful details about widget types, limitations, and design considerations.

    -
    -
    - -
    -
    - -

    Ice Cream Sandwich - Android 4.0

    - -

    Navigation bar

    -
    -
    -

    Android 4.0 removes the need for traditional hardware keys on phones by replacing them with a - virtual navigation bar that houses the Back, Home and Recents buttons. Read the Compatibility pattern to learn how the OS adapts to phones with hardware buttons and how pre-Android 3.0 apps that rely on menu keys are supported.

    -
    -
    - -
    -
    - -
     
    - -

    Action bar

    -
    -
    -

    The action bar is the most important structural element of an Android app. It provides consistent navigation across the platform and allows your app to surface actions.

    -
    -
    - -
    -
    - -
     
    - -

    Multi-pane layouts

    -
    -
    -

    Creating apps that scale well across different form factors and screen sizes is important in the Android world. Multi-pane layouts allow you to combine different activities that show separately on smaller devices into richer compound views for tablets.

    -
    -
    - -
    -
    - -
     
    - -

    Selection

    - -
    -
    -

    The long press gesture which was traditionally used to show contextual actions for objects is now used for data selection. When selecting data, contextual action bars allow you to surface actions.

    -
    -
    - -
    -
    diff --git a/docs/html/design/patterns/notifications.jd b/docs/html/design/patterns/notifications.jd index fbb05e3..ad88a01 100644 --- a/docs/html/design/patterns/notifications.jd +++ b/docs/html/design/patterns/notifications.jd @@ -1,164 +1,11 @@ page.title=Notifications @jd:body -

    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.

    - -

    New in Jelly Bean

    -

    In Jelly Bean, notifications received their most important structural and functional update since the beginning of Android.

    -
      -
    • Notifications can include actions that enable the user to immediately act on a notification from the notification drawer.
      • -
    • Notifications are now more flexible in size and layout.
      • -
    • Stacked notifications can be collapsed and expanded.
      • -
    • A priority flag was introduced that helps to sort notifications by importance rather than time only.
      • -
    - -

    Anatomy of a notification

    - -
    -
    -

    Base Layout

    -

    At a minimum, all notifications consist of a base layout, including:

    -
      -
    • the sending application's notification icon or the sender's photo
      • -
    • a notification title and message
      • -
    • an optional timestamp
      • -
    • a secondary icon to identify the sending application when the sender's image is shown for the main icon
      • -
    -

    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.

    -
    -
    - -
    - Base layout of a notification -
    -
    -
    - -

    Expanded layouts

    -

    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.

    - - - -

    Actions

    -
    -
    -

    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.

    -

    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.

    -

    Good candidates for actions on notifications are actions that are:

    -
      -
    • essential, frequent and typical for the content type you're displaying
      • -
    • time-critical
      • -
    • not overlapping with neighboring actions
      • -
    -

    Avoid actions that are:

    -
      -
    • ambiguous
      • -
    • implicit to the default action of the notification (such as "Read" or "Open")
      • -
    -
    -
    - -
    - Calendar reminder notification with two actions -
    -
    -
    - -

    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.

    - -

    Design guidelines

    -
    -
    - -
    -
    -

    Make it personal

    -

    For notifications of items sent by another user (such as a message or status update), include that person's image.

    -

    Remember to include the app icon as a secondary icon in the notification, so that the user can still identify which app posted it.

    -
    -
    - -

    Navigate to the right place

    -

    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 Stacked notifications 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 System-to-app navigation in the -Navigation design pattern.

    -

    Timestamps for time sensitive events

    -

    By default, standard Android notifications include a timestamp. Consider -whether the timestamp is valuable in the context of your notification.

    -

    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.

    - -

    Correctly set and manage notification priority

    -

    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:

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    PriorityUse
    MAXUse 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.
    HIGHUse high priority notifications primarily for important communication, such as message or chat events with content that is particularly interesting for the user.
    DEFAULTThe default priority. Keep all notifications that don't fall into any of the other categories at this priority level.
    LOWUse for notifications that you still want the user to be informed about, but that rate low in urgency.
    MINContextual/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.
    - -

    Stack your notifications

    -

    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.

    -

    A stacked notification builds a summary description and allows the user to understand how many -notifications of a particular kind are pending.

    -

    Don't:

    - - - -

    Do:

    - - - -

    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.

    - - - -

    Make notifications optional

    -

    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.

    -

    Use distinct icons

    -

    By glancing at the notification area, the user should be able to discern what notification types are -currently pending.

    -

    Do:

    -

    Look at the notification icons the Android apps already provide and create notification icons for - your app that are sufficiently distinct in appearance.

    -

    Don't:

    -

    Use color to distinguish your app from others. Notification icons should be white.

    - -

    Building notifications that users care about

    -

    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.

    - +

    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.

    +

    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.

    When to display a notification

    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 @@ -219,10 +66,108 @@ develop a widget that they can choose to place on their home screen.

    + + +
    +
    + +

    Design Guidelines

    + +
    +
    + + + +
    +
    + +

    Make it personal

    +

    For notifications of items sent by another user (such as a message or status update), include that +person's image.

    +

    Remember to include the app icon as a secondary icon in the notification, so that the user can +still identify which app posted it.

    + +
    +
    + +

    Navigate to the right place

    +

    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 Stacked notifications 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 System-to-app navigation in the +Navigation design pattern.

    +

    Timestamps for time sensitive events

    +

    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.

    +

    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.

    +

    Stack your notifications

    +

    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.

    +

    A stacked notification builds a summary description and allows the user to understand how many +notifications of a particular kind are pending.

    +

    Don't:

    + + + +

    Do:

    + + + +

    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.

    +

    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.

    +

    Clean up after yourself

    +

    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.

    + +
     
    + +
    +
    + +

    Provide a peek into your notification

    +

    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.

    + +
    +
    + + +
    +

    Make notifications optional

    +

    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.

    +

    Use distinct icons

    +

    By glancing at the notification area, the user should be able to discern what notification types are +currently pending.

    +

    Do:

    +
      +
    • Look at the notification icons the Android apps already provide and create notification icons for + your app that are sufficiently distinct in appearance.
      • +
    +

    Don't:

    +
      +
    • Use color to distinguish your app from others. Notification icons should generally be monochrome.
      • +
    +

    Interacting With Notifications

    diff --git a/docs/html/design/patterns/swipe-views.jd b/docs/html/design/patterns/swipe-views.jd index b98a063..95d65dd 100644 --- a/docs/html/design/patterns/swipe-views.jd +++ b/docs/html/design/patterns/swipe-views.jd @@ -65,9 +65,6 @@ using the swipe gesture to navigate to the next/previous detail view.

    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.

    -
    • -

  • Consider adding contextual information in your detail view that informs the user about the relative list position of the currently visible item.

    • -- cgit v1.1