เผยแพร่: 20 พฤศจิกายน 2024
ความสำเร็จของอีคอมเมิร์ซขึ้นอยู่กับกระบวนการชำระเงินที่ราบรื่น แบบฟอร์มมีความสําคัญอย่างยิ่งสําหรับ Conversion คุณต้องเข้าใจวิธีที่ผู้ใช้โต้ตอบกับแบบฟอร์มเพื่อเพิ่มประสิทธิภาพประสบการณ์ของผู้ใช้ การป้อนข้อความอัตโนมัติมีบทบาทสำคัญในกระบวนการนี้
ประสบการณ์การป้อนข้อความอัตโนมัติที่ราบรื่นอาจทําให้ 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"
บทสรุป
การทำความเข้าใจและใช้ประโยชน์จากลักษณะการเติมข้อความอัตโนมัติจะช่วยปรับปรุงประสบการณ์ของผู้ใช้ในเว็บไซต์ ใช้เทคนิคที่ระบุไว้ในคู่มือนี้เพื่อให้ได้ข้อมูลเชิงลึกที่มีประโยชน์เกี่ยวกับวิธีที่ผู้ใช้โต้ตอบกับแบบฟอร์มและระบุจุดที่ต้องปรับปรุง
โปรดทราบว่าการป้อนข้อความอัตโนมัติเป็นเครื่องมือที่มีประสิทธิภาพในการปรับปรุงเส้นทางของผู้ใช้ การเพิ่มประสิทธิภาพแบบฟอร์มสำหรับการป้อนข้อความอัตโนมัติสามารถสร้างประสบการณ์ที่ใช้งานง่ายขึ้นให้กับผู้เข้าชม
ตรวจสอบแหล่งข้อมูลเกี่ยวกับการป้อนข้อความอัตโนมัติทั้งหมด