Dönüşüm Artıran 10 UI/UX İlkesi: Türk E-Ticaret Siteleri İçin Pratik Rehber

Türkiye'de her 100 e-ticaret ziyaretçisinden ortalama 2-3'ü ödeme adımına ulaşıyor. Bu rakamın arkasında teknoloji sorunu yok; çoğu zaman sorun sayfanın kendisi — yanlış yerleştirilen bir buton, fazla kalabalık bir galeri ya da güven işareti olmayan bir ödeme sayfası.

1. CTA Hiyerarşisi: Tek Bir Karar, Tek Bir Buton

Sayfada birden fazla "harekete geçirici mesaj" olduğunda ziyaretçi hiçbir şeye tıklamaz. Nielsen Norman Group'un araştırmaları, rakip CTA'ların bir arada bulunmasının dönüşümü %30'a kadar düşürebildiğini gösteriyor.

Pratik kural:

Birincil CTA: Sepete Ekle / Hemen Satın Al — dolu renk, büyük
İkincil CTA: Favorilere Ekle / Karşılaştır — outlined ya da text link
Üçüncü bir CTA koyma. Koyuyorsan birincinin görsel ağırlığını ikiye katla.

Renk seçiminde marka renginizi kullanın ama kontrast oranının WCAG AA standardını geçtiğinden emin olun (minimum 4.5:1). Trendyol'un turuncu "Sepete Ekle" butonu bu standardı aşıyor ve markaya ait en tanınmış görsel bileşen hâline gelmiş durumda.

2. Beyaz Alan: Tasarım Değil, Oksijen

Boş alan "tasarımcı lüksü" değil, dönüşüm aracıdır. Kalabalık ürün sayfaları ziyaretçiyi yorar; göz nereye bakacağını bilemez ve kullanıcı sayfayı terk eder.

Ürün başlığı ile fiyat arasına en az 12px, fiyat ile CTA arasına en az 24px boşluk bırakın. Mobilde bu rakamları 1.5 ile çarpın.

3. Ürün Galerisi: Görsel = Güven

E-ticarette iade oranının en büyük nedeni "ürün görselde farklıydı" şikayetidir. Doğru galeri yapısı:

Minimum 4-6 yüksek çözünürlüklü görsel (farklı açılar)
Zoom özelliği — hover veya pinch-to-zoom (mobil)
Ürünü kullanımda gösteren en az 1 yaşam tarzı görseli
Mümkünse 360° döndürme ya da kısa video (3-8 saniyelik loop yeterli)

Hepsiburada'nın elektronik kategori sayfalarında video içeren ürünlerin dönüşüm oranı, statik görsel içerenlere kıyasla %25 daha yüksek raporlanmıştır.

4. Sepet UX: Kayıp Anında Devreye Girin

Türkiye'de ortalama sepet terk oranı %75-80 aralığında. Sepet sayfasında uygulanabilecek hızlı kazanımlar:

Mini sepet yan paneli: Kullanıcı sayfadan ayrılmadan sepeti görür
Stok uyarısı: "Yalnızca 3 adet kaldı" — aciliyet yaratır ama gerçek dışı olmamalı
Kayıtlı sepet: Oturumu kapatsa bile sepet bekliyorsa geri dönme oranı %18 artar
Tek sayfa ödeme: iyzico ve PayTR entegrasyonlarında çok adımlı akış yerine collapsed accordion yapı kullan

5. Mobil-First: Göstermelik Değil, Öncelikli

Türkiye'de 2024 itibarıyla e-ticaret trafiğinin %72'si mobil cihazlardan geliyor (Statista). Tasarımı masaüstünden başlatıp sonradan küçültmek bu gerçeklikle doğrudan çelişiyor.

Mobil-first kontrol listesi:

Touch hedefleri minimum 44x44px (Apple HIG standardı)
Butonlar parmak altında, ikonlar parmak üstünde değil
Form alanları otomatik klavye tipiyle açılsın (e-posta için type="email", telefon için type="tel")
Ödeme sayfasında otofill desteği — KuveytTürk ve Yapı Kredi kredi kartı bilgileri tarayıcıda kayıtlıysa doldurmayı engelleyen input maskeleri kaldır

