← Back to AI Lab Faraz Khan

✿ Field Guide · AI Experience Design

Twelve ways to make AI feel trustworthy, not just impressive.

AI that sounds sure of everything is easy to build and hard to trust. These are the twelve interface patterns I keep reaching for to fix that, each one running live on this page. Go ahead, click things.

12 patterns Live demos, not screenshots From shipped + prototyped work Faraz Khan · Senior UX Lead

Quick honesty note: everything here is documented from products you already use, plus my own client work and prototypes. Prototypes are labeled as prototypes, and there are no made-up numbers anywhere on this page.

Pattern 01Evidence

Confidence With Receipts

The problem. "87% match" with no receipts. You either trust it blind or ignore it completely. Both are bad.

The pattern. Give every score two handles: tap it to see what's behind it, tap the source to see where it came from. People trust numbers they can argue with.

Live demo · tap the score

Ayesha R. · Backend Engineer AI ranked 87% fit
Source: profile Source: repo activity
Public profile, captured 12 Jul. The AI read the headline, roles, and stack keywords. It did not read private messages.
Public repo activity, last 12 months. Commit language only; no code was judged for quality.
Pattern 02Control

Intent Preview

The problem. An AI that acts first and explains later teaches everyone to fear it. One surprise action on real data is all it takes.

The pattern. Before anything real happens, show the plan: what it will do, what it touches, and whether you can take it back. No surprises, ever.

Live demo · your call

Agent · Sentinelwants to pull a credit bureau report

Application A-1043 · reads: applicant consent record · touches: Bureau API (read-only) · reversible: yes · cost: one bureau inquiry
Pattern 03Control

The Autonomy Dial

The problem. All-or-nothing autonomy fails both ways. Approve everything and you become a rubber stamp. Automate everything and nobody can explain what happened.

The pattern. Autonomy comes in steps: suggest only, approve each, auto with a paper trail. The AI earns each step, and you can watch the work move when you turn the dial.

Live demo · turn the dial

Waiting on you (4)

Flowing through (0)

Suggest only: the agent drafts, you do. Everything waits for you.

Pattern 04Control

The Gate And The Undo Window

The problem. Some AI actions are cheap to draft and painful to take back. An email to 14 people should never be one accidental click away.

The pattern. A human gate before the send, and a short undo window after it. "Approved" and "gone forever" should never be the same moment.

Live demo · send it, then take it back

AI draftedOutreach to 14 shortlisted candidates

Personalised from each candidate's public work. Nothing sends without you.

Pattern 05Recovery

Streaming With A Stop Handle

The problem. A spinner that ends in a wall of text gives you two options: wait blind, or read something that's already wrong.

The pattern. Let the answer appear as it's written, and give people a brake. Stopping halfway is a feature, not a failure.

Live demo · hit stop mid-sentence

Pattern 06Recovery

Editable AI Output

The problem. If AI text can only be accepted or regenerated, it never feels like yours. Errors survive, and the voice drifts.

The pattern. Every draft is a starting point. Edit in place, and let the interface remember the handover from machine words to your words.

Live demo · click edit, change a word

AI draft

Hi Ayesha, your work on payment reconciliation at scale caught our eye. We are building the lending rails for two-wheeler finance across India, and your profile reads like someone who has solved this before.

Pattern 07Candor

Graceful Uncertainty

The problem. AI sounds just as confident at 55% as at 95%. People find out the hard way, then stop trusting all of it.

The pattern. When the signal is weak, say so. Show what's missing and how to fix it. An honest "I'm not sure" earns more trust than a smooth guess.

Live demo · flip the signal

High confidenceRecommend: proceed to interview

Based on 3 corroborating sources and a complete work history. Full reasoning one click away.

Pattern 08Control

The Escalation Threshold

The problem. If a tired human can one-click approve a shaky AI call at 6pm on a Friday, someday one will.

The pattern. Below a set confidence, take the easy button away. The only path left is sending it to a human with the full story attached. The interface holds the line so people don't have to.

Live demo · drag the confidence down

Agent confidence: 86% · threshold 70%
Above threshold. One-click approval available.
Pattern 09Evidence

