Sitenin mobil sürümü: önce-sonra örnekleriyle 10 kural
Online mağaza ziyaretçilerinin çoğu telefondan gelir ve satın alma kararını orada verir. Mobil site için 10 kuralı önce-sonra örnekleriyle ve Apple, Google ile WCAG'ye göre düğme ve yazı boyutlarının tam değerleriyle sunuyoruz.
Mobil sürüm neden «küçültülmüş» site değildir?
Telefonda parmakla dokunulur, küçük ekranda okunur ve çoğu zaman tek elle kullanılır. Bilgisayarda rahat olan şey telefonda küçük, sıkışık ve karışık hâle gelir. Ayrıca Google siteleri mobil sürüme göre dizine ekler; arama da satış da ona bağlıdır.
Örnekleriyle 10 kural
1. Düğmeleri büyük yapın
Kullanıcı imleçle değil parmakla dokunur. Apple en az 44 × 44 pt dokunma alanı, Android 48 × 48 dp önerir; erişilebilirlik standardı WCAG 2.2 ise en az 24 × 24 px belirler.
2. Yazıyı büyütün
Bilgisayarda iyi görünen yazı telefonda okunmaz. Ana metin, yakınlaştırma gerekmesin diye genellikle 16 px ve üzeridir; Google'ın Lighthouse aracı metnin %40'ından fazlası 12 px'ten küçük olan sayfaları işaretliyordu.
3. Boşluklara dikkat edin
Bloklar birbirine yapışık olunca ekran kalabalık ve ucuz görünür. Sandığınızdan daha fazla boşluk gerekir.
4. Düğmeleri alt alta dizin
Yan yana iki düğme telefonda daralır. Tam genişlikte, alt alta düğmelere dokunmak daha kolaydır ve yanlış dokunma azalır.
5. Kaydırılabildiğini gösterin
Kartlar kaydırılabiliyorsa bu görünmeli: sonraki kartın kenarı, noktalar ya da oklar devamı olduğunu gösterir.
6. Menüyü küçültün
Üst bilgi ekranın yarısını kaplamamalı. Logo ve menü düğmesinden oluşan kompakt üst bilgi, asıl içeriğe yer açar.
7. İkincil içeriği gizleyin
Telefonda her şeyi bir anda göstermeye gerek yok: akordeonlar, sekmeler ve «daha fazla göster» sayfayı sadeleştirir. Gizleyin ama silmeyin — Google mobil sürümü dizine ekler, içerik masaüstüyle aynı olmalı.
8. İletişim bilgilerini tıklanabilir yapın
Telefon ve e-posta tek dokunuşla açılmalı; tel: ve mailto: bağlantıları bunun için var. «Ara» düğmesi daha da basit.
9. İlk ekranı doldurmayın
İlk ekranda yer azdır: bir başlık, kısa bir açıklama ve tek ana eylem. Bannerlar, indirimler ve abonelikler aşağıda.
10. Masaüstünü birebir kopyalamayın
Mobil sürüm küçültülmüş bir site değildir. Bloklar yeniden sıralanır, üç sütun teke iner, fazlalıklar çıkarılır.
Metriverra telefon ve bilgisayar ziyaretçilerinin nasıl dönüştüğünü gösterir; mobil iyileştirmelerin satış getirip getirmediğini kolayca kontrol edersiniz.
Kısaca
- Düğmeler en az 44 × 44 pt (Apple) veya 48 × 48 dp (Android); WCAG asgarisi 24 × 24 px.
- Ana metin en az 16 px, bloklar arasında boşlukla.
- Düğmeler tam genişlikte ve alt alta; iletişim bilgileri dokunulabilir.
- İlk ekranda tek ana eylem; ikincil içerik akordeonlarda.
- Mobil bir yeniden kurgu, küçültülmüş site değil; içerik masaüstüyle aynı.
Kaynaklar: Apple — Human Interface Guidelines: Accessibility · Android Developers — Make apps more accessible · W3C — WCAG 2.2: Target Size (Minimum) · Chrome for Developers — Lighthouse: legible font sizes · MDN — The Anchor element · Google Search Central — Mobile-first indexing
