User Interface (UI) Design Patterns

User interface (UI) design patterns are reusable/recurring components which designers use to solve common problems in user interface design. 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.

Why Design Patterns are Such Powerful Design Aids

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 date picker design pattern to let users quickly pick a date in a form. So, UI design patterns serve as design blueprints that allow designers to choose the best and commonly used interfaces for the specific context the user faces. 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.

In this video, we look at the different design patterns YouTube uses:

Common UI Design Patterns

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.
• 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.
• 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.

Here, we use the design pattern “clear primary action” to clearly show users where they can click.

Taking Care with Design Patterns

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.

“Practice safe design: use a concept.”

— Petrula Vrontikis, designer, author & professor

This page uses the design patterns progress tracker, clear primary actions and progressive disclosure.

Learn More about UI Design Patterns

Explore UI Design Patterns with our course: https://www.interaction-design.org/courses/ui-design-patterns-for-successful-software

See Ruby Garage’s step-by-step, example-rich approach to UI Design Patterns: https://rubygarage.org/blog/ux-design-patterns

Read UX content strategist Jerry Cao’s detailed examination of mobile UI Design patterns: https://www.uxpin.com/studio/blog/5-creative-mobile-ui-patterns-navigation/