\n"Just a quick thanks to express my sheer gratitude for this pub, it has been a guide for me reworking a design for an app already in production!"
\nAgatha June, UX designer
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 themcirrus, cumulus, stratus, cirrostratus, cumulonimbus, altostratus, lenticular; all of the ones I knew, and then some. Id 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. (Theyre not always easy to tell apart, of course, but that doesnt bother him.) He can predict, with some accuracy, which ones might drop rain on us and which wont.
And in his limited preschoolers 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 theyre clouds, dinosaurs, bugs, cars, dolls, or movie characters. Certainly their imaginations arent limited by that left-brain knowledge, despite our grownup romantic biasesmy 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, Im 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 its clear to me that anyone who simply wants to design interfacesthat is, anyone who needs to know patterns as one component of their craft knowledgewont 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 cant imagine the work that went into this, having tried it myselfits 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 youd 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 youre 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, dont forget).
You might even go out and find your own pattern examples in the mobile apps you use daily. In fact, Id bet that once you learn these pattern names, you wont 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, goshI dont 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 wasnt only the pattern identification, but in the hundreds of examples Id 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.