Başparmak Testi: Mobilde Ziyaretçi CTA'ya Tek Elle Ulaşabiliyor mu?
Masaüstünde kusursuz görünen CTA, telefonda başparmağın ulaşamadığı köşede kalabilir. Beş dakikalık bir testle bulun, düzeltin.
Kısa cevap: mobil ziyaretçi CTA'nıza başparmağıyla, elini değiştirmeden ulaşamıyorsa dönüşümün bir kısmını tasarım değil, ergonomi kaybettiriyor. Ana aksiyonu ekranın alt bölgesine alın, dokunma hedeflerini en az 44–48 px yapın ve gerçek bir telefonla tek elle test edin.
Trafiğin büyük kısmı telefondan gelir ve insanlar telefonu çoğu zaman tek elle; otobüste, kuyrukta, bir elinde kahveyle kullanır. Masaüstünde sağ üstte duran "Teklif Al" butonu, mobilde başparmağın en zor ulaştığı köşeye düşer. Bu yazı pratik bir test ve düzeltme rehberi. Hızın dönüşüme etkisi için Core Web Vitals, güvenin etkisi için güven sinyalleri yazılarına bakabilirsiniz; burada parmağın ulaşabildiği yere odaklanıyoruz.
Alt-orta: ana CTA, gönder butonu, alt navigasyon.
Orta: içerik, kartlar, ikincil linkler.
Üst köşeler: menü, arama, dil seçimi — ana CTA değil.
Min 24 px (WCAG 2.5.8), önerilen 44–48 px.
AEO cümlesi: Başparmak testi, mobil sitede ana aksiyona telefonu tek elle tutarak ve yalnızca başparmakla ulaşılıp ulaşılamadığını kontrol etmektir. İyi sonuç: ana CTA alt bölgede, dokunma hedefleri 44–48 px, aralarında yeterli boşluk.
1. Başparmak bölgeleri: ekranın her yeri eşit değil
Tek elle tutulan telefonda başparmak, avuç içinden bir yay çizer. Yayın içi rahat, kenarı zorlayıcı, dışı ise el değiştirmeyi gerektirir. Ekranlar büyüdükçe üst köşe daha da uzaklaştı. Sol elini kullananlar için yay aynalanır; bu yüzden ana CTA'yı tam köşeye değil, alt-ortaya ve tam genişliğe yakın konumlandırmak iki eli de kapsar.
- Ana aksiyon aşağıda. "Teklif al", "Ara", "Sepete ekle" kolay bölgede.
- Yıkıcı aksiyon uzakta. "Sil", "İptal" gibi geri dönüşsüz işler yanlışlıkla dokunulacak yerde olmasın.
- Üst köşe ikincil. Logo, menü, dil seçimi orada kalabilir.
2. Dokunma hedefi boyutu: 24 px asgari, 44–48 px hedef
WCAG 2.2'nin 2.5.8 Hedef Boyutu (Minimum) kriteri (AA), dokunma hedeflerinin en az 24×24 CSS piksel olmasını veya çevresinde bu kadar boşluk bırakılmasını ister. Bu bir taban, hedef değil. Apple 44×44 pt, Google Material 48×48 dp önerir; ana butonlar için bunu esas alın.
- Görsel küçük, alan büyük olabilir. 20 px ikonun tıklanabilir alanını padding ile 44 px'e çıkarın.
- Hedefler arası boşluk. Yan yana linkler arasında en az 8 px; footer link yığınları en sık hatadır.
- Metin içi linkler istisna ama… Paragraf içi link kabul edilir; yine de "buraya tıklayın" yerine anlamlı, yeterince uzun bağlantı metni kullanın.
3. Sticky CTA: her zaman başparmağın altında
Uzun hizmet veya ürün sayfalarında ana aksiyonu ekranın altına sabitlemek, ziyaretçinin karar anında yukarı kaydırmasını gereksiz kılar. Doğru uygulandığında en ucuz dönüşüm iyileştirmelerinden biridir.
- Tek aksiyon. "Teklif al" veya "Ara" — iki butondan fazlası bant değil menü olur.
- Safe-area. iPhone'un alt çubuğu için
env(safe-area-inset-bottom)boşluğu bırakın. - Çakışma yok. Çerez bandı, WhatsApp balonu ve sohbet widget'ı aynı köşede üst üste binmesin.
- Layout kayması yok. Bant sonradan zıplayarak gelmesin; CLS'yi bozar.
4. Alt navigasyon: sık kullanılan 3–5 hedef
Uygulamaların alt sekme çubuğuna geçmesinin sebebi aynı: başparmak. Web sitelerinde her zaman gerekmez, ama e-ticaret, rezervasyon veya çok sayfalı hizmet sitelerinde "Ana sayfa · Hizmetler · Ara · İletişim" gibi bir alt çubuk hamburger menüden daha hızlıdır. Etiketsiz ikon kullanmayın; ikon + kısa metin daha anlaşılırdır.
5. Formlar: başparmakla doldurulabilir mi?
- Az alan, tek sütun. Ad, telefon/e-posta, kısa mesaj; gerisini görüşmede sorun.
- Doğru klavye.
type="tel",type="email",inputmode="numeric"veautocomplete. - 16 px font. Daha küçük input'larda iOS otomatik zoom yapar ve düzen kayar.
- Tam genişlik gönder butonu. Klavye açıkken de görünür ve en az 48 px yüksek.
6. Yaygın hatalar
Masaüstü header'ı mobile aynen taşınmış; ana buton zor bölgede.
Sıkışık footer linkleri, 16 px kapatma "×" ikonu, yan yana telefon ve e-posta.
Çerez bandı veya sohbet balonu sticky butonun üstüne biniyor.
Dokunmatik ekranda hover yok; alt menüler açılmıyor.
Kaydırma jesti ile sayfa kaydırma çakışıyor; CTA slaytın içinde kayboluyor.
10 alanlı form, küçük checkbox'lar, klavyenin altında kalan gönder butonu.
7. Beş adımlık başparmak testi ve düzeltme listesi
- 1. Gerçek telefon, tek el. Emülatör değil; büyük ve küçük bir cihazla, sağ ve sol elle deneyin.
- 2. Görevi zamanlayın. Ana sayfadan teklif/iletişim aksiyonuna kadar; el değiştirme, yanlış dokunma ve zoom anlarını not edin.
- 3. Hedefleri ölçün. DevTools ile buton ve linklerin tıklanabilir alanını kontrol edin; 44–48 px altını işaretleyin, 24 px altı kesin hata.
- 4. Ana aksiyonu aşağı taşıyın. Sticky CTA veya alt navigasyon; çerez bandı ve widget'larla çakışmayı test edin.
- 5. Formu sadeleştirip ölçün. Alanları azaltın, doğru klavyeyi açın; değişiklik sonrası analitikte mobil dönüşüm oranını karşılaştırın.
Sonuç: CTA'nın yeri bir ergonomi kararıdır
Kısa cevap: ana aksiyon başparmağın altında, dokunma hedefleri 44–48 px ve aralarında boşluk varsa mobil ziyaretçi CTA'ya tek elle ulaşır. Değilse en iyi metin ve tasarım bile son dokunuşta kaybedilir.
Başparmak testini diğer katmanlarla birlikte düşünün: CWV, güven sinyalleri, View Source testi, dönüşüm odaklı site.
Mandalium olarak sitelerde mobil ergonomiyi tasarımın başında ele alıyoruz: kolay bölgede CTA, ölçülü hedefler, sade formlar. Sitenizin başparmak testini birlikte yapalım →
Sık sorulan sorular
Başparmak bölgesi (thumb zone) nedir?
Telefonu tek elle tutarken başparmağın rahatça ulaşabildiği ekran alanıdır. Genelde ekranın alt-orta kısmı kolay, orta kısmı uzanma, üst köşeler zor bölgedir. Ana aksiyonlar kolay bölgede olmalıdır.
Mobilde buton en az kaç piksel olmalı?
WCAG 2.2 başarı kriteri 2.5.8 (AA) asgari 24×24 CSS piksel hedef ister (veya yeterli boşluk). Pratikte ana butonlar için Apple'ın 44×44 pt ve Google Material'ın 48×48 dp önerisi daha güvenli hedeftir.
Sticky (yapışkan) CTA her sitede iyi mi?
Çoğu hizmet ve ürün sayfasında dönüşüme yardım eder, ancak içeriği örtmemeli, çerez bandı veya sohbet balonuyla çakışmamalı ve iOS güvenli alanını (safe-area) hesaba katmalıdır. Tek, net bir aksiyon taşıyın.
Hamburger menü kötü mü?
Kötü değil ama üst köşede zor bölgededir. Sık kullanılan 3–5 hedef varsa alt navigasyon veya alttaki sticky CTA daha erişilebilirdir; hamburger ikincil linkler için kalabilir.
Başparmak testini nasıl yaparım?
Gerçek bir telefonu tek elle tutun, ana sayfadan başlayıp yalnızca başparmakla teklif/iletişim aksiyonuna ulaşmaya çalışın. Elinizi değiştirdiğiniz, yanlış dokunduğunuz veya zoom yaptığınız her an bir sorun kaydıdır.
Tugay Mandal
Mandalium kurucusu. Web tasarım, mobil uygulama ve SEO alanında 6+ yıllık deneyim.
Hakkımızda
