Ödeme ve adres formu 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 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, 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 öğeleri kullanın: <form>, <input>, <label> ve <button>.
• Her form alanını bir <label> ile etiketleyin.
• Yerleşik tarayıcı özelliklerine erişmek için HTML öğesi özelliklerini kullanın. Özellikle type ve autocomplete özelliklerini uygun değerlerle kullanın.
• Ödeme kartı numaraları gibi artırılmaması gereken sayılar için type="number" kullanmaktan kaçının. Bunun yerine type="text" ve inputmode="numeric" politikalarını kullanın.
• input, select veya textarea için uygun bir otomatik tamamlama değeri varsa bunu kullanmanız gerekir.
• Tarayıcıların formları otomatik olarak doldurmasına yardımcı olmak için giriş name ve id özelliklerine, sayfa yüklemeleri veya web sitesi dağıtımları arasında değişmeyen sabit değerler verin.
• Gönder düğmeleri, dokunulduktan veya tıklandıktan sonra devre dışı bırakılır.
• Verileri yalnızca form gönderilirken değil, giriş sırasında da doğrulayın.
• Varsayılan olarak misafir ödemesini etkinleştirin ve ödeme tamamlandıktan sonra hesap oluşturma işlemini basitleştirin.
• Ödeme sürecindeki ilerlemeyi net adımlar ve harekete geçirici net mesajlarla gösterin.
• Dağınıklığı ve dikkat dağıtan öğeleri kaldırarak potansiyel ödeme çıkış noktalarını sınırlayın.
• Ödeme sırasında tam sipariş ayrıntılarını gösterin ve sipariş ayarlamalarını kolaylaştırın.
• İhtiyacınız olmayan verileri istemeyin.
• İyi bir nedeniniz yoksa tek bir girişle ad isteyin.
• Adlar ve kullanıcı adları için yalnızca Latin alfabesindeki karakterleri zorunlu kılmayın.
• Çeşitli adres biçimlerine izin verin.
• Adres için tek bir textarea kullanabilirsiniz.
• Fatura adresi için otomatik tamamlama özelliğini kullanın.
• Gerekli yerlerde uluslararası hale getirin ve yerelleştirin.
• Posta kodu adresi arama özelliğini kullanmaktan kaçınabilirsiniz.
• Uygun ödeme kartı otomatik tamamlama değerlerini kullanın.
• Ödeme kartı numaraları için tek bir giriş kullanın.
• Otomatik doldurma deneyimini bozuyorsa özel öğeler kullanmaktan kaçının.
• Hem sahada hem de laboratuvarda test yapın: Sayfa analizleri, etkileşim analizleri ve gerçek kullanıcı performans ölçümü.
• Çeşitli tarayıcılarda, cihazlarda ve platformlarda test edin.

Anlamlı HTML kullanma

İş için oluşturulmuş öğ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 artırır ve işaretlemenize anlam katar.

HTML öğelerini amaçlandığı şekilde kullanma

Formunuzu <form>

<input> öğelerinizi <form> içine sarmamak ve veri gönderme işlemini tamamen JavaScript ile yapmak isteyebilirsiniz.

Bunu yapmayın!

HTML <form>, tüm modern tarayıcılarda yerleşik olarak bulunan güçlü bir özellik grubuna erişmenizi sağlar ve sitenizin ekran okuyucular ile diğer yardımcı cihazlar tarafından erişilebilir olmasına yardımcı olabilir. Ayrıca, <form> sınırlı JavaScript desteği olan eski tarayıcılarda temel işlevselliği oluşturmayı ve kodunuzda bir aksaklık olsa bile form gönderimini etkinleştirmeyi kolaylaştırır. Bu, JavaScript'i gerçekten 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 kayıt özelliği varsa her birini kendi <form> öğesine yerleştirin.

Öğ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 ve ekran okuyucular için en iyi sonucu verir. Bir etikete dokunulduğunda veya tıklandığında odak, etiketle ilişkili girişe taşınır. Ekran okuyucular, etiket veya etiketin girişi odaklandığında etiket metnini sesli okur.

Düğmeleri faydalı hale getirme

Düğmeler için <button> kullanın. <input type="submit"> da 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 stil verilebilir.

