How UX Patterns Create Intuitive User Experiences
UX patterns are the building blocks of user experience. Understanding patterns are critical for any UX or Product Designer.
UX Patterns
There is a lot to learn when entering the UX field, including which UX tools to use, how to layout design, how to prototype, and how to differentiate good and bad design. When I started out in UX, I used a framework that leaned on UX patterns and usability heuristics to guide me through the murky forest of user experience. UX patterns are the building blocks of user experience and keep experiences consistent and usable.
History of Patterns
Patterns are not unique to user experience. In Christopher Alexander’s seminal book, “A Pattern Language: Towns, Buildings, Construction”, Alexander noted that there were recurring problems in architecture and urban planning that could be solved with common solutions. This book inspired early software and web enthusiasts, leading to the emergence of UX patterns in the digital space.
What are UX patterns?
One of the best ways to start understanding user experience and its practical application for design is to leverage interaction patterns or UX patterns. UX patterns are best practices for approaching recurring design problems. These best practices address common issues such as when to use an alert message versus a confirmation message.
Why are UX patterns important?
UX patterns increase usability. UX patterns are useful in aligning with common standards and expectations for how your product should work based on how other products have worked. Abiding by commonly established paradigms increases product usability. For instance, Usability Heuristic #4 from the Norman Nielsen group emphasizes consistency and standards:
“Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.”
Creating a different interaction for understood standards will confuse users and create difficulty in using your product. If the issue is severe enough, users may not want to use your product altogether. In terms of consistency, patterns help establish uniformity which aids in enhancing the learnability of your product.
Let’s look at a real example of an inconsistent interaction of an accordion. This example from the state of California’s website uses an accordion that has a plus sign next to it to review more information. The only tappable area is the plus icon. Once the accordion is open in full state, the icon remains a plus sign.
When you click into the more information area from this page, there’s a different accordion, but this one doesn’t have the plus sign icon, the whole area is a different color, and the entire row is tappable. Once you tap on it, it reveals more information.
Both of these accordion patterns are not aligned with each other, or with best practices for accordions.
If this website was using a pattern library with a design system, there would likely be a single accordion pattern that could handle this simple use case of a simple information reveal.
In the case of the plus icon issue we see in the California government website, it’s customary to change the icon to show the change in state. For example, the plus icon for the default collapsed state, and a minus icon for the open state.
You can see what I mean using this example from the U.S. Web design accordion component.
Align UX Patterns with your product use cases
Although there are commonly accepted patterns, most companies have their own set of UX patterns and guidelines that align with their product use cases. For example, if your product uses forms, you’ll want to establish some form pattern guidelines that include the following:
- When to use a form
- Types of forms
- Point of view on how to handle optional and required fields
- Whether multi-step or progress meters are necessary
- Button alignment for submitting data
- Form field interaction
- Accessibility information
The form pattern is a broader set of guidelines encompassing multiple design elements, sometimes called components, to describe when and how to use the pattern. Using practices for your company establishes consistency, so each designer or design adheres to the set of standards to ensure things are all the same.
UX Patterns, Components, and Design Systems
UX patterns are part of design systems and describe the interaction and use of the component or design element. In our example above, the accordion is a design element or a component. Thoroughly documenting the pattern for the accordion includes when to use an accordion, when not to use it, and the visual and interaction of how an accordion looks and interacts.
For example, does it have a plus or minus icon? Or does it use an up or down caret, depending on whether the panel is collapsed?
Creating clear visual and interaction guidelines is the key to a good pattern library.
Design components can be included in a larger, more holistic UX pattern; patterns often use multiple design components to make up the larger pattern. In this case, the accordion might be used in a larger pattern of presenting FAQs or for a form layout.
UX Pattern and Design System Examples
There are public design systems and pattern libraries to take a look at for inspiration. Here’s a short list of publicly available design systems:
UX Patterns and “One-Offs”
When you encounter a use case for which the pattern wasn’t made, it’s an excellent time to re-evaluate it and see if it should be updated to accommodate the new use case.
Pattern libraries and design systems are living and constantly evolving as new cases arise. If the new use case merits an update to the pattern and guidance, it’s okay to do so.
For example, the accordion pattern we referenced earlier was mostly for FAQs and Forms. However, perhaps it’s helpful during a flow where a user can only move forward by selecting one panel to complete the task at a time.
This is a very different use case from the simple information reveal. So, re-evaluating both use cases will help either strengthen the pattern or decide that this use case might be a one-off and shouldn’t be supported regularly. This should also be documented. It’s good to document exceptions to the system as they might create new patterns.
UX Patterns and Limitations
Sometimes, designers feel that patterns are too limiting, and in some cases, it’s tempting to “break the pattern” that has been established.
For example, if you’re designing a form, the guidelines for laying out a paper, whether the buttons should be left or right-aligned, and how to handle multiple steps in the process would all be helpful information referenced from the pattern. Recreating forms with different layouts each time isn’t a good use of a designer’s time.
The actual design thinking would be applied to determining the correct information to collect and the proper flow of knowledge of the elements. The hard work is in thinking about all the other design challenges the patterns don’t cover.
In conclusion
Understanding the role of UX patterns in user experience is critical in ensuring your product is usable, learnable, and following best practices. Understanding these repeatable solutions will aid you in learning how to design for various audiences and experiences.
About Diane Cronenwett
Diane Cronenwett teaches UX courses on advanced UX topics and foundational topics and has led design experience projects for top-tier Fortune 500 companies based in Silicon Valley. Diane is passionate about sharing her knowledge with UX professionals and newcomers to the field to grow their UX skills and get to the next level in their careers.
Learn about patterns in the Linkedin Learning course on Design patterns. Take the course and learn the fundamentals.
More posts
UX Portfolio Curation Tips to Boost Your Career Goals
Your UX Portfolio needs constant curation and upkeep to ensure it aligns with your career aspirations. Here’s some tips on maintaining your portfolio.
How to facilitate successful Problem Statement UX workshops to empower team collaboration
Lead successful problem statement UX workshops and empower your stakeholders. Get tips on facilitating a problem-solving UX workshop and a free template.
UX designer jobs: User experience vs Interaction vs UI vs Product Designer
Understand the differences between UX, Interaction design, UI design, and product design. Find out what skills are required for each role.