ใช้รูปแบบคุ้นเคยก่อนประดิษฐ์ Interaction ใหม่
ออกแบบ ใช้รูปแบบคุ้นเคยก่อนประดิษฐ์ Interaction ใหม่ สำหรับผลิตภัณฑ์ AI ในบริบทผู้ใช้ไทย
เป้าหมาย: เปลี่ยน AI demo เป็น flow ที่เข้าใจ ควบคุม แก้ไข และทดสอบได้ · ใช้เวลาประมาณ 16 นาที
Goal → State → Feedback → Recovery
ออกแบบให้ผู้ใช้รู้ว่าเกิดอะไรขึ้นและทำอะไรต่อ
Goal
เขียนผลลัพธ์ของผู้ใช้และหลักฐานว่าสำเร็จ
State
ใช้ navigation, form, save, undo, upload, table และ disclosure ตามความคาดหวังของแพลตฟอร์ม แล้วเพิ่มพฤติกรรม AI เฉพาะเมื่อมี feedback และทางกลับที่ชัด
Feedback
แสดงสถานะ ที่มา ข้อจำกัด และผลของการกระทำด้วยภาษาไทยชัดเจน
Recovery
ให้ retry, edit, cancel, undo หรือส่งต่อคนตามความเสี่ยง
ส่วนประกอบที่ต้องระบุ
convention
อธิบาย convention ของ flow นี้ พร้อม default, edge case และข้อความภาษาไทย
ให้ข้อกำหนดที่นักออกแบบ นักพัฒนา และ QA ตีความตรงกัน
affordance
อธิบาย affordance ของ flow นี้ พร้อม default, edge case และข้อความภาษาไทย
ให้ข้อกำหนดที่นักออกแบบ นักพัฒนา และ QA ตีความตรงกัน
label
อธิบาย label ของ flow นี้ พร้อม default, edge case และข้อความภาษาไทย
ให้ข้อกำหนดที่นักออกแบบ นักพัฒนา และ QA ตีความตรงกัน
undo
อธิบาย undo ของ flow นี้ พร้อม default, edge case และข้อความภาษาไทย
ให้ข้อกำหนดที่นักออกแบบ นักพัฒนา และ QA ตีความตรงกัน
ความผิดพลาดที่ Demo มักซ่อน
ออกแบบเฉพาะ happy path
ผู้ใช้ติดเมื่อข้อมูลว่าง ช้า หรือผิด
ทำ state inventory ก่อน polish
AI ทำงานเงียบ ๆ
ผู้ใช้ไม่รู้ว่ารอ สำเร็จ หรือควรกดซ้ำ
แสดง progress และป้องกัน duplicate action
ให้ automation ตัดสินใจย้อนกลับยาก
แก้ไม่ได้และความไว้วางใจหาย
preview, confirm, undo และ human review
สร้าง Interaction Contract
ปุ่มรูปดาวที่ไม่มี label ใช้ทั้งสร้างใหม่ บันทึก และอนุมัติในหน้าเดียว
เขียน 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