Theresa Neil - Mobile Design Pattern Gallery: UI Patterns for Mobile Applications

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.

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