Chapter 17: Introduction to User Interface Design Patterns

A design pattern is a well-thought-out solution to a common problem. In your everyday life as well as in your work, you likely run into the same problems over and over again. In many cases, you may have found solutions that work and then repeat the same behavior patterns whenever you encounter the same problems again. People also tend to share such solutions with others.

Design patterns provide a way to formalize the same approach to help designers with their professional challenges. The “gang of four,” in their book Design Patterns, were the first to utilize the design pattern approach in the software realm. If you are a software developer, you are probably familiar with this book.

Design Patterns introduced multiple software design patterns that described commonly known problems in building software and solutions for solving them. These patterns are now commonplace in developer language. You hear developers talking about singletons and factories when they talk about software architecture and design. These design patterns not only give them proven solutions to their problems but also provide a very powerful communication tool. Having commonly used names for design patterns allows developers to communicate complex solutions in one or two words.

User interface design patterns

User interface design is less formal than writing code or designing software architecture. But still in design the same design problems reoccur. This is especially true when you’re designing software for small screens of mobile devices, which add further constraints to the available solutions.

In the time of this writing, Google Play has more than 500,000 apps—many with great user interfaces and many with poor user interfaces. By viewing thousands of different solutions to common problems, you can see which solutions have worked and which have not. By studying other apps, you’ll start to see good user interface design patterns as well as bad ones.

Designing the design

The first chapters of this book talked about user goals and scenarios and understanding the user’s need. Then, the following chapters talked about tools you can use to build the interface once you know what your users want. This part, the user interface design patterns, is what you use when you need to organize the components of your designs. Design patterns can help you form a concrete design based on the user’s needs.

It is good to remember that user interface design isn’t an exact science, so user interface design patterns are much more like foundations for solving problems than complete out-of-the-box solutions. They can sometimes be applied directly, but more often than not they should be adapted to the needs of the particular user interface being designed.

When to use and when not to use design patterns

A design pattern should never be applied if you don’t have a compelling reason to do so. You should never try to solve a problem that doesn’t exist. For example, the side navigation Android user interface design pattern—which is very widely used—does not work with every app. If the app in question shows the next departures of a nearby bus stop, for example, the design probably should not have side navigation. Figure 17-1 shows an example app that is using side navigation well. There is much more about side navigation in Chapter 19.

Tip: Never use a design pattern if it doesn’t solve a problem you have! Even if you have an exact problem described in a pattern description, design patterns don’t always work in every app. It’s always wise to evaluate the use of any design pattern in the context of your app.

Figure 17-1: Evernote’s use of side navigation is justified, as the app has more a complex structure.

Source: Evernote Corporation

Benefits of using UI design patterns

There are many benefits of knowing the platform and its common design patterns.

Don’t reinvent the wheel

Design patterns don’t emerge overnight. They have evolved through many iterations. The solutions that form design patterns have been vigorously tested by thousands of designers and developers and used by thousands of users. The solutions that have survived as design patterns have been found to work in multiple different apps in the real world. Some of the solutions have been tweaked and refined by highly skilled designers over time. The benefits of using solutions like these are evident. You get to build on top of a solid foundation.

Platform consistency

Solid foundations aren’t the only benefit of using user interface design patterns. The user interface design patterns also bring consistency to the Android platform. Users know how Action Bars and side navigations work, and they don’t have to learn your app’s user interface separately. Even complex user interfaces are easy to use if they are consistent in all, or most, of the apps on the platform.

Library support and ready components

Another notable benefit of using UI design patterns is the library support. Some of the design patterns are going to find their way into the Android core libraries and Google’s support library. Using those components guarantees quality of the components. But many of the design patterns won’t be supported by the core libraries. Fortunately, there are multiple third-party library projects, many of them Open Source, that aim to fill the gap. It is always better to use a library that has been tested and is being maintained than to build your own. Just remember to contribute your changes back to the community!

Design Patterns in Android design guidelines

Android design guidelines list some design patterns as well. You should take a look of the listing in the Android design website at http://developer.android.com/design/patterns/index.html. Some of the design patterns listed in this book are the same as in that website. When I talk about a design pattern that’s listed in the Android design guidelines, I give you a link to the web page.

Tip: There are a lot of bad designs out there. Chapter 21 covers bad user interface designs by explaining what not to do. These common solutions are bad for the user experience. I’ll explain why they’re bad as well as give you an alternative solution that is better.

User Interface Design patterns found in this book

As mentioned previously, a design pattern is a proven solution to a commonly occurring problem. I have kept the same approach in this book. For each of the design patterns, I start with the problem description after a short overview. After describing the problem I talk about the available solutions. The solution describes the design pattern and usually also gives examples of apps. The solution is an abstract description of how the user interface works. It doesn’t tell you how to implement it, although sometimes you might have a really good idea how you would implement it intuitively. The solution part of a user interface design pattern is like a developer goal. Your goal is to make the user interface work the way the solution describes.

Phones, tablets, and responsive design

One of the important themes in this book is the responsive design that makes your apps work well on small phone screens as well as on large tablet screens. For each design pattern in this book I describe how to use it on small and large screens. Some of the design patterns can be used directly without any modifications, but some of them need to be adapted and in some cases even discarded when the user interface moves from a small screen to a large screen.

Example apps

The example apps included in this book represent a good implementation of the design pattern. I encourage you to download and experiment with the apps I mention. However, the app design is moving so fast that some of the designs you see mentioned here might have been changed by the time you read this book. In all of the cases there are many other apps you can find to see the same design pattern.

Note that I don’t want to encourage you to copy the example app’s design directly. Each design pattern should be adapted to your needs; it is very unlikely that your app has exactly same needs as the examples shown here. Take time and evaluate the examples and other apps you find, and make your own design.

Example code

For some of the design patterns, I also include source code examples to help you get started; however, many of them don’t include any code. The reason for that is that many of the design patterns introduced in this book are well supported by multiple Open Source libraries. I have included links to the projects usually in github (https://github.com/), where you can find much better examples than the space in this book allows me to include. These Open Source libraries are valuable in the process of implementing your app. Many of them are backward compatible with older Android versions and allow you to skip some of the most difficult parts of Android development.

Design pattern naming

The name of a design pattern is an important part of it. As I mentioned, a well-known design pattern is a powerful communication tool. A sentence like “should we use an Action Bar on this screen?” can communicate a lot of information without having to explain what an Action Bar is. Using these standard naming conventions allows the design team to communicate effectively.

This book uses the terms that have gained popularity with the Internet Android design community. Many of the design patterns have multiple names and I have included some of the other names in the description of the design patterns that do not have a well established name yet.

It is also worth noting that design patterns often do not use the names of the technical implementation components or classes. The class names and package names in the Android source code serve a different purpose than design pattern naming. A design pattern name should refer to the problem it solves, combined with the solution. A technical class name, on the other hand, is typically used to describe the functionality.

User interface design pattern categories

This part of the book is organized into three user interface design pattern categories and one chapter on bad design patterns (called anti-patterns). The categories are loosely organized but hopefully will help you find the designs you need. The user action design patterns all have something to do with user interaction with the app. Layout and navigation design patterns can help you solve layout and scalability problems. The data design patterns can help you organize your data to make it easier for users to understand. Some of the design patterns could probably be in more than one of the categories.

Summary

User interface design patterns can help you move from an idea toward an app. It’s very likely that other designers have wrestled with the same problems you are encountering, so it makes sense to use these same solutions, which have already proven to work. You should, however, always be critical and make sure that the solution you are applying is solving a real issue you have. Do not add design patterns to your app design just because others are using them.