Ödeme ve adres formu için en iyi uygulamalar

Kullanıcılarınızın adres ve ödeme formlarını olabildiğince hızlı ve kolay bir şekilde doldurmasına yardımcı olarak dönüşümleri en üst düzeye çıkarı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 fark yaratabilir.

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

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

Yapılacaklar listesi

Anlamlı HTML kullanın

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

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

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

HTML öğelerini amaçlandığı şekilde kullanın

Formunuzu bir <form> içine yerleştirin

<input> öğelerinizi <form> içine sarmalamak ve veri göndermeyi tamamen JavaScript ile yönetmek isteyebilirsiniz.

Bunu yapmayın!

HTML <form>, tüm modern tarayıcılarda güçlü bir dizi yerleşik özelliğe erişmenizi sağlar ve sitenizin ekran okuyucular ve diğer yardımcı cihazlar tarafından erişilebilir hale getirilmesine yardımcı olabilir. <form> ayrıca, sınırlı JavaScript desteğine sahip eski tarayıcılar için temel işlevlerin geliştirilmesini ve kodunuzda bir hata olsa bile form göndermenin yapılmasını (ve JavaScript'i devre dışı bırakan az sayıda kullanıcı için) de basitleştirir.

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 kayıt formunuz varsa her birini kendi <form> içine koyun.

Öğeleri etiketlemek için <label> kullanma

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

Etiketin for özelliğine girişin id özelliğiyle aynı değeri vererek bir etiketi 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 seçenek tarayıcılar için, en uygunu ise ekran okuyucular için uygundur. Bir etikete dokunulduğunda veya etiket tıklandığında odak, etiketin ilişkili olduğu girişe taşınır. Ekran okuyucular, etiket veya etiketin giriş alanı odağa alındığında etiket metnini okur.

Düğmelerin faydalı olmasını sağlama

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

Her form gönder düğmesine, ne işlevi olduğunu belirten bir değer verin. Ödeme adımındaki her adım için ilerlemeyi gösteren ve sonraki adımın açıkça anlaşılmasını sağlayan açıklayıcı bir harekete geçirici mesaj kullanın. Örneğin, teslimat adresi formunuzdaki gönder düğmesini Devam veya Kaydet yerine Ödeme'ye Git olarak etiketleyin.

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

Öte yandan, eksik ve geçersiz kullanıcı girişi bekleyen gönder düğmesini devre dışı bırakmayın. Örneğin, eksik veya geçersiz bir bilgi olduğu için Adresi Kaydet düğmesini devre dışı bırakmak yerine düğmeyi devre dışı bırakmadan önce kullanıcıya eksik veya geçersiz bilgileri düzeltmesi için bir fırsat verin. Bu, kullanıcıya yardımcı olmaz. Kullanıcı, düğmeye dokunmaya veya düğmeyi tıklamaya devam edip düğmenin bozuk olduğunu düşünebilir. Bunun yerine, kullanıcılar geçersiz veriler içeren bir form göndermeye çalışırsa neyin yanlış olduğunu ve sorunu düzeltmek için ne yapmaları gerektiğini açıklayın. Bu, özellikle veri girişinin daha zor olduğu ve kullanıcı bir formu göndermeye çalışırken eksik veya geçersiz form verilerinin 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ırın

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 (type=email) ve telefon numarası (type=tel) girmek için uygun bir klavyenin gösterildiği 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. Düzgün şekilde uygulanmazlarsa otomatik doldurma deneyimini bozar ve eski tarayıcılarda çalışmaz. Doğum yılı gibi sayılar için select yerine input öğesi kullanmayı düşünün. Özellikle mobil cihazlarda, sayıları manuel olarak girmek uzun bir açılır listeden seçim yapmaktan daha kolay ve hata olasılığı daha düşük olabilir. Mobil cihazlarda doğru klavyenin kullanılmasını sağlamak için inputmode="numeric" simgesini kullanın ve kullanıcının verileri uygun biçimde girmesini sağlamak amacıyla metin veya yer tutucu içeren doğrulama ve biçim ipuçları ekleyin.

Erişilebilirliği artırmak 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 bırakma oranlarından kaçınmak için çok önemlidir. Otomatik tamamlama, erişilebilirlik açısından da birçok avantaj sağlar.

Bir form alanı için uygun bir otomatik tamamlama değeri varsa bunu kullanmanız gerekir. MDN web dokümanlarında 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örüntülemek 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 bir bağlantı ekleyin.

Kullanıcının verileri birden fazla kez girmesini önlemek için fatura adresi için gönderim adresinde yaptığınız gibi uygun otomatik tamamlama değerleri kullanın. Farklı bölümlerde aynı ada sahip girişler için farklı değerleriniz varsa otomatik tamamlama özelliklerine bir önek kelimesi ekleyin.

<input autocomplete="shipping address-line-1" ...>
...
<input autocomplete="billing address-line-1" ...>

Kullanıcıların doğru verileri girmelerine yardımcı olun

"Yanlış bir şey yaptıkları" için müşterileri "azarlamaktan" kaçının. Bunun yerine, kullanıcıların formları daha hızlı ve kolay bir şekilde doldurmasına yardımcı olmak için sorunları ortaya çıktıkça düzeltmelerine yardımcı olun. Müşteriler, ödeme sürecinde bir ürün veya hizmet için şirketinize para vermeye çalışıyor. Sizin işiniz onları cezalandırmak değil, onlara yardımcı olmaktır.

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, öğe değerinin geçerli olup olmadığına bağlı olarak otomatik olarak ayarlanır. Ayrıca, geçerli veya geçersiz değerlere sahip öğeleri biçimlendirmek için kullanılabilen :valid ve :invalid CSS sözde sınıfları da gösterilir.

Örneğin, aşağıdaki HTML'de 1900 ile 2020 arasında bir doğum yılı girişi belirtilmektedir. type="number" kullanıldığında, giriş değerleri yalnızca min ve max tarafından 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, boşluklara izin verirken geçerli bir ödeme kartı numarası sağlamak için pattern="[\d ]{10,30}" kullanılmaktadır:

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

Tarayıcılar, form gönderilirken otomatik olarak sorunlu veya eksik zorunlu değerlere sahip alanlara odaklanır. JavaScript gerekmez.

Masaüstündeki Chrome&#39;da, geçersiz bir e-posta değeri için tarayıcı istemi ve odak gösterilen oturum açma formunun ekran görüntüsü.
Tarayıcı tarafından temel yerleşik doğrulama.

Satır içi doğrulama yapın ve kullanıcı gönder düğmesini tıkladığında hata listesi sağlamak yerine, kullanıcı veri girdikçe 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ı açıkça vurgulayın. Ayrıca, sorunlu alanların her birinin yanında nelerin düzeltilmesi gerektiğini açıklayan bir satır içi mesaj gösterin. Sunucu günlüklerini ve analiz verilerini yaygın hatalar için kontrol edin. Formunuzu yeniden tasarlamanız gerekebilir.

Ayrıca, kullanıcılar veri girerken ve form gönderilirken daha sağlam doğrulama yapmak için JavaScript'i de kullanmanız gerekir. Odak ayarlamak ve istemler 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.

Daha karmaşık gerçek zamanlı doğrulama için JavaScript'i kullanma başlıklı makalede daha fazla bilgi edinin.

Kullanıcıların gerekli verileri eksik bırakmamasına yardımcı olun

Zorunlu değerler için girişlerde required özelliğini kullanın.

Bir form gönderildiğinde modern tarayıcılar, eksik verileri olan required alanları otomatik olarak sorar ve odaklar. Zorunlu alanları vurgulamak için :required sözde sınıfını kullanabilirsiniz. JavaScript gerekmez.

Gerekli olan her alanın etiketine yıldız işareti ekleyin ve yıldız işaretinin ne anlama geldiğini açıklamak için formun başına bir not ekleyin.

Ödemeyi basitleştirin

Mobil ticaret boşluğuna dikkat edin!

Kullanıcılarınızın yorulacak bir bütçeye sahip olduğunu düşünün. Kullanıcılarınızın ilgisini kaybetmek istemiyorsanız bu fırsatı kaçırmayın.

Özellikle mobil cihazlarda kullanıcıların ilgisini kaybetmemek ve kullanıcı deneyimini kolaylaştırmak için gereken tüm önlemleri almanız gerekir. Birçok site mobil cihazlarda daha fazla trafik, masaüstünde 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 düşük mobil dönüşüm oranları, kötü kullanıcı deneyiminin de bir sonucudur. İşiniz, mobil cihazlarda kaybedilen dönüşümleri en aza indirmek ve masaüstünde dönüşümleri maksimuma çıkarmak olmalıdır. Araştırmalar, daha iyi bir mobil form deneyimi sağlamak için büyük bir fırsat olduğunu gösteriyor.

En önemlisi, kullanıcıların uzun, karmaşık ve yön duygusu olmayan formları terk etme olasılığı daha yüksektir. Bu durum özellikle kullanıcılar küçük ekranlardayken, dikkatleri dağılmışken veya acele ederken geçerlidir. Mümkün olduğunca az veri isteyin.

Giriş yapmadan ödemeyi varsayılan olarak ayarlama

Online mağazalar için formdaki zorlukları azaltmanın en kolay yolu, varsayılan olarak misafir ödeme seçeneğini sunmaktır. Kullanıcıları satın alma işlemi yapmadan önce hesap oluşturmaya zorlamayın. Müşterilerin alışveriş sepetini terk etmesinin başlıca nedenlerinden biri, konuk olarak ödeme yapılmasına izin verilmemesidir.

Ödeme sırasında alışveriş sepetini terk etme nedenleri.
baymard.com/checkout-usability
adresinden alınmıştır

Ödeme yapıldıktan sonra hesap kaydı yapma seçeneği sunabilirsiniz. Bu noktada, bir hesap oluşturmak için ihtiyaç duyduğunuz verilerin çoğu zaten elinizde olduğundan hesap oluşturma işlemi kullanıcı için hızlı ve kolay olmalıdır.

Ödeme işleminin ilerleme durumunu göster

İlerleme durumunu göstererek ve sıradaki adımları net bir şekilde açıklayarak ödeme sürecinizi daha basit hale getirebilirsiniz. Aşağıdaki videoda, Birleşik Krallık'taki perakendeci johnlewis.com'un bunu nasıl başardığı gösterilmektedir.

Ödeme işleminin ilerleme durumunu gösterin.

Hızınızı kesmeyin. Ödemeyle ilgili her adım için o anda neyin yapılması gerektiğini ve sıradaki ö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, sonraki adımı gösteren anlamlı adlar verin.

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

Android&#39;deki bir adres formunun, enterkeyhint giriş özelliğinin enter tuşu düğmesi simgesini nasıl değiştirdiğini gösteren iki ekran görüntüsü.
Android'de şu tuş düğmelerini girin: "sonraki" ve "bitti".

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

Kullanıcıların ödeme sürecinde geri ve ileri gitmelerini kolaylaştırın. Böylece, son ödeme adımındayken bile siparişlerini kolayca düzenleyebilirler. Yalnızca sınırlı bir özet değil, siparişin tüm ayrıntılarını gösterin. Kullanıcıların ödeme sayfasından öğe miktarlarını kolayca ayarlayabilmelerini sağlayın. Ödeme sırasında önceliğiniz, dönüşüm sürecini kesintiye uğratmamak olmalıdır.

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

Görsel dağınıklığı ve ürün tanıtımları gibi dikkat dağıtıcı unsurları kaldırarak potansiyel çıkış noktalarını sınırlayın. Hatta birçok başarılı perakendeci, ödeme aşamasında gezinme ve aramayı kaldırıyor.

johnlewis.com&#39;da ödeme işleminin ilerleme durumunu gösteren iki mobil ekran görüntüsü. Arama, gezinme ve diğer dikkat dağıtıcı öğeler kaldırılır.
Ödeme sırasında arama, gezinme ve diğer dikkat dağıtıcı öğeler kaldırıldı.

Yolculuğun odağını koruyun. Kullanıcıları başka bir şey yapmaya teşvik etmek için doğru zaman değil.

ÜCRETSİZ ÇIKARTMA promosyonunu gösteren mobil ödeme sayfasının ekran görüntüsü.
Müşterilerin satın alma işlemlerini tamamlamasını engellemeyin.

Tekrar gelen kullanıcılar için, görmeleri gerekmeyen verileri gizleyerek ödeme akışını daha da basitleştirebilirsiniz. Örneğin, teslimat adresini düz metin olarak (formda değil) gösterebilir ve kullanıcıların adresi bir bağlantı aracılığıyla değiştirmesine izin verebilirsiniz.

Ödeme sayfasındaki &quot;Siparişi incele&quot; bölümünün ekran görüntüsü. Metin düz metin olarak gösteriliyor ve teslimat adresini, ödeme yöntemini ve fatura adresini değiştirme bağlantıları gösterilmiyor.
Müşterilerin görmesi gerekmeyen verileri gizleyin.

Ad ve adresi girmeyi kolaylaştırın

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 için de iyidir ve arka uç veri maliyetini ve sorumluluğunu azaltabilir.

Tek bir ad girişi kullanın

Belirli adları, soyadlarını, onur adlarını veya diğer ad bölümlerini ayrı olarak saklamak için geçerli bir nedeniniz yoksa kullanıcılarınızın tek bir giriş kullanarak adlarını girmelerine izin verin. Tek bir ad girişi kullanmak formları daha az karmaşık hale getirir, kesme ve yapıştırma işlemlerini sağlar ve otomatik doldurma özelliğini basitleştirir.

Özellikle, bunu yapmamak için iyi bir nedeniniz yoksa önek veya unvan (ör. Bayan, Dr. veya Lord) için ayrı bir giriş eklemeyin. Kullanıcılar isterlerse bu sayfayı kendi adlarıyla yazabilirler. Ayrıca, honorific-prefix otomatik tamamlama özelliği şu anda çoğu tarayıcıda çalışmadığından ad ön ekiyle veya unvanla ilgili bir alan eklemek, çoğu kullanıcının adres formu otomatik doldurma deneyimini bozar.

Ad otomatik doldurma özelliğini etkinleştir

Tam ad olarak name kullanın:

<input autocomplete="name" ...>

Ad bölümlerini bölmek 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ı isimlere izin ver

Ad girişlerinizi doğrulamak veya ad verilerinde izin verilen karakterleri kısıtlamak isteyebilirsiniz. Ancak, alfabelerde mümkün olduğunca kısıtlayıcı olmamalıdır. Adınızın "geçersiz" olduğunun söylenmesi kaba bir davranıştır.

Doğrulama için yalnızca Latin alfabesi karakterleriyle eşleşen normal ifadeler kullanmaktan kaçının. Yalnızca Latin alfabesinde olmayan karakterler içeren ad veya adreslere sahip kullanıcılar, yalnızca Latin alfabesi seçeneğiyle hariç tutulur. Bunun yerine Unicode harf eşleştirmeye izin verin ve arka ucunuzun hem giriş hem de çıkışta Unicode'u güvenli bir şekilde desteklediğinden emin olun. Normal ifadelerdeki Unicode, modern tarayıcılar tarafından desteklenmektedir.

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 alfabesi harf eşleştirmeye kıyasla Unicode harf eşleştirme.

Çeşitli adres biçimlerine izin verme

Adres formu tasarlarken, tek bir ülkede bile adres biçimlerinin şaşırtıcı çeşitliliğini göz önünde bulundurun. "Normal" adresler hakkında varsayımlarda bulunmamaya özen gösterin. (Emin değilseniz Birleşik Krallık'taki adreslerle ilgili 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ığdırmaya zorlamayın.

Örneğin, birçok adres bu biçimi kullanmadığı ve eksik veriler tarayıcı otomatik doldurma özelliğini bozabileceği için ayrı girişlerde bina numarası ve sokak adı konusunda ısrar etmeyin.

Özellikle required adres alanlarına dikkat edin. Örneğin, Birleşik Krallık'taki büyük şehirlerdeki adreslerde ilçe bilgisi yer almaz 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-line-1" id="address-line1" ...>
<input autocomplete="address-line-2" id="address-line2" ...>

Eşleşmeye etiket ekleme:

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

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

Aşağıda yerleştirilmiş demoyu remiksleyip düzenleyerek bunu deneyebilirsiniz.

Adres için tek bir textarea kullanmayı deneyin

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

textarea yaklaşımı, her adres biçimine uyar ve kesme ve yapıştırma için mükemmeldir. Ancak bu yaklaşımın veri gereksinimlerinize uymayabileceğini ve kullanıcıların daha önce yalnızca address-line1 ve address-line2 içeren formlar kullandıysa otomatik doldurma özelliğini kaçırabileceğ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ğini aşağıda bulabilirsiniz:

Adres formlarınızı uluslararası hale getirin 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 dikkate alınmalıdır.

Adres biçimlerinin yanı sıra adres bölümlerinin adlandırmasının, aynı dil içinde bile farklılık gösterebileceğ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şmanız can sıkıcı veya kafa karıştırıcı olabilir.

Siteniz için adres formlarını birden fazla yerel ayar için özelleştirmeniz gerekebilir, ancak form esnekliğini en üst düzeye çıkaracak teknikler kullanmak (yukarıda açıklandığı gibi) yeterli olabilir. Adres formlarınızı yerelleştirmezseniz çeşitli adres biçimleriyle başa çıkmaya yönelik temel öncelikleri anladığınızdan emin olun: * Adres bölümlerini çok fazla detaylandırmaktan (örneğin, bir sokak adı veya ev numarası için ısrar etmek) kaçının. * Mümkün olduğunda required alanlarını kullanmaktan kaçının. Örneğin, birçok ülkedeki adreslerde posta kodu bulunmaz ve kırsal bölgelerdeki adreslerde sokak veya yol adı olmayabilir. * 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 kodu adres aramasından kaçının

Bazı web siteleri, adresleri posta koduna göre aramak için bir hizmet kullanır. Bu, bazı kullanım alanları için mantıklı olabilir ancak olası olumsuz yönleri göz önünde bulundurmanız gerekir.

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

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

Kullanıcıların uzun bir adres listesinden seçim yapmaları zorlaşır. Özellikle cep telefonlarında acele veya stresli olduklarından dolayı bu adresler zor olur. Kullanıcıların otomatik doldurma özelliğinden yararlanmasına ve tek bir dokunuş veya tıklamayla adreslerinin tamamını girmesine izin vermek daha kolay ve hata olasılığı daha düşük olabilir.

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

Ödeme formlarını basitleştirin

Ödeme şekilleri, ödeme sürecinin en kritik parçasıdır. Kötü ödeme formu tasarımı, alışveriş sepetini terk etmenin yaygın bir nedenidir. Ayrıntılar önemlidir: Küçük hatalar, özellikle mobil cihazlarda kullanıcıların satın alma işlemini iptal etmesine neden olabilir. Formları, kullanıcıların veri girmesini mümkün olduğunca kolaylaştıracak şekilde tasarlamanız gerekir.

Kullanıcıların ödeme verilerini yeniden girmemesini sağlama

Ödeme kartı formlarına ödeme kartı numarası, karttaki ad ve geçerlilik bitiş ayı ve yılı dahil olmak üzere uygun autocomplete değerleri eklediğinizden emin olun:

  • cc-number
  • cc-name
  • cc-exp-month
  • cc-exp-year

Bu sayede tarayıcılar, ödeme kartı ayrıntılarını güvenli bir şekilde saklayarak ve form verilerini doğru şekilde girerek kullanıcılara yardımcı olabilir. Otomatik tamamlama özelliği olmadan kullanıcıların ödeme kartı ayrıntılarını fiziksel olarak kaydetme veya ödeme kartı verilerini cihazlarında güvenli olmayan bir şekilde depolama olasılığı daha yüksek olabilir.

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

Düzgün şekilde tasarlanmadıkları takdirde özel öğeler otomatik doldurmayı bozarak ödeme akışını kesintiye uğratabilir ve eski tarayıcılarda çalışmaz. Otomatik tamamlama özelliği sayesinde diğer tüm ödeme kartı bilgilerine ulaşılabilir ancak otomatik doldurma özelliği özel bir öğede çalışmadığı için kullanıcı, son kullanma tarihini bulmak için fiziksel ödeme kartını bulmaya zorlanırsa büyük olasılıkla satışlarınızı kaybedebilirsiniz. Bunun yerine standart HTML öğelerini kullanın ve bunlara uygun şekilde stil uygulayın.

Otomatik doldurmayı kesintiye uğratan kart son kullanma tarihi için özel öğeleri gösteren ödeme formunun ekran görüntüsü.
Otomatik tamamlama, son kullanma tarihi hariç tüm alanları doldurdu.

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

Ödeme kartları ve telefon numaraları için tek bir giriş kullanın: Sayıyı parçalara bölmeyin. Bu sayede kullanıcıların veri girmesi kolaylaşır, doğrulama basitleştirilir ve tarayıcıların otomatik doldurması sağlanır. PIN ve banka kodları gibi diğer sayısal veriler için de aynısını yapabilirsiniz.

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

Doğrulama işlemini dikkatlice yapın

Veri girişini hem anlık olarak hem de form gönderilmeden önce doğrulamanız gerekir. Bunu yapmanın bir yolu, ödeme kartı girişine pattern özelliği eklemektir. Kullanıcı ödeme formunu geçersiz bir değerle göndermeye çalışırsa tarayıcı bir uyarı mesajı görüntüler ve girişe odaklanır. JavaScript gerekmez.

Ancak pattern normal ifadeniz, ödeme kartı numarasının uzunluğu aralığını (14 ila 20 basamak) kapsayacak kadar esnek olmalıdır. Ödeme kartı numarası yapılandırması hakkında daha fazla bilgiyi LDAPwiki'den edinebilirsiniz.

Fiziksel kartlarda sayılar bu şekilde gösterildiği için, kullanıcılara yeni bir ödeme kartı numarası girerken boşluk eklemelerine izin verin. Bu, kullanıcı için daha kolaydır ("Yanlış bir şey yaptınız" demeniz gerekmez), dönüşüm akışını kesintiye uğratma olasılığı daha düşüktür ve işleme alınmadan önce sayılardaki boşlukları kaldırmak kolaydır.

Çeşitli cihazlar, platformlar, tarayıcılar ve sürümlerde test edebilirsiniz

Form öğesinin işlevi ve görünümü değişiklik gösterebileceği ve görüntü alanı boyutundaki farklılıklar konumlandırmada soruna yol açabileceği için adres ve ödeme formlarını kullanıcılarınız için en yaygın olan platformlarda test etmek özellikle önemlidir. Tarayıcı Yığını, çeşitli cihaz ve tarayıcılarda açık kaynaklı projeler için ücretsiz test sağlar.

iPhone 7 ve 11&#39;deki ödeme formunun (payment-form.glitch.me) ekran görüntüleri. Ödemeyi Tamamla düğmesi iPhone 11&#39;de gösteriliyor ancak 7&#39;de gösterilmiyor
iPhone 7 ve iPhone 11'de aynı sayfa.
Ödemeyi tamamla düğmesinin gizlenmemesini sağlamak için daha küçük mobil ekran görünümleri için dolguyu azaltın.

Analizleri ve RUM'u uygulama

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

Bunun için analizlere ve gerçek kullanıcı izlemeye ihtiyacınız vardır. Gerçek kullanıcı izleme, gerçek kullanıcıların deneyimine dair verilerdir (ör. ödeme sayfalarının yüklenmesi veya ödemenin tamamlanması ne kadar sürer?).

  • Sayfa analizi: Bir form içeren her sayfa için sayfa görüntüleme sayısı, hemen çıkma oranları ve çıkış sayısı.
  • Etkileşim analizleri: Hedef dönüşüm hunileri ve etkinlikler, kullanıcıların ödeme akışınızda nerede ayrıldığını ve formlarınızla etkileşim kurarken hangi işlemleri gerçekleştirdiğini gösterir.
  • Web sitesi performansı: Kullanıcı odaklı metrikler, ödeme sayfalarınızın yüklenme hızının yavaş olup olmadığını ve yavaşsa 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 birlikte kullanıldığında özellikle değerli hale gelir. Bu sayede, indirim kodlarının geliri artırıp artırmadığı veya form düzeninde yapılan bir değişikliğin dönüşümleri iyileştirip iyileştirmediği gibi soruları yanıtlayabilirsiniz.

Bu da çabaya öncelik verme, değişiklik yapma ve başarıyı ödüllendirme konusunda sağlam bir temel oluşturur.

Öğrenmeye devam edin

Fotoğraf: Unsplash'taki @rupixen.