Modal ve Ayrı Sayfa: UX Karar Ağacı

Muhtemelen daha önce orada bulunmuşsunuzdur. arasında nasıl seçim yapabiliriz?bir model gösteriliyorkullanıcılara ne zaman ulaşacağız ve onları ne zaman ayrı, yeni bir sayfaya yönlendireceğiz? Peki bunun hiç önemi var mı?

Aslında öyle. Karar, kullanıcıların akışını, bağlamlarını, ayrıntılara bakma yeteneklerini ve bununla birliktehata sıklığı ve görev tamamlama. Her iki seçenek de, yanlış zamanda ve yanlış yerde, yıkıcı ve sinir bozucu olabilir.

Bu yüzden bunu doğru yapsak iyi olur. Peki, bunu nasıl yapacağımızı görelim.

Modal'lar, Diyaloglar, Kaplamalar ve Işık Kutuları

Sıklıkla tek bir modal kullanıcı arayüzü bileşeninden bahsederken, tüm farklı mod türleri arasındaki ince, karmaşık nüansları genellikle göz ardı ederiz. Aslında,her modal aynı değildir. Modal'lar, diyaloglar, katmanlar ve ışık kutuları — hepsi kulağa benzer geliyor ama aslında oldukça farklılar:

• Diyalog
  “Konuşma” için genel bir terim (kullanıcı ↔ sistem).
• Kaplama
  Bir sayfanın üstünde görüntülenen küçük bir içerik paneli.
• Modal
  Kullanıcı yer paylaşımı + arka plan ile etkileşime girmelidirengelli.
• kipli değil
  Kullanıcı yer paylaşımı + arka plan ile etkileşime girmelidiretkinleştirilmiş.
• Işık Kutusu
  Dikkatin modal üzerinde yoğunlaşması için arka plan soluklaştırıldı.

Anna Kaley olaraköne çıkanlarçoğu katman yanlış zamanda görünüyor, kritik görevler sırasında kullanıcıların sözünü kesiyor, zayıf bir dil kullanıyor ve kullanıcıların akışını bozuyor. Bunlardoğası gereği kesintiye uğrayanve genellikle buna güçlü bir ihtiyaç olmaksızın yüksek düzeyde bir ciddiyetle.

Kesinlikle kullanıcılarmutlakeylemlerinin sonuçlarının etkisi büyükse yavaşlatılmalı ve kesintiye uğratılmalıdır, ancak çoğu senaryo içinmodal olmayanlar çok daha inceliklidirve kullanıcının dikkatini bir şeye çekmek için daha kullanıcı dostu bir seçenek. Eğer bir şey varsa, her zaman bunun bir olmasını öneririmvarsayılan.

Modallar → Tek, Bağımsız Görevler İçin

Tasarımcılar olarak modalleri çoğu zaman alakasız ve sinir bozucu olarak değerlendiriyoruz.ve çoğu zaman öyledirler!- yine de onların da değerleri var. Çok yardımcı olabilirlerKullanıcıları olası hatalara karşı uyarmakveya veri kaybını önlemelerine yardımcı olun. Ayrıca sayfanın mevcut durumunu kesintiye uğratmadan ilgili eylemlerin gerçekleştirilmesine veya ayrıntılara inilmesine yardımcı olabilirler.

Ancak modalların en büyük avantajı kullanıcılara yardımcı olmalarıdır.bağlamı korugeçerli ekranın. Bu sadece kullanıcı arayüzü anlamına gelmez, aynı zamanda düzenlenmiş giriş, kaydırma konumu, akordeon durumu, filtre seçimi, sıralama vb. anlamına da gelir.

Bazen kullanıcıların şunları yapması gerekir:bir seçimi hızlı bir şekilde onaylamak(örneğin, yukarıda gösterildiği gibi filtreler) ve ardından hemen oradan devam edin. Otomatik kaydetme elbette aynısını sağlayabilir, ancak buna her zaman ihtiyaç duyulmaz veya istenmez. Kullanıcı arayüzünü engellemek çoğu zaman iyi bir fikir değildir.