Her form gönderme düğmesine ne yaptığını belirten bir değer verin. Ödeme sürecine yönelik her adımda, ilerlemeyi gösteren ve sonraki adımı belirginleş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 Devam Et olarak etiketleyin.

Kullanıcı gönder düğmesine dokunduktan veya tıkladıktan sonra bu düğmeyi devre dışı bırakmayı düşünebilirsiniz. Bu özellikle kullanıcının ödeme yaptığı veya sipariş verdiği durumlarda önemlidir. Birçok kullanıcı, düzgün çalışıyor olsalar bile düğmeleri tekrar tekrar tıklar. Bu durum, ödeme sürecini olumsuz etkileyebilir 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, 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 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 onlara neyin yanlış gittiğini ve sorunu düzeltmek için ne yapmaları gerektiğini açıklayın. Bu durum, özellikle veri girişinin daha zor olduğu mobil cihazlarda önemlidir. Eksik veya geçersiz form verileri, kullanıcı formu göndermeye çalıştığında ekranında görünmeyebilir.

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.

Tarihler için özel select öğeleri kullanmaktan kaçının. Doğru şekilde uygulanmadığında otomatik doldurma deneyimini bozar ve eski tarayıcılarda çalışmaz. Doğum yılı gibi sayılar için select yerine input öğesini kullanmayı düşünebilirsiniz. Çünkü rakamları manuel olarak girmek, özellikle mobil cihazlarda uzun bir açılır listeden seçim yapmaktan daha kolay ve daha az hataya neden olabilir. Mobil cihazlarda doğru klavyenin kullanılmasını sağlamak için inputmode="numeric" simgesini kullanın. Kullanıcının verileri uygun biçimde girdiğinden emin olmak için metinle veya yer tutucuyla 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 tamamlama özelliğini kullanma

Uygun autocomplete değerlerinin kullanılması, tarayıcıların verileri güvenli bir şekilde saklayarak 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 formu terk etme oranlarının yüksek olmasını önlemek için çok önemlidir. Otomatik tamamlama, erişilebilirlik açısından da birçok avantaj sunar.

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 nasıl doğru şekilde 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. Faturalandırma adresini bir formda göstermek yerine, faturalandırma adresini düzenleme bağlantısı sağlayarak (veya summary ve details öğelerini kullanarak) görsel dağınıklığı azaltın.

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

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

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

Müşterileri "yanlış bir şey yaptıkları" için azarlamaktan kaçının. Bunun yerine, sorunları anında çözmelerine yardımcı olarak kullanıcıların formları daha hızlı ve kolay bir şekilde doldurmasına yardımcı olun. Ödeme işlemi sırasında müşteriler, bir ürün veya hizmet için şirketinize para ödemeye çalışır. Bu durumda göreviniz onları cezalandırmak değil, 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, öğenin değerinin geçerli olup olmadığına bağlı olarak otomatik olarak ayarlanır. Geçerli veya geçersiz değerlere sahip öğeleri stilize etmek için kullanılabilecek :valid ve :invalid CSS sözde sınıfları da aynı şekilde ayarlanır.

Örneğin, aşağıdaki HTML, 1900 ile 2020 arasında bir doğum yılı için girişi belirtir. type="number", giriş değerlerini yalnızca min ve max ile belirtilen aralıktaki sayılarla sınırlar. Aralığın dışında bir sayı girmeye çalışırsanız giriş geçersiz 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 de temel doğrulama yapar.

Form gönderildiğinde tarayıcılar, odaklanmayı otomatik olarak sorunlu veya gerekli değerlerin eksik olduğu alanlara ayarlar. JavaScript gerekmez.

Gönder düğmesini tıkladıklarında hata listesi sağlamak yerine, kullanıcı verileri girerken satır içi doğrulama yapın ve geri bildirim verin. Form gönderildikten sonra sunucunuzdaki verileri doğrulamanız gerekiyorsa bulunan tüm sorunları listeleyin ve geçersiz değerlere sahip tüm form alanlarını net bir şekilde vurgulayın. Ayrıca, düzeltilmesi gerekenleri açıklayan bir mesajı her sorunlu alanın yanında satır içi olarak 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önderilirken daha sağlam doğrulama yapmak için JavaScript'i de kullanmanız gerekir. Odak ayarlamak 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.

Daha fazla bilgi için Daha karmaşık gerçek zamanlı doğrulama için JavaScript kullanma başlıklı makaleyi inceleyin.

