Ödeme ve adres formu en iyi uygulamaları

Kullanıcılarınızın adres ve ödeme formlarını mümkün olduğunca hızlı ve kolay bir şekilde doldurmasına yardımcı olarak dönüşümleri artırın.

Sam Dutton

İyi tasarlanmış formlar kullanıcılara yardımcı olur ve dönüşüm oranlarını artırır. Küçük bir düzeltme büyük bir fark yaratabilir.

Aşağıda, tüm en iyi uygulamaları gösteren basit bir ödeme formu örneği verilmiştir:

Aşağıda, tüm en iyi uygulamaları gösteren basit bir adres formu örneği verilmiştir:

Yapılacaklar listesi

Anlamlı HTML kullanma

İş için oluşturulan öğeleri ve özellikleri kullanın:

  • <form>, <input>, <label> ve <button>
  • type, autocomplete ve inputmode

Bunlar, yerleşik tarayıcı işlevlerini etkinleştirir, erişilebilirliği iyileştirir ve işaretlemenize anlam katar.

HTML öğelerini amacına uygun şekilde kullanma

Formunuzu <form> içine yerleştirin

<input> öğelerinizi bir <form> içine sarmakla uğraşmayıp veri gönderme işlemini tamamen JavaScript ile halletmek isteyebilirsiniz.

Bunu yapmayın!

HTML <form>, tüm modern tarayıcılarda güçlü bir yerleşik özellikler grubuna erişmenizi sağlar ve sitenizi ekran okuyucular ile diğer asistan cihazları için erişilebilir hale getirmenize yardımcı olabilir. <form> ayrıca, sınırlı JavaScript desteği olan eski tarayıcılar için temel işlevler oluşturmayı ve kodunuzda bir sorun olsa bile form gönderimini etkinleştirmeyi kolaylaştırır. Bu, JavaScript'i devre dışı bırakan az sayıda kullanıcı için de geçerlidir.

Kullanıcı girişi için birden fazla sayfa bileşeniniz varsa her birini kendi <form> öğesine yerleştirdiğinizden emin olun. Örneğin, aynı sayfada arama ve kaydolma işlevleri varsa her birini kendi <form> öğesine yerleştirin.

Öğeleri etiketlemek için <label> kullanın

<input>, <select> veya <textarea> etiketlemek için <label> kullanın.

Etiketin for özelliğine girişin id özelliğiyle aynı değeri vererek etiketi bir girişle ilişkilendirin.

<label for="address-line1">Address line 1</label>
<input id="address-line1" …>

Tek bir giriş için tek bir etiket kullanın. Birden fazla girişi tek bir etiketle etiketlemeye çalışmayın. Bu, tarayıcılar ve ekran okuyucular için en iyi yöntemdir. Bir etikete dokunulduğunda veya tıklandığında odak, etiketin ilişkili olduğu girişe taşınır ve ekran okuyucular, etiket veya etiketin girişi odaklandığında etiket metnini okur.

Düğmeleri faydalı hale getirme

Düğmeler için <button> kullanın. <input type="submit"> öğesini de kullanabilirsiniz ancak div veya düğme işlevi gören başka bir rastgele öğe kullanmayın. Düğme öğeleri, erişilebilir davranış, yerleşik form gönderme işlevi sağlar ve kolayca stillendirilebilir.

Her form gönderme düğmesine, ne yaptığını belirten bir değer verin. Ödeme işlemine giden her adımda, ilerlemeyi gösteren ve bir sonraki adımı netleştiren açıklayıcı bir harekete geçirici mesaj kullanın. Örneğin, teslimat adresi formunuzdaki gönder düğmesini Devam veya Kaydet yerine Ödemeye Geç olarak etiketleyin.

Kullanıcı gönder düğmesine dokunduktan veya tıkladıktan sonra (özellikle de kullanıcı ödeme yaparken veya sipariş verirken) düğmeyi devre dışı bırakabilirsiniz. Birçok kullanıcı, düzgün çalışsa bile düğmeleri tekrar tekrar tıklar. Bu durum, ödeme işlemini bozabilir ve sunucu yükünü artırabilir.

const form = document.querySelector('form');
const submitButton = form.querySelector('button[type="submit"]');

