Foreword
The first thing Greg told me when we met was, “You wrote the book I was working on,” referring to the book Mobile Design Pattern Gallery that I had just released with O’Reilly Media (2012). I felt a little guilty at the time, but now I am glad I beat him to it. But not for the reasons you might think.
When I started the pattern gallery, I focused on identifying universal design patterns across the six major mobile platforms. Two years later, the industry is maturing, and only three big players are left, each with their own distinct patterns and principles. Universal patterns are still valuable, but more valuable yet are the deep dives into specific operating systems.
Greg saw this coming and decided to focus on the fastest growing platform, Android, and the most sophisticated release yet, Jelly Bean. His book meets mobile designers and developers where they are most comfortable and expertly guides them towards mastery of mobile user experience.
This book is more of a workshop than a reference book. Greg builds upon the universal design patterns for mobile devices and tablets and the Android UI design guidelines and takes the topic further into hands-on practical applications of the design principles. Each section covers fundamentals, warns of pitfalls and antipatterns, and then puts the lessons to the test by showing in detail how to redesign an existing app. You can and should bring this book to design sessions, and you should share it with your team. You will save countless hours solely from using the patterns in Chapter 7, “Search,” and Chapter 8, “Sorting and Filtering.” By reading and using Greg’s entire book you will tremendously improve all aspects of the mobile experience you will be creating for your customers.
Bottom line, there is no other resource out there that goes to this level of depth on Android application design. I just hope Greg writes a Windows pattern book next.
Enjoy,
Theresa Neil
UX Designer, Start-up Advisor, Author/Speaker
Theresa Neil Interface Designs (www.theresaneil.com)
Introduction
Let me begin by answering some questions about the book you hold in your hands.
Why Mobile Computing?
Jim Rhodes: You're not a soldier.
Tony Stark: Damn right, I'm not—I'm an army.
—Iron Man, Marvel Studios, 2008
Mobile computing is the most game-changing development in human history. You live in the most exciting age—one of almost limitless potential, where your information, idea, product (in short, any meme)can reach virtually every person on the planet in a matter of days, if not minutes. And that is because no other modern technology has the reach and the potential of mobile computing. But simple penetration is not enough. The transformative force of mobile technology comes from the way it cradles people, empowers them to connect easier, make smarter decisions, and frees their minds in their soaring flight to go beyond the mundane.
With the coming of capable touch smartphones, the relationship with technology has shifted to that of intuitive digital assistant, an extra organ with super-human sensors—a true symbiosis that can best be described as a relationship of a Cyborg with his cybernetic components, or that of Tony Stark and his Iron Man suit.
Iron Man is my favorite metaphor because the suit is not a part of Tony, yet when he puts it on, he is one with the device. The Iron Man suit takes Tony’s intention and transmutes it into action, on a grand scale, and without much effort on Tony’s part (that is, without cognitive friction). At the end of the day, the Iron Man is just a man. Yet the power is always inside him, as it is in each of us. It takes this unique symbiosis with technology to truly enable and unleash that incredible power.
The mobile phone is our Iron Man suit. The mobile experience, when executed well, is a cybernetic skeleton. If you design and develop your app skillfully, your customers will feel protected and empowered in a way similar to how Tony Stark feels when he puts on his Iron Man suit.
Why Android?
Anyone following mobile space is aware that in the beginning Android had a few growing pains. (And that’s putting it mildly.) Market fragmentation, overall confusion born out of a lack of focus and standards, and overly frequent updates all bear some of the blame. Yet like a professional prizefighter fueled by massive adrenaline and steroids, Android embraced these challenges head-on and managed to improve and evolve rapidly and grow market share faster than anyone thought possible.
As of this writing, the Android smartphone operating system was found on three out of every four smartphones shipped during the third quarter of 2012 (3Q12). According to the International Data Corporation (IDC) Worldwide Quarterly Mobile Phone Tracker, total Android smartphone shipments worldwide reached 136.0 million units, accounting for 75 percent of the 181.1 million smartphones shipped in the third quarter of 2012. The 91.5 percent year-over-year growth was nearly double the overall market growth rate of 46.4 percent (https://www.idc.com/getdoc.jsp?containerId=prUS23771812). With the release of Android 4.0 Ice Cream Sandwich, Android created a purely digital, business-like demeanor with a powerful core of a set of standards that work on virtually every device, while also dealing a left hook to fragmentation through a set of clever responsive design decisions for the structure of the menu and navigation scheme. All this new serious business sense comes wrapped up in a set of open standards and a well-evolved code base.
In short, in my humble opinion, the state of the Android ecosystem is now the perfect storm combining the factors for explosive near-term growth and long-term market dominance.If you have been working with Apple iOS, Windows Mobile, BlackBerry, and older Android OS, or if this is your first foray into the mobile space, today is the perfect time to look at designing and developing Android 4.0 apps.
Why This Book?
If you want your customers to feel as empowered when using your app as when they put on the Iron Man cybernetic exoskeleton, you need to unlock the patterns behind effective mobile design and apply them to your context. The book in your hands is the key to those patterns. Within these pages is everything you need to succeed in creating a great mobile experience.
Use What Works
This book is about what works: design patterns. A design pattern is a repeatable solution that helps resolve a particular problem within a specific context. But why do you need patterns—isn’t reading the Android design docs enough? What makes design patterns uniquely effective is the way they communicate best practices whileaddressing the complexities involved in real design problems. As Christopher Alexander (the early pioneer of design patterns as formal ideas) says in his book Timeless Way of Building (Oxford University Press, 1979), the patterns make up the vocabulary of a design language that can be used to build things that are whole, complete, and alive (what he calls "the quality without a name").
In addition to helping you build usable apps, design patterns are intensely practical building blocks: they are small and can be learned and understood easily. You can combine patterns to create usable and delightful designs. Finally, patterns form the design language you can use to communicate simply and effectively.
Apply 58 Essential Android App Patterns
In Part 2 of the book, you discover all the patterns you need to create great interaction design and intuitive Information Architecture for your Android 4.0+ apps. There are 58 essential interaction design patterns for dealing with the most challenging aspects of the Android app design: welcome experience, home screen, navigation, search, sorting and filtering, data entry, and forms. The patterns in this book are designed to look beyond the obvious and build on the official Google documentation, allowing you to move smoothly from theory to practical applications. In addition, there are specific chapters covering key design patterns for mobile banking and dealing with the tricky aspects of tablet design.
Avoid Common Pitfalls with 12 Antipatterns
In addition to 58 patterns, there are 12 antipatterns, describing the most common mistakes to avoid in your quest for customer empowerment, delight, and enjoyment. Standalone antipatterns are mobile evolutionary dead-ends you want to steer clear of. Sometimes you also see the same antipattern icon used as part of the regular pattern. These are common pitfalls (lined with spikes on the bottom) that will catch the unwary. Read those carefully—often only a part of the screen or a specific interaction is called out as the antipattern and not the entire screen. The antipatterns and negative examples are marked with the symbol you see in the margin next to this paragraph.
Be Inspired by Innovative Ideas
In addition to helping you build a rock-solid design pattern foundation, this book gives you the confidence and inspiration to move beyond the tried-and-true patterns to create exciting innovative implementations from existing mobile ideas and interface components. You can explore experimental patterns (marked with the symbol you see in the margin next to this paragraph), which stretch the existing ideas and mobile status quo.
In the workshops I teach around the world, people often ask me: “Do experimental patterns work?” To answer this question, let me tell you a short story. In September 2010, I presented a pattern I called Immersive Navigation at Design4Mobile in Chicago. I suggested that the fold-out menu navigation used by games like Angry Birds can and should be adopted to more “serious” mobile applications like e-commerce, news, and social media. Many of those present were skeptical: Would this work? Can you even get these apps past Apple’s stringent guidelines that require the use of the tab bar? To this I replied that the Apple tab bar is merely a set of training wheels, and that I believe the mobile consumer is ready to upgrade to the latest Harley-Davidson, which, at the time, caused quite an uproar.
Less than a year later, Facebook came out with a new fold-out navigation menu on the top-left corner. Other successful apps started using it too; Flipboard, for example, used the same pattern on the top-right corner. Today this pattern, known as the Drawer,is part of the standard Android 4.0 toolkit, and it’s used by apps like Google Plus. I cannot, of course, claim credit for this development. I merely hope that I helped to provide another tiny push in the direction many talented people were already taking.
Mobile design moves at incredible, unprecedented speed. Experimental patterns described in this book are possible near-future design patterns that run slightly outside current mainstream mobile approaches. For those willing to try out new ideas, these experimental patterns represent incredible opportunities to stand out from the 700,000 apps currently available in Google Play, leap-frog the competition, and deliver uniquely engaging mobile experiences (“Google Says 700,000 Applications Available for Android,” Bloomberg Businessweek, 29 October 2012, Retrieved 5 November 2011). But please don’t take my word for it! Instead, I invite you to try out and customer-test the experimental patterns you like, to see if they will work for your particular project. I also invite you to use the ideas in this book as an inspiration to thinking outside the training wheels and building your own design approaches. As Eckhart Tolle so eloquently says in his timeless book, The Power of Now (New World Library, 2004), “Try it out and you will be the evidence.”
Use a Complete Design Methodology
Patterns are the focus of this book. However, Part 1 describes the complete sticky-notes methodology for building effective, cheap prototypes and customer-testing them. Part I also includes an entire chapter on Android visual design principles and a case study demonstrating the hands-on use of the principles.
The book you hold in your hands is the practical, hands-on culmination of 14 years of designing and building digital products. In it I share the most effective methodologies I developed for mobile customer-centered design. But you don’t just get one chapter on methodology! Instead, a customer-centric methodology for mobile design is woven into every pattern. Practically every one of the 58 patterns in this book is accompanied by a meticulous, detailed drawing of how this pattern or interface control would look when implemented using the sticky-notes methodology, one you can use as a guide to create your own lean agile prototypes. If you need help, don’t hesitate to ping me and my team at www.AndroidDesignBook.com, the companion site for this book, where you can watch detailed videos of mobile usability testing and get all your questions answered. This book is all about what works, and I want to make sure you get the most value from these patterns by putting them to work yourself on your own project.
Design What Works
I am not an adoring foam-at-the-mouth Google groupie. I have far too many projects under my belt—projects that required compromise, out-of-the-box thinking, and striking innovation—to be devoted to a single idea or doctrine. I have also seen many so called “pure” projects of every kind fail miserably. Thus in this book you will see Android adaptations of great ideas from other mobile operating systems such as Apple iOS, Windows Mobile, and even (gasp!) BlackBerry.
I outline the unique capabilities of the new Android OS in Part 1 of the book, while focusing the bulk of the material on practical issues that come up in design projects and effective solutions for solving real-world challenges. In short, this book is the compendium of everything you need to design great-looking and great-performing modern Android apps. Now, if you are ready to start, let’s do this thing!
What About the Code?
Glad you asked! After all, fantastic, intuitive design is all well and good, but you need to implement it at some point. There is no code in this book. Separating design from implementation was a deliberate decision because mobile design is a sophisticated endeavor with crushing constraints and pitfalls at every step of the way, so it took the entire book just to get through the design portion of the project.
To help you with coding your app, I have built a companion book site, www.androiddesignbook.com, especially to provide the complete support for Envision-Design-Build app life cycle. On the site there are more than 100 articles, numerous code examples, and mini-apps you can learn from and copy for your own purposes; regular design webinars, which deal with audience-posed design challenges; and a dedicated team of experts to answer your questions. Most important, there is a large supportive Android community to help you every step of the way. And an Android design certification program is being set up. You can registerfree with your e-mail simply by typing the code DROIDRULES into the space provided on the sign-up form.
I hope you join us!
How Should You Use This Book?
This book is meant to be a hands-on reference throughout the design and development life cycle of your Android app. Part 2 of the book is something you will refer to over and over again. However, I—along with the fantastic editors at Wiley—have spent considerable effort to write the book as a story you can read from the beginning to end. Antipatterns are usually at the beginning of the chapters that include them. Simpler patterns are found earlier in the chapter, and more complex experimental ideas are placed toward the end. General patterns are at the beginning of Part 2, and the more specific applications, such as mobile-banking and tablet-specific patterns, are at the end of the book.
If you have a specific question, by all means, start with the pertinent chapter and dig in! However, at some point (sooner better than later) you should read Part 1. It is meant as a brief, effective introduction to the Android 4.0 design and sticky-notes design methodology. Even if you consider yourself an expert, at the very least, be sure to read Chapter 1, which includes the AutoTrader redesign case study. It’s a great place to get your feet wet before you dig into the patterns in Part 2.
Who Should Read This Book?
I come to the discipline of customer-centered design from the background of back-end Java software architecture and Oracle databases. Thus, the material is hands-on, and the intended audience for this book is anyone involved with designing and developing Android apps. The book is aimed at mid- to advanced-level practitioners. However, a determined beginner can get full value from the book by using the design methodology to design, experiment, and build up skills to turn into an Android design expert. However, from the standpoint of design, goals, and monetization models, this book will likewise greatly benefit product managers, project managers, visual designers, user researchers, and business people by providing a common vocabulary with which to discuss mobile design and development challenges and various practical approaches to solving them.