Formlarınızda tarayıcı otomatik doldurma özelliğini ölçme

Maud Nalpas
Maud Nalpas

Yayınlanma tarihi: 20 Kasım 2024

E-ticaretin başarısı, sorunsuz bir ödeme sürecine bağlıdır. Formlar dönüşümler için çok önemlidir. Kullanıcı deneyimini optimize etmek için kullanıcıların formlarınızla nasıl etkileşimde bulunduğunu anlamanız önemlidir. Otomatik doldurma bu süreçte önemli bir rol oynar.

Chrome'daki otomatik doldurma özelliğinin demosu.
Chrome'da otomatik doldurma

Sorunsuz bir otomatik doldurma deneyimi, dönüşümlerin artmasına, form gönderme işlemlerinin hızlanmasına, formların tam doldurulmadan bırakılmasının azalmasına ve kullanıcı memnuniyetinin artmasına yol açabilir.

Ancak sitenizde otomatik doldurma kullanımı ve engelleri hakkında bilginiz var mı?

Bu kılavuzda, kullanıcıların formlarınızda otomatik doldurma özelliğini nasıl kullandığıyla ilgili verilerin nasıl toplanıp analiz edileceği açıklanmaktadır.

Bu otomatik doldurma analizlerini şu şekilde kullanabilirsiniz:

  • Test yaklaşımınızı gerçek kullanıcı iş akışlarıyla uyumlu hale getirin. Otomatik doldurma kullanım analizleri, kullanıcılarınızın otomatik doldurmaya büyük ölçüde güvendiğini gösteriyorsa otomatik doldurma testini iş akışlarınıza dahil etmenin çok önemli olduğunu bilirsiniz.
  • Gerileme tespit edin. Form kullanıcı deneyimini etkileyen dağıtımlar arasında ayrı alanlara ait otomatik doldurma kullanım sinyallerini karşılaştırın. Büyük farklılıklar, bir otomatik doldurma davranışının gerilediği anlamına gelebilir.
  • Otomatik doldurmaya uygun uygulamanızın beklendiği gibi çalıştığından emin olun. Kullanıcıların, otomatik doldurma özelliğini kullanmalarını tercih ettiğiniz alanları manuel olarak doldurduğu trendleri algılama

Demo ve kod

Demomuzu inceleyin ve GitHub'daki kodu inceleyin.

Otomatik doldurma gözlemcisinin demosu.
Her form alanındaki kullanıcı işlemlerini programatik olarak gözlemlemek için demo kodunu kullanın (boş bırakın, manuel olarak doldurun, otomatik doldurma ile doldurun veya otomatik doldurma ile doldurup alanı değiştirin). Deneyin.

Deneyebileceğiniz bazı yöntemler:

  • Tüm alanları otomatik olarak doldurun.
  • Bir alanı otomatik olarak doldurup manuel olarak boşaltma
  • Bir alanı otomatik olarak doldurup manuel olarak değiştirebilirsiniz.
  • Bir alanı tamamen manuel olarak doldurun.
  • Bir alanı boş bırakın.

Tarayıcı desteği

Demo, en son cihaz ve tarayıcı sürümlerinde çalışır. Bu yöntem, tarayıcılarda iyi desteklenen :autofill CSS sözde sınıfını algılamaya dayanır.

1. adım: Otomatik doldurma verilerini toplayın

Otomatik doldurma durumlarını tanımlama

Öncelikle, ilgilendiğiniz olası otomatik doldurma alanı durumlarını tanımlayın:

  • EMPTY: Kullanıcı alanı boş bırakır.
  • AUTOFILLED: Kullanıcı, alanı yalnızca otomatik doldurma özelliğini kullanarak doldurur.
  • AUTOFILLED_THEN_MODIFIED: Kullanıcı önce alanı otomatik doldurma özelliğini kullanarak doldurur, ardından otomatik doldurulan değeri manuel olarak düzenler. Örneğin, kullanıcı adresini ve iletişim bilgilerini otomatik doldurur ancak manuel olarak farklı bir telefon numarası girer.
  • ONLY_MANUAL: Kullanıcı alanı tamamen manuel olarak doldurur.
// Possible values for autofill statuses
const EMPTY = 'empty';
const AUTOFILLED = 'autofilled';
const AUTOFILLED_THEN_MODIFIED = 'autofilled-then-modified';
const ONLY_MANUAL = 'only-manual';

Hizmet işlevlerini uygulama

