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.
İ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
veautocomplete
öğelerini uygun değerlerle kullanın. - Arttırılmaması gereken sayılar (ör. ödeme kartı numaraları) için
type="number"
kullanmamaya çalışın. Bunun yerinetype="text"
veinputmode="numeric"
kullanın. input
,select
veyatextarea
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
veid
ö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 işleminin tamamlanma olasılığı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 edin: 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
veinputmode
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 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, 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 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 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ö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 güçlü 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 sürtünmeyi azaltmanın en kolay yolu, misafir ödemesini varsayılan olarak ayarlamaktır. Kullanıcıları satın alma işlemi yapmadan önce hesap oluşturmaya zorlamayın. Misafir olarak ödeme yapma özelliğinin sunulmaması, alışveriş sepetini terk etmenin başlıca nedenlerinden biri olarak gösteriliyor.
Ö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ı makalesinde bulabilirsiniz.
Kullanıcıların ödeme sürecinde geri ve ileri gitmelerini, 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ır.
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ıkıştı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 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 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 girmesini önlemeye yardımcı olma
Ö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 bir 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ı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 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 kaynak projeleri 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ıların deneyimine dair veriler (ör. ödeme sayfalarının yüklenmesi veya ödemenin tamamlanması için gereken süre) bu analizler sayesinde elde edilebilir:
- 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.