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.
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.
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"
}
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.