Modal ve Diyalog Pencereleri Nasıl Tasarlanır?
Modal pencere, kullanıcının dikkatini zorla bir göreve çeker; bu yüzden yalnızca gerçekten bölünmeyi hak eden durumlarda kullanılmalıdır. İyi tasarım, modalın ne zaman açılacağına, nasıl kapanacağına ve kullanıcıyı nereye bırakacağına karar vermektir.
Bir bakışta
- Modal bir kesintidir. Arkadaki içerikle etkileşimi keser, bu yüzden kısa ve gerekçeli olmalıdır.
- Önce alternatifi düşünün. Satır içi mesaj, çekmece, açılır kutu ya da ayrı sayfa çoğu zaman daha az rahatsız eder.
- Kapatma yolu her zaman görünür olmalıdır. Kapat düğmesi, Esc tuşu ve uygun yerlerde dış alana tıklama birlikte çalışır.
- Odak yönetimi erişilebilirliğin temelidir. Modal açılınca odak içine girmeli, kapanınca tetikleyen öğeye dönmelidir.
- Mobilde modal farklı davranır. Küçük ekranlarda alt sayfa ya da tam ekran daha doğal olabilir.
Modal ne zaman doğru çözümdür?
Modal, kullanıcıyı bulunduğu akıştan çıkarmadan kısa ve odaklı bir göreve çağırır. Bu gücü aynı zamanda riskidir: her açılışta kullanıcıyı keser. Bu nedenle modalı varsayılan çözüm olarak değil, istisna olarak düşünün.
Modal şu durumlarda mantıklıdır:
- Geri alınamaz bir eylem öncesi onay (hesabı silme, ödemeyi gönderme)
- Mevcut bağlamdan kopmadan tamamlanabilecek kısa bir görev (hızlı kayıt, tek alanlı düzenleme)
- Devam etmeden önce verilmesi zorunlu bir karar
- Önemli bir hata ya da bilginin görmezden gelinmemesi gereken durumu
Uzun formlar, karmaşık içerikler ve dikkat gerektirmeyen duyurular için modal uygun değildir. Bunlar için sayfa, çekmece ya da satır içi bölüm daha az sürtünme yaratır. Karar vermek için kendinize sorun: kullanıcıyı gerçekten durdurmam gerekiyor mu?
Kullanıcıyı durdurmak gerekiyorsa modal, gerekmiyorsa daha hafif bir çözüm
- Geri alınamaz eylem öncesi onay gerekiyorModalKullanıcının dikkatini bilinçli çekmek amaçlanıyor.
- Uzun içerik ya da çok adımlı formAyrı sayfa ya da çekmeceModal içinde kaydırma ve adım yönetimi zorlaşır.
- Bilgilendirme, acil olmayan duyuruSatır içi mesaj ya da bildirimAkışı kesmeden görünür kılar.
Bir modalın anatomisi
İyi bir modal birkaç sabit parçadan oluşur ve her parçanın görevi nettir:
- Başlık: modalın neden açıldığını tek cümleyle söyler
- Gövde: kararı vermek için gereken kısa açıklama
- Birincil eylem: kullanıcının büyük olasılıkla yapacağı seçenek, belirgin
- İkincil eylem: vazgeçme ya da alternatif, daha sönük
- Kapat düğmesi: köşede, görünür ve tanınabilir
- Arka plan katmanı: arkadaki içeriği karartarak dikkati modala çeker
Etiketler eylemi anlatmalıdır. "Evet" ve "Hayır" belirsizdir; "Hesabı sil" ve "Vazgeç" ise sonucu söyler. Yıkıcı eylemlerde birincil buton rengi uyarıcı olabilir, ama güvenli seçenek (vazgeç) kolay erişilebilir olmalıdır. Buton hiyerarşisi için buton tasarımı rehberindeki ilkeler modal içinde de geçerlidir.
Örnek senaryo: bir proje yönetim aracında kullanıcı projeyi silmek istiyor. Başlık "Projeyi silmek üzeresiniz", gövde "Bu projedeki tüm görevler ve dosyalar silinecek", eylemler "Projeyi sil" ve "Vazgeç". Kullanıcı ne olacağını okuyarak karar verir.
Açılış, kapanış ve klavye davranışı
Modalın davranışı görünümü kadar önemlidir. Kullanıcıya bir kapanış yolu mutlaka verilmelidir; çıkışı olmayan modal kullanıcıyı tuzağa düşürür. Yaygın olarak şu kapanış yolları birlikte sunulur: kapat düğmesi, Esc tuşu, vazgeç butonu ve (kritik olmayan modallarda) dış alana tıklama. Kritik onaylarda dış alana tıklamayla kapanması istenmeyebilir, çünkü yanlışlıkla işlem kaybı yaratabilir.
Klavye ve odak kuralları:
- Modal açılınca odak modalın içine taşınır, genellikle ilk etkileşimli öğeye ya da başlığa
- Tab tuşu modal içinde döner; arkadaki sayfaya geçmez
- Kapanınca odak modalı açan öğeye döner
- Esc tuşu modalı kapatır
- Arkadaki sayfa kaydırılmaz
Açılışta kısa ve sakin bir geçiş animasyonu yeterlidir. Uzun animasyonlar kullanıcıyı bekletir. Hareket azaltma tercihi olan kullanıcılar için animasyonların sadeleşmesi de gözetilmelidir.
Bir modal birden fazla seçenek sunuyorsa, varsayılan odağı en güvenli seçenekte başlatmak (özellikle yıkıcı onaylarda) yanlışlıkla Enter tuşuna basılmasının zararını azaltır.
Her modal türü farklı bir kapanış davranışı ister
| Bilgi modalı | Form modalı | Yıkıcı onay | |
|---|---|---|---|
| Amaç | Önemli bir bilgiyi göstermek | Kısa bir veri girişi | Geri alınamaz eylemi doğrulamak |
| Dış alana tıklama | Kapatabilir | Veri kaybı riski varsa kapatmamalı | Genellikle kapatmamalı |
| Birincil eylem | Anladım / Kapat | Kaydet | Eylemin adı (ör. Hesabı sil) |
| İkincil eylem | Yok ya da bağlantı | Vazgeç | Vazgeç, kolay erişilir |
Mobil uyarlama
Küçük ekranda ortada duran bir modal çoğu zaman sıkışık ve ulaşması zor olur. Mobilde yaygın yaklaşımlar vardır: ekranın altından açılan alt sayfa ya da tam ekran görünüm. Alt sayfa, parmağın doğal erişim alanında olduğu için hızlı seçimlerde iyi çalışır. Tam ekran görünüm ise form gibi daha uzun görevler için uygundur ve üstte net bir kapat ya da geri düğmesiyle sunulmalıdır.
Dokunma alanlarının yeterince geniş olması, kapat düğmesinin kolay basılabilmesi ve klavye açıldığında içeriğin klavyenin altında kalmaması mobilde dikkat edilecek ayrıntılardır. Alt sayfada kullanıcı aşağı kaydırarak kapatabiliyorsa bunu görsel bir tutamaçla belli edin. Aynı bileşeni masaüstünde ortalanmış modal, mobilde alt sayfa olarak göstermek tasarım sisteminde sık kullanılan bir yaklaşımdır.
Mobil akışta modal sonrası geri dönüş yolu da önemlidir: kullanıcı kapattığında kaldığı yere dönmeli, sayfa en başa atmamalıdır. Gerçek cihazlarda ve farklı ekran boyutlarında test etmek, tasarım aracındaki önizlemenin gösteremediği sorunları ortaya çıkarır.
Erişilebilirlik
Modal, erişilebilirlik hatalarının en sık yaşandığı bileşenlerden biridir. Ekran okuyucu kullanan kişi modal açıldığında bunu duymalı, başlığının ne olduğunu bilmeli ve arkadaki içeriğe yanlışlıkla gitmemelidir. Bunun için modal, teknik olarak diyalog rolüyle işaretlenir ve başlığıyla ilişkilendirilir; arka plan etkileşime kapatılır.
Tasarımcının sorumluluğu bu davranışları tasarım notlarına yazmak ve geliştiriciyle konuşmaktır:
- Odak nereye taşınır, kapanınca nereye döner?
- Kapat düğmesinin erişilebilir adı nedir?
- Hata mesajları ekran okuyucuya nasıl duyurulur?
- Metin ve düğmeler yeterli kontrastta mı?
Bu soruları baştan sormak, sonradan düzeltmekten çok daha ucuzdur. Erişilebilirlik ilkelerinin genel çerçevesi için erişilebilir tasarım rehberine bakabilirsiniz.
Sık yapılan hatalar
Modal tasarımında tekrar eden hatalar:
- Kullanıcı bir şey yapmadan sayfa yüklenir yüklenmez modal açmak
- Modalın içinde başka bir modal açmak; kullanıcı nerede olduğunu kaybeder
- Kapat düğmesini küçük, silik ya da gizli yapmak
- Uzun formu ya da kaydırmalı içeriği modala sıkıştırmak
- Geri alınabilir basit işlemler için bile onay modalı çıkarıp kullanıcıyı yormak
- Etiketleri "Evet / Hayır" bırakıp sonucu belirsiz kılmak
- Açılan modalda odağı yönetmemek ve klavye kullanıcısını arkada bırakmak
Son olarak, pazarlama amaçlı açılan modallara dikkat edin: kullanıcı içeriği okurken bölmek güveni zedeler. Böyle bir gösterim gerekiyorsa tetikleyiciyi kullanıcı davranışına bağlayın ve kapatmayı kolaylaştırın.
Aynı modal, daha az rahatsız eden hale getirilebilir
Bu beceriyi Mindset programlarında nerede çalışırsınız
UX/UI Bootcamp, UI tasarım temelleri, kullanılabilirlik ve erişilebilirlik ile geliştirici iş birliği konularını içerir; modal gibi bileşenlerin davranışını tasarlayıp geliştiriciye aktarmak bu başlıkların kesişimindedir. UX / UI Uzmanlığı Sertifika Programı ise etkileşim tasarımı, Figma ile tasarım sistemi ve prototip ile kullanılabilirlik testi başlıklarını kapsar.
İlgili Mindset programı
UX/UI Bootcamp
Sık sorulan sorular
Modal ile popover arasındaki fark nedir?
Modal, arka sayfayı etkileşime kapatır ve kullanıcının dikkatini zorla ister. Popover ise bir öğenin yanında açılan hafif bir kutudur; dışarı tıklayınca kapanır ve akışı kesmez. Küçük, ek bilgi ya da seçenekler için popover; zorunlu karar için modal tercih edilir.
Modalda dış alana tıklayınca kapanmalı mı?
Kritik olmayan bilgi modallarında evet, kullanıcıya kolay çıkış sağlar. Form ya da yıkıcı onay modallarında yanlışlıkla veri kaybına ya da istenmeyen karara yol açabileceği için genellikle kapanmamalıdır. Her durumda kapat düğmesi ve Esc tuşu çalışmalıdır. Her durumda kapat düğmesi ve Esc çalışmalı.
Modal içinde form olabilir mi?
Kısa ve tek adımlı formlar için olabilir. Uzun, çok adımlı ya da kaydırma gerektiren formlar modala sığmaz; bunlar ayrı sayfa ya da çekmecede daha rahat çalışır. Modal formda kaydedilmemiş veri varsa kapatmadan önce uyarı vermek de iyi bir uygulamadır.
Modalı test etmek için neye bakmalıyım?
Klavye ile açıp kapatmayı, odağın doğru yere gidip dönmesini, ekran okuyucuda duyurulmasını, mobilde kapat düğmesine erişimi ve uzun içerikte kaydırmayı deneyin. Kullanılabilirlik testinde kullanıcıların modalı rahatça kapatıp kapatamadığını gözleyin. Küçük bir test bile birçok sorunu açığa çıkarır.
Modal kullanmadan nasıl onay alınır?
Geri alınabilen işlemlerde onay yerine geri al seçeneği sunmak çoğu zaman daha iyidir: işlem yapılır, kısa bir bildirimle "Geri al" gösterilir. Bu yaklaşım kullanıcıyı durdurmaz. Gerçekten geri dönüşü olmayan eylemlerde ise onay modalı yerindedir.