วัดการป้อนข้อความอัตโนมัติของเบราว์เซอร์ในแบบฟอร์ม

Maud Nalpas
Maud Nalpas

เผยแพร่: 20 พฤศจิกายน 2024

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

การสาธิตการป้อนข้อความอัตโนมัติใน Chrome
การป้อนข้อความอัตโนมัติใน Chrome

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

แต่คุณทราบถึงการใช้งานการป้อนข้อความอัตโนมัติและปัญหาที่เกิดขึ้นในเว็บไซต์หรือไม่

คู่มือนี้จะอธิบายวิธีรวบรวมและวิเคราะห์ข้อมูลเกี่ยวกับวิธีที่ผู้ใช้ใช้การป้อนข้อความอัตโนมัติในแบบฟอร์ม

วิธีใช้ข้อมูลเชิงลึกที่ระบบป้อนข้อความอัตโนมัติมีดังนี้

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

การสาธิตและโค้ด

ลองใช้เดโมและดูโค้ดบน GitHub

การสาธิตเครื่องมือตรวจสอบการป้อนข้อความอัตโนมัติ
ใช้โค้ดสาธิตเพื่อสังเกตการดําเนินการของผู้ใช้ในแต่ละช่องของแบบฟอร์มแบบเป็นโปรแกรม (เว้นว่างไว้ ป้อนด้วยตนเอง ป้อนด้วยฟีเจอร์ป้อนข้อความอัตโนมัติ หรือป้อนด้วยฟีเจอร์ป้อนข้อความอัตโนมัติแล้วแก้ไขช่อง) ลองใช้เลย

สิ่งที่สามารถลองทำ:

  • ป้อนข้อความอัตโนมัติในช่องทั้งหมด
  • ป้อนข้อความอัตโนมัติในช่อง แล้วล้างข้อมูลด้วยตนเอง
  • ป้อนข้อมูลในช่องโดยอัตโนมัติ แล้วแก้ไขด้วยตนเอง
  • กรอกข้อมูลในช่องด้วยตนเองจนเสร็จสมบูรณ์
  • เว้นช่องว่างไว้

การสนับสนุนเบราว์เซอร์

การสาธิตนี้ใช้ได้กับอุปกรณ์และเบราว์เซอร์เวอร์ชันล่าสุด โดยอาศัยการตรวจหาคลาสจำลอง CSS :autofill ซึ่งเบราว์เซอร์ต่างๆ รองรับ

ขั้นตอนที่ 1: รวบรวมข้อมูลสำหรับการป้อนข้อความอัตโนมัติ

กําหนดสถานะการป้อนข้อความอัตโนมัติ

ก่อนอื่น ให้กำหนดสถานะช่องป้อนข้อความอัตโนมัติที่เป็นไปได้ซึ่งคุณสนใจ ดังนี้

  • EMPTY: ผู้ใช้ปล่อยฟิลด์ว่าง
  • AUTOFILLED: ผู้ใช้กรอกข้อมูลในช่องโดยใช้การป้อนข้อความอัตโนมัติเท่านั้น
  • AUTOFILLED_THEN_MODIFIED: ผู้ใช้กรอกข้อมูลในช่องโดยใช้การป้อนข้อความอัตโนมัติก่อน จากนั้นจึงแก้ไขค่าที่ป้อนอัตโนมัติด้วยตนเอง เช่น ผู้ใช้ป้อนที่อยู่และรายละเอียดติดต่อโดยอัตโนมัติ แต่ป้อนหมายเลขโทรศัพท์อื่นด้วยตนเอง
  • ONLY_MANUAL: ผู้ใช้กรอกข้อมูลในช่องด้วยตนเองทั้งหมด
// Possible values for autofill statuses
const EMPTY = 'empty';
const AUTOFILLED = 'autofilled';
const AUTOFILLED_THEN_MODIFIED = 'autofilled-then-modified';
const ONLY_MANUAL = 'only-manual';

