Twelve UI patterns every designer should know

UI patterns are reusable solutions to recurring interface problems. Twelve essential patterns are navigation bars, tab bars, breadcrumbs, cards, lists and tables, search with filters, forms with inline validation, modals and dialogs, toasts and alerts, progress indicators, empty states and onboarding. Using familiar patterns consistently makes products easier to learn and faster to build.

What UI patterns are

A UI pattern is a reusable solution to a common interface problem. Navigation between sections, displaying a collection of items, collecting information in a form, confirming an action or showing progress are problems almost every product faces. Over time, designers have converged on solutions that work well, and users have learned to recognise them. These solutions are UI patterns.

Using established patterns has two big benefits. First, users already know how they work, so they can focus on their task rather than learning the interface. Second, teams save time by reusing proven solutions instead of inventing new ones for every screen. Patterns are usually captured as components in a design system; our post on design systems that teams actually use explains how.

Twelve essential patterns

Navigation patterns

Navigation bars, tab bars and breadcrumbs help people understand where they are and move around. On desktop, a top or side navigation bar typically holds the main sections. On mobile, a bottom tab bar with three to five items is common for frequent destinations, with less-used options in a menu. Breadcrumbs help on websites and apps with deep hierarchies, such as e-commerce categories or documentation, by showing the path back.

• Keep top-level navigation short and clearly labelled
• Highlight the current section
• Use bottom tab bars on mobile for frequent destinations
• Avoid hiding key navigation behind icons with no labels
• Keep navigation consistent across the product

Content patterns

Cards group an image, title, short description and actions into a single unit, which makes varied content easy to scan and works well in responsive grids. Lists and tables suit collections of similar items, especially when users need to compare values, sort or select several items at once. Search and filters become essential once collections grow beyond what people can browse comfortably. Our post on UX for data-heavy apps covers table design in detail.

Input patterns

Forms are where users give information to a product, and small details make a big difference. Labels should sit above fields and remain visible, inputs should match the type of data, and validation should happen inline, after a user leaves a field, with clear messages explaining how to fix problems. Long forms work better split into logical steps with a progress indicator.

• Clear labels: Visible labels above every field.
• Right input types: Date pickers, numeric keypads and email keyboards.
• Inline validation: Specific, helpful messages next to the field.
• Logical steps: Long forms divided into short sections.

Feedback patterns

Modals and dialogs interrupt the flow to focus attention on an important decision, such as confirming a deletion. They should be used sparingly, because frequent interruptions frustrate users. Toasts are brief, non-blocking messages that confirm actions, while alerts and banners highlight important information or problems. Progress indicators, including spinners, progress bars and skeleton screens, show that the system is working. Our post on microinteractions explains how small feedback moments build confidence.

Empty states and onboarding

Empty states appear when a screen has no content yet, such as a new inbox or a search with no results. Rather than leaving a blank screen, a good empty state explains what will appear and offers a clear first action. Onboarding patterns, such as short welcome screens, tooltips and checklists, help new users get started. Keep onboarding brief and skippable, and focus on getting users to their first moment of value. Our post on engaging mobile experiences covers onboarding in more depth.

Common pattern mistakes

• Using modals for content that should be a page
• Inventing custom patterns where familiar ones work
• Mixing different patterns for the same purpose
• Hiding important navigation behind unlabelled icons
• Forgetting empty, loading and error states

Making patterns accessible

Every pattern must work for people using keyboards, screen readers and other assistive technologies. Modals need to trap focus and return it when closed, tabs need correct roles and keyboard support, and toasts should be announced to screen readers without disappearing too quickly. The W3C’s ARIA Authoring Practices Guide provides detailed guidance for many common patterns. Our guide to accessibility in UI/UX design covers broader standards.

Frequently asked questions

What is a UI pattern?

A reusable solution to a common interface problem, such as navigation, forms or feedback messages, that users recognise from other products.

Why should designers use common UI patterns?

Familiar patterns reduce the learning effort for users and save design and development time.

When should we create a new pattern?

Only when existing patterns genuinely do not fit the problem, and after testing the new pattern with users.

Where can designers find UI pattern guidance?

Platform guidelines from Apple and Google, the W3C ARIA Authoring Practices Guide and established design systems.

Related articles

• Modern UI design: a practical guide with tips
• Behind the scenes: crafting design systems that teams actually use
• Microinteractions: the small details that make interfaces feel alive