form.addEventListener('submit', () => {
  submitButton.disabled = true;
  submitButton.textContent = 'Placing order…';
});

Öte yandan, eksiksiz ve geçerli kullanıcı girişini bekleyen bir gönder düğmesini devre dışı bırakmayın. Örneğin, bir şey eksik veya geçersiz olduğu için Adresi Kaydet düğmesini devre dışı bırakmayın. Bu durum kullanıcıya yardımcı olmaz. Kullanıcı, düğmeye dokunmaya veya tıklamaya devam edebilir ve düğmenin bozuk olduğunu düşünebilir. Bunun yerine, kullanıcılar geçersiz veriler içeren bir form göndermeye çalışırsa onlara neyin yanlış gittiğini ve bunu düzeltmek için ne yapmaları gerektiğini açıklayın. Bu, özellikle veri girişinin daha zor olduğu ve eksik veya geçersiz form verilerinin, kullanıcı formu göndermeye çalıştığı sırada kullanıcının ekranında görünmeyebileceği mobil cihazlarda önemlidir.

HTML özelliklerinden en iyi şekilde yararlanma

Kullanıcıların veri girmesini kolaylaştırma

Mobil cihazlarda doğru klavyeyi sağlamak ve tarayıcı tarafından temel yerleşik doğrulamayı etkinleştirmek için uygun giriş type özelliğini kullanın.

Örneğin, e-posta adresleri için type="email", telefon numaraları için type="tel" kullanın.

E-posta adresi girmeye uygun bir klavye (type=email kullanılarak) ve telefon numarası girmeye uygun bir klavye (type=tel kullanılarak) gösteren iki Android telefon ekran görüntüsü.
E-posta ve telefon için uygun klavyeler.

Tarihler için özel select öğeleri kullanmaktan kaçının. Doğru şekilde uygulanmazlarsa otomatik doldurma deneyimini bozarlar ve eski tarayıcılarda çalışmazlar. Doğum yılı gibi sayılar için select yerine input öğesi kullanmayı düşünün. Özellikle mobil cihazlarda, rakamları manuel olarak girmek uzun bir açılır listeden seçim yapmaktan daha kolay ve hataya daha az açık olabilir. Mobil cihazlarda doğru klavyenin gösterilmesi için inputmode="numeric" kullanın ve kullanıcının verileri uygun biçimde girmesini sağlamak için metin veya yer tutucuyla doğrulama ve biçim ipuçları ekleyin.

Erişilebilirliği iyileştirmek ve kullanıcıların verileri yeniden girmesini önlemek için otomatik tamamlamayı kullanın.

Uygun autocomplete değerlerinin kullanılması, tarayıcıların verileri güvenli bir şekilde depolayarak ve input, select ve textarea değerlerini otomatik olarak doldurarak kullanıcılara yardımcı olmasını sağlar. Bu, özellikle mobil cihazlarda önemlidir ve yüksek form vazgeçme oranlarını önlemek açısından kritik öneme sahiptir. Otomatik tamamlama, erişilebilirlik açısından da birden fazla avantaj sağlar.

Bir form alanı için uygun bir otomatik tamamlama değeri varsa bunu kullanmanız gerekir. MDN web belgelerinde değerlerin tam listesi ve bunların doğru şekilde nasıl kullanılacağına dair açıklamalar yer alır.

Sabit değerler

Fatura adresi

Varsayılan olarak, fatura adresini teslimat adresiyle aynı olacak şekilde ayarlayın. Fatura adresini bir formda göstermek yerine, fatura adresini düzenlemek için bir bağlantı sağlayarak (veya summary ve details öğelerini kullanarak) görsel karmaşayı azaltın.

Fatura adresini değiştirme bağlantısını gösteren örnek ödeme sayfası.
Faturalandırmayı incelemek için bağlantı ekleyin.

Kullanıcının verileri birden fazla kez girmemesi için kargo adresinde olduğu gibi fatura adresi için de uygun otomatik tamamlama değerlerini kullanın. Farklı bölümlerde aynı ada sahip girişler için farklı değerleriniz varsa otomatik tamamlama özelliklerine bir ön ek kelime ekleyin.

<input autocomplete="shipping address-line1" ...>
<!-- Other fields omitted. -->
<input autocomplete="billing address-line1" ...>

