Arayüz Tasarım Kalıpları (UI Design Pattern)

Bottom Page Navigation

Mobil cihazların ekranları büyüdükçe, tasarımcılar kullanıcıların “tek el” kullanım alışkanlıklarına odaklanmaya başladı. İşte bu noktada, modern mobil arayüzlerin (UI) vazgeçilmezi olan Alt Navigasyon (Bottom Navigation) devreye giriyor. Kullanıcının başparmağına en yakın noktada konumlanan bu menü tipi, erişilebilirlik (accessibility) açısından dijital dünyanın en stratejik araçlarından biridir.

Alt navigasyon, bir mobil uygulama veya web sitesinin en alt kısmında sabitlenen, genellikle 3 ila 5 ana kategoriye hızlı erişim sağlayan yatay bir çubuktur. Kullanıcının uygulama içindeki ana hedefleri arasında (örneğin; Ana Sayfa, Arama, Profil) tek bir dokunuşla geçiş yapmasına olanak tanır.

Örnek Görünüm

Kullanım Alanları

Alt navigasyon, hiyerarşinin çok derin olmadığı ve kullanıcının bölümler arasında sık sık geçiş yaptığı platformlar için idealdir:

  • Sosyal Medya Uygulamaları: Instagram, TikTok ve Twitter gibi platformların temel yapısıdır.
  • E-ticaret Uygulamaları: “Sepetim”, “Favoriler” ve “Keşfet” gibi bölümlere anlık erişim sağlar.
  • Müzik ve Medya Oynatıcılar: Spotify veya YouTube gibi uygulamalarda içerik keşfi ve kütüphane erişimi için kullanılır.
  • Finans ve Bankacılık: Özet bilgiler ile işlemler arasında hızlı geçiş imkanı sunar.

Kullanım Alanları ve Amacı

Alt navigasyonun temel varlık sebebi hız ve ergonomidir:

  • Bölümler Arası Geçiş: Uygulamanın en üst seviyedeki 3-5 ana fonksiyonuna anında ulaşım sağlamak.
  • Mevcut Durum Belirteci: Kullanıcının o an hangi ana bölümde olduğunu görsel olarak (ikon rengi veya dolgusu ile) vurgulamak.
  • Başparmak Bölgesi (Thumb Zone) Optimizasyonu: Kullanıcının telefonunu tutarken ekranın üst kısmına uzanmasına gerek kalmadan, en rahat eriştiği alanda kontrol sunmak.

Kritik Unsurlar ve Başarı Kriterleri

Başarılı bir alt navigasyon tasarımı şu detaylarda gizlidir:

  • Öğe Sayısı: İdeal olarak 3 ile 5 arası öğe barındırmalıdır. 3’ten azı boş görünür, 5’ten fazlası ise dokunma alanını daraltarak hata payını artırır.
  • İkon ve Etiket Dengesi: İkonlar tek başına her zaman anlaşılır olmayabilir. Net ve kısa metin etiketleri (Örn: “Ana Sayfa”, “Ayarlar”) kullanmak kullanıcı bilişsel yükünü azaltır.
  • Görsel Geri Bildirim: Aktif olan sekme mutlaka belirgin bir farkla (renk değişimi, alt çizgi veya ikon dolgusu) gösterilmelidir.
  • Sabitlik: Kullanıcı sayfayı aşağı kaydırsa bile menü genellikle ekranın altında sabit kalmalıdır.

Avantajlar ve Dezavantajlar

Alt navigasyonun kullanıcı deneyimi üzerindeki etkilerini şöyle analiz edebiliriz:

Avantajları (Pros)

  • Ergonomik Üstünlük: Büyük ekranlı telefonlarda tek elle kullanım kolaylığı sağlar.
  • Görünürlük: Menü her zaman göz önündedir, “hamburger menü” gibi seçenekleri gizlemez.
  • Zihinsel Model: Kullanıcılar alt menüyü “ana duraklar” olarak kodlar, bu da uygulama içi yön bulmayı (navigation) hızlandırır.
  • Hızlı Geçiş: Tek bir dokunuşla bir bölümden diğerine, önceki sayfaları kapatmak zorunda kalmadan geçilebilir.

Dezavantajları (Cons)

  • Ekran Alanı Kaybı: Ekranın alt kısmından değerli bir alanı sürekli işgal eder.
  • Karmaşıklık Sınırı: Sadece sınırlı sayıda (en fazla 5) seçenek sunabilir; daha karmaşık yapılar için ek menülere ihtiyaç duyar.
  • Platform Uyumu: Android ve iOS arasında tasarım standartları (Human Interface Guidelines vs. Material Design) bazen farklılıklar yaratabilir, bu da tutarlı tasarım yapmayı zorlaştırabilir.

Özetle: Alt navigasyon, mobil öncelikli (mobile-first) dünyanın en etkili “kısayol” çözümüdür. Kullanıcınızın işini kolaylaştırmak ve uygulama içinde kaybolmasını engellemek istiyorsanız, bu tasarım deseni en büyük yardımcınız olacaktır.

image
Kemal ŞAHİN | Akademik Hayat

Akademisyen, kullanıcı deneyimi ve arayüz tasarımı, veri görselleştirme, web/mobil uygulama geliştirme.

Kemal ŞAHİN'i yakından tanıyın.