Modal ve Ayrı Sayfa: UX Karar Ağacı
Twitter'da paylaş, LinkedIn
Modal'lar ve sayfalar arasında nasıl seçim yapılacağı, modal'lardan ne zaman kaçınılacağı ve doğru kesinti veya gezinme seviyesinin nasıl belirleneceği. Vitaly'nin kullanıcı deneyimi ve tasarım desenleri hakkındaki samimi video kursuyla size getirildi. Modal'lar ve sayfalar arasında nasıl seçim yapılacağı, modal'lardan ne zaman kaçınılacağı ve doğru kesinti veya gezinme seviyesinin nasıl belirleneceği. Akıllı Arayüz Tasarımı Desenleri ve Vitaly tasarım desenleri tarafından size sunulmuştur.
Muhtemelen daha önce orada bulunmuşsunuzdur. Kullanıcılara bir model gösterme arasında nasıl seçim yapacağı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 birlikte hata sıklığını ve görev tamamlamayı etkiler. Her iki seçenek de, yanlış zamanda ve yanlış yerde, yıkıcı ve sinir bozucu olabilir.
Sonuç ve Değerlendirme
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ı
Sistem Güvenliği
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. Modallar, diyaloglar, katmanlar ve ışık kutuları — hepsi kulağa benzer geliyor ama aslında oldukça farklılar:
İyi bir kullanıcı deneyimi için kalıcı ve kipli olmayan ve ışık kutusu ve ışık kutusu olmayan iletişim kutularını anlama. (Resim kaynağı: NN/g'ye göre açılır pencereler) (Büyük önizleme)
Uzmanların Görüşleri
“Konuşma” için genel bir terim (kullanıcı ↔ sistem).
Önemli Gelişmeler
“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.
Bir sayfanın üstünde görüntülenen küçük bir içerik paneli. Modal
Nasıl Önlem Alınmalı?
Kullanıcı yer paylaşımı + arka plan devre dışı bırakılarak etkileşimde bulunmalıdır.
Kullanıcı kaplama + arka plan ile etkileşime girmelidir. kipli değil
Kullanıcının yer paylaşımı + arka plan etkin durumdayken etkileşimde bulunması gerekir.
Detaylar ve Etkileri
Kullanıcı kaplama + arka plan ile etkileşime girmelidir. Işık Kutusu
Dikkatin modal üzerinde yoğunlaşması için arka plan soluklaştırıldı.
Anna Kaley'in vurguladığı gibi ç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. Doğası gereği kesintiye uğrarlar ve genellikle buna güçlü bir ihtiyaç olmaksızın yüksek düzeyde bir şiddete sahiptirler.
Teknik Analiz
Modalların ve kaplamaların birçok tarafı. Kullanıcı arayüzü bileşenlerinin farklarını anlamak için küçük bir ağaç. (Resim kaynağı: Ryan Neufeld) (Büyük önizleme)
Elbette, eylemlerinin sonuçları büyük bir etkiye sahipse kullanıcıların yavaşlatılması ve kesintiye uğraması gerekir, ancak çoğu senaryoda, kipli olmayanlar çok daha incelikli ve kullanıcının dikkatini bir şeye çekmek için daha dostane bir seçenektir. Bir şey olursa, her zaman bunun varsayılan olmasını öneririm.
Modallar → Tek, Bağımsız Görevler İçin
Tasarımcılar olarak modal'ları ilgisiz ve sinir bozucu bularak çoğu zaman göz ardı ederiz - ve çoğu zaman öyledirler! - yine de onların da değerleri var. Kullanıcıları olası hatalar konusunda uyarmak veya veri kaybını önlemelerine yardımcı olmak açısından çok yararlı olabilirler. Ayrıca sayfanın mevcut durumunu kesintiye uğratmadan ilgili eylemlerin gerçekleştirilmesine veya ayrıntılara inilmesine yardımcı olabilirler.
Ancak modların en büyük avantajı, kullanıcıların mevcut ekranın içeriğini korumalarına yardımcı olmalarıdır. 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.
Modal olmayan uygulama: Filtreler için büyük ve küçük katmanlar ve özelleştirme için bir modal, Yahoo!'da iyi çalışır. Finans. (Büyük önizleme)
Gelecekte Ne Bekleniyor?
Bazen kullanıcıların bir seçimi hızlı bir şekilde onaylaması (örneğin, yukarıda gösterildiği gibi filtreler) ve ardından hemen oradan devam etmesi gerekir. 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ı, kullanıcıların devreye girmesi, bir görevi tamamlaması ve daha sonra bulundukları yere geri dönmesi gereken tek, bağımsız görevler için kullanırız. Ş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 model kullanın (ör. karmaşık doğrulama) giriş.
✅ “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 veya modlar içindeki sekmeli gezinme, karmaşık kurumsal ürünlerde bile çok 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 ise 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ıdır:
🚫 Hata mesajları için modlardan kaçının.
🚫 Özellik bildirimleri için modlardan kaçının.
🚫 İlk katılım deneyimi için modellerden kaçının.
🚫 Karmaşık, uzun, çok adımlı görevler için modellerden kaçının.
🚫 Birden fazla iç içe geçmiş modal'lardan kaçının ve bunun yerine prev/next'i kullanın.
🚫 Kesinlikle gerekmedikçe otomatik tetiklenen modlardan kaçının.
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. Burada, hem modeller hem de yeni sayfa gezinmeleri, akışı kesintiye uğrattıkları veya kullanıcıları tüm farklı sekmeler veya görünümler arasında eksik verileri toplamaya zorladıkları için sürtüşmeye neden oluyor.
Ç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. Saulius Stebulis'in de belirttiği gibi, bu senaryolarda genişletilebilir bölümler veya yerinde düzenleme genellikle daha iyi sonuç verir; görevi geçerli ekrana bağlı tutar.
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.
Modal'lar ve Sayfalar: Bir Karar Ağacı
Bir süre önce Ryan Neufeld, tasarımcıların modeller ve sayfalar arasında seçim yapmasına yardımcı olacak çok yararlı bir kılavuz hazırladı. Kullanışlı bir PNG kopya sayfası ve 7 bölüme ayrılmış soruların yer aldığı bir Google Doküman şablonuyla birlikte gelir.
Uzun, son derece ayrıntılı ama takip etmesi çok kolay:
Sayfanın varsayılan olduğu ve kesinti ve odaklama için ayrılmış modların bulunduğu, sayfa ve modal arasında seçim yapabileceğiniz bir akış şeması. Harika Ryan Neufeld tarafından bir araya getirildi. (Büyük önizleme)
Göz korkutucu görünebilir, ancak oldukça basit 4 adımlı bir süreçtir:
İlk olarak, kullanıcıların temel ekranın bağlamını koruması gerekip gerekmediğini kontrol ederiz. 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. 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. 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.
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 modlardan kaçının. Kullanıcıları yavaşlatmak, dikkatlerini toplamak ve hataları önlemek için bunları kullanın. Therese Fessenden'in belirttiği gibi, 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
Modallar ve alternatifler hakkında tam bir bölümü, gerçek hayattaki projelerden 100'lerce pratik örneğin yer aldığı 15 saatlik video kursumuz Akıllı Arayüz Tasarım Modelleri'nde, bu yılın ilerleyen dönemlerinde canlı bir UX eğitimiyle bulabilirsiniz. Büyük açılır menülerden karmaşık kurumsal tablolara kadar her şey - her yıl eklenen 5 yeni segmentle. Ücretsiz önizlemeye geçin. %15 indirimden yararlanmak için BIRDIE kodunu kullanın.
Arayüz tasarımı ve kullanıcı deneyimi konulu video kursumuz Akıllı Arayüz Tasarımı Desenleri ile tanışın.
