ออกแบบอินเทอร์เฟซที่ลงมือทำได้: คู่มือ Agentic UI

เดือนมีนาคม 2025 ฉันรื้อตัวช่วยจองคิวให้บริษัทโฮมเซอร์วิสในเมืองปอร์ตู ทีมมีพนักงานหกสิบคน รับคำขอจองสัปดาห์ละสี่ร้อยรายการ แชตเดิมตอบคำถามเรื่องเวลาทำการกับราคา Agent ตัวใหม่ลงมือทำตามคำขอ มันตรวจปฏิทิน กันคิว ส่ง SMS ยืนยัน ออกเงินคืนไม่เกินห้าสิบยูโรหลังผ่านการอนุมัติ งานโทรศัพท์ที่แผนกต้อนรับลดเหลือครึ่งหนึ่งในหกสัปดาห์ อัตราเต็มคิวขึ้นจากเจ็ดสิบแปดเป็นเก้าสิบสี่เปอร์เซ็นต์ โมเดลยังตัวเดิม ฉันเปลี่ยนอินเทอร์เฟซรอบมัน

ฉันออกแบบอินเทอร์เฟซเอเจนต์ที่ลงมือทำแล้วรายงานกลับ ผู้เยี่ยมชมให้สิทธิ์ เฝ้าดูงานแตะทีละขั้น แก้ทาง Agent กลางทาง สถานะความคืบหน้าโชว์งานกำลังวิ่ง การยืนยันคุมเงินกับข้อความ การยกเลิกย้อนคลิกผิด บันไดถอยช่วยเรื่องตัวสะกดผิดกับทางตัน หัวข้อด้านล่างแสดงทุกชิ้นพร้อมจอจริง ทรงโค้ด จุดตรวจที่ฉันรันก่อนส่งมอบงาน

จากแชตบอตสู่นักปฏิบัติ: อะไรเปลี่ยนไป

แชตบอตอ่านแล้วตอบ Agent อ่าน วางแผน เรียกเครื่องมือ รายงานกลับ ฉันเห็นช่องว่างนี้กับงานปอร์ตู บอตเดิมตอบคำถามว่ามีคิววันศุกร์ไหมด้วยตารางราคา ผู้เยี่ยมชมยังโทรหาแผนกต้อนรับเพื่อจอง Agent ตัวใหม่ค้นสามปฏิทิน กันคิวหนึ่งช่วงสิบนาที ขอการอนุมัติก่อนยืนยัน เส้นทางหนึ่งให้ข้อมูล อีกเส้นทางขยับเวลากับเงิน

สามความเปลี่ยนกำหนดงานออกแบบ ข้อหนึ่งตัวเริ่มงานย้าย Agent เริ่มงานหลังคำขอสั้นหนึ่งประโยค มันถามเสริมมากสุดหนึ่งข้อ แล้วลงมือทำ ฉันให้เครื่องมือสามตัวตั้งแต่วันแรกคืออ่านตาราง กันคิว ส่งยืนยัน เครื่องมือชุดแรกวิ่งสะอาดครบสองสัปดาห์ฉันค่อยเติมตัวเพิ่ม ข้อสองเวลายืด คำตอบแชตใช้สองวินาที งาน Agent ใช้ยี่สิบวินาทีถึงสามนาที ผู้เยี่ยมชมยอมรอเมื่อเห็นขั้นงานแตะพื้น เขาออกเมื่อเห็นจุดกระพริบ ฉันโชว์ทุกการเรียกเครื่องมือเป็นการ์ดเล็กพร้อมป้ายภาษาธรรมดากับเวลา ข้อสามความพลาดมีราคา ประโยคผิดเสียความสนใจ การจองผิดเสียเก้าอี้กับเงินคืน ฉันล็อกทุกคำสั่งมีต้นทุนไว้หลังแตะของคน ลงชื่อคนกดกับเวลา

ฉันวัดขนาดงานก่อนวาดจอ ฉันลิสต์ห้าท่าที่ผู้เยี่ยมชมขอมากสุด ฉันปักว่าท่าไหนอ่านข้อมูล ท่าไหนเปลี่ยนข้อมูล ท่าอ่านวิ่งอิสระ ท่าเปลี่ยนต้องผ่านการยืนยันหรือการยกเลิก

ไลบรารีแพตเทิร์น: ความคืบหน้า การยืนยัน การยกเลิก การถอย

สามแพตเทิร์นคอนเวอร์ชันพร้อมตัวเลขจริงจากเครือทันตกรรมฉันเขียนไว้ในโพสต์ รูปแบบ Agentic UI ที่เปลี่ยนผู้ชมเป็นลูกค้าได้จริง โพสต์นั้นเล่าการเปิดเผยแบบเป็นขั้น การแสดงการเรียกเครื่องมือ การถอยอย่างสง่างามพร้อมจอ กับตัวเลขที่ฉันวัด คู่มือนี้ยืนบนฐานนั้น เติมสองชิ้นที่อินเทอร์เฟซนักปฏิบัติขาดไม่ได้คือการยืนยันชัดกับการยกเลิกจริง

