Mobil e-ticaret tasarımında en önemli kural, sitenin tek elle ve başparmakla rahat kullanılabilmesidir. Sık kullanılan butonlar ekranın alt kısmına yerleştirilmeli, dokunma alanları parmak boyutuna uygun olmalı, sepete ekle butonu kaydırırken görünür kalmalı, formlar doğru klavyeyi açmalı ve sayfalar mobil veride hızlı yüklenmelidir.
Mobil e-ticaret tasarımı masaüstünden neden ayrı ele alınmalı?
Mobil tasarım ayrı ele alınmalıdır, çünkü telefon kullanan ziyaretçinin ekranı, eli, dikkati ve bağlantısı masaüstündekinden farklıdır. Masaüstü tasarımı küçültülerek elde edilen mobil görünüm bu farkları karşılamaz.
- Ekran dar olduğu için aynı anda daha az bilgi görünür, öğelerin sırası daha önemli hale gelir.
- Telefon çoğu zaman tek elle ve hareket halindeyken kullanılır.
- Fare olmadığı için üzerine gelince açılan menüler ve yakınlaştırmalar çalışmaz.
- Bağlantı hızı değişkendir; ağır sayfalar mobil veride belirgin biçimde yavaşlar.
- Trafiğin önemli bir kısmı Instagram, Facebook ve TikTok gibi uygulamaların kendi içindeki tarayıcılardan gelir.
Son madde, sosyal medya reklamıyla satış yapan markalar için ayrıca önemlidir. Uygulama içi tarayıcıda ziyaretçinin kayıtlı şifreleri ve kart bilgileri çoğunlukla bulunmaz, bu yüzden giriş ve form adımları uzar. Meta reklam yönetimi ile gelen ziyaretçinin bu tarayıcılarda nasıl bir deneyim yaşadığı ayrıca test edilmelidir. Bu nedenlerle tasarım mobile-first yaklaşımla, yani önce telefon ekranı için kurgulanıp sonra masaüstüne genişletilerek yapılmalıdır.
Başparmak bölgesi nedir ve tasarımı nasıl etkiler?
Başparmak bölgesi, telefon tek elle tutulurken başparmağın zorlanmadan ulaşabildiği ekran alanıdır. Ekranın alt ve orta kısmı rahat ulaşılan bölgedir; üst köşeler ise özellikle büyük ekranlı telefonlarda elin pozisyonunu değiştirmeyi gerektirir.
Bu durum, sık kullanılan eylemlerin ekranın alt kısmına alınması gerektiği anlamına gelir. Silme ya da iptal gibi geri alınması zor eylemler ise ana butonun hemen yanına konmamalıdır.
| Öğe | Önerilen yer | Neden |
|---|---|---|
| Sepete ekle | Altta sabit çubuk | En sık dokunulan buton rahat bölgede kalır |
| Filtrele ve sırala | Listenin üstünde, kaydırınca ekrana yapışık | Liste uzadıkça yukarı dönmek gerekmez |
| Ana gezinme | Alt gezinme çubuğu, 4-5 öğe | Kategori, arama, sepet ve hesap tek dokunuşta açılır |
| Pop-up kapatma | Pencerenin altında belirgin “Kapat” butonu | Sağ üstteki küçük çarpıya ulaşmak zordur |
| Ödemeye geç | Sepet sayfasında altta sabit | Sepet uzun olsa da buton görünür kalır |
| Logo ve bildirim alanı | Üst kısım | Az dokunulan öğeler zor bölgede kalabilir |
Sabit sepete ekle çubuğu nasıl tasarlanmalı?
Sabit sepete ekle çubuğu, ziyaretçi ürün sayfasında aşağı kaydırıp asıl sepete ekle butonu ekrandan çıktığında ekranın altında belirmelidir. Asıl buton görünürken çubuğun da görünmesi, aynı işi yapan iki butonu aynı ekrana getirir ve gereksiz yer kaplar.
- Çubukta fiyat, seçili varyant ve buton bulunmalı. Varyant seçilmemişse buton “Beden seç” yazmalı.
- Varyant seçilmeden butona dokunulursa sayfa başa atılmamalı; alttan açılan bir panelde bedenler gösterilmeli ve seçimden sonra ürün doğrudan sepete eklenmeli.
- iPhone’larda ekranın altındaki ana ekran çizgisi ve Safari’nin alt adres çubuğu için boşluk bırakılmalı, aksi halde buton bu alanların altında kalır.
- WhatsApp destek butonu, canlı destek baloncuğu ve çerez çubuğu çubuğun üzerine binmemeli. Bu çakışma Türkiye’deki sitelerde çok sık görülür; çubuk görünürken destek butonu yukarı kaydırılmalıdır.
- Çubuk, içeriğin okunmasını engellemeyecek kadar ince tutulmalı.
Dokunma alanları ve yazı boyutları nasıl olmalı?
Dokunma alanları parmak ucunun rahatça ve hatasız basabileceği büyüklükte olmalıdır. Apple en az 44×44 punto, Google ise 48×48 dp dokunma alanı önerir; görünen ikon küçük olsa bile dokunulabilir alan bu ölçülere yakın tutulmalıdır.
- Yan yana linkler ve butonlar arasında boşluk bırakılmalı. Site altındaki uzun link listeleri açılır kapanır başlıklar halinde toplanabilir.
- Ürün kartındaki favori kalbi ürün linkinden ayrılmalı, yanlışlıkla ürüne girmeye neden olmamalı.
- Gövde metni 16 piksel civarında tutulmalı. Form alanlarında yazı boyutu 16 pikselin altındaysa iPhone’larda alana dokunulduğunda sayfa kendiliğinden yakınlaşır ve düzen bozulur.
- Açık gri metinler güneş altında okunmaz; fiyat, stok ve kargo bilgisi yeterli kontrastla yazılmalı.
Mobilde menü, arama ve filtre nasıl kurgulanmalı?
Mobilde menü, arama ve filtre ziyaretçiyi en az dokunuşla ürüne ulaştıracak şekilde kurgulanmalıdır. Masaüstündeki geniş menünün olduğu gibi hamburger simgesinin içine sıkıştırılması bu amaca hizmet etmez.
Arama kutusu üst kısımda açık şekilde görünmeli, dokunulduğunda tam ekran açılmalı ve son aramaları, popüler aramaları ve görselli ürün önerilerini göstermelidir. Menüde üç dört seviyeli iç içe listeler yerine ana kategorilerin görselli kartlarla gösterilmesi ve her seviyede belirgin bir “Geri” bağlantısı bulunması gezinmeyi kolaylaştırır.
Kategori sayfasında “Filtrele” ve “Sırala” iki ayrı buton olarak yan yana durmalıdır. Filtre paneli tam ekran açılmalı, seçim yapıldıkça arka planda sayfa yenilenmemeli ve paneldeki sabit alt buton kaç ürün bulunduğunu göstermelidir (“86 ürünü göster” gibi). Ürün listesi giyim ve aksesuar gibi kategorilerde genellikle iki sütunla, görselin ön planda olduğu mobilya gibi kategorilerde tek sütunla daha rahat incelenir.
Mobil formlar nasıl kolaylaştırılır?
Mobil formlar, her alanda doğru klavyeyi açarak ve tarayıcının otomatik doldurma özelliğini destekleyerek kolaylaştırılır. Telefonda harf ve rakam klavyesi arasında sürekli geçiş yapmak, masaüstünde fark edilmeyen bir yavaşlık yaratır.
- Telefon, kart numarası ve doğrulama kodu alanları rakam klavyesini, e-posta alanı @ işaretli klavyeyi açmalı. Bu, form alanlarının inputmode ve type özellikleri doğru ayarlanarak sağlanır.
- Ad, soyad, telefon ve adres alanları tarayıcının otomatik doldurmasına açık olmalı (autocomplete özelliği).
- SMS ile gelen doğrulama kodu klavyenin üstünde öneri olarak çıkacak şekilde ayarlanmalı; ziyaretçi mesajlara geçip kodu aklında tutmak zorunda kalmamalı.
- Alan adı alanın üstünde yazmalı. Alanın içinde duran ve yazmaya başlayınca kaybolan ipucu metni, alan adının yerine kullanılmamalı.
- Google veya Apple ile giriş seçeneği, uygulama içi tarayıcılarda kayıtlı şifre olmadığı için ayrıca işe yarar.
Mobil hız ve test için nelere dikkat edilmeli?
Mobil hız için ilk ekrandaki görsellerin hafif tutulması ve sayfaya eklenen üçüncü taraf kodların sınırlanması gerekir. Test ise masaüstü tarayıcısında ekranı daraltarak değil, gerçek telefonlarda yapılmalıdır; daraltılmış ekran dokunma, klavye ve bağlantı sorunlarını göstermez.
- Ürün görselleri WebP gibi hafif formatlarda ve ekran boyutuna uygun ölçülerde sunulmalı.
- Sayfanın ilk görseli geç yüklemeye (lazy load) alınmamalı, aşağıda kalan görseller alınmalı.
- Ana sayfadaki arka plan videosu ve çok görselli slider mobilde sadeleştirilmeli.
- Canlı destek, yorum, pop-up ve takip araçlarının her biri ek kod yükler; kullanılmayanlar kaldırılmalı.
- PageSpeed Insights’ın mobil sonucu ve Search Console’daki Core Web Vitals raporu düzenli izlenmeli.
Test için en az bir iPhone ve bir orta segment Android telefon kullanılmalıdır. Site mobil veriyle, Instagram uygulamasının içinden açılarak ve tek elle denenmelidir: ürün bulmak, beden seçip sepete eklemek ve ödeme adımına kadar ilerlemek temel senaryodur. Mobil ve masaüstü verilerini ayrı okumak için veri odaklı karar alma süreçleri yazısı yol gösterici olabilir.
Rubiko Digital, T-Soft, Ticimax, IdeaSoft, ikas ve Shopify altyapılarında mobil tasarımı gerçek cihaz testleriyle ele alır. Sitenizin mobil alışveriş akışını gözden geçirmek için UI/UX tasarım hizmeti sayfasını inceleyebilirsiniz.
Sık Sorulan Sorular
Mobil uyumlu bir tema kullanmak yeterli mi?
Tek başına yeterli değildir. Mobil uyumlu tema sayfanın küçük ekrana sığmasını sağlar, ama butonların yerini, filtre davranışını ya da destek butonu çakışmalarını çözmez. Bunlar tema üzerinde ayrıca düzenlenmelidir.
Önce mobil uygulama mı, mobil site mi yapılmalı?
Çoğu KOBİ için önce iyi çalışan bir mobil site gelmelidir. Yeni ziyaretçiler çoğunlukla reklam, arama ve sosyal medya üzerinden gelir ve ilk alışverişte uygulama indirmez. Uygulama, düzenli tekrar alışveriş yapan bir müşteri kitlesi oluştuktan sonra değerlendirilebilir.
Hamburger menü kullanmak hata mı?
Hata değildir, ancak tek gezinme yolu olmamalıdır. En sık kullanılan bağlantılar alt gezinme çubuğunda ya da ana sayfadaki kategori kısayollarında da yer almalıdır. Hamburger menü daha az kullanılan sayfalar için uygundur.
Mobilde pop-up kullanılabilir mi?
Kullanılabilir, ancak içeriği tamamen kapatan ve sayfa açılır açılmaz çıkan pencereler hem ziyaretçiyi rahatsız eder hem de Google’ın mobil sayfalar için yayımladığı rehberlere aykırı düşebilir. Ekranın bir kısmını kaplayan, kolay kapatılan ve gecikmeli açılan bantlar daha güvenli bir tercihtir.
Yatay ekran için ayrı tasarım gerekir mi?
Genellikle ayrı tasarım gerekmez, ama sayfanın yatay ekranda bozulmadığı kontrol edilmelidir. Sabit çubuklar ve açılır paneller yatay ekranda alanın büyük kısmını kaplayabilir. Ürün galerisinin tam ekran modu ise yatay görüntüyü desteklemelidir.