Kullanıcıların doğru verileri girmesine yardımcı olma

"Yanlış bir şey yaptıkları" için müşterileri "azarlamaktan" kaçının. Bunun yerine, sorunları ortaya çıktıkları anda düzeltmelerine yardımcı olarak kullanıcıların formları daha hızlı ve kolay bir şekilde doldurmalarını sağlayın. Ödeme sürecinde müşteriler bir ürün veya hizmet için şirketinize para ödemeye çalışır. Sizin işiniz onlara yardımcı olmaktır, onları cezalandırmak değil.

min, max ve pattern dahil olmak üzere kabul edilebilir değerleri belirtmek için form öğelerine kısıtlama özellikleri ekleyebilirsiniz. Öğenin geçerlilik durumu, öğenin değerinin geçerli olup olmadığına bağlı olarak otomatik şekilde ayarlanır. Bu durum, geçerli veya geçersiz değerlere sahip öğeleri biçimlendirmek için kullanılabilen :valid ve :invalid CSS sözde sınıfları için de geçerlidir.

Örneğin, aşağıdaki HTML, 1900 ile 2020 arasında bir doğum yılı girişi belirtir. type="number" kullanıldığında, giriş değerleri yalnızca min ve max ile belirtilen aralıktaki sayılarla sınırlandırılır. Aralığın dışında bir sayı girmeye çalışırsanız giriş geçersiz bir duruma ayarlanır.

Aşağıdaki örnekte, geçerli bir ödeme kartı numarası sağlamak için pattern="[\d ]{10,30}" kullanılırken boşluklara izin verilir:

Modern tarayıcılar, email veya url türündeki girişler için temel doğrulama da yapar.

Form gönderildiğinde tarayıcılar, sorunlu veya eksik zorunlu değerler içeren alanlara otomatik olarak odaklanır. JavaScript kullanmanız gerekmez.

Masaüstünde Chrome'da geçersiz bir e-posta değeri için tarayıcı istemini ve odağı gösteren bir oturum açma formu.
Tarayıcı tarafından yapılan temel yerleşik doğrulama.

Kullanıcılar gönder düğmesini tıkladığında hata listesi göstermek yerine, verileri girerken satır içi doğrulama yapın ve kullanıcıya geri bildirim sağlayın. Form gönderildikten sonra sunucunuzdaki verileri doğrulamanız gerekiyorsa bulunan tüm sorunları listeleyin ve geçersiz değerler içeren tüm form alanlarını net bir şekilde vurgulayın. Ayrıca, her sorunlu alanın yanında neyin düzeltilmesi gerektiğini açıklayan bir mesaj gösterin. Sık karşılaşılan hatalar için sunucu günlüklerini ve analiz verilerini kontrol edin. Formunuzu yeniden tasarlamanız gerekebilir.

Kullanıcılar veri girerken ve form gönderirken daha güçlü bir doğrulama yapmak için JavaScript de kullanmalısınız. Odaklanmak ve istemleri görüntülemek için yerleşik tarayıcı kullanıcı arayüzünü kullanarak özel doğrulama eklemek üzere Constraint Validation API'yi (yaygın olarak desteklenir) kullanın.

İstemci tarafı form doğrulama başlıklı makaleden daha fazla bilgi edinebilirsiniz.

Kullanıcıların gerekli verileri kaçırmasını önleme

Zorunlu değerlerin girişlerinde required özelliğini kullanın.

Bir form gönderildiğinde modern tarayıcılar otomatik olarak istemde bulunur ve eksik verilerin bulunduğu required alanlarına odaklanır. Zorunlu alanları vurgulamak için :required sözde sınıfını kullanabilirsiniz. JavaScript gerekmez.

Her zorunlu alanın etiketine bir yıldız işareti ekleyin ve formun başına yıldız işaretinin ne anlama geldiğini açıklayan bir not ekleyin.

Ödeme sürecini basitleştirme

Mobil ticaret farkına dikkat edin

Kullanıcılarınızın bir bıkkınlık bütçesi olduğunu düşünün. Bu krediyi tüketirseniz kullanıcılarınız sizi terk eder.

