Dipublikasikan: 20 November 2024
Kesuksesan e-commerce bergantung pada proses checkout yang lancar. Formulir sangat penting untuk konversi. Untuk mengoptimalkan pengalaman pengguna, penting untuk memahami cara pengguna berinteraksi dengan formulir Anda. Isi otomatis memainkan peran penting dalam proses ini.
Pengalaman isi otomatis yang lancar dapat meningkatkan konversi, pengiriman formulir yang lebih cepat, mengurangi pengabaian formulir, dan meningkatkan kepuasan pengguna.
Namun, apakah Anda memiliki visibilitas terkait penggunaan dan hambatan isi otomatis di situs Anda?
Panduan ini menjelaskan cara mengumpulkan dan menganalisis data tentang cara pengguna menggunakan isi otomatis di formulir Anda.
Berikut cara menggunakan insight isi otomatis ini:
- Selaraskan pendekatan pengujian Anda dengan alur kerja pengguna yang sebenarnya. Jika insight penggunaan isi otomatis menunjukkan bahwa pengguna sangat mengandalkan isi otomatis, Anda tahu bahwa penting untuk menyertakan pengujian isi otomatis ke dalam alur kerja Anda.
- Mengidentifikasi regresi. Bandingkan sinyal penggunaan isi otomatis di setiap kolom antara deployment yang memengaruhi UX formulir. Variasi yang besar mungkin berarti perilaku isi otomatis telah mengalami regresi.
- Pastikan penerapan yang kompatibel dengan isi otomatis berfungsi seperti yang diharapkan. Mendeteksi tren saat pengguna tampaknya mengisi kolom secara manual yang sebaiknya diisi otomatis.
Demo dan kode
Coba demo kami dan pelajari kode di GitHub.
Hal-hal yang sebaiknya dicoba:
- Isi otomatis semua kolom.
- Isi otomatis kolom, lalu kosongkan secara manual.
- Isi otomatis kolom, lalu ubah secara manual.
- Isi kolom sepenuhnya secara manual.
- Biarkan kolom kosong.
Dukungan browser
Demo ini berfungsi di berbagai perangkat dan versi browser terbaru. Fungsi ini mengandalkan deteksi pseudo-class CSS :autofill, yang didukung dengan baik di seluruh browser.
Langkah 1: Kumpulkan data isi otomatis
Menentukan status isi otomatis
Pertama, tentukan kemungkinan status kolom isi otomatis yang Anda minati:
EMPTY
: Pengguna membiarkan kolom kosong.AUTOFILLED
: Pengguna mengisi kolom hanya menggunakan isi otomatis.AUTOFILLED_THEN_MODIFIED
: Pengguna pertama-tama mengisi kolom menggunakan isi otomatis, lalu mengedit nilai yang diisi otomatis secara manual. Misalnya, pengguna mengisi otomatis alamat dan detail kontaknya, tetapi memasukkan nomor telepon yang berbeda secara manual.ONLY_MANUAL
: Pengguna mengisi kolom sepenuhnya secara manual.
// Possible values for autofill statuses
const EMPTY = 'empty';
const AUTOFILLED = 'autofilled';
const AUTOFILLED_THEN_MODIFIED = 'autofilled-then-modified';
const ONLY_MANUAL = 'only-manual';
Mengimplementasikan fungsi utilitas
Sekarang saatnya menerapkan fungsi inti kode ini: memeriksa apakah kolom baru saja diisi otomatis. Di balik layar, fungsi ini menggunakan dua fungsi:
getAllAutofilledFields
melihat semua elemen<input>
dan<select>
dalam formulir tertentu, dan memeriksa keberadaan pseudo-class CSS:autofill
. Fungsi ini menghasilkan daftar elemen yang telah diisi otomatis.checkIsAutofilled
kemudian memeriksa apakah elemen tertentu merupakan bagian dari daftar ini.
// 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);
Selain itu, Anda memerlukan fungsi utilitas untuk memeriksa apakah kolom kosong.
// 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;
}
Melakukan inisialisasi status isi otomatis
Buat objek global, autofillStatuses
, untuk menyimpan status isi otomatis
setiap kolom.
Kumpulkan semua id
kolom dari formulir, dan lakukan inisialisasi status setiap kolom ke
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'));
Untuk mengumpulkan semua elemen kolom yang Anda minati,
initializeAutofillStatuses
menggunakan fungsi utilitas:
// Collect all field elements for a given form
function getAllFieldsAsArray(formElement) {
return Array.from(formElement.querySelectorAll('input, select'));
}
Mengamati perubahan
Sekarang semuanya siap untuk mengamati perilaku isi otomatis.
Lampirkan pemroses peristiwa perubahan ke setiap elemen formulir. Saat perubahan terjadi, fungsi ini akan memeriksa apakah elemen saat ini diisi otomatis menggunakan fungsi utilitas checkIsAutofilled
. Kemudian, status isi otomatis elemen
diperbarui dalam objek autofillStatuses
, berdasarkan status
saat ini dan sebelumnya.
Misalnya, jika status sebelumnya adalah AUTOFILLED
dan kolom sekarang belum
diisi otomatis (yaitu, tidak memiliki class :autofill
), artinya
kolom diperbarui secara manual setelah isi otomatis. Jadi, status diperbarui menjadi
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'));
Mengirim hasil ke server Anda
Setelah pengiriman formulir, kirim objek autofillStatuses
ke server. Misalnya, untuk formulir alamat, Anda akan menerima data berikut di
server:
{
"name": "only-manual",
"street-address": "only-manual",
"postal-code": "autofilled-then-modified",
"city": "autofilled",
"country": "autofilled"
}
Langkah 2: Analisis hasilnya
Gabungkan objek autofillStatuses
yang Anda terima dari banyak pengguna dan
analisis tren dalam data.
Pertama, lihat insight tentang penggunaan isi otomatis secara keseluruhan: berapa persentase pengguna Anda yang menggunakan isi otomatis browser untuk mengisi setidaknya satu kolom?
Kemudian, Anda dapat mempelajari setiap kolom. Misalnya, Anda mengamati bahwa sebagian besar pengguna tidak mengisi otomatis kolom tertentu yang seharusnya kompatibel dengan isi otomatis. Sekarang Anda dapat menyelidiki kemungkinan alasannya.
- Apakah kolom
<label>
tidak jelas? Apakah ada petunjuk atau placeholder yang mungkin menyesatkan? - Sudahkah Anda menggunakan sintaksis yang benar untuk nilai
autocomplete? Masalah umum adalah
<input autocomplete="first-name">
, yang tidak diisi oleh browser karena nilai yang tepat adalah"given-name"
.
Kesimpulan
Dengan memahami dan memanfaatkan perilaku isi otomatis, Anda dapat meningkatkan pengalaman pengguna di situs. Terapkan teknik yang diuraikan dalam panduan ini untuk mendapatkan insight berharga tentang cara pengguna berinteraksi dengan formulir Anda dan mengidentifikasi area yang perlu ditingkatkan.
Ingat, isi otomatis adalah alat yang efektif untuk menyederhanakan perjalanan pengguna. Mengoptimalkan formulir untuk isi otomatis dapat menciptakan pengalaman yang lebih mudah digunakan bagi pengunjung.
Tinjau semua referensi isi otomatis kami.