AI2026-09-198 min read

UI/UX & Human-AI Interaction: Thiết kế Trải nghiệm và Tương tác Người - AI Agent

Cẩm nang thiết kế giao diện và tương tác Người - AI (Human-AI Interaction): Từ Human-in-the-Loop, Generative UI (giao diện sinh động), giao thức AG-UI đến hàng đợi phê duyệt (Approval Queues).

Nguyen Pham
Xin chào. Mình thích lập trình và công nghệ. Đây là blog mình chia sẻ lại các kiến thức về lập trình, công nghệ.

Khi trí tuệ nhân tạo chuyển mình từ một công cụ thụ động (chờ người dùng gõ câu lệnh mới trả lời) thành một Tác tử tự chủ (Proactive Agent) có khả năng tự lên kế hoạch và hành động, các khuôn mẫu thiết kế giao diện đồ họa truyền thống (nút bấm tĩnh, form nhập liệu cố định, khung chat đơn giản) bắt đầu bộc lộ nhiều điểm nghẽn.

Làm thế nào để người dùng tin tưởng giao việc cho Agent? Làm thế nào để người dùng kiểm soát được các hành động nguy hiểm mà không làm gián đoạn dòng công việc? UI/UX & Human-AI Interaction Patterns cung cấp câu trả lời thông qua các mẫu tương tác cộng tác người - máy hiện đại.


1. Các cấp độ Kiểm soát của Con người (Human Control Spectrum)#

  1. Human-in-the-Loop (HITL - Con người trong vòng lặp):
    • Tác tử tạm dừng và bắt buộc phải có sự xác nhận của con người trước khi thực thi các hành động nhạy cảm hoặc không thể đảo ngược (ví dụ: chuyển khoản ngân hàng, xóa dữ liệu, gửi email cho toàn công ty).
  2. Human-on-the-Loop (HOTL - Con người giám sát vòng ngoài):
    • Tác tử tự chủ vận hành hoàn toàn nhưng hiển thị bảng điều khiển thời gian thực (Mission Control Dashboard). Con người đóng vai trò giám sát và có thể can thiệp, ngắt kết nối (Emergency Kill Switch) bất cứ khi nào phát hiện bất thường.
  3. Human-out-of-the-Loop (HOOTL):
    • Tác tử tự hành 100% trong phạm vi các tác vụ có rủi ro thấp và khả năng tự phục hồi cao (như tự động dọn rác tệp tạm, thu thập dữ liệu công khai).

2. Các mẫu Thiết kế Giao diện Đột phá#

2.1. Generative UI (Giao diện Người dùng do Agent Tự Sinh)#

  • Thay vì chỉ phản hồi các đoạn văn bản Markdown vô hồn, Agent có khả năng tự quyết định và sinh ra các thành phần giao diện tương tác phong phú tại thời điểm phản hồi (runtime UI rendering).
  • Ví dụ: Khi người dùng yêu cầu phân tích ngân sách, thay vì liệt kê số liệu dưới dạng chữ, Agent tự sinh ra biểu đồ tròn tương tác, thanh trượt điều chỉnh phân bổ ngân sách và bảng thống kê có thể lọc dữ liệu. Các chuẩn như A2UI, MCP Apps hay Open-JSON-UI đang biến tính năng này thành tiêu chuẩn công nghiệp.

2.2. Giao thức AG-UI (Agent-User Interaction Protocol)#

  • Giao thức chuẩn hóa tầng kết nối giữa backend của Agent và bất kỳ giao diện frontend nào. Backend phát ra dòng sự kiện có cấu trúc (streaming events: token text, trạng thái gọi tool, snapshot kế hoạch TODO, nút xác nhận) qua Server-Sent Events (SSE) hoặc WebSocket, giúp frontend vẽ lại toàn bộ hoạt động tư duy của Agent theo thời gian thực mà không bị giật lag.

2.3. Approval Queues & Asynchronous Escalation (Hàng đợi Phê duyệt Bất đồng bộ)#

  • Đối với các hành động rủi ro trung bình, Agent không cần phải "đứng đợi" người dùng duyệt làm lãng phí tài nguyên. Thay vào đó, hành động được đưa vào Hàng đợi Phê duyệt (Approval Queue). Agent tạm lưu trạng thái hiện tại (state checkpoint), chuyển sang làm các công việc độc lập khác và sẽ tự động phục hồi quy trình tiếp tục ngay khi người quản lý bấm nút phê duyệt trên ứng dụng di động hoặc Slack.
Tags:#AI#AI Agent#UI/UX#Human-in-the-Loop#Generative UI
UI/UX & Human-AI Interaction: Thiết kế Trải nghiệm và Tương tác Người - AI Agent — Blog — VDaily