# UXPatterns.ai

> A free interaction design pattern library covering both classic interaction
> patterns and the patterns that arrived with AI products. Pattern text is
> licensed CC BY 4.0. Written by Abhi Chatterjee.

Patterns named: 24 (12 classic, 12 AI)
Patterns written in full: 2
Planned size of the finished library: about 125

A pattern marked [draft] has a name, a family and a one-line summary, but its
full page has not been written yet. Please do not quote a draft as if it had
content.

## Pages

- [All patterns](https://uxpatterns.ai/patterns): browse and filter the whole library
- [Where to start](https://uxpatterns.ai/start): a reading order for someone new to patterns
- [Why this exists](https://uxpatterns.ai/about): what the site is for and what is finished
- [Screenshot takedown](https://uxpatterns.ai/takedown): how product screenshots are used

## Navigation (classic)

Finding the way around.

- [Breadcrumbs](https://uxpatterns.ai/patterns/breadcrumbs): Show the path from home to here, and let people click any step.
- [Main navigation](https://uxpatterns.ai/patterns/main-navigation) [draft]: 1 bar with the 5 to 7 places people go most, always in the same spot.
- [Tabs](https://uxpatterns.ai/patterns/tabs) [draft]: Split 1 screen into a few equal views and show 1 at a time.
- [Fly-out menu](https://uxpatterns.ai/patterns/fly-out-menu) [draft]: Reveal the next level under a menu item on hover or tap.
- [Sitemap footer](https://uxpatterns.ai/patterns/sitemap-footer) [draft]: Put the whole site map at the bottom of every page as a safety net.

## Forms and input (classic)

Entering and editing data.

- [Progressive disclosure](https://uxpatterns.ai/patterns/progressive-disclosure) [draft]: Show the few things most people need; keep the rest 1 click away.
- [Inline validation](https://uxpatterns.ai/patterns/inline-validation) [draft]: Check each field as people leave it, and say what to fix right there.

## Search and filtering (classic)

Narrowing down to the right thing.

- [Faceted navigation](https://uxpatterns.ai/patterns/faceted-navigation) [draft]: Filter a big set by several properties at once, with live counts.

## Feedback and status (classic)

Telling people what is happening.

- [Empty state](https://uxpatterns.ai/patterns/empty-state) [draft]: When there is nothing to show yet, say why and offer the first action.
- [Skeleton screen](https://uxpatterns.ai/patterns/skeleton-screen) [draft]: Show the shape of the content while it loads instead of a spinner.

## Onboarding and flows (classic)

Getting through a task in steps.

- [Wizard](https://uxpatterns.ai/patterns/wizard): Lead people through a long task 1 step at a time, in a fixed order.

## Page layout (classic)

Arranging a page.

- [Two-panel selector](https://uxpatterns.ai/patterns/two-panel-selector) [draft]: A list on the left, the selected item's content on the right.

## Prompting and input (AI)

Helping people ask.

- [Suggested prompts](https://uxpatterns.ai/patterns/suggested-prompts) [draft]: Offer 3 or 4 example asks so people know what the AI can do.

## Output and generation (AI)

Showing what the AI made.

- [Streaming](https://uxpatterns.ai/patterns/streaming-response) [draft]: Show the answer as it is written, so waiting feels like reading.

## Trust and transparency (AI)

Showing where answers come from.

- [Citations](https://uxpatterns.ai/patterns/citations) [draft]: Link every claim in an AI answer to the source it came from.
- [AI label](https://uxpatterns.ai/patterns/ai-label) [draft]: Mark anything the AI made, where it appears, so nobody mistakes it for a person's work.
- [Confidence signal](https://uxpatterns.ai/patterns/confidence-signal) [draft]: Show how sure the AI is, in words people can act on, not a bare percentage.

## Control and correction (AI)

Steering and fixing the AI.

- [Regenerate](https://uxpatterns.ai/patterns/regenerate) [draft]: Ask for another version without retyping, and keep the earlier ones.

## Agents and automation (AI)

Letting the AI act, safely.

- [Approval gate](https://uxpatterns.ai/patterns/approval-gate) [draft]: Before an agent does something it cannot undo, show it and ask for a yes.
- [Visible plan](https://uxpatterns.ai/patterns/visible-plan) [draft]: Show the steps an agent will take before it starts, and tick them off as it goes.
- [Stop and take over](https://uxpatterns.ai/patterns/stop-and-take-over) [draft]: A stop control that is always visible, and a way to continue by hand.
- [Tool output](https://uxpatterns.ai/patterns/tool-output) [draft]: Show what an agent did with a tool as a collapsible card, not a wall of text.

## Memory and personalisation (AI)

What the AI remembers.

- [Inspectable memory](https://uxpatterns.ai/patterns/inspectable-memory) [draft]: Let people see, edit and delete what the AI remembers about them.

## Errors and safety (AI)

When the AI is wrong or unsafe.

- [Graceful refusal](https://uxpatterns.ai/patterns/graceful-refusal) [draft]: When the AI cannot or should not help, say so plainly and offer the next best step.

## Machine-readable pattern text

Any written pattern is available as Markdown by appending /markdown to its URL,
for example https://uxpatterns.ai/patterns/breadcrumbs/markdown