Ödeme sayfası (checkout) tasarımı: kurallar ve örnek
Checkout (ödeme sayfası) tasarımı, sepetteki ürünü siparişe çeviren adımların düzenidir. İyi bir checkout misafir ödemeye izin verir ve kargo dahil toplam tutarı sepette gösterir. Kaç adım kaldığını dürüstçe söyler. Hata olunca girilen bilgiyi silmez. Mobilde doğru klavyeyi açar, kart alanlarını da formun geri kalanından ayırır.
· Son güncelleme:
Kısaca
Checkout, para kazandığınız ekrandır. Bu ekrana gelen kullanıcı ürününü seçmiş ve sepete atmıştır. Burada kaybettiğiniz kişilerin bir kısmı, kararını çoktan vermiş müşterilerdir.
Baymard Institute'un 22 Eylül 2025'te güncellenen listesine göre ortalama sepet terk oranı %70,22. Bu rakam 50 ayrı çalışmanın ortalaması. Yani sepete ürün ekleyen her 10 kişiden 7'si siparişi tamamlamıyor.
Terkin bir kısmını tasarım çözemez. Ama aynı sayfaya göre büyük bir e-ticaret sitesi, ödeme tasarımını iyileştirirse dönüşüm oranını ortalama %35,26 artırabilir. Bu sayfada o düzeltmelerin kalıbını anlatıyorum.
- Hesap açmayı zorunlu tutmayın, misafir ödemeyi öne koyun.
- Kargo dahil toplam tutarı sepette gösterin.
- Adım göstergesi gerçek adımları birebir yansıtsın.
- Hata olunca girilen bilgiyi, kart numarası dahil, silmeyin.
- Kart alanlarını görsel olarak ayırın, güven işaretini onların yanına koyun.
- Mobilde doğru klavyeyi açın ve tarayıcının otomatik doldurmasını bozmayın.
Sepet terki neden olur
Baymard, ABD'li çevrimiçi alışverişçilere ödemeyi neden yarıda bıraktıklarını soruyor. En sık cevap "yalnızca göz atıyordum" (%42). Bunu çıkarınca kalan sebepler şöyle sıralanıyor:
| Terk sebebi | Oran |
|---|---|
| Ek maliyetler çok yüksek (kargo, vergi, ücret) | %40 |
| Teslimat çok yavaştı | %20 |
| Siteye kart bilgimi emanet etmedim | %19 |
| Site hesap oluşturmamı istedi | %18 |
| Ödeme süreci çok uzun ya da karmaşık | %17 |
| Sitede hata çıktı ya da site çöktü | %17 |
| İade koşulları tatmin etmedi | %13 |
| Toplam tutarı en başta göremedim | %12 |
| Kartım reddedildi | %10 |
| Yeterli ödeme yöntemi yoktu | %9 |
Kaynak: Baymard Institute, sepet terki listesi, 22 Eylül 2025 güncellemesi. Oranların toplamı 100'ü geçiyor, yani bir kişi birden fazla sebep söyleyebiliyor.
Tabloya tasarımcı gözüyle bakınca bir şey dikkatimi çekiyor. Listenin yarısından fazlası ürünle değil, ödeme ekranının kendisiyle ilgili. Hesap zorunluluğu, uzun form, hata, görünmeyen toplam ve güven duygusu doğrudan arayüz kararlarıdır.
Kargo ücreti ve teslimat hızı ise iş kararıdır. Tasarım bunları ucuzlatamaz. Ama bunların ne zaman ve nasıl gösterileceğini tasarım belirler. Bu da terki etkiler.
Checkout tasarım kuralları
1. Misafir ödemeyi en belirgin seçenek yapın
Zorunlu kayıt, ödeme akışının en bilinen tuzağıdır. Bu tuzağın en ünlü örneğini 300 milyon dolarlık buton sayfasında anlattım. Burada yalnızca bugünkü kuralı veriyorum.
Edward Scott'ın 2023 tarihli Baymard yazısına göre sitelerin %47'si misafir ödemeyi en belirgin seçenek yapmıyor. Seçeneğin sayfada olması yetmiyor, ilk bakışta görünmesi gerekiyor.
Aynı yazı bunun nasıl yapılacağını anlatır:
- Etikette "misafir" kelimesi geçsin: "Misafir olarak öde" gibi. Kullanıcı tam olarak bu kelimeyi arar. "Devam" gibi belirsiz bir etiket onu yavaşlatır.
- Seçenek düz bir bağlantı değil, buton olsun. Baymard'ın testlerinde bağlantı hem masaüstünde hem mobilde gözden kaçtı. Buton dokunmatik ekranda da daha kolay hedeflenir.
- Hesap seçim adımında en üstte, giriş ve kayıt alanlarının üstünde dursun.
- Hesabı olan biri de misafir olarak devam edebilsin. Scott'a göre unutulan şifreler ve sıfırlama adımındaki kesintiler terke yol açabilir.
Hesap açtırmak istiyorsanız bunu sona bırakın. Scott'ın Eylül 2023 yazısına göre sitelerin %42'si, kullanıcıyı ödemeden önce ya da ödeme sırasında hesap önerisiyle bölüyor.
Scott'ın önerdiği yol, hesabı onay ekranında teklif etmek. Bilgiler zaten girildiği için o noktada yalnızca bir şifre istemek yeter.
Hesap açan kullanıcıyı da şifre kurallarıyla yormayın. Kullanıcının ancak bir hata mesajından öğrendiği her kural, satın almanın hemen önünde bir engel daha demektir.
2. Adım göstergesi gerçek adımları göstersin
Çok adımlı bir ödemede kullanıcının ilk sorusu "daha ne kadar var?" olur. Adım göstergesi bu soruyu cevaplar, ama yalnızca doğru bilgi verirse işe yarar.
Carl MacDonald'ın Nisan 2026'da yayımlanan, Kasım 2026'da güncellenen Baymard rehberi açık bir kural koyar: gösterge, ödeme sürecinin birebir haritası olmalı. Adımları gizlemek ya da gruplamak kullanıcının yönünü şaşırtır.
Aynı rehber, geçilen adımların tıklanabilir olmasını önerir. Kullanıcılar geri dönmek için göstergeye tıklamayı dener. Tıklanmayan bir gösterge, kullanıcıyı tarayıcının geri tuşuna gönderir.
Rehber bu yüzden geri tuşunun da desteklenmesini ve geri dönülünce form verisinin korunmasını ister.
Benim eklediğim kural şu: göstergede "Adım 2 / 4" yazıyorsa dördüncü adımdan sonra sürpriz bir ekran çıkmasın. Banka doğrulama ekranı gibi kontrolünüzde olmayan bir adım varsa, onu ödeme adımında önceden söyleyin.
3. Toplam maliyeti erken gösterin
Tablodaki en büyük sebep ek maliyetler (%40). Buna "toplam tutarı en başta göremedim" (%12) eklenir. İkisi aynı soruna çıkar: kullanıcı ödeyeceği tutarı ancak son adımda öğreniyor.
MacDonald'ın rehberi kargoyu ve ücretleri son tıklamada değil, sepette göstermeyi önerir. Adres henüz bilinmiyorsa tahmini bir kargo ücreti ya da "ücretsiz kargo sınırı" yazmak, hiç yazmamaktan iyidir.
Son adımda beliren bir hizmet bedeli kullanıcıya hile gibi gelir. Bu davranışın adını dark pattern rehberinde "gizli maliyet" olarak anlattım. Ekip bunu bilerek yapmasa da kullanıcı aynı şeyi hisseder.
Tutarı ödeme butonunun etiketinde de tekrarlayın. "Siparişi onayla" yerine "1.298,90 TL öde" diyen bir buton, kullanıcının son kontrolünü kolaylaştırır.
4. Hataları yönetin, girilen bilgiyi silmeyin
Hata mesajının nerede ve nasıl yazılacağını form tasarımı sayfasında ayrıntılı anlattım. Checkout'a özgü iki konu daha var.
Birincisi, hata çıkınca formu temizlemek. MacDonald'ın rehberi bunu kritik bir hata sayar. Sonia Sousa'nın Şubat 2024 yazısına göre sitelerin %34'ü bir hata olduğunda kart numarasını siliyor.
Sousa'nın önerisi, kart dışındaki alanları önce tarayıcıda doğrulamak. Böylece adresteki bir eksik yüzünden sayfa yeniden yüklenmez ve kart bilgisi kaybolmaz. Kart numarasındaki yazım hatası da Luhn kontrolüyle, alan doldurulurken yakalanabilir.
İkincisi, mesajın ne kadar özgül olduğu. Mesaj, hatanın türüne göre değişmeli. "Geçersiz kart numarası" yazısını okuyan kullanıcı tahmin yürütür. "Kart numarası 16 haneli olmalı, 15 hane girdiniz" yazısını okuyan ise ne yapacağını bilir.
Kartın bankadan reddedilmesi de bir hata durumudur. Bu durumda kullanıcıya başka bir kart ya da yöntem denemesini söyleyin ve adres bilgilerini koruyun.
5. Güveni kart alanlarının yanında kurun
Ödemeyi yarıda bırakanların %19'u, kart bilgisini siteye emanet etmediğini söylüyor. Ama kullanıcı güvenliği teknik olarak ölçmez. Jamie Holst'un 2012 tarihli Baymard yazısına göre kullanıcı buna içgüdüsüyle karar verir.
HTTPS kullanan bir sayfada bütün alanlar aynı şekilde şifrelenir. Buna rağmen Holst, kart alanlarını çerçeve ya da farklı bir zemin rengiyle formun geri kalanından ayırmayı önerir. Güvenlik rozeti de sayfanın altında ya da kenarında değil, kart alanlarının hemen yanında durmalı.
Güven yalnızca rozetle kurulmaz, iade koşulları da %13 ile tabloda. Ödeme ekranındaki kısa bir "14 gün içinde ücretsiz iade" satırı, politika sayfasına giden bir bağlantıdan daha çok işe yarar. O satıra kendi iade koşulunuzu yazın.
Telefon numarası da güvenle ilgilidir. Baymard'ın 2026 checkout değerlendirmesine göre sitelerin %47'si telefonun neden istendiğini açıklamıyor. Aynı yazıda, Baymard anketine katılanların %68'i telefon vermekte isteksiz olduğunu söylüyor. Alanın altına bir cümle yazın: "Kargo firması teslimat günü arar."
6. Mobili ayrı tasarlayın
Aynı değerlendirmeye göre mobil sitelerin %59'unun ödeme deneyimi "vasat" ya da daha kötü. Telefonda fazladan her alan ve yanlış açılan her klavye, masaüstündekinden daha çok emek ister.
- Alanın türüne uygun klavyeyi açın. Posta kodu ve kart numarası için rakam klavyesi gelmeli.
- Tarayıcının otomatik doldurmasını bozmayın. Baymard'ın rehberi otomatik doldurmayla tam uyumu açıkça ister. HTML'de doğru
autocompletedeğerleri bunu sağlar. - Sayfa açılır açılmaz klavyeyi açmayın. Baymard, bunun misafir ödeme butonunu klavyenin arkasına saklayabileceğini yazar.
- Kart numarasını boşluklarla gruplayarak biçimlendirin. Ekrandaki alan, kullanıcının elindeki karta benzesin.
- Butonlar parmakla rahat basılacak boyutta olsun. WCAG 2.2'deki 2.5.8 ölçütü (AA) birkaç istisna dışında hedefler için en az 24 × 24 CSS piksel ister. Ödeme butonunu bundan büyük yapın; Fitts yasası neden büyük ve yakın hedefin daha hızlı basıldığını açıklar.
Bir de aynı bilgiyi iki kez istemeyin. WCAG 2.2'nin 3.3.7 ölçütü (A düzeyi), daha önce girilen bilginin ya kendiliğinden doldurulmasını ya da seçilebilmesini ister. W3C'nin verdiği örnek de doğrudan checkout'tan: "fatura adresim teslimat adresiyle aynı" kutusu.
Mobil uygulamada ödeme akışı kuruyorsanız mobil uygulama tasarımı rehberi ekran yapısı için iyi bir başlangıç.
Misafir ödeme ve zorunlu kayıt yan yana
Aşağıda aynı mağazanın iki ödeme akışı var. Sepet, ürün ve tutar aynı. Tek fark, birinin ödemeden önce hesap istemesi.
İkisini de sonuna kadar götürün. Klavyeyle de çalışır: Tab ile butona gelin, Enter'a basın. Her adımda odak yeni adımın başlığına geçer ve sayaç güncellenir.
Örnek bir mağazanın iki ödeme akışı, gerçek bir siteden alınmadı. Alanlar örnek veriyle dolu ve değiştirilemez; kendi kart bilginizi yazmanız gerekmez. İki akışı da sonuna kadar götürün, her akışın üstündeki sayaç adımı ve karşınıza çıkan alan sayısını gösterir.
Zorunlu kayıtlı akışta iki adım ve üç alan fazladan geliyor. Asıl maliyet sayaçta görünmüyor. Kullanıcı önce şifre kurallarını okuyor. Sonra kodu bulmak için e-postasına gidiyor ve ödeme ekranından uzaklaşıyor.
Misafir akışta da hesap açılabiliyor, yalnızca sona taşınmış. Onay ekranında tek bir şifre alanı var, çünkü e-posta, ad ve adres zaten girildi. Scott'ın önerdiği yapı tam olarak bu.
Adım göstergesine de bakın. İki akışta da çubuk gerçek adım sayısını gösteriyor. Zorunlu kayıtlı akış altı parçalı çubuğu ilk ekranda gösterdiği için kullanıcı daha başta yolun uzunluğunu görüyor.
Checkout optimizasyonu: nereden başlamalı
Checkout'u düzeltmeye veriden başlarım. Analitikte her adıma kaç kişinin girip kaçının bir sonrakine geçtiğine bakarım. En büyük düşüş hangi adımdaysa ilk orayı açarım.
Akışı telefonda baştan sona kendiniz bitirin. Gerçek bir siparişi, gerçek bir kartla verin. Karşınıza çıkan her adımı ve her sürprizi not edin.
Hesap zorunluluğunu kaldırın. Audit'lerde gördüğüm en hızlı kazanç çoğu zaman budur. Misafir seçeneği varsa en belirgin seçenek olup olmadığına bakın.
Toplam tutarı öne çekin. Kargo ve ücretler sepette görünsün.
Hata durumlarını tek tek deneyin. Eksik alan, reddedilen kart ve hatalı kupon gibi durumlarda formun ne yaptığına bakın. Bilgi siliniyorsa bunu önce düzeltin.
Alanları sayın ve azaltın. Her alan için "bu olmadan sipariş gönderilir mi?" diye sorun.
Değişikliği ölçün. Her değişiklikten sonra aynı adımın düşüş oranına yeniden bakın. Birden fazla şeyi aynı anda değiştirirseniz hangisinin işe yaradığını bilemezsiniz.
Ödeme akışını dışarıdan bir gözle kontrol ettirmek isterseniz UX Audit tam bu iş için. Tek bir akışı, örneğin mobilde misafir ödemeyi, baştan sona inceliyorum.
Benim notum
Audit'lerde ödeme akışında en sık gördüğüm sorun sürpriz maliyettir. Sepette 1.249 TL yazan ürün son ekranda kargo ve hizmet bedeliyle başka bir rakama dönüşüyor. Kullanıcı o an siteyi bir pazarlıkçı gibi görmeye başlıyor.
İkinci sırada geri tuşu gelir. Kullanıcı adresini düzeltmek için geri basar ve bütün form boşalır. Ekip bunu fark etmez, çünkü test hesabında bilgiler hep kayıtlıdır.
Bu yüzden ödeme akışını her zaman boş bir tarayıcıda, misafir olarak ve telefondan denerim. Ekibin her gün gördüğü akış, müşterinin ilk kez gördüğü akış değildir.
Kontrol listesi
- Misafir ödeme var, etiketinde "misafir" kelimesi geçiyor ve en üstte buton olarak duruyor.
- Hesap açma teklifi onay ekranında, yalnızca şifre istiyor.
- Kargo ve ücretler sepette görünüyor, ödeme butonunda tutar yazıyor.
- Adım göstergesi gerçek adımları birebir gösteriyor, geçilen adımlar tıklanabiliyor.
- Hata olunca kart numarası dahil hiçbir bilgi silinmiyor.
- Hata mesajı neyin yanlış olduğunu ve nasıl düzeleceğini söylüyor.
- Kart alanları ayrı bir kutuda, güven işareti onların yanında.
- Telefon alanının neden istendiği yazıyor.
- Mobilde doğru klavye açılıyor, otomatik doldurma çalışıyor.
- Fatura adresi teslimat adresiyle aynıysa tek kutuyla geçilebiliyor.
Sık sorulanlar
Ortalama sepet terk oranı nedir?
Baymard Institute'un 22 Eylül 2025'te güncellenen listesine göre 50 çalışmanın ortalaması %70,22. Yani sepete ürün ekleyenlerin yaklaşık 10'da 7'si siparişi tamamlamıyor.
Tek sayfalık checkout mı, çok adımlı checkout mu?
İkisi de iyi çalışabilir. Baymard'ın checkout rehberi ilkelerini akış tek sayfa da olsa çok sayfa da olsa geçerli sayar. Rehber yalnızca adım sayısını değil, algılanan çabayı azaltmayı önerir. Çok adımlı akışta adım göstergesi gerçek adımları birebir göstermelidir.
Misafir ödeme sunarsam müşteri hesabı kaybetmez miyim?
Hayır. Hesap açmayı onay ekranına taşıyın. Bilgiler zaten girildiği için orada yalnızca bir şifre istemek yeter ve satın alma kesilmez.
Checkout'ta güven rozeti işe yarar mı?
Doğru yere koyarsanız yardımcı olur. Baymard'a göre kullanıcı güvenliği içgüdüsüyle değerlendirir. Bu yüzden kart alanlarını görsel olarak ayırmayı ve güvenlik işaretini bu alanların hemen yanına koymayı önerir.
Kaynaklar (9)
- Baymard Institute, Cart Abandonment Rate Statistics. 22 Eylül 2025 güncellemesi; %70,22 ortalama, terk sebepleri, %35,26
- Edward Scott, Make “Guest Checkout” the Most Prominent Option, Baymard Institute. 17 Ocak 2023; %47, etiket, buton ve yerleşim önerileri
- Edward Scott, Save Account Creation for the Confirmation Step, Baymard Institute. 19 Eylül 2023; %42
- Edward Scott, Checkout UX 2026: 10 Pitfalls and Best Practices, Baymard Institute. 13 Kasım 2024, güncelleme 3 Kasım 2026; mobilde %59 vasat ya da kötü, telefonu açıklamayan %47, telefon vermekte isteksiz %68
- Carl MacDonald, The Checkout UX Guide, Baymard Institute. 23 Nisan 2026, güncelleme 2 Kasım 2026; adım göstergesi, geri tuşu, sepette maliyet, otomatik doldurma, mobil klavye
- Jamie Holst, Visually Reinforce Your Credit Card Fields, Baymard Institute. 21 Ağustos 2012; içgüdüyle güven, kart alanlarını ayırma ve rozet yeri
- Sonia Sousa, Retain Data in Sensitive Credit Card Fields after Validation Errors, Baymard Institute. 6 Şubat 2024; %34, önce kart dışı alanları doğrulama, Luhn kontrolü
- W3C, Understanding Success Criterion 3.3.7: Redundant Entry (WCAG 2.2). A düzeyi; fatura ve teslimat adresi örneği
- W3C, Understanding Success Criterion 2.5.8: Target Size (Minimum) (WCAG 2.2). AA düzeyi; istisnalarla 24 × 24 CSS piksel