Mobile Design Patterns: A Practical Look

App Design • UX DesignChris Bank • July 02, 2014 • 4 minutes READ

UI design patterns are frequently misinterpreted and misused concepts.

Too often, they’re confused with specific elements (or features) that can simply be developed as-is from one of the popular Design Pattern and Wireframing Libraries. While those examples are a great start, they’re not enough. And although UI design patterns overlap with development patterns, they’re focused more on solving common user problems and less on product problems.

To help illustrate my point, I’ve deconstructed an abundance of mobile design patterns and elements from the hottest mobile applications around – Uber, Pinterest, Tinder, OKCupid, Spotify, Instagram, Dropbox, Secret, Flipboard, Snapchat, Mailbox and many, many more –in UXPin’s new e-book, Mobile UI Design Patterns 2014. Some of the UI design patterns and elements are also covered in UXPin’s free Web Design Trends, Mobile Design Trends, and The Guide to Wireframing e-books – bookmark them for another time since there’s a lot to catch up on.

What Are UI Design Patterns?

Generally speaking, a UI design pattern is a reusable solution to a commonly occurring problem you might encounter every day.

It is not a feature that can be plugged into your product design and it’s not a finished design that can simply be coded. Rather, it is a formalized best practice, a guide or template, that designers, developers, and product managers (and anyone else who touches product) can use to solve common problems when designing a mobile application or system. Although it has to be utilized in the correct situation, it is generally language, device, and platform agnostic – although there may be technological limitations depending on how the designs are ultimately implemented.

And, of course, if implemented in the wrong context, they do more harm than good – but we’ll focus on the positives for now.

How Should I Use UI Design Patterns?

Despite the glut of Design Pattern and Wireframing Libraries out there, few online resources actually break down how to think about these patterns with supporting examples. Below, I’ve broken out the general format and provided a brief example to get you started.

Here’s what you need to think about when evaluating a design pattern and adapting it to your own needs:

• Problem Summary: What user problem are you solving? Stay focused, and phrase it like a user story – in one sentence only.
• Solution: How have others solved this problem? Among others, few things to detail include user navigation (including shortcuts), getting user inputs, dealing with data and integrations with other services or applications, and displaying information and content (including defaults).
• Example: Great, can you show me? Sometimes a screenshot or mockup is sufficient; other times, a user flows and/or additional notes are necessary to clearly communicate the pattern.
• Usage: When should this pattern (not) be used? Among others, a few things to detail include product architecture, interface layout, device(s), programming language, absence or existence of other design patterns, type of user, and primary use cases.

For the sake of brevity, we’ll highlight the first three details of the design patterns in this e-book below. In our next e-book, however, we intend to dive deeper into the solution details and use cases so you have a deeper understanding of when and how to use some of these design patterns.

The Importance of Interactivity in Mobile

At the heart of many new mobile design patterns is the evolution of gestures and animations in mobile development. I talk about this at greater length in Mobile Design UI Patterns but want to touch on it briefly because of it’s significance.

Gestures

Mobile application design has exploded with new design patterns and their implementations. Made possible by advancing hardware and software capabilities, the mobile space is developing with unprecedented levels of human-computer interactions. These solutions are largely empowered by new gestures that allow for a wide variety of ways to help users taking particular actions, navigate through the app and socializing – a recent development this past decade –while preserving screen real-estate.

Animations

The best thing about using gestures on mobile is that they feel so intuitive and responsive in the same way a real object would. Animations play a very important role in maintaining that illusion for users and keeping them grounded in the UI. Beyond the tangibility of animations, they’re often used to delight users by manipulating the laws and lens of nature.

Learn From The Best

“Good artists borrow, great artists steal.” – Picasso (and Steve Jobs)

Take these design patterns and elements from UXPin’s new e-book, Mobile UI Design Patterns 2014, and tailor them to solve your own problems and, most importantly, those of your users.

Armies of designers, developers, and product managers have slaved over solving many of the same problems you’re trying to solve today. Piggy-back off of their hard work to move faster and smarter — just don’t be lazy about it. Your product, users, and team are unique, even in the slightest ways, and need a unique final solution even if the general solutions are the same as thousands of others.

Remember, there is no one-size-fits-all solution when it comes to user experience design. Many of the patterns we’ve covered here work extremely well when mixed and matched with each other.