Ngày xuất bản: 20 tháng 11 năm 2024
Thành công trong thương mại điện tử phụ thuộc vào quy trình thanh toán liền mạch. Biểu mẫu đóng vai trò quan trọng đối với lượt chuyển đổi. Để tối ưu hoá trải nghiệm người dùng, bạn cần hiểu cách người dùng tương tác với biểu mẫu. Tính năng tự động điền đóng vai trò quan trọng trong quá trình này.
Trải nghiệm tự động điền mượt mà có thể giúp tăng số lượt chuyển đổi, tăng tốc độ gửi biểu mẫu, giảm số lượt bỏ ngang biểu mẫu và cải thiện mức độ hài lòng của người dùng.
Tuy nhiên, bạn có biết mức độ sử dụng và sự phiền hà khi sử dụng tính năng tự động điền trên trang web của mình không?
Hướng dẫn này giải thích cách thu thập và phân tích dữ liệu về cách người dùng sử dụng tính năng tự động điền trong biểu mẫu.
Sau đây là cách bạn có thể sử dụng các thông tin chi tiết về tính năng tự động điền này:
- Điều chỉnh phương pháp kiểm thử cho phù hợp với quy trình làm việc thực tế của người dùng. Nếu thông tin chi tiết về mức sử dụng tính năng tự động điền cho thấy người dùng của bạn phụ thuộc nhiều vào tính năng này, thì bạn cần phải tích hợp quy trình kiểm thử tính năng tự động điền vào quy trình làm việc của mình.
- Xác định các trường hợp hồi quy. So sánh các tín hiệu về mức sử dụng tính năng tự động điền trên từng trường giữa các lần triển khai ảnh hưởng đến trải nghiệm người dùng của biểu mẫu. Mức biến động lớn có thể có nghĩa là hành vi tự động điền đã hồi quy.
- Đảm bảo cách triển khai tính năng tự động điền của bạn hoạt động như mong đợi. Phát hiện xu hướng mà người dùng có vẻ điền các trường theo cách thủ công mà bạn muốn họ sử dụng tính năng tự động điền.
Bản minh hoạ và mã
Thử nghiệm với bản minh hoạ của chúng tôi và tìm hiểu mã trên GitHub.
Các việc cần thử:
- Tự động điền tất cả các trường.
- Tự động điền một trường, sau đó xoá trường đó theo cách thủ công.
- Tự động điền một trường, sau đó sửa đổi trường đó theo cách thủ công.
- Điền hoàn toàn một trường theo cách thủ công.
- Để trống một trường.
Hỗ trợ trình duyệt
Bản minh hoạ này hoạt động trên các thiết bị và phiên bản trình duyệt mới nhất. Tính năng này dựa vào việc phát hiện lớp giả CSS :autofill được hỗ trợ tốt trên các trình duyệt.
Bước 1: Thu thập dữ liệu tự động điền
Xác định trạng thái tự động điền
Trước tiên, hãy xác định các trạng thái trường tự động điền mà bạn quan tâm:
EMPTY
: Người dùng để trống trường.AUTOFILLED
: Người dùng chỉ điền vào trường bằng tính năng tự động điền.AUTOFILLED_THEN_MODIFIED
: Trước tiên, người dùng điền vào trường bằng tính năng tự động điền, sau đó chỉnh sửa giá trị được tự động điền theo cách thủ công. Ví dụ: người dùng tự động điền địa chỉ và thông tin liên hệ, nhưng nhập số điện thoại khác theo cách thủ công.ONLY_MANUAL
: Người dùng điền toàn bộ trường theo cách thủ công.
// Possible values for autofill statuses
const EMPTY = 'empty';
const AUTOFILLED = 'autofilled';
const AUTOFILLED_THEN_MODIFIED = 'autofilled-then-modified';
const ONLY_MANUAL = 'only-manual';
Triển khai các hàm tiện ích
Bây giờ, đã đến lúc triển khai chức năng cốt lõi của mã này: kiểm tra xem một trường có vừa được tự động điền hay không. Về cơ bản, hàm này sử dụng hai hàm:
getAllAutofilledFields
xem xét tất cả các phần tử<input>
và<select>
trong một biểu mẫu nhất định, đồng thời kiểm tra xem có lớp giả CSS:autofill
hay không. Hàm này sẽ xuất ra danh sách các phần tử đã được tự động điền.- Sau đó,
checkIsAutofilled
sẽ kiểm tra xem một phần tử cụ thể có thuộc danh sách này hay không.
// 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);
Ngoài ra, bạn cần một hàm tiện ích để kiểm tra xem một trường có trống hay không.
// 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;
}
Khởi chạy trạng thái tự động điền
Tạo một đối tượng toàn cục, autofillStatuses
, để lưu trữ trạng thái tự động điền của từng trường.
Thu thập tất cả id
trường từ biểu mẫu và khởi chạy trạng thái của từng trường thành
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'));
Để thu thập tất cả các phần tử trường mà bạn quan tâm, initializeAutofillStatuses
sử dụng một hàm tiện ích:
// Collect all field elements for a given form
function getAllFieldsAsArray(formElement) {
return Array.from(formElement.querySelectorAll('input, select'));
}
Quan sát các thay đổi
Giờ đây, mọi thứ đã sẵn sàng để quan sát hành vi tự động điền.
Đính kèm trình nghe sự kiện thay đổi vào từng phần tử biểu mẫu. Khi có thay đổi, hàm này sẽ kiểm tra xem phần tử hiện có đang được tự động điền hay không bằng cách sử dụng hàm tiện ích checkIsAutofilled
. Sau đó, trạng thái tự động điền của phần tử sẽ được cập nhật trong đối tượng autofillStatuses
, dựa trên trạng thái hiện tại và trước đó.
Ví dụ: nếu trạng thái trước đó là AUTOFILLED
và trường hiện không được tự động điền (tức là không có lớp :autofill
), thì điều đó có nghĩa là trường đã được cập nhật theo cách thủ công sau khi tự động điền. Vì vậy, trạng thái được cập nhật thành 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'));
Gửi kết quả đến máy chủ
Sau khi gửi biểu mẫu, hãy gửi đối tượng autofillStatuses
đến máy chủ. Ví dụ: đối với biểu mẫu địa chỉ, bạn sẽ nhận được dữ liệu sau trên máy chủ:
{
"name": "only-manual",
"street-address": "only-manual",
"postal-code": "autofilled-then-modified",
"city": "autofilled",
"country": "autofilled"
}
Bước 2: Phân tích kết quả
Tổng hợp các đối tượng autofillStatuses
mà bạn nhận được trên nhiều người dùng và phân tích xu hướng trong dữ liệu.
Trước tiên, hãy xem thông tin chi tiết về mức sử dụng tính năng tự động điền tổng thể: bao nhiêu phần trăm người dùng sử dụng tính năng tự động điền của trình duyệt để điền ít nhất một trường?
Sau đó, bạn có thể tìm hiểu chi tiết về từng trường. Ví dụ: bạn nhận thấy một phần đáng kể người dùng không tự động điền một số trường nhất định phải tương thích với tính năng tự động điền. Giờ đây, bạn có thể điều tra các nguyên nhân có thể xảy ra.
- Trường
<label>
có rõ ràng không? Có gợi ý hoặc phần giữ chỗ nào có thể gây hiểu lầm không? - Bạn đã sử dụng đúng cú pháp cho giá trị tự động hoàn thành chưa? Một vấn đề thường gặp là
<input autocomplete="first-name">
, trình duyệt không điền giá trị này vì giá trị thích hợp là"given-name"
.
Kết luận
Bằng cách hiểu và tận dụng hành vi tự động điền, bạn có thể nâng cao trải nghiệm người dùng trên trang web của mình. Triển khai các kỹ thuật được nêu trong hướng dẫn này để thu thập thông tin chi tiết có giá trị về cách người dùng tương tác với biểu mẫu của bạn và xác định những khía cạnh cần cải thiện.
Hãy nhớ rằng tính năng tự động điền là một công cụ hiệu quả để đơn giản hoá hành trình của người dùng. Việc tối ưu hoá biểu mẫu để tự động điền có thể mang đến trải nghiệm thân thiện hơn cho người dùng.
Xem tất cả tài nguyên tự động điền của chúng tôi.