Ever notice how most products are relatively similar? Sites feature a top nav bar. Apps use tab bars. Most logins will be made up of two input fields requesting your username and password, together with a button to submit the keyed-in info. We generally follow the same steps when we purchase a goodie and go through the check-out process.
Are designers all just going about our day copying each other’s work? Not quite. Many of us use interface and interaction design patterns to shape our work and, as a result, design similar-looking user interfaces.
In this guide, I’ll tell you everything you need to know about UI design patterns:
- What are UI design patterns?
- Why are UI design patterns important?
- The UI design pattern formula
- What are the most common UI design patterns?
- What are dark UI design patterns?
- How to use UI design patterns
- Where to find existing UI design pattern libraries
- How to create your own UI design pattern library
- Final thoughts
1. What are UI design patterns?
UI design patterns are recurring solutions to common problems in user interface design. They help us avoid reinventing the wheel and make designing a reliable solution to an interface design problem a lot faster.
Even though they are the bread and butter of UI design, UI design patterns are not a designer’s brainchild. They are rooted in architecture and programming and were designed to optimize the user interface development process.
By creating a library of components that provide proven solutions to user problems, developers were able to cut down the time they spend creating and testing parts, expediting the overall development process. It did not take long for us UI designers to pick up on the benefits of UI design patterns.
UI design patterns are everywhere on sites and apps, and are familiar to users. It will take seconds for a user to understand what to do within an interface designed with common UI design patterns. Adopting common patterns means you can leverage this knowledge and increase the ease of use of your product.
It is worth noting that UI design patterns aren’t a one size fits all solution—each pattern you choose to use will still need to be adapted to a specific use case.
Most of us wear t-shirts. My t-shirt and yours may vary in size and fit, but both are recognizable as t-shirts. We can add a nifty little pocket, details on the short sleeves, and print all kinds of stuff on them. However, the structure is pretty much the same regardless of how much we tailor the garment to our liking.
UI design patterns are similar. They offer a general structure we can work off of and add, subtract or alter parts to tailor it to a particular set of requirements unique to each design project.
2. Why are UI design patterns important?
UI design patterns aren’t just common features that can be copy-pasted into an interface; they’re visual strategies for quickly and efficiently solving common UI design problems. Think of them as a blueprint that designers refer back to for guidance when creating interfaces. UI design patterns also provide a common language for designers, which keeps misunderstandings to a minimum, and establishes consistency when multiple designers are working on the same project.
UI design patterns aren’t just useful for designers—they’re also important when it comes to user retention. The reason that so many apps and websites feel so easy to navigate is because of common UI design patterns. Could you imagine logging into a website that didn’t have a navigation bar or any clear buttons? Confusing, right? When users become used to seeing specific patterns, any change to those patterns could result in losing out on some key leads and conversions. UI design patterns keep the cognitive load to a minimum by making the interface feel intuitive.
3. The UI design pattern formula
You’ll find loads of UI design pattern libraries online. In them, you’ll find UI design patterns categorized. The problems they can help you solve differ, but the elements included in each are the same.
UI design patterns include:
- Problem: What does the user want to do?
- Context: When should the pattern be used?
- Solution: What is the solution?
- Examples: Where and how has the pattern been implemented before?
4. What are the most common UI design patterns?
Some of the common UI design patterns fall into the following categories:
- Social sharing: these patterns facilitate the promotion and sharing of content onto various social media platforms.
- Navigation: navigational patterns help guide users around the interface, ensuring they’re able to find their way back to the homepage if they get lost.
- Input/output: these patterns include various forms that allow users to submit information, or receive feedback from the site based on an action.
- Content structuring: these patterns are concerned with how your site is organized in a way that feels intuitive and accessible.
5. What are dark UI design patterns?
Dark UX/UI design patterns, such as trick questions or hard-to-see options in a drop-down menu, are patterns that trick users into performing a specific task unknowingly. Some dark patterns are less harmful, such as tricking users into signing up for e-mails. Others hide key pieces of information that mean users get locked into memberships or direct debits. Dark patterns are a lot more common than you might think. Nevertheless, they’re generally frowned upon and—if misused—can destroy trust between a company and its users. UI design relies heavily on empathy, and creating an interface that’s enjoyable to use–not frustrating!
6. How to use UI design patterns
UI design patterns can’t be plugged directly into an interface. We need to tailor them to fit a particular scenario. So how do we do it?
Start off by defining the problem you’re tackling. With a clear problem in mind, head over to your favorite UI design pattern library. Click on the category that best fits your need.
Check out all the different examples listed. How is the pattern meant to be used? How have other designers used it? What can you learn from it? Pay attention to the different kind of elements used and how they are structured.
Leverage the knowledge shared about this UI design pattern and create your own solution.
7. Where to find existing UI design pattern libraries
There is no shortage of UI design pattern libraries that offer inspiration and a wealth of information. Some of my all-time favorite libraries are:
To start, I’d recommend UI Patterns. While the other libraries are great, they do not offer as much documentation as UI Patterns does. The level of detail included with each UI design pattern is much more beneficial to a budding designer!
Looking through all these libraries and seeing these solutions everywhere may have you thinking there is no room for innovation in UI. However, there is plenty of room for novel and new solutions. If no pattern fits the problem you’re trying to solve, or you cannot find one to use as a structure, feel free to draft up your own. Just remember, test your work to help identify possible pain points and optimize before you launch.
8. How to create your own UI design pattern library
I’ve made it a point to analyze apps I enjoy…and also those I do not. I like to take screenshots and study different UI design patterns in use. Throughout the years, I’ve begun to build a library of my own. I reference it often and draw inspiration from it consistently.
Having your own UI pattern library to serve as a style guide for your projects is always a good idea—and a lot easier than you think. Take a look at these three best practices to keep in mind when creating your own UI pattern library.
- Familiarize yourself with popular UI pattern libraries. Perusing UI design libraries will give you a good idea of which patterns you should include and which ones should be avoided.
- Develop a clear hierarchy: It’s weird to think of using patterns for a library of UI patterns, but that’s what will keep your library organized. Your UI pattern hierarchy should distinguish more complicated macro-patterns from smaller ones, such as a sign-in register.
- Make sure the library is usable: A UI pattern library is intended for everyday use, not to look pretty or be confusing for those who are new to the project. Make sure the content is easily usable for all stakeholders, and doesn’t involve too much technical language.
Next time you’re enjoying an experience or are frustrated by it, stop to consider why. Take a screenshot, make notes, and begin to build your own archive of solutions!
9. Final thoughts
So there we have it, everything you need to know about UI design patterns! It might seem like a lot to digest, but once you get the hang of them, they’ll make your design process run a lot smoother.
If you want to read more about user interface design, take a look at the following guides: