UX Patterns: Learn how to take advantage of them

UX patterns are essential tools used by UX designers to reference both design elements and user behavior patterns. These patterns help create better user experiences by employing methods that have been tested extensively. As a UX designer, I find these patterns invaluable for ensuring consistency and efficiency in design.

However, a significant challenge many UX designers and developers face, especially those new to the field or still studying, is recognizing what constitutes a pattern. More importantly, they often struggle to distinguish between UX patterns and UI patterns. This distinction is crucial for effectively leveraging these patterns to our advantage.

Let Me Introduce a Parenthesis…

Before diving deeper into the topic, it’s crucial to clarify the difference between User Experience (UX) and User Interface (UI). These terms are often confused, leading to misconceptions like “UI/UX”, which doesn’t make sense as they are distinct concepts. Understanding this distinction is essential for recognizing and differentiating between UX patterns and UI patterns.

From my experiences, including my role as a consultant for Fortune 100 company teams, I’ve encountered many people who didn’t fully grasp this difference (or worse, referred to the infamous “UI/UX”). Without this understanding, recognizing and differentiating between user experience patterns and user interface patterns is impossible. If you’re unsure about these distinctions (and there’s absolutely nothing wrong with that; everyone learns this at some point), I recommend starting with the article “Breaking News: UX is not UI. And that isn’t a bad thing!”

Introduction to UI Patterns

UX patterns are comprehensive and complex, so let’s begin with UI patterns, which are simpler to understand.

Definition of UI Patterns

We can define a UI pattern as follows:

A widely recognized visual design solution that users can easily understand in terms of its affordances and interaction capabilities. These patterns are well-established, recurring methods for addressing specific interaction challenges in digital products, websites, or applications.

The utility of UI patterns lies in their ability to provide uniformity, recognition, and predictability to users. These patterns enable designers and developers to create interfaces that are intuitive and easy to use, leveraging solutions that have been proven effective in various contexts.

Examples of UI patterns include navigation menus, tabs, modal windows, form fields, and carousel content presentations. Of course, this doesn’t mean we all have to use the exact same patterns; we can customize and adapt them to specific project needs and brand identities, always ensuring that users can navigate and understand the interface effortlessly.

The confidence in using these patterns primarily comes from extensive user research and usability testing. These methods validate the effectiveness of the patterns and provide insights into how they can be improved or adapted. By starting with known patterns, we save ourselves a significant amount of work in most cases. In other words, we don’t need to reinvent the wheel; someone else has already done it for us. Using established UI patterns allows us to build on proven foundations, ensuring that our designs are both effective and efficient.

Definition of UX Patterns

In simple terms, we can define UX patterns as follows:

UI patterns and UX patterns, while closely related, serve distinct functions in design. UI patterns are the visual components of a user interface, such as buttons, menus, and form fields. These patterns help users understand the interface’s functions and how to interact with them. On the other hand, UX patterns represent the steps users take to accomplish a task or participate in an experience. UX patterns often incorporate several UI patterns to create a seamless journey for the user.

These patterns represent established and recurrent approaches to solving specific problems in how users experience and use digital products, websites, applications, and even physical products. They cover areas such as physical UX, Customer Experience (CX), and various other branches of user experience.

Examples and Importance of UX Patterns

One notable example of UX patterns is found in the Apple Developer Design Documentation, which outlines many of the UX patterns used in Apple products.

The utility of UX patterns lies in their ability to provide coherence, familiarity, and predictability to users, ensuring minimal-friction cognitive processes. These patterns extend beyond Human-Computer Interaction (HCI) and encompass broader areas of user experience, such as information architecture, physical ergonomics, accessibility, cognitive psychology, sensory UX, and more.

Practical Applications of UX Patterns

• Navigation Elements: Arranging navigation elements in a physical store to guide customers effectively.
• Ergonomic Workspaces: Organizing an ergonomic workspace to enhance employee comfort and productivity.
• E-commerce Processes: Implementing a hassle-free return process in an e-commerce platform to improve customer satisfaction.

UX designers and professionals can customize and adapt these patterns to meet the specific needs of a project, ensuring that users can understand and enjoy the experience without difficulty, whether it involves digital or physical interactions.

Accessibility: The Golden Rule

A UX pattern must always prioritize accessibility; otherwise, it becomes an anti-pattern. There are no excuses or exceptions—this is a golden rule in UX design. Ensuring accessibility is essential for creating inclusive and effective user experiences that cater to all users, regardless of their abilities.

