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 groups 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 slice one area of the screen into parallel panels and show just one at a time. They keep a page short by hiding all but the panel you've picked - which is the whole trick, and the whole risk.

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.

Modal dialog

A modal dialog overlays the page and requires a decision before you can proceed - everything behind it is disabled. Used well, it focuses attention; used poorly, it traps the keyboard and loses users entirely.

Empty state

An empty state is what a screen shows when there is nothing to show yet - no results, no items, no history. It is the most overlooked screen in the product, and often the first one a new user meets.

Pagination vs infinite scroll

Two ways to handle a long list: pagination splits it into numbered pages you navigate between, while infinite scroll loads more content as you scroll down. Pagination gives users control and lets them know where they are; infinite scroll offers a smooth, continuous flow without a clear end.

Tabs vs accordion

Both hide content behind clickable labels, but tabs display 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 - Home > Catalogue > Shoes - that shows where the current page sits in the hierarchy and lets you step back up it. They answer two quiet questions at once: where am I, and how do I get back?

Skeleton screen

A skeleton screen is a placeholder that shows the shape of content while it loads - grey blocks where text and images will appear - instead of a spinner or blank. It makes the same wait feel shorter by showing progress toward something specific.

Toast notification

A toast is a small, transient message that slides in to confirm an action - "Saved", "Archived", "Link copied" - then disappears on its own. It gives lightweight feedback without interrupting, the opposite of a modal you must dismiss.

Modal vs toast

Two ways to communicate that something has happened. A modal halts activity and requires a response before proceeding; a toast appears briefly, delivers its message, then disappears. One interrupts, one glides away - and choosing the wrong one creates a usability issue.