Ekran tasarımında ihmal edilen bir konu: Değişim körlüğü

Ekran tasarımında ihmal edilen bir konu: Değişim körlüğü

Ekran tasarımında dikkat edilmesi gereken pek çok konu var. Kullanıcıların tasarımlarınızı kullanırken kendilerinden beklenen performansı gösterebilmeleri ve kullanımlarından memnuniyet duyabilmeleri açısından, tasarım esnasında ince eleyip sık dokumak şart. Bugün bahsedeceğim konu, maalesef sıklıkla ihmal edilen, dikkate alınmayan veya pek fazla bilgi sahibi olunmayan konulardan birisi: Değişim körlüğü (Change blindness).

İnsanın görme duyusunun diğer tüm duyulardan daha baskın bir özelliğe sahip olduğunu biliyoruz. İnsan beyninin neredeyse yarısının sahip olduğu kaynaklar görme eylemine ve gördüklerini yorumlamaya ayrılıyor. Ancak gözümüzün fiziksel olarak algıladığı görseller hikayenin sadece bir parçasını oluşturuyor. Beynimize gelen her türlü görsellere yönelik sinyaller beynimiz tarafından değiştiriliyor ve yorumlanıyor. Bu açıdan bakıldığında da aslında gören gözümüz değil, bir anlamda beynimiz.

Şöyle ki, etrafınıza bakınarak yolda yürüdüğünüzü düşünün. Gözleriniz beyninize devamlı olarak bilgiler gönderiyor ve beyniniz oralarda ne olup bittiğini size haber veriyor. Ancak gerçek şu ki, beyninizin ürettikleri sadece ve tamamen gözlerinizin gördüklerinden oluşmuyor. Beyniniz düzenli olarak gördüğünüz her şeyi yorumlayarak ortaya bir sonuç çıkarıyor.

Aşağıdaki video, baktıklarımız ile gördükleriniz arasında ne kadar büyük farklılıklar olabileceğinin en güzel örneklerinden birisi:

Bu da bize gösteriyor ki; insan beyni çevresinde gerçekleşen olayları 2 katmana yerleştiriyor. Öncelikle ilgi alanına giren görüntüyü algılarken, geri kalan her şeyi arkaplan olarak kodluyor. Dolayısıyla, gözümüzün önündeki büyük resimde meydana gelen değişiklikler, tam gözümüzün önünde cereyan etse bile olup biteni görüp algılayamayabiliyoruz.

Değişim körlüğü nedir?

Gözümüzün önündeki küçük değişikliklerin ya da hareketlerin (örneğin görsel devamlılıkta bazı kesintiler, fotoğrafların değişimi, yanıp sönmeler, göz kırpmaları vb.) bizi kocaman bir değişikliği algılamaktan alıkoyabildiğini gördük.

Değişim körlüğü, görsel uyaranın bir değişiklik tanıtıldığında ve gözlemci bunu fark etmediğinde oluşan şaşırtıcı bir algısal ve psikolojik durum olarak tanımlanabilir. Çoğu zaman değişim belirgin olmasına rağmen “görememek” de denilebilir. Ve bu durum günlük hayatımızda her türlü faaliyeti yaparken geçerli oluyor.

Ekran tasarımı açısından ise kullanıcıların tasarımda meydana gelen görsel değişiklikleri fark edememeleri. Örneğin titreyen bir ekrandaki görsel kesintiler sonrasında oluşan değişimleri kullanıcıların fark edememesi. Yapılan çalışmalar kullanıcıların %75-80 gibi büyük bir bölümünün değişim körlüğü yaşadığını ortaya koyuyor.

Değişim körlüğü neden oluşur?

Aslında buraya kadar biraz bahsetmeye çalıştım. Değişimi fark etmede sahip olduğumuz yetenek bunda büyük rol oynuyor. Değişim körlüğüne neden olan faktörler aşağıdaki gibi sıralanabilir:

  • Görsel algıdaki kesintiler: Sayfaların yeniden yüklenmesi esnasında yaşanan değişimler, kullanıcının gözünün ekranda bir noktadan başka bir noktaya zıplaması esnasında oluşan değişimler veya sayfanın yatay yönden dikey yöne veya tersi olacak şekilde kendini ekrana ölçeklendirmesi esnasında meydana gelen değişimler gibi.
  • Hız: Görsel detaylardaki anlık değişimler. İnsanın göz kırpması ortalama 300-400 milisaniye sürüyor, dolayısıyla bir görsel 67 milisaniye içinde kesintiye uğradığında değişim körlüğü gözlenebiliyor. (Detaylı bilgi için şu çalışmayı okuyabilirsiniz.)
  • Konsantrasyon: Bir nesneye, konuya veya görsele odaklanıldığında, bu esnada etraftaki değişimlerin fark edilmemesine neden olabiliyor.
  • Konsantrasyon farklılıkları: Yapılan çalışmalar insanların büyük bölümünün değişim körlüğü yaşadığını ortaya koysa da bireysel konsantrasyon farklılıkları değişim körlüğünün boyutlarını da kişiden kişiye farklılaştırabiliyor.
  • Beklenti ve geçmiş deneyimler: Kullanıcıların tasarımda görmeye alıştıkları bileşenlerin kendilerine ekranda farklı alanlarda sunulması sonucu oluşabiliyor.
  • Yaş vb. bireysel özellikler: Değişim körlüğü insan beyninin algı ve yorumlama biçimi ile ilişkili olduğundan, beynin algılamasını etkileyecek her türlü fizyolojik durum belirleyici olabiliyor.
  • Görsellerin sunum şekli: Kullanıcılara sunulan her görsel, değişim körlüğüne neden olmuyor elbette. Birazdan da bahsedeceğim gibi, bazı yöntemlerle kullanıcıların değişimi kolay algılaması sağlanabiliyor.

