Cheatsheet: UX for language user interfaces
The five core patterns
Section titled “The five core patterns”| Pattern | What it does | UI essentials |
|---|---|---|
| Streaming | Turns waiting into watching | Render tokens as they arrive + thinking indicator before TTFT + Stop button |
| Citations | Turns claims into evidence | Sourced answers; clickable links back; visible distinct styling |
| Regeneration | Uses model non-determinism | Regenerate button; ideally branching from edited prior messages |
| Hedging | Honest uncertainty > confident wrong | Prompt model to hedge on thin context; render uncertainty visibly |
| Recoverable failure | Failing well | Legible message + recovery action + preserved input + full logs |
Streaming, the cheapest biggest win
Section titled “Streaming, the cheapest biggest win”- Implementation:
stream=True/messages.stream()in most clients. - UX wrapping: thinking indicator -> token-by-token render -> Stop button.
- Skipping streaming = baseline UX failure.
Citations rendering options
Section titled “Citations rendering options”- Footnote-style numbers
[1][2] - Inline pills near the cited claim
- Hover-tooltips with source snippet
- Separate citations panel
The form is brand/IA; the substance (real, traceable, visible) is not optional.
Recoverable failure: multi-modal, each its own
Section titled “Recoverable failure: multi-modal, each its own”| Failure | Legible message | Recovery action |
|---|---|---|
| API timeout | ”The model timed out” | Retry button |
| Retrieval miss | ”Nothing in our docs matched” | Rephrase suggestion / show closest matches |
| Out-of-scope refusal | ”I can answer questions about [scope]" | "Try asking about…” examples |
| Malformed output | ”Couldn’t parse the response” | Retry; log for debugging |
| Rate limit | ”Too many requests; please wait” | Backoff + retry |
Always: preserve user input; log everything (lesson 5 / 7).
Supporting details
Section titled “Supporting details”- Strong input affordances: placeholder “Ask about [scope]” + 3-5 example questions
- Markdown rendering: lists, headings, links, bold (default in most chat UIs)
- Code blocks: syntax highlighting + copy-to-clipboard button
- Conversation persistence: don’t lose the conversation on tab close
- Latency-masking: “Searching documents…” status; skeleton UI; staged output
- Stop button: halt long streaming responses
- Edit / branch: re-run from an edited prior message
Critique-this-UX checklist
Section titled “Critique-this-UX checklist”- Tokens stream + thinking indicator + Stop button?
- Sources cited and clickable?
- Regenerate button (and ideally branching)?
- Model prompted to hedge on thin context; uncertainty visible in UI?
- Failure messages legible by mode (timeout / no-context / refusal / etc.)?
- User input preserved on failure?
- Markdown + code-block rendering?
- Example questions in the placeholder?
- Conversation persistence?
What this lesson does NOT cover
Section titled “What this lesson does NOT cover”- Content policy (what should the model refuse?)
- Moderation
- Labeling AI-generated content
- Other policy questions
Real, but they require their own framing. This lesson is interaction-design patterns for usability.
Words to use precisely
Section titled “Words to use precisely”- LUI (language user interface): chat / natural-language interaction surface.
- Streaming: render output tokens as they arrive from the API.
- Hedging: linguistic acknowledgment of uncertainty.
- Recoverable failure: legible + actionable + input-preserving failure mode.
Source
Section titled “Source”- Full Stack Deep Learning, LLM Bootcamp (Spring 2023): UX for Language User Interfaces.
fullstackdeeplearning.com/llm-bootcamp. Independent structural mirror in original prose; see references.