Designing Mobile Interfaces

Contents......Page 5
Preface......Page 13
Part I: Page......Page 37
A Revolution Has Begun......Page 43
Composition Principles......Page 44
Context Is Key......Page 45
Patterns for Composition......Page 46
Scroll......Page 47
Annunciator Row......Page 53
Notifications......Page 57
Titles......Page 62
Revealable Menu......Page 65
Fixed Menu......Page 71
Home & Idle Screens......Page 75
Lock Screen......Page 79
Interstitial Screen......Page 84
Advertising......Page 87
Summary......Page 92
Part II: Components......Page 97
Types of Visual Information......Page 99
Classifying Information......Page 100
Organizing with Information Architecture......Page 101
Information Design and Ordering Data......Page 102
Patterns for Displaying Information......Page 104
Vertical List......Page 105
Infinite List......Page 108
Thumbnail List......Page 112
Fisheye List......Page 115
Carousel......Page 118
Grid......Page 122
Film Strip......Page 127
Slideshow......Page 130
Infinite Area......Page 133
Select List......Page 138
That Was Easy......Page 143
Understanding Our Users......Page 144
Control and Confirmation......Page 145
Confirmation......Page 146
Sign On......Page 152
Exit Guard......Page 159
Cancel Protection......Page 163
Timeout......Page 166
Context Is Key......Page 173
Designing for Information......Page 176
Patterns for Revealing More Information......Page 177
Windowshade......Page 178
Pop-Up......Page 182
Hierarchical List......Page 186
Returned Results......Page 191
Summary......Page 195
Part III: Widgets......Page 201
What a Mess!......Page 205
Lateral Access and the Mobile Space......Page 206
Follow the Principles of Wayfinding and Norman’s Interaction Model......Page 207
Norman’s Interaction Model......Page 208
Tabs......Page 211
Peel Away......Page 216
Simulated 3D Effects......Page 220
Pagination......Page 224
Location Within......Page 228
Get Ready to Push!......Page 233
Maybe We Won’t Have to Push......Page 234
Drilldown and the Mobile Space......Page 235
Patterns for Drilldown......Page 236
When to Use Links, Buttons, and Icons......Page 237
Link......Page 238
Button......Page 242
Indicator......Page 246
Icon......Page 249
Stack of Items......Page 253
Annotation......Page 256
Down Under and Backward......Page 261
Understanding Our Users......Page 262
Labels and Indicators in the Mobile Space......Page 263
Patterns for Labels and Indicators......Page 264
Ordered Data......Page 265
Tooltip......Page 269
Avatar......Page 272
Wait Indicator......Page 276
Reload, Synch, Stop......Page 281
The Weilers, Version 1......Page 287
The Weilers, Version 2......Page 288
The Difference......Page 289
Information Controls in the Mobile Space......Page 290
Zoom & Scale......Page 291
Location Jump......Page 296
Search Within......Page 300
Sort & Filter......Page 304
Summary......Page 309
Part IV: Input and Output......Page 315
Slow Down, You’re Too Fast!......Page 317
The Status Quo......Page 318
Text and Character Input on Mobile Devices......Page 319
Patterns for Text and Character Input Controls......Page 320
Keyboards & Keypads......Page 321
Pen Input......Page 327
Mode Switches......Page 334
Input Method Indicator......Page 340
Autocomplete & Prediction......Page 344
That Sounds Like a Great Idea......Page 349
Gestural Interactive Controls......Page 354
Patterns for General Interactive Controls......Page 355
Directional Entry......Page 356
Press-and-Hold......Page 360
Focus & Cursors......Page 364
Other Hardware Keys......Page 369
Accesskeys......Page 373
Dialer......Page 378
On-Screen Gestures......Page 383
Kinesthetic Gestures......Page 388
Remote Gestures......Page 395
The Wheels on the Bus Go Round and Round......Page 401
Mobile Trends Today......Page 402
Input and Selection in the Mobile Space......Page 403
Patterns for Input and Selection......Page 404
Input Areas......Page 405
Form Selections......Page 409
Mechanical Style Controls......Page 414
Clear Entry......Page 421
The Big Tooter Today......Page 425
Auditory Classifications......Page 426
Audio Guidelines in the Mobile Space......Page 429
Audio Accessibility in the Mobile Space......Page 430
The Importance of Vibration......Page 431
Patterns for Audio and Vibration......Page 432
Tones......Page 433
Voice Input......Page 437
Voice Readback......Page 441
Voice Notifications......Page 444
Haptic Output......Page 447
The Breakup......Page 453
Context of Use......Page 454
Displays......Page 456
Mobile Display Technology......Page 457
Patterns for Screens, Lights, and Sensors......Page 460
LED......Page 461
Display Brightness Controls......Page 466
Orientation......Page 469
Location......Page 474
Summary......Page 480
Appendixes......Page 489
An Introduction to Mobile Radiotelephony......Page 491
An Introduction to Location Technologies......Page 504
Drawing Tools and Templates......Page 511
Emulators......Page 519
Color Deficit Design Tools......Page 523
Introduction to Mobile Typography......Page 527
Readability and Legibility Guidelines......Page 539
Typefaces for Screen Display......Page 542
Greeking......Page 545
Human Factors and Physiology......Page 549
Hearing......Page 554
Brightness, Luminance, and Contrast......Page 555
General Touch Interaction Guidelines......Page 557
Fitts’s Law......Page 560
References......Page 561
Index......Page 565