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

Tüm en iyi uygulamaları gösteren basit bir ödeme formu örneğini aşağıda bulabilirsiniz:

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

Yapılacaklar listesi

• Anlamı olan HTML öğeleri kullanın: <form>, <input>, <label> ve <button>.
• Her form alanını <label> ile etiketleyin.
• Yerleşik tarayıcı özelliklerine erişmek için HTML öğesi özelliklerini kullanın. Özellikle type ve autocomplete öğelerini uygun değerlerle kullanın.
• Arttırılmaması gereken sayılar (ör. ödeme kartı numaraları) için type="number" kullanmamaya çalışın. Bunun yerine type="text" ve inputmode="numeric" 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 girin.
• Dokunulduğunda veya tıklandığında gönder düğmelerini devre dışı bırakın.
• Verileri yalnızca form gönderilirken değil, giriş sırasında da doğrulayın.
• Konuk olarak ödeme seçeneğini varsayılan olarak ayarlayın ve ödeme tamamlandıktan sonra hesap oluşturmayı kolaylaştırın.
• Net harekete geçirici mesajlarla ödeme sürecindeki ilerlemeyi net adımlar halinde gösterin.
• Dağınıklığı ve dikkat dağıtıcı unsurları ortadan kaldırarak ödeme sırasındaki olası çıkış noktalarını sınırlandırın.
• Ödeme sırasında sipariş ayrıntılarının tamamını gösterin ve sipariş ayarlamalarını kolaylaştırın.
• İhtiyacınız olmayan verileri istemeyin.
• Bunun için geçerli bir nedeniniz yoksa adları tek bir girişle 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.
• Gerekirse uluslararası hale getirin ve yerelleştirin.
• Posta kodu adres arama özelliğini kullanmamaya çalışın.
• 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.
• Laboratuvarda olduğu kadar sahada da test yapın: sayfa analizleri, etkileşim analizleri ve gerçek kullanıcı performansı ölçümü.
• Çeşitli tarayıcılar, cihazlar ve platformlarda test edin.

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> 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, JavaScript desteği sınırlı olan eski tarayıcılar için temel işlevler oluşturmayı 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) kolaylaştırır.

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 yöntem, tarayıcılar ve ekran okuyucular için en iyi sonucu verir. 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ış ve yerleşik form gönderme işlevi sağlar ve kolayca biçimlendirilebilir.

Her form gönder düğmesine, ne işe yaradığını belirten bir değer verin. Ödeme adımlarının her biri için ilerlemeyi gösteren ve bir sonraki adımı açıkça belirten 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 düğmeyi tıkladıktan sonra düğmeyi devre dışı bırakabilirsiniz. Özellikle kullanıcı ödeme yaparken veya sipariş verirken bu işlemi yapabilirsiniz. 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, kullanıcıya eksik bilgileri tamamlaması 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 eksik veya geçersiz form verilerinin kullanıcı bir formu göndermeye çalıştığında 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.

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 için 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 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, ö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östermek yerine, fatura 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 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 öğeler oluşturmak üzere 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 öğelere stil uygulamak için kullanılabilen :valid ve :invalid CSS sözde sınıfları da bu şekilde ayarlanır.

Ö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, min ve max tarafından belirtilen aralıktaki yalnızca 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.

Gönder düğmesini tıkladıklarında kullanıcıya hata listesini göstermek yerine, verileri girerken satır içi doğrulama yapın ve kullanıcıya geri bildirim verin. 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 kontrol ederek yaygın hataları bulun. 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.

Ödeme sürecini basitleştirin

Mobil ticaret açığını göz önünde bulundurun.

Kullanıcılarınızın yorgunluk bütçesi 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 sunmanın 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 etkinleştirmektir. 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.

adresinden alınmıştır

Ödeme yapıldıktan sonra hesap kaydı yapma seçeneği sunabilirsiniz. Bu aşamada, hesap oluşturmak için ihtiyaç duyduğunuz verilerin çoğuna zaten sahip olursunuz. Bu nedenle, hesap oluşturma işlemi kullanıcı için hızlı ve kolay olur.

Ödeme işleminin ilerleme durumunu gösterme

