ข้อความผิดพลาดที่ดีควรระบุสาเหตุอย่างเฉพาะ บอกวิธีแก้ทีละขั้น โทนสุภาพไม่โทษผู้ใช้ วางใกล้จุดที่เกิด อ่านได้ด้วยคีย์บอร์ด/โปรแกรมอ่านหน้าจอ (aria-live, โฟกัส) และบันทึกเทเลเมทรีเพื่อปรับปรุงต่อ; หลีกเลี่ยงรหัสลับ/เทคนิค คำกำกวม หรือการปิดกั้นงาน.

วิธีเขียน Error Messages ให้ดี (เข้าถึงได้และแก้ได้จริง) — พร้อมตัวอย่างโค้ด

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

ตาราง: ข้อความแย่ vs ข้อความที่ดี (พร้อมเหตุผล)

หลักเขียนข้อความผิดพลาด (ยึด UX/WCAG)

• เฉพาะเจาะจง + ใช้ภาษาคน: บอก “อะไรผิด” และ “ให้ทำอะไรต่อ” ใน 1–2 ประโยค
• โทนสุภาพ/ไม่โทษผู้ใช้: เน้นร่วมแก้ ไม่ใช่ตำหนิ
• วางถูกที่: Inline ติดฟิลด์ + Summary ด้านบนที่ลิงก์ไปยังแต่ละฟิลด์
• เข้าถึงได้ (A11y): ใช้ aria-invalid, aria-describedby, role="alert" หรือ aria-live เพื่อให้โปรแกรมอ่านหน้าจอรับรู้
• ไม่เปิดเผยข้อมูลอ่อนไหว: หลีกเลี่ยงยืนยันว่า “อีเมลนี้มีบัญชีอยู่แล้ว” บนหน้าล็อกอิน เป็นต้น
• แก้ที่ต้นเหตุ: วัด error rate ต่อฟิลด์/ขั้นตอน แล้วปรับ UI/validation

ตัวอย่างโค้ด: ฟอร์มที่เข้าถึงได้ + แจ้งเตือนอัตโนมัติ

HTML + ARIA

<form id="signup" novalidate>
  <label for="email">อีเมล</label>
  <input id="email" name="email" type="email" aria-describedby="emailErr">
  <p id="emailErr" class="inline-error" role="alert" aria-live="polite" hidden></p>

  <label for="password">รหัสผ่าน</label>
  <input id="password" name="password" type="password" aria-describedby="pwErr">
  <p id="pwErr" class="inline-error" role="alert" aria-live="polite" hidden></p>

  <button type="submit">สร้างบัญชี</button>
</form>

<div id="errorSummary" role="alert" aria-live="assertive"></div>

JavaScript — แสดงข้อความ, โฟกัสฟิลด์แรกที่ผิด, ส่งสัญญาณ GA4

<script>
const f = document.getElementById('signup');
f.addEventListener('submit', (e) => {
  e.preventDefault();
  const errs = [];
  // email
  const email = f.email;
  const emailMsg = document.getElementById('emailErr');
  if(!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email.value)){
    email.setAttribute('aria-invalid','true');
    emailMsg.textContent = 'อีเมลไม่ถูกต้อง — ใช้รูปแบบ name@domain.com';
    emailMsg.hidden = false;
    errs.push({field:'email', id:'email'});
  } else {
    email.removeAttribute('aria-invalid');
    emailMsg.hidden = true;
  }
  // password
  const pw = f.password, pwMsg = document.getElementById('pwErr');
  if(pw.value.length < 8 || !/\d/.test(pw.value)){
    pw.setAttribute('aria-invalid','true');
    pwMsg.textContent = 'รหัสผ่านสั้นเกินไป — อย่างน้อย 8 ตัว และมีตัวเลข 1 ตัว';
    pwMsg.hidden = false;
    errs.push({field:'password', id:'password'});
  } else {
    pw.removeAttribute('aria-invalid'); pwMsg.hidden = true;
  }

  const summary = document.getElementById('errorSummary');
  if(errs.length){
    summary.innerHTML = '<p>โปรดแก้ไขข้อผิดพลาดต่อไปนี้:</p><ul>' +
      errs.map(e => `<li><a href="#${e.id}">${e.field}</a></li>`).join('') + '</ul>';
    document.getElementById(errs[0].id).focus();
    // GA4
    window.gtag && gtag('event','form_error',{fields: errs.map(e=>e.field).join(',')});
  } else {
    f.submit();
  }
});
</script>

เช็กลิสต์โปรดักชัน (ก่อนปล่อย/รีวิว)

อ้างอิงภายนอก (แนวทาง/มาตรฐาน)

• Nielsen Norman Group — Error Message Guidelines & UX Writing: nngroup.com/articles/error-message-guidelines/
• Microsoft Writing Style Guide — Error messages: learn.microsoft.com/style-guide/.../error-messages
• Apple Human Interface Guidelines — Alerts & Errors: developer.apple.com/design/.../alerts
• Material Design — Text fields: errors & validation: m3.material.io/components/text-fields/guidelines
• W3C — WCAG 2.2 (Error Identification 3.3.1, Error Suggestion 3.3.3, Status Messages 4.1.3): w3.org/TR/WCAG22/
• WAI-ARIA Authoring Practices — Alert & Live Regions: w3.org/WAI/ARIA/apg/patterns/alert/

บริการที่เกี่ยวข้อง (Internal Links)

• บริการ UX/UI Design
• ปรับปรุงเว็บให้เร็ว/คอนเวิร์ตสูง
• ออกแบบ/พัฒนา Webflow
• บริการทั้งหมด

อ่านต่อ (บทความที่เกี่ยวข้อง)

• จิตวิทยาของฟีดแบ็กในการออกแบบ
• Micro-interactions คืออะไร
• UX/UI บน Webflow ที่คอนเวิร์ต
• Information Scent เพื่อ UX & Conversion

FAQ

ควรแสดงรหัสข้อผิดพลาดไหม?
ไม่จำเป็นสำหรับผู้ใช้ทั่วไป เว้นแต่มีประโยชน์ต่อการติดต่อซัพพอร์ต — ถ้าจำเป็นให้วางใน “รายละเอียดเพิ่มเติม”

สีแดงอย่างเดียวพอไหม?
ไม่พอ ควรใช้ข้อความ/ไอคอน/แพตเทิร์นอื่นร่วมด้วยเพื่อผู้ใช้ตาบอดสี และระบุ aria-invalid ให้โปรแกรมอ่านหน้าจอรู้

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

อัปเดตล่าสุด: 23 Aug 2025

เกี่ยวกับผู้เขียน

Vision X Brain Team — ทีม Website/SEO/CRO & Webflow ที่ช่วยปรับ UX/คอนเทนต์ให้เข้าใจง่าย เข้าถึงได้ (WCAG) และคอนเวิร์ตสูง ด้วยแนวทางเชิงหลักฐานและการทดสอบจริง