Mobile Design Pattern Gallery Theresa Neil Editor Mary Treseler Copyright © 2012 Theresa Neil O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://my.safaribooksonline.com). For more information, contact our corporate/institutional sales department: (800) 998-9938 or [email protected]. Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc. The image of the rooster and related trade dress are trademarks of O’Reilly Media, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O’Reilly Media, Inc. was aware of a trademark claim, the designations have been printed in caps or initial caps. While every precaution has been taken in the preparation of this book, the publisher and authors assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein. O'Reilly Media Foreword To name something is to begin to understand it. My five-year-old son, like many children, enjoys looking at clouds. A few weeks ago, he clued into the fact that different kinds of clouds had different names. And so, being of good geek stock, he proceeded to memorize them—cirrus, cumulus, stratus, cirrostratus, cumulonimbus, altostratus, lenticular; all of the ones I knew, and then some. I’d certainly never heard of “cumulus congestus” before. Now, when he looks at the sky, he can tell me which clouds are which. More than that, he notices more than he did before, and with greater nuance. He has learned to visually discriminate among cloud types based on texture, color, height, movement, and who knows what else. (They’re not always easy to tell apart, of course, but that doesn’t bother him.) He can predict, with some accuracy, which ones might drop rain on us and which won’t. And in his limited preschooler’s fashion, he uses his cloud knowledge to analyze the big picture. “Cirrostratus clouds might mean a warm front,” he points out. Or, “Cumulus congestus might turn into cumulonimbus! Then we could get a storm.” Above all, he enjoys knowing these names. Little kids seem to get a kick out of naming the things they love, whether they’re clouds, dinosaurs, bugs, cars, dolls, or movie characters. Certainly their imaginations aren’t limited by that left-brain knowledge, despite our grownup romantic biases—my son still sees palaces and ducks and cauliflowers in the clouds, even as he names them “cumulus.” So it is with us grownups. That brings us to the topic at hand: by recognizing and naming patterns in interfaces, we “see” those interfaces better. We notice more details, because our brains are more attuned to what we should look for. We can start to predict the workings of the software we use, because we know how certain interface patterns should behave. Then we can tell other people what we see via an expressive new vocabulary. And how do we learn these patterns? When my son learned about clouds, the best tool he had were pictures. Lots of pictures. After looking at some of these “catalogs” in books and websites, he learned to see rather subtle differences between cloud types, some of which are hard to describe verbally. Likewise, the best way to learn interface patterns is to see visual examples. Now, I’m a writer, so I love words. When not restrained by courtesy, I would happily go on endlessly about what patterns are, how to choose them, and the differences between them! But it’s clear to me that anyone who simply wants to design interfaces—that is, anyone who needs to know patterns as one component of their craft knowledge—won’t really need all those words. For a given pattern, they need just enough explanation to “get it,” and then they need to see a range of well- chosen real life examples to solidify and internalize that knowledge. In this book, Theresa Neil has pulled together a spectacular collection of pictures of patterns. I can’t imagine the work that went into this, having tried it myself—it’s no small feat to review this many mobile apps, see what works best in them, and gather up all these carefully catalogued screenshots. For mobile interface designers, this book is a treasure. Read it straight through if you’d like, but more than that, use its examples to improve your own designs. Use your own judgment about what works well in these examples, and figure out what may work best in the context of whatever you’re designing. Use it as a sourcebook for design inspiration. I found myself admiring these screenshots for design aspects that had nothing to do with the patterns themselves, such as icon design and color usage. Use it to expand your knowledge of how existing apps work, without laboriously downloading and using them all (and on several devices, don’t forget). You might even go out and find your own pattern examples in the mobile apps you use daily. In fact, I’d bet that once you learn these pattern names, you won’t be able to avoid doing so. Having had my son point out “cumulus congestus” in the wild a few times, I know it well, and, gosh—I don’t know how I ever lived without that knowledge. Enjoy! —Jenifer Tidwell Preface Introduction We recently had a new mobile project starting and all of our experienced mobile designers were booked. This gave me less than a week to impart my mobile experiences to a new designer. So I made a quick tutorial with lots and lots of screenshots, illustrating good design and not so good design. Gradually a set of patterns for mobile application design emerged. Even as I was cataloging these patterns, I knew that the real value wasn’t only the pattern identification, but in the hundreds of examples I’d captured. So instead of a tome of abstract patterns only an author can love, this book is a showcase, or gallery, of mobile application design. This book includes 400+ current screenshots from iOS, Android, BlackBerry, WebOS, Symbian and Windows applications, organized by pattern type. And the accompanying site: www.mobiledesignpatterngallery, and Flickr photostream have even more examples. Intended Audience for This Book The Mobile Design Pattern Gallery is for product managers, designers and developers who are creating mobile applications. As companies are defining and refining their mobile strategy, 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. Safari® Books Online NOTE Safari Books Online is an on-demand digital library that lets you easily search over 7,500 technology and creative reference books and videos to find the answers you need quickly. With a subscription, you can read any page and watch any video from our library online. Read books on your cell phone and mobile devices. Access new titles before they are available for print, and get exclusive access to manuscripts in development and post feedback for the authors. Copy and paste code samples, organize your favorites, download chapters, bookmark key sections, create notes, print out pages, and benefit from tons of other time-saving features. O’Reilly Media has uploaded this book to the Safari Books Online service. To have full digital access to this book and others on similar topics from O’Reilly and other publishers, sign up for free at http://my.safaribooksonline.com. How to Contact Us Please address comments and questions concerning this book to the publisher: O’Reilly Media, Inc. 1005 Gravenstein Highway North Sebastopol, CA 95472 800-998-9938 (in the United States or Canada) 707-829-0515 (international or local) 707-829-0104 (fax) We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at: http://www.oreilly.com/catalog/9781449314323 To comment or ask technical questions about this book, send email to: [email protected] For more information about our books, courses, conferences, and news, see our website at http://www.oreilly.com. Find us on Facebook: http://facebook.com/oreilly Follow us on Twitter: http://twitter.com/oreillymedia Watch us on YouTube: http://www.youtube.com/oreillymedia Acknowledgments Many thanks to my illustrator Aaron Jasinski for designing all the patterns, Chad at Smith & Robot for the Mobile Design Pattern Gallery website and blog design, Mary and Dan at O’Reilly Media for pulling it all together. I also have to thank my talented team, Jessica, James, Kirsten, Marie, Ben, Lulu, Ivan and Enrico for holding the business together the last six months. And my patient family for letting me write every weekend. Special thanks to Jenifer Tidwell and her son Matthew for the wonderful foreword—I hope my readers will enjoy this gallery half as much as an afternoon of cloud watching. Chapter 1. Navigation Primary Navigation Patterns: Springboard, List Menu, Tab Menu, Gallery, Dashboard, Metaphor, Mega Menu Secondary Navigation Patterns: PageCarousel, Image Carousel, Expanding List I like to read reviews in mobile marketplaces to better understand how people are using the apps. The marketplace rating system is an incredibly valuable feedback tool that doesn’t exist for web and desktop applications. It provides a rich source of information about customers’ preferences and expectations. In general, most 4 and 5 star reviews aren’t very specific. They often sound a lot like this: “What a great app, it looks good and works well”. The 1 and 2 star reviews are much more telling; they extensively outline the problems with the application. The most common complaints seem to revolve around: Crashing Lack of key features (syncing, filtering, account linking...) Poor navigation (can’t go back, can’t find things...) Confusing interface design The first two issues can’t be fixed with design patterns, but the third and fourth