Patterns for user experience

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.

 

Accordion ux pattern example

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.

Accordion UX pattern example

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.

US web design system accordion pattern

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.

Diane Cronenwett- UX-Portfolio-Course

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