Mobil Arayüz Tasarımı: Dokunma, Navigasyon, Okunabilirlik

İyi bir mobil arayüz tasarımı, masaüstü tasarımın küçültülmüş hâli değildir; parmakla kullanılan, dikkat dağıtıcı bir ortamda tek elle tutulan ve değişken ışıkta okunan bir deneyimdir. Kullanıcı çoğu zaman yürürken, ışık altında ya da yalnızca yarım dikkatle ekrana bakar. Bu yüzden mobilde işe yarayan tasarım üç temele dayanır: yeterince büyük dokunma hedefleri, başparmağın rahat ulaştığı navigasyon ve küçük ekranda yorulmadan okunabilen tipografi. Bu yazıda bu üç ilkeyi somut sayılar ve uygulanabilir kurallarla anlatıyorum.

Dokunma hedefi boyutu ve aralık

Parmak ucu fareden çok daha kaba bir işaretleyicidir. Bir yetişkin parmağının dokunma alanı yaklaşık 8–10 mm çapındadır, bu yüzden küçük butonlar sürekli yanlış dokunmaya yol açar. Platform kılavuzları net öneriler verir:

• Apple Human Interface Guidelines: dokunulabilir hedefler en az 44×44 pt olmalı.
• Google Material Design: en az 48×48 dp ve hedefler arasında en az 8 dp boşluk.
• WCAG 2.2 (2.5.8): minimum hedef boyutu 24×24 CSS pikseli; ama bu mutlak alt sınırdır, konfor değil.

Görünen ikon küçük olsa bile dokunma alanını büyütebilirsiniz. Web'de bunu padding ile ya da görünmez bir genişletme alanıyla yaparsınız:

.icon-button {
  min-width: 48px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

Hedefler arasındaki boşluk en az boyutları kadar önemlidir. Yan yana iki butonu sıkıştırırsanız, doğru boyutta olsalar bile kullanıcı yanlışına dokunur. Liste satırlarında ve form alanlarında dikey ritmi koruyun.

Başparmak bölgesi ve navigasyon

İnsanların çoğu telefonu tek elle, başparmakla kullanır. Ekranın alt-orta bölgesi en kolay ulaşılan yerdir; üst köşeler ise — özellikle büyük telefonlarda — başparmak için zordur. Bu nedenle birincil eylemleri ekranın altına yerleştirmek modern mobil tasarımın temel taşıdır:

• Alt sekme çubuğu (tab bar): 3–5 ana bölüm için ideal; her zaman görünür ve başparmakla erişilebilir.
• Birincil eylem butonu: "Gönder", "Sepete ekle" gibi ana işlemler altta sabit dururken yıkıcı işlemler (sil) uzakta tutulmalı.
• Hamburger menü: ikincil bağlantılar için uygundur ama keşfedilebilirliği düşüktür; ana navigasyonu içinde gizlemeyin.

Geri gitme, kaydırma ve sekme değiştirme gibi sık eylemleri sistemin alıştırdığı yerlerde tutun. iOS'ta soldan kaydırarak geri gelmek, Android'de sistem geri jesti kullanıcıların kasıyla bildiği davranışlardır; bunları bozmayın.

Tipografi ve okunabilirlik

Küçük ekranda okunabilirlik, font boyutu kadar kontrast ve satır uzunluğuyla ilgilidir. Pratik başlangıç değerleri:

• Gövde metni: en az 16px (iOS'ta 16px altındaki input'lar Safari'de istenmeyen zoom tetikler).
• Satır yüksekliği: gövde için 1.4–1.6 arası; sıkışık satırlar mobilde gözü yorar.
• Satır uzunluğu: ideal olarak 35–45 karakter; mobilde sütun zaten dar olduğu için kenar boşluklarını cömert tutun.
• Kontrast: WCAG AA, normal metin için en az 4.5:1, büyük metin için 3:1 oranını ister.

Sistem font ölçeklemesine saygı gösterin. Mutlak px yerine ölçeklenebilir birimler ve rem kullanmak, kullanıcı yazı tipini büyüttüğünde arayüzün bozulmadan uyum sağlamasını mümkün kılar:

html { font-size: 100%; }      /* kullanıcı ayarına saygı */
body { font-size: 1rem; line-height: 1.5; }
h1   { font-size: clamp(1.5rem, 5vw, 2.25rem); }

Responsive düzen ve güvenli alanlar

Modern telefonlarda çentik, yuvarlatılmış köşeler ve alt jest çubuğu vardır. İçeriğin bu alanların altında kalmaması için safe-area-inset değişkenlerini kullanın:

.app-bar {
  padding-top: env(safe-area-inset-top);
}
.bottom-nav {
  padding-bottom: env(safe-area-inset-bottom);
}

Düzeni içerik için kırın, cihaz için değil. Sabit piksel ızgaralar yerine esnek flexbox/grid ve min()/max()/clamp() kullanın. Görselleri max-width: 100% ile sınırlayın ve dokunmatik karuselleri kaydırma için optimize edin.

Performans ve geri bildirim de tasarımdır

Mobilde algılanan hız, görsel cilanın önüne geçer. Yavaş ağlarda kullanıcılar birkaç saniyelik beklemeden sonra terk eder. Birkaç pratik nokta:

• Her dokunmaya görünür geri bildirim verin — basılı durum, küçük bir animasyon ya da haptik titreşim.
• İçerik yüklenirken iskelet (skeleton) ekranlar boş beyaz ekrandan daha az kaygı yaratır.
• Görselleri sıkıştırın, loading="lazy" kullanın ve ilk ekranı (above the fold) hızlı render edin.
• Dokunma tepkisini bloklamayın; ağır işlemleri arka plana taşıyın.

Test etmeden tasarım bitmez

Mobil tasarımı yalnızca tarayıcı emülatöründe değil, gerçek cihazda ve gerçek elde test edin. Emülatör dokunma hatasını, tek elle erişimi ve güneş altında kontrastı göstermez. Kendi parmağınızla deneyin, mümkünse birkaç farklı ekran boyutunda ve hem iOS hem Android'de bakın.

Sık Sorulan Sorular

Minimum dokunma hedefi tam olarak kaç piksel?

Apple 44×44 pt, Google 48×48 dp önerir; WCAG mutlak alt sınır olarak 24×24 CSS pikseli verir. Güvenli pratik kural: görünür ikon küçük olsa bile dokunma alanını en az 48px tutun ve hedefler arasına en az 8px boşluk koyun.

Alt navigasyon mu, hamburger menü mü kullanmalıyım?

3–5 ana bölüm varsa alt sekme çubuğu daha keşfedilebilir ve başparmak dostudur. Daha fazla ya da ikincil bağlantı için hamburger menü uygundur; ama uygulamanızın ana akışını menünün içine gömmeyin.

Gövde metni için en küçük font boyutu nedir?

16px gövde metni için güvenli alt sınırdır. iOS Safari'de 16px'in altındaki form input'ları odaklanınca istenmeyen yakınlaştırma yapar, bu yüzden input'ları da en az 16px tutun.

Mobil arayüzünüzü daha kullanışlı ve hızlı hâle getirmek mi istiyorsunuz? Dokunma hedeflerinden navigasyona ve performansa kadar arayüzünüzü baştan sona elden geçirebilirim. Benimle iletişime geçin ve projenizi konuşalım.