Using UI Pattern Libraries to Expedite Design
Recently, something sparked my memory about one of the ways I developed my foundation as a UX designer.
The situation: a friend with a background in user research and workshop facilitation recently accepted a position where she will put her fabulous insights skills to use, improving the user experience of internal tools for the employees of a large medical organization. She sent me this question.
I'm going around our team's products and putting together UX Audits and while I know I'm offering value, I'm looking for a one-stop shop of best practices along the way. I've used Dribble lots for inspiration of how a something could be better, but I need that one stop where I type "opt-out flow" and I'm served an article about best practices and some good examples. Can you make that for me!?!?!?!
Reading her question, I had a flashback to one of the things I spent a lot of time with early in my career.
The good news: This exists. It’s called a UI Pattern Library.
The bad news: There isn't ONE pattern library to rule them all; there are many.
What is a UI Pattern?
A pattern is defined as a model or design used as a guide, or an example for others to follow. User interface patterns are frequently seen interaction design elements or flows, often geared around common problems.
What is a UI Pattern Library?
A UI Pattern Library is a collection of patterns that helps user interface designers find and understand common interaction design elements or flows. They often include example screengrabs, pattern labels, usability or accessibility best practices, and annotations describing how the pattern works.
Are UI Pattern Libraries also known as Design Systems?
No, UI Pattern Libraries and Design Systems are similar but they are not the same thing.
A design system is a guide of one company, brand, or technology’s prebuilt design options, and it often includes code.
White a UI Pattern Library may be specific to one company’s approved design patterns, it typically does not include code. And many UI Pattern Libraries gather patterns from across brands, to showcase a range of examples of the same pattern.
While a UI Pattern Library is used to jumpstart strong interaction design, a design system isn’t just inspiration; it contains the actual specific parts that will make up the interface.
Is Dribbble a UI Pattern Library?
No. Dribbble is not organized around patterns or use cases. Designers use dribble to show off visual design skills and innovations, often posting exercises and bite-sized design explorations. While it can be fun to explore dribbble and various design awards sites for inspiration, those samples don’t always represent common patterns and may not even be work that was used in a real-world scenario.
Why are UI Pattern Libraries Useful?
Pattern libraries help us solve common problems well and quickly. “I’m excited about designing this Reset Password flow” said no designer, ever. Yet, if you get the basics wrong, the fun & complex challenges might not matter.
Pattern libraries can expedite idea sharing. Collaboration and idea-sharing are big parts of the design process. and a picture is worth a thousand words! Instead of designing something out to collaborate on it or spending a long time searching for an example of it, we can reference examples from pattern libraries to quickly align on where a design might be headed.
Pattern libraries can help non-designers share ideas more effectively. Rather than cursing your shoddy whiteboard illustrations or attempting to crack open intimidating design software, you can use examples to convey your point.
Pattern libraries can teach you the labels and considerations for a pattern. As a new designer, I learned a lot of terminology from pattern libraries, including the “gotchas” of particular patterns. This allowed me to “punch above my weight” and leverage the experience of other designers.
Pattern libraries can showcase a range for how a single thing might appear. Many brands want to be innovative in their designs yet we know users are most successful when their expectations are met. Pattern libraries can help us understand what’s common, but they can also help us imagine how a common pattern might be reimagined in various ways–showing us the levers we can pull with a particular pattern.
Pattern libraries help teach us systems thinking. When we see patterns in user interfaces, we are better consultants.
What are the best UI Pattern Libraries in 2022?
Mobbin seeks to be the most comprehensive reference library for digital product design (including web apps, websites, iPadOS apps, etc). Established in 2018, it contains over 60k fully-searchable screenshots.
UX Archive claims to offer the world's largest library of mobile user flows, It features flows from over 181 apps.
Really Good UX is a categorized collection of app user interface examples gathered by AppCues, a technology aimed at boosting product adoption with no-code onboarding flows.
UI Patterns was established in 2007 by Danish web developer Anders Toxboe. It aims to list different ways of solving common design problems, including information about how, when, and why such solutions should be used.
Design Vault - Patterns is a growing library of UI patterns & design inspiration from the world’s most popular apps and websites. It offers an easy-to-navigate list of patterns and includes snapshots from multiple devices, not just mobile.
Checklist Design is a collection of the best design practices by Australian product designer, George Hatzis, who describes the reason for its creation in this article.
Multi-brand collections are not the only option, however. Another great way to advise with authority on best practices is to look at what leading technology makers themselves suggest, in their own guidelines:
Add UI Pattern Libraries to Your UX Design Toolkit
I developed my foundations as a UX designer using UI Pattern Libraries to solve common design problems quickly, share ideas faster, identify considerations for a pattern, and explore different ways of designing something. Along the way, I learned lots of UI lingo, and became a better systems thinker.
How might you use UI Pattern Libraries to better your product design craft?