Mobile Design Pattern Gallery

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