Kullanıcıların gerekli verileri eksik bırakmasını önleme

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

Bir form gönderildiğinde modern tarayıcılar eksik verilerin bulunduğu required alanları otomatik olarak ister ve bu alanlara odaklanır. Ayrıca, zorunlu alanları vurgulamak için :required sözde sınıfını kullanabilirsiniz. JavaScript gerekmez.

Gerekli her alanın etiketine 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ştirin

Mobil ticaret açığına dikkat edin.

Kullanıcılarınızın yorgunluk bütçesi olduğunu düşünün. Kullanıcılar, çok fazla izin isteğinde bulunursanız uygulamanızı terk eder.

Özellikle mobil cihazlarda sürtünmeyi azaltmanız ve odaklanmayı korumanız gerekir. Birçok site mobilde 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şlemlerini masaüstünde tamamlamayı tercih edebilir ancak mobil dönüşüm oranlarının düşük olması kötü kullanıcı deneyiminin de bir sonucudur. Göreviniz, mobil cihazlarda kaybedilen dönüşümleri en aza indirmek ve masaüstünde dönüşümleri en üst düzeye çıkarmaktır. Araştırmalar, daha iyi bir mobil form deneyimi sunmak 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ı doldurmaktan vazgeçme olasılığı daha yüksektir. Bu durum, özellikle kullanıcılar küçük ekranlarda gezinirken, dikkati dağılmışken veya acele ederken geçerlidir. Mümkün olduğunca az veri isteyin.

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

Online mağazalarda form sürtünmesini azaltmanın en basit yolu, misafir ödemesini varsayılan hale getirmektir. Kullanıcıları satın alma işlemi yapmadan önce hesap oluşturmaya zorlamayın. Misafir olarak ödemeye izin verilmemesi, alışveriş sepetinin terk edilmesinin başlıca nedenlerinden biri olarak gösterilmektedir.

adresinden alınmıştır

Ödeme işleminden sonra hesap kaydı seçeneği sunabilirsiniz. Bu noktada, hesap oluşturmak için ihtiyacınız olan 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österme

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

Hız kesmeden devam etmeniz gerekiyor. Ödemeye yönelik her adımda, şu anda ne yapılması gerektiğini ve bir sonraki ödeme adımının ne olduğunu net bir şekilde belirten sayfa başlıkları ve açıklayıcı düğme değerleri kullanın.

Mobil klavye 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", arama girişi için ise enterkeyhint="search" kullanın.

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

Kullanıcıların ödeme sürecinde kolayca ileri ve geri gitmelerini sağlayın. Böylece, son ödeme adımında olsalar bile siparişlerini kolayca ayarlayabilirler. Sadece sınırlı bir özet değil, siparişin tüm ayrıntılarını göster. 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 yönelik ilerlemeyi kesintiye uğratmamaktır.

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

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

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

Geri gelen kullanıcılar için ödeme akışını daha da basitleştirebilirsiniz. Bunun için, görmeleri gerekmeyen verileri gizleyin. Örneğin: Teslimat adresini düz metin olarak (formda değil) gösterin ve kullanıcıların bir bağlantıyı tıklayarak adresi değiştirmesine izin verin.

Ad ve adres girişini 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 durum, müşteri gizliliği açısından da faydalıdır ve arka uç veri maliyetini ve sorumluluğunu azaltabilir.

Tek bir ad girişi kullanma

Adları, soyadları, hitap şekillerini veya adın diğer bölümlerini ayrı ayrı saklamak için geçerli bir nedeniniz yoksa kullanıcılarınızın adlarını tek bir girişle girmesine izin verin. Tek bir ad girişi kullanmak formları daha az karmaşık hale getirir, kesip yapıştırmayı mümkün kılar ve otomatik doldurmayı kolaylaştırır.

Özellikle, iyi bir nedeniniz yoksa ön ek veya unvan (ör. Bayan, Doktor veya Lord) için ayrı bir giriş eklemeyin. Kullanıcılar isterlerse 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 unvan için bir alan eklemek, çoğu kullanıcı için adres formu otomatik doldurma deneyimini bozacaktır.

Ad otomatik doldurmayı etkinleştirme

Tam ad için name kullanın:

<input autocomplete="name" ...>

