Neil - Mobile Design Pattern Gallery

Beijing Cambridge Farnham Kln Sebastopol Tokyo

If you purchased this ebook directly from oreilly.com, you have the following benefits:

If you purchased this ebook from another retailer, you can upgrade your ebook to take advantage of all these benefits for just $4.99. to access your ebook upgrade.

Please note that upgrade offers are not available from sample content.

To name something is to begin to understand it.

My five-year-old son, like many children, enjoys looking at clouds. Recently, he clued into the fact that different kinds of clouds have different names. And so, being of good geek stock, he proceeded to memorize themcirrus, cumulus, stratus, cirrostratus, cumulonimbus, altostratus, lenticularall 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 preschooler 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 grown-up romantic biasesmy son still sees palaces and ducks and cauliflowers in the clouds, even as he names them cumulus.

So it is with us grown-ups. 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 was pictures. Lots of pictures. After looking at some of these catalogs in books and on 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 myself; its no small feat to review this many mobile apps, see what works best in them, and gather up all these carefully cataloged 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:

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

Sometimes its good to stop and reflect on the many factors that affect usable design. But more often, theres no time for thatyouve 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 2011WebOS, Symbian, and BlackBerryare 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.

Its 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 experiencealong with the patterns in this bookwill give you the confidence you need to design beautifully usable apps.