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. 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. Modallar, diyaloglar, katmanlar ve ışık kutuları — hepsi kulağa benzer geliyor ama aslında oldukça farklılar:
Dialog“Konuşma” için genel bir terim (kullanıcı ↔ sistem). OverlaySayfanın üstünde görüntülenen küçük bir içerik paneli. ModalUser, yer paylaşımı + arka plan devre dışı bırakılarak etkileşime girmelidir. NonmodalUser, yer paylaşımı + arka plan etkin durumdayken etkileşime girmelidir. Işık KutusuModa dikkati odaklamak için karartılmış arka plan.
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.
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.
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: 🚫 Modal'lar çoğu zaman 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.✅ Ancak 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öndermek işleri aksatacaksa faydalıdır. ✅ Yalnızca kullanıcılar kesintiye değer veriyorsa bir mod gösterin.✅ Varsayılan olarak, engellemeyen iletişim kutularını ("modal olmayanlar") tercih edin.✅ Kullanıcıların daha sonra iletişim kutusunu simge durumuna küçültmesine, gizlemesine veya geri yüklemesine izin verin.✅ Kullanıcıları yavaşlatmak için bir mod kullanın, örneğin karmaşık girişi doğrulayın.✅ "Kapat", ESC tuşuyla bir çı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 çok 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ıdır: 🚫 Hata mesajları için kiplerden kaçının.🚫 Özellik bildirimleri için kiplerden kaçının.🚫 İlk katılım deneyimi için kiplerden kaçının.🚫 Karmaşık, uzun, çok adımlı görevler için kiplerden kaçının.🚫 Birden fazla iç içe geçmiş kiplerden kaçının ve bunun yerine önceki/sonraki kullanın.🚫 Kesinlikle gerekmedikçe otomatik olarak tetiklenen kiplerden kaçının. Her İkisinden de KaçınınTekrarlanan Görevler İçin 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:
Göz korkutucu görünebilir, ancak oldukça basit 4 adımlı bir işlemdir:
Ekranın bağlamı. İ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 bir model gerekebilir, ancak uzun, karmaşık akışların bir sayfaya ihtiyacı vardır. Temel sayfaya referans. Ardından, kullanıcıların sıklıkla arka plandaki verilere başvurması gerekip gerekmediğini veya görevin basit bir onay veya seçim olup olmadığını kontrol ederiz. Doğru bindirmeyi seçmek. Son olarak, eğer bir bindirme gerçekten iyi bir seçenekse, modal veya kipli olmayan (modal olmayana doğru eğilerek) arasında seçim yapmamıza 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 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. Her yıl eklenen 5 yeni segmentle, devasa açılır menülerden karmaşık kurumsal tablolara kadar her şey. Ü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.
Video + UX EğitimiYalnızca videoVideo + UX Eğitimi$ 495,00 $ 699,00
Video + UX Eğitimi Alın25 video dersi (15 saat) + Canlı UX Eğitimi.100 gün para iade garantisi.Yalnızca video$ 300,00$ 395,00
Video kursunu edinin40 video dersi (15 saat). Her yıl güncellenir. Ayrıca 2 video kursu içeren UX Paketi olarak da mevcuttur.
Yararlı Kaynaklar
Anna Kaley'den Farklı Pop-up Türleri Uxcel'den Kullanıcı Arayüzü Modellerini Tasarlamaya Yönelik En İyi Uygulamalar Çok Fazla Lanet Model Kullanıyoruz: Kullanıcı Deneyimi Yönergeleri, Yazan: Adrian Egger Modal ve Modal Olmayan Diyaloglar, Therese Fessenden Modern Kurumsal Kullanıcı Arayüzü Tasarımı: Modal Diyaloglar, James Jacobs Tasarım Sistemlerinde Modallar