Özellikle mobil cihazlarda sürtüşmeyi azaltmanız ve odaklanmayı sürdürmeniz gerekir. Birçok site mobil cihazlarda daha fazla trafik, masaüstü cihazlarda ise daha fazla dönüşüm elde eder. Bu durum, mobil ticaret açığı olarak bilinir. Müşteriler satın alma işlemini masaüstünde tamamlamayı tercih edebilir ancak mobil dönüşüm oranlarının düşük olması, kullanıcı deneyiminin kötü olmasından da kaynaklanır. Göreviniz, mobil cihazlarda kaybedilen dönüşümleri en aza indirmek ve masaüstü cihazlarda dönüşümleri en üst düzeye çıkarmak. Araştırmalar, daha iyi bir mobil form deneyimi sunma konusunda büyük bir fırsat olduğunu gösteriyor.

En önemlisi, kullanıcıların uzun görünen, karmaşık ve yönlendirme içermeyen formları bırakma olasılığı daha yüksektir. Bu durum özellikle kullanıcılar daha küçük ekranlar kullandığında, dikkatleri dağıldığında veya aceleleri olduğunda geçerlidir. Mümkün olduğunca az veri isteyin.

Giriş yapmadan ödeme seçeneğini varsayılan yapma

Online mağazalarda form doldurma sürecini kolaylaştırmanın en basit yolu, giriş yapmadan ödeme seçeneğini varsayılan olarak ayarlamaktır. Kullanıcıları satın alma işlemi yapmadan önce hesap oluşturmaya zorlamayın. Giriş yapmadan ödeme seçeneğinin sunulmaması, alışveriş sepetini terk etmenin başlıca nedenlerinden biridir.

Ödeme sırasında alışveriş sepetinin terk edilme nedenleri.
Kaynak: baymard.com/checkout-usability

Ödeme işleminden sonra hesap kaydı seçeneği sunabilirsiniz. Bu aşamada, hesap oluşturmak için gereken verilerin çoğuna sahip olduğunuzdan hesap oluşturma işlemi kullanıcı için hızlı ve kolay olur.

Ödeme sürecinin ilerleme durumunu gösterme

İlerleme durumunu göstererek ve bir sonraki adımda ne yapılması gerektiğini netleştirerek ödeme sürecini daha az karmaşık hale getirebilirsiniz. Aşağıdaki videoda, Birleşik Krallık'ta faaliyet gösteren perakendeci johnlewis.com'un bunu nasıl başardığı gösterilmektedir.

Ödeme sürecini gösterin.

İvmeyi korumanız gerekir. Ödeme sürecindeki her adımda, o anda yapılması gerekenleri ve bir sonraki ödeme adımını net bir şekilde açıklayan sayfa başlıkları ve açıklayıcı düğme değerleri kullanın.

Form düğmelerine, bir sonraki adımı gösteren anlamlı adlar verin.

Mobil klavyenin Enter tuşu etiketini ayarlamak için form girişlerinde enterkeyhint özelliğini kullanın. Örneğin, çok sayfalı bir formda enterkeyhint="previous" ve enterkeyhint="next", formdaki son giriş için enterkeyhint="done" ve arama girişi için enterkeyhint="search" kullanın.

Android'deki bir adres formunun iki ekran görüntüsü, enterkeyhint giriş özelliğinin enter tuşu düğme simgesini nasıl değiştirdiğini gösteriyor.
Android'de Enter tuşu düğmeleri: "sonraki" ve "bitti".

enterkeyhint özelliği Android ve iOS'te desteklenir. Daha fazla bilgiyi enterkeyhint açıklayıcısından edinebilirsiniz.

Kullanıcıların ödeme sürecinde kolayca ileri ve geri gitmelerini, son ödeme adımında bile siparişlerini kolayca düzenlemelerini sağlayın. Siparişin yalnızca sınırlı bir özetini değil, tüm ayrıntılarını gösterin. Kullanıcıların ödeme sayfasından ürün miktarlarını kolayca ayarlayabilmesini sağlayın. Ödeme aşamasında önceliğiniz, dönüşüm sürecinin kesintiye uğramasını önlemek olmalıdır.

Dikkat dağıtıcı unsurları kaldırın

Görsel karmaşayı ve ürün tanıtımları gibi dikkat dağıtıcı unsurları kaldırarak potansiyel çıkış noktalarını sınırlayın. Birçok başarılı perakendeci, ödeme sayfasından gezinme ve arama özelliklerini bile kaldırır.

