Table of Contents
UX patterns are one of the most common tools used by user experience (UX) designers, including myself. These patterns allow us to reference both design elements and user behavior patterns, helping us create better experiences by using methods that have been tested thousands or even millions of times.
However, the significant challenge that many UX designers and developers face, especially those just starting out or still studying, is recognizing what constitutes a pattern. More importantly, distinguishing between a UX pattern and a UI pattern. This, in turn, not only involves recognizing them but also knowing how to leverage them to our advantage.
- Understanding UX vs. UI: Recognizing the difference between user experience (UX) and user interface (UI) is foundational for designers. UX involves broader user journeys and flows, while UI focuses on visual and interaction design elements.
- Definition of UI Patterns: UI patterns are design solutions that address common usability challenges, creating intuitive and predictable interactions through familiar elements like navigation menus and form fields.
- Definition of UX Patterns: UX patterns are broader, encompassing not just HCI but also areas like information architecture and sensory UX. They prioritize accessibility and the overall coherence and enjoyment of the user experience.
- Distinguishing Patterns: UX patterns are process-oriented and can include non-visual elements, while UI patterns are visually based and tied to design elements.
- The Role of Patterns in Design: Design patterns provide a common language among designers, allowing for meaningful discussion of design choices. They rely on user recognition and acceptance to become established.
- Documentation in Design Systems: UX patterns are often not documented in design systems because they emerge from user behavior and validation. They cannot be predicted or forced but are recognized through repetition and acceptance by users.
Let Me Introduce a Parenthesis…
Before going further into the topic at hand, I want to make a brief pause here. It is important to understand that to recognize and differentiate between a UX pattern and a UI pattern, we need to have a clear understanding of what User Experience (UX) is and what User Interface (UI) means. These are entirely different terms, and the majority often confuses them to the point of mentioning something like “UI/UX,” which not only does not exist but is also nonsensical.
I want to emphasize this because in various experiences I’ve had, including my role as a consultant in Fortune 100 company teams, I found people who didn’t fully grasp this difference (or worse, they mentioned the infamous UI/UX). Without understanding this distinction, it’s impossible to recognize a user experience pattern and differentiate it from a user interface pattern. It’s always essential to have a solid foundation, and if you’re reading this and aren’t sure about the distinctions between UI and UX (there’s absolutely nothing wrong with that; we all learned this at some point, myself included), 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 quite comprehensive and complex. So, let me begin with UI patterns, which are simpler.
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 allow designers and developers to create interfaces that are intuitive and easy to use, leveraging solutions that have proven effective in similar situations.
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.
This confidence primarily comes from user research and usability testing. But 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.
Definition of UX Patterns
In simple terms, we can define UX patterns as follows:A User Experience (UX) pattern is a series of processes designed to address common challenges in the way users interact with experiences.From UX Patterns: Learn how to take advantage of them Click To Tweet
Very similar, yet different: UI patterns are visual components of a user interface, while UX patterns are the steps users take to accomplish a task or participate in an experience. Although closely related, they can be distinguished as follows: a UX pattern often incorporates several UI patterns, while a UI pattern indicates its functions to the user—for example, how a button can be pressed.
Going deeper, these patterns represent established and recurrent approaches to solving specific problems in how users experience and use digital products, websites, applications, and sometimes even physical products, covering physical UX, Customer Experience (CX), and various other branches of user experience.
One example of UX patterns is Apple Developer Design Documentation, where you will be able to find many of the UX patterns that Apple products use.
The utility of UX patterns lies in their ability to provide coherence, familiarity, and predictability to users through minimal-friction cognitive processes. Most importantly, these patterns can 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.
Examples of UX patterns may include arranging navigation elements in a physical store, organizing an ergonomic workspace to enhance the employee experience, or implementing a hassle-free return process in an e-commerce platform. UX designers and professionals can customize and adapt these patterns to meet the specific needs of a project, always ensuring that users can understand and enjoy the experience without difficulty, whether it involves digital or physical interactions. And it goes without saying: a UX pattern must always prioritize accessibility. Otherwise, it becomes an anti-pattern. There are no excuses or exceptions; it’s a golden rule!
Differences Between UX and UI Patterns
As we can see, User Experience (UX) patterns focus more on user journeys and flows, which consist 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.
A dark pattern is intentionally designed to deceive or confuse users. In contrast, an anti-pattern is a pattern designed with good intentions but ultimately fails . This could happen because of many factors, including 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, such as haptic interactions in mobile apps or augmented reality (AR), or virtually any Sensory UX or motor accessibility-based experience.
Now, let´s see the definition of UI patterns:UI design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for experienced UI designers. Click To Tweet
The key is that Design Patterns provide a common language among designers. They enable discussions about alternatives, where mentioning the name of a design pattern carries much more meaning than the name itself.
In addition to the need for design elements, 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 find a particular pattern, we anticipate specific behaviors from design elements and often expect related elements to appear.
For example, after filling out a form, I expect that clicking a submit button will lead to some form of confirmation (a thank-you page, a message, a popup, etc.). If clicking the submit button instead opens a video, the pattern is broken, making it unrecognizable as a pattern at all.
Therefore, while UX patterns may have some overlap with design elements, they can also be entirely different and not have any visual element, or have visual elements that are not part of a user interface. This separation is why they are generally not included together in a design system (and in my experience, UX patterns rarely form part of a design system).
On the other hand, UI design patterns require the presence of design elements, hence the name.
So, 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 if it involves other types of interaction or processes.
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. Well, the answer might be a bit disappointing. Or, perhaps, you’ll actually like it!
In any case, the answer is clear: unless you have a strict, genuine need to do so, you should refrain from doing it. 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 acknowledged by users as a set of valuable, repeatable actions, it will eventually gain validation as a pattern through repetition and acceptance.
I’m pretty sure you’ve seen the following meme (or a variation of it).
Despite being quite inaccurate, the meme is useful because we can actually see a pattern: There’s clearly a group of people that recognizes a pattern (cutting through the grass), accepts it, and chooses to follow this new path instead of the originally designed one. Therefore, we’re in the presence of a UX pattern.
As you may imagine, if the designer or architect documented this design (which probably is), the documentation would include the paved path and wouldn’t include the path created by people’s transit. And yet, the pattern is right before our eyes.
In short: how would you document something you don’t know it will ever happen?
While we shouldn’t include UX patterns in a design system, there are (very few) situations where we might want to include them. For instance, if we know of a pattern and our design directly interacts with it in some manner, it might be useful to explain the pattern and how our design works inside that pattern (which may happen mostly with UI patterns). Nonetheless, again: we don’t create the pattern, we just document an existing pattern.
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 separated posts to make it easier to digest. After all, I want you to learn about the subject of UX patterns, not to run away scared!
Next Article: UX patterns library and examples
We can improve your business!
Let us help you with the best solutions for your business.
It only takes one step, you're one click away from getting guaranteed results!I want to improve my business NOW!