User interface (UI) design patterns are reusable/recurring components which designers use to solve common problems in user interface design.
© Interaction Design Foundation, CC BY-SA 4.0
For example, the breadcrumbs design pattern lets users retrace their steps.
Designers can apply them to a broad range of cases, but must adapt each to the specific context of use.
Websites and apps have a conventional look and feel because of design patterns such as global navigation and tab bars. In UI design, you can use design patterns as a quick way to build interfaces that solve a problem; for instance, a filter pattern is a versatile tool that helps the user extract, enhance, or manipulate data to achieve specific goals.
UI design patterns serve as design blueprints that allow designers to choose the best and most commonly used interfaces for the user's specific context. Each pattern typically contains:
A user’s usability-related problem.
The context/situation where that problem happens.
The principle involved—e.g., error management.
The proven solution for the designer to implement to address the core of the problem.
Why—the reason for the pattern’s existence and how it can affect usability.
Examples—which show the pattern’s successful real-life application (e.g., screenshots and descriptions).
Implementation—some patterns include detailed instructions.
Some of the most common UI design patterns are:
Breadcrumbs: Use linked labels to provide secondary navigation that shows the path from the front to the current site page in the hierarchy.
Lazy Registration: Forms can put users off registration. So, use this sign-up pattern to let users sample what your site/app offers for free or familiarize themselves with it. Then, you show them a sign-up form. For example, Amazon allows unrestricted navigation and cart-loading before it prompts users to register for an account. Note:
When content is accessible only to registered users or users must keep entering details, offer them simplified/low-effort sign-up forms.
Minimize/Avoid optional information fields. Use the Required Field Markers pattern to guide users to enter needed data.
Forgiving Format: Let users enter data in various formats (e.g., city/town/village or zip code).
Clear Primary Actions: Make buttons stand out with color so users know what to do (e.g., “Submit”). You may have to decide which actions take priority.
Here, we use the design pattern “clear primary action” to clearly show users where they can click.
© Interaction Design Foundation, CC BY-SA 4.0
Progressive Disclosure: Show users only features relevant for the task at hand, one per screen. If you break input demands into sections, you’ll reduce cognitive load (e.g., “Show More”).
Hover Controls: Hide nonessential information on detailed pages to let users find relevant information more easily.
Steps Left: Designers typically combine this with a wizard pattern. It shows how many steps a user has to take to complete a task. You can use gamification (an incentivizing design pattern) here to enhance engagement.
Subscription Plans: Offer users an options menu (including “Sign-up” buttons) for joining at certain rates.
Leaderboard: You can boost engagement if you use this social media pattern.
This page uses the design patterns progress tracker, clear primary actions and progressive disclosure.
© Interaction Design Foundation, CC BY-SA 4.0
Dark Patterns: Some designers use these to lead or trick users into performing certain actions, typically in e-commerce, so they spend more or surrender personal information. Dark patterns range in harmfulness. Some designers leave an unchecked opt-out box as a default to secure customer information. Others slip items into shopping carts. To use dark patterns responsibly, you must be ethical and have empathy with your users. Dark patterns are risky because user mistrust and feedback can destroy a brand’s reputation overnight.
Freely available, UI design patterns let you save time and money since you can copy and adapt them into your design—instead of reinventing the wheel for every new interface. They also facilitate faster prototyping and user familiarity. However, you should use them carefully. The wrong choices can prove costly – for example, if you:
Approach problems incorrectly because you’re over-relying on patterns.
Don’t fine-tune patterns to specific contexts.
Don’t customize a distinct brand image (e.g., your website ultimately resembles Facebook).
Overlook management requirements. If you create your own patterns, you must clearly define how to use them and with what types of problems, version-control them, and store them for team access.
Overall, give users familiar frameworks that maximize convenience and prevent confusion while they interact with your unique-looking brand.
Let’s look at mobile UX design, more specifically, common mobile UI patterns. These can be used to design intuitive interfaces and speed up your design process.
Take our UI Design Patterns course.
Take our Mobile UI Design course.
Register to Complex UI Design: Practical Techniques Master Class webinar with Smashing Magazine creative lead Vitaly Friedman.
Explore UI Patterns in this library of real-life examples.
Read UX content strategist Jerry Cao’s detailed examination of mobile UI Design patterns.
A UI pattern is a repeatable solution to a standard design problem, ensuring consistent user experience. This video highlights the 'OK/Cancel' pattern, emphasizing the concept of proximity.
The pattern uses grouping to indicate that items, like the 'OK' and 'Cancel' buttons, relate to each other. This means users instinctively understand their relationship and function when they see these buttons together. Following a recognizable UI pattern, such as this, can significantly enhance a user's navigation experience. Check out the full video for insights on essential mobile UX design patterns.
Grid and Layout: The foundation of any design is its grid and layout. Proper alignment and spacing ensure that content is organized and easily digestible by users.
Typography: Text plays a vital role in conveying information. Choosing the right font and maintaining readability is paramount.
Hierarchy: This defines the order and prominence of elements, guiding users through the interface and highlighting important content.
Simplicity and Order: Our brains prefer order over chaos. A well-organized interface, free from clutter, allows faster processing and a more pleasant user experience.
By mastering these rules, designers can craft aesthetically pleasing and functional interfaces.
UI Design Patterns are essential, recurring solutions designers employ to address common interface dilemmas. These patterns simplify complex environments, ensuring users view vital content when needed.
For instance, in the clip, the Galaxus product search uses an, efficient UI patterns to provide a better filtering experience. Such designs prioritize user convenience, eliminating unnecessary auto-refreshes and incorporating intuitive features, especially in mobile views. Whether through slide-in filters or accordions, these patterns enhance navigation. Crucially, well-designed UI patterns improve user experience, mitigate usability problems, and bolster a product's success. They remain a cornerstone of user-centric design and product innovation.
UI patterns streamline user experience and can be classified into various categories. Some essential UI pattern categories include:
Onboarding: Engaging users with compelling visual design, like the Down Dog app.
Gestures: Intuitive actions like tap, swipe, and unique gestures made familiar by apps like Tinder.
Integration: Seamlessly connecting apps with other platforms, ensuring fluid transitions.
Back Buttons: Allowing users to navigate to previous content or sections without feeling lost.
Accordions: Efficient navigation tools, but must ensure users don't get lost within.
Contrast and Affordance: Showcasing navigational cues like open/close indicators.
Hamburger Menus: Simplified navigation menus, optimizing visibility and accessibility.
Search: Allowing users to search content within specified parameters effectively.
Videos: Engaging content that should be easily scannable, captioned, and accessible.
Customization: Providing users control of their data and avoiding random, non-desirable features.
Touch Targets: Ensuring clear signifiers for tapable items and preventing accidental touches.
These categories are essential for creating user-friendly, effective interfaces.
UI patterns and components are essential to interface design but serve distinct purposes. UI patterns are recurring solutions that address common design challenges in user interfaces. They provide consistent, efficient ways to solve usability issues, like how filtering should function in e-commerce sites without causing disruptive refreshes. On the other hand, components are the building blocks used within those patterns. For instance, in an e-commerce filter pattern, buttons, drop-down menus, and checkboxes are the components. Simply put, UI patterns guide how components are organized and interact to deliver an optimal user experience. By understanding and leveraging both, designers can create functional and user-friendly interfaces.
A design pattern solves common user interface challenges, focusing on specific interaction or design problems. It's a repeatable solution applied within different contexts. On the other hand, a design system is a comprehensive set of standards meant to guide the creation of products. It encompasses a library of patterns, components, guidelines, and best practices, ensuring consistency across an organization's designs. While design patterns offer singular solutions, design systems provide a holistic framework and a shared vocabulary for teams, streamlining the product development process. Design patterns can be seen as individual elements within the broader architecture of a design system.
UI pattern libraries are curated collections of user interface design solutions that address recurring challenges in product development. These libraries offer a repository of proven, practical design components that can be reused across different projects. Leveraging UI pattern libraries can help designers maintain consistency, speed up the design process, and ensure best practices in usability. As highlighted in this article from Interaction Design Foundation, there are numerous resources online where designers can access and get inspired by extensive UI pattern libraries, streamlining their design workflow and enhancing user experience.
Design system patterns are reusable, standardized solutions to commonly occurring design challenges. Within a design system, they ensure consistency across products by providing a shared language for both designers and developers. These patterns encompass visual elements, interactions, and even code snippets. By utilizing them, teams can improve design cohesiveness, speed up the design process, and ensure a smoother design handoff between designers and developers.
Incorporating design system patterns promotes efficiency and maintains brand integrity throughout different projects.
The 60-30-10 rule in UI design is a color distribution guideline for creating balanced and visually appealing interfaces.
This rule suggests using three primary colors:
Background color (60%): This dominates the design, typically a neutral tone.
Foreground (text) color (30%): Provides visual contrast, often a darker shade.
Accent color (10%): Draws attention to essential elements or actions.
Starting with these primary colors is essential, ensuring harmony and reducing visual clutter. For a cohesive look, the foreground color can sometimes hint at the accent color. This rule simplifies the design process and ensures a consistent, user-friendly experience.
For a comprehensive understanding of UI design patterns, consider these courses from Interaction Design Foundation:
UI Design Patterns for Successful Software: Delve into effective patterns, their psychology, and real-world applications in design.
Mobile UI Design Course: Learn mobile-specific design patterns and best practices for intuitive mobile interfaces.
If you're short on time, the UI Design Skills Masterclass provides a swift yet thorough overview of crucial UI design concepts. Enhance your design acumen and stay abreast of evolving UI trends with these invaluable resources.
Do you want to improve your UX / UI Design skills? Join us now
You earned your gift with a perfect score! Let us send it to you.
We’ve emailed your gift to name@email.com.
Do you want to improve your UX / UI Design skills? Join us now
Here’s the entire UX literature on User Interface (UI) Design Patterns by the Interaction Design Foundation, collated in one place:
We believe in Open Access and the democratization of knowledge. Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.
If you want this to change, , link to us, or join us to help us democratize design knowledge!
