Designing with AI. Probabilistic tools that people can trust, steer and switch off.
Every app you use is getting an AI feature, and most of them are a chat box bolted to the side. This guide teaches you to do better: to decide when a model is the right material at all, to place it inside the work instead of beside it, and to design for the moments when it is slow, wrong or overconfident. It ends with the other half of the topic: how a one-person studio can use AI to design faster without designing blander.
TeachersAmershi and colleagues (Microsoft), Google PAIR, Apple HIG, Shneiderman, Bainbridge, Wattenberger, Sierra
By the end you will be able to
Explain what changes when a feature is probabilistic: errors become normal, output varies, and every call costs time and money (understand).
Decide whether a problem deserves AI at all, and choose the right level of autonomy for it (evaluate).
Pick an interaction pattern that fits the task: ghost text, transform-on-selection, command bar, structured output, agent with checkpoints, or chat (apply).
Spot missing trust and control affordances in any AI feature: sources, confidence, previews, diffs, undo, permissions (analyse).
Design the slow path, the wrong path and the feedback path of an AI feature, not only the happy path (create).
Build a 30-example eval set and a cost estimate before you ship (create).
Use AI as a design assistant for research, copy, code and variations while keeping judgment and taste your own (apply).
Warm-up
You already have strong intuitions about AI features, because you use them daily: autocomplete in your editor, smart replies in mail, a chat assistant in a browser tab. Some of those features feel like magic and some feel like a nag. Before reading, answer three quick questions. Do not look anything up. The point is to notice what you already believe so the chapters can confirm or correct it.
Diagnostic 1
A note-taking app adds "Summarize with AI". In testing, summaries are right about 90% of the time. What is the most important design question left?
At 90% accuracy, a person who summarizes five notes a day meets a wrong summary every other day. Accuracy work matters, but the design job is making errors cheap to notice and cheap to fix. That is the theme of Parts 1 and 3.
Diagnostic 2
Your expense app needs to convert "₹1,250.00" typed in a field into a number. A friend suggests sending the text to a language model. What do you do?
When a deterministic rule can do the job, it wins on speed, cost, privacy and predictability. Models earn their place when the input is genuinely open-ended. Chapter 3 gives you a test for this.
Diagnostic 3
An AI feature rewrites a 600-word paragraph. Which presentation lets the user trust the result fastest?
People can only trust what they can check. A diff turns "read 600 words again" into "review six changes". Chapter 11 has a working diff you can try.
How to study this guide
Read one Part per sitting. Each chapter has a demo, a visual or a mockup: do not skim past them, they carry half the teaching. Keep one AI feature from your own product (real or planned) in mind and run every exercise on it. If you have no AI feature yet, pick one you would like to add; by the end of the guide you will know whether you should.
Part one
A new material
A language model is not a smarter database. It is a material with different properties: it bends where code is rigid and breaks where code is reliable. Part one is about those properties, the research that already tells us how to design for them, and the first decision you make with any AI feature: whether to use it, and how much to let it do.
1
What changes when the system is probabilistic
Taught by Google PAIR, with Saleema Amershi and Lisanne Bainbridge
Traditional software does the same thing every time; AI features do something plausible every time. Designing for AI means designing for variation, for error as a normal state, and for time and money spent on every call.
Everything you learned about interaction design assumes a deterministic machine. Press Save and the file is saved. Type 2+2 and you get 4. The user forms a mental model once (see The Human Mind) and the system keeps honouring it. A language model breaks four of those assumptions at once, and each broken assumption becomes a design problem.
Property 1: the same input can give different outputs
Ask a model to summarize the same note twice and you can get two different summaries. Sampling settings can reduce this, and structured output can constrain it, but you should design as if variation is always possible. The consequence is that users cannot build a stable mental model from one try. They learn the feature as a distribution: "it is usually good at this, sometimes odd at that." Your interface has to help them learn the shape of that distribution quickly, and has to make a second try cheap.
Property 2: errors are normal, not exceptional
In classic software an error is a bug, and you fix it. In an AI feature, a wrong answer is a known rate: 3%, 10%, 25% depending on the task. You can push the rate down, but not to zero, and the errors are not flagged. A hallucinated date looks exactly like a real one. So the design job moves from "prevent errors" to "make errors visible, cheap and recoverable". Lisanne Bainbridge's 1983 paper Ironies of Automation warned about the same thing in factories and cockpits: the more reliable automation gets, the less practised and attentive the human who must catch its rare failures.
One arrow versus a fan. Code is a function; a model is a distribution. Notice the bottom output: the dangerous error is not the obviously broken one, it is the fluent, confident one that looks like the good ones.
Property 3: it is slow
A database lookup returns in milliseconds. A model call typically takes from under a second for a short completion to tens of seconds for a long answer, and minutes for a multi-step agent. That puts most AI features above the 1-second line where people lose the feeling of direct manipulation, and many above the 10-second line where they lose attention (the classic Nielsen response-time limits; see Motion & Feel for perceived speed). Latency is not an engineering detail you fix later. It shapes which patterns are even possible: ghost text needs a fast, small model; a research report can take a minute if it runs in the background.
Property 4: every call costs money
A button in normal software is free to press a thousand times. An AI button has a marginal cost per press, paid by you, in tokens. A feature that runs automatically on every keystroke or every page load can cost a hundred times more than the same feature run on request. As a solo creator on a ₹500 or $8 monthly plan, this is a design constraint as real as screen size. Chapter 16 turns it into a calculator.
Assumption from classic software
What is true with a model
Design response
Same input, same output
Output varies run to run
Regenerate, versions, examples of typical output, constrain with structure
Streaming, progress for steps, cancel, background work
Interactions are free
Each call costs money
Run on request, cache, small models for small jobs, quotas shown honestly
The system does what it says
The system says what sounds right
Ground in user data, cite, separate generated from typed text
Key idea
With AI, the happy path is the easy part. Design the wrong path, the slow path and the expensive path first.
Don't
Treated like database output. The date may be invented, and nothing on screen helps the user find out.
Do
Treated like a draft. A label sets the status, a timestamp link lets the user verify the fact, and editing is one click.
Do
Write down the expected error rate of the feature before you design it.
Label generated content as generated, at the point of use.
Make a second try one click away.
Decide early which calls run on request and which run automatically, because that decides cost.
Don't
Present model output with the same visual authority as data the user entered.
Design only from your best demo outputs.
Assume latency will "get fixed" by faster models later.
Run expensive calls on page load "in case" the user wants them.
In the wild
Gmail Smart ComposeGoogle, 2018
Suggests the rest of a sentence in grey as you type; you press Tab to accept or keep typing to ignore it. The suggestion costs you nothing when wrong. The cheaper an error is to ignore, the higher an error rate users will tolerate.
GitHub CopilotGitHub, 2021 preview
Inline code completions that are often wrong in small ways. Developers accept them anyway because the suggestion sits in the editor where tests, types and their own reading catch mistakes. Put model output where the user's normal checking habits already operate.
PerplexityPerplexity AI, 2022
Answers come with numbered citations to web sources. When the answer is wrong, the user has a path to find out. Grounding turns "trust me" into "check me".
For the solo creator
You are also the support desk. Every unflagged AI error becomes an email you answer. Ten minutes spent designing a "this looks wrong" path saves hours of support later, and it is the cheapest form of quality control you can buy.
Common mistakes
Designing from the demo
You test with three inputs that work beautifully and design the screen around them.
Run the feature on 30 real inputs before designing. Print the worst five and design for those.
Hiding the probabilistic nature
You want the feature to feel polished, so you remove every hint that it can be wrong.
Polish the recovery path instead. A visible "Edit" and a source link feel more professional than false certainty.
Ignoring cost until the bill arrives
During development you are the only user and calls feel free.
Multiply calls per user per day by your expected users and by price per call, on day one. See Chapter 16.
Check yourself
Your reading app extracts the author and date from saved articles using a model. It is right 95% of the time. Users never edit these fields. What does that most likely mean?
Silence is not the same as correctness. With fluent errors, people do not notice, and if correction is hidden they cannot act even when they do. Look at a sample of real outputs and test whether a user can find the edit control in five seconds.
Exercise 1.1 40 minutes · on your own product
The four-property audit
Pick one AI feature you have or plan (for example "summarize this note").
Run it, or a chat model with the same instruction, on 20 realistic inputs. Save every output.
Mark each output good, so-so or wrong. Compute the rough error rate.
Time five runs. Note the slowest.
Estimate calls per user per day and the cost per call.
Write one sentence for each property: variation, error rate, latency, cost.
You're done when: you have a one-page card with four numbers (variation seen, error rate, slowest time, monthly cost per user) and the worst output pasted below them.
Beginner
Competent
Strong
Tried 3 to 5 inputs and wrote impressions.
20 inputs, rated, with the four numbers.
Also grouped the errors by type and noted which type would hurt a user most.
2
The rulebooks that already exist
Taught by Saleema Amershi et al. (Microsoft), with Google PAIR and Apple's Human Interface Guidelines
You do not need to invent AI design from scratch. Three free, well-researched sources already cover most of it: Microsoft's 18 Guidelines for Human-AI Interaction, Google's People + AI Guidebook, and Apple's machine learning guidance. Learn their shape, then use them as checklists.
Much of the AI design advice you will read online in 2026 is a rediscovery of work published in 2019. That year a Microsoft Research team led by Saleema Amershi published Guidelines for Human-AI Interaction at CHI, the main academic conference on human-computer interaction. They collected more than 150 recommendations from two decades of research and industry, distilled them to 18, and tested them against 20 real AI products with 49 designers. The same year Google's People + AI Research group (PAIR) released the People + AI Guidebook, a practical workbook organized around the product process. Apple's Human Interface Guidelines have long had a section on machine learning, covering feedback, corrections, confidence and limitations.
These were written before large language models went mainstream, and that is exactly why they are valuable: they describe the human side, which has not changed. People still need to know what a system can do, how well it does it, how to correct it and how to turn it off.
Microsoft's 18 guidelines, by moment
The guidelines are grouped by when they apply in the user's relationship with the feature: at first contact, during each interaction, when the system is wrong, and over time. That grouping is the useful part. It reminds you that a feature has a life, not just a screen.
Four moments, eighteen promises. Print this and tape it next to your screen. When you review an AI feature, walk the four boxes in order; most gaps sit in the red-outlined one.
Six guidelines you will use every week, drawn
Eighteen is a lot to hold in your head. These six do most of the work in small products. Here they are as before-and-after mockups.
G1 ignored
"Anything" means nothing. The user has to guess the feature's abilities by trial and error.
G1 applied
Scope, shown by example. Three concrete starters teach what the feature is for in one glance.
G8 ignored
Unwanted help is a tax. Blocking the text and offering no "not now" makes every wrong guess expensive.
G8 applied
Ignorable by default. The suggestion lives in the margin of the work and dies if you keep working.
G11 ignored
Unexplained ranking. The user cannot tell if the system is smart or random, so they cannot calibrate trust.
G11 applied
A reason the user can argue with. One line of "because" makes the behavior predictable and correctable.
The other three you will meet constantly: G9 efficient correction (edit the output in place, do not re-prompt from scratch; Chapter 11), G15 granular feedback (a thumbs-down that asks "what was wrong?" in one tap; Chapter 13) and G17 global controls (one setting to turn the feature off or change how it behaves everywhere; Chapter 14).
Google's People + AI Guidebook
Where Microsoft gives you promises to keep, PAIR gives you questions to work through, in six chapters that follow the product process:
User needs and defining success. Is AI adding unique value here? Should it automate or augment? What does a good outcome look like, and what is the cost of each kind of error?
Data collection and evaluation. What data shapes the behavior, and how will you know if it is good?
Mental models. What will users believe the system can do, and how do you set that belief accurately from the start?
Explainability and trust. How much explanation does a user need to calibrate trust, not maximize it?
Feedback and control. How do users teach and steer the system, and what do they get back for it?
Errors and graceful failure. What kinds of failure exist, and how does the user recover from each?
Two PAIR ideas are worth stealing outright. First, calibrated trust: the goal is not that users trust the AI as much as possible, but that their trust matches its actual reliability, high where it is good and low where it is weak. Second, the cost of false positives versus false negatives: a spam filter that hides a real job offer (false positive) is worse than one that lets a spam mail through (false negative). Decide which error is worse for your feature, then tune and design for that.
Calibration, not maximization. A feature that users trust blindly is as badly designed as one they never use. Every trust affordance in Part 3 moves a user toward the diagonal.
Apple's machine learning guidance
Apple's HIG treats machine learning as a set of decisions about the role of the feature (is it critical or complementary? proactive or reactive? visible or invisible?) and about inputs and outputs. On the input side it distinguishes explicit feedback (the user tells you, like a "Not interested" button) from implicit feedback (you infer from behavior, like skips), and asks you to be careful with implicit signals because people did not knowingly give them. On the output side it covers showing multiple options, confidence, attribution ("Because you read…") and limitations. The tone is typical Apple: quiet, low-drama features that blend into the task. Its newer guidance on generative AI adds expectations about transparency and responsible content. Read the current pages directly; they change between OS releases.
Question you are asking
Best source to open
Does my feature keep its promises across the relationship?
Microsoft's 18 guidelines (and its HAX Toolkit workbook)
Should this even be AI? What counts as success?
PAIR Guidebook, User Needs chapter
How do I show options, confidence or attribution on Apple platforms?
Apple HIG, Machine learning and Generative AI pages
What do current products do for pattern X?
Pattern collections such as Emily Campbell's Shape of AI, plus your own teardowns
Do
Use the 18 guidelines as a review checklist for every AI feature before release.
Decide which error type (false positive or false negative) hurts more and design for it.
Aim for calibrated trust, and say so in your design notes.
Don't
Treat these sources as outdated because they predate chat models.
Check off a guideline because "the user could figure it out".
Treat implicit behavior as consent for the system to learn anything it likes.
In the wild
Spotify recommendationsSpotify, ongoing
Shelves are labeled with reasons such as "Because you listened to…", and many surfaces offer a way to hide or skip suggestions. Attribution (G11) plus dismissal (G8) make recommendations feel steerable rather than imposed.
Apple Photos MemoriesApple, 2016 onward
Automatic memory collections can be trimmed, and you can ask to feature a person or day less. Proactive features need a quiet way to say "less of this" (G13, G17), especially for sensitive content.
GrammarlyGrammarly, 2009 onward
Each suggestion is a small card with the change, a short reason and one-click accept or dismiss, grouped by category. G8, G9 and G11 in one component: dismiss, correct, explain.
Common mistakes
Reading the guidelines once and filing them away
They feel obvious when you read them, so they never become a habit.
Turn the 18 into a review ritual: before shipping any AI change, walk the four boxes and write one line per guideline, even if the line is "not applicable because…".
Explaining to maximize trust
Explanations feel like a trust-building tool, so you add long, reassuring ones.
Explain to calibrate. Short, checkable reasons ("Because you starred 3 posts from this site") beat long, unverifiable ones ("Our advanced AI analyzed your preferences").
Check yourself
Your app auto-tags bookmarks with topics. Users complain the tags are "random". Which guideline would you apply first?
"Random" is a symptom of an unexplained system. A short reason either reveals a sensible pattern (trust goes up) or reveals a bad one (the user can correct it, and you learn). Friendlier names do not touch the problem.
Exercise 2.1 45 minutes · on a product you use daily
Score a real AI feature against the 18
Pick one AI feature you use weekly (mail suggestions, editor autocomplete, a writing assistant).
Copy the four boxes from the diagram into a note.
For each guideline, write pass, partial, fail or not applicable, with one sentence of evidence.
Circle the two failures that would hurt a user most.
Sketch (paper is fine) a fix for one of them.
You're done when: you have an 18-line scorecard and one sketch that fixes a real failure.
Beginner
Competent
Strong
Scored most guidelines with vague notes.
All 18 scored with concrete evidence; one fix sketched.
Also identified which error type the feature should minimize and checked whether the design reflects it.
3
When to use AI, and when not to
Taught by Google PAIR, with Ben Shneiderman and the jobs-to-be-done tradition
Start from the problem, not the model. Use AI where the input is open-ended and an imperfect answer is still useful; use plain code wherever a rule can do the job, because rules are instant, free, private and always right in the same way.
There is pressure in 2026 to add AI to everything. Investors ask about it, competitors announce it, and it is genuinely fun to build. But the best AI features in shipping products are narrow, and most of the best features in any product are not AI at all. iA Writer's focus mode, Things' Quick Entry and Linear's keyboard shortcuts are deterministic, and they are loved for being predictable. Before you reach for a model, run the problem through a short test.
Four questions before any model. Question 4 is the one teams skip. If checking an AI result takes longer than doing the task, the feature adds work while looking like it removes it.
Good fits and poor fits
Models are strong at turning messy, unstructured input into something structured (a pasted receipt into fields), at producing a first draft people will edit (a reply, a summary), at matching meaning rather than exact words (search that finds "invoice" when you typed "bill"), and at transforming text between forms (shorter, friendlier, translated). They are poor at exact arithmetic over many numbers, at facts that must be correct with no checking step, at tasks where a person's own voice is the point, and at anything where the rule is known and simple.
Task
Better with
Why
Sort tasks by due date
Code
A known rule. A model adds latency and can get it wrong.
Turn "lunch w/ Priya thu 1pm" into a calendar event
AI, with a preview
Open-ended phrasing, easy to check, cheap to fix.
Compute monthly spending totals
Code
Exact arithmetic must be exact.
Categorize a merchant you have never seen
AI as suggestion, then remember the user's choice
Ambiguous input, and the user's correction becomes a rule.
Search notes by meaning
AI (embeddings) plus keyword search
Hybrid beats either alone; exact matches should still rank first.
Write the user's journal entry
Neither
The value of the task is doing it. Automating it removes the point.
Automation versus augmentation
PAIR's guidebook asks a sharp question: should this feature automate the task (do it so the user does not have to), or augment it (help the user do it better)? People want automation for tasks that are boring, repetitive or that they cannot do well, such as filing receipts or transcribing audio. They want augmentation for tasks they enjoy, feel responsible for, or that express who they are, such as writing, designing or choosing what to read. Ben Shneiderman's Human-Centered AI (2022) adds that the two are not one slider: the best systems give high automation and high human control at the same time, like a modern camera that auto-focuses and still lets you pick the subject.
Where on the line? Ask the user, not the technology. The same model can power spell check or a full rewrite; the right position comes from how people feel about the task.
Don't
AI for a solved problem. Sorting by date is one line of code. The sparkle makes it slower and less reliable.
Do
AI for the messy part only. Free-form phrasing goes through a parser or model with a visible preview; everything after is deterministic.
Myth
"AI features differentiate my product." A feature that every competitor can add with one API call is not a moat. What differentiates is your understanding of a specific job, and the craft of fitting AI into it so well that nobody notices the AI.
Do
Write the problem statement without the word "AI" first.
Try a rule-based version and measure where it fails; use AI only for those cases.
Ask users how they feel about the task: chore or craft?
Prefer hybrid designs: AI for interpretation, code for everything after.
Don't
Start from "what can we do with this model?"
Automate tasks people enjoy or feel responsible for.
Use a model for arithmetic, sorting, validation or anything with a known rule.
Add a sparkle button to signal modernity.
In the wild
FantasticalFlexibits, 2010s
Became famous for natural-language event entry ("Dinner with Sam Friday 8pm") with a live preview of the parsed event, long before the current AI wave. Natural input with a visible interpretation is the pattern; the engine behind it is a detail.
Arc MaxThe Browser Company, 2023
Included small, ambient features such as renaming pinned tabs to tidy titles and renaming downloaded files. Narrow automation of a chore people do not enjoy, with results that are trivial to check.
Otter, Whisper-based transcribers2016 onward
Transcription is a strong automation case: tedious for humans, open-ended input, and errors are visible when you read the text against the audio. Automate when checking is easy and doing is tedious.
For the solo creator
Every AI feature you ship becomes a dependency on a vendor's pricing, rate limits and model changes. A deterministic feature you write once keeps working for a decade. Spend your AI budget on the one or two places where open-ended input is the core of the job, and keep the rest boring.
Common mistakes
The solution looking for a problem
The model is exciting, so you look for places to put it.
List your users' top five frustrations first. Only then ask whether any of them has open-ended input.
Automating the craft
A task looks slow, so you automate it, not noticing that users value doing it.
Interview or observe three users doing the task. If they talk about it with pride, augment rather than automate.
Skipping the checking-cost question
The output looks impressive, so you assume it saves time.
Time a user checking the AI output versus doing the task. If checking is not at least twice as fast, rethink the feature.
Check yourself
A habit-tracking app wants an AI feature. Which idea best passes the four questions?
Streaks are arithmetic (code). Writing the reflection removes the value of reflecting. Choosing habits for someone is high-stakes and personal. Parsing a casual sentence into checkmarks is open-ended input, easy to verify, and cheap to fix.
Exercise 3.1 30 minutes · on your own product
Run the four questions on your feature list
List every feature in your product or roadmap that uses or could use AI (aim for 5 to 10).
Run each through the four questions in the flowchart. Write the answer and one sentence of reasoning.
Place each surviving feature on the augment–automate line.
Pick one feature to cut or replace with code.
You're done when: you have a table of features with a verdict (code, AI with review, AI suggestion, cut) and you have removed or replaced at least one.
Beginner
Competent
Strong
Verdicts given by gut feel.
Each verdict justified by the four questions.
Also proposed a hybrid design (AI for interpretation, code after) for at least one feature.
4
Levels of autonomy
Taught by Thomas Sheridan and Raja Parasuraman, with Ben Shneiderman
"How much should the AI do on its own?" is a dial, not a switch. Four settings cover most products: suggest, draft, act with approval, act and report. Pick the level from the cost of a mistake and the ease of undoing it, and let it rise only as trust is earned.
Automation researchers have studied this question for decades. Sheridan and Verplank's 1978 scale described ten levels of automation, from "the computer offers no help" to "the computer decides everything and ignores the human". Parasuraman, Sheridan and Wickens (2000) added that automation can sit at different levels for different stages: gathering information, analyzing it, deciding, and acting. For software products you can simplify this to four useful levels.
Four steps up. Each step moves the final action from the human to the system. Notice the familiar example at each level: a spam filter has acted and reported for decades, and nobody calls it an agent.
How to choose the level
Two questions decide it. How bad is a wrong action? And how easy is it to undo? A spam filter can act on its own because a misfiled email is mildly bad and fully reversible (it is in the spam folder). Sending an email on the user's behalf is moderately bad and irreversible: once sent, it is gone. Paying an invoice is severe and irreversible. Map your action on these two axes and the level follows.
Severity times reversibility. The top-right corner is where products get into the news. If you want more autonomy there, first move the action left: add an undo window, a draft state or a "send in 30 seconds" delay.
That last point is the most practical trick in the chapter. You can often raise autonomy safely by making an action more reversible. Gmail's "Undo send" holds a message for a few seconds before it really leaves. A soft delete with a 30-day trash makes deletion reversible. Once an action is reversible, the system can be allowed to do it with less ceremony.
Lab: one feature at four levels of autonomy
An inbox assistant handling the same email from a client asking to move a call. Drag the slider and watch three things change: who presses the final button, what the UI must show for safety, and the meters below the mock. Notice how level 4 needs the most interface, not the least: an activity log and undo.
Let autonomy rise with trust
A good pattern is to start a feature one level lower than you think it can handle and let users raise it. Email clients that learn filing rules often begin by suggesting a folder ("Move to Receipts?") and only offer "Always do this" after the user has accepted the suggestion a few times. That is Microsoft's G13 and G14: learn from behavior, adapt cautiously. The setting should be per action type, not global, because a user may happily let the AI file receipts while never letting it reply to clients.
Watch out
Higher autonomy shifts the user from doer to supervisor, and supervising is hard. Bainbridge's irony applies: if the AI is right 98% of the time, people stop checking, and the 2% slips through. At levels 3 and 4, make the review step fast and specific (show the diff, highlight the unusual bits) instead of asking for general vigilance.
Do
Choose the level per action, from severity and reversibility.
Make actions reversible to unlock higher autonomy safely.
Offer "Always do this" only after repeated accepted suggestions.
At level 4, provide an activity log with undo on every entry.
Don't
Use one global "AI autonomy" setting for unrelated actions.
Let an AI take irreversible actions without explicit approval.
Ask for approval so often that people click "Yes" without reading.
Hide what the system did on its own.
In the wild
Gmail spam and Undo sendGoogle
Spam filtering acts and reports, with the spam folder as the log. Undo send adds a short delay so a permanent action becomes briefly reversible. Two classic, quiet examples of level 4 done well.
Claude Code, Cursor agentsAnthropic, Anysphere, 2024–2026
Coding agents typically ask before running shell commands or editing files, and let users allow specific actions to run without asking. Approval granularity per action type, with trust raised by the user, not assumed by the tool.
Smart ReplyGoogle, 2015 onward
Short reply chips under an email. Tapping one fills the reply; the user still sends. Level 2 at its smallest: the AI drafts three words, the human owns the send.
For the solo creator
Level 4 features generate support load when they go wrong ("your app deleted my stuff"). Ship at level 2 or 3, log what users accept, and only add an "always do this" option once your logs show a high acceptance rate for that specific action.
Common mistakes
Jumping to agentic
Agents are fashionable, so the first version acts on its own.
Ship the draft version first. If users accept 95% of drafts unchanged, you have evidence for more autonomy.
Approval fatigue
You ask for confirmation on everything to be safe.
Ask only for irreversible or unusual actions. Batch the rest into one reviewable summary.
No log at level 4
The point of automation is not having to look, so you show nothing.
Keep a quiet, searchable log of every automatic action with undo. Users rarely open it, but knowing it exists is what lets them relax.
Check yourself
Your invoicing app could let AI send payment reminders to clients automatically. Users like the idea but worry. What is the best first version?
An email to a client is permanent and affects a relationship: top-right quadrant. Drafting removes most of the effort while the human keeps the send. Per-client automation can come later, earned by evidence. A modal at login creates approval fatigue.
Exercise 4.1 35 minutes · on your own product
Map your actions on severity and reversibility
List every action an AI could take in your product (create, edit, delete, send, tag, move).
Place each in the 2×2 grid.
Assign a starting autonomy level to each.
For one action in the top-right quadrant, design a way to make it reversible (delay, draft state, trash).
You're done when: you have a 2×2 with your actions placed, a level for each, and one action redesigned to move left.
Beginner
Competent
Strong
Actions listed with levels, no grid.
Grid complete with justified levels.
Also defined the evidence (acceptance rate, error count) that would let each action move up a level.
Part two
Where AI lives in the interface
Once you know a feature deserves AI and how much it may do, the next question is shape. Is it a box you type into? Grey text that appears as you write? A button on a selection? A plan that an agent works through? Part two is a catalogue of interaction patterns, with the trade-offs of each, and the work of setting expectations so people use them well.
5
The chat box is not the interface
Taught by Amelia Wattenberger, with Maggie Appleton and Jakob Nielsen
A chat box asks the user to describe their work instead of doing it. For most tasks inside a product, AI belongs in the work itself: in the text, on the selection, in the field, where the context already is and the result lands without copying.
Chat became the default AI interface by accident: it was the simplest way to expose a general-purpose model to the public in 2022. It is great for open exploration, for questions you cannot phrase as a button, and for learning what a model can do. But as a feature inside a product, chat has three costs. In her 2023 essay Why Chatbots Are Not the Future, Amelia Wattenberger argued that a text box gives no hint of what the system can do, puts the whole burden of expression on the user, and pulls them out of the work they were doing. Maggie Appleton made a similar case in her language model sketches the same year, sketching interfaces where AI appears as margins, lenses and annotations instead of a conversation.
Jakob Nielsen framed the deeper shift: classic software is command-based (you tell the computer how), while AI is intent-based (you tell it what outcome you want). Intent is powerful, but writing intent in prose is hard. Many people are not good at articulating what they want in words, and they should not have to be in order to use your product.
Count the trips. Every trip out of the document costs attention and loses context the model would have needed anyway. Inline patterns remove the trips.
Chat panel versus inline ghost text
Your email
Hi Meera, thanks for sending the draft. I'll
Assistant
Finish this sentence for an email to my editor: "Hi Meera, thanks for sending the draft. I'll"
Here's a possible completion: "I'll review it tonight and send my comments by Friday." Would you like a more formal version?
Message the assistant…
Your emailsuggestion showing
Hi Meera, thanks for sending the draft. I'll review it tonight and send my comments by Friday.
Tab acceptEsc dismissAlt + ] next suggestionor just type
Chat panel: to get five words you write a request, wait, read a chatty reply, copy, and paste. The model did not even know who Meera is. Try the Copy button and notice that the work still is not in your email.
Inline: click into the email, then press Tab to accept, Esc to dismiss, or type letters that match the grey text to "type through" it. Typing something different makes the suggestion vanish. The cost of a wrong suggestion is zero, which is why this pattern tolerates a high error rate.
When chat is the right answer
Chat is not wrong; it is a specific tool. Use it when the task is genuinely conversational (tutoring, brainstorming, support), when the user's question cannot be predicted (open-ended Q&A over a knowledge base), or as an escape hatch next to more structured features. A good test: if you can list the top five things users will ask, those five deserve buttons, fields or inline actions, and chat can handle the long tail.
Use chat when
Use inline or embedded when
The goal is exploration or learning
The goal is finishing a known task
Requests are unpredictable
The top requests are predictable
Back-and-forth refinement is the point
One action, one result
Output is a standalone artifact
Output belongs inside a document, form or list
Users are comfortable writing prompts
Users want to stay in their flow
Don't
A conversation for a form. The user negotiates with a bot to do what a field and a date picker do in two seconds.
Do
Intent where the work is. The existing input understands loose phrasing; the result is visible as chips before it is saved.
Do
Put AI where the user's attention already is: the cursor, the selection, the field.
Give the model the context it needs automatically (the document, the record), instead of asking the user to paste it.
Keep chat as a fallback for the long tail.
Don't
Make chat the only way to reach AI features.
Make users copy results back into the product.
Use a conversation for something a field, button or menu could do.
In the wild
GitHub CopilotGitHub, 2021 onward
The defining ghost text pattern for code: grey completions inline, Tab to accept, Esc to dismiss, and keyboard shortcuts to cycle alternatives. A chat panel was added later for the long tail. Inline first for the frequent case, chat second for the rare one.
Notion AINotion, 2023
AI is reached from within the page: from the space key on an empty line, or from the menu on a selected block, so the result lands as blocks in the page. The document is the context and the destination.
GranolaGranola, 2024
You type rough notes during a meeting in a plain notepad; afterwards the app enhances them using the transcript, and visually distinguishes your words from the generated additions. AI amplifies something the user already does, in the user's own document.
Common mistakes
The bolted-on sidebar
A chat sidebar is the fastest thing to build with an API, so it ships first and stays.
Log what people ask the sidebar. The top three requests become inline actions in the next release.
Ghost text that steals Tab
You capture Tab to accept suggestions, breaking keyboard navigation and indentation.
Only capture Tab while a suggestion is visible. When nothing is suggested, Tab must behave normally. Announce suggestions to screen readers politely and offer a setting to turn them off.
Check yourself
Logs from your writing app's AI chat show that 70% of requests are "make this shorter", "fix grammar" or "make it more formal", each with a pasted paragraph. What should you do?
Predictable, frequent requests deserve direct manipulation. Example prompts (b) help a little but keep the copy-paste loop. A tutorial (c) asks users to adapt to your interface instead of the reverse.
Exercise 5.1 40 minutes · on your own product
Un-chat one feature
Write down the five most likely things a user would ask an AI in your product.
For each, decide the surface where it should live: cursor, selection, field, list row, command bar or chat.
Sketch the top one as an inline interaction, showing the state before, during and after.
Count the steps compared with doing it through chat.
You're done when: you have a five-row table (request, surface) and a three-frame sketch of one inline interaction with a step count.
Beginner
Competent
Strong
Surfaces chosen, no sketch.
Sketch shows before, during, after with step count.
Sketch also covers dismissal, the wrong-result case and keyboard access.
6
A catalogue of interaction patterns
Taught by shipping products, 2018–2026, with Emily Campbell's Shape of AI collection
Most good AI features are one of about eight patterns. Each has a natural latency budget, a tolerated error rate and a place in the interface. Choose the pattern from the task, then tune the details.
Patterns are useful because users already know them. Once someone has learned that grey text means "press Tab to take this", every product that uses ghost text gets that knowledge for free. Inventing a new AI interaction is expensive for you and for users; reach for a known pattern first.
Ghost text
Fast, tiny, ignorable. Needs under about 300 ms to feel live. Tolerates many misses.
Transform on selection
Verbs on a noun. The selection is the context. Result should return as a diff (Chapter 11).
Command bar
Words in, real commands out. Translate to a visible, deterministic command the user can learn.
Generative fill
Options, not an answer. Several variations on a separate layer keep it non-destructive.
Structured output
Prose in, fields out. The model fills your UI's own components; users edit fields, not paragraphs.
Voice
Show what was heard. Live transcript, then the interpreted result, both editable.
Two more patterns get their own chapters: agents with plans and checkpoints (Chapter 7) and chat (Chapter 5). And one quiet pattern deserves a mention: ambient AI, where a model improves something without any UI at all, such as better search ranking, smarter defaults or auto-cropped thumbnails. It needs no sparkle; it needs a way to override it.
Pattern by pattern: the details that matter
Use for: continuing what the user is already producing: code, email, short form fields. Details: show only when confident; never more than a line or two at a time in prose; accept the whole suggestion with Tab and offer word-by-word acceptance where it helps (some editors use Ctrl or Cmd plus the right arrow); typing matching characters should "type through" the suggestion; typing different characters should kill it instantly. Debounce: wait until the user pauses for a beat (often 150 to 300 ms) so suggestions do not flicker during fast typing. Accessibility: suggestions must be announced to screen readers politely, and there must be a setting to turn them off.
Use for: rewriting, summarizing, translating, changing tone of a selected chunk. Details: keep the verb list short (four to seven) and concrete ("Shorter", not "Improve"); show the result as a diff or side-by-side preview, never a silent replacement; offer "Try again" and "Insert below" as well as "Replace"; keep the original reachable through undo. Apple's Writing Tools in iOS 18 and macOS Sequoia follow this pattern: select text, choose Proofread, Rewrite, a tone, or a summary form, and review before keeping it.
Use for: finding and running features by describing them, filtering and querying data in plain language. Details: deterministic matches always come first and instantly; the AI interpretation appears as one row below, labeled as AI; when the AI maps words to a command, show the command it built ("Filter: Done · older than 7 days") so the user learns the real feature and can edit it. Raycast is a good model: its root search lets you hand a query to AI, while keeping normal commands instant.
Use for: creative generation inside a canvas: images, layouts, slides, illustrations. Details: generate several options (three is a common number) because the user is choosing, not accepting; put results on a separate, non-destructive layer; keep the prompt editable next to the result; mark generated content with provenance metadata where your platform supports it. Adobe's Generative Fill in Photoshop (2023) set the template: select an area, optionally type a prompt, get variations on a new generative layer.
Use for: turning messy input (a pasted email, a receipt photo, a meeting transcript) into your product's own data. Details: ask the model for a fixed schema (JSON with named fields) so the result renders in your normal components; validate it with code before showing it; mark low-confidence fields (Chapter 10); never save without a review step for important records. This is the most underrated AI pattern, because the output looks like the rest of your product and users already know how to edit it.
Use for: hands-busy or eyes-busy contexts (driving, cooking, walking), quick capture, accessibility. Details: show a live transcript so people can see what was heard; show the interpretation separately from the words; make both editable; confirm before acting on anything irreversible; handle accents, code-switching (Hinglish is a real test) and background noise gracefully, and offer to type instead. Never make voice the only way in.
Pattern
Latency budget
Error tolerance
Typical autonomy
Ghost text
Under about 0.3 s
High (ignoring is free)
Suggest
Transform on selection
1 to 5 s, streamed
Medium (reviewed as diff)
Draft
Command bar
Instant for exact; 1 to 2 s for AI row
Medium (command is shown)
Act with approval
Generative fill
5 to 20 s
High (user picks one of several)
Draft
Structured output
1 to 10 s
Low per field (must be reviewed)
Draft
Voice
Transcript live; action under 2 s
Low for actions
Act with approval
Agent
Minutes, in background
Low (checkpoints)
Act with approval, then report
Key idea
The faster and more ignorable the pattern, the more errors it can tolerate. The slower and more consequential, the more review it needs.
Do
Reuse a known pattern before inventing one.
Map structured output to your existing components.
Show the deterministic command behind a natural-language request.
Offer several options when the user is choosing taste, one when they are checking facts.
Don't
Ship ghost text on a slow model; laggy suggestions are worse than none.
Replace selected text silently.
Return free prose when your UI needs fields.
Rely on voice as the only input.
In the wild
Apple Writing ToolsApple, 2024
System-wide transforms on selected text across apps: Proofread, Rewrite, tones such as Friendly or Professional, and Summary, Key Points, List or Table. Proofread lets you step through the changes it made. A short, concrete verb list, available wherever text is selected.
Photoshop Generative FillAdobe, 2023
Selection plus optional prompt produces variations on a new generative layer, leaving the original pixels untouched. Non-destructive by construction: the safest kind of AI edit.
Raycast AIRaycast, 2023 onward
AI sits alongside instant deterministic commands in the same launcher, and users can save their own AI commands that run on selected text. AI as one row in a fast, familiar surface, not a separate destination.
Common mistakes
Vague verbs
"Improve writing" and "Enhance" sound helpful but tell the user nothing about the result.
Name the outcome: "Shorter", "Fix spelling", "Plain English", "Bullets". If you cannot name it, the feature is not focused enough.
Pattern mismatch with latency
You design ghost text but your model takes 2 seconds, so suggestions arrive after the user has moved on.
Match the pattern to the model you can afford: slow models suit transforms and background tasks, not inline completion.
Check yourself
A freelancer tool lets users paste a client's email brief and wants AI to set up a new project (name, deadline, budget, deliverables). Which pattern fits best?
The input is messy prose and the destination is your own form. Structured output turns minutes of copying into seconds of checking. An agent emailing the client is a top-right-quadrant action with no review.
Exercise 6.1 45 minutes · pattern study
Pattern hunt and redesign
Find one real example of four patterns from this chapter in apps you use.
For each, note the latency you observe and how dismissal works.
Pick the AI feature from Exercise 5.1 and sketch it in two different patterns.
Choose one using the table above, and write why in three sentences.
You're done when: you have four annotated examples and two alternative sketches of your feature with a written choice.
Beginner
Competent
Strong
Examples listed without notes.
Examples annotated; two sketches and a reasoned choice.
Choice also accounts for model latency and cost you can actually afford.
7
Agents: plans, checkpoints and permissions
Taught by coding agents and research agents of 2024–2026, with Parasuraman, Sheridan and Wickens
An agent is an AI that takes several steps on its own toward a goal. Design it like delegating to a new assistant: agree on a plan first, set what it may do without asking, check in at risky moments, and leave a clear record of what it did.
Agents are the most autonomous pattern and the hardest to design. They run for minutes, touch real things (files, calendars, inboxes, code), and fail in new ways: they can go confidently in the wrong direction for ten steps before anyone notices. The design job is to keep the human oriented and in control without making them watch every step.
The four surfaces of an agent
The brief. Where the user states the goal. Help them be specific with fields, examples or a short clarifying question from the agent before it starts.
The plan. A visible list of intended steps the user can read, edit, reorder or reject before work begins. A plan is the cheapest place to catch a misunderstanding.
The run. Progress through the plan, with the current step, what has been done, and checkpoints where the agent pauses for approval before risky or irreversible actions.
The report. What was done, what changed (as a diff), what failed, what needs attention, with undo or rollback where possible.
An agent you can supervise at a glance. The goal stays visible, steps have states, the risky step waits for approval while safe ones continue, and Pause and Stop are always present. The footer gives permission to look away.
Permissions: scope, not just yes or no
Before an agent acts, users need to understand what it is allowed to touch. Good permission design borrows from operating systems: name the resource, the action, and the duration. "Allow once", "Allow for this task" and "Always allow for this folder" are different promises, and the user should choose. Destructive or external actions (delete, send, pay, publish) deserve their own prompts even when other actions are pre-approved.
Don't
All or nothing. No resource, no action, no duration. Users either refuse or grant far more than needed.
Do
Specific and scoped. Action, object, count, reversibility and duration are all on screen, with a path to inspect.
Interrupting and steering
Long runs need a way in. Users should be able to pause, stop, and add guidance mid-run ("skip the newsletters") without starting over. Stopping must be safe: the agent finishes or rolls back the current atomic step and reports where it stopped. If the agent hits ambiguity, it should ask a short, specific question with options instead of guessing, and keep working on unrelated steps while it waits.
Watch out
Agents that read untrusted content (web pages, emails, documents from others) can be manipulated by instructions hidden in that content, an attack known as prompt injection. As a designer, your defence is structural: keep high-risk actions behind explicit approval, show the user exactly what will be sent or changed, and never let content the agent read silently widen its permissions.
Do
Show a plan before running, and let users edit it.
Put checkpoints before irreversible or external actions.
Name action, resource and duration in every permission request.
Run long tasks in the background with notifications at checkpoints and at the end.
End with a report: done, changed, failed, needs you.
Don't
Show a spinner for three minutes and then a wall of results.
Ask for broad permissions up front "to be safe".
Let Stop leave things half-changed with no report.
Let content the agent reads change what it is allowed to do.
In the wild
Claude CodeAnthropic, 2025
A terminal coding agent that can show a plan, keeps a visible to-do list as it works, asks before running commands or editing files unless the user has allowed them, and lets the user interrupt to redirect. Plan, progress, permissions and interruption as first-class UI.
Deep research modesOpenAI, Google, Perplexity, 2024–2025
Several assistants added research modes that may ask clarifying questions first, then work for minutes and return a cited report. Clarify the brief before a long run; make the wait worth it with sources.
LinearLinear, 2025
Lets AI agents be assigned issues in the same way as teammates, so their work shows up in the familiar issue, comment and activity views. Agents fit best when their work flows through surfaces people already review.
For the solo creator
You probably do not need a general agent. A "batch job with a preview" covers most cases: the AI proposes all changes at once, you show them as a reviewable list, the user approves some or all, and code applies them. That is an agent's plan-and-report without the open-ended loop, and it is far easier to build and support.
Common mistakes
Invisible progress
The agent works in a loop and the UI shows only "Thinking…".
Render the plan as a checklist with states. Even rough steps ("Reading 214 articles") reduce anxiety and let users catch wrong turns.
Checkpoint everywhere
You add approvals to every step to feel safe.
Checkpoint only irreversible, external or unusual actions. Batch the rest into the final report.
No report
The agent's job is "done", so the UI just closes.
End every run with a summary that lists changes, failures and anything left for the user, with undo.
Check yourself
Your agent cleans up a user's calendar. Halfway through, it finds two events it is unsure whether to delete. What should it do?
Ambiguity on a destructive action calls for a checkpoint, not a guess. Blocking the whole run wastes the user's time, and silent skipping leaves them with an inaccurate picture of what was done.
Exercise 7.1 60 minutes · on your own product
Design a batch-with-preview
Pick a multi-item chore in your product (tagging, cleaning, renaming, categorizing).
Write the brief UI: what does the user specify?
Draw the plan view and the review list (each proposed change with accept or reject).
Mark which changes need a separate checkpoint.
Draw the final report with undo.
You're done when: you have four frames (brief, plan, review, report) for one real chore.
Beginner
Competent
Strong
Frames drawn, review is all-or-nothing.
Per-item review, checkpoints placed, report with undo.
Also designs Stop mid-run and the notification when the user has left.
8
Setting expectations
Taught by Google PAIR (mental models), with Joseph Weizenbaum and Don Norman
People decide how to use an AI feature in their first few tries. Show them what it is for, what it is bad at, and what good input looks like, through examples rather than promises, and keep its personality modest so they judge it as a tool.
Norman's idea of the conceptual model (see The Human Mind) matters more with AI, because the feature's abilities are invisible. A button labeled "Save" explains itself. A text box with a sparkle explains nothing. Users fill the gap with whatever they have heard about AI: either that it is magic (and then they over-trust it) or that it is useless (and then they never try it twice). Your job is to replace both myths with an accurate, specific picture.
Three tools for setting the model
Show, do not tell. One concrete example of input and output teaches more than a paragraph of capability claims. Prompt starters (clickable example requests) do double duty: they teach scope and lower the blank-box anxiety. Make them specific to the user's own data when you can ("Summarize the 3 notes you edited today" beats "Summarize notes").
State the limits plainly. Microsoft's G2 asks you to make clear how well the system does what it does. A short line under an input ("Works best with English meeting notes under 1 hour. May miss names.") is honest and protects trust when the feature fails exactly as warned.
Teach at the moment of need. A tour on first launch is forgotten. A tip that appears the first time a user selects text ("Tip: press ⌘J to rewrite this") arrives when it is useful.
Don't
Promise without scope. "Anything" sets up disappointment and a cute name invites people to treat it as a person.
Do
Scope, examples and limits. The user learns the data source, three real uses and two limits in five seconds.
Personality: less is more
In 1966 Joseph Weizenbaum built ELIZA, a simple program that mirrored users' statements back as questions. He was disturbed by how quickly people attributed understanding and empathy to it; this became known as the ELIZA effect. Modern models are vastly more fluent, so the effect is much stronger. Human names, faces, "I feel", exclamation marks and fake typing pauses all push people to treat a probabilistic tool as a person who understands them. That raises trust beyond what the system has earned and can encourage emotional dependence.
This does not mean AI text must be robotic. It means: write like a good tool (see Words), not like a friend. Plain, polite, brief, first person only where it helps clarity ("I couldn't find a date in this note"), no claims of feelings, no flattery.
Dial it down. The further right, the more users will over-trust and the more a failure feels like betrayal rather than a bug.
Do
Use prompt starters drawn from the user's own content.
Write one honest line about limits near the input.
Teach features at the moment of need.
Keep the voice of AI text consistent with the rest of your product.
Don't
Promise "anything" or "everything".
Give a utility feature a human name and face.
Fake typing delays or feelings to seem friendly.
Rely on a first-run tour to explain scope.
In the wild
ChatGPT, ClaudeOpenAI, Anthropic
Both show a short note near the input that the assistant can make mistakes and that important information should be checked. A permanent, quiet limit statement beats a one-time disclaimer dialog.
PerplexityPerplexity AI
The empty home screen offers example questions and the answer layout itself (sources first) teaches that this is a search tool, not an oracle. Layout sets expectations as strongly as copy.
ClippyMicrosoft Office, 1997
The animated paperclip assistant interrupted with guesses about what users were doing and became a cautionary tale about intrusive, over-personified help. Personality multiplies the annoyance of being wrong.
Common mistakes
Generic starters
"Write a poem about the ocean" is easy to write and demos well.
Write starters that solve real jobs in your product, ideally filled with the user's own data.
Hiding limits for marketing
Limits feel like admitting weakness.
Stated limits turn failures into "as expected" instead of "broken". Users forgive what they were warned about.
Check yourself
Your journaling app's AI reflects back themes from entries. In tests, users start confiding in it and asking it for life advice. What should you change first?
The behavior shows the mental model has drifted from "tool that finds themes" to "confidant". Fix the cues that caused the drift, clarify scope in place, and route sensitive topics responsibly. A one-time dialog does not change ongoing perception.
Exercise 8.1 30 minutes · on your own product
Write the expectation kit
Write three prompt starters for your AI feature using realistic user data.
Write a one-line limits statement (under 15 words).
Write a just-in-time tip for the moment the feature becomes useful.
Rewrite every AI message in your feature to sit in the green zone of the persona scale.
You're done when: you have three starters, one limit line, one tip and a before/after of your AI copy.
Beginner
Competent
Strong
Generic starters, no limits.
Specific starters and an honest limit line.
Starters adapt to the user's data and the limit line is tested on two people for clarity.
Connect the ideas · Part two recap
Thinking back to Structure & Interaction and Chapters 4 to 8: why does an AI command bar show the concrete command it built ("Filter: Done · older than 7 days")?
This connects visibility of system status and recognition over recall from earlier guides with G11 (explain) and G9 (correct). Good AI design often teaches users the non-AI path.
Part three
Trust and control
A user will rely on an AI feature only as far as they can check it, steer it and reverse it. Part three is the toolkit for that: sources, confidence, previews and diffs, undo, latency design, failure design, feedback, and memory the user controls. These are the details that separate a demo from a product.
9
Sources, citations and explanations
Taught by Perplexity and NotebookLM, with Google PAIR (explainability)
When an AI states something, show where it came from. A citation turns a claim into something the user can verify in one click, and grounding answers in the user's own data reduces hallucination at the source.
Language models can produce fluent text that is not supported by anything. The most effective design defence is grounding: give the model specific source material (the user's notes, a document, search results) and ask it to answer from that, then show the link between each claim and its source. This changes the user's task from "do I believe this?" to "does this source say that?", which is a question people can actually answer.
Anatomy of a good citation
Claim-level grounding. The marker sits next to the specific sentence; the card shows the quoted passage, not just a link; the unsupported claim is honestly labeled. Clicking should land on the exact spot in the source.
Explanations: why did it do that?
For recommendations, rankings and classifications, the equivalent of a citation is a reason. Good reasons are short, specific and checkable: "Suggested because you saved 3 articles from this author." Bad reasons are vague and unfalsifiable: "Based on your interests." PAIR's advice is to explain enough for the user to act: to decide whether to trust, correct or ignore. You rarely need to explain how the model works internally; you need to explain which of the user's inputs mattered.
Don't
Decorative sources. Which link supports which claim? The user would need to read all three to check one sentence.
Do
One click to verify one claim. The quoted passage lets most users check without leaving the page.
Watch out
Citations can be wrong too: a model can attach a real source to a claim the source does not make. If your feature cites, test citation accuracy separately in your evals (Chapter 16), and prefer showing quoted passages so mismatches are visible to the user.
Do
Ground answers in the user's own data or specified sources when possible.
Place citation markers at the claim level.
Show the quoted passage on hover or tap, with location and date.
Label claims that have no source.
Write reasons that name the user's inputs.
Don't
Dump a list of links at the end and call it citations.
Mix grounded and ungrounded statements without distinction.
Explain with "based on your preferences".
Assume citations are accurate without testing.
In the wild
PerplexityPerplexity AI, 2022 onward
Numbered inline citations with source cards shown above or beside the answer, making sources part of the layout rather than a footnote. Citations as primary UI, not fine print.
NotebookLMGoogle, 2023 onward
Answers questions only from documents the user uploads, with citations that jump to the passage in the source. Limiting the model to the user's sources is both a trust feature and a scope statement.
Readwise Reader GhostreaderReadwise, 2023
AI actions in a reading app work on the document or passage the user is reading, keeping the source text right beside the output. When the source is on screen, verification costs a glance.
Common mistakes
Source-washing
Adding links makes answers look trustworthy, so you add them even when the model did not use them.
Only cite what the answer was actually generated from, and test that each citation supports its claim.
Citations that open the top of a 40-page PDF
Deep linking is extra work.
Store the passage location when you retrieve it, and open the source scrolled and highlighted at that spot.
Check yourself
A user asks your notes app "When is Rohan's visa interview?" The AI finds two notes with different dates. What is the best answer design?
Conflicting sources are information. Showing both with dates and links lets the user resolve it in seconds. Picking one silently hides the conflict; refusing wastes the work the system already did.
Exercise 9.1 40 minutes · on your own product
Ground one feature
Pick an AI output in your product that makes factual claims.
List the sources it could be grounded in (user data, documents, an API).
Mock up the output with claim-level markers and a source card.
Design how an unsupported claim and a conflicting claim look.
You're done when: you have a mockup showing a cited claim, an unsupported claim and a conflict.
Beginner
Competent
Strong
Links at the end.
Claim-level markers with passage cards.
Also handles unsupported and conflicting claims, and deep-links into sources.
10
Showing confidence and uncertainty
Taught by Apple HIG (confidence), with Microsoft G2 and Edward Tufte
Uncertainty is useful information, but raw percentages rarely help. Show confidence in a form that changes what the user does: highlight the parts that need checking, ask for confirmation below a threshold, or offer alternatives.
Many models and pipelines can give you some signal of how sure they are: probability scores from a classifier, agreement between several samples, whether a retrieved source was found, or whether a parsed field passed validation. The temptation is to print the number ("87% confident"). But most people cannot use "87%": is that good? Should they check? Research on numeric probability displays shows people interpret them inconsistently. The useful question is not "how confident is the model?" but "what should the user do differently because of it?"
Five ways to show it
Nothing. Fine when errors are cheap and obvious (ghost text).
A number. Use for experts who understand calibration (radiologists, analysts), and only if the number is actually calibrated: an "80%" must be right about 80% of the time.
Words or levels. High, medium, low, with a defined behaviour for each. Easier to act on than numbers.
Highlight the uncertain parts. Mark only the fields or phrases below a threshold. Directs attention exactly where checking is needed.
Alternatives. Show the top two or three candidates when the model is torn ("Starbucks or Starbucks Reserve?"). Turns uncertainty into a quick choice.
Lab: one receipt, five confidence displays
An expense app has read a crumpled café receipt. Switch the display style and move the threshold. Notice that "Percent" gives you four numbers and no instruction, while "Highlight" and "Alternatives" tell you exactly where to look. Raise the threshold and more fields ask for a check: that is the dial between speed and safety.
A number is a promise. Language model self-reported confidence is often poorly calibrated. Measure before you display, and prefer showing behaviour (highlight, ask) over showing digits.
Don't
Numbers as noise. Five scores, no guidance. Users learn to ignore all of them.
Do
One highlight, one choice. The single doubtful word is marked and the alternatives make fixing it a tap.
Do
Decide what the user should do at each confidence level, then design that behavior.
Highlight only what is below the threshold.
Offer alternatives when the model is torn between a few options.
Check calibration before showing any number.
Don't
Print raw percentages for general audiences.
Mark everything as uncertain to be safe; it teaches users to ignore the marks.
Show high confidence on outputs you have never measured.
In the wild
Google TranslateGoogle
For some words and phrases it shows alternative translations you can pick, especially where a term is ambiguous or gendered. Alternatives make uncertainty actionable in one tap.
Apple Photos search and Live TextApple
Recognized text and objects are presented as selectable results without scores; when recognition fails, results are simply absent rather than shown as low-confidence guesses. Sometimes the right display of low confidence is not showing the result.
Bank and expense appsvarious
Many apps that read receipts or cheques ask the user to confirm amounts and dates before saving, often focusing on fields that failed validation. Confidence drives the review step, not a badge.
Common mistakes
Asking the model how sure it is
It is the easiest signal to get: just ask for a score in the prompt.
Treat self-reported scores as weak. Prefer signals you can verify: validation (does the date parse?), agreement across two runs, whether a source was found.
Threshold set once and forgotten
You pick 70% by feel during development.
Tune the threshold on your eval set: find the point where flagged fields catch most errors without flagging most correct values.
Check yourself
A meeting transcription app wants to show uncertainty. Its users skim transcripts to find decisions. Which display helps most?
The underline is quiet enough for skimming and tells the user exactly where to look; tap-to-hear gives a way to verify. An overall score does not tell you which part to check.
Exercise 10.1 45 minutes · on your own product
Design a confidence policy
For one AI output, list the signals of confidence you could get (validation, agreement, source found, score).
Define three levels and what the UI does at each (accept silently, highlight, ask).
Mock up the "highlight" and "ask" states.
Write how you would tune the threshold using an eval set.
You're done when: you have a three-row policy table and two mockups.
Beginner
Competent
Strong
Shows a percentage.
Three levels with behaviors, two mockups.
Uses verifiable signals rather than self-reported scores, with a tuning plan.
11
Preview, diffs, editing and undo
Taught by Cursor and GitHub (diffs), with Ben Shneiderman (direct manipulation) and Microsoft G9
Never let AI change the user's work invisibly. Show what will change before it happens, let the user accept or reject each change, make the result editable like anything else, and keep one-step undo for whatever was applied.
Shneiderman's principles of direct manipulation from the 1980s still hold: visible objects, rapid reversible actions, and immediate feedback. AI edits threaten all three. A rewrite can change forty things at once, invisibly, in a way that feels hard to reverse. The diff is the antidote. Programmers have reviewed changes as diffs for decades; the same idea works for prose, data and settings. A diff turns "trust the whole output" into "review a few specific changes", which is a task people are good at.
AI edit: silent replace versus reviewable diff
Landing page copyafter "Make concise"
Our app tracks your reading simply. It's free for the first 14 days, and you can export your highlights anytime.
Text rewritten by AI.
Landing page copy4 changes to review
Our app helps you to keep track of tracks your reading in a very simple way simply. Its It's free for the first 30 14 days, and you can export your highlights anytime.
Silent replace: the copy reads well. Did you notice the trial changed from 30 days to 14? A "concise" rewrite quietly changed a fact. The Undo button is all-or-nothing, so keeping the good edits means losing them all.
Diff: four changes, each reviewable. Keep the three style edits and undo change 4, the invented fact. Reviewing four highlighted spans takes seconds; rereading the whole paragraph against your memory does not.
The review ladder
Match the review tool to the size and risk of the change.
Climb only as far as the risk needs. Making a user review a diff for a one-letter fix is friction; applying a 40-item change with only undo is reckless.
Make output editable, not just acceptable
Microsoft's G9 (efficient correction) means the user can fix the output directly, the same way they edit anything else in your product. If the AI fills a form, the fields are normal fields. If it writes a paragraph, the paragraph is normal text. If it builds a filter, the filter shows up in the filter UI. The worst pattern is output that can only be corrected by re-prompting ("No, make the date Tuesday"), which turns a two-second fix into a negotiation.
Don't
Correct by conversation. Fixing the time needs a new prompt and another wait.
Do
Correct by editing. The AI pre-filled your normal form; fixing the time is one tap in a familiar picker.
Undo and versions
Every applied AI change should be one undo step (not twenty), labeled in the undo history ("Undo AI rewrite"). For generated artifacts, keep versions: when a user regenerates, the previous result should still be reachable, because the first one is often the one they wanted. A simple "1 of 3 ‹ ›" switcher is enough. See Structure & Interaction for undo fundamentals.
Do
Show AI edits as diffs with per-change keep and undo.
Render AI output in your normal, editable components.
Make each applied AI action a single, labeled undo step.
Keep previous generations reachable after regenerate.
Don't
Replace user content silently.
Force correction through re-prompting.
Throw away the previous output on regenerate.
Split one AI change into many undo steps.
In the wild
CursorAnysphere, 2023 onward
AI edits to code appear as inline red and green diffs that can be accepted or rejected, including per change, before they become part of the file. The developer's diff habit, brought to the moment of AI editing.
ChatGPT Canvas, Claude ArtifactsOpenAI 2024, Anthropic 2024
Generated documents and code open in a separate editable surface with version history, so a user can edit directly or ask for targeted changes and step back to earlier versions. Output becomes a document with history, not a message to copy.
Google Docs suggestionsGoogle
Long before AI, suggestion mode let collaborators propose edits others accept or reject one by one. The best AI edit UI may already exist in your product's collaboration model: treat the AI as a collaborator who suggests.
For the solo creator
A word-level diff is a small amount of code: libraries such as jsdiff (for JavaScript) compute it for you, and you style insertions and deletions with two CSS rules. It is one of the highest-trust-per-hour features you can build.
Common mistakes
Diffing the whole document
The model rewrote everything, so every word is "changed".
Ask the model for targeted edits, or diff at the word level and collapse unchanged runs. If most of the text changed, show side-by-side instead.
Regenerate destroys the original
Regenerate is implemented as "replace the output".
Store each generation and show a version switcher.
Check yourself
Your spreadsheet-like app lets AI "clean up" a 200-row contact list (fix capitalization, merge duplicates, fill missing countries). How should you present the result?
Many records, mixed risk. Grouping lets users accept safe categories in bulk, while merges (destructive and error-prone) get individual attention. A text diff of CSV is unreadable, and all-or-nothing undo forces users to lose good changes to reject bad ones.
Exercise 11.1 60 minutes · build it
Build a word diff for one AI edit
Take one AI transform in your product (or a prototype page).
Compute a word-level diff between original and result with a diff library.
Render insertions and deletions with per-change keep and undo, plus keep all and undo all.
Make the applied result a single undo step.
Test with an output where the AI changed a fact.
You're done when: a working prototype shows per-change review, and you caught a changed fact with it.
Beginner
Competent
Strong
Static mockup of a diff.
Working diff with per-change controls.
Also handles large rewrites (side-by-side fallback) and is keyboard accessible.
12
Designing for latency
Taught by Jakob Nielsen (response times), with Chris Harrison (progress perception) and every streaming chat UI
AI is slow, so design the wait. Show something useful fast (stream text, show steps), let people stop or leave, and move long tasks to the background with a notification when they finish.
Three numbers from decades of response-time research still guide the design: around 0.1 seconds feels instant, around 1 second keeps the user's flow of thought, and around 10 seconds is the limit of attention before people switch tasks. Most AI calls land between 1 and 30 seconds, right in the zone where waiting hurts. You usually cannot make the model faster, but you can change what the wait feels like and what the user can do during it. See Motion & Feel for the broader topic of perceived speed.
Time to first useful thing
The single most effective technique is streaming: show output token by token as it is generated. The total time is the same, but the user sees words within a second, starts reading, and judges early whether the answer is going well. The metric to design around is not total time but time to first useful content.
Lab: same answer, two ways to wait
Wait, then show0.0 s
Press Run.
Streaming0.0 s
Press Run.
Both sides take the same total time (simulated, about 5 seconds). Watch where your eyes go. On the right you are reading within half a second and could press Stop the moment you see it is off track. On the left you stare at a spinner and judge everything at once. Try pressing Stop at 2 seconds: the streaming side keeps what it produced.
Four ways to spend the same seconds. Under 10 seconds, stream. For multi-step work, name the steps. Beyond about a minute, let the user leave and notify them.
Progress for multi-step work
When a task has phases (search, read, analyze, write), name them as they happen. Real steps are better than a fake progress bar: they are honest, they show the work is happening, and they let the user notice a wrong turn ("Searching for 'Apple fruit'… no, I meant the company"). Keep step labels short and concrete, and avoid theatrical "thinking" text that does not reflect real work.
Cancel, leave, come back
Every AI wait longer than a second or two needs a Stop. Stopping should keep partial output where it is useful, and should not charge the user's quota for work they rejected if you can avoid it. For tasks longer than about a minute, let the user navigate away: show the task in a small tray, send a notification on completion, and badge the place where the result lives. If the work fails in the background, the notification must say so, too.
Don't
Held hostage. A blocking modal with no estimate, no steps and no cancel for a task that may take a minute.
Do
Work continues. A small tray shows the real step and a Stop; a notification arrives when the report is ready.
Do
Stream text output.
Name real steps for multi-step tasks.
Provide Stop for any wait over a couple of seconds, keeping partial output.
Move long tasks to the background with a notification.
Prefetch or precompute cheaply when you can predict the request.
Don't
Block the whole interface with a spinner.
Fake progress with a bar that is not tied to real work.
Use slow models for patterns that need instant feedback.
Lose the work if the user navigates away.
In the wild
ChatGPT, Claude, Gemini2022 onward
Streaming responses with a stop button became the standard for chat interfaces, and many show a short status line for tool use or search steps. Streaming plus stop is now the baseline users expect.
Research modesseveral assistants, 2025
Long research tasks run for several minutes while showing the sources being read, and users can leave and return. Long work is acceptable when it is visible and does not hold the user hostage.
Granola2024
Enhancement of notes happens after the meeting ends, a natural pause where the user expects to wait a moment. Place slow AI at moments when the user is already pausing.
Common mistakes
Streaming structured output
You stream everything, including JSON that fills a form, so fields flicker and jump.
Stream prose. For structured output, show a skeleton of the form and fill fields as each completes, or wait and reveal together.
Layout jumping while streaming
Text grows and pushes buttons and content down as the user tries to click.
Reserve space, pin controls in a fixed position, and do not auto-scroll if the user has scrolled up to read.
Check yourself
Your app generates a 2-page weekly summary from a user's notes. It takes about 45 seconds. What is the best wait design?
45 seconds is beyond attention. Background plus notification respects the user's time. Precomputing on a schedule (d) can be a great addition if users want it, but it removes choice and costs money for summaries nobody reads unless you check usage.
Exercise 12.1 30 minutes · on your own product
Draw the wait
Time your AI feature five times; note first-token and total times.
Pick the right row from the timeline diagram.
Sketch the waiting state, the stop state and (if over a minute) the background and notification states.
Write the step labels you would show.
You're done when: you have measured times and three sketches of waiting, stopped and finished.
Beginner
Competent
Strong
A spinner with a label.
Streaming or steps, with Stop that keeps partial output.
Also handles navigation away, failure in the background, and layout stability.
13
Errors, failure and feedback
Taught by Google PAIR (errors and graceful failure), with Microsoft G9, G10 and G15
AI fails in more ways than ordinary software, and some failures look like success. Name the failure types, design a recovery path for each, and make feedback specific enough that you can actually learn from it.
A taxonomy of AI failure
The dangerous column is on the right. System failures announce themselves. Hallucinations and omissions look like success, so the design must create the chance to notice them.
Graceful degradation
When the AI part fails, the product should still work. If smart search times out, fall back to keyword search and say so in a small note. If the model provider is down, the editor still edits; only the AI actions grey out with a short reason. Never lose user input because a model call failed: keep the prompt, the selection and any partial output so retry is one click. This is Microsoft's G10 (scope services when in doubt) in practice: do less, honestly, rather than fail completely.
Refusals that respect the user
Models sometimes decline requests, occasionally for good reasons and sometimes by mistake. A bare "I can't help with that" is a dead end and feels like an accusation. A good refusal says briefly what it cannot do, why if it can, and what it can do instead. If your product's own policy limits a feature (for example, no generating images of real people), state the policy in plain words and link to it.
Don't
Blame and loss. No cause, no next step, and the user's carefully written request is gone.
Do
Cause, options, nothing lost. The likely reason, a retry, a smaller alternative, and the prompt kept intact.
Feedback that teaches you something
The thumbs up and down under AI answers is everywhere, and on its own it is nearly useless to a small team: you learn that something was bad, not what or why. Microsoft's G15 asks for granular feedback. Follow a thumbs-down with one tap of structured reasons (wrong facts, too long, wrong tone, did not follow instructions, unsafe), an optional text box, and a clear note about what happens to the feedback. Make giving feedback also fix the user's problem: "Too long" should offer a shorter version right away. Feedback that helps the user now gets given far more often than feedback that only helps you later.
Feedback after a bad answer
AI summary
The team agreed to launch in March and hire two designers. Budget remains unchanged at last quarter's level, and marketing will start in April after the launch window closes.
AI summary
The team agreed to launch in March and hire two designers. Budget remains unchanged at last quarter's level, and marketing will start in April after the launch window closes.
What was wrong? (optional)
Your rating and this summary are saved to improve the feature. Your note's text is not shared. What we keep
Bare thumbs: press the down arrow. You get a "Thanks!" and nothing else. The maker learns a summary was bad, not why; you are left with the bad summary.
Useful feedback: press the down arrow, then pick a reason. Each reason offers an immediate fix (shorter version, show sources, regenerate) and the note says what is stored. Feedback becomes a tool for the user, so they give it.
Regenerate and report
Regenerate is the universal "try again" for probabilistic output. Make it obvious, keep earlier versions (Chapter 11), and consider "regenerate with…" options (shorter, more formal, with sources) so the second try is directed rather than random. Separately, offer a way to report harmful or offensive output that is clearly distinct from quality feedback, and actually read those reports.
Do
Design a recovery path for each failure type.
Fall back to non-AI behavior when the model fails.
Keep the user's input on every error.
Follow thumbs-down with one tap of reasons that also offer a fix.
Say what feedback is stored and how it is used.
Don't
Show "Something went wrong" for AI failures.
Refuse without saying what is possible instead.
Collect feedback you never read.
Silently use feedback text containing user content for training without consent.
In the wild
ChatGPT, ClaudeOpenAI, Anthropic
Thumbs feedback on answers can open a short form for details; regenerate keeps previous responses reachable with a version switcher. Feedback with detail, and versions instead of replacement.
GrammarlyGrammarly
Dismissing a suggestion is itself a feedback signal, and the product can learn from repeated dismissals of a type of suggestion. The cheapest feedback is the action the user takes anyway; design it to be captured honestly.
Search with AI overviewsvarious, 2024–2025
Public examples of confidently wrong AI-generated answers in search results showed how a fluent summary at the top of a trusted page magnifies hallucinations. The more authoritative the placement, the more grounding and humility the output needs.
Common mistakes
Feedback as a black hole
Collecting thumbs feels responsible, so you add them and never look.
Review every thumbs-down weekly for the first months. As a solo creator, this is your best quality signal.
Error copy that blames the model or the user
"The AI got confused" or "Invalid prompt" are easy to write.
Describe what happened and what to do next, in plain words (see Words).
No fallback
The happy path always worked in development.
Simulate a provider outage and a timeout in your staging build, and check every AI surface degrades to something useful.
Check yourself
Which failure most needs design work in a "summarize this contract" feature?
Invisible, high-cost failures need the most design. Link each summary point to the clause, flag sections the summary did not cover, and frame the summary as a reading aid, not a replacement for reading.
Exercise 13.1 45 minutes · on your own product
Failure walk
For your AI feature, write one realistic example of each of the six failure types.
For each, write the recovery path (what the user sees, what they can do).
Design the thumbs-down flow with three to five reasons, each with an immediate fix.
Write the fallback when the model is unavailable.
You're done when: you have a six-row failure table with recovery paths, a feedback flow and a fallback.
Beginner
Competent
Strong
Covers system errors only.
All six types with recovery paths and a feedback flow.
Also plans how you will review feedback weekly and turn it into eval cases.
14
Personalization, memory and privacy
Taught by Microsoft G12, G13, G17, with Apple HIG (implicit feedback) and Helen Nissenbaum (contextual integrity)
An AI that remembers can be far more useful and far more unsettling. Make memory visible, editable and optional; tell people what data goes where in plain words; and never surprise them with what the system knows.
Personalization ranges from small (remembering your preferred summary length) to deep (a long-term memory of facts about your life used across conversations). The usefulness grows with depth, and so does the risk of feeling watched. The philosopher Helen Nissenbaum's idea of contextual integrity is a good test: information flows feel acceptable when they match the norms of the context where the information was shared. A user telling your notes app about a medical appointment expects it to help schedule the appointment, not to tailor ads or bring it up in an unrelated chat with a work colleague's document open.
Four principles for memory
Visible. When the system uses something it remembered, it says so ("Using your preference: short summaries"). There is a page listing what it remembers.
Editable. Users can correct, delete or add memories individually, not only "clear all".
Optional. Memory can be turned off globally (G17) and paused for a session (an incognito-style mode).
Scoped. Memories stay in the context they came from unless the user says otherwise. Work stays in work, personal stays personal.
Memory as a list, not a mystery. Each item shows where it came from and how often it was used; inferred items wait for confirmation; there is a pause and a plain data-use line.
Data use disclosure
Users increasingly ask three questions about any AI feature: Where does my data go? Is it used to train models? How long is it kept? Answer all three in plain words near the feature, not only in a privacy policy. If you use a third-party model provider, say so, and say what their terms are for your API usage. If content is sent off-device, consider a quiet indicator. Where possible, process sensitive data on device or offer a mode that does. See Honest & Calm for privacy as a design value.
Don't
Context collapse. A personal memory leaks into a work document, with no indicator of where it came from.
Do
Scoped and labeled. It uses only what is needed, reveals no private detail, and shows the source.
Do
Show when memory or personal data was used.
Provide a list of memories with edit, delete and add.
Ask before saving inferred facts that are sensitive.
Answer "where, training, how long" next to the feature.
Use user content to train models without clear, opt-in consent.
In the wild
ChatGPT memoryOpenAI, 2024 onward
Memory can be viewed and individual items deleted in settings, turned off, and avoided with a temporary chat mode; the interface notes when a memory is updated. Visible, editable, optional, with a pause mode.
Apple IntelligenceApple, 2024
Apple emphasizes on-device processing and describes a Private Cloud Compute system for larger requests, and asks before sending a request to an external model. Where data goes is part of the product design and the product story.
Netflix and Spotify profileslong-running
Separate profiles and ways to remove items from viewing or listening history let people keep one person's or one mood's behavior from shaping another's recommendations. Scoping personalization is an old problem with known solutions.
Common mistakes
Creepy accuracy
The system infers something true that the user never said, and shows off.
Use inferences quietly for ranking if at all, and ask before turning them into stated memories.
Memory that cannot be found
Memory is built as a backend feature without UI.
Ship the memory list on the same day as memory. If you cannot show it, you are not ready to store it.
Check yourself
Your writing app could remember each user's style from their past documents. What is the best first version?
A visible, editable profile from chosen documents makes personalization a feature the user controls. Silent learning risks surprises; a shared model uses other people's writing without consent.
Exercise 14.1 40 minutes · on your own product
Write your data-use card
List every piece of user data your AI feature sends or stores.
Answer for each: where it goes, whether it is used for training, how long it is kept.
Write a three-line plain-language disclosure for the feature.
If you have any memory or personalization, sketch the memory list.
You're done when: you have a data table, a three-line disclosure placed in a mockup, and a memory list sketch if relevant.
Beginner
Competent
Strong
Links to the privacy policy.
Plain disclosure near the feature, covering where, training, retention.
Also scoped memory by context and checked your model provider's actual terms.
Checklist: trust and control review for one AI feature
Before use
During use
After use
Connect the ideas · Part three recap
Chapters 9 to 14 each add an affordance: sources, confidence, diffs, streaming, feedback, memory controls. What do they have in common, in terms of the calibrated-trust chart from Chapter 2?
None of them changes the model. They change what the user can see and do, so trust tracks reality. That is the core of AI interaction design, and it links back to Norman's gulfs of execution and evaluation from The Human Mind.
Part four
Behind the screen, and beyond it
Some of the most important AI design decisions are invisible: the instructions sent to the model, the examples you test against, the budget each feature can spend, the values the system is quietly shaped by. Part four covers these, then turns around to look at you: how a solo designer can use AI as a collaborator without handing over the judgment that makes the work good.
15
Prompting as interface design
Taught by ChatGPT Canvas and Raycast, with Jakob Nielsen (the articulation barrier)
The prompt is part of your interface, whether you show it or not. Write the hidden instructions as carefully as UI copy, and give users controls (buttons, sliders, presets) for the things they would otherwise have to write prompts to ask for.
Every AI feature has two prompts: the one the user writes (if any) and the one you write, usually called the system prompt or instructions, which sets role, tone, format and rules. Jakob Nielsen has called the difficulty of writing good prompts an "articulation barrier": many people struggle to express what they want precisely in prose. Your design job is to lower that barrier by moving as much of the prompt as possible into your instructions and into controls.
Hidden versus exposed prompts
Hidden prompts keep the interface clean and let you encode expertise ("write at a grade 8 reading level, keep the user's terminology, never invent numbers"). Exposed prompts let power users customize and learn. A good middle path: hide the prompt by default, offer presets as buttons, and let advanced users view or edit the instruction behind a preset, as Raycast does with its editable AI commands.
Lab: controls instead of prompt-writing
Draft reply to a refund request
Hidden prompt your app sends
A customer asks for a refund after the 14-day window. Move the sliders: the user never writes a prompt, yet each position changes a precise, tested instruction on the right. Outputs here are pre-written to simulate a model. This is the Canvas-style idea: sliders for length and tone, with expertise baked into the instructions.
Writing the hidden prompt like UI copy
Treat your instructions as a design artifact under version control. Good instructions are specific (format, length, what to do when information is missing), include one or two examples of ideal output, state what the model must never do in your product (invent prices, give medical advice), and specify how to handle uncertainty ("if the date is unclear, leave the field empty and set needs_review to true"). Each change to the instructions is a design change: test it against your eval set (Chapter 16) before shipping.
Most of the prompt is yours. The more of the request you assemble from product knowledge and controls, the less the user has to articulate, and the more consistent the output.
Do
Turn frequent prompt phrases into buttons, presets and sliders.
Version your instructions and test every change.
Fetch context automatically instead of asking users to paste it.
Let power users see and edit the instruction behind a preset.
Don't
Make users learn prompt tricks to get good results.
Ship instruction changes without running your eval set.
Assume hidden instructions stay secret; never put credentials or private data in them.
Present a blank box when three presets would do.
In the wild
ChatGPT CanvasOpenAI, 2024
Shipped with shortcuts such as adjusting length and reading level using a slider, alongside free-form requests. The slider is a prompt the user never has to write.
Raycast AI CommandsRaycast
Preset AI commands (fix spelling, change tone and so on) are visible, editable prompts that users can duplicate and customize, then run on selected text. Hidden by default, open on demand.
Midjourney and image tools2022 onward
Image generators grew from prompt-only to include style references, aspect-ratio and variation controls, reducing the need for long, technical prompts. Mature AI tools move expressiveness from words to controls.
Common mistakes
Prompt as afterthought
A developer writes a quick instruction while wiring the API, and nobody revisits it.
Own the instructions as design. Review them like copy, with examples of ideal output, and keep them in your repo.
Control without effect
A "tone" slider changes a word in the prompt that the model barely responds to.
Test each control position on your eval set. If outputs do not clearly differ, remove the position or rewrite the instruction.
Check yourself
Users of your translation feature keep typing "translate but keep it casual and don't translate brand names". What is the best response?
Repeated phrases in user prompts are feature requests in disguise. Controls make the option discoverable and consistent; the instructions encode the default everyone wants.
Exercise 15.1 45 minutes · on your own product
Mine prompts for controls
Collect 20 real or imagined user requests for your AI feature.
Highlight phrases that repeat (tone, length, format, audience).
Design one control per repeated phrase and write the instruction each position sends.
Rewrite your product instructions with format, missing-information handling, and one example.
You're done when: you have a control panel mockup and a versioned instruction file with one example.
Beginner
Competent
Strong
Controls proposed without instructions.
Controls mapped to tested instruction text.
Also verified each control position produces visibly different output on 5 inputs.
16
Evaluation and cost, for designers
Taught by Hamel Husain (evals), with Google PAIR (defining success)
You cannot design an AI feature you have not seen fail. Build a small set of real test inputs, judge the outputs against criteria you write down, look at them with your own eyes regularly, and price every feature before you ship it.
In ordinary software, a test either passes or fails. AI output is graded, varied and context-dependent, so you need a different habit: evaluation, or "evals". Big teams build elaborate pipelines; as a designer you need only the core. Hamel Husain's widely shared 2024 essay Your AI Product Needs Evals argues that the most valuable step is simply looking at lots of real outputs and writing down what good means. That is design work, and you are well placed to do it.
A 30-example eval set in one afternoon
Collect 30 inputs. Real ones if you have users, realistic ones if you do not. Include 20 typical, 5 hard (long, messy, ambiguous, other languages, Hinglish), and 5 adversarial (empty, off-topic, attempts to make the feature misbehave).
Write 3 to 5 criteria. Specific and binary where possible: "No facts absent from the source", "Under 80 words", "Keeps the user's names and numbers", "Asks for review when the date is unclear".
Run and grade. Put inputs, outputs and a pass/fail per criterion in a spreadsheet. Grade them yourself; do not outsource your taste.
Read the failures. Group them by cause. Each group is a design or instruction change.
Re-run on every change. Model upgrade, prompt tweak, new control: run the 30 again and compare. This catches regressions you would otherwise ship.
A spreadsheet is enough. Thirty rows, three to five criteria, graded by you. The point is not the score; it is reading every failure and knowing which criterion is weakest.
You can later add automated checks (code that tests length, format, required fields) and use a model to grade fuzzier criteria, but calibrate any model-as-judge against your own grades on a sample first. Never stop reading outputs yourself; it is where design insight comes from.
Cost-aware design
Model pricing is usually per token (roughly, pieces of words), with separate prices for input and output tokens, and prices vary widely between large and small models. Prices change often, so the numbers in the lab below are illustrative only; use your provider's current price sheet. The design levers are the same regardless: how often a feature runs (on request versus automatically), how much context you send, how long outputs are, which model size each feature needs, and whether you can cache repeated work.
Lab: what does this feature cost per month?
Calls per month0
Cost per month$0
Per user per month$0
Prices are made-up round numbers in the range of real 2024–2026 tiers; check your provider before relying on them. Try this: set calls per user per day to 200 (as if the feature ran on every keystroke pause) and see what happens to margin. Then drop to the small model. That is why ghost text runs on small, fast models and big reports run on request.
Cost lever
Design decision
Typical effect
Trigger
Run on request, not on every view or keystroke
Often the biggest saving of all
Context size
Send the relevant section, not the whole library
Lower cost and often better answers
Output length
Default to short; offer "expand"
Output tokens usually cost several times input tokens
Model size
Small model for classify, tag, autocomplete; large for reasoning and writing
Large differences in price per call
Caching
Store results for repeated inputs; reuse summaries until content changes
Zero cost on repeats
Quota UI
Show remaining usage honestly before the user hits a wall
Fewer angry surprises, clearer upgrade path
Do
Build a 30-example eval set before launch and re-run it on every change.
Grade outputs yourself against written criteria.
Estimate monthly cost per user before designing triggers.
Use the smallest model that passes your evals for each feature.
Don't
Judge a feature from a handful of demo prompts.
Trust an automated grader you have not checked against your own judgment.
Run expensive calls automatically without measuring use.
Hide usage limits until the user hits them.
In the wild
Cursor, GitHub Copilot plans2024–2026
Coding tools have repeatedly adjusted plans, request allowances and model choices as the cost of heavier models became clear, and users notice and react strongly to such changes. Cost shapes pricing, and pricing changes are product changes users feel.
Notion AINotion
Began as a paid add-on and later became part of higher plans, a common path as AI costs and positioning change. Decide early whether AI is a feature of the product or a separately priced service.
Model routingcommon practice
Many products send simple requests to small, cheap models and hard ones to large models, sometimes letting users choose. Model choice per task is a design and cost decision, not only an engineering one.
For the solo creator
Your eval set is your QA team, and the cost lab is your CFO. Keep the eval spreadsheet in the repo next to the prompt file. Before any model or prompt change, run it, skim the diffs, and only then ship. Thirty minutes per change is cheap insurance.
Common mistakes
Vibe-checking
You try a few prompts after each change and it "feels better".
Run the same 30 inputs every time and compare pass rates per criterion. Feelings drift; spreadsheets do not.
Evals with only easy inputs
You pick inputs you think of first, which are the clean ones.
Deliberately include long, messy, multilingual, empty and adversarial inputs: at least a third of the set.
Designing the trigger before the budget
Auto-run feels magical in a demo.
Do the cost lab with realistic numbers first; let the result decide whether the feature can run automatically.
Check yourself
A new, cheaper model is released. Your summaries currently pass 92% of your eval criteria. What do you do?
Model swaps change behavior in ways that averages hide. Per-criterion comparison and reading the new failures tell you whether the savings are worth it, and what instruction changes might close the gap.
Group failures by cause and write one fix for the largest group.
Fill the cost lab with your real numbers and your provider's real prices.
You're done when: you have a graded 30-row spreadsheet, one fix, and a monthly cost per user you could defend.
Beginner
Competent
Strong
10 easy examples, impressions.
30 mixed examples, graded, one fix, cost estimate.
Re-ran after the fix, showed improvement without regressions, and chose a model tier per feature.
17
Ethics: bias, disclosure, dependence and consent
Taught by Kathy Sierra, with Joseph Weizenbaum, Lisanne Bainbridge and Microsoft G6
An AI feature is a set of choices about what the system says, to whom, and in whose name. Design so people know when they are dealing with AI, are treated fairly by it, keep control of their own data and voice, and come away more capable rather than more dependent.
Bias
Models learn from human text and images, so they carry human patterns, including unfair ones: defaulting to one gender for "doctor", rating some names or dialects as less professional, generating images that reflect narrow beauty or cultural norms. Microsoft's G6 asks you to mitigate social biases. You cannot fix the model, but you can test for bias in your own feature: add eval cases that vary names, genders, dialects (including Indian English and Hinglish), and regions, and check that outputs do not change in ways they should not. Avoid features that judge people (hiring screens, "professionalism" scores) unless you can measure fairness seriously.
Disclosure
People have a right to know when content was generated and when they are talking to a machine. Label AI-generated text, images and voices where they appear, especially when they might be shared beyond your product. For images, support provenance standards such as C2PA Content Credentials where your tools allow. Never let an AI pose as a human in support, sales or social contexts. Regulation is moving in this direction too; the EU AI Act, for example, includes transparency obligations for AI systems that interact with people and for some generated content. Treat disclosure as a design default rather than a legal checkbox.
Don't
Deception by design. A human name, a face and claimed feelings for a bot. Discovering it destroys trust in everything else.
Do
Honest and with an exit. Labeled as AI, scoped to help docs, and a visible path to a real person.
Dependence and deskilling
Bainbridge's ironies apply to everyday software: when a tool does a task for you, your own skill at it can fade, and you become worse at catching the tool's mistakes. For some tasks that is fine (few people miss doing long division). For others, such as writing, reasoning, learning a language or coding while you are still learning, the skill is the point. Kathy Sierra's Badass: Making Users Awesome (2015) argues that great products are judged by what users become able to do, not by how much users like the product itself. Applied to AI: design features that coach as well as do.
Same model, two trajectories. A grammar feature that says why ("comma splice: two full sentences joined by a comma") teaches; one that silently fixes does not. Choose deliberately for tasks where the user's skill matters.
Consent
Ask before using someone's content to train or improve models, and make "no" easy and free of penalty. Ask before cloning a voice, using a person's likeness, or processing someone else's data that the user uploads (a colleague's messages, a client's documents). Do not use AI to manufacture urgency, fake reviews, or personalized manipulation; those are dark patterns with a model behind them (see Honest & Calm).
Do
Add bias checks (varied names, dialects, regions) to your eval set.
Label AI-generated content and AI agents clearly.
Offer a human path where stakes are high.
Design learning-oriented features to explain, not only to do.
Ask clear, opt-in consent for training on user data.
Don't
Give bots human names, photos or claimed feelings.
Generate content meant to pass as human-written in public contexts.
Score or rank people with a model you cannot audit.
Make opting out of training cost features.
In the wild
Content CredentialsC2PA, Adobe and others, 2021 onward
An open standard for attaching provenance information to media, including whether AI tools were used; Adobe attaches it to Firefly-generated images. Disclosure can travel with the file, not just sit in your UI.
DuolingoDuolingo
Added AI features such as explanations of why an answer was wrong, in a product whose whole purpose is building the user's own skill. In learning products, AI should explain, not answer for you.
Air Canada chatbot case2024
A Canadian tribunal held the airline responsible for incorrect refund information its website chatbot gave a customer. What your AI says, you say. Ground it and scope it accordingly.
Common mistakes
"The model did it"
It feels like the AI's output is not your speech.
Treat every AI output as words your product says. If you would not write it in your UI, constrain the AI from saying it.
Bias testing only in English
Your test inputs reflect your own language habits.
Include the languages, dialects and names your real users have, and check for differences in quality and tone.
Check yourself
You are adding AI to a writing app for students. Which design best follows the "make users more capable" principle?
For students, the skill is the goal. Explaining and prompting an attempt builds capability; generating or silently fixing replaces it. Removing AI entirely gives up a real chance to coach.
Exercise 17.1 40 minutes · on your own product
Ethics pass
Add 6 bias cases to your eval set (vary names, gender, dialect, region) and run them.
Audit every place AI content appears: is it labeled?
Decide, for your main AI feature, whether it should coach or do, and write why.
Write your consent copy for data use in two sentences.
You're done when: you have bias results, a labeling audit, a coach-or-do decision and consent copy.
Beginner
Competent
Strong
Thought about the issues.
Ran bias cases and fixed labeling gaps.
Also redesigned one feature to coach, with an explanation pattern.
18
Designing with AI as a solo creator
Taught by your own practice, with Ethan Mollick and the double diamond
AI is a superb assistant for the wide parts of design work: gathering, drafting, prototyping, generating options, critiquing. Keep the narrow parts human: choosing, judging, verifying, and deciding what the product stands for. AI widens; you narrow.
For a solo creator, AI is like hiring a fast, tireless junior who has read everything and experienced nothing. It can draft forty headlines, sketch three prototypes in an afternoon, summarize twenty interview transcripts, and critique your layout against heuristics. It cannot know what your users felt, which of the forty headlines is true to your product, or when something is technically fine but soulless. Ethan Mollick's Co-Intelligence (2024) suggests treating it as a collaborator you always check, which is the same calibrated trust you design for your users.
Divergence is cheap now; convergence is the job. When options are free, taste and judgment are what separate your product from the next one built with the same tools.
Where AI helps, and the trap in each
Task
Good use
Trap
Guard
Research synthesis
Cluster interview notes, pull quotes by theme, find contradictions
Invented quotes; themes the data does not support
Require exact quotes with source; spot-check against transcripts
"Synthetic users"
Brainstorm questions and edge cases before real interviews
Give your voice guide and examples; edit hard; read aloud
Code prototypes
Working interactive prototypes in hours
Prototype quality mistaken for product quality; accessibility skipped
Review states, focus and semantics; rewrite what ships
Visual variations
Explore layouts, palettes, icon directions fast
Regression to the average look of the internet
Start from your references and constraints; reject the first ideas
Critique
Heuristic review, accessibility checks, "what would confuse a new user?"
Agreeable feedback; confident wrong claims about guidelines
Ask for the strongest objections; verify claims in the source
Facts and specs
Draft explanations and summaries of standards
Plausible but wrong numbers, dates, API details
Check every fact you publish against a primary source
The sameness problem
Generative tools produce the most likely output given their training. Ask for "a modern SaaS landing page" and you get the average of every modern SaaS landing page: a gradient hero, three feature cards, a pricing table and testimonials. The products Rohit admires (iA Writer, Things, Kindle) are memorable because they made unlikely choices with conviction. Use AI to get past the obvious quickly, then push away from it: give it your constraints and references, ask for options that break a convention, and treat the first output as the thing to avoid.
Don't
The average of the internet. Accepted first output: vague claim, interchangeable cards. It could be any product.
Do
Specific and owned. Plain words about one job, the real product shown, a concrete price. AI may have drafted options; a person chose with conviction.
For the solo creator
A weekly rhythm that works: Monday, use AI to synthesize last week's feedback and support emails (verify quotes). Tuesday to Thursday, prototype in code with AI help, but design states and copy yourself. Friday, ask an AI for the harshest critique of what you built, then decide, alone, which criticisms matter. Keep a "taste log" of choices you made against the AI's suggestion and why; over months it becomes your design voice written down.
Do
Use AI to generate breadth: options, drafts, prototypes.
Give it your constraints, references and voice guide.
Verify every fact, quote and spec you publish.
Ask for objections and the strongest critique, not reassurance.
Keep final choices, and the reasons, yours.
Don't
Ship the first output.
Treat simulated users as research.
Let AI pick your aesthetic.
Publish AI-written claims you have not checked.
In the wild
Prototyping toolsv0, Claude Artifacts, Lovable, Bolt, 2024–2026
Tools that turn descriptions into working interface code made interactive prototypes fast enough to test ideas the same day. Prototype speed is no longer the bottleneck; deciding what is worth prototyping is.
Figma AI featuresFigma, 2024 onward
Figma added AI features for tasks such as renaming layers, generating placeholder content and drafting designs, and adjusted its first-draft feature after users noticed outputs closely resembling an existing app. Generated designs drift toward what already exists; originality is your job.
Your own support inboxevery solo product
Summarizing a month of support emails into themes is one of the highest-value uses of AI for a one-person company, as long as you read the original emails behind each theme. Synthesis speeds you to the right emails; it does not replace reading them.
Common mistakes
Outsourcing taste
Asking "which design is better?" is easy and the answer sounds confident.
Ask for the trade-offs of each option, then decide yourself against your principles. Write the decision down.
Fluency mistaken for truth
Well-written text feels authoritative, especially about guidelines and specs.
For any fact you will rely on (a WCAG criterion, a platform size, an API limit), open the primary source.
Polished prototypes, unexamined problems
AI makes prototypes so quickly you skip the problem definition.
Write the problem and success criteria first (see Problems Worth Solving); then prototype.
Check yourself
You used AI to cluster 15 user interviews into themes. One theme, "users want dark mode", has 4 supporting quotes. What do you do before acting on it?
Synthesis tools can invent or distort quotes and over-generalize. Checking the originals takes minutes and protects you from building on fiction. Asking the model or re-running does not verify anything.
Exercise 18.1 90 minutes · on your own product
Widen with AI, narrow by hand
Pick one screen of your product that you are unhappy with.
Give an AI your constraints (users, principles, references, voice) and ask for 10 genuinely different directions, including two that break a convention.
Discard the 5 most generic. Combine or refine the rest into 2 directions by hand.
Ask the AI for the strongest critique of each; decide which criticisms are valid.
Write a 5-line taste log: what you chose, against what, and why.
You're done when: you have 10 raw directions, 2 refined ones, a critique response, and your taste log entry.
Beginner
Competent
Strong
Took the AI's favorite.
Narrowed by your own principles with a written reason.
Final direction is clearly not the internet average, and you can say what makes it yours.
Connect the ideas · Part four recap
Your eval set (Ch. 16), your hidden prompt (Ch. 15), your bias cases (Ch. 17) and your taste log (Ch. 18) share one purpose. Which?
Each artifact makes design intent explicit and testable. Models will keep changing; written criteria, examples and decisions are how a solo creator keeps a product coherent over years. This is the same idea as a design system for one (see Systems & Platforms).
Wrap-up
You started with three diagnostic questions. If you answer them again now, you should be able to say not only which option is right but which chapter, guideline and pattern explains why. That is the shift this guide aims for: from "AI features are magic or hype" to "AI is a material with known properties, and I know how to design with it."
Ten things to remember
A model is a distribution, not a function. Design for variation, error rates, latency and cost from day one.
Use the 18 guidelines as a review ritual; most products fail in the "when wrong" box.
Start from the problem. If a rule can do it, write the rule.
Choose autonomy per action from severity and reversibility; make actions reversible to earn more autonomy.
Put AI in the work (cursor, selection, field), not in a chat box beside it.
Ground claims in sources and cite at the claim level.
Show uncertainty as behavior: highlight, ask, offer alternatives. Numbers only if calibrated.
Diffs, editable output and one-step undo turn "trust me" into "check me".
Stream, show real steps, always offer Stop, and send long work to the background.
Build a 30-example eval set and keep taste human. AI widens; you narrow.
Self-assessment: I can…
Practice assignment for the next two weeks
Take one AI feature in your product (or the one you most want to add) from idea to a tested prototype, using the guide as a sequence. About 45 minutes a day.
Days 1–2. Four-property audit (Ex. 1.1) and four-question test (Ex. 3.1). Decide whether to build at all. If not, pick the next candidate.
Days 3–4. Severity–reversibility grid (Ex. 4.1) and pattern choice (Ex. 5.1, 6.1). Sketch the feature in its chosen pattern.
Days 5–6. Build the 30-example eval set and cost estimate (Ex. 16.1). Write your hidden instructions and controls (Ex. 15.1).
Days 7–9. Build a code prototype with the trust layer: diff or preview (Ex. 11.1), confidence policy (Ex. 10.1), sources if it makes claims (Ex. 9.1).
Days 10–11. Design latency, failure and feedback states (Ex. 12.1, 13.1). Simulate a timeout and a provider outage.
Day 12. Data-use card, memory if any, and the ethics pass (Ex. 14.1, 17.1).
Day 13. Run the trust and control checklist from Chapter 14 and the 18 guidelines. Fix the two biggest gaps.
Day 14. Watch two people use it (see Testing & Iteration). Write a one-page reflection: what surprised you, what you would change, and which choices were yours rather than the AI's.
Reading list
Guidelines for Human-AI Interaction
Saleema Amershi et al., CHI 2019 · the 18 guidelines with examples; read the paper's tables of real products passing and failing each one.
People + AI Guidebook
Google PAIR, 2019, updated since · six chapters of worksheets on user needs, mental models, trust, feedback and errors.
Human Interface Guidelines: Machine learning, Generative AI
Apple · quiet, platform-native patterns for feedback, corrections, confidence and limits. Read the current version.
Human-Centered AI
Ben Shneiderman, Oxford University Press, 2022 · the argument that high automation and high human control can coexist.
Ironies of Automation
Lisanne Bainbridge, Automatica, 1983 · four pages that predict most of the supervision problems of AI agents.
A Model for Types and Levels of Human Interaction with Automation
Parasuraman, Sheridan and Wickens, 2000 · the source of "levels of autonomy" thinking, by stage of work.
Why Chatbots Are Not the Future
Amelia Wattenberger, 2023 · the clearest short essay on why text boxes are a weak default interface.
Your AI Product Needs Evals
Hamel Husain, 2024 · practical, designer-friendly case for looking at data and writing criteria.
Badass: Making Users Awesome
Kathy Sierra, 2015 · not about AI, but the best frame for designing AI that makes people more capable.
Computer Power and Human Reason
Joseph Weizenbaum, 1976 · ELIZA's creator on what we should and should not hand to machines.
Co-Intelligence
Ethan Mollick, 2024 · a practical view of working alongside AI, useful for your own design practice.
Shape of AI
Emily Campbell · an online collection of AI interaction patterns with real product examples; use it for pattern hunts.