Ödeme ve adres formu için 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 fark yaratabilir.

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

Aşağıda, en iyi uygulamaların tümünü gösteren basit bir adres formu örneği 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şlevlerini etkinleştirir, erişilebilirliği iyileştirir ve işaretlemenize anlam katar.

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

Formunuzu bir <form>

<input> öğelerinizi bir <form> içine sarmalamaktan kaçınmak ve veri gönderimini sadece JavaScript ile yapmak cazip gelebilir.

Bunu yapmayın!

HTML <form> tüm modern tarayıcılarda, güçlü bir yerleşik özellik grubuna erişmenizi sağlar ve sitenizin ekran okuyucular ve diğer yardımcı cihazlar için erişilebilir olmasına yardımcı olabilir. <form> ayrıca, sınırlı JavaScript desteği olan eski tarayıcılar için temel işlevlerin oluşturulmasını ve kodunuzda bir hata olsa bile form göndermeyi etkinleştirmeyi ve JavaScript'i gerçekten devre dışı bırakan az sayıda kullanıcı için kolaylık sağlar.

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

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

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

Etiketin for özelliğine, girişin id değeri ile 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: Birden çok girişi tek bir etiketle etiketlemeye çalışmayın. Bu en iyi tarayıcılar için, en çok da ekran okuyucular için çalışır. Bir etikete dokunulduğunda veya tıklandığında odak, ilişkili olduğu girişe taşınır ve etiket ya da etiketin girişi odaklanınca ekran okuyucular etiket metnini duyurur.

Düğmeleri yararlı hale getirme

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

Her form gönderme düğmesine işlevini belirten bir değer verin. Ödeme işlemine doğru her adım için, ilerlemeyi gösteren ve bir sonraki adımı açıkça ortaya koyan açıklayıcı bir harekete geçirici mesaj kullanın. Örneğin, teslimat adresi formunuzdaki gönder düğmesini Devam veya Kaydet yerine Ödemeye Devam Et olarak etiketleyin.

Kullanıcı dokunduğunda veya tıkladığında, özellikle de kullanıcı ödeme yaparken veya sipariş verirken gönder düğmesini devre dışı bırakmayı düşünün. Birçok kullanıcı düzgün çalışıyor olsa bile düğmeleri tekrar tekrar tıklar. Bu durum, ödeme aşamasını zorlaştırabilir ve sunucu yükünü artırabilir.

Diğer yandan, eksiksiz ve geçerli kullanıcı girişi bekleyen bir gönder düğmesini devre dışı bırakmayın. Örneğin, eksik veya geçersiz bir öğe olduğu için Adresi Kaydet düğmesini devre dışı bırakmayın. Bu, kullanıcıya yardımcı olmaz. Düğmeye dokunmaya veya tıklamaya devam ederek düğmenin bozuk olduğunu varsayabilir. Bunun yerine, kullanıcılar geçersiz veriler içeren bir form göndermeye çalışırsa bu hatayı onlara ve düzeltmek için ne yapmaları gerektiğini açıklayın. Bu, veri girişinin daha zor olduğu ve eksik veya geçersiz form verilerinin kullanıcı bir form göndermeyi denediğinde ekranında görünmeyebileceği mobil cihazlarda özellikle önemlidir.

HTML özelliklerinden en iyi şekilde yararlanın

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.

Android telefonların, e-posta adresi girmek (tür=e-posta ile) ve telefon numarası girmek (tür=tel) ile uygun bir klavyeyi gösteren iki ekran görüntüsü.
E-posta ve telefon için uygun klavyeler.

Tarihler için özel select öğeleri kullanmaktan kaçınmaya çalışın. Bu dosyalar, doğru bir şekilde uygulanmazsa 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 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 bulunduğundan emin olmak için inputmode="numeric" kullanın ve kullanıcının verileri uygun biçimde girdiğinden emin olmak için metin veya yer tutucu içeren doğrulama ve biçim ipuçları ekleyin.

