Pattern Libraries: What They Are and Why You Need One

Not every design project should start from scratch.  It's true–there's a time and place for creativity, and there's also a time and place to use fail-proof and time-tested solutions.

Some of the best UX and interaction designers rely on pattern libraries to bring previously tested and usable solutions to their digital projects.

Here's what you need to know about pattern libraries and how to make them work for you.

Interaction Patterns

So what exactly is a pattern?  A pattern is a reusable solution to a problem that often occurs in UX and interaction design.  A pattern is reliable because it has worked over and over again.

Here are common pattern categories:

• Navigation: Think about menus, breadcrumbs, footers, pagination and tags.

• Selection: Choosing the best use of buttons, checkboxes, lists and toggles.

• Search, Filtering and Sorting: This category gets to the heart of easily finding information that's needed and hiding what's not.

• Messaging and Notifications: Alerts, pop-ups and progress bars all fall into this category.

• Data: Whether it’s a big data set or a small one, displaying data efficiently matters.

• Social: How can people connect, share message or interact?

A pattern is a specific design and application of one of these subcategories.  It could range from how to display an error message to how to arrange a menu with lots of complex sub-categories.

Pattern vs. Design Libraries

You may be familiar with the term design library, but a pattern library is different.  A design library usually refers to stylistic guidelines including typography, grids, color and code.  A pattern library is focused on applying interaction and UX patterns.  A pattern library complements and can be a piece of a larger design library.

Start Your Own Library

If you want to start using a pattern library in your own practice, you don’t have to start from scratch.  Many pattern libraries already exist—you just need to know where to look.

Take Advantage of Open Source Examples

Follow best practices by checking out existing pattern libraries. Yahoo and Microsoft are examples of open-source corporate pattern libraries.  Apple incorporates patterns into a more holistic style guide with UI concepts and branding recommendations.  The patterns in these libraries have been tested and performed well enough over many different projects that they have been deemed best practices.

If you want inspiration and ideas for new interaction patterns, sites like UXPin showcase the best of the web and are helpful when seeking out emerging trends. PatternTap lets you search different patterns by everything from style tags (looking for something skeuomorphic?) to device sizes. Mobile Patterns highlights what works well when you’re specifically working with smaller screen sizes.

If you’re looking to apply patterns that have a specific emotional outcome for users, UI Patterns lists persuasive design patterns that help create demand/scarcity, game play and social proof. The examples might not always be worthy of library status, but you'll get new ideas by searching for solutions to specific interaction and UX problems.

Look to Past Projects

Don't forget to look back to past projects you've completed.  What worked well? What would you change in retrospect? Because the best design patterns are reusable and apply easily to similar problems over and over again, would you choose the same solution again?  You might be on your way to identifying a pattern.

Be Curious with a Critical Eye

Now that you understand the basics of a pattern library, you’ll see the potential for patterns everywhere. Just remember not every interaction solution will stand up to testing with a variety of users. Keep a critical eye and you'll start to collect ideas for not only your next project, but your own pattern library.