Mobilde Overlay Kapatma: Geri Tuşu, Kaydırma ve Emek Kaybı

Mobilde overlay'in asıl sorunu açılışı değil, kapanışı. Kullanıcı geri tuşuna basıyor ve sadece katman değil bütün sayfa gidiyor; ya da kaydırıyor, panel kapanacağına içerik kayıyor. İkisi de tasarım tercihi gibi görünür, ikisi de aslında kapatma davranışının uygulamada nereye bağlandığıyla ilgilidir.

Kapatmanın tek doğru yolu yok, tek tutarlı yolu var

Bir overlay'in kaç kapanma yolu olduğu sorun değil. Sorun, bu yolların farklı sonuçlar üretmesi. X düğmesi katmanı kapatıyor, geri tuşu sekmeyi kapatıyor, dışarı dokunma formu sıfırlıyorsa kullanıcı hangi hareketi yapacağını tahmin edemez ve en güvenli gördüğünü, yani hiçbirini yapmaz.

Kural şu: bütün kapatma yolları aynı fonksiyona gitsin. Farklı kod yolları yazdığınız anda davranış ayrışır.

Geri tuşunu overlay'e bağlayın

Mobil kullanıcı açılan katmanı yeni bir sayfa sanar ve geri tuşuna basar. Buna karşı "kısmi overlay kullanın ki sayfa sanmasın" tavsiyesi verilir. Yetersiz bir çözüm; kullanıcının alışkanlığını görsel ipucuyla değiştirmeye çalışmak yerine alışkanlığı desteklemek daha ucuz.

Overlay açılırken bir history kaydı bırakın, kapanışı da popstate üzerinden yürütün:

function openOverlay(id) { history.pushState({ overlay: id }, ""); render(id); } window.addEventListener("popstate", () => { if (isOverlayOpen()) closeTopOverlay(); });

Kritik nokta X düğmesinde: overlay'i doğrudan kapatmayın, history.back() çağırın. Doğrudan kapatırsanız yığında sahipsiz bir kayıt kalır ve kullanıcı bir sonraki geri hareketinde hiçbir şey olmadığını görür. Bu, gerçek cihazda hemen fark edilir, masaüstü tarayıcıda neredeyse hiç fark edilmez (mobil testi atlayan ekiplerin en sık kaçırdığı hata bu).

Kaydırarak kapatma, içerik kaydırmasıyla çakışır

Alt sayfaların kaydırılarak kapatılması iyi bir jest, ama içeriğin kendisi de kaydırılabiliyorsa iki hareket aynı parmakla yarışır. Kullanıcı listeyi yukarı çekmek isterken panel kapanır.

Uygulanabilir çözüm basit: kaydırarak kapatmayı yalnızca içerik en üstteyken (scrollTop === 0) devreye alın, panelin üst kısmına bir tutamaç koyun ve o tutamacı her zaman sürüklenebilir bırakın. Bunun yanına yine de görünür bir kapatma düğmesi ekleyin. Jest keşfedilebilir değildir, düğme keşfedilebilirdir.

Dışarı dokunma ve emek kaybı

Dışarı dokunma en kolay kapatma yolu, aynı zamanda en kazara olanı. Filtre seçmiş, form doldurmuş bir kullanıcının yaptığı iş bu şekilde sessizce silinir.

Ayrımı içeriğe göre yapın: okuma amaçlı ve kaybedilecek girdisi olmayan katmanlarda dışarı dokunma açık kalsın; girdi alan her modalda kapatılsın ya da "değişiklikleri bırak" onayına bağlansın. Onay diyaloğunu overlay üstüne overlay açmadan, aynı panelin içinde göstermek daha temiz sonuç verir.

Filtre panelleri özel bir durum: seçimler uygulanmadan kapanıyorsa kapanışta seçimi saklayın, panel tekrar açıldığında geri yükleyin. Kullanıcı hiçbir şey kaybetmediğini görürse panelle denemekten çekinmez.

Yığının gerçek maliyeti

"Overlay üstüne overlay açmayın" tavsiyesi doğru ama gerekçesi genelde eksik verilir. Mesele kafa karışıklığı değil, iki ayrı yığının senkron kalmak zorunda olması: görsel yığın ile history yığını. Üç katman açıldığında bunların sırası, kapanma animasyonları ve odak yönetimi birbirini tutmak zorunda; bir tanesi kaçtığında hata kullanıcıya "geri tuşu bozuk" diye görünür.

İkinci katmana ihtiyaç duyduğunuz her yerde, o katmanın gerçek bir sayfa olup olamayacağını sorun. Cevap çoğunlukla evet. Kendi adresi olan sayfa geri tuşuyla, paylaşımla ve yer imiyle bedavaya uyumludur.

Odak nereye gidiyor

Overlay açıldığında odağı panelin içine taşıyın, kapandığında overlay'i açan öğeye geri verin. Panel açıkken arkadaki içeriği inert ile devre dışı bırakın; klavye ve ekran okuyucu kullanıcısının görünmeyen bağlantılar arasında dolaşmasının önüne bu geçer. Kapatma düğmesine anlamlı bir etiket verin, tek başına bir çarpı işareti ekran okuyucuda hiçbir şey ifade etmez.