Erişilebilirliği iyileştirmek ve kullanıcıların verileri yeniden girmekten kaçınmasına yardımcı olmak için otomatik tamamlama özelliğini 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 durum, özellikle mobil cihazlarda önemlidir ve yüksek form vazgeçme oranlarından kaçınmak için son derece önemlidir. Otomatik tamamlama, birçok erişilebilirlik avantajı da sunar.

Bir form alanı için uygun bir otomatik tamamlama değeri varsa bunu kullanmanız gerekir. MDN web dokümanları, değerlerin ve bunların doğru şekilde nasıl kullanılacağıyla ilgili açıklamaların tam listesini içerir.

Kararlı değerler

Fatura adresi

Varsayılan olarak, fatura adresini teslimat adresiyle aynı olacak şekilde ayarlayın. Fatura adresini formda görüntülemek yerine fatura adresini düzenlemek için 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.

Gönderim adresi için yaptığınız gibi, fatura adresi için de uygun otomatik tamamlama değerleri kullanın. Böylece kullanıcının bir defadan fazla veri girmesine gerek kalmaz. Farklı bölümlerde aynı ada sahip girişler için farklı değerleriniz varsa otomatik tamamlama özelliklerine ön ek kelime ekleyin.

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

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

Müşterilere "yanlış bir şey yaptıkları" için "anılık yapmaktan" kaçınmaya çalışın. Bunun yerine, kullanıcılar ortaya çıkan sorunları düzeltmesine yardımcı olarak formları daha hızlı ve kolay şekilde tamamlamalarına yardımcı olur. Müşteriler ödeme işlemi boyunca şirketinize bir ürün veya hizmet için para vermeye çalışırlar. 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, öğelerin geçerli veya geçersiz değerlere sahip stilini belirlemek için kullanılabilecek :valid ve :invalid CSS sözde sınıflarının yanı sıra öğenin geçerli olup olmamasına bağlı olarak otomatik olarak ayarlanır.

Örneğin, aşağıdaki HTML, 1900 ile 2020 arasındaki bir doğum yılı için girişi belirtir. type="number" kullanıldığında, giriş değerleri yalnızca min ve max tarafından belirtilen aralık içindeki sayılarla sınırlandırılır. Aralık dışında bir sayı girmeye çalışırsanız girişin durumu geçersiz olacak şekilde 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ılmıştır:

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

Form gönderimi sırasında tarayıcılar, odağı otomatik olarak sorunlu veya eksik zorunlu değerler içeren alanlara ayarlar. JavaScript gerekmez!

Masaüstünde Chrome&#39;da, tarayıcı istemini ve geçersiz e-posta değeri odağını gösteren oturum açma formunun ekran görüntüsü.
Tarayıcı tarafından gerçekleştirilen temel yerleşik doğrulama.

Satır içi doğrulayın ve kullanıcılar gönder düğmesini tıkladığında bir hata listesi sağlamak yerine veri girerken kullanıcıya geri bildirim sağlayın. Form gönderildikten sonra sunucunuzdaki verileri doğrulamanız gerekirse bulunan tüm sorunları listeleyin ve geçersiz değerlere sahip tüm form alanlarını açıkça vurgulayın. Ayrıca, her sorunlu alanın yanında, düzeltilmesi gerekenleri açıklayan bir satır içi mesaj görüntüleyin. Sunucu günlüklerinde ve analiz verilerinde sık karşılaşılan hatalar olup olmadığını kontrol edin. Formunuzu yeniden tasarlamanız gerekebilir.

Kullanıcılar veri girerken ve form gönderilirken daha sağlam doğrulama yapmak için JavaScript'i de kullanmanız gerekir. Odak ve görüntüleme istemlerini ayarlamak amacıyla yerleşik tarayıcı kullanıcı arayüzünü kullanarak özel doğrulama eklemek için Constraint Validation API'yi (geniş ölçekte desteklenen) kullanın.

Daha karmaşık gerçek zamanlı doğrulama için JavaScript kullanma başlıklı makaleden daha fazla bilgiye ulaşabilirsiniz.

