A quick overview of how to use design patterns every day
In this article, Chris Bank of UXPin – The UX Design App details what mobile design patterns are and how to think about them when designing your mobile app, and touches on the importance of animations and gestures – they’re covered in more detail with examples from over 50 hot mobile apps in UXPin’s free e-book, Mobile UI Design Patterns 2014.
“Creativity involves breaking out of established patterns in order to look at things in a different way.” –Edward de Bono
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.
Are you looking for responsive website templates and online website builder?
Get Startup Design Framework now!
Use coupon code START50 for 50% off!
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.
Here’s A Quick Example
Below I’ve deconstructed Secret’s discoverable controls to give you a real-life example of how to think about mobile design patterns on a daily basis.
The user wants quick access to controls that are secondary or only relevant to specific sections or content in the application.
Clear up the clutter and let users discover particular actions only when they need them. These invisible controls can be accessed by any gesture – swipe, tap, double-tap, long-press etc. (which we talk about in the gestures pattern). This gives you the ability to keep these actions off-screen, saving some valuable real estate. Secret, for example, uses gestures instead of visible controls. Swipe right and you’ll expose an action menu, which is a minimalistic version of a drawer pattern which we’ve covered earlier. When creating content, users can swipe horizontally or slide their finger vertically across the background to change its color and pattern, or in case a picture is being used, its brightness, saturation or blur. There are no other controls that let you do this — nor should there be. This UI design pattern is so intuitive and clean that you’re bound to see a lot more of this type of interaction. Pinterest is another app that uses gestures to hide action buttons. A long-press on an image reveals buttons that let users pin or comment on it by dragging the pop-up control to the button.
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.
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.
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.