Contents
Chapter 1 Navigation. 1
Primary Navigation Patterns, Persistent. 2
Springboard. 7
Cards. 12
List Menu. 14
Dashboard . 17
Gallery . 17
Tab Menu. 19
Skeuomorphic. 26
Primary Navigation Patterns, Transient . 30
Side Drawer. 30
Toggle Menu . 41
Pie Menu . 44
Secondary Navigation Patterns . 46
Page Swiping. 48
Scrolling Tabs . 51
Chapter 2 Forms 55
Sign In. 57
Multi-Step. 75
Checkout. 82
Tip #1: Include Sign In, Register, and Guest Options. 83
Tip #2: Streamline the Flow. 84
Tip #3: Provide Time-Saving Shortcuts. 84
Tip #4: Offer Express Checkout. 86
Tip #5: Forget the Web . 88
Calculator Forms. 90
Search Forms. 93
Long Forms. 96
Chapter 3 Tables . 99
Basic Table. 101
Headerless Table. 102
Fixed Column . 104
Overview plus Data . 105
Grouped Rows . 107
Table with Visual Indicators . 108
Editable Table. 111
Chapter 4 Search, Sort, and Filter. 115
Search Patterns . 116
Implicit Search . 116
Explicit Search. 121
Search with Auto-Complete. 126
Dynamic Search . 128
Scoped Search. 130
Saved, Recent, and Popular Search. 131
Search Form. 133
Search Results/View Results . 136
Sort Patterns. 139
Onscreen Sort . 141
Sort Overlay. 143
Sort Form. 145
Filter Patterns. 149
Onscreen Filter . 149
Filter Overlay. 152
Filter Form. 154
Filter Drawer . 156
Gesture-Based Filtering. 158
Chapter 5 Tools . 161
Toolbar. 163
iOS . 163
Android. 165
Windows Phone. 166
OS-Neutral Pattern: Contextual Toolbar. 168
Toolbox. 168
Call to Action Button. 172
Inline Actions. 177
Multi-State Button . 180
Contextual Tools. 181
Bulk Actions. 185
Lock Screen Controls . 188
Chapter 6 Charts. 191
Chart with Filters. 196
Interactive Timeline. 200
Data Point Details. 202
Drill Down. 208
Overview plus Data . 208
Interactive Preview. 211
Dashboard. 213
Zoom. 216
Sparklines. 218
Integrated Legend. 220
Thresholds. 220
Pivot Table . 222
Pulling It All Together. 223
Chapter 7 Tutorials and Invitations . 227
Tutorial Rules. 228
Rule #1: Use Less Text. 230
Ness Compared to Foodspotting. 231
Boomerang Compared to Mailbox. 233
DigiCal Compared to Fantastical. 234
Catch Compared to Clear. 235
SlideStory Compared to Vine. 236
Rule #2: No Frontloading. 236
Phoster Compared to Creative Studio. 238
Dooo Compared to Todoist. 239
Buy Me a Pie! Compared to OneNote . 240
Clipchat Compared to Kik . 241
Rule #3: Make It Rewarding . 242
NBC News Compared to Flipboard . 242
Noom Compared to DailyBurn Tracker. 244
Rule #4: Reinforce Learning Through Use. 246
Rule #5: Listen to Your Users. 248
Invitation Patterns. 250
Tips. 250
Persistent Invitations. 252
Discoverable Invitations . 254
Chapter Extra: Invitations—Rolling Out the Welcome Mat. 255
Iterating on the Welcome Experience . 256
Summary. 263
Chapter 8 Social Patterns . 265
Social Registration. 265
MapMyFitness Compared to We Heart It . 266
Connecting . 267
Following . 270
Profiles. 272
Groups. 274
Gamification. 278
Chapter 9 Feedback and Affordance . 283
Feedback Patterns. 283
Error Messages . 284
Confirmation. 285
System Status. 293
Affordance. 298
Tap . 298
Swipe/Flick . 299
Drag . 304
Chapter 10 Help. 309
How-Tos. 313
User Guide/Help System. 315
FAQs. 319
Feature Tours. 320
Tutorials. 323
Contextual Help. 326
Capture Feedback. 328
Chapter 11 Anti-Patterns. 331
Novel Notions. 332
Needless Complexity. 338
Metaphor Mismatch . 342
Control Mismatch. 342
Icon Mismatch. 345
Gesture Mismatch. 345
Mental Model Mismatch. 347
Idiot Boxes. 348
Chart Junk. 351
Oceans of Buttons. 355
Square Peg, Round Hole. 359
Chapter Extra: Let Them Pee—Avoiding the Sign-Up/Sign-In Mobile Anti-Pattern. 361
Appendix A: Additional Resources. 365
Index. 367
Preface
Sometimes it’s good to stop and reflect on the many factors that affect usable design. But more often, there’s no time for that—you’ve just got to roll up your sleeves and get to work. This book is for those times.
From one perspective, the mobile world has changed a lot since this book first came out in 2011. Three of the six mobile operating systems I included in 2011—WebOS, Symbian, and BlackBerry—are no longer
contenders in the mobile space.
From another perspective, not that much has changed: out of over 70 patterns from the first edition, most are still with us, with only a handful of new ones added. Those latest patterns, though, exhibit more
“mobile-centric” thinking. Designers are finally looking beyond desktop and web metaphors to craft solutions that are organic to mobile interfaces. I expect this to continue, and to accelerate.
Another change: in 2011, I was also optimistic about OS-neutral designs, meaning that perhaps we could as designers and developers create a single interface that would work well on multiple OSs. In fact, the opposite has occurred; distinct design conventions for iOS, Android, and Windows Phone have become more formalized, particularly with regard to navigation.
It’s now more important than ever to understand those OS guidelines, and even more crucial that you are truly familiar with the actual devices your users rely on 24/7/365. I strongly advise that you spend a minimum of six weeks using devices for each OS you are designing for. That way, when you do roll up your sleeves to get to work, your own experience—along with the patterns in this book—will give you the
confidence you need to design beautifully usable apps.
Intended Audience for This Book
Mobile Design Pattern Gallery is for product managers, designers, and developers who are creating mobile applications. As companies are defining and refining their mobile strategies, it can be a challenge to find examples of design best practices, especially for multiple operating systems. Whether you have been tasked with designing a simple iPhone application or designing for every popular operating system on the market, these patterns will provide solutions to common design challenges.
