Mobile Design Pattern Gallery: UI Patterns for Mobile Applications

by Theresa Neil

When you’re under pressure to produce a well designed, easy-to-navigate mobile app, there’s no time to reinvent the wheel. This concise book provides a handy reference to 70 mobile app design patterns, illustrated by more than 400 screenshots from current iOS, Android, BlackBerry, WebOS, Windows Mobile, and Symbian apps. User experience professional Theresa Neil (Designing Web Interfaces) walks you through design patterns in 10 separate categories, including anti-patterns. Whether you’re designing a simple iPhone application or one that’s meant to work for every popular mobile OS on the market, these patterns provide solutions to common design challenges. This print edition is in full color. Pattern categories include:
"It’s a super handy catalog that I can flip to for ideas." —Bill Scott, Senior Director of Web Development at PayPal"Looks fantastic." —Erin Malone, Partner at Tangible UX"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!" —Agatha June, UX designer

Genres: Design, Nonfiction, Web, Software, Website Design, Programming, Computer Science

284 pages, Paperback

First published November 30, 2011

Reviews

[Shawn · Rating 5 out of 5]

Mobile Design Pat­tern Lib­rary by Theresa Neil is a use­ful if not essen­tial addi­tion to the lib­rary of any­one work­ing in mobile applic­a­tion design today. Neil has sys­tem­at­ic­ally com­piled a com­pre­hens­ive means of describ­ing inter­face ele­ments and clas­si­fy­ing between their cur­rent vari­ations. She cov­ers the most pop­u­lar mobile OS’s provid­ing a pro­fu­sion of screen cap­tures and suc­cess­fully devel­ops a lan­guage akin to Chris­topher Alexander’s work in archi­tec­ture and design to identify the role and the way in which dif­fer­ent choices inter­act as part of a lar­ger sys­tem. The roughly 250 page volume is com­pre­hens­ive and as many have already noted an excel­lent well of ideas for inter­face design­ers, not just in the mobile space, but more widely. As purely a mobile inter­face users rather than developer I have to admit a fas­cin­a­tion with the art. I am using a Nokia Lumia 800 Win­dows Phone right now to con­trast it with my iOS exper­i­ence. I found no issues with iOS have been an eager pro­ponent of its sim­pli­city and ease of use. I acquired WebOS-based phones as well as Android all in the name of exper­i­ment­a­tion. I am cur­rently quite fascinated/fond of the Metro UI and will­ing to give it a chance to impress. As a pure sid­e­note — and here I wish I used cal­louts on my blog — the wire­frames in Neil’s book them­selves bear a resemb­lance to the very simplistic approach of the Metro UI which I have a sense to why I find an imme­di­ate attrac­tion: there’s little or no meta­phor in the UI. Well, maybe not — my exper­i­ment­a­tion con­tin­ues. Inter­face exper­i­ence is hugely per­sonal and the role of find­ing appro­pri­ate design through a hol­istic approach is greatly aided by this volume. It puts the pieces in a lar­ger con­text, con­cisely demon­strates the vari­ances in imple­ment­a­tion between plat­forms and does so with appro­pri­ate nod to the art of user exper­i­ence of the prin­ted or digital eBook.

The organ­isa­tion of the volume is logic­ally divided into chapters on:

Nav­ig­a­tion
Forms
Tables & Lists
Search, Sort & Filter
Tools
Charts
Invit­a­tions
Feed­back & Afford­ance (the buzz word as of late)
Help; and
the very clever — Anti-Patterns
These cover the bulk of inter­face ele­ments from a pro­cess stand­point — and that is a ser­i­ous ele­ment of the book — it steps away from isol­ated ele­ments and iden­ti­fies them as exist­ing within a lar­ger con­text. Most UX/UI design­ers today, espe­cially within the mobile space can immerse them­selves in isol­ated design guides pre­pared by OS man­u­fac­tur­ers to ensure adher­ence or to express a vis­ion. Con­versely they can exper­i­ment deeply with imple­men­ted designs look­ing for suc­cesses and fail­ures in oth­ers work. This book offers a third approach and I think a worthy one of attempt­ing to think more broadly about an over­all strategy and in this finds a place in the Neilsen school of thought.