Adın 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 alfabeler konusunda mümkün olduğunca az kısıtlama uygulamanız gerekir. Adınızın "geçersiz" olduğu söylenmesi kaba bir davranış.

Doğrulama için yalnızca Latin karakterleriyle eşleşen normal ifadeler kullanmaktan kaçının. Yalnızca Latin alfabesiyle yazılmış adlar veya adresler, Latin alfabesinde olmayan karakterler içeren adları veya adresleri hariç tutar. Bunun yerine Unicode harf eşleşmesine izin verin ve arka uçunuzun 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.

<!-- Names with non-Latin characters (such as Françoise or Jörg) are 'invalid'. -->
<input pattern="[\w \-]+" ...>

<!-- Accepts Unicode letters. -->
<input pattern="[\p{L} \-]+" ...>

Çeşitli adres biçimlerine izin verme

Adres formu tasarlarken tek bir ülke içinde 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 Adres Gariplikleri'ne göz atın.)

Adres formlarını esnek hale getirme

Kullanıcıları, adreslerini uygun olmayan form alanlarına girmeye zorlamayın.

Örneğin, birçok adres bu biçimi kullanmadığı ve eksik veriler tarayıcıda otomatik doldurma özelliğinin çalışmasını engelleyebileceği için bina numarası ve sokak adının ayrı girişlerde olmasını istemeyin.

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

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

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

Eşleşecek etiketler ekleyin:

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

Bu codelab'in ilerleyen bölümlerinde yer alan yerleştirilmiş demoyu remiksleyip düzenleyerek bu özelliği deneyebilirsiniz.

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

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

textarea yaklaşımı tüm adres biçimlerine uygundur ve kesip yapıştırma 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ı kullandıysa otomatik doldurma özelliğinden yararlanamayabileceğini unutmayın.

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

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

Adres formlarınızı uluslararasılaştırma ve yerelleştirme

Kullanıcılarınızın bulunduğu yere bağlı olarak, adres formlarında özellikle uluslararasılaştırma ve yerelleştirme özelliklerini göz önünde bulundurmanız önemlidir.

Adres biçimlerinin yanı sıra adres bölümlerinin adlandırılmasının da aynı dil içinde bile farklılık gösterdiğini unutmayın.

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

Adresinizle eşleşmeyen veya beklediğiniz kelimeleri kullanmayan bir formla karşılaşmak sinir bozucu ya da kafa karıştırıcı olabilir.

Adres formlarını birden fazla yerel ayar için özelleştirmeniz gerekebilir ancak form esnekliğini en üst düzeye çıkarmak için yukarıda açıklanan teknikleri 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:

• Adres bölümleriyle ilgili çok ayrıntılı olmaktan kaçının (ör. sokak adı veya bina numarası konusunda ısrarcı olmayın).
• Mümkün olduğunda alanları required yapmaktan 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/bölge" yerine "Ülke"; "Posta kodu" yerine "Posta".

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

Posta kodu adresi arama özelliğini kullanmaktan kaçının

Bazı web siteleri, posta koduna veya ZIP 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 olası adres içerebilir.

Kullanıcıların uzun bir adres listesinden seçim yapması zordur. Özellikle mobil cihazlarda acele ediyorlarsa veya stresliyseler bu durum daha da zorlaşır. Kullanıcıların otomatik doldurma özelliğinden yararlanmasına izin vermek ve tek bir dokunma veya tıklamayla adreslerini eksiksiz olarak girmelerini sağlamak daha kolay ve hatasız olabilir.

Ödeme formlarını basitleştirme

Ödeme formları, ödeme sürecinin en önemli parçasıdır. Kötü ödeme formu tasarımı, alışveriş sepetinin terk edilmesinin yaygın bir nedenidir. Şeytan ayrıntılarda gizlidir: Küçük aksaklıklar, özellikle mobil cihazlarda kullanıcıların satın alma işlemini iptal etmesine neden olabilir. Göreviniz, kullanıcıların veri girmesini olabildiğince kolaylaştıracak formlar tasarlamaktır.

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

Ödeme kartı numarası, karttaki ad, son kullanma ayı ve yılı dahil olmak üzere ödeme kartı formlarına uygun autocomplete değerlerini 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ı bilgilerinin fiziksel bir kaydını tutması veya ödeme kartı verilerini cihazlarında güvenli olmayan bir şekilde saklaması daha olasıdır.

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

