Modern arayüz tasarımında “az aslında çoktur” felsefesinin en güçlü temsilcilerinden biri olan Drawer (Çekmece) bileşeni, kullanıcı deneyimini (UX) temiz ve odaklı tutmanın anahtarıdır. Ekranın kenarında pusuda bekleyen bu yardımcı panel, sadece ihtiyaç duyulduğunda sahneye çıkarak karmaşayı önler.

Drawer Bileşeni Nedir?

Drawer, ekranın bir kenarından (sol, sağ, üst veya alt) içeriye doğru kayarak açılan ve yardımcı içerikleri barındıran bir paneldir. Genellikle o meşhur “hamburger menü” ikonuyla tetiklenir. Geçici olarak önemli olan bilgileri her an ulaşılabilir kılar, ancak işiniz bittiğinde tek bir dokunuşla ortadan kaybolur.

İki Ana Karakter: Modal ve Non-modal

• Modal Drawer: Kullanıcı arka plana dokunduğunda otomatik olarak kapanır. Odağı tamamen kendine çeker.
• Non-modal Drawer: Kullanıcının hem çekmece içindeki içerikle hem de arka plandaki içerikle aynı anda etkileşime girmesine izin verir.

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

Drawer bileşeni, her derde deva değildir; ancak doğru yerde kullanıldığında arayüzü ferahlatır:

1. İkincil Aksiyonlar: Her an kullanılmayan ayarlar, profil linkleri veya yardım dökümanları için mükemmeldir.
2. Sınırlı Ekran Alanı: Özellikle mobil cihazlarda, ana ekranı boğmadan ek özellikleri saklamak için can kurtarır.
3. Filtreleme ve Sıralama: E-ticaret sitelerinde ürünleri süzmek için geniş bir alan sunar.
4. Bildirimler ve Sohbet: Kullanıcıyı mevcut sayfadan koparmadan yeni mesajları veya bildirimleri göstermenin zarif bir yoludur.

Tasarımın Anatomisi ve Kritik Varyasyonlar

Mobbin üzerindeki 1.000’den fazla gerçek dünya örneği, tasarımcıların çekmeceleri şu şekilde özelleştirdiğini gösteriyor:

• Dört Bir Yandan Erişim: Geleneksel olarak soldan gelse de, sağdan gelen çekmeceler genellikle filtreleme; üstten gelenler bildirim; alttan gelenler ise hızlı aksiyonlar (Bottom Sheet benzeri) için tercih edilir.
• Yüzen (Floating) Çekmeceler: Kenara yapışık olmak yerine, ekranın kenarından hafifçe ayrık durarak daha modern ve derinlikli bir görünüm sunar.
• İçeriği İten (Pushy) Çekmeceler: Bu varyasyonda çekmece içeriğin üzerine binmez; aksine ana içeriği yana doğru iterek kendine yer açar.

Avantajlar ve Dezavantajlar: Teraziye Koyalım

Avantajları:

• Temiz Arayüz: Kullanılmayan özellikleri gizleyerek odaklanmayı artırır.
• Esneklik: İçinde liste, form, grafik veya sohbet gibi her türlü içeriği barındırabilir.
• Hiyerarşi: Ana navigasyon ile ikincil araçları net bir şekilde ayırır.

Dezavantajları ve Riskler:

• Keşfedilebilirlik Sorunu: “Gözden ırak olan, gönülden de ırak olur.” Eğer bir özellik çekmece içine saklanmışsa, kullanıcı onun orada olduğunu unutabilir.
• Sık Kullanım Yorgunluğu: Eğer kullanıcı sürekli iki bölüm arasında geçiş yapıyorsa, çekmeceyi her seferinde açıp kapatmak bir süre sonra işkenceye dönüşür. Bu durumda Tab Bar daha iyidir.

Kritik Karışıklıklar: Drawer vs. Diğerleri

• Drawer vs. Dialog: Dialog ekranın ortasında belirir ve bir karar vermenizi zorunlu kılar. Drawer ise genellikle navigasyon veya ek bilgi amaçlıdır ve daha az “kesintili” bir his verir.
• Drawer vs. Sidebar: Sidebar (Yan Menü) genellikle sabittir ve her zaman görünür. Drawer ise gizlidir ve sadece tetiklendiğinde ortaya çıkar.

Özetle: Drawer, arayüzünüzün “İsviçre çakısıdır.” Doğru kullanıldığında karmaşık bir uygulamayı minimalist bir sanat eserine dönüştürebilir.