Mobil cihazda johnlewis.com ödeme sayfasındaki ilerleme durumunu gösteren iki ekran görüntüsü. Arama, gezinme ve diğer dikkat dağıtıcı unsurlar kaldırılır.
Ödeme sırasında dikkat dağıtıcı unsurları önlemek için arama, gezinme ve diğer özellikler kaldırıldı.

Yolculuğu odaklı tutun. Bu aşamada kullanıcıların dikkatini başka bir şeye çekmeye çalışmayın.

Mobil cihazda, ÜCRETSİZ ÇIKARTMALAR için dikkat dağıtıcı bir promosyon gösteren ödeme sayfası.
Müşterilerin satın alma işlemlerini tamamlamasını engelleyecek dikkat dağıtıcı unsurlardan kaçının.

Geri gelen kullanıcılar için, görmeleri gerekmeyen verileri gizleyerek ödeme adımlarını daha da basitleştirebilirsiniz. Örneğin, teslimat adresini düz metin olarak (formda değil) gösterin ve kullanıcıların bir bağlantıyı takip ederek adresi değiştirmesine izin verin.

Ödeme sayfasının &quot;Siparişi inceleyin&quot; bölümünde düz metin olarak gösterilen metin ve teslimat adresi, ödeme yöntemi ve fatura adresini değiştirme bağlantıları gösterilmiyor.
Müşterilerin görmesi gerekmeyen verileri gizleyin.

Ad ve adres girmeyi kolaylaştırma

Yalnızca ihtiyacınız olan verileri isteyin

Ad ve adres formlarınızı kodlamaya başlamadan önce hangi verilerin gerekli olduğunu anladığınızdan emin olun. İhtiyacınız olmayan verileri istemeyin. Form karmaşıklığını azaltmanın en basit yolu, gereksiz alanları kaldırmaktır. Bu, müşteri gizliliği açısından da iyidir ve arka uç veri maliyetini ve sorumluluğunu azaltabilir.

Tek bir ad girişi kullanma

Adları, soyadları, unvanları veya adın diğer kısımlarını ayrı ayrı saklamak için geçerli bir nedeniniz yoksa kullanıcılarınızın adlarını tek bir giriş kullanarak girmelerine izin verin. Tek bir ad girişi kullanmak formları daha az karmaşık hale getirir, kesme ve yapıştırma işlemlerine olanak tanır ve otomatik doldurmayı kolaylaştırır.

Özellikle, geçerli bir nedeniniz yoksa ön ek veya unvan (ör. Bayan, Dr. veya Lord) için ayrı bir giriş eklemeyin. Kullanıcılar isterlerse adlarıyla birlikte bunu da yazabilirler. Ayrıca, honorific-prefix otomatik tamamlama şu anda çoğu tarayıcıda çalışmıyor. Bu nedenle, ad ön eki veya unvan için bir alan eklemek, çoğu kullanıcı için adres formu otomatik doldurma deneyimini bozacaktır.

Ad otomatik doldurma özelliğini etkinleştirme

Tam ad için name kullanın:

<input autocomplete="name" ...>

Ad bölümlerini ayırmak için gerçekten iyi bir nedeniniz varsa uygun otomatik tamamlama değerlerini kullandığınızdan emin olun:

  • honorific-prefix
  • given-name
  • nickname
  • additional-name-initial
  • additional-name
  • family-name
  • honorific-suffix

Uluslararası adlara izin verme

Ad girişlerinizi doğrulamak veya ad verileri için izin verilen karakterleri kısıtlamak isteyebilirsiniz. Ancak alfabeler konusunda mümkün olduğunca kısıtlayıcı olmamanız gerekir. Adınızın "geçersiz" olduğunu duymak kaba bir davranış.

Doğrulama için yalnızca Latin karakterleriyle eşleşen normal ifadeler kullanmaktan kaçının. Yalnızca Latin seçeneği, adlarında veya adreslerinde Latin alfabesinde olmayan karakterler bulunan kullanıcıları hariç tutar. Bunun yerine Unicode harf eşleştirmeye izin verin ve arka ucunuzun hem giriş hem de çıkış olarak Unicode'u güvenli bir şekilde desteklediğinden emin olun. Normal ifadelerdeki Unicode, modern tarayıcılar tarafından iyi bir şekilde desteklenir.

