AI Product Management: From Idea to Reliable AI Features · UX and trust for AI features · lesson 4 of 16 · 15 min
UX patterns for AI: streaming, citations, confidence, undo and handoff
Why AI needs its own UX patterns
Traditional software is deterministic: the same click gives the same result. AI output is probabilistic, sometimes wrong, and often slow. Good AI UX makes those properties manageable: it shows progress, makes outputs checkable, makes mistakes cheap to fix, and keeps people in control. Poor AI UX hides uncertainty, and users either over-trust the AI (and get burned) or under-trust it (and ignore it).
Eight core patterns
| Pattern | What it does | When to use | |---|---|---| | Streaming | Shows tokens as they are generated | Any response over ~1–2 seconds; perceived speed matters | | Progress for agents | Shows steps ("Searching policies… Reading 3 documents… Drafting") | Multi-step tasks that take many seconds or minutes | | Citations and sources | Links claims to the documents they came from | Any factual or policy answer, RAG features | | Confidence and limits | Signals uncertainty honestly ("I couldn't find this in your documents") | Retrieval misses, low-confidence classifications | | Editable drafts | AI output lands as a draft the user can change before it takes effect | Emails, documents, replies, reports | | Undo and version history | One-click revert of AI changes | Any AI action that modifies data | | Human handoff | Smooth escalation to a person with context attached | Support, sales, high-stakes decisions | | Feedback capture | Thumbs, "this is wrong" with reason, edit tracking | Everywhere; feeds evaluation and improvement |
Pattern details that matter
Streaming: stream the answer, but don't stream things users must not act on before completion (for example, a total that may change). For structured outputs, show a skeleton and fill fields as they arrive.
Citations: cite at the claim level, not just "Sources: 3 documents". Let users open the exact passage. Show document date and owner so users can judge freshness.
Confidence: avoid fake precision ("87% confident") unless the number is calibrated and meaningful to users. Prefer clear states: answered with sources, partially answered, not found. Design a great "I don't know" message that offers the next step (search manually, ask a colleague, contact support).
Undo: for "act and notify" features, provide an undo window and a visible activity log ("AI tagged 42 tickets today. Review / Undo").
Handoff: pass the full context to the human (conversation, AI summary, what was tried). Users should never have to repeat themselves. In markets like Pakistan and the Gulf where customers often prefer WhatsApp or phone, handoff may cross channels, so carry context across too.
Disclosure: tell users when they are interacting with AI or seeing AI-generated content, and label AI-generated media. Beyond good practice, transparency obligations exist in some jurisdictions (see the regulation lesson).
Designing the empty and first-run state
- Suggested starter prompts tailored to the user's role and data.
- A one-line explanation of what the AI can and cannot do.
- Examples of good requests.
- Settings for language (English, Arabic, Urdu) and tone where relevant.
Hands-on: an AI UX review checklist
## AI UX review: [feature]
- [ ] Response starts appearing within ~1 s (streaming or progress indicator)
- [ ] Every factual claim links to a source passage (with date/owner)
- [ ] Clear "not found / not sure" state with a next step
- [ ] Output is an editable draft OR the action has an undo window + activity log
- [ ] One-click handoff to a human, context carried over
- [ ] Users are told they are interacting with AI; AI media is labelled
- [ ] Feedback control with reasons ("wrong", "outdated", "unsafe", "other")
- [ ] Right-to-left layout tested for Arabic/Urdu; mixed-script input works
- [ ] Error states for timeouts, rate limits and model outages
- [ ] Accessibility: screen-reader friendly streaming, keyboard access to citations
Worked example: a policy assistant for a Riyadh HR team
Version 1 showed a long answer after an 8-second spinner, with a list of documents at the bottom. Employees did not trust it and kept emailing HR. Version 2 streamed answers, cited each paragraph to the exact policy clause with its last-updated date, showed "I couldn't find this in current policies. Ask HR" with a pre-filled request, supported Arabic with right-to-left layout, and added a "this is wrong" button routed to the policy owner. Email volume to HR on covered topics fell and satisfaction with answers rose (the team measured both; figures illustrative).
Pitfalls
- Hiding AI errors behind confident prose.
- Citations that link to a whole 80-page PDF rather than the passage.
- No undo for AI actions.
- Handoffs that lose context.
- Only testing in English and left-to-right layouts.
How to measure success
Your feature passes the UX checklist, and you track trust signals: citation click-through, edit rates, undo rates, handoff rates and feedback reasons.
Video lecture: UX patterns for AI: streaming, citations, confidence, undo and handoff
Lecture coming soon · 15 chapters · about 8 minutes. Read the full transcript below.
- UX patterns for AI
- Why AI needs its own UX
- Streaming and progress
- Citations
- Confidence and limits
- Control
- Feedback and disclosure
- Simple example: bookshop drafts
- Business example: Riyadh HR (illustrative)
- Common mistakes
- Another example: microfinance app
- Measuring UX trust signals
- Try this now
- Watch me do it
- Recap
Lecture transcript
UX patterns for AI
Picture two versions of the same AI assistant. In one, you wait eight seconds staring at a spinner, then get a wall of confident text with a list of documents at the bottom. In the other, the answer starts appearing instantly, every paragraph links to the exact policy clause, and when it does not know, it says so and offers to ask HR for you. Same model. Completely different trust. In this lesson you will learn the core UX patterns that make AI products usable and trustworthy.
Why AI needs its own UX
Why does AI need its own patterns? Traditional software is predictable: the same click gives the same result. AI output is probabilistic, sometimes wrong, and often slow. Here is an analogy. Working with AI is like working with a brilliant new colleague who occasionally misremembers. You would want them to show their sources, say when they are unsure, let you edit their drafts, and pass you the file when something needs a human. Those four habits are exactly the UX patterns we are about to cover.
Streaming and progress
First, speed and progress. Streaming shows the answer as it is generated, which makes a five-second response feel fast. For agents that take many steps, show progress: searching policies, reading three documents, drafting. One subtlety: do not stream numbers users might act on before they are final, like a total that may still change. For structured outputs, show a skeleton and fill in fields as they arrive.
Citations
Second, citations. Cite at the level of each claim, not a vague list of sources at the bottom. Let users open the exact passage, not an eighty-page PDF. Show the document's date and owner, so people can judge whether it is current. Citations do two jobs at once: they build trust, and they make checking fast, which, as we saw in the value lesson, protects your business case.
Confidence and limits
Third, honesty about limits. Avoid fake precision, like eighty-seven per cent confident, unless the number is calibrated and means something to users. Prefer clear states: answered with sources, partially answered, or not found. And design a great I do not know message. It should say what the assistant could not find and offer the next step: search manually, ask a colleague, or open a pre-filled request.
Control
Fourth, control. Put AI output into editable drafts, so nothing takes effect until a person is happy. When the AI acts on its own, give an undo window and a visible activity log, something like AI tagged forty-two tickets today, review or undo. And design the handoff to a human so that the full context travels with it: the conversation, the AI's summary and what was already tried. Customers should never repeat themselves, even if the handoff moves from chat to WhatsApp or a phone call.
Feedback and disclosure
Fifth, feedback and disclosure. Add feedback controls with reasons, like wrong, outdated, unsafe or other, and route them to someone who can act. Track edits too, because every edit is a signal. And tell users when they are interacting with AI and label AI-generated media. It is good practice, and in some jurisdictions it is becoming a legal obligation, which we will cover later in the course.
Simple example: bookshop drafts
A simple example. A small online bookshop adds an AI reply drafter to its support inbox. Before: the AI sends replies automatically, and a wrong delivery date causes angry follow-ups. After: replies land as drafts, the order status line cites the order system, and there is a one-click send or edit. Agents approve most drafts with no changes and fix the rest in seconds. Nothing about the model changed. Only the UX.
Business example: Riyadh HR (illustrative)
Now a realistic business example, with illustrative results. A Riyadh HR team launched a policy assistant. Version one: an eight-second spinner, a long answer, documents listed at the bottom. Employees kept emailing HR. Version two streamed answers, cited every paragraph to the exact clause with its last-updated date, supported Arabic with a right-to-left layout, showed a clear not-found message with a pre-filled request to HR, and added a this-is-wrong button routed to the policy owner. Email volume on covered topics fell and satisfaction rose.
Common mistakes
The common mistakes. Hiding errors behind confident prose. Citations that point to a whole PDF. AI actions with no undo. Handoffs that lose context. And testing only in English and left-to-right layouts, when your users write Arabic or Urdu, or mix scripts in one message. Each of these quietly destroys trust, and trust, once lost, is very hard to win back.
Another example: microfinance app
Let me add one more example, from Pakistan. A microfinance app uses AI to explain loan repayment schedules in Urdu and English. Early testing showed users trusted the chatbot too much: some assumed it could reschedule payments. The team added three patterns: a clear statement at the start of each chat of what the assistant can and cannot do, a button to talk to a loan officer with the conversation attached, and citations to the actual repayment schedule. Calls to loan officers became shorter because context arrived with them.
Measuring UX trust signals
A quick word on measuring whether your UX patterns work. Track citation click-through, which tells you people are checking. Track edit rates on drafts and undo rates on actions. Track handoff rates and the reasons people give. And look at feedback categories. If people never click citations and never edit, they may be over-trusting. If they always edit heavily, the drafts are not good enough yet. Healthy trust sits in between.
Try this now
Try this now. Take one AI feature you use or build and run the ten-point checklist from the lesson: streaming or progress within about a second, claim-level citations, a clear not-found state, editable drafts or undo, one-click handoff with context, disclosure, feedback with reasons, right-to-left testing, error states and accessibility. Pick the two weakest items and sketch a better design on paper.
Watch me do it
Watch me do it. I'm reviewing a policy assistant against the ten-point checklist. Point one: I ask a long question and time it; the first words appear in under a second, pass. Point two: citations. I click one and it opens a forty-page PDF at page one, fail; I note that it should open the exact passage. Point three: I ask about a policy that doesn't exist; it invents an answer, fail, the most serious finding. Point four: drafts and undo, not applicable, it only answers. Point five: handoff; I click talk to HR and my conversation is attached, pass. Point six: disclosure is at the top, pass. Point seven: feedback has reasons, pass. Point eight: I switch to Arabic; the layout mirrors correctly but citations appear on the wrong side, a minor fail. I finish the review with three findings ranked by severity and a sketch for the not-found state.
Recap
Recap. AI output is probabilistic and slow, so good UX makes it checkable, fixable and controllable. Stream and show progress. Cite at claim level with dates. Be honest about limits and design a helpful not-found state. Use drafts, undo and context-rich handoffs. Capture feedback, disclose AI use, and test every language your users speak. Next, we will look at designing for failure and trust in more depth.
Key takeaways
- AI output is probabilistic and slow; UX must make it checkable, fixable and controllable
- Core patterns: streaming, progress, citations, confidence states, editable drafts, undo, handoff, feedback
- Cite at claim level with dates; design a helpful "not found" state
- Carry full context into human handoffs, across channels if needed
- Disclose AI interactions and test RTL languages and error states
Try it
Run the AI UX checklist on one AI feature you use or build, and redesign the two weakest items with a sketch or mock-up.