Project 25: Trust-Centered UX for Human-Agent Collaboration
Design and instrument a human-facing interface that makes agent behavior inspectable, interruptible, and recoverable.
Quick Reference
| Attribute | Value |
|---|---|
| Difficulty | Level 3: Advanced |
| Time Estimate | 10-18 hours |
| Language | TypeScript (Next.js) |
| Prerequisites | UX fundamentals, Projects 6 and 10 |
| Key Topics | confidence UX, provenance, uncertainty messaging, override/rollback |
Learning Objectives
- Present confidence and risk without misleading precision.
- Provide provenance and explanation affordances users can act on.
- Implement undo, override, and escalation pathways.
- Measure trust and correction behavior with UX telemetry.
The Core Question You’re Answering
“How do you design an agent interface users can trust without surrendering control?”
Concepts You Must Understand First
| Concept | Why It Matters | Where to Learn |
|---|---|---|
| Trust calibration | Prevents overtrust and undertrust | HCI references |
| Provenance UX | Supports verification | explainability guidance |
| Escalation patterns | Handles high-risk outcomes | product design patterns |
| Context repair loops | Maintains conversation quality | conversational UX methods |
Theoretical Foundation
Agent Decision -> Confidence/Risk UI -> User Response -> Override/Escalation -> Outcome + Telemetry
Trust emerges from clear controls and recoverability.
Project Specification
What You’ll Build
A web interface with:
- Confidence and risk badges
- Explain/provenance drawer
- Clarification and disambiguation prompts
- Override and rollback actions
Functional Requirements
- Display confidence + uncertainty labels
- Show source provenance links
- Provide one-click human override
- Support multi-turn correction flow
Non-Functional Requirements
- Consistent risk language
- Accessible controls
- Low-friction recovery actions
Real World Outcome
$ npm run p25:demo
[ui] confidence=0.62 risk=MEDIUM provenance_links=3
[user] clarify_prompt_used=true
[override] action=blocked_and_edited_by_user
[rollback] rollback_id=rb_7a2 status=complete
Architecture Overview
UI Layer -> Decision Explainer -> Provenance Service -> Override API -> Telemetry Sink
Implementation Guide
Phase 1: Risk/Confidence Display
- Build normalized labels and visual language.
Phase 2: Explain + Override Flow
- Add provenance panel and explicit override actions.
Phase 3: Telemetry and Iteration
- Instrument confusion and correction metrics.
Testing Strategy
- Usability tests for high-risk actions
- Recovery-time tests for overrides
- Ambiguous-intent correction tests
Common Pitfalls & Debugging
| Pitfall | Symptom | Fix |
|---|---|---|
| Vague confidence labels | user confusion | define confidence bands with plain-language meaning |
| Hidden rollback controls | trapped users | surface undo near side effects |
| No correction telemetry | blind UX iteration | track correction and abandonment events |
Interview Questions They’ll Ask
- What is trust calibration in agent UX?
- How do you communicate uncertainty effectively?
- What makes a strong human-override pattern?
- Which telemetry indicates UX trust is improving?
Hints in Layers
- Hint 1: Use three confidence bands, not raw probabilities.
- Hint 2: Keep explanation one click away.
- Hint 3: Make rollback available at action boundary.
- Hint 4: Compare pre/post confusion event rates.
Submission / Completion Criteria
Minimum Completion
- Confidence + provenance + override UI flow
Full Completion
- Context repair and escalation UX implemented
Excellence
- Measurable trust improvements from telemetry