Overlay ve Lightbox: Ne Zaman Modal, Ne Zaman Ayrı Sayfa

Modal pencerenin tek işi kullanıcının akışını kesmek. O yüzden soru "nasıl güzel bir overlay tasarlarım" değil, "bu içerik akışı kesmeyi hak ediyor mu". Çoğu zaman etmiyor. Ettiği durumlar da bellidir, ve o durumlarda işi bitiren şey tasarım değil odak yönetimiyle mobil ölçüler oluyor.

Modalı hak eden içerik

Üç senaryo var. Kullanıcının kendi tıklamasıyla açtığı kısa bir form ya da onay kutusu. Geri alınamaz bir eylemin doğrulanması, silme gibi. Bir de lightbox'ın asıl işi: listedeki bir öğenin büyük halini sayfadan ayrılmadan göstermek.

Geri kalan her şey ayrı sayfaya gider. Çok adımlı formu modala koymanın bedeli somut: modal içeriğinin adresi yoktur. Kullanıcı o ekranı paylaşamaz, yer imine ekleyemez, sekmeyi yenilerse doldurduğu her şey gider, geri tuşu modalı kapatmak yerine onu siteden çıkarır. Üç alanlık bir abonelik formunda bunlar önemsiz. Altı adımlık bir başvuru formunda destek talebine dönüşür.

Otomatik açılma ve exit-intent çelişkisi

Standart tavsiye şu ikisini yan yana koyar: otomatik açılan pencere kullanma, onun yerine kullanıcı çıkmak üzereyken göster. İkisi aynı şey. Exit-intent de otomatiktir, sadece tetikleyicisi zamanlayıcı yerine imleç hareketidir.

Asıl sorun mobilde. Exit-intent imlecin viewport'un üst kenarına doğru çıkmasını dinler; dokunmatik ekranda imleç yok. Mobilde bu davranış ya hiç çalışmaz ya da kaydırma yönü, sekme değişimi, geri tuşu gibi vekil sinyallerle taklit edilir. Vekil sinyal yanlış tetiklenir: kullanıcı sadece yukarı kaydırmıştır, pencere önüne düşer. Trafiğin çoğunluğu mobilse "exit-intent kullan" tavsiyesi pratikte "masaüstünde niyete göre, mobilde rastgele göster" anlamına gelir. Zamanlamayı tetikleyiciye bağlamak yerine niyete bağla: pencere yalnızca bir butona basıldığında açılsın.

Odak, klavye ve ekran okuyucu

Modal açıldığında odak modalın içine, ilk odaklanabilir öğeye taşınmalı. Esc kapatmalı. Tab tuşu modalın içinde dönmeli, arka plandaki bağlantıların arasında dolaşmamalı. Ve kapanınca odak, modalı açan butona geri dönmeli. En sık atlanan madde bu sonuncusu: odak geri verilmezse ekran okuyucu kullanıcısı sayfanın en başına düşer ve az önce nerede olduğunu bulmak için baştan gezinir.

Yeni modalları artık <dialog> elementiyle açarım. showModal() odak tuzağını, Esc davranışını, arka planın etkisizleşmesini ve ::backdrop ile karartmayı tarayıcıya devrediyor; geriye yalnızca stil ve odağı butona geri yazmak kalıyor. Elle yazılmış bir focus trap ile aynı işi görmek yüzlerce satır ve her tarayıcıda ayrı bir hata demek.

Mobilde kırılan yerler

• Yüksekliği 100vh verilen modalın alt kenarı, adres çubuğu görünürken ekranın dışında kalır. Kapatma butonu oradaysa pencere kapatılamaz. dvh kullan ya da yüzdeli bir max-height verip içeriği modalın içinde kaydır.
• Arka planı position: fixed ile kilitlersen iOS sayfayı başa alır; kullanıcı modalı kapattığında okuduğu yeri kaybeder. Kilitlemeden önce kaydırma konumunu sakla, kapanışta geri yaz.
• Form alanına dokunulunca klavye açılır ve görünür alan yarıya iner. Gönder butonu klavyenin altında kalıyorsa modal işe yaramaz hale gelir.
• Kapatma kontrolü parmakla vurulabilir büyüklükte olmalı. Köşeye sıkıştırılmış küçük bir çarpı, masaüstünde imleçle kolay, telefonda üç denemede bulunur.

Kapanınca veri gitmesin

Yaygın uygulama, modal kapanırken içeriği tamamen kaldırıp tekrar açılışta sıfırdan kurmak. Kullanıcı yanlışlıkla dışarı dokunur, doldurduğu dört alan silinir. Girilen değerleri sakla ve pencere yeniden açıldığında geri koy.

Dışarı tıklayınca kapanma davranışı da koşullu olmalı: boş bir bilgilendirme penceresi dış tıklamayla kapansın, içine veri girilmiş bir form kapanmasın. O formda çıkış yolu yalnızca kapat butonu ve Esc olsun.

Ölçerken neye bakmalı

Popup'ın dönüşüm oranına tek başına bakmak yanıltıcı. Pencere gösterilen oturumlarda sayfa terk oranı ve oturum başına görüntülenen sayfa sayısı ne oldu, onu da ölç. Formu dolduran yüzde iki kişi, ekranı kapatıp giden yüzde on beşin maliyetini karşılamıyorsa pencere kazandırıyor gibi görünürken kaybettiriyordur. Aynı içeriği sayfanın içine yerleştirilmiş sabit bir bloğa taşıyıp ölçmek de ayrı bir karşılaştırma verir; çoğu durumda kaybettiği tıklama sandığından az olur.