Mengukur isi otomatis browser di formulir Anda

Maud Nalpas
Maud Nalpas

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.

Demo isi otomatis di Chrome.
Isi Otomatis di Chrome

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.

Demo pengamat isi otomatis.
Gunakan kode demo untuk mengamati tindakan pengguna secara terprogram di setiap kolom formulir (biarkan kosong, isi secara manual, isi dengan isi otomatis, atau isi dengan isi otomatis, lalu ubah kolom). Coba.

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"
}
Demo observer isi otomatis: area tampilan untuk berbagai status isi otomatis.
Area tampilan untuk status isi otomatis berbagai kolom. Hanya untuk tujuan demo.

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.