ใช้ฟังก์ชันยูทิลิตี

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

  • getAllAutofilledFields จะดูองค์ประกอบ <input> และ <select> ทั้งหมดภายในแบบฟอร์มหนึ่งๆ และตรวจสอบว่ามีคลาสจำลอง :autofill CSS หรือไม่ ซึ่งจะแสดงรายการองค์ประกอบที่กรอกอัตโนมัติ
  • checkIsAutofilled จะตรวจสอบว่าองค์ประกอบหนึ่งๆ เป็นส่วนหนึ่งของลิสต์นี้หรือไม่
// Get all elements that are autofilled, using the :autofill pseudo-class
function getAllAutofilledFields(formElement) {
  return formElement.querySelectorAll(':autofill');
}

// Check if the passed element is in the list of autofilled fields
function checkIsAutofilled(allAutofilledFields, fieldElement) {
  return Array.from(allAutofilledFields).includes(fieldElement);
}

// Usage
const allAutofilledFields = getAllAutofilledFields(formElement);
const isAutofilled = checkIsAutofilled(allAutofilledFields, fieldElement);

นอกจากนี้ คุณต้องมีฟังก์ชันยูทิลิตีเพื่อตรวจสอบว่าช่องว่างเปล่าหรือไม่

// Check if the value of the element is empty
function checkIsEmpty(fieldElement) {
  const value = fieldElement.value.trim();
  // value is a string, even for a type = number field
  const isEmpty = value === '';
  return isEmpty;
}

เริ่มต้นสถานะการป้อนข้อความอัตโนมัติ

สร้างออบเจ็กต์ส่วนกลาง autofillStatuses เพื่อจัดเก็บสถานะการป้อนข้อความอัตโนมัติของช่องแต่ละช่อง

รวบรวมidของช่องทั้งหมดจากแบบฟอร์ม และเริ่มต้นสถานะของช่องแต่ละช่องเป็น EMPTY

// Global variable storing autofill statuses for each field
const autofillStatuses = {};
// Example: {
//     "name": "autofilled",
//     "street-address": "autofilled-then-modified",
//     "country": "only-manual"
// }

// Initialize autofill status for all fields
function initializeAutofillStatuses(formElement) {
  const allFieldsAsArray = getAllFieldsAsArray(formElement);
  allFieldsAsArray.forEach((fieldElement) => {
    autofillStatuses[fieldElement.id] = EMPTY;
  });
}

initializeAutofillStatuses(document.getElementById('form'));

หากต้องการรวบรวมองค์ประกอบฟิลด์ทั้งหมดที่คุณสนใจ initializeAutofillStatuses จะใช้ฟังก์ชันยูทิลิตีต่อไปนี้

// Collect all field elements for a given form
function getAllFieldsAsArray(formElement) {
  return Array.from(formElement.querySelectorAll('input, select'));
}

สังเกตการเปลี่ยนแปลง

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

แนบ Listener เหตุการณ์การเปลี่ยนแปลงกับองค์ประกอบแบบฟอร์มแต่ละรายการ เมื่อเกิดการเปลี่ยนแปลง ระบบจะตรวจสอบว่าขณะนี้มีการใช้การป้อนข้อความอัตโนมัติกับองค์ประกอบหรือไม่โดยใช้checkIsAutofilledฟังก์ชันยูทิลิตี จากนั้นระบบจะอัปเดตสถานะการป้อนข้อความอัตโนมัติขององค์ประกอบในออบเจ็กต์ autofillStatuses โดยอิงตามสถานะปัจจุบันและสถานะก่อนหน้า

เช่น หากสถานะก่อนหน้าคือ AUTOFILLED และตอนนี้ช่องไม่ได้มีการป้อนข้อความอัตโนมัติ (นั่นคือไม่มีคลาส :autofill) หมายความว่ามีการอัปเดตช่องด้วยตนเองหลังจากป้อนข้อความอัตโนมัติ ระบบจึงอัปเดตสถานะเป็น AUTOFILLED_THEN_MODIFIED

// Add event listener to all fields to update autofill status
function initializeChangeObserver(formElement) {
  const allFieldsAsArray = getAllFieldsAsArray(formElement);
  allFieldsAsArray.forEach((fieldElement) => {
    fieldElement.addEventListener('change', () => {
      updateAutofillStatus(formElement, fieldElement);
    });
  });
}

