UX patterns and UI patterns get mixed up constantly, even by professionals. Knowing which is which is what lets you actually use them.
A UI pattern is a recognized, visual interface solution, like a navigation menu, tab, modal or form field. A UX pattern is a process: a series of steps users repeatedly take to complete a task or experience, which may involve no visual design at all. UI patterns are visual and live in design systems; UX patterns are validated by user behavior and usually are not documented, because you cannot invent a pattern, only recognize one.
Key takeaways
- UI patterns are visual interface solutions (menus, tabs, modals, forms).
- UX patterns are process-oriented user journeys that may have no visual element.
- Accessibility is the golden rule: a pattern that is not accessible becomes an anti-pattern.
- Dark patterns deceive users on purpose; anti-patterns fail despite good intentions.
- You cannot create a UX pattern, only establish a process that users validate over time.
First, UX is not UI
Before patterns, the basics: user experience and user interface are distinct, which is why “UI/UX” does not really make sense. If that distinction is fuzzy, start with UX is not UI. Without it, telling UX patterns from UI patterns is impossible.
UI patterns
A UI pattern is a widely recognized visual design solution that users understand in terms of its affordances and interaction capabilities.
Dorve
UI patterns give uniformity, recognition and predictability. Examples: navigation menus, tabs, modal windows, form fields, carousels. You can adapt them to your brand, but keep them recognizable. Confidence in them comes from user research and usability testing. Starting from known patterns means you do not reinvent the wheel.
UX patterns
A UX pattern is a series of processes designed to address common challenges in the way users interact with experiences.
Dorve
UX patterns represent the steps users take to accomplish a task, and often bundle several UI patterns into one journey. They extend beyond human-computer interaction into information architecture, ergonomics, accessibility, cognitive psychology and sensory UX. Practical examples: arranging navigation in a physical store, an ergonomic workspace, a frictionless e-commerce return process.
A UX pattern must always prioritize accessibility. If it does not, it becomes an anti-pattern. No excuses, no exceptions.
UX patterns vs UI patterns
UX patterns focus on user journeys and flows: a series of repeated steps, which are processes, not design elements, and may include nothing visual at all (haptics, AR, sound). UI patterns require design elements, which is why they live in design systems and UX patterns usually do not. The quick test: if the pattern is strictly visual, it is a UI pattern; if it involves steps, processes or non-visual interaction, it is a UX pattern.
Patterns can also turn dark or anti. A dark pattern deliberately deceives users to benefit the business. An anti-pattern is well-intentioned but fails due to poor design, weak testing or accessibility issues.
Should you document UX patterns?
Usually no. Patterns are validated by users; you cannot create a UX pattern, only establish a process. If users recognize it as valuable and repeatable, it becomes a pattern through repetition and acceptance. Think of the worn shortcut across a lawn: people created that path by behavior, not design. The exception is when your design interacts with a known existing pattern; then it helps to document that pattern and how you fit within it. You are documenting an existing pattern, not inventing one.
A recurring process, or series of steps, that users take to complete a task or experience. It may or may not involve any visual design.
UI patterns are visual interface solutions like menus and forms. UX patterns are process-oriented journeys that can include non-visual interactions.
A dark pattern deliberately deceives users for the business’s benefit. An anti-pattern is well-intentioned but fails due to poor design, testing or accessibility.
Generally no, because they emerge from user behavior. UI patterns belong in design systems; UX patterns are recognized, not invented.
Accessibility is the golden rule. A pattern that is not accessible becomes an anti-pattern, regardless of intent.
Continue the series
- Next: <a href="http://dorve.com/blog/ui-design-blog/60-ux-patterns-better-ux-experiences/">60+ UX patterns library and examples</a>
- Then: <a href="http://dorve.com/blog/ui-design-blog/ui-patterns-avoid-failing-designs/">60+ UI patterns to avoid failing in your designs</a>
Want patterns applied with research, not guesswork? Talk to Dorve.
Start a project