By understanding and applying both UI and UX patterns thoughtfully, designers can create intuitive, efficient, and enjoyable experiences for users across various contexts and platforms.

Differences Between UX and UI Patterns

Ensuring accessibility is essential for creating inclusive and effective user experiences that cater to all users, regardless of their abilities. By understanding and thoughtfully applying both UI and UX patterns, designers can create intuitive, efficient, and enjoyable experiences for users across various contexts and platforms.

User Experience (UX) patterns focus more on user journeys and flows, consisting of a series of steps that users consistently and repeatedly take. Consequently, they are processes rather than simple design elements. These processes may or may not include specific design elements, demonstrating that patterns are not limited to user interface (UI) design or even design in general.

Due to the unique nature of UX patterns, they can also be categorized into other patterns, such as dark patterns and anti-patterns. A dark pattern is intentionally designed to deceive or confuse users, manipulating them into actions that benefit the business but harm the user experience. In contrast, an anti-pattern is a pattern designed with good intentions but ultimately fails due to factors like poor design, inadequate testing, technological changes, or accessibility issues.

Another essential feature of UX patterns is that they can include elements unrelated to visual design. These might involve different sensory experiences or interactions, such as haptic interactions in mobile apps, augmented reality (AR), or virtually any Sensory UX or motor accessibility-based experience. For instance, haptic interactions provide tactile feedback, AR enhances real-world experiences with digital overlays, and sensory UX involves other senses like sound or scent to create immersive experiences. Motor accessibility ensures interactions are accessible to users with varying physical abilities.

Now, let´s see the definition of UI patterns:

Design patterns provide a common language among designers, enabling discussions about alternatives. Mentioning the name of a design pattern carries much more meaning than the name itself, facilitating clearer communication and understanding. UI patterns also relate to affordances—visual cues indicating how an element can be used—and familiarity. Humans tend to look for patterns in everything, and UI design is no exception. Once we identify a pattern, we anticipate specific behaviors from design elements and expect related elements to appear.

For example, after filling out a form, users expect that clicking a submit button will lead to some form of confirmation, like a thank-you page or a message. If clicking the submit button instead opens a video, the pattern is broken, making it unrecognizable as a pattern.

While UX patterns may overlap with design elements, they can also be entirely different and may not involve any visual elements. This separation is why UX patterns are generally not included in a design system, and in my experience, they rarely form part of one. On the other hand, UI design patterns require the presence of design elements, hence the name.

In simple terms, the best way to recognize whether you’re dealing with a UX or UI pattern is to check if the pattern is strictly visual or involves other types of interaction or processes. UI patterns are primarily visual and interface-focused, while UX patterns encompass broader user journeys and experiences, often involving multiple steps and interactions beyond just visual elements. By understanding these distinctions, designers can better utilize UX and UI patterns to create cohesive, effective, and accessible user experiences.

Basic User Experience Patterns Examples

How to document a UX Pattern in a Design System

So, you might be wondering how to document a UX pattern to include in your own design system. The answer might surprise you: unless you have a strict, genuine need to do so, you should refrain from documenting UX patterns. There is a valid reason for this: patterns are validated by users. You cannot create a UX pattern; you can only establish a process. If the process is recognized by users as a set of valuable, repeatable actions, it will eventually be validated as a pattern through repetition and acceptance.

I’m pretty sure you’ve seen the following meme (or a variation of it).

Consider the popular meme showing a well-worn path across a lawn, bypassing a paved walkway. Although it may be inaccurate, the meme illustrates a pattern: a group of people recognizes, accepts, and follows a new path created by their collective behavior rather than the originally designed one. This represents a UX pattern because it emerged from user behavior, not designer intention.

If a designer or architect had documented this design, the documentation would include the paved path but not the user-created path. Yet, the pattern exists right before our eyes.

So, how would you document something you don’t know will happen?

A caveat

While generally, we shouldn’t include UX patterns in a design system, there are rare situations where it might be useful. For instance, if we know of an existing pattern and our design directly interacts with it, it can be helpful to explain the pattern and how our design fits within it. This is more common with UI patterns. Remember, we don’t create the pattern; we document an existing one.

This is not over!

While writing this article, I realized that it would be extremely long, so I decided to include the rest of the content in separate posts to make it easier to digest. My goal is to help you learn about UX patterns, not to overwhelm you. Stay tuned for more insights on this topic!

Next Article: UX patterns library and examples