Mobil öncelikli tasarım, bir web sitesini önce telefon ekranı için kurgulayıp sonra daha büyük ekranlara genişletmek demek. Ziyaretçilerinizin önemli bir kısmı sitenize telefondan geliyorsa masaüstü tasarımı küçültmek yerine işe küçük ekrandan başlamak, hem kullanıcı deneyimini hem de arama görünürlüğünü doğrudan etkiler.
Neden Önce Mobil?
Kendi verinize bakarak başlayın: Analitik aracınızda ziyaretlerin cihaz türüne göre dağılımını inceleyin. Birçok sektörde telefon artık ilk temas noktası; özellikle reklamlardan, sosyal medyadan ve harita aramalarından gelen ziyaretçiler çoğu zaman sitenize telefondan ulaşıyor. Bu kitle sitenizde zorlanıyorsa en iyi masaüstü tasarım bile bu kaybı telafi etmez.
Arama tarafında da durum net. Google uzun süredir siteleri mobil sürümleri üzerinden tarıyor ve dizine ekliyor; buna mobil öncelikli dizine ekleme deniyor. Yani mobilde eksik kalan içerik, arama motoru açısından da eksik sayılıyor. Masaüstünde bulunup mobil sürümden çıkarılan metinler, görseller ya da bağlantılar bu yüzden risk taşır.
Mobil Öncelikli Düşünmek Ne Demek?
Mobil öncelikli tasarım, yalnızca ekran daraldığında sayfanın düzgün görünmesi (duyarlı tasarım) değildir. Asıl mesele önceliklendirmedir: Küçük ekranda her şeye yer yoktur, bu yüzden kullanıcının o anda en çok neye ihtiyaç duyduğunu seçmek zorunda kalırsınız. Bu zorunluluk genellikle masaüstü sürümü de sadeleştirir ve iyileştirir.
Telefondaki kullanıcı çoğu zaman acelesi olan, tek elle gezinen ve değişken bir bağlantı hızına sahip biridir. Numaranıza dokunup aramak, yol tarifi almak, ürün ya da çalışma saatlerinizi görmek gibi kısa görevler için gelir. Tasarım bu görevleri birkaç dokunuşla tamamlatabilmelidir.
Tasarım İçin Kontrol Listesi
- Dokunma alanları: Buton ve bağlantılar parmakla rahatça seçilebilecek büyüklükte ve birbirinden yeterince uzak olsun. Apple'ın arayüz yönergeleri en az 44 × 44 pt, Google'ın Material Design rehberi 48 × 48 dp dokunma alanı öneriyor.
- Başparmak bölgesi: En sık kullanılan eylemleri (ara, teklif al, sepete ekle) ekranın alt yarısında, kolay erişilen yerlere yerleştirin.
- Okunabilir metin: Gövde metni için yeterli yazı boyutu ve satır aralığı kullanın; içerik yakınlaştırma yapmadan okunabilmeli. Kullanıcının ekranı yakınlaştırmasını da engellemeyin.
- Sade menü: Menü öğelerini sınırlı tutun; en önemli bir iki eylemi menüye gömmek yerine görünür bırakın.
- Formlar: Alan sayısını azaltın, doğru klavyeyi açan alan türleri kullanın (telefon için sayısal klavye, e-posta için @ işaretli klavye) ve tarayıcının otomatik doldurmasına izin verin. iOS'ta yazı boyutu 16 pikselden küçük form alanları, odaklanıldığında sayfanın kendiliğinden yakınlaşmasına yol açar.
- Açılır pencereler: Sayfa açılır açılmaz içeriği kapatan pencereler mobilde özellikle rahatsız edicidir; Google da mobilde içeriğe erişimi zorlaştıran bu tür pencerelerden kaçınılmasını uzun süredir öneriyor.
- Dokun ve ara: Telefon numaranızı dokunarak aranabilir, adresinizi harita uygulamasında açılabilir hâle getirin.
Hız Mobilde Daha da Önemli
Mobil bağlantılar masaüstüne göre daha değişkendir, cihazların işlem gücü de daha sınırlıdır. Bu yüzden Core Web Vitals (Google'ın sayfa deneyimini ölçtüğü temel ölçütler) mobilde ayrıca takip edilmelidir. İyi kabul edilen eşikler şöyle: en büyük içeriğin yüklenme süresi (LCP) 2,5 saniye veya altı, etkileşime yanıt süresi (INP) 200 milisaniye veya altı, görsel kayma (CLS) 0,1 veya altı.
- Görselleri ekran boyutuna uygun ölçülerde ve WebP ya da AVIF gibi modern biçimlerde sunun; ekranın dışında kalan görselleri geç yükleyin.
- Kullanılmayan betikleri, ağır kaydırıcıları ve gereksiz üçüncü taraf eklentilerini ayıklayın.
- Yazı tiplerini sınırlı sayıda ağırlıkla kullanın.
Test Etmeden Yayına Almayın
Tarayıcınızın geliştirici araçlarındaki mobil görünüm iyi bir başlangıçtır, ama yeterli değildir. Siteyi farklı boyutlardaki gerçek telefonlarda, hem iOS hem Android cihazlarda ve mobil veri bağlantısıyla deneyin. Bir müşterinizin gözünden en sık yapılan görevleri (iletişime geçmek, ürün bulmak, form göndermek) baştan sona tamamlamaya çalışın. Takıldığınız her nokta, gerçek kullanıcıların da takıldığı bir noktadır.
Yayından sonra Google Search Console'daki Core Web Vitals raporu ve PageSpeed Insights, mobil performansı gerçek kullanıcı verileriyle izlemenize yardımcı olur.
Kısacası
Mobil öncelikli tasarım bir moda değil, ziyaretçilerinizin sizi gerçekte nasıl deneyimlediğini esas alan bir yaklaşım. Yeni bir web sitesi projesinde mobil görünümü ilk eskizden itibaren tasarımın merkezine koyuyor, masaüstünü bu temel üzerine kuruyoruz. Mevcut sitenizin telefonda nasıl bir deneyim sunduğunu birlikte değerlendirmek isterseniz briefing formumuzu doldurabilir ya da iletişim sayfamızdan bize yazabilirsiniz.
