UI patterns quiz

The ui patterns entries in the glossary, in brief. Open any one for the interactive demo behind it.

Cards

A card is a container that bundles everything about one thing - image, title, detail, action - into a single bounded unit you can scan and act on as a whole. Its job is to make the edges of 'one item' obvious, so a list of many things reads as many things, not one undifferentiated run of text.

Tabs

Tabs split one screen into parallel panels, showing only one at a time. They keep pages short by hiding everything except the selected panel - which is the whole point, and the whole danger.

Accordion

An accordion is a stack of headed panels that open and close on click, folding long content into a scannable list of titles you can expand as needed. This very demo is one - the panels below are the pattern.

Dropdown / select menu

A dropdown menu lets you pick one option from a list that stays hidden until opened, saving space when there are many choices. It’s best for long, familiar lists - like countries, months, or quantities - but not for short sets or important choices, where hiding the options behind a click costs more than it saves.

Carousel

A carousel shows one panel at a time in a single slot, with others hidden until you navigate forward or they rotate. It saves space but at a cost: almost everything beyond the first panel goes unseen, because most people never advance and auto-rotation moves on before they engage.

Inline validation

Inline validation checks a form field as the person fills it in - or just after they leave it - and shows the result there and then, rather than waiting for them to submit the whole form. Done well it catches mistakes early, next to the field that caused them, so people fix problems while the context is fresh instead of being bounced back to a wall of errors at the end.

Mega menu

A mega menu is a large, two-dimensional dropdown that displays many navigation options at once - grouped into labelled columns, sometimes with icons or images - instead of a thin, scrolling list. It works well for content-heavy sites (like big retailers or universities) where showing the structure at a glance helps users find their way faster than navigating through nested menus.

Notifications & badges

Notifications and badges are signals that something needs attention - a count on an icon, a dot, a banner, a push alert. Used honestly they inform: "you have 3 unread messages". Used cynically they manufacture urgency and pull people back for the company's benefit, and either way they only keep their power if they're meaningful, because people quickly learn to ignore signals that cry wolf.

Modal dialog

A modal dialog blocks interaction with the page behind it while open. Focus should enter the modal, stay within its controls, and return to the trigger when it closes. Some modals ask for a decision; others just present information or a short task. It becomes a keyboard trap only when there’s no reliable way to complete or dismiss it - not because focus is contained.

Stepper (wizard)

A stepper - or wizard - breaks a long task into a short sequence of steps, showing your current position and how many remain. It turns a daunting wall of fields into a series of small, clearly finishable chunks, and the visible progress keeps you moving toward the end.

Segmented control

A segmented control is a row of two to about five mutually-exclusive options, all visible at once, where exactly one is selected. It's the inline alternative to a dropdown: for a small, stable set of choices it shows every option up front and switches in a single tap, rather than hiding them behind a menu.

Search with autocomplete

Autocomplete, or typeahead, suggests matching options as you type, helping you recognise and select what you want without spelling it fully. It turns a blank field that demands perfect recall into a guided one that meets you halfway.

Filtering and faceted search

Filtering narrows a list using a rule you pick; faceted search lets you combine several such rules - by category, price, size, or availability - each based on the items’ own attributes, and shows how many results each choice would leave. It turns a broad, flat result set into something you can shape precisely to your needs.

Date picker

A date picker lets you select a date from a calendar instead of typing it. It removes ambiguity and error: it shows valid days, settles the format, and makes "03/04" impossible to misread - because you pick the day, not describe it.

Navigation drawer (hamburger)

A navigation drawer hides a menu off-screen behind an icon - usually the three-line 'hamburger' - and slides it in when tapped. It recovers screen space by keeping navigation out of sight, which works well on small screens but loses out on wider ones where showing links directly would be better.

Empty state

An empty state shows what a screen displays when there’s nothing to show yet - no results, no items, no history. It’s often the first screen a new user sees and is easily overlooked.

Command palette

A command palette is a search box for actions: press a shortcut (often Cmd/Ctrl+K), type a few letters, and run any command, jump to any page, or find any item without hunting through menus. It collapses a whole interface's worth of navigation into one keyboard-driven box.

Data table

A data table arranges records in rows and columns so they can be scanned, compared and reordered along any field. Its power is alignment: shared columns let the eye run straight down a value to compare like with like, and sorting reorders the whole set to answer "which is biggest, newest, cheapest?" in one click.

Pagination vs infinite scroll

Two ways to handle a long list: pagination splits it into numbered pages you can jump to, while infinite scroll loads more as you scroll. Pagination shows your position and lets you skip to any section; infinite scroll offers a seamless flow without a clear end.

Tabs vs accordion

Both hide content behind clickable labels, but tabs show them side by side horizontally, revealing one at a time, while accordions stack them vertically and let panels expand in place. The choice often depends on how many sections there are and screen width.

Breadcrumbs

Breadcrumbs are the small trail of links - like Home > Catalogue > Shoes - that show your current position in the hierarchy and let you navigate back up. They quietly answer two questions: where am I, and how do I get back?

Skeleton screen

A skeleton screen is a placeholder that shows the anticipated structure of content while it loads - grey blocks where text and images will appear - instead of a spinner or blank. It doesn't show real progress; it previews the shape that's coming, which makes the same wait feel shorter and the page feel like it's already arriving.

Toast notification

A toast is a small, temporary message that slides in to confirm an action - like 'Saved', 'Archived', or 'Link copied' - then fades away on its own. It gives light feedback without interrupting, unlike a modal you must close.

Modal vs toast

A modal blocks interaction with the underlying interface and demands attention; a toast is non-modal, temporary feedback and should not contain essential information.