Roman Nurik | b20f120 | 2012-03-29 13:28:13 -0700 | [diff] [blame] | 1 | page.title=Settings |
Scott Main | 64d5103 | 2013-04-12 14:00:30 -0700 | [diff] [blame] | 2 | page.tags="preferences","sharedpreferences" |
Roman Nurik | b20f120 | 2012-03-29 13:28:13 -0700 | [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/settings.html"> |
| 6 | <div> |
| 7 | <h3>Developer Docs</h3> |
| 8 | <p>Settings</p> |
| 9 | </div> |
| 10 | </a> |
| 11 | |
Roman Nurik | b20f120 | 2012-03-29 13:28:13 -0700 | [diff] [blame] | 12 | <p>Settings is a place in your app where users indicate their preferences for how your app should |
| 13 | behave. This benefits users because:</p> |
| 14 | |
| 15 | <ul> |
| 16 | <li>You don't need to interrupt them with the same questions over and over when certain situations |
| 17 | arise. The settings predetermine what will always happen in those situations (see design |
| 18 | principle: <a href="{@docRoot}design/get-started/principles.html#decide-for-me">Decide for me but |
| 19 | let me have the final say</a>).</li> |
| 20 | <li>You help them feel at home and in control (see design principle: |
| 21 | <a href="{@docRoot}design/get-started/principles.html#make-it-mine">Let me make it mine</a>).</li> |
| 22 | </ul> |
| 23 | |
| 24 | <h2 id="flow-structure">Flow and Structure</h2> |
| 25 | |
| 26 | <h4 id="settings-access">Provide access to Settings in the action overflow</h4> |
| 27 | |
| 28 | <p>Settings is given low prominence in the UI because it's not frequently needed. Even if there's |
| 29 | room in the <a href="{@docRoot}design/patterns/actionbar.html">action bar</a>, never make Settings |
| 30 | an action button. Always keep it in the action overflow and label it "Settings". Place it below |
| 31 | all other items except "Help".</p> |
| 32 | |
| 33 | <img src="{@docRoot}design/media/settings_overflow.png"> |
| 34 | |
| 35 | <div class="vspace size-2"> </div> |
| 36 | |
| 37 | <h4 id="what-to-make-a-setting">Avoid the temptation to make everything a setting</h4> |
| 38 | |
| 39 | <p>Because Settings is a few navigational steps away, no matter how many items you have, they'll |
| 40 | never clutter up the core part of your UI. This may seem like good news, but it also poses a |
| 41 | challenge.</p> |
| 42 | |
| 43 | <p>Settings can be a tempting place to keep a lot of stuff—like a hall closet where things |
| 44 | get stashed when you tidy up before company comes over. It's not a place where you spend lots of |
| 45 | time, so it's easy to rationalize and ignore its cluttered condition. But when users visit |
| 46 | Settings—however infrequently—they'll have the same expectations for the experience as |
| 47 | they do everywhere else in your app. More settings means more choices to make, and too many are |
| 48 | overwhelming.</p> |
| 49 | |
| 50 | <p>So don't punt on the difficult product decisions and debates that can bring on the urge to |
| 51 | "just make it a setting". For each control you're considering adding to Settings, make sure it |
| 52 | meets the bar:</p> |
| 53 | |
| 54 | <img src="{@docRoot}design/media/settings_flowchart.png"> |
| 55 | |
| 56 | <div class="vspace size-3"> </div> |
| 57 | |
| 58 | <div class="layout-content-row"> |
| 59 | <div class="layout-content-col span-5 with-callouts"> |
| 60 | |
| 61 | <h4 id="group-settings">If you still have lots of settings, group related settings together</h4> |
| 62 | |
| 63 | <p>The number of items an average human can hold in short-term memory is 7±2. If you |
| 64 | present a list of 10 or more settings (even after applying the criteria above), users will have |
| 65 | more difficulty scanning, comprehending, and processing them.</p> |
| 66 | |
| 67 | <p>You can remedy this by dividing some or all of the settings into groups, effectively turning |
| 68 | one long list into multiple shorter lists. A group of related settings can be presented in one of |
| 69 | two ways:</p> |
| 70 | |
| 71 | <ol> |
| 72 | <li><h4>Under a section divider</h4></li> |
| 73 | <li><h4>In a separate subscreen</h4></li> |
| 74 | </ol> |
| 75 | |
| 76 | <p>You can use one or both these grouping techniques to organize your app's settings.</p> |
| 77 | |
| 78 | <p>For example, in the main screen of the Android Settings app, each item in the list navigates |
| 79 | to a subscreen of related settings. In addition, the items themselves are grouped under section |
| 80 | dividers.</p> |
| 81 | |
| 82 | </div> |
| 83 | <div class="layout-content-col span-8"> |
| 84 | |
| 85 | <img src="{@docRoot}design/media/settings_grouping.png"> |
| 86 | |
| 87 | </div> |
| 88 | </div> |
| 89 | |
| 90 | <p>Grouping settings is not an exact science, but here's some advice for how to approach it, based |
| 91 | on the total number of settings in your app.</p> |
| 92 | |
| 93 | <div class="vspace size-1"> </div> |
| 94 | |
| 95 | <div class="layout-content-row"> |
| 96 | <div class="layout-content-col span-2"> |
| 97 | |
| 98 | <h4>7 or fewer</h4> |
| 99 | |
| 100 | </div> |
| 101 | <div class="layout-content-col span-11"> |
| 102 | |
| 103 | <p>Don't group them at all. It won't benefit users and will seem like overkill.</p> |
| 104 | |
| 105 | </div> |
| 106 | </div> |
| 107 | |
| 108 | <div class="layout-content-row"> |
| 109 | <div class="layout-content-col span-2"> |
| 110 | |
| 111 | <h4>8 to 10</h4> |
| 112 | |
| 113 | </div> |
| 114 | <div class="layout-content-col span-11"> |
| 115 | |
| 116 | <p>Try grouping related settings under 1 or 2 section dividers. If you have any "singletons" |
| 117 | (settings that don't relate to any other settings and can't be grouped under your section |
| 118 | dividers), treat them as follows:</p> |
| 119 | |
| 120 | <ul> |
| 121 | <li>If they include some of your most important settings, list them at the top without a section |
| 122 | divider.</li> |
| 123 | <li>Otherwise, list them at the bottom with a section divider called "OTHER", in order of |
| 124 | importance.</li> |
| 125 | </ul> |
| 126 | |
| 127 | </div> |
| 128 | </div> |
| 129 | |
| 130 | <div class="layout-content-row"> |
| 131 | <div class="layout-content-col span-2"> |
| 132 | |
| 133 | <h4>11 to 15</h4> |
| 134 | |
| 135 | </div> |
| 136 | <div class="layout-content-col span-11"> |
| 137 | |
| 138 | <p>Same advice as above, but try 2 to 4 section dividers.</p> |
| 139 | |
| 140 | <p>Also, try the following to reduce the list:</p> |
| 141 | |
| 142 | <ul> |
| 143 | <li>If 2 or more of the settings are mainly for power users, move them out of your main Settings |
| 144 | screen and into an "Advanced" subscreen. Place an item in the action overflow called "Advanced" to |
| 145 | navigate to it.</li> |
| 146 | <li>Look for "doubles": two settings that relate to one another, but not to any other settings. |
| 147 | Try to combine them into one setting, using the design patterns described later in this section. |
| 148 | For example, you might be able to redesign two related checkbox settings into one multiple choice |
| 149 | setting.</li> |
| 150 | </ul> |
| 151 | |
| 152 | </div> |
| 153 | </div> |
| 154 | |
| 155 | <div class="layout-content-row"> |
| 156 | <div class="layout-content-col span-2"> |
| 157 | |
| 158 | <h4>16 or more</h4> |
| 159 | |
| 160 | </div> |
| 161 | <div class="layout-content-col span-11"> |
| 162 | |
| 163 | <p>If you have any instances of 4 or more related settings, group them under a subscreen. Then use |
| 164 | the advice suggested above for the reduced list size.</p> |
| 165 | |
| 166 | </div> |
| 167 | </div> |
| 168 | |
| 169 | |
| 170 | <h2 id="patterns">Design Patterns</h2> |
| 171 | |
| 172 | <div class="layout-content-row"> |
| 173 | <div class="layout-content-col span-3"> |
| 174 | |
| 175 | <h4>Checkbox</h4> |
| 176 | <p>Use this pattern for a setting that is either selected or not selected.</p> |
| 177 | |
| 178 | </div> |
| 179 | <div class="layout-content-col span-10"> |
| 180 | |
| 181 | <img src="{@docRoot}design/media/settings_checkbox.png"> |
| 182 | |
| 183 | </div> |
| 184 | </div> |
| 185 | |
| 186 | <div class="layout-content-row"> |
| 187 | <div class="layout-content-col span-3"> |
| 188 | |
| 189 | <h4>Multiple choice</h4> |
| 190 | <p>Use this pattern for a setting that needs to present a discrete set of options, from which the |
| 191 | user can choose only one.</p> |
| 192 | |
| 193 | </div> |
| 194 | <div class="layout-content-col span-10"> |
| 195 | |
| 196 | <img src="{@docRoot}design/media/settings_multiple_choice.png"> |
| 197 | |
| 198 | </div> |
| 199 | </div> |
| 200 | |
| 201 | <div class="layout-content-row"> |
| 202 | <div class="layout-content-col span-3"> |
| 203 | |
| 204 | <h4>Slider</h4> |
| 205 | <p>Use this pattern for a setting where the range of values are not discrete and fall along a |
| 206 | continuum.</p> |
| 207 | |
| 208 | </div> |
| 209 | <div class="layout-content-col span-10"> |
| 210 | |
| 211 | <img src="{@docRoot}design/media/settings_slider.png"> |
| 212 | |
| 213 | </div> |
| 214 | </div> |
| 215 | |
| 216 | <div class="layout-content-row"> |
| 217 | <div class="layout-content-col span-3"> |
| 218 | |
| 219 | <h4>Date/time</h4> |
| 220 | <p>Use this pattern for a setting that needs to collect a date and/or time from the user.</p> |
| 221 | |
| 222 | </div> |
| 223 | <div class="layout-content-col span-10"> |
| 224 | |
| 225 | <img src="{@docRoot}design/media/settings_date_time.png"> |
| 226 | |
| 227 | </div> |
| 228 | </div> |
| 229 | |
| 230 | <div class="layout-content-row"> |
| 231 | <div class="layout-content-col span-3"> |
| 232 | |
| 233 | <h4>Subscreen navigation</h4> |
| 234 | <p>Use this pattern for navigating to a subscreen or sequence of subscreens that guide the user |
| 235 | through a more complex setup process.</p> |
| 236 | <ul> |
| 237 | <li>If navigating to a single subscreen, use the same title in both the subscreen and the label |
| 238 | navigating to it.</li> |
| 239 | <li>If navigating to a sequence of subscreens (as in this example), use a title that describes the |
| 240 | first step in the sequence.</li> |
| 241 | </ul> |
| 242 | |
| 243 | </div> |
| 244 | <div class="layout-content-col span-10"> |
| 245 | |
| 246 | <img src="{@docRoot}design/media/settings_subscreen_navigation.png"> |
| 247 | |
| 248 | </div> |
| 249 | </div> |
| 250 | |
| 251 | <div class="layout-content-row"> |
| 252 | <div class="layout-content-col span-3"> |
| 253 | |
| 254 | <h4>List subscreen</h4> |
| 255 | <p>Use this pattern for a setting or category of settings that contains a list of equivalent items. |
| 256 | </p> |
| 257 | <p>The label provides the name of the item, and secondary text may be used for status. (In this |
| 258 | example, status is reinforced with an icon to the right of the label.) Any actions associated with |
| 259 | the list appear in the action bar rather than the list itself.</p> |
| 260 | |
| 261 | </div> |
| 262 | <div class="layout-content-col span-10"> |
| 263 | |
| 264 | <img src="{@docRoot}design/media/settings_list_subscreen.png"> |
| 265 | |
| 266 | </div> |
| 267 | </div> |
| 268 | |
| 269 | <div class="layout-content-row"> |
| 270 | <div class="layout-content-col span-3"> |
| 271 | |
| 272 | <h4>Master on/off switch</h4> |
| 273 | <p>Use this pattern for a category of settings that need a mechanism for turning on or off as a |
| 274 | whole.</p> |
| 275 | <p>An on/off switch is placed as the first item in the action bar of a subscreen. When the switch |
| 276 | is turned off, the items in the list disappear, replaced by text that describes why the list is |
| 277 | empty. If any actions require the switch to be on, they become disabled.</p> |
| 278 | |
| 279 | </div> |
| 280 | <div class="layout-content-col span-10"> |
| 281 | |
| 282 | <img src="{@docRoot}design/media/settings_master_on_off.png"> |
| 283 | |
| 284 | </div> |
| 285 | </div> |
| 286 | |
| 287 | <div class="layout-content-row"> |
| 288 | <div class="layout-content-col span-3"> |
| 289 | |
| 290 | <div class="vspace size-2"> </div> |
| 291 | |
| 292 | <p>You can also echo the master on/off switch in the menu item that leads to the subscreen. |
| 293 | However, you should only do this in cases where users rarely need to access the subscreen once |
| 294 | it's initially set up and more often just want to toggle the switch.</p> |
| 295 | |
| 296 | </div> |
| 297 | <div class="layout-content-col span-10"> |
| 298 | |
| 299 | <img src="{@docRoot}design/media/settings_master_on_off_2.png"> |
| 300 | |
| 301 | </div> |
| 302 | </div> |
| 303 | |
| 304 | <div class="layout-content-row"> |
| 305 | <div class="layout-content-col span-3"> |
| 306 | |
| 307 | <h4>Individual on/off switch</h4> |
| 308 | <p>Use this pattern for an individual setting that requires a more elaborate description than can |
| 309 | be provided in checkbox form.</p> |
| 310 | <p>The on/off switch only appears in the subscreen so that users aren't able to toggle it without |
| 311 | also being exposed to the descriptive text. Secondary text appears below the setting label to |
| 312 | reflect the current selection.</p> |
| 313 | <p>In this example, Android Beam is on by default. Since users might not know what this setting |
| 314 | does, we made the status more descriptive than just "On".</p> |
| 315 | |
| 316 | </div> |
| 317 | <div class="layout-content-col span-10"> |
| 318 | |
| 319 | <img src="{@docRoot}design/media/settings_individual_on_off.png"> |
| 320 | |
| 321 | </div> |
| 322 | </div> |
| 323 | |
| 324 | <div class="layout-content-row"> |
| 325 | <div class="layout-content-col span-3"> |
| 326 | |
| 327 | <h4>Dependency</h4> |
| 328 | <p>Use this pattern for a setting that changes availability based on the value of another setting. |
| 329 | </p> |
| 330 | <p>The disabled setting appears below its dependency, without any indentation. If the setting |
| 331 | includes a status line, it says "Unavailable", and if the reason isn't obvious, a brief |
| 332 | explanation is included in the status.</p> |
| 333 | <p>If a given setting is a dependency to 3 or more settings, consider using a subscreen with a |
| 334 | master on/off switch so that your main settings screen isn't cluttered by lots of disabled items. |
| 335 | </p> |
| 336 | |
| 337 | </div> |
| 338 | <div class="layout-content-col span-10"> |
| 339 | |
| 340 | <img src="{@docRoot}design/media/settings_dependency.png"> |
| 341 | |
| 342 | </div> |
| 343 | </div> |
| 344 | |
| 345 | <h2 id="defaults">Defaults</h2> |
| 346 | |
| 347 | <p>Take great care in choosing default values for each of your settings. Because settings |
| 348 | determine app behavior, your choices will contribute to users' first impressions of your app. Even |
| 349 | though users can change settings, they'll expect the initial states to be sensible. The following |
| 350 | questions (when applicable) may help inform your decisions:</p> |
| 351 | |
| 352 | <ul> |
| 353 | <li>Which choice would most users be likely to choose on their own if there were no default?</li> |
| 354 | <li>Which choice is the most neutral or middle-of-the-road?</li> |
| 355 | <li>Which choice is the least risky, controversial, or over-the-top?</li> |
| 356 | <li>Which choice uses the least amount of battery or mobile data?</li> |
| 357 | <li>Which choice best supports the design principle |
| 358 | <a href="{@docRoot}design/get-started/principles.html#never-lose-my-stuff">Never lose my stuff</a>?</li> |
| 359 | <li>Which choice best supports the design principle |
| 360 | <a href="{@docRoot}design/get-started/principles.html#interrupt-only-if-important">Only interrupt |
| 361 | me if it's important</a>? |
| 362 | </li> |
| 363 | </ul> |
| 364 | |
| 365 | <h2 id="writing">Writing Guidelines</h2> |
| 366 | |
| 367 | <h4>Label clearly and concisely</h4> |
| 368 | |
| 369 | <p>Writing a good label for a setting can be challenging because space is very limited. You only |
| 370 | get one line, and it's incredibly short on the smallest of devices. Follow these guidelines to |
| 371 | make your labels brief, meaningful, and scannable:</p> |
| 372 | |
| 373 | <ul> |
| 374 | <li>Write each label in sentence case (i.e. only the first word and proper nouns are capitalized). |
| 375 | </li> |
| 376 | <li>Don't start a label with an instructional verb like "Set", "Change", "Edit", "Modify", |
| 377 | "Manage", "Use", "Select", or "Choose". Users already understand that they can do these things to |
| 378 | settings.</li> |
| 379 | <li>Likewise, don't end a label with a word like "setting" or "settings". It's already implied. |
| 380 | </li> |
| 381 | <li>If the setting is part of a grouping, don't repeat the word(s) used in the section divider or |
| 382 | subscreen title.</li> |
| 383 | <li>Avoid starting a label with a negative word like "Don't" or "Never". For example, "Don't |
| 384 | allow" could be rephrased to "Block".</li> |
| 385 | <li>Steer clear of technical jargon as much as possible, unless it's a term widely understood by |
| 386 | your target users. Use common verbs and nouns to convey the setting's purpose rather than its |
| 387 | underlying technology.</li> |
| 388 | <li>Don't refer to the user. For example, for a setting allowing the user to turn notifications on |
| 389 | or off, label it "Notifications" instead of "Notify me".</li> |
| 390 | </ul> |
| 391 | |
| 392 | <p>Once you've decided on labels for your settings, be sure to preview them on an |
| 393 | <a href="{@docRoot}design/style/metrics-grids.html">LDPI handset</a> in portrait to make sure |
| 394 | they'll fit everywhere.</p> |
| 395 | |
| 396 | <h4>Secondary text below is for status, not description…</h4> |
| 397 | |
| 398 | <p>Before Ice Cream Sandwich, we often displayed secondary text below a label to further describe |
| 399 | it or provide instructions. Starting in Ice Cream Sandwich, we're using secondary text for status. |
| 400 | </p> |
| 401 | |
| 402 | <div class="layout-content-row"> |
| 403 | <div class="layout-content-col span-4"> |
| 404 | |
| 405 | <div class="do-dont-label bad emulate-content-left-padding">Before</div> |
| 406 | |
| 407 | <table class="ui-table bad emulate-content-left-padding"> |
| 408 | <thead> |
| 409 | <tr> |
| 410 | <th class="label"> |
| 411 | Screen timeout |
| 412 | </th> |
| 413 | </tr> |
| 414 | </thead> |
| 415 | <tbody> |
| 416 | <tr> |
| 417 | <td class="secondary-text"> |
| 418 | Adjust the delay before the screen automatically turns off |
| 419 | </td> |
| 420 | </tr> |
| 421 | </tbody> |
| 422 | </table> |
| 423 | |
| 424 | </div> |
| 425 | <div class="layout-content-col span-4"> |
| 426 | |
| 427 | <div class="do-dont-label good">After</div> |
| 428 | |
| 429 | <table class="ui-table good"> |
| 430 | <thead> |
| 431 | <tr> |
| 432 | <th class="label"> |
| 433 | Sleep |
| 434 | </th> |
| 435 | </tr> |
| 436 | </thead> |
| 437 | <tbody> |
| 438 | <tr> |
| 439 | <td class="secondary-text"> |
Peter Ng | 0212363 | 2012-08-06 11:44:48 -0700 | [diff] [blame] | 440 | After 10 minutes of inactivity |
Roman Nurik | b20f120 | 2012-03-29 13:28:13 -0700 | [diff] [blame] | 441 | </td> |
| 442 | </tr> |
| 443 | </tbody> |
| 444 | </table> |
| 445 | |
| 446 | </div> |
| 447 | </div> |
| 448 | |
| 449 | <p>Status in secondary text has the following benefits:</p> |
| 450 | <ul> |
| 451 | <li>Users can see at a glance what the current value of a setting is without having to navigate |
| 452 | any further.</li> |
| 453 | <li>It applies the design principle |
| 454 | <a href="{@docRoot}design/get-started/principles.html#keep-it-brief">Keep it brief</a>, which |
| 455 | users greatly appreciate.</li> |
| 456 | </ul> |
| 457 | |
| 458 | <h4>…unless it's a checkbox setting</h4> |
| 459 | <p>There's one important exception to the using secondary text for status: checkbox settings. |
| 460 | Here, use secondary text for description, not status. Status below a checkbox is unnecessary |
| 461 | because the checkbox already indicates it. The reason why it's appropriate to have a description |
| 462 | below a checkbox setting is because—unlike other controls—it doesn't display a dialog |
| 463 | or navigate to another screen where additional information can be provided.</p> |
| 464 | |
| 465 | <p>That said, if a checkbox setting's label is clear enough on its own, there's no need to also |
| 466 | provide a description. Only include one if necessary.</p> |
| 467 | |
| 468 | <p>Follow these guidelines to write checkbox setting descriptions:</p> |
| 469 | <ul> |
| 470 | <li>Keep it to one sentence and don't use ending punctuation.</li> |
| 471 | <li>Convey what happens when the setting is checked, phrased in the form of a command. Example: |
| 472 | "Allow data exchange", not "Allows data exchange".</li> |
| 473 | <li>Avoid repetition by choosing words that don't already appear in the label.</li> |
| 474 | <li>Don't refer to the user unless it's necessary for understanding the setting.</li> |
| 475 | <li>If you must refer to the user, do so in the second person ("you") rather than the first person |
| 476 | ("I"). Android speaks to users, not on behalf of them.</li> |
| 477 | </ul> |
| 478 | |
| 479 | <h4>Writing examples</h4> |
| 480 | |
| 481 | <p>The following are examples of changes we made to labels and secondary text in the Settings app |
| 482 | in Ice Cream Sandwich.</p> |
| 483 | |
| 484 | <div class="layout-content-row"> |
| 485 | <div class="layout-content-col span-4"> |
| 486 | |
| 487 | <div class="do-dont-label bad emulate-content-left-padding">Before</div> |
| 488 | |
| 489 | <table class="ui-table bad emulate-content-left-padding"> |
| 490 | <thead> |
| 491 | <tr> |
| 492 | <th class="label"> |
| 493 | Use tactile feedback |
| 494 | </th> |
| 495 | </tr> |
| 496 | </thead> |
| 497 | </table> |
| 498 | |
| 499 | </div> |
| 500 | <div class="layout-content-col span-4"> |
| 501 | |
| 502 | <div class="do-dont-label good">After</div> |
| 503 | |
| 504 | <table class="ui-table good"> |
| 505 | <thead> |
| 506 | <tr> |
| 507 | <th class="label"> |
| 508 | Vibrate on touch |
| 509 | </th> |
| 510 | </tr> |
| 511 | </thead> |
| 512 | </table> |
| 513 | |
| 514 | </div> |
| 515 | <div class="layout-content-col span-5"> |
| 516 | |
| 517 | <p>In this checkbox setting, we eliminated the throwaway word "Use" and rephrased the label to be |
| 518 | more direct and understandable.</p> |
| 519 | |
| 520 | </div> |
| 521 | |
| 522 | </div> |
| 523 | |
| 524 | <div class="layout-content-row"> |
| 525 | <div class="layout-content-col span-4"> |
| 526 | |
| 527 | <div class="do-dont-label bad emulate-content-left-padding">Before</div> |
| 528 | |
| 529 | <table class="ui-table bad emulate-content-left-padding"> |
| 530 | <thead> |
| 531 | <tr> |
| 532 | <th class="label"> |
| 533 | Screen timeout |
| 534 | </th> |
| 535 | </tr> |
| 536 | </thead> |
| 537 | <tbody> |
| 538 | <tr> |
| 539 | <td class="secondary-text"> |
| 540 | Adjust the delay before the screen automatically turns off |
| 541 | </td> |
| 542 | </tr> |
| 543 | </tbody> |
| 544 | </table> |
| 545 | |
| 546 | </div> |
| 547 | <div class="layout-content-col span-4"> |
| 548 | |
| 549 | <div class="do-dont-label good">After</div> |
| 550 | |
| 551 | <table class="ui-table good"> |
| 552 | <thead> |
| 553 | <tr> |
| 554 | <th class="label"> |
| 555 | Sleep |
| 556 | </th> |
| 557 | </tr> |
| 558 | </thead> |
| 559 | <tbody> |
| 560 | <tr> |
| 561 | <td class="secondary-text"> |
Peter Ng | 0212363 | 2012-08-06 11:44:48 -0700 | [diff] [blame] | 562 | After 10 minutes of inactivity |
Roman Nurik | b20f120 | 2012-03-29 13:28:13 -0700 | [diff] [blame] | 563 | </td> |
| 564 | </tr> |
| 565 | </tbody> |
| 566 | </table> |
| 567 | |
| 568 | </div> |
| 569 | <div class="layout-content-col span-5"> |
| 570 | |
| 571 | <p>In this multiple choice setting, we changed the label to a friendlier term and also replaced |
| 572 | the description with status. We put some descriptive words around the selected value, "10 |
| 573 | minutes", because on its own, the meaning could be misinterpreted as "sleep for 10 minutes".</p> |
| 574 | |
| 575 | </div> |
| 576 | </div> |
| 577 | |
| 578 | <div class="layout-content-row"> |
| 579 | <div class="layout-content-col span-4"> |
| 580 | |
| 581 | <div class="do-dont-label bad emulate-content-left-padding">Before</div> |
| 582 | |
| 583 | <table class="ui-table bad emulate-content-left-padding"> |
| 584 | <thead> |
| 585 | <tr> |
| 586 | <th class="label"> |
| 587 | Change screen lock |
| 588 | </th> |
| 589 | </tr> |
| 590 | </thead> |
| 591 | <tbody> |
| 592 | <tr> |
| 593 | <td class="secondary-text"> |
| 594 | Change or disable pattern, PIN, or password security |
| 595 | </td> |
| 596 | </tr> |
| 597 | </tbody> |
| 598 | </table> |
| 599 | |
| 600 | </div> |
| 601 | <div class="layout-content-col span-4"> |
| 602 | |
| 603 | <div class="do-dont-label good">After</div> |
| 604 | |
| 605 | <table class="ui-table good"> |
| 606 | <thead> |
| 607 | <tr> |
| 608 | <th class="label"> |
| 609 | Screen lock |
| 610 | </th> |
| 611 | </tr> |
| 612 | </thead> |
| 613 | <tbody> |
| 614 | <tr> |
| 615 | <td class="secondary-text"> |
| 616 | Pattern |
| 617 | </td> |
| 618 | </tr> |
| 619 | </tbody> |
| 620 | </table> |
| 621 | |
| 622 | </div> |
| 623 | <div class="layout-content-col span-5"> |
| 624 | |
| 625 | <p>This setting navigates to a a sequence of subscreens that allow users to choose a type of |
| 626 | screen lock and then set it up. We eliminated the throwaway word "Change" in the label, and |
| 627 | replaced the description with the current type of screen lock set up by the user. If the user |
| 628 | hasn't set up a screen lock, the secondary text says "None".</p> |
| 629 | |
| 630 | </div> |
| 631 | </div> |
| 632 | |
| 633 | <div class="layout-content-row"> |
| 634 | <div class="layout-content-col span-4"> |
| 635 | |
| 636 | <div class="do-dont-label bad emulate-content-left-padding">Before</div> |
| 637 | |
| 638 | <table class="ui-table bad emulate-content-left-padding"> |
| 639 | <thead> |
| 640 | <tr> |
| 641 | <th class="label"> |
| 642 | NFC |
| 643 | </th> |
| 644 | </tr> |
| 645 | </thead> |
| 646 | <tbody> |
| 647 | <tr> |
| 648 | <td class="secondary-text"> |
| 649 | Use Near Field Communication to read and exchange tags |
| 650 | </td> |
| 651 | </tr> |
| 652 | </tbody> |
| 653 | </table> |
| 654 | |
| 655 | </div> |
| 656 | <div class="layout-content-col span-4"> |
| 657 | |
| 658 | <div class="do-dont-label good">After</div> |
| 659 | |
| 660 | <table class="ui-table good"> |
| 661 | <thead> |
| 662 | <tr> |
| 663 | <th class="label"> |
| 664 | NFC |
| 665 | </th> |
| 666 | </tr> |
| 667 | </thead> |
| 668 | <tbody> |
| 669 | <tr> |
| 670 | <td class="secondary-text"> |
| 671 | Allow data exchange when the phone touches another device |
| 672 | </td> |
| 673 | </tr> |
| 674 | </tbody> |
| 675 | </table> |
| 676 | |
| 677 | </div> |
| 678 | <div class="layout-content-col span-5"> |
| 679 | |
| 680 | <p>In this checkbox setting—although it's technical jargon—we kept the "NFC" label |
| 681 | because: (1) we couldn't find a clear, concise alternative, and (2) user familiarity with the |
| 682 | acronym is expected to increase dramatically in the next couple of years.</p> |
| 683 | <p>We did, however, rewrite the description. It's far less technical than before and does a better |
| 684 | job of conveying how and why you'd use NFC. We didn't include what the acronym stands for because |
| 685 | it doesn't mean anything to most users and would have taken up a lot of space.</p> |
| 686 | |
| 687 | </div> |
| 688 | </div> |
| 689 | |
Scott Main | d4cc942 | 2012-10-03 18:47:08 -0700 | [diff] [blame] | 690 | |
Scott Main | d4cc942 | 2012-10-03 18:47:08 -0700 | [diff] [blame] | 691 | |
Roman Nurik | b20f120 | 2012-03-29 13:28:13 -0700 | [diff] [blame] | 692 | <h2 id="checklist">Checklist</h2> |
| 693 | <ul> |
| 694 | <li><p>Make sure each item in Settings meets the criteria for belonging there.</p></li> |
| 695 | <li><p>If you have more than 7 items, explore ways to group related settings.</p></li> |
| 696 | <li><p>Use design patterns wherever applicable so users don't face a learning curve.</p></li> |
| 697 | <li><p>Choose defaults that are safe, neutral, and fit the majority of users.</p></li> |
| 698 | <li><p>Give each setting a clear, concise label and use secondary text appropriately.</p></li> |
| 699 | </ul> |