Yapılmaması gerekenler
<!-- Names with non-Latin characters (such as Françoise or Jörg) are 'invalid'. -->
<input pattern="[\w \-]+" ...>
Yapılması gerekenler
<!-- Accepts Unicode letters. -->
<input pattern="[\p{L} \-]+" ...>
Yalnızca Latin harf eşleştirmesine kıyasla Unicode harf eşleştirme.

Çeşitli adres biçimlerine izin verme

Adres formu tasarlarken tek bir ülkede bile çok çeşitli adres biçimleri olabileceğini unutmayın. "Normal" adresler hakkında varsayımlarda bulunmamaya dikkat edin. (İkna olmadıysanız Birleşik Krallık Adreslerindeki Tuhaflıklar başlıklı makaleye göz atın.)

Adres formlarını esnek hale getirme

Kullanıcıları, adreslerini sığmayan form alanlarına sıkıştırmaya zorlamayın.

Örneğin, birçok adres bu biçimi kullanmadığından ve eksik veriler tarayıcının otomatik doldurma özelliğini bozabileceğinden, bina numarası ve sokak adının ayrı girişlerde girilmesini zorunlu tutmayın.

Özellikle required adres alanlarına dikkat edin. Örneğin, Birleşik Krallık'taki büyük şehirlerdeki adreslerde ilçe bilgisi yoktur ancak birçok site, kullanıcıları ilçe bilgisi girmeye zorlar.

İki esnek adres satırı kullanmak, çeşitli adres biçimleri için yeterince iyi sonuç verebilir.

<input autocomplete="address-line1" id="address-line1" ...>
<input autocomplete="address-line2" id="address-line2" ...>

Eşleşecek etiketler ekleyin:

<label for="address-line1">
Address line 1 (or company name)
</label>
<input autocomplete="address-line1" id="address-line1" ...>

<label for="address-line2">
Address line 2 (optional)
</label>
<input autocomplete="address-line2" id="address-line2" ...>

Adres için tek bir metin alanı kullanabilirsiniz.

Adresler için en esnek seçenek, tek bir textarea sağlamaktır.

textarea yaklaşımı her adres biçimine uyar ve kesip yapıştırmak için idealdir. Ancak veri gereksinimlerinize uymayabileceğini ve kullanıcıların daha önce yalnızca address-line1 ve address-line2 içeren formlar kullanmışlarsa otomatik doldurma özelliğinden yararlanamayabileceğini unutmayın.

Metin alanı için otomatik tamamlama değeri olarak street-address kullanın.

Adres için tek bir textarea kullanımını gösteren form örneği aşağıda verilmiştir:

Adres formlarınızı uluslararası hale getirme ve yerelleştirme

Adres formlarında, kullanıcılarınızın bulunduğu yere bağlı olarak uluslararasılaştırma ve yerelleştirme konularını dikkate almak özellikle önemlidir.

Adres bölümlerinin adlandırılmasının ve adres biçimlerinin aynı dilde bile farklılık gösterdiğini unutmayın.

    ZIP code: US
 Postal code: Canada
    Postcode: UK
     Eircode: Ireland
         PIN: India

Adresinize uymayan veya beklediğiniz kelimeleri kullanmayan bir formla karşılaşmak rahatsız edici veya kafa karıştırıcı olabilir.

Siteniz için adres formlarını birden fazla yerel ayara göre özelleştirmeniz gerekebilir ancak form esnekliğini en üst düzeye çıkarmak için teknikler kullanmak (yukarıda açıklandığı gibi) yeterli olabilir. Adres formlarınızı yerelleştirmiyorsanız farklı adres biçimleriyle başa çıkmak için temel öncelikleri anladığınızdan emin olun:

  • Adres bölümleri hakkında çok ayrıntılı bilgi vermekten (ör. sokak adı veya ev numarası konusunda ısrar etmekten) kaçının.
  • Mümkün olduğunca alanları required yapmaktan kaçının. Örneğin, birçok ülkedeki adreslerde posta kodu yoktur ve kırsal bölgelerdeki adreslerde sokak veya yol adı bulunmayabilir.
  • Kapsayıcı adlandırma kullanın: "Ülke" yerine "Ülke/bölge"; "Posta kodu" yerine "Posta kodu/posta kodu".

