Skip to main content
ExodeUI

EXODEUI DESKTOP

A little space for good ideas.

Choose your platform to get the official ExodeUI installer.

Looking for Intel Mac or other builds? Explore the web studio or check all download options.

Prefer the browser? Try for free in your browser →
รูปแบบ UXอ่าน 7 นาที·Updated ตุลาคม 2026·โดยทีม ExodeUI

วิธีการออกแบบข้อความแสดงข้อผิดพลาดที่ช่วยลดความคับข้องใจ

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

สรุปโดยตรงและคำจำกัดความ

หลัก Takeaway

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

แนวปฏิบัติ

Nielsen Norman Group สรุปข้อความแสดงข้อผิดพลาดที่มีประสิทธิภาพว่ามองเห็นได้ชัดเจน สร้างสรรค์ และเคารพต่อความพยายามของผู้ใช้ ในทางปฏิบัตินั่นหมายถึง:

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

เวลา

การแสดงข้อผิดพลาดก่อนที่ผู้อื่นจะเสร็จสิ้นถือเป็นข้อผิดพลาดที่พบบ่อยที่สุดประการหนึ่ง NN/g เรียกข้อผิดพลาดก่อนกำหนดว่าเป็นรูปแบบที่ไม่เป็นมิตร เช่น ให้คะแนนการทดสอบก่อนที่นักเรียนจะเรียนจบ ตรวจสอบช่องเมื่อบุคคลออกไปหรือส่งแบบฟอร์ม จากนั้นอัปเดตข้อความทันทีในขณะที่แก้ไข

ข้อผิดพลาดที่ไม่เกี่ยวกับแบบฟอร์ม

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

การเข้าถึง

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

การเคลื่อนไหวในสถานะผิดพลาด

การสั่นหรือการเปลี่ยนสีสั้นๆ สามารถดึงความสนใจไปที่ฟิลด์ที่มีปัญหาได้ แต่ให้กระชับ อย่าทำซ้ำทุกครั้งที่กดแป้นพิมพ์ และแทนที่การเคลื่อนไหวด้วยการเปลี่ยนสีหรือไอคอนเมื่อเปิดการลดการเคลื่อนไหว ตัวข้อความมีความสำคัญมากกว่าภาพเคลื่อนไหว

คีย์ Principles ที่ต้องจำ

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

คำถามที่พบบ่อย

แหล่งที่มา

  1. Error-Message Guidelines — Nielsen Norman Group
  2. Indicators, Validations, and Notifications — Nielsen Norman Group

คำแนะนำและตัวอย่างที่เกี่ยวข้อง

ออกแบบสถานะข้อผิดพลาด ไม่ใช่แค่เส้นทางที่มีความสุข

เปิดตัวอย่าง ExodeUI ที่มีข้อผิดพลาดและความสำเร็จระบุการสลับโค้ดของคุณและปรับเปลี่ยน

เปิดตัวอย่าง
ลองฟรี