Mobil E-Ticaret Tasarımı: Tek Elle Alışveriş için Sayfa Sayfa İlkeler

Türkiye'de e-ticaret trafiğinin dörtte üçünden fazlası mobilden geliyor; ama mobil dönüşüm oranı masaüstünün yarısı civarında. Aradaki fark, mobil tasarımın çoğu sitede masaüstünün küçültülmüş hali olmasından kaynaklanır: küçük butonlar, uzun formlar, gizlenmiş fiyat, kaybolan sepet. Mobil öncelikli tasarım, telefon ekranında tek elle, hareket halinde, dikkat dağınıkken alışveriş yapan müşteri için kurulan tasarımdır. Bu yazı, e-ticarette mobil tasarımın ilkelerini sayfa sayfa anlatıyor: ana sayfa, kategori ve filtre, ürün sayfası, sepet ve ödeme, arama, gezinme ve performans; ölçüm ve sık hatalarla.

Mobil müşteri nasıl davranır?

Tek elle, başparmakla, çoğunlukla dikey kaydırarak; sayfaya 5 ile 15 saniye ayırır; bildirim ve mesajla bölünür; kararını çoğu zaman başka bir cihazda ya da sonra tamamlar. Tasarım bu davranışa uyar: ilk ekran karar için yeterli bilgiyi verir, her adım kısa, her eylem tek dokunuş, kaldığı yerden devam kolay (sepet ve kayıtlı bilgiler).

Gezinme ve başlık

• Üst çubuk sade: logo, arama, sepet (adet rozetiyle), menü
• Menü tam ekran, kategoriler büyük ve tıklanabilir, alt kategoriler açılır
• Arama kutusu üstte görünür (ikona gizlenmiş arama daha az kullanılır); yazarken öneri, popüler aramalar, kategori önerisi
• Yapışkan üst çubuk kaydırınca küçülür ama kaybolmaz
• Geri dönüşte kaydırma konumu korunur (kategori listesinde ürüne girip dönen müşteri başa dönmez)

Ana sayfa

Mobil ana sayfa bir vitrin değil bir yönlendirme sayfasıdır: kampanya bandı (tek satır), ana kategoriler (görselli, 6 ile 8), öne çıkan ürünler, güven satırı (kargo, iade, güvenli ödeme). Slider'lar mobilde az kaydırılır ve yavaştır; tek güçlü görsel ve net buton daha iyi. Ana sayfanın uzunluğu üç dört ekranı geçmemeli.

Kategori ve filtre

• Ürün kartları iki sütun; görsel, ad, fiyat, taksit, puan, varsa indirim etiketi; sepete ekle kartta (varyantsız ürünlerde)
• Filtre ve sıralama tek çubukta üstte, kaydırınca yapışkan; filtre tam ekran panelde açılır, seçili filtre sayısı görünür, sonuç sayısı anlık güncellenir, "uygula" butonu altta sabit
• Sonsuz kaydırma ya da "daha fazla yükle"; sayfalama SEO için arka planda korunur
• Kategori giriş metni kısa, uzun rehber metin listenin altında açılır

Ürün sayfası: ilk ekran karar ekranı

İlk ekranda: görsel (kaydırılabilir galeri, nokta göstergesi, yakınlaştırma), ürün adı, fiyat ve taksit, puan ve yorum sayısı, varyant seçici, stok ve teslimat bilgisi, sepete ekle. Yapışkan alt bar: fiyat ve sepete ekle; kaydırınca da erişilebilir.

Sonraki ekranlar: kargo ve iade satırı, açıklama (açılır bölümler: özellikler, ölçü tablosu, kullanım, SSS), yorumlar (fotoğraflı önde), tamamlayıcı ürünler. Sekmeler mobilde kötü çalışır; açılır bölümler daha iyi. Ölçü tablosu görsel değil tablo; beden seçicide beden rehberi bağlantısı.

Sepet ve ödeme

Sepet: ürün, adet değiştirme, kaldırma, ara toplam, kargo eşiği mesajı, kupon alanı (katlanır), "ödemeye geç" yapışkan altta. Sepete ekleme sonrası tam sayfa yönlendirme yerine alt bildirim ve "sepete git" seçeneği; müşteri alışverişe devam edebilir.

Ödeme adımı mobilde kaybın en büyük olduğu yer:

• Misafir alışveriş öne, üyelik sonra
• Tek sayfa ya da net adımlar (adres, kargo, ödeme) ilerleme göstergesiyle
• Form alanları en aza: ad, telefon, adres (il ilçe seçici, adres metni), e-posta; fatura adresi "aynı" varsayılan
• Doğru klavye tipi: telefon için sayısal, e-posta için e-posta klavyesi
• Otomatik doldurma ve kayıtlı adres/kart; ödeme sağlayıcısının kayıtlı kart ve tek tık ödeme seçenekleri
• Taksit tablosu net, toplam tutar her adımda görünür
• 3D Secure sayfası mobil uyumlu (sağlayıcıya bağlı; test edilir)
• Hata mesajları alanın yanında ve anlaşılır
• Sözleşme onayı tek kutu, metin bağlantıyla

Arama

Mobilde arama, gezinmenin yerini alır. Yazım hatası toleransı, öneri, son aramalar, popüler ürünler, sonuç sayfasında filtre; boş sonuçta alternatif öneri. Sesli arama ve görsel arama butonları (sistem destekliyorsa) mobilde belirgin fayda sağlar. Ayrıntı site içi arama optimizasyonu yazısında.

Performans

Mobil tasarım hızla birlikte gelir: WebP ve doğru boyutta görsel, tembel yükleme, az script, önbellek. LCP 2,5 saniye altı, INP 200 ms altı, CLS 0,1 altı. Yavaş tasarım, iyi tasarım değildir. Ayrıntı site hızı nasıl artırılır yazısında.

Dokunma ve erişilebilirlik

Dokunma alanları en az 44 piksel; butonlar arasında boşluk; başparmak bölgesi (ekranın alt üçte ikisi) kritik eylemler için; metin en az 16 piksel; kontrast yeterli; form etiketleri görünür; bağlantılar yalnızca renkle değil. Pop-up'lar mobilde ekranı kaplamaz ve kolay kapanır; tam ekran pop-up hem kullanıcıyı hem Google'ı rahatsız eder.

Ölçüm

Cihaz bazlı dönüşüm oranı, mobil sepete ekleme, mobil ödeme adımı tamamlanma, mobilde arama kullanımı ve boş sonuç oranı, mobil LCP; hepsi masaüstüyle karşılaştırmalı. Hedef: mobil dönüşümün masaüstünün yüzde 70'ine yaklaşması. Isı haritası ve oturum kaydı araçları, mobilde nerede takılındığını gösterir.

Bir müşterimiz (aksesuar) mobil ödeme adımını dört alana indirip misafir alışverişi öne aldı, yapışkan sepete ekle ve tam ekran filtre ekledi; mobil dönüşüm yüzde 0,9'dan yüzde 1,6'ya çıktı, masaüstü değişmedi.

Sık hatalar

• Masaüstü tasarımın küçültülmüş hali
• Fiyat ve sepete eklenin ilk ekranda olmaması
• Küçük butonlar ve sıkışık bağlantılar
• Uzun ödeme formu ve zorunlu üyelik
• Yanlış klavye tipi
• Tam ekran pop-up
• Sekmeli ürün açıklaması
• Mobilde hız ölçmemek

Sistemimizin teması mobil öncelikli ve hız için test edilmiş; özellikler sayfası. Ödeme adımı için ödeme sayfası optimizasyonu. Terimler: mobil ticaret, ödeme adımı.