Ancak modlar herhangi bir görev için kullanılmaz. Genellikle bunları şunun için kullanırız:tek, bağımsız görevlerkullanıcıların devreye girmesi, bir görevi tamamlaması ve ardından bulundukları yere geri dönmeleri gereken yer. Şaşırtıcı olmayan bir şekilde, yüksek öncelikli, kısa etkileşimler (örneğin, uyarılar, yıkıcı eylemler, hızlı onaylamalar) için iyi çalışıyorlar.

Modal'lar yardımcı olduğunda:

🚫Kipler genellikle yıkıcı, istilacı ve kafa karıştırıcıdır.
🚫 Karşılaştırmayı ve kopyala-yapıştır yapmayı zorlaştırırlar.
✅ Yine de modal'lar kullanıcıların birden fazla bağlamı korumalarına olanak tanır.
✅ Geri dönüşü olmayan hataları ve veri kaybını önlemek için faydalıdır.
✅ Kullanıcıları yeni bir sayfaya göndermenin rahatsız edici olacağı durumlarda kullanışlıdır.

✅ Yalnızca kullanıcılar kesintiye değer veriyorsa bir model gösterin.
✅ Varsayılan olarak, engellenmeyen diyalogları ("modal olmayan") tercih edin.
✅ Kullanıcıların iletişim kutusunu daha sonra simge durumuna küçültmesine, gizlemesine veya geri yüklemesine izin verin.
✅ Kullanıcıları yavaşlatmak için bir mod kullanın (ör. karmaşık girişi doğrulamak).
✅ “Kapat”, ESC tuşu ile çıkış yolu verin veya kutunun dışına tıklayın.

Sayfalar → Karmaşık, Çok Adımlı İş Akışları İçin

Sihirbazlar veyamodlar içinde sekmeli gezinmekarmaşık kurumsal ürünlerde bile pek iyi çalışmıyor; burada yan paneller veya çekmeceler genellikle daha iyi çalışıyor. Kullanıcılar veri noktalarını karşılaştırmaya veya referans vermeye ihtiyaç duyduğunda sorunlar başlar; ancak modeller bu davranışı engeller, dolayısıyla aynı sayfayı birden fazla sekmede yeniden açarlar.

Daha karmaşık akışlar ve çok adımlı süreçler için,bağımsız sayfalar en iyi sonucu verir. Sayfalar ayrıca kullanıcının tüm dikkatini gerektirdiğinde daha iyi çalışır ve önceki ekrana referans vermek pek yararlı olmaz. Çekmeceler, basit bir model için fazla karmaşık olan ancak tam sayfa gezinmeye ihtiyaç duymayan alt görevler için çalışır.

Modallardan ne zaman kaçınılmalı:

🚫 Modallardan kaçınınhata mesajları.
🚫 Modallardan kaçınınözellik bildirimleri.
🚫 Modallardan kaçınınişe alım deneyimi.
🚫 Karmaşık modallardan kaçının,uzun, çok adımlı görevler.
🚫 Kaçınınbirden fazla iç içe geçmiş modelve bunun yerine önceki/sonraki'yi kullanın.
🚫 Kaçınınotomatik tetiklenen modlarkesinlikle gerekli olmadıkça.

Tekrarlanan Görevler İçin Her İkisinden de Kaçının

Birçok karmaşık, görev ağırlıklı üründe kullanıcılar kendilerini aynı görevleri tekrar tekrar gerçekleştirirken bulacaklardır. Orada,hem modeller hem de yeni sayfa gezinmeleri sürtünmeyi artırıyorçünkü akışı keserler veya kullanıcıları tüm farklı sekmeler veya görünümler arasında eksik verileri toplamaya zorlarlar.

Çoğu zaman kullanıcılar, hiç bitmeyen onaylarla, abartılı uyarılarla, ayrıntılı talimatlarla veya yalnızca eksik referans noktalarıyla dolu, bozuk bir deneyimle karşı karşıya kalır. GibiSaulius Stebulis'ten bahsedildibu senaryolarda,genişletilebilir bölümlerveyayerinde düzenlemegenellikle daha iyi çalışır; görevi mevcut ekrana bağlı tutarlar.

Uygulamada birçok senaryoda kullanıcılar görevlerini tek başına tamamlamazlar. Görevleri üzerinde çalışırken verilere bakmaları, değerleri kopyalayıp yapıştırmaları, farklı yerlerdeki girişleri hassaslaştırmaları veya yalnızca benzer kayıtları incelemeleri gerekir.

