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.

Carousel

A carousel shows a sequence of panels in a single slot, one at a time, with the rest hidden until you move 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.

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 - divides 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 is what a screen shows when there’s nothing to show yet - no results, no items, no history. It’s often the first screen a new user meets and is frequently 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.