Optimistic UI and what to do when it's wrong

Accueil du coursCommencer

IntroductionCommencer

Index des règlesRéférence

Référence des composantsRéférence

RecettesRéférence

Journal des modificationsRéférence

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

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

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

Stop typing "make it look better"Part 1 · Why AI output looks right — "Better" is not an instructionEn cours d’écriture

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

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

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

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

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

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

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

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

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

The one sentence that must landPart 2 · Marketing sites — Content before layoutPrévu

Write the page before you generate itPart 2 · Marketing sites — Content before layoutPrévu

Real proof, or no proofPart 2 · Marketing sites — Content before layoutPrévu

Section rhythm: not twelve identical bandsPart 2 · Marketing sites — Pacing a pagePrévu

One primary action per pagePart 2 · Marketing sites — Pacing a pagePrévu

Motion that earns its placePart 2 · Marketing sites — Pacing a pagePrévu

Mobile is where it falls apartPart 2 · Marketing sites — Where generated sites breakPrévu

The semantics the model skipsPart 2 · Marketing sites — Where generated sites breakPrévu

Images that aren't stockPart 2 · Marketing sites — Where generated sites breakPrévu

Every figure names its arrayPart 3 · Derivation — Where the numbers come fromPrévu

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

Aggregates that reconcilePart 3 · Derivation — Where the numbers come fromPrévu

Actions derive from record statePart 3 · Derivation — Behaviour derives tooPrévu

One data state per screenPart 3 · Derivation — Behaviour derives tooPrévu

Empty, loading, partial, error, deniedPart 4 · States first — The five statesPrévu

Empty states that teachPart 4 · States first — The five statesPrévu

Errors that say what to do nextPart 4 · States first — The five statesPrévu

Refusal is design workPart 4 · States first — Permission and refusalPrévu

Showing what someone can't doPart 4 · States first — Permission and refusalPrévu

Optimistic UI, and when it's wrongPart 4 · States first — OptimismPrévu

Density without noisePart 5 · Record-heavy screens — DensityPrévu

Hierarchy when everything is dataPart 5 · Record-heavy screens — DensityPrévu

The list-detail decisionPart 5 · Record-heavy screens — StructurePrévu

Tables: row versus behind the rowPart 5 · Record-heavy screens — StructurePrévu

Filters people actually usePart 5 · Record-heavy screens — StructurePrévu

Confidence, shown honestlyPart 6 · Designing for agents — TrustPrévu

Citations and provenancePart 6 · Designing for agents — TrustPrévu

Action logs and undoPart 6 · Designing for agents — TrustPrévu

Review-and-approve as a patternPart 6 · Designing for agents — ControlPrévu

Streaming, interrupts, stopPart 6 · Designing for agents — ControlPrévu

Diff viewsPart 6 · Designing for agents — ControlPrévu

The assistant that isn't a chat boxPart 6 · Designing for agents — FormPrévu

Anatomy of a rules filePart 7 · Working with the agent — The rules filePrévu

Mechanical rules vs judgement rulesPart 7 · Working with the agent — The rules filePrévu

Correct/incorrect pairsPart 7 · Working with the agent — The rules filePrévu

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

What belongs in a briefPart 7 · Working with the agent — Briefing and reviewingPrévu

Reviewing generated UI: a checklistPart 7 · Working with the agent — Briefing and reviewingPrévu

Bringing rules into a client codebasePart 7 · Working with the agent — Briefing and reviewingPrévu