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 that encompasses multiple design elements, sometimes called components, to describe when and how to use the pattern. When using patterns for your company, it establishes consistency, so each designer or design adheres to the set of standards to ensure things are not entirely different.

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. Fully 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 a caret that is up or down, depending on if 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, and 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 how to present 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:

• U.S. Web design system
• Atlassian design
• Salesforce lightning design system
• IBM’s carbon design system

UX Patterns and “One-Offs”

When you encounter a use case for which the pattern wasn’t made, it’s a good time to re-evaluate the pattern and see if it should be updated to accommodate the new use case.

Pattern libraries and design systems are living and always 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 useful during a flow in which a user can only move forward by selecting one panel at a time to complete the task.

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.

If you’re designing a form, for example, the guidelines for how to lay out a form, 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 designing thinking would be applied to determining the right information to collect, and the right flow of information of the elements. The hard work is in thinking about all the other design challenges that the patterns don’t cover.