Değişim körlüğü neden önemlidir?

Önemlidir çünkü kullanıcılarınız ile aranızdaki iletişimin ve etkileşimin kesintiye uğramasına neden olur.

Tasarımlarda kullanıcıya verilmek istenen bilgiler, mesajlar veya uyarıların sizin istediğiniz şekilde kullanıcılara ulaşmaması veya tasarımın kullanıcılar ile arasındaki bu etkileşimin etkili ve verimli şekilde gerçekleşmemesi değişim körlüğünün oluşturacağı bir sorun.

Bu gerçekleştiği zaman, metin kullanımından görsellere, renk seçiminden tasarım bileşenlerine kadar arayüzde kullanılan tüm elementlerde bu değişimin doğru algılanmasını sağlamak için nelerin yapılması gerektiği konusunda kafa yormak gerekir. Diğer türlü kullanıcı ile tasarım üzerinden doğru bir etkileşim kurulması mümkün olmayacaktır.

Örneğin aşağıdaki resimlerden, soldaki resimde “Add to Cart” düğmesine tıklandığında sağdaki resim ekrana geliyor. Burada kullanıcılarda oluşabilecek değişim körlüğünü düşünün bakalım.

OutofStock

Değişim körlüğünü önlemek için ne yapmalı?

Öncelikle kullanıcıların tasarımlarınızı kullanırken görev odaklı (task-oriented) olduklarını unutmayın. Kullanıcılar ekranda bir görevi gerçekleştirmeye çalışırken (örneğin bir ürün satın almak gibi) bir zaman dilimi içerisinde ekranın bir bölümüne yüksek bir dikkat ile odaklanırlar. Dolayısıyla, tasarımların net, karmaşıklıktan uzak, anlaşılması kolay ve kullanıcının odaklandıkları alanları dikkate alacak şekilde olması önemli, böylelikle ekrandaki olası değişikliklerin değişim körlüğüne neden olmamasını sağlamak gerekli.

Aşağıdaki resimlerde üstteki tasarımda kullanıcıların mug satın alırken, kendi tercihlerini (renk, isim vb.) işaretleyerek resimdeki mug üzerinde görmeleri sağlanıyor.

MugLeft

Bu sayede yeni ekran alttaki tasarımdaki gibi görünüyor. Peki burada değişim körlüğü nerede sizce? Siz mug tasarımında nelerin değiştiğine bakarken, sayfada değişen başka alanlar da olabilir mi acaba?

MugRight

Ekrandaki değişikliklerin kullanıcılarda oluşturabileceği değişim körlüğünü tamamen ortadan kaldırmak her zaman mümkün olmasa da, en azından bu sorunu minimize etmek için yapılması gerekenlere bakalım:

  • Zorunlu olmadıkça sayfaların yeniden yüklenmesinden mümkün olduğunca kaçınarak görsel kesintileri minimize edin,
  • Sayfada görüntülenen yeni görsellerde kullanıcılardan fark etmesi beklenen yeni elementler için uygun görsel vurgulamalar (örneğin renk kontrastlığı, boyut değişimi vb.) yapın, böylece kullanıcıların gözünden kaçmasını engelleyin,
  • Sayfadaki yeni görsel elementleri kullanıcıların gözlerinin hali hazırda odaklandıkları alanlara yakın olacak şekilde konumlandırın (yukarıdaki mug örneğinde yaşanan değişim körlüğünü düşünün),
  • Anlık değişimlerden kaçınarak, animasyonlu geçişleri kullanmayı deneyin. Animasyon geçişleri ekrandaki değişimin ne olduğunu açıklamak için etkili bir yöntem olabilir,
  • Kullanıcıların geçmiş deneyimlerini dikkate alarak ekranı tasarlayın. Örneğin kullanıcılar bir ekranda sol üst alanda logo vb. görseller görmeyi beklerken, sağ üst alanda ise arama kutusu görmeyi beklerler.

Kısaca, değişim körlüğü ekran tasarımında kullanıcıların, onlara vermek istediğiniz mesajları doğru algılamalarının önündeki önemli engellerden birisi. Arayüzlerinizi tasarlarken, kullanıcıların tasarımınıza bakar ama göremez olmalarını istemiyorsanız, bu konuyu aklınızın bir köşesinde tutmanızı tavsiye ederim.

Adobe Creative Cloud aboneliklerinde öğrencilere ve öğretmenlere özel %60 indirim fırsatlarını kaçırmayın.

Bu yazıdaki örnek resimlerde gerçekleşen değişim körlüğünün ne olabileceğini ve buna neden olan tasarımdaki hataları fark ettiyseniz, yorum olarak paylaşabilirsiniz. Bakalım doğru yerden yakalayabilmiş misiniz?

  • Sıvı Dolum Makinasi

    Değişim şart ben ayda en az bir kez sitemi değiştiriyorum.

Bugün ilk makalen bizdendi.
Daha fazlası için SHERPA Blog okuru olmalısın.
Giriş Yap Ücretsiz kaydol
İLGİNİ ÇEKEBİLİR
UX Efsanesi #15: “Kullanıcılar optimumu seçer.”
Berk Bayri

UX Efsanesi #15: “Kullanıcılar optimumu seçer.”