Modal ve Nonmodal Diyaloglar: Kısıt Nerede Başlar

Modal ile nonmodal arasındaki fark çoğu tartışmada görünüşe indirgeniyor: arka plan karardıysa modal, kararmadıysa değil. Oysa ayrım davranışta. Bir diyalog, arkasındaki içerikle etkileşimi gerçekten kesiyorsa modaldir; karartma sadece bunun kullanıcıya söylenme biçimi.

Modalliği ne belirler

Üç şeye bakın. Klavye odağı diyaloğun içinde kalıyor mu, yoksa Tab'la arkadaki forma geçebiliyor musunuz? Ekran okuyucu arka plandaki başlıkları hâlâ okuyor mu? Arka plandaki bağlantılar tıklanabilir mi? Üçüne de "hayır" diyebiliyorsanız elinizde modal bir diyalog var. Biri bile "evet" ise, kullanıcıya modal gibi görünen ama davranmayan bir katman var.

Bu ayrımın pratikte karşılığı şudur: karartılmış bir div, ekranı görsel olarak kapatır ama odağı kapatmaz. Fare kullanan biri arkaya tıklayamaz, klavyeyle gezen biri arkaya rahatça geçer, üstelik gittiği yeri göremez çünkü orası karartılmıştır. Yani erişilebilirlik açısından en kötü kombinasyon: kısıt görsel olarak var, teknik olarak yok.

Modal'ı sıfırdan kendin kurma. <dialog> elemanını showModal() ile açtığında odak yönetimi, arka planın inert hale gelmesi, ::backdrop ve Esc ile kapanma zaten geliyor. Üç satırla aldığın davranışı elle yazmaya kalkınca odak tuzağı, kapanışta odağın tetikleyen düğmeye dönmesi ve arka plan kaydırmasının kilitlenmesi ayrı ayrı hata kaynağına dönüşüyor.

Onay penceresinin sessiz başarısızlığı

Modal diyalogun klasik gerekçesi geri alınamaz işlemler: silmeden önce sor. Mantıklı görünüyor, ama sorunun kendisi tekrarlandıkça etkisini yitiriyor. Aynı onay kutusunu ellinci kez gören kullanıcı metni okumaz, düğmenin ekrandaki yerini ezberler ve refleksle basar. Onay artık bir karar noktası değil, akışın içindeki fazladan bir tıklama.

Ölçmesi de kolay: onay penceresinin açılışı ile onay tıklaması arasındaki süreye bakın. Yarım saniyenin altında yoğunlaşan bir dağılım, kimsenin okumadığı anlamına gelir. Böyle bir dağılım görüyorsanız pencereyi güzelleştirmenin faydası yok.

Bu durumda onayı kaldırıp işlemi geri alınabilir yapmak daha iyi çalışıyor. Kullanıcı doğrudan siler, ekranda birkaç saniye "geri al" durur. Yanlışlıkla silenlerin oranı düşmez, ama yanlışlığın maliyeti düşer. Onay her kullanıcıyı yavaşlatır, geri alma yalnızca hata yapanı ilgilendirir.

Geri almanın kurulum maliyeti de sanıldığı kadar yüksek değil. Silme işlemini gerçekten silme değil, kayda bir durum alanı yazma olarak kurarsan iş bitiyor; asıl temizliği arka planda çalışan bir görev yapar. Zor olan kısım genellikle veritabanı değil, o kaydı bekleyen raporların ve sayaçların silinmişleri dışarıda bıraktığından emin olmak.

Nonmodal diyaloğun asıl işi

Nonmodal diyalog, kullanıcının diyalog ile ana içerik arasında gidip gelmesi gerektiğinde anlam kazanır. Ara-değiştir paneli en temiz örnek: panel açıkken metnin kendisiyle çalışmaya devam edersiniz. Katman paneli, yorum kenar çubuğu, biçim ayarları da aynı sınıfta.

Kaynak metinlerde sık geçen bir iddia var: nonmodal diyaloglar mobilde otomatik olarak modale dönüşür. Böyle bir otomatiklik yok. Olan şey, dar ekranda yan yana iki alan sığmadığı için tasarımcının paneli tam ekran bir sayfaya çevirmesi, o sayfa da doğal olarak arkayı kapatıyor. Karar tarayıcının değil, tasarımın. Kararı bilinçli vermek gerekir, çünkü panelin tam ekrana geçmesi aslında özelliğin kendisini değiştirir: ara-değiştir paneli metni göremiyorsa yaptığı işi kaybeder. Mobilde çözüm çoğu zaman paneli alta yapışık ince bir şerit haline getirmek, tam ekran bir katmana çevirmek değil.

Kapanış ve zamanlama

Her modal diyaloğun üç çıkışı olsun: kapatma düğmesi, Esc tuşu, arka plana tıklama. Üçü de aynı sonuca varmalı, ve kapanışta odak diyaloğu açan düğmeye geri dönmeli. Odak geri dönmezse klavye kullanıcısı sayfanın başına savrulur, on beş Tab sonra kaldığı yere ulaşır.

Kendiliğinden kaybolan bildirimler ayrı bir mesele. Bir eylemin tek geri alma yolu birkaç saniyede kaybolan bir şeritteyse, o şerit artık bilgilendirme değil, süreye bağlı bir arayüz. WCAG'ın süre ayarlanabilirliği ölçütü tam bunu hedefliyor. Ekran okuyucuyla gezen ya da metni yavaş okuyan biri o düğmeyi göremeden kaybeder. Geri alma imkânını süreli bir bileşene bağlayacaksanız, aynı işlemi kalıcı bir yerden de yapılabilir bırakın.

Toparlarsak: modal diyalog, kullanıcının o an başka bir şey yapmasının gerçekten anlamsız olduğu durumlar için doğru araç. Onun dışındaki her kullanım, aslında bir bilgiyi görülür kılmanın kolay yolunu aramaktır ve kullanıcıya bunun bedelini ödetir.