ระบบดี ไม่ใช่ไม่มี error — แต่ error แล้วผู้ใช้ไม่งง รู้ว่าต้องทำอะไรต่อ. ซ้ายอธิบาย ขวากดลองได้จริง
ตอนทุกอย่างปกติใคร ๆ ก็ทำได้ — ระบบที่ดีวัดกันตอน "พลาด": กรอกผิด · เน็ตหลุด · ของหมด · ไม่มีสิทธิ์. ถ้าจัดการ error ไม่ดี ผู้ใช้จะงง โทษว่าเว็บเสีย แล้วเลิกใช้. หน้านี้สอนทำให้ error เป็นมิตร + ช่วยผู้ใช้แก้
หน้าที่บอกผู้ใช้ว่า "เกิดอะไรขึ้น" เมื่อสิ่งต่าง ๆ ไม่เป็นไปตามปกติ — เปิดลิงก์ผิด · ไม่มีสิทธิ์ · โหลดไม่ขึ้น. ห้ามปล่อยจอขาวหรือ error ดิบ ๆต้องบอกสาเหตุ + ทางออก (ปุ่มกลับ/ลองใหม่)
เช็คข้อมูลที่ผู้ใช้กรอก ก่อนส่ง— ช่องบังคับครบไหม · รูปแบบถูกไหม (อีเมล/เบอร์) · ค่าอยู่ในช่วงที่ควร. ถ้าผิด โชว์ ข้อความสีแดงใต้ช่องนั้นชี้ชัดว่าช่องไหนต้องแก้
ข้อความ error ที่ดีบอก 3 อย่าง: ผิดตรงไหน· ทำไม· แก้ยังไง— เขียนภาษาคน ไม่โทษผู้ใช้ ไม่โชว์ศัพท์เทคนิค/รหัส error ดิบ ๆ
error คนละแบบ แจ้งคนละที่: ผูกกับช่องไหน → ใต้ช่องนั้น· พลาดชั่วคราว → toast· ปัญหาที่ต้องเห็นค้าง → banner· ร้ายแรงต้องหยุด → modal
กันไว้ดีกว่าแก้— ออกแบบให้ผู้ใช้ทำผิดได้ยากตั้งแต่แรก: ปิดปุ่มจนกรอกครบ · เลือกจาก dropdown แทนพิมพ์เอง · ยืนยันก่อนทำสิ่งอันตราย · มีปุ่ม undo
error ไม่ได้แปลว่าโค้ดพัง — ส่วนใหญ่มาจากสิ่งที่ คาดเดาไม่ได้(เน็ต/ข้อมูล/สิทธิ์). หน้าที่เราคือ "เตรียมรับมือ" ไม่ใช่หวังว่ามันจะไม่เกิด
เวลาให้ Claude สร้างฟอร์มหรือหน้าใดก็ตาม วาง 5 ข้อนี้ต่อท้าย จะได้ error ที่ผู้ใช้ไม่งง:
จัดการ error ให้ครบด้วย: 1. ตรวจฟอร์มตอนกดส่ง โชว์ข้อความแดงใต้ช่องที่ผิด (อย่าเด้ง alert รวม) 2. ข้อความ error บอก "ผิดตรงไหน + แก้ยังไง" เป็นภาษาคน ห้ามโชว์รหัส/stack trace 3. เน็ตหลุดหรือบันทึกไม่ติด ให้ลองซ้ำอัตโนมัติ 1 ครั้ง ถ้ายังไม่ได้ค่อยขึ้น toast แดง + ปุ่มลองใหม่ 4. ปุ่มส่งให้ disable จนกรอกครบช่องบังคับ 5. ทำหน้า 404 / 403 / 500 พร้อมปุ่มกลับหน้าแรก ห้ามปล่อยจอขาว
| กรอกฟอร์มผิด/ไม่ครบ | inline ใต้ช่อง |
| บันทึกไม่ติด / เน็ตหลุด (ลองใหม่ได้) | Toast แดง |
| สถานะที่ต้องเห็นค้าง (โควต้า/ทดลองหมด) | Banner |
| ร้ายแรง ต้องจัดการก่อนไปต่อ | Modal |
| เปิดหน้าผิด/ไม่มีสิทธิ์/ระบบล่ม | Error state (เต็มหน้า) |