ความคืบหน้าบอกผู้เยี่ยมชมว่างานไหนกำลังวิ่ง ฉันสตรีม server sent events จากเราต์ Next.js ทุกอีเวนต์แบกป้ายสั้นที่ฉันเขียนเองทีละใบ กำลังตรวจคิววันศุกร์ กันสิบโมงครึ่งสิบนาที กำลังส่ง SMS ยืนยัน ฉันจำกัดขั้นมองเห็นสี่ขั้นต่อหนึ่งเทิร์น งานลึกกว่านั้นยุบรวมการ์ดเดียว การละทิ้งตรงเรียกเครื่องมือในงานปอร์ตูร่วงจากสี่สิบเอ็ดเหลือเก้าเปอร์เซ็นต์หลังฉันเติมการ์ดพวกนี้

การยืนยันคุมการเปลี่ยน ฉันเปิดชีตทุกครั้งที่มีจอง จ่าย คืนเงิน ข้อความขาออก ชีตระบุผู้รับ ยอด เวลา แหล่งที่มา มีสามปุ่มคืออนุมัติ แก้ไข ยกเลิก กดอนุมัติเครื่องมือวิ่ง กดแก้ไขโฟกัสกลับช่องเดิม กดยกเลิกปล่อยคิวที่กันไว้ ทุกคำสั่งมีต้นทุนเกินศูนย์ต้องผ่านการยืนยัน ทุกการอนุมัติฉันลงชื่อคนกด เวลา เลขกฎ

การยกเลิกย้อนคลิกผิด ฉันค้างโทสต์ยกเลิกสิบวินาทีหลังทุกคำสั่งย้อนได้ จองศุกร์สิบโมงครึ่ง ยกเลิก โทสต์ถือโฟกัสให้คนใช้คีย์บอร์ด ประกาศผ่าน live region ให้คนใช้โปรแกรมอ่านจอ ฉันเก็บประวัติย้อนในแตะเดียวสำหรับจองกับกันคิว คำสั่งย้อนไม่ได้ฉันเขียนบอกด้วยภาษาธรรมดาก่อนวิ่ง เงินคืนนี้ส่งเงินจริง ย้อนไม่ได้

การถอยช่วยจุดพลาด ฉันวิ่งบันไดสามขั้น ขั้นหนึ่งจับตัวสะกดผิดด้วยค้นหยุ่น ถามว่าคุณหมายถึง ClinicPlus ใช่ไหม พร้อมชิปสองชิป ขั้นสองเสนอสามท่ายอดฮิตเป็นชิป ขั้นสามระบุคนกับเวลา มาร์ตาจากแผนกต้อนรับโทรกลับภายในหนึ่งชั่วโมงงาน จุดพลาดขั้นหนึ่งจบในแชตแปดสิบเปอร์เซ็นต์ในงานของฉัน สายโทรกลับขั้นสามปิดจองห้าสิบห้าเปอร์เซ็นต์ในวันเดียวกัน

กลไกความไว้ใจ: กล่องแก้วแทนกล่องดำ

Agent ได้ความไว้ใจเมื่อผู้เยี่ยมชมเห็นแหล่งที่มา ขั้นงาน ขีดจำกัด ฉันโชว์ว่าทุกคำตอบมาจากไหน Agent ทำอะไร ทำอะไรไม่ได้ ฉันเขียนความมั่นใจด้วยคำรูปธรรม ตรงกับตารางราคาลงวันที่เดือนมีนาคม 2025 อ่านปฏิทินเมื่อยี่สิบวินาทีก่อน ฉันเลี่ยงคะแนนลอยไร้แหล่ง ฉันลิสต์ขีดจำกัดบนจอเริ่ม ฉันรับจองกับตอบราคา คำถามการแพทย์ฉันส่งให้พนักงาน

เรื่องแสดงความมั่นใจ รอยยกเลิก ทางแยกเจตนาฉันเจาะลึกไว้ในโพสต์ Glass-Box AI: โชว์ความมั่นใจโมเดลให้คนไว้ใจ โพสต์นั้นถือเหตุผลเต็มของฉันว่าทำไมเหตุผลมองเห็นได้ชนะเหตุผลซ่อนอยู่ ฉันใช้กฎนั้นตรงนี้โดยไม่เล่าซ้ำ

รอบตรวจการเข้าถึงสำหรับ Agent UI

ฉันรันรอบตรวจการเข้าถึงทุกจอ Agent ก่อนส่งมอบ Agent UI ทำร้ายผู้ใช้การเข้าถึงก่อนใครเพราะงานเดินตามเวลาข้ามการ์ด ฉันซ่อมเวลา โฟกัส ประกาศ