Kullanıcıların gerekli verileri kaçırmaları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 otomatik olarak istemde bulunur ve eksik verisi olan required alanlarına odaklanır. Gerekli alanları vurgulamak için :required sözde sınıfı kullanabilirsiniz. JavaScript gerekmez!

Zorunlu her alan için etikete 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.

Ödeme sürecini basitleştirin

Mobil ticaretteki boşluğa dikkat edin!

Kullanıcılarınızın tüketim bütçesi olduğunu düşünün. Pilinizi kullanın, kullanıcılarınız sitenizden ayrılacak.

Zorlukları azaltmanız ve özellikle mobil cihazlarda odağı korumanız gerekir. Birçok site mobil cihazlarda daha fazla trafik elde ederken masaüstünde daha fazla dönüşüm elde eder. Bu duruma mobil ticaret açığı denir. Müşteriler bir satın alma işlemini masaüstü bilgisayardan tamamlamayı tercih edebilir, ancak düşük mobil dönüşüm oranları da kötü kullanıcı deneyiminin bir sonucudur. Sizin işiniz, mobil cihazlarda kaybedilen dönüşümleri en aza indirmek ve masaüstünde dönüşümleri en üst düzeye çıkarmak. Araştırmalar, daha iyi bir mobil form deneyimi sağlamak için çok büyük bir fırsat olduğunu gösteriyor.

Hepsinden önemlisi, kullanıcıların uzun, karmaşık ve yön duygusu olmayan formlardan vazgeçme olasılıkları daha yüksektir. Bu durum özellikle kullanıcılar küçük ekrandayken, dikkati dağıldığında veya acele içinde olduğunda geçerlidir. Mümkün olduğunca az veri talep edin.

Giriş yapmadan öde seçeneğini varsayılan olarak belirleyin

Online mağazalar için form itirazlarını azaltmanın en basit yolu, varsayılan olarak giriş yapmadan ödeme seçeneğini belirlemektir. Kullanıcıları satın alma işlemi gerçekleştirmeden önce hesap oluşturmaya zorlamayın. Giriş yapmadan ödeme işlemine izin verilmemesi, alışveriş sepetini terk etmenin başlıca nedenlerinden biridir.

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

Ödeme işleminden sonra hesaba kaydolmayı teklif edebilirsiniz. Bu noktada, hesap oluşturmak için ihtiyaç duyduğunuz verilerin çoğuna zaten sahip olmuş olursunuz. Dolayısıyla, hesap oluşturma işlemi kullanıcı için hızlı ve kolay olmalıdır.

Ödeme ilerleme durumunu göster

İlerlemenizi göstererek ve bundan sonra yapılması gerekenleri açıkça belirterek ödeme işleminizin daha basit olmasını sağlayabilirsiniz. Aşağıdaki videoda Birleşik Krallık merkezli perakendeci johnlewis.com'un bunu nasıl başardığı gösterilmektedir.

Ödeme işleminin ilerleme durumunu göster.

İvmeyi korumanız gerekiyor. Ödemeye giden her adım için, o anda yapılması gerekenleri ve sıradaki ödeme adımını açıkça belirten 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 giriş 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&#39;de Enterkeyhint giriş özelliğinin Enter tuşu düğmesini nasıl değiştirdiğini gösteren bir adres formunun iki ekran görüntüsü.
Android'de şu tuş düğmelerini girin: "sonraki" ve "bitti".

enterkeyhint özelliği Android ve iOS'te desteklenir. Enterkeyhint açıklayıcıdan daha fazla bilgi edinebilirsiniz.

Kullanıcıların ödeme işlemi içinde ileri geri gitmesini ve son ödeme adımında bile siparişlerini kolayca düzenlemesini kolaylaştırın. Siparişin sadece sınırlı bir özetini değil, tüm ayrıntılarını gösterin. Kullanıcıların ödeme sayfasından öğe miktarlarını kolayca ayarlamasına olanak tanıyın. Ödeme sırasında önceliğiniz, dönüşüme giden sürecin kesintiye uğramasını önlemektir.

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 olası çıkış noktalarını sınırlayın. Başarılı satıcıların çoğu, ödeme aşamasında gezinme ve arama işlemlerini bile kaldırmaktadır.

