Thoughts on Patterns
The Rhythm Behind Interaction Design
I’m part of a team that builds responsive enterprise web apps contained in a single suite. You could think of it in terms of Adobe products. Photoshop, Illustrator and InDesign are all independent tools that are better together. Our users constantly move between our various products, and because of this, what we build must feel consistent. We’ve arrived at the solution of a pattern library to boost consistency and speed up the way we work. Our pattern library currently breaks down our designs into smaller chunks; buttons, typography, color palette, droplists, etc. to be leveraged across our suite by designers and developers.
Whether we realize it or not, we all rely on patterns in our daily life. Think about your morning routine, which could also be called a pattern of behavior. When you go to brush your teeth (if this doesn’t apply to you, please change that), you don’t have to ask yourself, “Where do I keep the toothpaste?” or “Do I brush side to side or up and down?” You do these things automatically because of repetition. Your brain picks up on the repetition and trains itself to do those things automatically so you no longer have to waste thinking power on the little things. You’re now freed up to zone out about whatever you like!
Patterns in web design function in much the same way. We shouldn’t have to spend any mental energy when we go to use a common component like a button. It’s such a common piece of interaction, it should be effortless to understand how to use that pattern so we can spend our mental energy on much more important tasks like user testing or learning new skills and design tools.
This post is an ongoing resource of inspiration on the topic of pattern libraries, whether that’s in the form of my own findings, or just thoughts gathered from minds across the realm of web design.
“So. Pattern libraries — good thing or bad thing?”
“Pattern libraries are a good thing if they are the path of least resistance to good design, and if they are preventing good design, they are a bad thing. I don’t think the presence of a pattern library enhances — it’s what the team does with it.
In essence, the team has to know how to use the patterns. If…no one knows when to use them or how to use them, they do stupid things with the design.”
- excerpt from interview with Jared Spool, Adam Cutler interviewing
The key to a successful pattern library lies in that realm of making sure the team knows how to use the pattern and how to grow it in the future. You can do this by providing UI kits, templates containing patterns in context, or by showing the successful use of patterns in full page designs across breakpoints.
Good thing
Consistency in design (Unity, not uniformity)
By leveraging patterns, designers and developers are basically sharing a wheel instead of recreating it. By creating patterns that can be applied to broad scenarios, designers have a solid foundation to begin finding the perfect solution. They’re able to focus in on the nuances of their app instead of having to start from scratch. We ended up with quicker, more consistent outcomes = a better experience for all. Always remember that every app is different with unique users and patterns are not always one size fits all. We aim for unity, not uniformity.
Clear communication
Let’s talk about pain. In the past, designers would hand off a .pdf styleguide which ended up being a 40–60 pg document full of our best guess at the information developers need to take static mock ups and build them into code (commence cringing). Even if the designer takes the time to walk through and explain the doc that took them about a solid week to put together, who wants to dig through something that massive to find the needed styles? And don’t even think about making a global change like updating our button color. That would lead to a massive amount of design updates, bug logging, and the recreation of styleguides to get a change started. We’re talking months and months.
Enter our pattern library
Styles that have been deemed patterns now live in one place as individual pieces of content and designers are able to simply share a link to point the team in the right direction. When it’s time to update patterns, those changes only have to happen in one place - the pattern library. From there, they get inherited globally.
Speedy progress
Here comes the real power of patterns. Now that we’re in the realm of consistency, we’re able to truly innovate our micro-interactions. Designing code with patterns allows you to create variations on a theme out of context of a page. After rounds of iteration and exploration, the pattern can be brought back in to context to gain an understanding of how it fits in with other patterns. You’re able to globally improve usability by focusing on a single pattern.
Bad thing
Harshing vibes
Something to always ask yourself when putting together patterns — does this limit creativity? Design should not be a matter of selecting building blocks. Patterns can be used to boost consistency without limiting creativity when patterns are always growing, improving, and undergoing reexamination. The point is to make a resource to empower, not a box to contain. To summarize, don’t harsh creative vibes.
I’d like to end for now with this visualization. Will you use patterns as a way to foster creativity and innovation, or a way to enforce?