6. F-Pattern: Gözün Gittiği Yere Koy

Eye-tracking araştırmaları, kullanıcıların web sayfalarını F ya da Z biçiminde taradığını gösteriyor. Ürün listeleme sayfaları için F-pattern geçerlidir:

En önemli bilgi (ürün adı, fiyat, puan) sol üstte
İkincil filtre veya rozet bilgisi ilk yatay tarama çizgisine denk gelsin
Sağ alt köşe kör noktadır — oraya kritik CTA koyma

Grid düzeninde ürün kartlarını sol hizalı tut; sağ sütun görsel dolgu için kullanılabilir ama dönüşüm elementi barındırmamalı.

7. Trust Badge Yerleşimi: Yere Değil, Anlara Koy

SSL rozetini footer'a gömmek güven vermez. Trust badge'lerin dönüşüme katkı sağladığı anlar:

Konum	Doğru Trust Badge
Ürün sayfası (fiyatın hemen altı)	İyzico / Masterpass güvencesi, "Güvenli Ödeme"
Sepet özeti	256-bit şifreleme, ücretsiz iade politikası
Ödeme adımı başlığı	Banka logoları, SSL rozeti
Başarılı sipariş	Sipariş numarası + kargo takip linki

Özellikle ilk defa alışveriş yapacak ziyaretçi için ödeme adımında iyzico, PayTR veya Stripe logosunu görmek, bilinmeyen bir sitenin güven eşiğini aşmasını sağlar.

8. Hız Algısı: Gerçek Hızdan Daha Önemli

Google'ın Core Web Vitals verileri, LCP (Largest Contentful Paint) 2,5 saniyenin altında olan sayfaların dönüşüm oranının %30 daha yüksek olduğunu gösteriyor. Ama algı bazen gerçeği geçer:

Skeleton screen: Sayfa yüklenirken içerik alanlarını gri placeholder ile doldur; kullanıcı "yükleniyor" görür ama sabırsızlanmaz
Lazy load + blur-up: Ürün görseli tam çözünürlüğe kavuşana kadar bulanık küçük versiyonunu göster
Optimistik UI: Kullanıcı sepete eklediğinde sayaç anında artsın, sunucu yanıtını bekleme

Google Search Console'daki Core Web Vitals raporunu haftada bir kontrol etmek, performans sorunlarını kullanıcıdan önce yakalamanın en pratik yoludur.

9. Ürün Sayfası Hiyerarşisi: Fold Üstü Kritik

"Fold altı" kavramı teknik olarak ölmüş olsa da davranışsal olarak hâlâ geçerli. Ürün sayfasında ilk ekran görünümünde (scroll olmadan) şunlar olmalı:

Ürün görseli (büyük, net)
Başlık ve kısa varyant seçici (renk/beden)
Fiyat + varsa indirim oranı
Birincil CTA
Kargo ve iade özeti (tek satır)

Tüm diğer içerik — açıklama, yorumlar, benzer ürünler — scroll sonrası gelir.

10. Boş Durum Tasarımı: Kayıp Fırsatı Doldur

Arama sonucu bulunamadı, sepet boş, favoriler henüz eklenmedi — bu ekranlar çoğu mağazada yalnızca bir hata mesajıdır. Oysa her boş durum bir yönlendirme fırsatıdır:

Boş sepet: "Sepetiniz boş" yerine önerilen ürünler + Alışverişe Başla butonu
Sonuç bulunamadı: Yazım önerileri + popüler kategoriler
Favoriler boş: "Bir şeyi beğenin, kaybolmasın" mesajı + öne çıkan ürünler

Bu 10 ilkenin her biri ayrı ayrı uygulanabilir ama etkileri birbirini güçlendirir. Başlamak için en kolay yer genellikle CTA rengi ve trust badge konumudur; değişiklik dakikalar içinde yapılır, etkisi bir sonraki hafta Analytics'te görünür.

Shopizayn ile mağazanı bu ilkeler doğrultusunda sıfırdan kurabilir ya da mevcut tasarımını sistematik biçimde gözden geçirebilirsin — ücretsiz deneme ile fark yaratmaya bugün başla.