ฉันประกาศความคืบหน้าผ่าน aria live polite พื้นที่นี้พูดอัปเดตสั้น ตรวจปฏิทิน กันคิวแล้ว ส่งข้อความแล้ว ฉันคุมประกาศไม่เกินสิบสองคำ ฉันย้ายโฟกัสเข้าชีตยืนยันตอนเปิด ย้ายกลับปุ่มเดิมตอนปิด ฉันล็อกโฟกัสในชีตขณะเปิดค้าง คนใช้คีย์บอร์ดกด Enter เพื่ออนุมัติ กด Escape เพื่อยกเลิก

ฉันปักเป้าแตะขั้นต่ำสี่สิบสี่พิกเซล คอนทราสต์ตัวหนังสือสี่จุดห้าต่อหนึ่ง ทุกสัญญาณสีฉันประกบคำ เครื่องหมายถูกสีเขียวพูดด้วยว่ากันแล้ว ธงแดงพูดด้วยว่าล้มเหลว ลองใหม่หรือขอให้มาร์ตาช่วย ฉันเคารพโหมดลดภาพเคลื่อนไหว เปลี่ยนความคืบหน้าเคลื่อนไหวเป็นข้อความนิ่งเมื่อผู้ใช้ขอภาพนิ่ง ปุ่มไอคอนทุกปุ่มฉันติดชื่อ การ์ดทุกใบฉันให้หัวข้อเพื่อให้คนใช้โปรแกรมอ่านจอกระโดดตามหัวข้อ ช่องว่างการเข้าถึงฉันลงตารางเดียวกับจุดพลาด Agent นับเป็นบั๊กเท่ากัน

เวิร์กโฟลว์จาก Figma สู่โปรดักชันด้วย v0 กับต้นไม้ตัดสินใจ

ฉันเริ่มใน Figma ด้วยต้นไม้ตัดสินใจ จอตามทีหลัง ฉันวาดโหนดห้าแบบคือทริกเกอร์ อ่าน ตรวจ ลงมือ รายงาน โหนดลงมือทุกโหนดระบุ กฎยืนยัน โหนดตรวจทุกโหนดระบุกิ่งถอย ต้นไม้ปอร์ตูมีสิบสี่โหนด ฉันเดินต้นไม้กับเจ้าของร้าน เราตัดท่าลงมือสองท่าที่เจ้าของห้าม Agent แตะ

ฉันวาดห้าสถานะให้ทุกท่าลงมือคือนิ่ง กำลังทำ รออนุมัติ เสร็จ ล้ม กำลังทำโชว์การ์ดความคืบหน้า รออนุมัติโชว์ชีตยืนยัน เสร็จโชว์ใบเสร็จพร้อมเวลา เลขอ้างอิง ปุ่มยกเลิก ล้มโชว์สาเหตุด้วยภาษาธรรมดาบวกข้อเสนอถัดไป ปฏิทินหมดเวลา ลองใหม่หรือให้มาร์ตาโทรกลับ ฉันปั้นลูปคลิกได้ด้วยชิปก่อนเขียนโค้ด

ฉันปั่น UI รอบแรกด้วย v0 จากเฟรม Figma ฉันป้อนชื่อคอมโพเนนต์ ลิสต์สถานะ ตัวอย่างคำ ฉันคุมผลลัพธ์ให้แน่นคือเธรดแชต การ์ดความคืบหน้า ชีตยืนยัน โทสต์ แถวประวัติ ฉันวางผลลัพธ์ลงสาขา Next.js ผูกเราต์ server sent events ขับการ์ดความคืบหน้า ตาราง Postgres ชื่อ agent audit บันทึกทุกการเรียกเครื่องมือพร้อม session id ชื่อคนกด ชื่อเครื่องมือ ผลตัดสินนโยบาย ธงคุมโฟลว์ที่ห้าเปอร์เซ็นต์ของทราฟฟิกหนึ่งวัน ฉันเฝ้าอัตราเออเร่อร์ใน Sentry ยอดจ่ายล้มในเว็บฮุก Stripe เธรดซัพพอร์ตใหม่ เปิดเต็มทราฟฟิกหลังวันสะอาด ฉันอ่านบทสนทนายี่สิบอันทุกสัปดาห์ ซ่อมป้ายพลาดยอดฮิตก่อน งานปอร์ตูอัตราจบงานขึ้นจากแปดเป็นยี่สิบสี่เปอร์เซ็นต์ในแปดสัปดาห์ด้วยจังหวะนี้

ปิดท้าย

ฉันส่งงานปอร์ตูด้วยไลบรารีนี้ การ์ดความคืบหน้าโชว์งาน การยืนยันคุมเงิน การยกเลิกย้อนคลิกผิด บันไดถอยยื่นของชิ้นเล็กที่ใช้ได้ รอบตรวจการเข้าถึงเปิดโฟลว์ให้คีย์บอร์ดกับโปรแกรมอ่านจอ ต้นไม้ตัดสินใจคุมขอบเขตให้ซื่อตรง ถ้า Agent ของคุณลงมือโดยไร้ UI ชัด ขอรับการตรวจ AI UX แล้วฉันจะแมปทุกท่าลงแพตเทิร์นมองเห็นได้พร้อมจอกับจุดตรวจ