UI design patterns are tried solutions to problems every product meets: an empty screen, a wrong entry in a form, a long list, a busy dashboard. Each term has a real example and leads to the full lesson.
UI design patterns are proven solutions to problems that interfaces meet again and again: an empty screen, an error, a long list, a choice between options. Using a known pattern saves design time and lets people rely on habits they already have.
Example. A search field with a magnifier icon at the top of a page is a pattern: nobody has to learn where search lives.
Also called: UX patterns, interface patterns
A UI pattern library is a team's shared collection of patterns: when to use each one, how it behaves and which component builds it. It keeps similar problems solved the same way across a product.
Example. The library says to confirm a deletion with an undo toast instead of a modal, so every team ships the same behavior.
Also called: pattern library, UX pattern library
An empty state is what a screen shows when it has nothing to display yet: a new inbox, a search with no results, a dashboard before any data arrives. A good empty state explains why the screen is empty and gives one clear next step.
Example. A new project tool shows "No tasks yet" with a short line on what tasks are for and a button to create the first one.
Also called: empty state design, zero state, blank state
An error message tells people that something went wrong, why, and what to do next, in words they understand. It sits next to the problem, keeps what they typed and never blames them.
Example. "This card has expired. Check the date or use another card" under the card field helps; "Error 402" in a banner does not.
Also called: error message design, error state
Inline validation checks a form field while or right after people fill it in and shows the result next to the field. Timing matters: checking after a person leaves the field helps, interrupting every keystroke annoys.
Example. A sign-up form shows a green check once the email address is complete, and a short hint if the password is too short after the person moves on.
Also called: live validation, real-time validation, form validation
A multi-step form splits a long task into short steps with a visible progress indicator. It works when each step is a natural group of questions and people can go back without losing what they entered.
Example. A loan application asks about the person, then income, then the loan, showing "Step 2 of 3" at the top.
Also called: form wizard, multi-step form design, stepper
A modal is a window that opens on top of the page and blocks the rest until people respond. It suits short, important decisions; a non-blocking dialog or a bottom sheet suits content people may want to compare with the page behind.
Example. "Delete this project? This cannot be undone" with Cancel and Delete is a fair use of a modal.
Also called: modal window, dialog, modal vs dialog, bottom sheet
A toast notification is a short message that appears for a few seconds, usually at the edge of the screen, to confirm an action without interrupting the task. It can carry one action, such as Undo.
Example. After archiving an email, a toast says "Conversation archived" with an Undo link and disappears on its own.
Also called: toast, snackbar
Undo lets people reverse their last action. Offering undo makes interfaces faster and calmer, because a quick mistake costs one tap instead of a confirmation dialog before every action.
Example. A chat app deletes a message at once and shows "Message deleted. Undo" for a few seconds.
Also called: undo UX, reversible actions
A skeleton screen shows the gray outline of a page while its content loads: blocks where text, images and cards will appear. It makes waiting feel shorter because people see the shape of what is coming.
Example. A news app shows gray bars for headlines and gray boxes for photos, then fills them in as the stories arrive.
Also called: skeleton loader, loading skeleton, loading state
Breadcrumbs are a short trail of links that shows where a page sits in a site's structure, from the home page to the current page. They help people understand where they are and jump back up a level.
Example. Home > Women > Shoes > Running shoes at the top of a product page lets a shopper return to all shoes in one click.
Also called: breadcrumb navigation
A mega menu is a large dropdown that shows many navigation links at once, grouped under headings. It helps big sites, such as shops and universities, let people scan the whole structure in one look.
Example. Hovering "Men" on a clothing site opens a panel with columns for clothing, shoes, accessories and sale.
Also called: mega dropdown, mega menu design
Infinite scroll loads more content automatically as people reach the end of a list. It suits browsing feeds; it makes it hard to reach a footer, return to a position or know how much is left.
Example. A photo feed keeps loading new posts as you scroll, so there is no page 2 to click.
Also called: endless scrolling, infinite scroll vs pagination
Pagination splits a long list into numbered pages. It gives people a sense of position and an easy way back, which suits search results, catalogs and tables.
Example. Search results show 20 items per page with page numbers and Next at the bottom, so a shopper can return to page 3 later.
Also called: paging, page numbers
Progressive disclosure shows only what most people need first and reveals the rest on request, through accordions, expandable sections or Advanced links. It keeps screens simple without hiding anything for good.
Example. A checkout shows a "Have a promo code?" link that opens the code field only for people who have one.
Also called: accordion, disclosure
A segmented control is a row of two to five connected buttons that switch between views or options of the same content. Tabs move between different sections; a segmented control changes how one section is shown.
Example. A calendar switches between Day, Week and Month with a segmented control at the top.
Also called: tabs vs segmented control, tabs
A toggle switch turns a setting on or off and applies the change at once. When a change only applies after Save, a checkbox is the clearer choice.
Example. A Wi-Fi switch in phone settings connects the moment it is turned on.
Also called: toggle, switch, toggle button
User onboarding is everything between sign-up and the moment a new user first gets real value from the product, the activation point. Good onboarding shortens that path and teaches by doing instead of by long tours.
Example. A design tool opens a new account straight into a template with one highlighted step, so the first file is ready in two minutes.
Also called: onboarding UX, product onboarding, activation
Dashboard design arranges numbers, charts and alerts on one screen so someone can decide something in the time they have. A good dashboard opens on a useful default view, puts the most important number first and lets people drill down for detail.
Example. A support lead's dashboard opens on today's open tickets and the oldest unanswered one, with weekly trends one click away.
Also called: dashboard UI, dashboard UI design, dashboard design best practices
A KPI (key performance indicator) is a number a team agrees to watch because it shows whether a goal is being met. On a dashboard, KPIs usually get the most prominent place, with a comparison that shows whether the number is good.
Example. "Orders today: 412, up 8% from last Tuesday" is a KPI with context; "412" alone is just a number.
Also called: key performance indicator, metric
Data visualization turns numbers into charts, maps and diagrams so patterns are visible at a glance. The chart type follows the question: change over time, comparison, share of a whole or relationship.
Example. A line chart shows monthly sign-ups over a year; a bar chart compares sign-ups by country for one month.
Also called: data viz, charts, data visualisation
A data table shows records in rows and columns that people can sort, filter and compare. Good table design keeps headers visible, aligns numbers to the right and makes filters easy to see and clear.
Example. An admin table of orders keeps the header row fixed while scrolling and shows active filters as chips above the rows.
Also called: data table design, table UI
Drill-down lets people click a summary number or chart to see the detail behind it, level by level. It keeps the first view simple while every number stays explainable.
Example. Clicking "Revenue: Europe" on a dashboard opens revenue by country, then by city.
Also called: drilling down, drill down
UI design patterns are reusable solutions to common interface problems, such as empty screens, errors, navigation and long lists. They save design time and let people rely on habits they already have. See UI design patterns.
A modal blocks the page until people respond; a non-blocking dialog or a bottom sheet lets them keep the page in view. Use a modal for short, important decisions. See modal.
Infinite scroll suits browsing feeds; pagination suits search results, catalogs and tables where people need to know their position and return to it. See infinite scroll and pagination.
Good dashboard design opens on a useful default view, puts the most important number first with context, and lets people drill down for detail. See dashboard design.
Every term on this page connects to a part of DesignPath where you can practise it.
Free UI design pattern courses