Optimistic UI and what to do when it's wrong

Course hubStart

IntroductionStart

Rules indexReference

Component referenceReference

RecipesReference

ChangelogReference

Add up the numbers on your own dashboardPart 1 · Why AI output looks right — Plausible is not correctPublished

Ask who the testimonial is fromPart 1 · Why AI output looks right — Plausible is not correctPublished

Learn to see the shape without the substancePart 1 · Why AI output looks right — Plausible is not correctPublished

Stop typing "make it look better"Part 1 · Why AI output looks right — "Better" is not an instructionWriting now

Name the user, the task, and the time budgetPart 1 · Why AI output looks right — "Better" is not an instructionPlanned

Make it ask instead of guessPart 1 · Why AI output looks right — "Better" is not an instructionPlanned

Choose the typeface firstPart 1 · Why AI output looks right — A default is a decision you didn't makePlanned

Spend your colour oncePart 1 · Why AI output looks right — A default is a decision you didn't makePlanned

Break the three-column reflexPart 1 · Why AI output looks right — A default is a decision you didn't makePlanned

Delete the navigation you don't needPart 1 · Why AI output looks right — A default is a decision you didn't makePlanned

Check contrast before you argue about tastePart 1 · Why AI output looks right — A default is a decision you didn't makePlanned

Name the five gaps behind every failurePart 1 · Why AI output looks right — What's actually missingPlanned

You can't lay out content that doesn't exist yetPart 2 · Marketing sites — Content before layoutPlanned

The one sentence that must landPart 2 · Marketing sites — Content before layoutPlanned

Write the page before you generate itPart 2 · Marketing sites — Content before layoutPlanned

Real proof, or no proofPart 2 · Marketing sites — Content before layoutPlanned

Section rhythm: not twelve identical bandsPart 2 · Marketing sites — Pacing a pagePlanned

One primary action per pagePart 2 · Marketing sites — Pacing a pagePlanned

Motion that earns its placePart 2 · Marketing sites — Pacing a pagePlanned

Mobile is where it falls apartPart 2 · Marketing sites — Where generated sites breakPlanned

The semantics the model skipsPart 2 · Marketing sites — Where generated sites breakPlanned

Images that aren't stockPart 2 · Marketing sites — Where generated sites breakPlanned

Every figure names its arrayPart 3 · Derivation — Where the numbers come fromPlanned

Fixtures with a story, not lorem dataPart 3 · Derivation — Where the numbers come fromPlanned

Aggregates that reconcilePart 3 · Derivation — Where the numbers come fromPlanned

Actions derive from record statePart 3 · Derivation — Behaviour derives tooPlanned

One data state per screenPart 3 · Derivation — Behaviour derives tooPlanned

Empty, loading, partial, error, deniedPart 4 · States first — The five statesPlanned

Empty states that teachPart 4 · States first — The five statesPlanned

Errors that say what to do nextPart 4 · States first — The five statesPlanned

Refusal is design workPart 4 · States first — Permission and refusalPlanned

Showing what someone can't doPart 4 · States first — Permission and refusalPlanned

Optimistic UI, and when it's wrongPart 4 · States first — OptimismPlanned

Density without noisePart 5 · Record-heavy screens — DensityPlanned

Hierarchy when everything is dataPart 5 · Record-heavy screens — DensityPlanned

The list-detail decisionPart 5 · Record-heavy screens — StructurePlanned

Tables: row versus behind the rowPart 5 · Record-heavy screens — StructurePlanned

Filters people actually usePart 5 · Record-heavy screens — StructurePlanned

Confidence, shown honestlyPart 6 · Designing for agents — TrustPlanned

Citations and provenancePart 6 · Designing for agents — TrustPlanned

Action logs and undoPart 6 · Designing for agents — TrustPlanned

Review-and-approve as a patternPart 6 · Designing for agents — ControlPlanned

Streaming, interrupts, stopPart 6 · Designing for agents — ControlPlanned

Diff viewsPart 6 · Designing for agents — ControlPlanned

The assistant that isn't a chat boxPart 6 · Designing for agents — FormPlanned

Anatomy of a rules filePart 7 · Working with the agent — The rules filePlanned

Mechanical rules vs judgement rulesPart 7 · Working with the agent — The rules filePlanned

Correct/incorrect pairsPart 7 · Working with the agent — The rules filePlanned

Brief a whole screen, not a componentPart 7 · Working with the agent — Briefing and reviewingPlanned

What belongs in a briefPart 7 · Working with the agent — Briefing and reviewingPlanned

Reviewing generated UI: a checklistPart 7 · Working with the agent — Briefing and reviewingPlanned

Bringing rules into a client codebasePart 7 · Working with the agent — Briefing and reviewingPlanned