Mobil cihazda, johnlewis.com&#39;da ödeme adımındaki ilerlemeyi gösteren iki ekran görüntüsü. Arama, gezinme ve diğer dikkat dağıtıcı öğeler kaldırılır.
Arama, gezinme ve diğer dikkat dağıtıcı öğeler ödeme için kaldırıldı.

Yolculuğun odağını koruyun. Kullanıcıları başka bir şey yapmaya teşvik etmenin zamanı değil.

Mobil cihazda ÜCRETSİZ ÇIKARTMALAR için dikkat dağıtan promosyonun gösterildiği ödeme sayfasının ekran görüntüsü.
Müşterilerin, satın alma işlemlerini tamamlamaktan uzaklaştırmalarını önleyin.

Geri 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österin ve kullanıcıların bağlantı üzerinden değiştirmesine olanak tanıyın.

Ödeme sayfasındaki &quot;Siparişi incele&quot; bölümünün ekran görüntüsünde, düz metin metinle birlikte teslimat adresi, ödeme yöntemi ve fatura adresi değiştirme bağlantılarının yer aldığı metin gösteriliyor.
Müşterilerin görmesi gerekmeyen verileri gizleyin.

Ad ve adres 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 gerektiğini 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 durum, müşteri gizliliği için de faydalıdır ve arka uç verilerinin maliyeti ile sorumluluğunu azaltabilir.

Tek bir ad girişi kullan

Adları, soyadlarını, saygınlıklarını veya diğer ad bölümlerini ayrı olarak saklamak için geçerli bir nedeniniz olmadığı sürece kullanıcılarınızın adlarını tek bir girişle girmelerine izin verin. Tek bir ad girişi kullanmak formları daha karmaşık hale getirir, kesip yapıştırmayı etkinleştirir ve otomatik doldurmayı kolaylaştırır.

Özellikle, bunu yapmak için geçerli bir nedeniniz yoksa, bir önek veya unvan (ör. Bayan, Dr veya Lord gibi) için ayrı bir giriş eklemeyi zahmet etmeyin. İsterlerse kullanıcılar bu bilgiyi adlarıyla birlikte yazabilir. Ayrıca, honorific-prefix otomatik tamamlama özelliği şu anda çoğu tarayıcıda çalışmamaktadır. Bu nedenle, ad öneki veya başlık için bir alan eklemek çoğu kullanıcının adres formu otomatik doldurma deneyimini bozar.

Otomatik ad doldurmayı etkinleştir

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 ver

Ad girişlerinizi doğrulamak veya ad verileri için izin verilen karakterleri kısıtlamak isteyebilirsiniz. Ancak, alfabelerde mümkün olduğunca katı olmanız gerekir. Adınızın "geçersiz" olduğunu söylemek kaba bir davranış!

Doğrulama için yalnızca Latin karakterlerle eşleşen normal ifadeler kullanmaktan kaçının. Yalnızca Latin alfabesinde bulunmayan karakterler içeren ad veya adreslere sahip 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 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şleme ile Unicode harf eşleştirme karşılaştırması.

Çeşitli adres biçimlerine izin verin

Adres formu tasarlarken, tek bir ülke içinde bile şaşırtıcı adres biçimi çeşitliliğine dikkat edin. "Normal" adresler hakkında varsayımlarda bulunmamaya dikkat edin. (Emin değilseniz Birleşik Krallık Adres Gariplikleri bölümüne bakın!)

Adres formlarını esnek hale getirin

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

Örneğin, birçok adres bu biçimi kullanmadığı ve eksik veriler, tarayıcının otomatik doldurmasını bozabileceğinden ayrı girişlerde bir ev numarası ve sokak adı istemek konusunda ısrar etmeyin.

required adres alanlarına özellikle dikkat edin. Örneğin, İngiltere'deki büyük şehirlerde bulunan adreslerin ilçesi yoktur ancak birçok site hâlâ kullanıcıları bir ilçe girmeye zorlar.

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

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