// Update autofill status
function updateAutofillStatus(formElement, fieldElement) {
  const isEmpty = checkIsEmpty(fieldElement);
  const allAutofilledFields = getAllAutofilledFields(formElement);
  const isAutofilled = checkIsAutofilled(allAutofilledFields, fieldElement);
  const previousAutofillStatus = autofillStatuses[fieldElement.id];
  if (isEmpty) {
    autofillStatuses[fieldElement.id] = EMPTY;
    // NOTE: if (previousAutofillStatus === AUTOFILLED), the field has just been emptied manually. Autofill can't empty fields.
  } else {
    if (isAutofilled) {
      autofillStatuses[fieldElement.id] = AUTOFILLED;
    } else {
      if (
        previousAutofillStatus === ONLY_MANUAL ||
        previousAutofillStatus === EMPTY
      ) {
        // NOTE: ONLY_MANUAL is only used for fields where autofilled was *never* used. A field where autofilled was used will be AUTOFILLED_THEN_MODIFIED, even if the user has completely retyped the whole value
        autofillStatuses[fieldElement.id] = ONLY_MANUAL;
      } else if (
        previousAutofillStatus === AUTOFILLED ||
        previousAutofillStatus === AUTOFILLED_THEN_MODIFIED
      ) {
        autofillStatuses[fieldElement.id] = AUTOFILLED_THEN_MODIFIED;
      }
    }
  }
}

initializeChangeObserver(document.getElementById('form'));

ส่งผลลัพธ์ไปยังเซิร์ฟเวอร์

เมื่อส่งแบบฟอร์ม ให้ส่งออบเจ็กต์ autofillStatuses ไปยังเซิร์ฟเวอร์ ตัวอย่างเช่น สําหรับแบบฟอร์มที่อยู่ คุณจะได้รับข้อมูลต่อไปนี้ในเซิร์ฟเวอร์

{
    "name": "only-manual",
    "street-address": "only-manual",
    "postal-code": "autofilled-then-modified",
    "city": "autofilled",
    "country": "autofilled"
}
การสาธิตเครื่องมือตรวจสอบการป้อนข้อความอัตโนมัติ: พื้นที่แสดงสถานะการป้อนข้อความอัตโนมัติต่างๆ
พื้นที่แสดงสถานะการป้อนข้อความอัตโนมัติของช่องต่างๆ ใช้สำหรับการสาธิตเท่านั้น

ขั้นตอนที่ 2: วิเคราะห์ผลลัพธ์

รวมออบเจ็กต์ autofillStatuses ที่คุณได้รับจากผู้ใช้หลายคนและวิเคราะห์แนวโน้มของข้อมูล

ก่อนอื่น ให้ดูข้อมูลเชิงลึกเกี่ยวกับการใช้งานการป้อนข้อความอัตโนมัติโดยรวม ผู้ใช้กี่เปอร์เซ็นต์ที่ใช้การป้อนข้อความอัตโนมัติของเบราว์เซอร์เพื่อกรอกข้อมูลในช่องอย่างน้อย 1 ช่อง

จากนั้นคุณก็สามารถเจาะลึกแต่ละช่องได้ เช่น คุณสังเกตเห็นว่าผู้ใช้ส่วนใหญ่ไม่ได้ป้อนข้อมูลในช่องบางช่องโดยอัตโนมัติ ซึ่งควรที่จะรองรับการป้อนข้อมูลอัตโนมัติ ตอนนี้คุณตรวจสอบสาเหตุที่เป็นไปได้ได้แล้ว

  • ช่อง <label> ไม่ชัดเจนใช่ไหม มีคำแนะนำหรือตัวยึดตำแหน่งที่อาจทำให้เข้าใจผิดไหม
  • คุณใช้ไวยากรณ์ที่ถูกต้องสำหรับค่า autocomplete ไหม ปัญหาที่พบบ่อยคือ <input autocomplete="first-name"> ซึ่งเบราว์เซอร์จะไม่กรอกเนื่องจากค่าที่เหมาะสมคือ "given-name"

บทสรุป

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

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

ตรวจสอบแหล่งข้อมูลเกี่ยวกับการป้อนข้อความอัตโนมัติทั้งหมด