İlerleme durumunu göstererek ve bir sonraki adımda yapılması gerekenleri açıklayarak ö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ınızı kesmeyin. Ödemeyle ilgili her adımda, şu anda ne yapılması gerektiğini ve bir sonraki ödeme adımını açıkça 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" ve arama girişi için enterkeyhint="search" kullanın.

enterkeyhint özelliği Android ve iOS'te desteklenir. Daha fazla bilgiyi enterkeyhint açıklamalı kılavuzundan edinebilirsiniz.

Kullanıcıların ödeme sürecinde ileri geri gitmelerini ve son ödeme adımındayken bile siparişlerini kolayca düzenlemelerini sağlayın. 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 ayarlamalarına izin verin. Ö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. Birçok başarılı perakendeci, ödeme adımından gezinme ve aramayı bile kaldırıyor.

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

Tekrar gelen kullanıcılar için, görmeleri gerekmeyen verileri gizleyerek ödeme akışını daha da basitleştirebilirsiniz. Örneğin: Teslimat adresini formda değil, düz metin olarak gösterin ve kullanıcıların bir bağlantı üzerinden adresini değiştirmelerine izin verin.

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

Adları, soyadları, unvanları veya diğer ad bölümlerini ayrı olarak depolamak 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 bilgileri adlarıyla birlikte yazabilir. 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.

Adları otomatik doldurmayı etkinleştirme

Tam ad için name kullanın:

<input autocomplete="name" ...>

Ad parçalarını 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ı 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ıtlamasız olmanız gerekir. 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ştirmesine izin verin ve arka uçlarınızın 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.

<!-- 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 ü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ın gösterildiği bir form örneği aşağıda verilmiştir:

Adres formlarınızı uluslararasılaştırma 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 uygun olmayan 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 çı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ümleri konusunda aşırı ayrıntılı olmaktan (ör. sokak adı veya bina numarası konusunda ısrar etmekten) kaçının. * Mümkün olduğunda required alanları oluşturmaktan 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, posta koduna veya posta koduna göre adres 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. 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 de aceleleri veya stresleri varsa mobil cihazlarda bu işlem daha da zordur. 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.

Ödeme formlarını basitleştirme

Ö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üksektir.

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

Doğru şekilde tasarlanmamış ö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 doldurma özelliğiyle doldurulabiliyorsa ancak kullanıcı, özel bir öğe için otomatik doldurma özelliği çalışmadığı için son kullanma tarihini görmek üzere fiziksel ödeme kartını bulmak zorunda kalıyorsa satışınızı kaybetme olasılığınız yüksektir. Bunun yerine standart HTML öğelerini kullanın ve bunlara uygun şekilde stil uygulayın.

Ö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 ayırmayın. 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.

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ı uzunluklarının 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 numaralar bu şekilde gösterildiği için kullanıcıların yeni bir ödeme kartı numarası girerken boşluk eklemesine 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 cihazlarda, platformlarda, tarayıcılarda ve sürümlerde test edin

Form öğesi işlevi ve görünümü değişiklik gösterebileceğinden ve ekran boyutundaki farklılıklar sorunlu konumlandırmalara neden olabileceğinden, adres ve ödeme formlarını özellikle kullanıcılarınız için en yaygın platformlarda test etmek önemlidir. BrowserStack, çeşitli cihaz ve tarayıcılarda açık kaynaklı projeler için ücretsiz test olanağı sunar.

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 analizleri: Form içeren her sayfanın sayfa görüntülemeleri, hemen çıkma oranları ve çıkışları.
• 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 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

• Giriş formu ile ilgili en iyi uygulamalar
• Kayıt formu ile ilgili en iyi uygulamalar
• WebOTP API ile web'de 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 Kaydolma Akışlarını Kolaylaştırma
• Frank's Compulsive Guide to Postal Addresses (Frank'ın Posta Adresleri Rehberi) 200'den fazla ülkedeki adres biçimleri için faydalı bağlantılar ve kapsamlı rehberlik sunar.
• Ülke Listeleri'nde, ülke kodlarını ve adlarını birden fazla dilde ve biçimde indirmenizi sağlayan bir araç bulunur.

Fotoğraf: Unsplash'taki @rupixen.