Eşleştirilecek etiketleri ekle:

<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ğıya yerleştirilmiş demoyu remiksleyip düzenleyerek bu özelliği deneyebilirsiniz.

Adres için tek bir metin alanı kullanmayı düşünün

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

textarea yaklaşımı tüm adres biçimlerine uygundur ve kesmek ve yapıştırmak için idealdir. Ancak bu yaklaşımın veri gereksinimlerinize uymayabileceğini ve daha önce yalnızca address-line1 ve address-line2 içeren formlar kullanmış olan kullanıcıların otomatik doldurma özelliğini kaçırabileceğini unutmayın.

Bir metin alanı için otomatik tamamlama değeri olarak street-address değerini 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 getirme ve yerelleştirme

Özellikle adres formlarında, kullanıcılarınızın bulunduğu yere bağlı olarak uluslararası hale getirme ve yerelleştirmenin dikkate alınması önemlidir.

Adres bölümlerinin adlandırmasının, aynı dil içinde bile adres biçimlerinin yanı sıra değişebileceğ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 birden fazla yerel ayar için adres formlarını özelleştirmek gerekli olabilir ancak form esnekliğini en üst düzeye çıkarmaya yönelik teknikler (yukarıda açıklandığı gibi) kullanmak yeterli olabilir. Adres formlarınızı yerelleştirmezseniz çeşitli adres biçimleriyle başa çıkmak için temel öncelikleri anladığınızdan emin olun: * Sokak adı veya ev numarası konusunda ısrar etmek gibi adres bölümlerini aşırı derecede ayrıntılı kullanmaktan kaçının. * Mümkünse alanları required oluşturmaktan kaçının. Örneğin, birçok ülkedeki adreslerin posta kodu yoktur ve kırsal adreslerin sokak veya yol adı olamaz. * Kapsayıcı adlandırma kullanın: "Ülke" değil "Ülke/bölge"; "ZIP" değil "Posta kodu".

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

Posta kodu adresi aramaktan kaçınmanızı öneririz

Bazı web siteleri, adresleri posta koduna göre aramak için bir hizmet kullanır. Bu, bazı kullanım alanları için makul olabilir, ancak muhtemel olumsuz yanlarını bilmeniz gerekir.

Posta kodu adres önerisi tüm ülkelerde kullanılamaz. Bazı bölgelerde posta kodları çok sayıda potansiyel adres içerebilir.

Posta kodları birçok adres içerebilir.

Kullanıcıların uzun bir adres listesinden seçim yapması, özellikle de aceleli veya stresli olduklarında mobil cihazlarda zordur. Kullanıcıların otomatik doldurma özelliğinden yararlanması ve adreslerin tek bir dokunuşla veya tıklamayla doldurulduğu tam adres girilmesi daha kolay ve daha az hataya açık olabilir.

Tek bir ad girişi, tek dokunuşla (tek tıklamayla) adres girişi sağlar.

Ödeme şekillerini basitleştirin

Ödeme formları, ödeme işleminin en önemli parçasıdır. Ödeme şekli tasarımının kötü olması, alışveriş sepetini terk etmenin yaygın bir nedenidir. Ayrıntılarda şeytanın gizli olması: Küçük hatalar, özellikle mobil cihazlarda kullanıcıları bir satın alma işleminden vazgeçmeye yönlendirebilir. Sizin göreviniz, kullanıcıların veri girmesini mümkün olduğunca kolaylaştırmak için formlar tasarlamak.

Kullanıcıların ödeme verilerini yeniden girmesini önlemeye yardımcı olun

Ödeme kartı formlarına, ödeme kartı numarası, kartın üzerindeki ad ve son kullanma ayı ile 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 depolayarak ve form verilerini doğru şekilde girerek kullanıcılara yardımcı olabilir. Otomatik tamamlama olmadan, kullanıcıların ödeme kartı ayrıntılarının fiziksel bir kaydını tutma 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