Özel öğeler doğru şekilde tasarlanmazsa otomatik doldurmayı bozarak ödeme akışını kesintiye uğratabilir ve eski tarayıcılarda çalışmaz. Diğer tüm ödeme kartı ayrıntıları otomatik tamamlama ile kullanılabilirken kullanıcı, özel bir öğede otomatik doldurma çalışmadığı için son kullanma tarihini bulmak üzere fiziksel ödeme kartını aramak zorunda kalırsa satış yapma olasılığınız düşer. Bunun yerine standart HTML öğelerini kullanıp bunları uygun şekilde stilize edebilirsiniz.

Ö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ın veri girmesi kolaylaşır, doğrulama basitleşir ve tarayıcılar otomatik doldurma özelliğini kullanabilir. PIN ve banka kodları gibi diğer sayısal veriler için de aynı işlemi yapabilirsiniz.

Dikkatlice doğrulayın

Veri girişini hem gerçek zamanlı olarak hem de formu göndermeden ö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österir ve girişe odaklanır. JavaScript gerekmez.

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

Kullanıcıların yeni bir ödeme kartı numarası girerken boşluk eklemesine izin verin. Çünkü numaralar fiziksel kartlarda bu şekilde gösterilir. Bu yöntem, kullanıcı dostudur (kullanıcıya "yanlış bir şey yaptığını" söylemeniz gerekmez), dönüşüm akışını kesintiye uğratma olasılığı daha düşüktür ve işleme başlamadan önce sayılardaki boşlukları kaldırmak kolaydır.

Çeşitli cihazlarda, platformlarda, tarayıcılarda ve sürümlerde test etme

Form öğesi işlevselliği ve görünümü değişebileceğinden ve görünüm 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 etmeniz özellikle önemlidir. BrowserStack, çeşitli cihaz ve tarayıcılarda açık kaynak projeler için ücretsiz test yapılmasına olanak tanır.

Analiz ve RUM'u uygulama

Kullanılabilirlik ve performansı yerel olarak test etmek faydalı olabilir ancak kullanıcıların ödeme ve adres formlarınızla ilgili deneyimlerini doğru şekilde anlamak için gerçek dünya verilerine ihtiyacınız vardır.

Bunun için, gerçek kullanıcıların deneyimleriyle ilgili veriler (ör. ödeme sayfalarının yüklenmesi veya ödeme işleminin tamamlanması ne kadar sürüyor) sağlayan Analytics ve gerçek kullanıcı izleme özelliğine ihtiyacınız vardır:

• Sayfa analizi: Form içeren her sayfanın sayfa görüntüleme sayısı, hemen çıkma oranı ve çıkış sayısı.
• Etkileşim analizi: Hedef dönüşüm hunileri ve etkinlikler kullanıcıların ödeme akışınızı nerede terk ettiğini ve formlarınızla etkileşimde bulunurken hangi işlemleri gerçekleştirdiğini gösterir.
• Web sitesi performansı: Kullanıcı odaklı metrikler, ödeme sayfalarınızın yüklenmesinin 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ü, özellikle sunucu günlükleri, dönüşüm verileri ve A/B testiyle birlikte kullanıldığında çok 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 çabayı önceliklendirme, değişiklik yapma ve başarıyı ödüllendirme konusunda size sağlam bir temel sağlar.

Öğrenmeye devam edin

• Oturum açma formuyla ilgili en iyi uygulamalar
• Kayıt formuyla ilgili en iyi uygulamalar
• WebOTP API ile web'deki telefon numaralarını doğrulama
• Create Amazing Forms (Harika Formlar Oluşturma)
• Mobil Form Tasarımı İçin En İyi Uygulamalar
• Daha yetenekli form kontrolleri
• Erişilebilir Formlar Oluşturma
• Credential Management API'yi kullanarak kayıt akışını kolaylaştırma
• Frank's Compulsive Guide to Postal Addresses, 200'den fazla ülkedeki adres biçimleri için faydalı bağlantılar ve kapsamlı rehberlik sunar.
• Ülke Listeleri, ülke kodlarını ve adlarını birden fazla dilde ve biçimde indirmenize olanak tanıyan bir araca sahiptir.

@rupixen tarafından Unsplash'te çekilen fotoğraf.