เขียน State Machine และ Boundary ให้ AI UI
ออกแบบ เขียน State Machine และ Boundary ให้ AI UI สำหรับผลิตภัณฑ์ AI ในบริบทผู้ใช้ไทย
เป้าหมาย: เปลี่ยน AI demo เป็น flow ที่เข้าใจ ควบคุม แก้ไข และทดสอบได้ · ใช้เวลาประมาณ 16 นาที
Goal → State → Feedback → Recovery
ออกแบบให้ผู้ใช้รู้ว่าเกิดอะไรขึ้นและทำอะไรต่อ
Goal
เขียนผลลัพธ์ของผู้ใช้และหลักฐานว่าสำเร็จ
State
ระบุ state, event, transition, guard, side effect, retry, timeout และ terminal state รวม human review; Prompt อาจช่วยสร้าง implementation แต่ state machine ต้องเป็นสัญญาที่ทีมตรวจได้
Feedback
แสดงสถานะ ที่มา ข้อจำกัด และผลของการกระทำด้วยภาษาไทยชัดเจน
Recovery
ให้ retry, edit, cancel, undo หรือส่งต่อคนตามความเสี่ยง
ส่วนประกอบที่ต้องระบุ
state machine
อธิบาย state machine ของ flow นี้ พร้อม default, edge case และข้อความภาษาไทย
ให้ข้อกำหนดที่นักออกแบบ นักพัฒนา และ QA ตีความตรงกัน
transition
อธิบาย transition ของ flow นี้ พร้อม default, edge case และข้อความภาษาไทย
ให้ข้อกำหนดที่นักออกแบบ นักพัฒนา และ QA ตีความตรงกัน
idempotency
อธิบาย idempotency ของ flow นี้ พร้อม default, edge case และข้อความภาษาไทย
ให้ข้อกำหนดที่นักออกแบบ นักพัฒนา และ QA ตีความตรงกัน
human review
อธิบาย human review ของ flow นี้ พร้อม default, edge case และข้อความภาษาไทย
ให้ข้อกำหนดที่นักออกแบบ นักพัฒนา และ QA ตีความตรงกัน
ความผิดพลาดที่ Demo มักซ่อน
ออกแบบเฉพาะ happy path
ผู้ใช้ติดเมื่อข้อมูลว่าง ช้า หรือผิด
ทำ state inventory ก่อน polish
AI ทำงานเงียบ ๆ
ผู้ใช้ไม่รู้ว่ารอ สำเร็จ หรือควรกดซ้ำ
แสดง progress และป้องกัน duplicate action
ให้ automation ตัดสินใจย้อนกลับยาก
แก้ไม่ได้และความไว้วางใจหาย
preview, confirm, undo และ human review
สร้าง Interaction Contract
งานสร้างใบเสนอราคาถูกกดซ้ำหลัง timeout และส่งลูกค้าสองครั้ง
เขียน goal, main flow, state table, control semantics, Thai copy, analytics, accessibility และ recovery
ดูคำตอบตัวอย่าง
เป้าหมายวัดจากงานเสร็จ ไม่ใช่จำนวน click ระบุ idle/loading/success/empty/error/cancelled และ event ทุกตัว ป้องกันการส่งซ้ำ แสดงข้อความภาษาไทยที่บอกสิ่งที่เกิดและทางเลือก ใช้ control ตาม semantics ทำ target อย่างน้อย 44px รองรับ keyboard/focus และให้ preview/confirm/human review ก่อนผลกระทบสูง
- goal/metric
- all states
- control semantics
- Thai feedback
- keyboard/focus
- recovery/reversibility
บันทึกช่วยจำ
- ทดสอบกับผู้ใช้และอุปกรณ์จริง ไม่สรุปจาก mockup
- ข้อความ error ต้องไม่เปิดเผย prompt, secret หรือข้อมูลส่วนบุคคล
สรุปบทเรียนนี้
- เริ่มจาก goal
- ออกแบบทุก state
- ให้ feedback และ recovery