Mobil arayüz standardı, bütün ekranları aynı şablona sokmak değildir. Farklı içerik ve akışların aynı ürün mantığıyla çalışmasını sağlayan ölçü, davranış ve erişilebilirlik kurallarıdır. Buton yüksekliğinden kart boşluğuna kadar her değer bir kullanıcı ihtiyacına, platform davranışına veya görsel ritme bağlandığında tasarım daha hızlı büyür ve geliştirme sırasında daha az yorum gerektirir.
Ekran genişliği değil içerik önceliği
Mobil tasarım küçük masaüstü değildir. Kullanıcı çoğu zaman tek eliyle, hareket halinde ve kesintili dikkatle işlem yapar. Bu nedenle ilk adım ekranı küçültmek değil; ana görevi, ikincil bilgiyi ve ertelenebilecek detayları ayırmaktır. Bir ekranda tek belirgin ana aksiyon bulunması karar yükünü azaltır. Yardımcı aksiyonlar metin butonu, menü veya sonraki adıma taşınabilir.
İçerik sırası ekran okuyucu, klavye ve büyütülmüş metin senaryolarında da anlamlı kalmalıdır. Görsel olarak yan yana duran iki alan dar ekranda alt alta geçtiğinde okuma sırası bozulmamalıdır. Sabit yükseklikler uzun çeviri ve büyük yazı boyutlarında kesilmeye yol açabileceği için dikkatle kullanılmalıdır.
Dokunma alanı ile görünen boyutu ayırmak
Apple Human Interface Guidelines, düğmeler için genel olarak en az 44 x 44 punto hit region önerir. WCAG 2.2’nin AA düzeyindeki Target Size (Minimum) kriteri ise istisnalarıyla birlikte en az 24 x 24 CSS piksel hedef veya yeterli çevre boşluğu ister. Punto ile CSS piksel aynı ölçüm sistemi değildir; bu değerleri tek bir evrensel sayı gibi eşitlemek doğru olmaz. Tasarım, hedef platformun kılavuzunu ve web erişilebilirlik kriterini kendi bağlamında ele almalıdır.
Küçük bir ikon görsel olarak 20 ya da 24 birim olabilir; etkileşim alanı daha geniş tutulabilir. Yan yana gelen ikon butonlarında yalnızca kutu boyutu değil merkezler arası mesafe ve yanlış dokunma riski de test edilmelidir. Kritik işlemler için minimumu aşan rahat hedefler seçmek çoğu zaman daha iyi deneyim sağlar.
Buton anatomisi ve hiyerarşisi
Bir buton; etiket, iç boşluk, hit area, görsel stil, rol ve etkileşim durumlarından oluşur. Etiket kısa ve eylem odaklı olmalıdır: “Kaydet”, “Teklif iste” veya “Sepete ekle” gibi. “Devam” ancak sonraki adım açıkça belliyse yeterlidir. İkon tek başına belirsizse metin veya erişilebilir ad eklenmelidir.
Primary, secondary, tertiary ve destructive roller yalnızca renk farkı değildir. Aynı görünümde üç güçlü buton kullanıcının kararını zorlaştırır. Ana aksiyon belirgin, ikincil aksiyon daha sakin, geri dönüşü zor işlem ise açık bir uyarı ve onay akışıyla sunulmalıdır. Normal, pressed, focus, loading ve disabled durumları kütüphanede tanımlanmalıdır. Disabled butonu açıklamasız bırakmak yerine işlemin neden kullanılamadığı gerektiğinde görünür kılınmalıdır.
Spacing ölçeği nasıl kurulmalı?
Sekiz tabanlı ölçek yaygın ve kullanışlı bir ekip tercihidir; resmi bir platform zorunluluğu değildir. 4, 8, 12, 16, 24, 32 ve 48 gibi sınırlı bir set küçük ayrıntıdan bölüm ayrımına kadar yeterli olabilir. Ürünün tipografisi veya yoğunluğu farklıysa başka bir taban seçilebilir. Önemli olan her tasarımda rastgele 13, 17 veya 29 değerleri üretmek yerine adlandırılmış tokenlarla ortak ritim kurmaktır.
Yakınlık anlam taşır. Başlık ile açıklaması arasındaki boşluk, bir sonraki kartla arasındaki boşluktan küçük olmalıdır. Aynı gruptaki öğeler yakın; farklı bölümler daha uzak tutulur. Boşluk sadece estetik ferahlık değil, içerik ilişkisini anlatan bir araçtır.
Padding ve margin farkını sistemde açıklamak
Padding, bileşenin içeriği ile sınırı arasındaki iç boşluktur; margin ise bileşenin dış çevresindeki yerleşim boşluğudur. Uygulamada tasarım sistemi bu ayrımı yalnızca teknik tanımla bırakmamalıdır. Butonun yatay padding’i etiket uzunluğuna uyum sağlarken minimum hit area korunur. Kartın iç padding’i içerik ritmini, liste öğeleri arasındaki gap ise grup düzenini yönetir.
Modern layout sistemlerinde öğeler arası boşluğu parent container üzerindeki gap ile yönetmek çoğu zaman daha öngörülebilirdir. Bileşen her yerde kendi dış margin’ini taşıdığında farklı bağlamlarda istenmeyen boşluklar oluşabilir. Bileşen iç kurallarını bilir; sayfa düzeni bileşenler arasındaki ilişkiyi belirler.
Kenar boşlukları ve güvenli alanlar
Mobil sayfa yatay padding’i içerik tipine göre tutarlı bir token olmalıdır. Tam taşan medya ile okunabilir metin aynı kenar kuralını kullanmak zorunda değildir. Çentik, home indicator ve sistem çubukları için platform safe area değerleri dikkate alınmalıdır. Alt sabit aksiyon çubuğu içeriği örtmemeli; klavye açıldığında ana buton ve form alanları erişilebilir kalmalıdır.
Alt navigasyonda etiketler, aktif durum ve ikon alanları tek elle erişimi desteklemelidir. Kaydırma alanının sonuna, sabit öğenin yüksekliği kadar güvenli boşluk eklemek son içeriğin kapanmasını önler. Landscape ve tablet kırılımları ayrıca test edilmelidir.
Tipografi, form ve geri bildirim
Okunabilir gövde metni, kontrollü satır uzunluğu ve erişilebilir yeniden boyutlandırma mobil standardın parçasıdır. Input alanlarında yalnızca placeholder etikete dönüştürülmemeli; görünür label ve alanla ilişkili hata metni bulunmalıdır. Dokunma sonrası pressed durumu, işlem uzarsa loading göstergesi ve tamamlandığında açık başarı mesajı verilmelidir.
Hareket kullanıcıya neden-sonuç ilişkisi kurmalı, işlemi geciktirmemelidir. Hareket azaltma tercihi desteklenmeli; bilgi yalnızca animasyonla aktarılmamalıdır. Ağ yavaşlığı ve offline durumları prototipin dışında bırakılmamalıdır.
Teslim ve kalite kontrolü
Tasarım dosyasında spacing, radius, type ve renk tokenları adlandırılır; bileşenlerin varyant ve durumları gerçek içerikle denenir. Geliştiriciye yalnızca ekran görüntüsü değil, davranış notları ve kırılım kuralları verilir. En küçük desteklenen cihaz, büyük yazı, uzun Türkçe metin, İngilizce varyant, koyu tema ve düşük bağlantı koşulu test listesine eklenir.
İyi mobil standart, tek bir “doğru padding” sayısı vermez. Ekipte aynı karar mantığını tekrar kullanılabilir hale getirir. Böylece yeni ekranlar mevcut sistemden türetilir; istisna gerektiğinde neden farklı olduğu görülebilir ve ürün büyürken ritim korunur.
Dokunma alanı, buton hiyerarşisi ve boşluk ölçeğini ezbere sayılar yerine sistemli kararlarla kurmak, ürün büyüdükçe fark yaratıyor. Mobil uygulama UI/UX tasarımı hizmetimde bu kararları akış şemalarından bileşen kütüphanesine kadar birlikte ele alıyorum.