The Audit Trail With Diffs

The problem. "What did the AI change, and who said yes?" If that takes a meeting to answer, every AI feature becomes a fight with compliance.

The pattern. Log everything: what happened, who approved it, and a before-and-after for every change. Boring on purpose, and the reason everything else on this page is allowed to exist.

Live demo · open the first entry

Agent · LedgerUpdated applicant income fieldApproved · R. Mehta
Agent · SentinelPulled bureau report A-1043Approved · you
Agent · ScoutDrafted 14 outreach emailsAuto · within policy
Pattern 10Evidence

Reasoning On Demand

The problem. Show all the reasoning and you bury the answer. Show none and you're asking for blind faith. Both lose people, just at different speeds.

The pattern. Lead with the answer. Keep the "why" one tap behind it, complete when opened. Progressive disclosure has been my signature for a decade; AI is where it became non-negotiable.

Live demo

Answer: schedule the campaign for Tuesday 10amAI
Open rates for this audience peak Tuesday mornings across the last 6 sends. Monday competes with weekend backlog. The two prior Tuesday sends beat the account average by 18% and 11%. Confidence: moderate, the sample is small.
Pattern 11Candor

Memory You Can See And Edit

The problem. An AI that remembers things about you without showing what it remembers feels creepy, even when it's trying to help.

The pattern. Make memory a visible surface: what's saved, what was used just now, and a one-tap way to forget. And forgetting means forgotten.

Live demo · forget something

Prefers evening interview slots Hiring for the Pune office Budget band confirmed in March

Pink dots mark memories used in the current answer.

Pattern 12Evidence

Who Did What

The problem. Six months later, nobody remembers whether the machine decided or the human did. That gap is where accountability goes to die.

The pattern. Label agency the moment it happens: proposed by the agent, approved by you, edited by her. You can't reconstruct it later, so the interface writes it down now.

Live demo · one loan application's day

09:14Documents classified and filedAgent · Clerk
10:02Bureau report pulledproposed approved · you
11:47Income figure correctedproposed edited · R. Mehta
12:30Sanction letter draftedAgent · Ledger

How I Made This, Step By Step

A taste of the process: the steps, the thinking, and what was on the bench at each one. A page about trust should not hide its own kitchen.

Step 01
Harvest, don't invent

The patterns came out of work that already exists: Crux's supervision console, Slate's receipts, Aurora's in-canvas AI, FinVista's handoff rules. I collected what I kept reusing. The thinking: credibility comes from reuse, so the source material had to be things that already survived contact with users.

Bench: Figma archives · shipped screens · Crux + Slate prototype code

Step 02
Three gates to get in

Each candidate had to pass three checks: a problem I've actually seen, a sighting in a product you already use, and a place I built it myself. Twelve passed.

Bench: a plain-text longlist · product teardowns of ChatGPT, Claude, Gemini, Copilot

Step 03
Demos before words

Rule number one: every pattern must run, not be described. I sketched each interaction first, then wrote the copy around what the demo proved.

Bench: interaction briefs written in plain language, one per pattern, before any visuals

Step 04
Build with AI, keep the wheel

I directed, AI built, and every demo was click-tested in a headless browser until all twelve passed. The workflow is Pattern 12 practicing itself: the machine works, I decide.

Bench: Claude for the build · hand-tuned HTML/CSS/JS, no framework · Playwright headless browser for click-tests

Step 05
Taste rounds

Then the edit passes: jargon out, casual voice in. Demos promoted from side snips to center stage. A frozen-glass theme, and the pink dialed back 50% when it shouted. The Japanese type lasted exactly one round.

Bench: screenshot reviews · side-by-side passes · direction notes ("halve the pink", "kill the kanji")

Step 06
Ship honest

Prototypes labeled as prototypes, shipped work labeled as shipped, and zero invented numbers. The trust page has to be trustworthy about itself.

Bench: plain static HTML · GitHub Pages · labels doing the compliance work

The meta point, quietly: this page was made the way it says AI products should work. AI did the heavy lifting, a human held the taste and the judgment, and every step left a trail.