UXPatterns.ai
start here

4 short paths of 6 patterns each. Walk them in order - each pattern builds on the one before. No sign-up needed.

path 1 of 4

Design student

The patterns every portfolio project uses, with the words to explain them in a review.

2 of 6 written in full - the rest are being written
  1. 1Main navigationbeing written1 bar with the 5 to 7 places people go most, always in the same spot.
  2. 2BreadcrumbsShow the path from home to here, and let people click any step.Read it
  3. 3Tabsbeing writtenSplit 1 screen into a few equal views and show 1 at a time.
  4. 4WizardLead people through a long task 1 step at a time, in a fixed order.Read it
  5. 5Inline validationbeing writtenCheck each field as people leave it, and say what to fix right there.
  6. 6Empty statebeing writtenWhen there is nothing to show yet, say why and offer the first action.
path 2 of 4

Switching to UX

Is my work good enough? The patterns interviewers expect you to name, and to say when not to use.

0 of 6 written in full - the rest are being written
  1. 1Progressive disclosurebeing writtenShow the few things most people need; keep the rest 1 click away.
  2. 2Faceted navigationbeing writtenFilter a big set by several properties at once, with live counts.
  3. 3Skeleton screenbeing writtenShow the shape of the content while it loads instead of a spinner.
  4. 4Two-panel selectorbeing writtenA list on the left, the selected item's content on the right.
  5. 5Fly-out menubeing writtenReveal the next level under a menu item on hover or tap.
  6. 6Sitemap footerbeing writtenPut the whole site map at the bottom of every page as a safety net.
path 3 of 4

Senior, new to AI

The vocabulary for chat, agents, citations and approvals - so you can lead the AI feature, not follow it.

0 of 6 written in full - the rest are being written
  1. 1StreamingAIbeing writtenShow the answer as it is written, so waiting feels like reading.
  2. 2CitationsAIbeing writtenLink every claim in an AI answer to the source it came from.
  3. 3Suggested promptsAIbeing writtenOffer 3 or 4 example asks so people know what the AI can do.
  4. 4Approval gateAIbeing writtenBefore an agent does something it cannot undo, show it and ask for a yes.
  5. 5Visible planAIbeing writtenShow the steps an agent will take before it starts, and tick them off as it goes.
  6. 6Stop and take overAIbeing writtenA stop control that is always visible, and a way to continue by hand.
path 4 of 4

PM or developer

The 1-line definitions and trade-offs you need to talk to designers, and nothing more.

0 of 6 written in full - the rest are being written
  1. 1AI labelAIbeing writtenMark anything the AI made, where it appears, so nobody mistakes it for a person's work.
  2. 2RegenerateAIbeing writtenAsk for another version without retyping, and keep the earlier ones.
  3. 3Inspectable memoryAIbeing writtenLet people see, edit and delete what the AI remembers about them.
  4. 4Confidence signalAIbeing writtenShow how sure the AI is, in words people can act on, not a bare percentage.
  5. 5Graceful refusalAIbeing writtenWhen the AI cannot or should not help, say so plainly and offer the next best step.
  6. 6Tool outputAIbeing writtenShow what an agent did with a tool as a collapsible card, not a wall of text.
none of these fit?

Start from the problem you have

Search in your own words - “too many steps”, “where am I” - and the library finds the pattern that answers it.

Search the patterns