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