Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 1 | page.title=Dialogs |
Scott Main | 36c27c4 | 2013-03-18 14:52:45 -0700 | [diff] [blame] | 2 | page.tags="dialog","alert","popup","toast" |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 3 | @jd:body |
| 4 | |
Scott Main | cbcd17d | 2013-05-14 08:46:55 -0700 | [diff] [blame] | 5 | <a class="notice-developers" href="{@docRoot}guide/topics/ui/dialogs.html"> |
| 6 | <div> |
| 7 | <h3>Developer Docs</h3> |
| 8 | <p>Dialogs</p> |
| 9 | </div> |
| 10 | </a> |
| 11 | |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 12 | <p>Dialogs prompt the user for decisions or additional information required by the app to continue a |
| 13 | task. Such requests can range from simple Cancel/OK decisions to more complex layouts asking the |
| 14 | user to adjust settings or enter text.</p> |
| 15 | |
| 16 | <img src="{@docRoot}design/media/dialogs_main.png"> |
| 17 | |
| 18 | <div class="with-callouts"> |
| 19 | |
| 20 | <ol> |
Peter Ng | 252d23d | 2012-08-07 20:19:10 -0700 | [diff] [blame] | 21 | <li> |
| 22 | <h4>Optional title region</h4> |
| 23 | <p>The title introduces the content of your dialog. It can, for example, identify the name of a |
| 24 | setting that the user is about to change, or request a decision.</p> |
| 25 | </li> |
| 26 | <li> |
| 27 | <h4>Content area</h4> |
| 28 | <p>Dialog content varies widely. For settings dialogs, a dialog may contain UI elements such as |
| 29 | sliders, text fields, checkboxes, or radio buttons that allow the user to change app or system |
| 30 | settings. In other cases, such as alerts, the content may consist solely of text that provides |
| 31 | further context for a user decision.</p> |
| 32 | </li> |
Scott Main | c950641 | 2012-08-01 15:51:29 -0700 | [diff] [blame] | 33 | |
Peter Ng | 252d23d | 2012-08-07 20:19:10 -0700 | [diff] [blame] | 34 | <li> |
| 35 | <h4>Action buttons</h4> |
| 36 | <p>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:</p> |
| 37 | <ul> |
| 38 | |
| 39 | <li>The dismissive action of a dialog is always on the left. Dismissive actions return to the user to the previous state.</li> |
| 40 | <li>The affirmative actions are on the right. Affirmative actions continue progress toward the user goal that triggered the dialog.</li> |
| 41 | </ul> |
| 42 | </li> |
| 43 | </ol> |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 44 | </div> |
| 45 | |
| 46 | <img src="{@docRoot}design/media/dialogs_examples.png"> |
| 47 | <div class="figure-caption"> |
| 48 | Samples of typical dialog use in Android. |
| 49 | </div> |
| 50 | |
| 51 | <h2 id="alerts">Alerts</h2> |
| 52 | |
| 53 | <p>Alerts inform the user about a situation that requires their confirmation or acknowledgement before |
| 54 | proceeding. They differ slightly in appearance based upon the severity and impact of the message |
| 55 | conveyed.</p> |
| 56 | |
| 57 | <div class="layout-content-row"> |
| 58 | <div class="layout-content-col span-8"> |
| 59 | |
| 60 | <img src="{@docRoot}design/media/dialogs_w_no_title.png"> |
| 61 | |
| 62 | </div> |
| 63 | <div class="layout-content-col span-5"> |
| 64 | |
| 65 | <h4>Alerts without title bars</h4> |
| 66 | <p>Most alerts don't need titles. Usually the decision doesn't have a severe impact and can be summed |
| 67 | up succinctly in a sentence or two. The content area should either ask a question (such as "Delete |
| 68 | this conversation?") or make a clear statement whose relationship to the action buttons is obvious.</p> |
| 69 | |
| 70 | </div> |
| 71 | </div> |
| 72 | |
| 73 | |
| 74 | <div class="layout-content-row"> |
| 75 | <div class="layout-content-col span-8"> |
| 76 | |
| 77 | <img src="{@docRoot}design/media/dialogs_w_title.png"> |
| 78 | |
| 79 | </div> |
| 80 | <div class="layout-content-col span-5"> |
| 81 | |
| 82 | <h4>Alerts with title bars</h4> |
| 83 | <p>Use alerts with title bars sparingly. They are appropriate only when a high-risk operation involving |
| 84 | potential loss of data, connectivity, extra charges, and so on requires a clear question or |
| 85 | statement (the title) and some additional explanation (in the content area).</p> |
| 86 | <p>Keep the question or statement short: for example, "Erase USB storage?" Avoid apologies. A user |
| 87 | should be able to skip the content completely and still have a clear idea of what choices are |
| 88 | available based on the title and the text of the action buttons.</p> |
| 89 | |
| 90 | </div> |
| 91 | </div> |
Peter Ng | 0212363 | 2012-08-06 11:44:48 -0700 | [diff] [blame] | 92 | <p>When crafting a confirmation dialog, make the title meaningful by echoing the requested action.</p> |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 93 | |
Peter Ng | 0212363 | 2012-08-06 11:44:48 -0700 | [diff] [blame] | 94 | <div class="layout-content-row"> |
| 95 | <div class="layout-content-col span-4"> |
| 96 | <div class="do-dont-label bad">Don't</div> |
| 97 | <table class="ui-table bad"> |
| 98 | <thead> |
| 99 | <tr> |
| 100 | <th class="label"> |
| 101 | Are you sure? |
| 102 | </th> |
| 103 | </tr> |
| 104 | </thead> |
| 105 | </table> |
| 106 | </div> |
| 107 | <div class="layout-content-col span-4"> |
| 108 | <div class="do-dont-label bad">Don't</div> |
| 109 | <table class="ui-table bad"> |
| 110 | <thead> |
| 111 | <tr> |
| 112 | <th class="label"> |
| 113 | Warning! |
| 114 | </th> |
| 115 | </tr> |
| 116 | </thead> |
| 117 | </table> |
| 118 | </div> |
| 119 | <div class="layout-content-col span-5"> |
| 120 | <div class="do-dont-label good">Do</div> |
| 121 | <table class="ui-table good"> |
| 122 | <thead> |
| 123 | <tr> |
| 124 | <th class="label"> |
| 125 | Erase USB storage? |
| 126 | </th> |
| 127 | </tr> |
| 128 | </thead> |
| 129 | </table> |
| 130 | </div> |
| 131 | </div> |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 132 | |
Scott Main | d4cc942 | 2012-10-03 18:47:08 -0700 | [diff] [blame] | 133 | |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 134 | <h2 id="popups">Popups</h2> |
| 135 | |
| 136 | <p>Popups are lightweight version of dialogs that require a single selection from the user. Popups |
| 137 | don't have have explicit buttons that accept or cancel the operation. Instead, making a selection |
| 138 | advances the workflow, and simply touching outside the popup dismisses it.</p> |
| 139 | |
| 140 | <img src="{@docRoot}design/media/dialogs_popups_example.png"> |
| 141 | |
| 142 | |
| 143 | <h2 id="toasts">Toasts</h2> |
| 144 | |
| 145 | |
| 146 | <div class="layout-content-row"> |
| 147 | <div class="layout-content-col span-6"> |
| 148 | |
Scott Main | cbcd17d | 2013-05-14 08:46:55 -0700 | [diff] [blame] | 149 | <div class="vspace size-3"></div> |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 150 | |
| 151 | <p>Toasts provide lightweight feedback about an operation in a small popup. For example, navigating |
| 152 | away from an email before you send it triggers a "Draft saved" toast to let you know that you can |
| 153 | continue editing later. Toasts automatically disappear after a timeout.</p> |
| 154 | |
Scott Main | cbcd17d | 2013-05-14 08:46:55 -0700 | [diff] [blame] | 155 | <a class="notice-developers left" href="{@docRoot}guide/topics/ui/notifiers/toasts.html"> |
| 156 | <div> |
| 157 | <h3>Developer Docs</h3> |
| 158 | <p>Toasts</p> |
| 159 | </div> |
| 160 | </a> |
| 161 | |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 162 | </div> |
| 163 | <div class="layout-content-col span-7"> |
| 164 | |
| 165 | <img src="{@docRoot}design/media/dialogs_toasts.png"> |
| 166 | |
| 167 | </div> |
| 168 | </div> |
Scott Main | d4cc942 | 2012-10-03 18:47:08 -0700 | [diff] [blame] | 169 | |