Kaplamalar ve çekmeceler, görev sırasında arka plan verilerine erişimin sürdürülmesinde daha faydalıdır. Sonuç olarak, içerik her zaman yerinde kalır, referans veya kopyala-yapıştır için kullanılabilir. Özellikle kritik hataları önlemek için, kesintinin gerçekten değer kattığı anlar için modları ve sayfa gezintisini kaydedin.

Modallar ve Sayfalar: Bir Karar Ağacı

Bir süre önce Ryan Neufeld bir araya getirdiçok yararlı rehbertasarımcılara yardım etmekmodeller ve sayfalar arasında seçim yapın. Kullanışlı bir cihazla birlikte gelirPNG kopya kağıdıve birGoogle Dokümanı şablonu7 bölüme ayrılmış sorularla.

Uzun, son derece ayrıntılı ama takip etmesi çok kolay:

Göz korkutucu görünebilir, ancak oldukça basit4 adımlı süreç:

1. Ekranın bağlamı.
   İlk olarak, kullanıcıların temel ekranın bağlamını koruması gerekip gerekmediğini kontrol ederiz.
2. Görev karmaşıklığı ve süresi.
   Daha basit, odaklanmış, dikkat dağıtıcı olmayan görevler için modal gerekebilir ancak uzun, karmaşık akışların bir sayfaya ihtiyacı vardır.
3. Temel sayfaya referans.
   Ardından, kullanıcıların arka plandaki verilere sıklıkla başvurması gerekip gerekmediğini veya görevin basit bir onay veya seçim olup olmadığını kontrol ederiz.
4. Doğru kaplamayı seçme.
   Son olarak, eğer bir kaplama gerçekten iyi bir seçenekse, bize kipsel ya da kipli olmayan (bir kipli olmayana doğru eğilerek) seçim yapma konusunda rehberlik eder.

Kapanış

Mümkün olduğunda kullanıcı arayüzünün tamamını engellemekten kaçının. Kullanıcı arayüzünü kısmen kaplayan ancak gezinmeye, kaydırmaya ve kopyalayıp yapıştırmaya izin veren bir iletişim kutusu oluşturun. Veya modalın içeriğini bir yan çekmece olarak gösterin. Veya bunun yerine dikey bir akordeon kullanın. Veya çok fazla ayrıntı göstermeniz gerekiyorsa kullanıcıları ayrı bir sayfaya getirin.

Ancak kullanıcıların verimliliğini ve hızını artırmak istiyorsanız,ne pahasına olursa olsun modallardan kaçının. Kullanıcıları yavaşlatmak, dikkatlerini toplamak ve hataları önlemek için bunları kullanın. GibiTherese Fessenden kaydetti, kimse rahatsız edilmekten hoşlanmaz, ancak eğer mecbursanız, bunun kesinlikle maliyete değdiğinden emin olun.

“Akıllı Arayüz Tasarımı Desenleri” ile tanışın

Bir tane bulabilirsinmodlarla ilgili tüm bölümve alternatiflerAkıllı Arayüz Tasarımı Desenleri, bizim15 saatlik video kursugerçek hayattaki projelerden 100'lerce pratik örnekle ve bu yılın ilerleyen dönemlerinde canlı bir UX eğitimiyle. Her yıl eklenen 5 yeni segmentle, devasa açılır menülerden karmaşık kurumsal tablolara kadar her şey.Ücretsiz önizlemeye geçin. Kodu kullankuş ile %15 tasarruf edinkapalı.

TanışmakAkıllı Arayüz Tasarımı Desenleri, arayüz tasarımı ve kullanıcı deneyimi konulu video kursumuz.Yararlı Kaynaklar

• Farklı Pop-up Türleri, Anna Kaley tarafından
• Kullanıcı Arayüzü Modellerini Tasarlamak için En İyi Uygulamalar, Uxcel tarafından
• Çok Fazla Lanet Model Kullanıyoruz: UX Yönergeleri, Adrian Egger tarafından
• Modal ve Modal Olmayan Diyaloglar, Therese Fessenden tarafından
• Modern Kurumsal Kullanıcı Arayüzü Tasarımı: Modal Diyaloglar, James Jacobs tarafından
• Tasarım Sistemlerinde Modallar