Through screen cap­tures, wire­frames and brief dis­cus­sions of the Neil includes a chapter of fail­ures to appre­ci­ate UX in design and to my praise includes the ABC news app which I have to admit baffled me as well. The spin­ning globe out of any con­text with repeat­ing stor­ies. The demon­stra­tion of some geek in a back room play­ing with a new three dimen­sional algorithm with little or no sense of how it might trans­late into actual use. Over all, the book is a fine ref­er­ence manual and a sur­pris­ingly good read through. It is of espe­cial use to UI developers, but is even of interest to any web developer look­ing for design inspir­a­tion.

[Rob · Rating 3 out of 5]

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.

[Nathan · Rating 3 out of 5]

It’s great to have it in the past summarizing patterns.
Some of them are really old and forgotten by history.
Some of the guidelines and good practices can still be relevant.

[Ujjawal Chauhan · Rating 3 out of 5]

The design suggestions in this book can easily be learnt by spending a week with good apps on your phone and looking at Dribbble at works and what doesn't.

Some part of the book is useful, but most of the content I found to be outdated and I believe this book will be out of print in next 10 years owing to flexible screen sizes.

[Michael · Rating 4 out of 5]

This book has proved invaluable over the years, when mobile device patterns were in their infancy this book was a solid reference in my day to day work. With the advent of the material design language from Google the years ahead suggest mobile interface patterns will rely more so on animated interactions to convey affordance.

Though this book will remain relevant for some time to come an updated version should be considered as this space evolves quickly.

Overall a great reference for those designing for the web of today.

[Alessandro Pellizzari · Rating 4 out of 5]

Come dice il nome, è una galleria di pattern utili per il design di siti mobile.

Molto completa (comprende anche degli anti-pattern nell'ultimo capitolo), e utile da tenere sottomano mentre si progetta un sito o un'applicazione mobile. In alcuni casi può essere utile anche per siti web "classici".

Avrei preferito un maggiore approfondimento sull'uso di alcuni pattern, mentre le descrizioni sono spesso brevi e limitate.

[Adam Wiggins · Rating 3 out of 5]

One of the very few practical guides to mobile UX I've managed to find. It's a straight catalog of patterns, but pretty feasible to read straight through since the descriptions are terse and most of the page space is given to screenshots of examples from real apps. The side-by-side comparison of a particular pattern implemented well vs implemented poorly is particularly useful.

[Luda · Rating 4 out of 5]

You can download a bunch of apps, try them out and feel what would be good for you.
Then, when you design your app, do as best as you can, from that experience.
But best practices are already out there, and Neil summarized them wonderfully in this book.

[Katherine · Rating 4 out of 5]

The terms used here aren't exactly terms Apple uses for those patterns. Gallery view is also a collection view in iOS. I appreciate this book as it is a very good reference for serious designers and developers.

[Renee Valdez · Rating 3 out of 5]

This is a good look at the current landscape that is mobile UI. Useful as a reference if you're unfamiliar with an OS, it explains conventions and other useful information. Worth the read.

[Mauricio · Rating 4 out of 5]

hay que echarle un vistazo para entender que los patrones de diseño de dispositivos móviles son diferentes a los de pantallas en la web...

[Harald Felgner · Rating 5 out of 5]

Highly recommended as well!

[Serge Boucher · Rating 4 out of 5]

The most important goal of a patterns book is to define a vocabulary to talk about a problem domain and thoroughly describe it, which this book does and does well. Highly recommended.

[Jose Miguel · Rating 4 out of 5]

it's a complete catalog with a lot of good examples and a concise explanation for each case.

[Alper Çuğun · Rating 3 out of 5]

This book is slightly dated but it is still useful to see all of these examples side by side and many of the principles they illustrate are as valid as ever.

[Asad · Rating 5 out of 5]

A must have for anybody into designing mobile interfaces and interactions.

[Olha]

Fucking awesome