Designing Mobile Interfaces : Patterns for Interaction Design

With hundreds of thousands of mobile applications available today, your app has to capture users immediately. This book provides practical techniques to help you catch—and keep—their attention. You’ll learn core principles for designing effective user interfaces, along with a set of common patterns for interaction design on all types of mobile devices.Mobile design specialists Steven Hoober and Eric Berkman have collected and researched 76 best practices for everything from composing pages and displaying information to the use of screens, lights, and sensors. Each pattern includes a discussion of the design problem and solution, along with variations, interaction and presentation details, and antipatterns.Compose pages so that information is easy to locate and manipulate Provide labels and visual cues appropriate for your app’s users Use information control widgets to help users quickly access details Take advantage of gestures and other sensors Apply specialized methods to prevent errors and the loss of user-entered data Enable users to easily make selections, enter text, and manipulate controls Use screens, lights, haptics, and sounds to communicate your message and increase user satisfaction "Designing Mobile Interfaces is another stellar addition to O’Reilly’s essential interface books. Every mobile designer will want to have this thorough book on their shelf for reference." —Dan Saffer, Author of Designing Gestural 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 Contents 5 Preface 13 Part I: Page 37 Chapter 1: Composition 43 A Little Bit of History 43 A Revolution Has Begun 43 Composition Principles 44 The Concept of a Wrapper 45 Context Is Key 45 Patterns for Composition 46 Scroll 47 Annunciator Row 53 Notifications 57 Titles 62 Revealable Menu 65 Fixed Menu 71 Home & Idle Screens 75 Lock Screen 79 Interstitial Screen 84 Advertising 87 Summary 92 Part II: Components 97 Chapter 2: Display of Information 99 Look Around 99 Types of Visual Information 99 Classifying Information 100 Organizing with Information Architecture 101 Information Design and Ordering Data 102 Patterns for Displaying Information 104 Vertical List 105 Infinite List 108 Thumbnail List 112 Fisheye List 115 Carousel 118 Grid 122 Film Strip 127 Slideshow 130 Infinite Area 133 Select List 138 Chapter 3: Control and Confirmation 143 Quiet, Please 143 That Was Easy 143 Understanding Our Users 144 Control and Confirmation 145 Patterns for Control and Confirmation 146 Confirmation 146 Sign On 152 Exit Guard 159 Cancel Protection 163 Timeout 166 Chapter 4: Revealing More Information 173 It’s Not Magic! 173 Context Is Key 173 Designing for Information 176 Patterns for Revealing More Information 177 Windowshade 178 Pop-Up 182 Hierarchical List 186 Returned Results 191 Summary 195 Part III: Widgets 201 Chapter 5: Lateral Access 205 What a Mess! 205 Lateral Access and the Mobile Space 206 Follow the Principles of Wayfinding and Norman’s Interaction Model 207 Wayfinding 208 Norman’s Interaction Model 208 Patterns for Lateral Access 211 Tabs 211 Peel Away 216 Simulated 3D Effects 220 Pagination 224 Location Within 228 Chapter 6: Drilldown 233 Get Ready to Push! 233 Maybe We Won’t Have to Push 234 Drilldown and the Mobile Space 235 Patterns for Drilldown 236 When to Use Links, Buttons, and Icons 237 Link 238 Button 242 Indicator 246 Icon 249 Stack of Items 253 Annotation 256 Chapter 7: Labels and Indicators 261 Down Under and Backward 261 Understanding Our Users 262 Labels and Indicators in the Mobile Space 263 Patterns for Labels and Indicators 264 Ordered Data 265 Tooltip 269 Avatar 272 Wait Indicator 276 Reload, Synch, Stop 281 Chapter 8: Information Controls 287 The Weilers, Version 1 287 The Weilers, Version 2 288 The Difference 289 Information Controls in the Mobile Space 290 Patterns for Information Control 291 Zoom & Scale 291 Location Jump 296 Search Within 300 Sort & Filter 304 Summary 309 Part IV: Input and Output 315 Chapter 9: Text and Character Input 317 Slow Down, You’re Too Fast! 317 The Status Quo 318 Use What’s Best for You 319 Text and Character Input on Mobile Devices 319 Patterns for Text and Character Input Controls 320 Keyboards & Keypads 321 Pen Input 327 Mode Switches 334 Input Method Indicator 340 Autocomplete & Prediction 344 Chapter 10: General Interactive Controls 349 Darkness 349 That Sounds Like a Great Idea 349 Gestural Interactive Controls 354 Patterns for General Interactive Controls 355 Directional Entry 356 Press-and-Hold 360 Focus & Cursors 364 Other Hardware Keys 369 Accesskeys 373 Dialer 378 On-Screen Gestures 383 Kinesthetic Gestures 388 Remote Gestures 395 Chapter 11: Input and Selection 401 The Wheels on the Bus Go Round and Round 401 Mobile Trends Today 402 Slow Down, Teen Texters! 403 Input and Selection in the Mobile Space 403 Patterns for Input and Selection 404 Input Areas 405 Form Selections 409 Mechanical Style Controls 414 Clear Entry 421 Chapter 12: Audio and Vibration 425 The Big Tooter 425 The Big Tooter Today 425 The Importance of Audition 426 Auditory Classifications 426 Audio Guidelines in the Mobile Space 429 Audio Accessibility in the Mobile Space 430 The Importance of Vibration 431 Patterns for Audio and Vibration 432 Tones 433 Voice Input 437 Voice Readback 441 Voice Notifications 444 Haptic Output 447 Chapter 13: Screens, Lights, and Sensors 453 The Relationship 453 The Breakup 453 I’m Not “Everyman” 454 Context of Use 454 Displays 456 Mobile Display Technology 457 Sensors 460 Patterns for Screens, Lights, and Sensors 460 LED 461 Display Brightness Controls 466 Orientation 469 Location 474 Summary 480 Appendixes 489 Appendix A: Mobile Radiotelephony 491 An Introduction to Mobile Radiotelephony 491 An Introduction to Location Technologies 504 Appendix B: Design Templates and UI Guidelines 511 Drawing Tools and Templates 511 Emulators 519 Color Deficit Design Tools 523 Appendix C: Mobile Typography 527 Introduction to Mobile Typography 527 Readability and Legibility Guidelines 539 Typefaces for Screen Display 542 Greeking 545 Appendix D: Human Factors 549 Human Factors and Physiology 549 Hearing 554 Brightness, Luminance, and Contrast 555 General Touch Interaction Guidelines 557 Fitts’s Law 560 References 561 Index 565 With hundreds of thousands of mobile applications available today, your app has to capture users immediately. This book provides practical techniques to help you catch—and keep—their attention. You’ll learn core principles for designing effective user interfaces, along with a set of common patterns for interaction design on all types of mobile devices.Mobile design specialists Steven Hoober and Eric Berkman have collected and researched 76 best practices for everything from composing pages and displaying information to the use of screens, lights, and sensors. Each pattern includes a discussion of the design problem and solution, along with variations, interaction and presentation details, and antipatterns.Compose pages so that information is easy to locate and manipulateProvide labels and visual cues appropriate for your app’s usersUse information control widgets to help users quickly access detailsTake advantage of gestures and other sensorsApply specialized methods to prevent errors and the loss of user-entered dataEnable users to easily make selections, enter text, and manipulate controlsUse screens, lights, haptics, and sounds to communicate your message and increase user satisfaction'Designing Mobile Interfaces is another stellar addition to O’Reilly’s essential interface books. Every mobile designer will want to have this thorough book on their shelf for reference.'—Dan Saffer, Author of Designing Gestural Interfaces With hundreds of thousands of mobile applications available today, your app has to capture users immediately. This book provides practical techniques to help you catchand keeptheir attention. Youll learn core principles for designing effective user interfaces, along with a set of common patterns for interaction design on all types of mobile devices. Mobile design specialists Steven Hoober and Eric Berkman have collected and researched 76 best practices for everything from composing pages and displaying information to the use of screens, lights, and sensors. Each pattern includes a discussion of the design problem and solution, along with variations, interaction and presentation details, and antipatterns. Describes the techniques of effective mobile interface design, covering such topics as composition, widgets, audio, labels and indicators, and text and character input