Esnek olun. Yukarıdaki basit adres formu örneği, birçok yerel ayar için "yeterince iyi" çalışacak şekilde uyarlanabilir.

Posta koduyla adres aramadan kaçınma

Bazı web siteleri, posta koduna göre adresleri aramak için bir hizmet kullanır. Bu, bazı kullanım alanları için mantıklı olabilir ancak olası dezavantajların farkında olmanız gerekir.

Posta kodu adres önerisi tüm ülkelerde çalışmaz ve bazı bölgelerde posta kodları çok sayıda potansiyel adres içerebilir.

Posta kodları çok sayıda adres içerebilir.

Kullanıcıların uzun bir adres listesinden seçim yapması zordur. Özellikle de mobil cihaz kullanıyorlarsa, aceleleri varsa veya stres altındalarsa bu daha da zorlaşır. Kullanıcıların otomatik doldurma özelliğinden yararlanmasına ve tek bir dokunuşla veya tıklamayla adreslerinin tamamını girmesine izin vermek daha kolay ve daha az hataya açık olabilir.

Tek bir ad girişi, tek dokunuşla (tek tıklamayla) adres girişini etkinleştirir.

Ödeme formlarını basitleştirme

Ödeme formları, ödeme sürecinin en önemli parçasıdır. Ödeme formunun kötü tasarlanması, alışveriş sepetinin terk edilmesinin yaygın nedenlerinden biridir. Şeytan ayrıntıda gizlidir: Küçük aksaklıklar, özellikle mobil cihazlarda kullanıcıların satın alma işleminden vazgeçmesine neden olabilir. Göreviniz, kullanıcıların veri girmesini mümkün olduğunca kolaylaştıracak formlar tasarlamak.

Kullanıcıların ödeme verilerini yeniden girmesini önleme

Ödeme kartı numarası, kart üzerindeki ad, son kullanma tarihi ve güvenlik kodu dahil olmak üzere ödeme kartı formlarına uygun autocomplete değerlerini eklediğinizden emin olun:

  • cc-number
  • cc-name
  • cc-exp veya ayrı alanlar için cc-exp-month ve cc-exp-year
  • cc-csc

Bu sayede tarayıcılar, ödeme kartı bilgilerini güvenli bir şekilde saklayarak ve form verilerini doğru şekilde girerek kullanıcılara yardımcı olabilir. Otomatik tamamlama özelliği olmadığında kullanıcılar, ödeme kartı bilgilerini fiziksel olarak kaydetmeye veya ödeme kartı verilerini cihazlarında güvenli olmayan bir şekilde saklamaya daha yatkın olabilir.

Ödeme kartı tarihleri için özel öğeler kullanmaktan kaçının.

Doğru şekilde tasarlanmadıkları takdirde özel öğeler, otomatik doldurma özelliğini bozarak ödeme akışını kesintiye uğratabilir ve eski tarayıcılarda çalışmaz. Diğer tüm ödeme kartı bilgileri otomatik tamamlama ile doldurulabiliyorsa ancak kullanıcı, özel bir öğe için otomatik doldurma çalışmadığından son kullanma tarihini öğrenmek amacıyla fiziksel ödeme kartını bulmak zorunda kalıyorsa satışı kaybedebilirsiniz. Bunun yerine standart HTML öğeleri kullanmayı ve bunları uygun şekilde biçimlendirmeyi deneyin.

Kartın son kullanma tarihi için otomatik doldurmayı kesintiye uğratan özel öğelerin gösterildiği ödeme formu.
Otomatik tamamlama, geçerlilik bitiş tarihi hariç tüm alanları doldurdu.

Ödeme kartı ve telefon numaraları için tek bir giriş kullanma

Ödeme kartı ve telefon numaraları için tek bir giriş kullanın: Numarayı parçalara ayırmayın. Bu sayede kullanıcılar verileri daha kolay girebilir, doğrulama daha basit hale gelir ve tarayıcılar otomatik doldurma yapabilir. PIN ve banka kodları gibi diğer sayısal veriler için de aynı işlemi yapabilirsiniz.

