What are design patterns in UX?
Design patterns in UX are proven, reusable solutions to common interface problems, such as a search box, a login form or a shopping cart flow.
also calledUI patterns · interaction patterns · UX patterns
Nobody invents the hamburger menu from scratch every time they build an app. Over the years designers noticed that certain solutions worked again and again, and they gave those solutions names. A design pattern is a recipe for a recurring problem: not the finished dish, but a method you can adapt to your own kitchen.
- A pattern is a tested solution to a problem that keeps coming back.
- Familiar patterns reduce effort for users and for the team.
- Adapt patterns to your context and test them, never paste them in.
- Break conventions only when you have a clear reason.
What counts as a pattern
A pattern has three parts: a problem that keeps coming up, a solution that has been shown to work, and some guidance on when to use it. "People need to find things on a large site" leads to search and filters. "People need to complete a long task" leads to a step-by-step wizard with a progress indicator.
Patterns exist at different sizes. Small ones, like a toggle switch or a tooltip, sit at the level of a single component. Bigger ones, like onboarding, checkout or an empty state, shape a whole flow.
Why designers lean on them
People spend most of their time on other products, so they carry expectations with them. When your login screen works like every other login screen, nobody has to think. Familiar patterns lower the learning effort, speed up your own work and make products easier to build and test.
They are also a shared language. Saying "we will use an accordion here" gets everyone to the same picture in a second, which beats a ten-minute description.
Using a pattern well
A pattern is a starting point, not a template to paste in. A sensible way to apply one:
- Describe the user's problem first, in plain words
- Look at how well-known products and your design system solve it
- Pick the pattern that fits your users and context, not the one that looks trendiest
- Adapt wording, spacing and behavior to your product
- Test it with real people, because a good pattern in the wrong place still fails
Design systems and component libraries usually document patterns, with notes on when to use each, which saves a lot of debate.
When patterns go wrong
The biggest risk is applying one because it is popular. A carousel on a home page is a pattern too, and many teams have found that people rarely interact with the later slides. A pattern that works on a phone may be clumsy on a wide desktop screen.
There is also the opposite problem: breaking conventions for the sake of being original. If a button looks like a link or a standard gesture does something unexpected, you are spending users' patience on nothing. Be unusual only when you have a good reason and have tested it.
Patterns, components and principles
People mix these up, so here is the quick version. A component is a building block, such as a button. A pattern combines components to solve a problem, such as a sign-up form with validation messages. A principle is a broader guide, such as consistency or visibility of system status. Patterns turn principles into something you can build.
Design patterns: your questions, answered
What are UI design patterns?
They are reusable solutions to common interface problems, like navigation menus, forms, search, pagination and modals. Each one describes a problem, the typical solution and when to use it, so designers do not have to start from nothing.
Why are design patterns important in UX?
They make products feel familiar, so users learn faster and make fewer mistakes. They also speed up design and development and give teams a shared vocabulary. Used well, they free you to spend effort on the parts that are genuinely new.
What are some examples of UX design patterns?
Common examples include breadcrumb navigation, search with filters, infinite scroll, pull to refresh, empty states, step-by-step forms, onboarding tours and shopping carts. Each one answers a specific recurring need.
Should I always follow existing patterns?
Follow them by default, because familiarity helps users. Depart from a pattern only when your users or context call for it, and test the change. Surprising people is rarely a feature when they are trying to finish a task.
Where can I find design patterns?
Look at your own design system, public design guidelines from big platforms, pattern libraries, and the products you use every day. A screenshot collection of how others solve a problem is a surprisingly good library.
More quick answers
What is the difference between a design pattern and a design system?
A pattern is a reusable solution to one kind of problem. A design system is the broader set of components, rules and patterns a team shares to build consistently.
Are dark patterns also design patterns?
Not in the helpful sense. Dark patterns are tricks that push users into choices they did not intend, and they erode trust.
What is an anti-pattern?
An anti-pattern is a common solution that looks reasonable but tends to cause problems, such as hiding key navigation behind unlabeled icons.
Do design patterns limit creativity?
Not really. They handle routine problems so you can put your creativity into the experience, tone and details that make a product feel distinctive.
Who created design patterns?
The idea was borrowed from architecture, where Christopher Alexander described patterns for buildings. Software and interface designers later adopted the concept.
A design system in UX is a shared collection of reusable components, design tokens, guidelines and code that keeps a product consistent across teams.
UI elements in UX are the individual building blocks of an interface, such as buttons, text fields, menus and icons, that people see and interact with.
Consistency in UX means similar elements look and behave the same way across a product, so users can apply what they learned in one place everywhere else.
A modal in UX is a window that appears on top of the current page and blocks interaction with everything behind it until the user responds or closes it.
Onboarding in UX is the guided first experience that helps new users understand a product and reach their first moment of real value.
Navigation in UX is the set of menus, links and cues that help people find content, move between pages and always know where they are.
Found this useful? A GitHub star helps other designers find it.