Modal pencereler başlangıçta kullanıcı arayüzlerinde görüntülenen önemli veya temel olaylara yönelik uyarılar olarak oluşturuldu. Tasarım dünyası daha da ilerledikçe, işletmeler kitlelerini genişletmek için ihtiyaç duydukları verileri toplayabilecekleri birçok yolu keşfetti. Bu uygulamalardan biri de daha sonra tasarımcıların, paydaşların ve pazarlamacıların isteklerine göre ve ne yazık ki iyi bir kullanıcı deneyimi pahasına kötüye kullanılan ve yanlış kullanılan bu kullanışlı açılır kutulardı (birçoğu ana sayfadaki içeriği tamamen engeller).
İşte nasıl yapılacağı.
Kimse kesintiye uğramaktan hoşlanmaz, ancak bazen bu kesinti rahatsızlığı hak eder.
Modal ekranlarınız gerekli mi yoksa gereksiz kesintiler mi?
Örneğin, önemli bir konuşma yapıyorsanız ve birisi sözünüzü keserek arabanıza birinin girdiğini veya evinizde yangın çıktığını söylerse, ona bol bol teşekkür eder ve acil durumu çözmek için harekete geçersiniz.
Ancak, aynı önemli konuşmayı birisi hava durumunu ya da en sevdiğiniz rengi sormak için bölseydi, muhtemelen bu gereksiz müdahaleden oldukça rahatsız olurdunuz.
Aynı şey modal iletişim kutuları (veya diyaloglar). Doğru kullanıldıklarında hayat kurtarıcıdırlar (en azından kullanıcı için faydalıdırlar); kötüye kullanıldıklarında ise can sıkıcıdırlar, iş akışını engellerler ve kullanıcı deneyimine zarar verirler.
Bugünkü makalemizde, modal pencerenin ne olduğunu ve ideal UX en iyi uygulamalarını sürdürmek için kullanımlarının kullanıcılarınıza ve ziyaretçilerinize saygı göstermesinin neden önemli olduğunu açıklayacağız.
Modalite ve UX
Modalite söz konusu olduğunda, UX tasarımcıları her zaman kullanıcının iş akışına özel bir saygı göstermeli ve bunu yalnızca gerekli bilgilerle kesintiye uğratmalıdır.
Olarak Nielsen Norman Group devletler:
Modal diyaloglar kullanıcıların sözünü keser ve bir eylem talep eder. Kullanıcının dikkatinin önemli bilgilere yönlendirilmesi gerektiğinde uygundurlar.
"Önemli bilgiyi" neyin belirlediği en iyi ihtimalle tartışmalı olabilir. Elbette, en iyi kullanıcı deneyimi için bu karar kullanıcının elinde olmalıdır. Temel konsepte saygı duymuyorsanız veya neyin önemli olduğundan emin değilseniz gerekli kullanıcılarınız için ne anlama geliyorsa, basit testler uygun modal pencere kullanımını yönlendirmek için gerekli verileri sağlayabilir.
Modalite nedir?
Ana ekranın içinde veya üstünde, sayfanın tüm işlevsel öğelerini devre dışı bırakan bir modal pencere görünür. Bu modal iletişim kutusu Kullanıcıları belirli bir olaya karşı uyarmak için tasarlanmıştır ve içerik veya yazılımla eskisi gibi etkileşime devam etmeden önce pencereyi kapatmak için kullanıcı etkileşimi gerektirir.
Modalite İş Başında
Bunun ne kadar önemli olduğunu görmek oldukça kolaydır. iletişim kutusunu kaydet modal penceredir. Bu modal iletişim kutusu göründüğünde, kapatmadan önce bir belgede yapılan değişiklikleri kaydetmek isteyip istemediğinizi sorar. Hepimiz belgelerin kaydedilmemesi nedeniyle iş kaybına uğramışızdır, bu nedenle bu seçenek önemli belgeler oluşturan herkes için hoş bir yardım eli haline gelir. Devam etmeden önce kaydetme, iptal etme veya kaydetmeme seçenekleriyle, karar işlemleri durdurabilir, ancak buna değer. İşini kaybetmenin hayal kırıklığını yaşayan herkes, çalışmalarının sistem tarafından başlatılan bu modal pencere tarafından korunmasından oldukça mutlu olacaktır.
Ölçeğin diğer ucunda, yeni bir web sayfasını ziyaret ettikten birkaç saniye sonra ortaya çıkan ve sizden e-posta listesine katılmanızı ya da okumak istediğiniz içeriğe ulaşamadan sizi bildirimlerle rahatsız etmelerine izin vermenizi isteyen bir açılır pencere, kullanıcı için o kadar gerekli ya da önemli değildir. Bu hafif bir rahatsızlıktır, ancak yine de UX tasarımında kullanıcının iş akışını kesintiye uğratmayı hak etmeyen bir rahatsızlıktır.
Yeni kişiler toplamak için ek bir seçenek olarak, pazarlamacıların bu eylemi neden sevdiğini anlayabilirsiniz, ancak kullanıcı deneyimi söz konusu olduğunda, böyle bir bileşenin doğru kullanımı hakkında güçlü argümanlar ve özelliğin nasıl kötüye kullanıldığına dair tartışmalar var.
Modalite Türleri
Modal Diyaloglar
Aşağıdaki örnekler, modal pencerelerin günümüz dijital ortamlarında nasıl kullanıldığını göstermektedir:
- Tüm ekranı dolduran açılır pencereler ve ışık kutuları
- Uyarılar ve bildirimler (hayat kurtaran kaydet iletişim kutusu ve kullanıcı hatasını önleyen diğer modal ekranlar dahil)
- Yazılım içi ve tarayıcı içi uyarılar ve talimatlar
- Karmaşık eylem seçenekleri ve iş akışları
- Hesap girişleri ve ödeme yöntemleri gibi gerekli giriş bilgilerini toplamak veya cep telefonu kameralarına, fotoğraf albümlerine vb. erişim izni vermek.
- Bazı araç ipuçları
- Bir formun başarıyla gönderilmesi gibi bir eylemin onaylanması
- Bir uygulama veya web sitesi açılırken işe alım sihirbazları veya yeni özellik uyarıları
- Bülten, hesap ve indirim/teklif kayıtları gibi pazarlama talepleri
Modelsiz Diyaloglar
UX araştırmacıları olarak, kullanıcı katılımını teşvik etmek istiyoruz, ancak akışı veya kullanıcıların ürünlerimizden aldıkları keyfi etkilemeden.
Modal pencerelerin alternatifleri, bu kadar müdahaleci olmadan ve ana sayfadaki içeriği engellemeden aynı işi yapabilen seçeneklerdir. Olarak bilinir modelsiz iletişim pencereleri veya modal olmayan pencerelerBu seçenekler tüm ekranı ve kullanıcı arayüzünü kaplamaz ve genellikle aynı sayfada görünür. Kullanıcıyı yaptığı işe devam etmekte özgür bırakırken, ek talepleri görmezden gelir veya daha sonraya bırakırlar.
Açık mobil cihazlarAlanın sınırlı olduğu yerlerde, modal ekran ve modal olmayan pencereler çok benzer görünebilir, çünkü her ikisi de mesajlarını görüntülemek için muhtemelen ekranı kaplayacaktır. Bununla birlikte, temel fark, modal olmayan pencerelerde görünür kalan gezinme çubuğu ve başlıkta yatmaktadır. Modal ekranlarda, istenen veya gerekli girdiyi sağlayarak iptal etme veya ilerleme seçenekleriyle birlikte kendi üstbilgileri veya altbilgileri vardır; modal olmayan pencere alternatiflerinde, gezinme çubuğu olduğu gibi kalır ve daha önce olduğu gibi aynı seçeneklerin çoğuna izin verir.
Modal olmayan bir pencere, modal bir ekrana kıyasla nasıl görünür? İşte muhtemelen günlük olarak gördüğünüz ve kullandığınız birkaç örnek:
- Sohbet kutuları ve arama işlevleri gibi sayfa içi iletişim kutuları
- Hatalı form alanı girişleri gibi satır içi uyarılar
- Dış bağlantı düğmesini kullanarak bilgileri ayrı bir sayfaya yerleştirme
- Satır içi girdiler, anketler ve yorum kutuları
- Satır içi slayt gösterileri ve video oynatıcılar
- Sayfanın üstünde veya altında bir açılır çubukta çerez bildirimleri
- Görünür sayfa içi içerik sağlama
- Sekme menüleri
- Akordeonlar
- E-posta mesajı açılır penceresi oluşturma
- Arama kutuları
- Açılır kenar çubuğu diyalogları
Modal Pencereleri Kullanmanın Faydaları
- Kullanıcı odağı ? Modal pencereler, kullanıcıyı içerik veya işlemle ilgili kritik olaylara karşı uyararak sayfa tasarımcısının en önemli olduğuna inandığı şeye odaklanmasını sağlar.
- Görev tamamlama ? Tasarımcı, iş akışının veya dijital yolculuğun devam edemeyeceği bir hesap girişi gibi bir işlemi tamamlamak için bilgi isteyen modal bir pencere içerir.
- Hata önleme ? Yine, önemli bir karar vermek için kullanıcının dikkatini talep ederek kritik hataları önleyen önemli bir modal ekran.
- Karmaşık iş akışlarını yönetilebilir adımlara bölen modal sahneler ? Örneğin, masaüstü yayıncılıkta, modal pencereler kullanıcıya biçimlendirme, filtreler veya diğer ayarları uygulamak için bir dizi seçenek sunar.
Zorluklar ve Dezavantajlar
- Kullanıcı hayal kırıklığı ? Gereksiz açılır pencereler kullanıcının akışını kesintiye uğratır, genellikle konsantrasyonlarını veya belgedeki yerlerini kaybetmelerine neden olur veya yaptıkları şeyden tamamen uzaklaşmalarına neden olur.
- Gereksiz kesintiler ? Kullanıcının mevcut işlemine alakasız bir görev eklemek rahatsız edici ve dikkat dağıtıcıdır.
- İçeriğe erişimi engellerler ? Üst sayfanın devre dışı bırakılması, kullanıcının modal pencerede ayarlanan isteği tamamlamak için gerekli bilgilere erişmesini engelleyebilir.
- Erişilebilirlik endişeleri ? Erişilebilirlik, modal pencerelerde önemli bir endişe alanıdır. Herkes, kişisel durumu ne olursa olsun, kesintide gezinebilir, onunla etkileşime geçebilir veya onu reddedebilir mi?
Modalitelerin Uygulanması için En İyi Uygulamalar
En iyi uygulamaların sağduyulu olması gerektiğini önermek isterdik; ancak paydaşların ve hedefe aç pazarlamacıların en son promosyonları veya veri toplama çalışmalarıyla kullanıcıların dikkatini çekmeyi ne kadar çok sevdiklerini takdir ediyoruz.
Modal ekranların sağlıklı UX değerleri ile çalışmasını sağlamak:
- Net ve önemli bir amacınız olsun ? Tam ekran modal görünümlerin yarattığı dikkat dağınıklığı göz önüne alındığında, kullanıcılarınızın konsantrasyonunu veya ana ekranla temasını gereksiz yere bozmadığınızdan emin olun.
- Kullanıcı kontrolü ? Modal bir görünüm kullanmanız gerekiyorsa, kullanıcıların bunu kolayca kapatabileceğinden emin olun. Kullanıcılara içeriği nasıl tüketecekleri ve bilgi sağlayacakları konusunda kontrol vermek, UX tasarımınızda yüksek bir öncelik olmalıdır.
- Erişilebilirlik özellikleri ? Her bir modal görevin klavye kullanıcıları ve ekran okuyucular için gerekli etiketleme, erişim ve işlemleri sağladığından emin olun. Kullanıcının son aktif durumunu kaydetmek de çok önemlidir, böylece bu tür modallar halledildikten sonra kaldıkları yerden devam edebilirler.
- Test ve geri bildirim ? Kullanıcı testlerinde yinelemenin ve düzenli UX araştırması yoluyla geri bildirim toplamanın önemi göz önüne alındığında, bunun ne kadar önemli olduğunu söylememize gerek yok. Kullanıcılarımız tüm kullanıcı yolculuklarının merkezinde yer almalıdır.
Sonuç
Doğru kullanıldığında, modal pencereler inanılmaz derecede olumlu ve etkili olabilir. Yazılım paketleri, SaaS, web siteleri ve uygulamalarda hayati bir rol oynarlar. Ancak, daha önce de belirttiğimiz gibi, kullanıcılarımıza ve web sitesi ziyaretçilerimize saygı gösterilmeden kullanıldığında, modal pencerelerin aşırı kullanımı ciddi kullanıcı deneyimi dezavantajlarına yol açabilir.
Olumlu bir kullanıcı arayüzü tasarım deneyimi sağlamak için, kullanıcı modal iletişim kutusuyla açıkça etkileşime girene kadar içerik erişimini sınırlayacak kadar neyin önemli olduğunu anlamamız gerekir. Bir modal pencerenin gerçekten gerekli olup olmadığını değerlendirmek için çeşitli karar çerçevelerine başvurabilirken, belki de tüm iyi UX araştırmalarında olduğu gibi kullanıcının ne istediğini sunmanın en iyi yolu onlara sormaktır.
Kullanıcı araştırması uzmanlarımız, müşterilerinize daha yakın olmanıza yardımcı olmak için hazırdır. Yükümlülük içermeyen bir görüşme ayarlamak isterseniz, bize e-posta göndererek iletişime geçin hello@ux247.com veya aşağıdaki formu kullanarak ihtiyacınızı paylaşın.