Dört giriş öğesine bölünmüş bir kredi kartı alanını gösteren ödeme formu.
Kredi kartı numarası için birden fazla giriş kullanmayın.

Dikkatlice doğrulayın

Veri girişini hem gerçek zamanlı olarak hem de form gönderilmeden önce doğrulamalısınız. Bunu yapmanın bir yolu, ödeme kartı girişine pattern özelliğini eklemektir. Kullanıcı, ödeme formunu geçersiz bir değerle göndermeye çalışırsa tarayıcı bir uyarı mesajı gösterir ve girişe odaklanır. JavaScript gerekmez.

Ancak pattern normal ifadeniz, ödeme kartı numarası uzunluklarının aralığını (14 haneden [veya daha az] 20 haneye [veya daha fazla]) işleyecek kadar esnek olmalıdır. LDAPwiki'den ödeme kartı numarası yapılandırması hakkında daha fazla bilgi edinebilirsiniz.

Kullanıcıların yeni bir ödeme kartı numarası girerken boşluk eklemesine izin verin. Numaralar fiziksel kartlarda bu şekilde gösterilir. Bu, kullanıcı için daha kolaydır (onlara "yanlış bir şey yaptıklarını" söylemeniz gerekmez), dönüşüm akışını kesintiye uğratma olasılığı daha düşüktür ve işlemden önce sayılardaki boşlukları kaldırmak kolaydır.

Çeşitli cihaz, platform, tarayıcı ve sürümlerde test etme

Form öğelerinin işlevleri ve görünümü farklılık gösterebileceğinden ve görüntü alanı boyutundaki farklılıklar sorunlu konumlandırmaya yol açabileceğinden, adres ve ödeme formlarını kullanıcılarınızın en çok kullandığı platformlarda test etmek özellikle önemlidir. BrowserStack, çeşitli cihaz ve tarayıcılarda açık kaynak projeler için ücretsiz test imkanı sunar.

iPhone 7 ve 11'de ödeme formu. Ödemeyi Tamamla düğmesi iPhone 11'de gösteriliyor ancak iPhone 7'de gösterilmiyor.
iPhone 7 ve iPhone 11'de aynı sayfa.
Ödemeyi tamamla düğmesinin gizlenmemesi için daha küçük mobil görüntü alanlarında dolguyu azaltın.

Analiz ve RUM'u uygulama

Kullanılabilirliği ve performansı yerel olarak test etmek faydalı olabilir ancak kullanıcıların ödeme ve adres formlarınızı nasıl deneyimlediğini doğru bir şekilde anlamak için gerçek verilere ihtiyacınız vardır.

Bunun için analizlere ve gerçek kullanıcı izlemeye (gerçek kullanıcıların deneyimleriyle ilgili veriler, örneğin ödeme sayfalarının yüklenmesinin ne kadar sürdüğü veya ödemenin ne kadar sürede tamamlandığı) ihtiyacınız vardır:

  • Sayfa analizleri: Form içeren her sayfa için sayfa görüntüleme sayısı, hemen çıkma oranı ve çıkış sayısı.
  • Etkileşim analizleri: Hedef dönüşüm hunileri ve etkinlikler, kullanıcıların ödeme adımlarınızı nerede bıraktığını ve formlarınızla etkileşim kurarken hangi işlemleri yaptığını gösterir.
  • Web sitesi performansı: Kullanıcı odaklı metrikler, ödeme sayfalarınızın yavaş yüklenip yüklenmediğini ve yavaş yükleniyorsa bunun nedenini size söyleyebilir.

Sayfa analizleri, etkileşim analizleri ve gerçek kullanıcı performansı ölçümü; sunucu günlükleri, dönüşüm verileri ve A/B testi ile birleştirildiğinde özellikle değerli hale gelir. Bu sayede, indirim kodlarının geliri artırıp artırmadığı veya form düzenindeki bir değişikliğin dönüşümleri iyileştirip iyileştirmediği gibi soruları yanıtlayabilirsiniz.

Bu da size çabaları önceliklendirmek, değişiklikler yapmak ve başarıyı ödüllendirmek için sağlam bir temel sağlar.

Öğrenmeye devam edin

Fotoğraf: Unsplash'te @rupixen.