Özel öğeler, düzgün tasarlanmadığı takdirde otomatik doldurmayı bozarak ödeme akışını kesintiye uğratabilir ve eski tarayıcılarda çalışmaz. Otomatik tamamlamada diğer tüm ödeme kartı ayrıntılarına ulaşılabiliyorsa ancak kullanıcı, özel öğede otomatik doldurma çalışmadığı için son kullanma tarihini öğrenmek üzere fiziksel ödeme kartını bulmak zorunda kalırsa satışı kaybetmeniz olasıdır. Bunun yerine standart HTML öğeleri kullanmayı ve bunları uygun şekilde stillendirmeyi düşünün.

Otomatik doldurmayı kesintiye uğratan kart son kullanma tarihi için özel öğelerin gösterildiği ödeme formunun ekran görüntüsü.
Otomatik tamamlama özelliği, geçerlilik bitiş tarihi hariç tüm alanları doldurdu.

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

Ödeme kartı ve telefon numaraları için tek bir giriş kullanın: Numarayı parçalara bölmeyin. Bu da kullanıcıların veri girmesini kolaylaştırır, doğrulamayı kolaylaştırır ve tarayıcıların otomatik doldurma özelliğini etkinleştirir. Aynısını PIN ve banka kodları gibi diğer sayısal veriler için de yapabilirsiniz.

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

Dikkatli bir şekilde 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ği eklemektir. Kullanıcı, ödeme formunu geçersiz bir değerle göndermeyi denerse tarayıcı bir uyarı mesajı görüntüler ve odağı girişe ayarlar. JavaScript gerekmez!

Bununla birlikte, pattern normal ifadeniz, ödeme kartı numarası uzunlukları aralığını işleyecek kadar esnek olmalıdır: 14 basamaktan (veya muhtemelen daha az) 20'ye (veya daha fazla) kadar. Ödeme kartı numarası yapısı hakkında daha fazla bilgiyi LDAPwiki'de bulabilirsiniz.

Yeni bir ödeme kartı numarası girerken kullanıcıların boşluk eklemesine izin verin. Fiziksel kartlarda sayılar bu şekilde gösterilir. Bu yöntem kullanıcıya daha dostçadı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şlenmeden önce sayılardaki boşlukları kaldırmak kolaydır.

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

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

iPhone 7 ve 11&#39;de bir ödeme formunun (payment-form.glitch.me) ekran görüntüsü. iPhone 11&#39;de Ödemeyi Tamamla düğmesi gösteriliyor ancak 7&#39;de gösterilmiyor
iPhone 7 ve iPhone 11'de aynı sayfa.
Ödemeyi tamamla düğmesinin gizli olmadığından emin olmak için daha küçük mobil görüntü alanlarının dolgusunu azaltın.

Analizleri ve RUM'yi uygulayın

Kullanılabilirliği ve performansı yerel olarak test etmek faydalı olabilir ancak kullanıcıların ödemeyle ilgili deneyimlerini ve formları nasıl ele aldığını doğru şekilde anlamak için gerçek dünyadan verilere ihtiyacınız vardır.

Bunun için analizlere ve Gerçek Kullanıcı İzlemeye ihtiyacınız vardır. Bunlar, ödeme sayfalarının ne kadar sürede yüklendiği veya ödemenin ne kadar sürede tamamlandığı gibi gerçek kullanıcı deneyimine ilişkin verilerdir:

  • 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ızdan nerede ayrıldığını ve formlarınızla etkileşimde bulunurken hangi işlemleri yaptıklarını gösterir.
  • Web sitesi performansı: Kullanıcı odaklı metrikler, ödeme sayfalarınızın yavaş yüklenmesinin durumunu ve yavaş yükleniyorsa bunun nedenini gösterebilir.

Sayfa analizi, etkileşim analizi 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 artırıp artırmadığı gibi soruları yanıtlayabilirsiniz.

Böylece çabayı önceliklendirmek, değişiklikler yapmak ve başarıyı ödüllendirmek için sağlam bir temel oluşturabilirsiniz.

Öğrenmeye devam edin

Fotoğraf, @rupixen tarafından Unsplash'ta.