Considering a career in UX? Or maybe you’re already in the beginning stages of learning how to design basic prototypes or more polished UI mock-ups? If so, you may have come across the term “UX patterns” and wondered what they are.
In this guide, we’re going to discuss what UX patterns are (and aren’t), and what’s the rationale behind their development. We’ll dig into how you can incorporate them into your design process, as well as the impact they can have on your design development, flow, and the usability of your digital product. If you’re already acquainted with UX patterns and would like to jump to a specific section, simply select it below.
- What are UX design patterns?
- Are UX patterns the same as UI patterns?
- What are UX and UI pattern libraries?
- Why are UX patterns valuable?
- What is the best way to use UX patterns as a new designer?
- What are dark patterns in UX design?
- Where can I find UX pattern libraries?
- Final thoughts
- Further reading
Want to simply start from the beginning? Then let’s dive in!
1. What are UX design patterns?
UX design patterns are repeatable solutions to recurring design problems. If you are designing a new website, or the wireframes for that site, you will want to figure out the easiest way that users can interact with your site.
Some basic things we ask users to do on nearly all sites are: sign up, sign in, log in and log out. Each of us use numerous web and mobile applications on a daily basis and I think we can all agree that re-entering our name, email, password and other information repeatedly is tiresome. Sometimes we can use a design pattern to solve a common problem like this.
The problem: Users understandably are short on time and patience from having to complete this rote task repeatedly to access their information or get their work accomplished.
The solution: Finding ways to eliminate or at least diminish this pain point for them.
Design patterns: Although each designer could design their own solution to this problem, several useful solutions have already been designed and proven to be effective. For example, some sites allow users to sign in using social media, others don’t ask users to sign in until they really need to, and others save their users’ data and pre-populate the sign in fields (with the permission of their users). To see an example of a design pattern check out UI Pattern’s solution for allowing users to create an account after they’ve had a chance to try it out. Or check out these three interaction design examples.
2. Are UX patterns the same as UI patterns?
Now, as you’ve likely noticed, job titles in UX are many and varied. This is because the genesis of user experience design only goes back about 100 years. In fact, the field itself didn’t really exist until roughly the 1990s when Don Norman all but invented it, giving himself the title: User Experience Architect. As such, some of the job titles and terminology have yet to be standardized and some of the lingo can be a tad confusing.
Just like it sounds, a pattern library is a collection of information, resources and examples of design patterns usually “housed” on a server and accessed through a website. I.E. Websites with examples of problem solutions. The best one I’ve seen so far is Mail Chimp’s.
3. What are UX and UI pattern libraries?
I would posit that the two terms (and hence their respective libraries) would house distinct patterns. However, from what I can tell, the terms are often used interchangeably. You will notice that the site I recommended above is called UI Patterns; however, it shows ideas or solutions to common design shortcomings, such as how to handle empty states, which resemble mini user flows. Pattern Tap by Zurb, on the other hand, I would call more of a UI pattern library as it showcases ideas for creating engaging UIs rather than user flows. On another site, also called UI Patterns, you will find problems and solutions. As you can see, although two of these sites house what I would refer to as UX patterns, none are called UX patterns.
Note: Both Google’s Material Design guidelines and Apple’s OS X Human Interface Guidelines (along with their Android and iOS versions) are really style guides, not pattern libraries.
4. Why are UX patterns valuable?
People naturally look for patterns. When we arrive on a web or mobile site, we often think we already know where to click. This is based on our prior experience. Sometimes we’re right and sometimes, to our chagrin, we are wrong…and we find ourselves fishing around for next steps.
When sites incorporate known patterns, users often have an easier time getting where they’re going or accomplishing their goals. Some would argue that if we all use design patterns our sites will become cookie-cutter-like. However, most designers agree that there are significant user benefits to following previously established patterns…and then tweaking them a tiny bit when benefit can be derived for our users.
According to designer Peter Zalman, in his article Design Patterns, “the UI object or screen intuitively implies its use”. Using standard design patterns reduces cognitive strain. If people are already familiar with how objects on an interface will act, it saves them from thinking about what to do next. Reducing the need for people to think too much is important, if you’d like to keep them as users. Salman says that if you can’t find an existing pattern for an interaction then you must “be prepared to explain and rationalize, why and how [the] benefits of developing this custom pattern outweigh [the] cons.”
Designers also benefit from using design patterns. Patterns save us from having to constantly reinvent the wheel. Engineers have known this for a long time. They now have large repositories of open-source code like Github that other engineers can use whenever they like, or that they themselves can recycle. Rewriting similar code from scratch takes a lot longer than copying, pasting and tweaking. Likewise, designers who use design patterns can free up time for creating and tweaking, which is really the fun part, no?
5. What is the best way to use UX patterns as a new designer?
As a new designer, I find there is so much to learn that it’s hard to know where to start. For myself, I find that picking just a couple of resources and then reading them thoroughly has helped me to begin to get a feel for a few of the common design patterns.
Similarly, when I was designing my first prototypes, I didn’t really understand what the patterns were for. I found all the resources to be overwhelming rather than helpful. I would say that when you are imagining the steps (or wireframes) for a particular interaction, first make a list of the things you normally dislike about these sorts of interactions.
Then, make a similar list about the times when you thought the process was more bearable or even pleasant (if you can remember; if it was a good interaction, you may not have even noticed how they got you from point A to B). The reasoning behind these first two steps is to be able to weed out the well-designed patterns from the not-so-well-designed patterns out there as you do your research.
Lastly, I would look for established design patterns for the interaction and incorporate that into you design. And of course, remember, simpler is better.
6. What are dark patterns in UX design?
According to the website by the same name, “a dark pattern is a user interface that has been carefully crafted to trick users into doing things, such as buying insurance with their purchase or signing up for recurring bills.”
This pattern library is curated by four user experience designers. They came together to document and make public common ethically questionable user interfaces both to make the public more aware and in the hope of urging the companies that use these bad practices to change their ways.
They share some of the purposely poorly designed techniques companies use like forced disclosure, friend spam, and sneak into basket to take advantage of users. Incidentally, you know those sites that don’t let you unsubscribe? They call those Roach Motels.
7. Where can I find UX pattern libraries?
If you do a Google search on UX patterns, you’ll find a plethora of resources. Here are a few of my favorites.
UI Patterns – Clear, simple problems and solutions with wireframe examples and explanations.
Little Big Details – They showcase design inspiration patterns that they’ve found useful. They encourage anyone to make a submission to the library if they would like to. You can also find them on Twitter
Design Details – Brian Lovin reviews what he considers to be some of the best digital products. His focus is mostly on visual design and interactions. He also hosts a podcast called Design Details which he hosts with Brin Jackson. They interview a designer on every episode…worth taking a peek.
8. Final thoughts
We’ve talked about what UX patterns are and how and why to use them. Remember…
- It’s not boring to use them. Rather, they make using your application easier for your users. And, you can always tweak them (the patterns) if you have an explainable and justifiable reason backed up by user research.
- Most of the best patterns are surprisingly simple. Stick with these and free up more time and space in your brain to dream up novel micro-interactions or tiny tweaks.
- Start slow. There are a lot of patterns to learn. Choose a few sites. Then study them in depth so you can more easily grasp the big picture in the beginning, or see the larger patterns or commonalities within sets of smaller interactions.
Enjoy the resources and happy researching, wireframing, and patterning.
Further Reading
Thirsty for more tips, tricks, and spectacularly structured guides to UX design? Then I heartily recommend the following articles!