Rob's Reviews > Mobile Design Pattern Gallery: UI Patterns for Mobile Applications

I just wrapped up reading [1] Theresa Neil's Mobile Design Pattern Gallery (published by O'Reilly), and I am happy to call it a worthwhile survey. I say "survey" because that's exactly what we have here: Neil takes a look at the dominant patterns (and anti-patterns) in the application interface designs that are targeted at mobile devices, and casts a wide net to cover as many of the major patterns as possible. The book does not take a particularly deep dive into any of the specific patterns--or even any one constellation of patterns--but it does hit the high notes for the critical interface paradigms that an application interface developer will face.

Neil covers these patterns as befits the survey style: by presenting each one (categorized/grouped accordingly), giving a short description of what characterizes the patterns, what situations present a good fit for that pattern, as well as pointing out the most common risks associated with that pattern. Each pattern then gets a series of screenshots from actual mobile applications which serve to demonstrate a successful or particularly illustrative example of that pattern. Neil covers: primary and secondary navigations (chapter 1); all kinds of forms and form elements (chapter 2); tables and lists (chapter 3) and charts (chapter 6); searching, sorting, and filtering (chapter 4); on-screen tools (chapter 5) and providing user feedback (chapter 8); as well as how to create accessible help messaging (chapter 9) and "invitations" within the application to draw users to those other elements (chapter 7). There is some repetition of patterns across chapters, but that helps to impress upon you how valuable these patterns are, and why they work the way that they work in those contexts.

The final chapter on "Anti-Patterns" was a particularly useful (and fun!) read, as well. Neil presents five anti-patterns in mobile UI design, [2] along with explanations on what makes them anti-patterns, and then suggestions on how to work within the previously discussed best practices to improve those designs. These case studies are useful because Neil is careful to break down each example into atomic mistakes, to identify the (likely) motivation behind those design choices, to explain why those design choices fail, and then to illustrate more sensible designs that accomplish the same thing but in a more intuitive fashion.

Though generally well composed, there are a couple of places where the book falls down a bit. First, the text and the images don't always match up--or, rather: the images that follow the text too often follow the text on the next page. Several times (especially early on) I found myself reading something, doubling back to look at the image, and being confused for a moment or two before advancing and "putting the name with the face"; this is an artifact of the medium, but it was a little jarring. Second, there are a couple of spots in the book that could have benefitted from another pass through spelling/grammar editors (e.g., "robust productivity tools t usually include tables", and "state-full buttons" (emphasis mine). Third, I could have used a concluding chapter to bring it all together--the "Anti-Patterns" chapter (sort of) does this implicitly, and there is a nice appendix [3], but I got to that final page and thought: Where are the parting words? Lastly, [4] the mobile space is moving so rapidly that this book may wind up feeling out-of-date in the not-too-distant future. There are several screenshots from several apps that are already out of sync with what's out there "in the wild"; this is good--because it means that those developers are innovating and changing their applications to improve their experiences, but it also seems to make these examples... less potent.

That being said, there are some important take-aways from Neil's book--whether you're doing mobile-specific development (her target audience for this book), or just designing/developing interfaces on any platform. Having big "tap" targets is critical for mobile apps, and though it's less important for a desktop application, the lesson about giving "more visual weight" to your primary call-to-action button? You'll carry that with you in all of your UI designs. With that in mind, I did find myself writing down notes that said things like: [5]

‧ an axiom: Be deliberate when introducing novelty.
‧ an axiom: Make it finger-friendly.
‧ an axiom: If you cannot be native, be neutral and not novel.

The images were there--sometimes as screenshots, and sometimes in the illustrations--to capture these sentiments, but sometimes I felt like there needed to be pithy sayings like those to drive the point home. Something... sound-bite-size. Does the book suffer because it lacks these? No, it does not. Perhaps they were even left out intentionally, as an exercise for you (the reader) to digest and internalize the lessons.

------

[1] Is "read" the right word for a "gallery" book like this? When you effectively have more pictures than words?

[2] Though these anti-patterns are easily extended to interfaces on any device.

[3] Which is really just more of a quick-reference sheet anyway.

[4] And this is probably obvious, and probably true of any technology book.

[5] I just got done reading The Joy of Clojure , so I think I got the idea from the "Clojure aphorism" sidebars in there.