Mobil uygulama dünyasında, kullanıcıyı mevcut sayfanın akışından koparmadan ona ek seçenekler sunmak büyük bir maharet ister. İşte bu noktada, ekranın altından nazikçe yükselen ve modern arayüzlerin vazgeçilmezi haline gelen Bottom Sheet (Alt Sayfa) bileşeni devreye giriyor.

Kullanıcıya hem esneklik hem de hız kazandıran bu bileşen, doğru kullanıldığında uygulamanızın profesyonelliğini bir üst seviyeye taşır. Gelin, bu dikey gücün detaylarına birlikte inelim.

Bottom Sheet Nedir?

Bottom Sheet, ekranın alt kenarına sabitlenmiş, yardımcı içerikleri veya ek eylemleri barındıran bir arayüz panelidir. Kullanıcılar bu paneli yukarı çekerek genişletebilir, aşağı kaydırarak daraltabilir veya tamamen kapatabilir.

Temel Karakteristiği: Ekranın tam genişliğini kaplar ve ana içeriğin üzerinde bir katman olarak belirir. Genellikle üst kısmındaki bir “tutamaç” (drag handle) ile yüksekliği ayarlanabilir.

Ne Zaman Sahneye Sürülmeli? (Kullanım Alanları)

Bottom Sheet, “geçici ama önemli” bilgilerin ev sahibidir:

1. Tamamlayıcı İçerik: Ana ekrandan ayrılmadan ek bilgi (Örn: Bir harita üzerinde seçilen mekanın detayları) sunmak için idealdir.
2. Bağlamsal Aksiyonlar: Bir mesaja uzun basıldığında çıkan “Yanıtla”, “İlet” veya “Sil” gibi o anki bağlama özel hızlı eylemler.
3. Paylaşım Menüleri (Share Sheets): İçeriği sosyal medyada paylaşmak veya birine göndermek için kullanılan en yaygın yöntemdir.
4. Filtreleme ve Sıralama: E-ticaret listelerini daraltmak için kullanılan seçenekleri, ekranın yarısını kaplayacak şekilde sunmak kullanıcıya büyük kolaylık sağlar.
5. Müzik ve Ses Çalarlar: Spotify gibi uygulamalarda çalan şarkının kontrol paneli genellikle bir Bottom Sheet olarak tasarlanır; yukarı çekildiğinde tam ekran olur, aşağı itildiğinde küçük bir bar olarak kalır.

Kritik Tasarım İkilisi: Modal mı, Non-Modal mı?

Bu iki varyant arasındaki farkı bilmek, kullanıcı deneyiminin başarısı için hayati önem taşır:

• Modal Bottom Sheet: Arka planı koyulaştırır (overlay) ve kullanıcı menüyle etkileşime girmeden veya onu kapatmadan ana ekrana dönmesine izin vermez. Kritik kararlar veya odaklanılması gereken görevler (Örn: Profil ayarları) için en iyisidir.
• Non-Modal (Persistent) Bottom Sheet: Arka planı engellemez; kullanıcı hem alttaki panelde işlem yapabilir hem de arkadaki ana ekranla etkileşime devam edebilir. Harita uygulamaları bunun en iyi örneğidir; kullanıcı haritayı kaydırırken alttaki mekan listesine de bakabilir.

Tasarımın Anatomisi ve Varyasyonlar

Mobbin üzerinde incelenen 12.500’den fazla örnek, Bottom Sheet’in çok yönlülüğünü kanıtlıyor:

• Konteyner Tipleri: Standart modelde yanlar ve alt ekranla birleşiktir, sadece üst köşeler yuvarlaktır. Ancak son dönemde ekran kenarlarından kopuk duran “Floating” (Yüzen) modeller ve daha keskin hatlı “Rectangular” modeller de oldukça popüler.
• Tutamaçlar ve Kapatma Butonları: Kaydırılabilir (draggable) modellerde üstte ince bir çizgi (handle) bulunur. Kaydırma özelliğinin istenmediği modal yapılarda ise genellikle sağ üstte bir “X” (kapatma) butonu yer alır.
• Yükseklik Ayarı: Bazı alt sayfalar ekranın sadece %30’unu kaplarken, bazıları (“Tall Bottom Sheets”) neredeyse tam ekran boyutuna ulaşabilir.

Avantajlar ve Dezavantajlar

Neden Tercih Etmelisiniz? (Avantajlar)

• Erişilebilirlik: Mobil cihazlarda başparmağın en rahat ulaştığı yer ekranın altıdır. Bu nedenle kullanıcı dostudur.
• Bağlamı Korumak: Kullanıcı başka bir sayfaya gitmediği için nerede olduğunu unutmaz, zihinsel odağı dağılmaz.
• Akıcılık: Animasyonlarla desteklendiğinde uygulamaya modern ve organik bir his katar.

Riskler ve Dezavantajlar:

• Birincil Görevler İçin Uygun Değil: Kullanıcının tüm dikkatini gerektiren, çok uzun sürecek işlemler için yarım bir ekran kullanmak kullanıcıyı kısıtlanmış hissettirir.
• Karmaşık İşlemler: Çok fazla veri girişi veya karmaşık etkileşimler küçük bir panel içinde boğucu olabilir.
• Sık Geçiş Sorunu: Eğer kullanıcı sürekli arka plan ile alt sayfa arasında mekik dokumak zorundaysa, bu durum bir süre sonra yorucu bir deneyime dönüşür.

Karıştırılan Kavramlar: Bottom Sheet vs. Diğerleri

• Bottom Sheet vs. Action Sheet: Action Sheet genellikle daha dar bir seçenek listesidir ve ekranın 3 yanına (alt, sağ, sol) yapışmak zorunda değildir, daha çok “yüzen” bir menü gibidir.
• Bottom Sheet vs. Dialog: Dialog ekranın ortasında belirir ve genellikle daha kısadır. Bottom Sheet ise aşağıdan yukarıya doğru bir “sayfa” hissi vererek daha fazla içerik barındırabilir.

Özetle: Bottom Sheet, uygulamanızın “hızlı erişim çekmecesidir”. Kullanıcıya ihtiyaç duyduğu gücü, onu ana yoldan saptırmadan sunar.