Bottom Sheet: Ne Zaman Kullanılır, Ne Zaman Sayfaya Geçilir
Bottom sheet, ekranın altından gelen geçici bir katman. Faydası, kullanıcıyı bulunduğu bağlamdan koparmadan tek bir karar aldırabilmesinde. Sorun, bir sayfanın yapması gereken işi üstlendiği anda başlıyor ve bu sınır göründüğünden daha erken geliyor.
Modal ayrımı görsel değil, davranışsal
Arkaya yarı saydam bir perde koymak sheet'i modal yapmaz. Modal olması için üç şeyin birden doğru olması gerekir: arka plan gerçekten etkileşime kapalı olacak, klavye odağı sheet'in içinde kalacak, ekran okuyucu perdenin arkasındaki içeriği okumayacak.
Web tarafında bunun karşılığı aria-modal ile birlikte arka plan içeriğine inert vermek ya da odağı elle hapsetmek. Yapmazsanız sekme tuşuna basan kullanıcı görünmeyen bağlantılar arasında dolaşır, ekran okuyucu da sheet bittikten sonra sayfanın geri kalanını okumaya devam eder. Native tarafta aynı iş Android'de arka plan görünümlerinin erişilebilirlik önemini kapatmak, iOS'ta accessibilityViewIsModal ile yapılır. Perde kozmetiktir, modallik bu üç satırdadır.
Modsuz sheet'te ise arka plan çalışmaya devam eder ve bu bir eksiklik değil, tercihtir. Harita üstünde bir konum kartı gösterirken kullanıcının haritayı kaydırabilmesi gerekir.
Kapatma yolları ve geri tuşu
Her sheet'in en az iki kapatma yolu olmalı. Aşağı kaydırma tek yol olarak yetmez; ekran okuyucu kullanan ya da hassas jest yapmakta zorlanan kullanıcı için o hareket erişilebilir değil. Görünür bir kapatma düğmesi ekleyin, modal sheet'lerde perdeye dokunmayı da kapatma sayın.
Asıl atlanan yer geri tuşu. Android'de jest ya da donanım geri, açık sheet'i kapatmalı; altındaki ekrandan çıkmamalı. Web'de sheet açmak tarayıcı geçmişine bir kayıt bırakmalı, yoksa kullanıcı sheet açıkken geri der ve kendini önceki sayfada bulur. Bunu düzeltmenin maliyeti bir history girdisi eklemek kadar; atlanmasının maliyeti kullanıcının akışı kaybetmesi.
Genişleyen sheet bir noktadan sonra sayfadır
Kaynakların çoğu genişletilebilir sheet'i ayrı bir tür sayar, birkaç satır sonra da kısa ve geçici tutmayı söyler. İkisi aynı anda geçerli olmaz. Tam ekrana açılan, kendi içinde uzun uzun kaydırılan bir katman artık sayfadır (isim tartışması bana boş geliyor, mesele geri yığınında bir kaydının olup olmadığı).
Pratik sınır şu: içerik sheet'in içinde kaydırma gerektiriyorsa ve kullanıcı orada birkaç saniyeden fazla kalacaksa, o ekranın kendi adresi ve kendi geri davranışı olsun. Sheet'i sheet yapan şey yüzeyin şekli değil, kısalığı.
Üst üste sheet açmak da aynı sorunun başka hali. İkinci sheet'i açtığınız anda kullanıcı kaç kez geri gitmesi gerektiğini bilmiyor demektir. İkinci adım gerekiyorsa aynı sheet içinde ilerleyen bir akış kurun ya da sayfaya geçin.
Klavye ve alt kenar
Sheet içinde form alanı varsa klavye açıldığında sheet yükselmeli, yoksa yazdığı alanı görmeyen bir kullanıcı kalır elinizde. Webde bunun için sabit 100vh yerine dinamik viewport birimlerine ya da visualViewport ölçümüne ihtiyacınız var. Alt kenarda da jest çubuğunun kapladığı güvenli alan kadar iç boşluk bırakın; bırakmazsanız son satırdaki düğme sistem çubuğunun altında kalır.
Bu iki hata geniş ekranlı tek bir test cihazında hiç görünmez. Küçük ekranlı ve çentikli bir cihazda beş saniyede ortaya çıkar.
Nerede iyi çalışır, nerede başka bileşen
Sheet'in iyi çalıştığı yerler dar ve nettir: harita üstünde konum detayı, medya oynatıcı kontrolleri, listeden hızlı seçim (beden, renk, ilçe), fotoğraf kaynağı seçimi, bir filtrenin geçici olarak açılması.
Bunların dışında başka bileşenler daha doğru sonuç verir. Tek cümlelik bir geri bildirim için snackbar yeterli, sheet fazla ağırdır. Yıkıcı bir işlemin onayı dialog ister, çünkü orada kullanıcının yanlışlıkla aşağı kaydırıp kapatması istenmez. Küçük bir seçenek listesi için menü ya da popover hem daha az yer kaplar hem de bağlamı hiç bozmaz.