Şimdi bu kodun temel işlevini uygulama zamanı: Bir alanın otomatik olarak doldurulup doldurulmadığını kontrol etme. Bu işlem iki işlev kullanır:

  • getAllAutofilledFields, belirli bir formdaki tüm <input> ve <select> öğelerini inceler ve :autofill CSS sözde sınıfının olup olmadığını kontrol eder. Otomatik olarak doldurulmuş öğelerin listesini döndürür.
  • checkIsAutofilled daha sonra belirli bir öğenin bu listede olup olmadığını kontrol eder.
// 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);

Ayrıca, bir alanın boş olup olmadığını kontrol etmek için bir yardımcı program işlevine ihtiyacınız vardır.

// 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;
}

Otomatik doldurma durumunu başlatma

Her alanın otomatik doldurma durumunu depolamak için autofillStatuses adlı bir genel nesne oluşturun.

Formdaki tüm id alanlarını toplayın ve her alanın durumunu EMPTY olarak başlatın.

// 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, ilgilendiğiniz tüm alan öğelerini toplamak için bir yardımcı program işlevi kullanır:

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

Değişiklikleri gözlemleme

Artık otomatik doldurma davranışını gözlemlemeye hazırsınız.

Her form öğesine bir değişiklik etkinliği işleyici ekleyin. Bir değişiklik olduğunda, checkIsAutofilled yardımcı işlevi kullanılarak öğenin o anda otomatik olarak doldurulup doldurulmadığı kontrol edilir. Ardından, öğenin otomatik doldurma durumu, mevcut ve önceki durumlara göre autofillStatuses nesnesinde güncellenir.

Örneğin, önceki durum AUTOFILLED ise ve alan artık otomatik olarak doldurulmamışsa (yani :autofill sınıfına sahip değilse) alan, otomatik doldurma işleminden sonra manuel olarak güncellenmiştir. Bu nedenle durum AUTOFILLED_THEN_MODIFIED olarak güncellenir.

// 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'));

Sonuçları sunucunuza gönderme

Form gönderildiğinde autofillStatuses nesnenizi sunucuya gönderin. Örneğin, bir adres formunda sunucu şu verileri alır:

{
    "name": "only-manual",
    "street-address": "only-manual",
    "postal-code": "autofilled-then-modified",
    "city": "autofilled",
    "country": "autofilled"
}
Otomatik doldurma gözlemcisi demosu: Çeşitli otomatik doldurma durumlarının gösterildiği alan.
Çeşitli alanların otomatik doldurma durumlarının gösterildiği alan. Yalnızca demo amaçlıdır.

2. adım: Sonuçları analiz edin

Birçok kullanıcıdan aldığınız autofillStatuses nesnelerini toplayın ve verilerdeki trendleri analiz edin.

Öncelikle, genel otomatik doldurma kullanımıyla ilgili analizlere göz atın: Kullanıcılarınızın yüzde kaçı en az bir alanı doldurmak için tarayıcı otomatik doldurma özelliğini kullanıyor?

Ardından, her bir alanı ayrıntılı olarak inceleyebilirsiniz. Örneğin, kullanıcıların önemli bir kısmının, otomatik doldurma uyumlu olması gereken belirli alanları otomatik olarak doldurmadığını gözlemleyebilirsiniz. Artık olası nedenleri inceleyebilirsiniz.

  • <label> alanı net değil mi? Yanıltıcı olabilecek ipuçları veya yer tutucular var mı?
  • autocomplete değeri için doğru söz dizimini kullandınız mı? Yaygın bir sorun, <input autocomplete="first-name"> değerinin "given-name" olması nedeniyle tarayıcıların doldurmadığı <input autocomplete="first-name"> değeridir.

Sonuç

Otomatik doldurma davranışını anlayıp bundan yararlanarak web sitenizdeki kullanıcı deneyimini iyileştirebilirsiniz. Kullanıcıların formlarınızla nasıl etkileşime geçtiğine dair değerli analizler elde etmek ve iyileştirilmesi gereken alanları belirlemek için bu kılavuzda açıklanan teknikleri uygulayın.

Otomatik doldurma özelliğinin, kullanıcı yolculuğunu kolaylaştıran güçlü bir araç olduğunu unutmayın. Formlarınızı otomatik doldurma için optimize etmek, ziyaretçilerinize daha kullanıcı dostu bir deneyim sunabilir.

Tüm otomatik doldurma kaynaklarımızı inceleyin.