Kullanıcı deneyimi tasarımında bilişsel psikoloji: Gestalt görsel algı ilkeleri

Bu algı süreci başladığında zihnimiz, tüm öğeleri tekil ve bağımsız bileşenler olarak kavramaktan, tüm şekli bir bütün olarak görmeye doğru bir sıçrama yapar. Bunun sonucunda, aslında yaratılmamış şekil ve nesneler algılarız.

Bu süreçle ilgili başka bir örnek için aşağıdaki animatik görseli inceleyin. Beynimiz, yürüyen bir köpek algılıyor ancak aslında burada hareket halinde bir dizi noktadan başka bir şey yok.

Bunlar basit örnekler olmasına rağmen, beynimizin dünyayı hızlı algılayabilmemiz için sürekli başvurduğu kısa yolları ortaya koyuyor. Bu kısa yolların tümü, Gestalt adı verilen psikoloji kuramında birer görsel algı ilkesi olarak tanımlanmış. Peki bu bilgilerden, web ve mobil arabirim tasarımı süreçlerinde nasıl faydalanabiliriz?

Tasarımcılar neden Gestalt ilkelerine dikkat etmeli?

Tasarladığınız kullanıcı arayüzlerinin, kullanıcı deneyimine ne gibi katkısı olabileceğini öğrenebilmeniz için insan algısını, psikolojisini öğrenmeniz gerekir.

Gestalt İlkeleri’ni yönlendiren temel kanun; insanların deneyimlerini düzenli, muntazam ve tanınabilir bir şekilde sıraya dizme eğilimidir. Karmaşık ve kaotik dünyada anlam yaratmamızı sağlayan budur. Bu ilkelerin nasıl işlediğini tam manasıyla kavramak size üç açıdan yardımcı olacak:

• En etkili tasarım öğelerinin hangileri olduğunu belirleyebilirsiniz: Örneğin, görsel hiyerarşiyi neye göre belirleyeceğinizi, arka plan gölgelendirmesini ya da renk geçişlerini ne zaman kullanacağınıza karar vermenizi; benzer öğeleri gruplandırıp, farklı olanları ayırmanızı sağlayacaktır.
• Psikolojik ilkelerin, görsel algımızı etkileyecek güce sahip olduğunu unutmayın. Bu sayede tasarımcılar dikkatimizi belirli odak noktalarına yönlendirebiliyor, belirli eylemleri gerçekleştirmemizi sağlıyor ve davranışsal değişim yaratabiliyorlar.
• Ve son olarak, Gestalt İlkeleri en ileri aşamada kullanıcının sorunlarının çözülmesine katkı sağlayan ve sezgisel olarak kullanılabilen ürünler tasarlamanıza yardımcı olur.

Şimdi gelin, 7 ilkeyi de, kullanıcı arabirimlerine etkisini gösteren örnekleriyle beraber inceleyelim.

1.İlke: Figür-arka plan

Figür-arka plan ilkesi, insanların içgüdüsel olarak bir nesnenin ön planda mı arka planda mı olduğunu algıladığını söyler. Bir nesne öne doğru çıkık halde durur (figür) ya da geriye doğru sinmiştir (arka plan).

“Bu tespit çoğu zaman kısa sürede ve bilinçaltı düzeyinde gerçekleşir. Figür/ arka plan ilkesi bize bir kompozisyonda neye odaklanmamız gerektiğini ve neyi görmezden gelirsek sorun olmayacağını söyler.”
—Steven Bradley, Tasarımcı

Web sitenizi ya da mobil uygulamanızı kullananların ekran karşısında yaptığı ilk şey, ön planda ve arka planda ne olduğunu kavramaya çalışmaktır.

Figür-arka plan ilkesi örnekleri

Basecamp’in ana sayfasında birden fazla grafik, metin ve birçok farklı bilgi mevcut. Figür-arka plan ilkesi, size hemen beyaz ön plandaki içeriğe odaklanmanız gerektiğini söylüyor.

AngelList aşağıdaki gibi, figür-arka plan ilkesini iki şekilde kullanıyor. Öncelikle, sol taraftaki metin ve logo arka plandaki imgenin üzerine oturtulmuş figür konumunda. İkinci olarak ise sağdaki menünün beyaz metni siyah arka plan üzerine yerleştirilmiş.

2.İlke: Benzerlik

Benzerlik ilkesi, aralarında benzerlik gördüğümüz şeyleri gruplama ve aynı işlevi gördüklerini düşünme eğilimimiz olduğunu söyler.

Örneğin aşağıdaki görselde şekil itibarıyla birbirinden ayrı iki grup varmış gibi gözüküyor: Daireler ve üçgenler.

Benzer şekilde gruplandırma yapabilmek için renk ve düzenleme gibi çeşitli tasarım öğeleri kullanılabilir. Aşağıdaki örnekte bütün şekiller aynı olmasına rağmen her sütunun ayrı bir grubu temsil ettiği açıktır:

Benzerlik ilkesi örnekleri

GitHub benzerlik ilkesini aşağıda belirtilen iki şekilde kullanıyor.

1. Farklı bölümleri ayırt etmek için: Yukarıdaki gri bölümün siyah bölümden farklı bir amacı olduğunu, siyah bölümün de mavi bölümden ayrı ve farklı olduğunu hemen görebilirsiniz.
2. Düz metinde text link’leri göstermek için mavi renk kullanımı ile tüm mavi metinlerin aynı işlevi gördüğünü de ifade etmiş oluyorlar.

3. İlke: Yakınlık

Yakınlık ilkesine göre birbirine yakın duran nesneler, aralarında boşluk olan nesnelere kıyasla daha ilişkili izlenimi veriyor.

Yakınlık, bir grup nesneyi ayrıştırabilecek renk, şekil ve diğer işlev benzerliklerinin önüne geçecek kadar güçlü bir ilke.

Yukarıdaki üç adet siyah ve kırmızı nokta grubunu görüyor musunuz? Nesnelerin birbirine görece yakın oluşu aynı renk uygulamasından bile daha güçlü bir etki yaratıyor.

Yakınlık ilkesi örnekleri

Her bir görselin birbirine ve karşılık gelen metne yakın oluşu birbirleriyle ilintili oldukları mesajını veriyor.

Vice her haber metninde; kullandığı görsel, başlık, açıklama ve diğer bilgileri ayırt etmek için bu ilkeden yararlanıyor.

4. İlke: Ortak Alan

Ortak alan ilkesi, yakınlık ilkesiyle son derece ilişkili. Bu ilkeye göre, aynı kapalı alanda yer alan nesneleri tek bir grupta toplanmış gibi algılıyoruz.

Çerçeve ya da başka görünür sınırlar, aynı yakınlık, şekil ve renge sahip olsalar bile nesne grupları arasında ayrım algısı yaratmaya çok yardımcı olur.

Ortak alan ilkesi örnekleri

Aşağıda Pinterest’ten alınan bir örnek mevcut. Ortak alan ilkesi fotoğraf, başlık, tanım, gönderen ve diğer detayları gösterecek şekilde her pin etrafındaki tüm diğer pin’lerden ayrılıyor.

Aşağıdaki Facebook örneğinde de aynı şey geçerli. Gönderiyle ilgili yorum, beğeni ve etkileşimleri göstermek için  aynı şeyleri ifade eden bilgi grubu, diğer gönderilerden ayrı tutuluyor.

5. İlke: Devamlılık

Devamlılık ilkesine göre, aynı çizgi veya eğri üzerinde olmayanlara nazaran tek bir çizgi veya eğri üzerine yerleştirilen öğeler birbiriyle daha ilintili algılanıyor.

Örneğin yukarıdaki resimde eğrinin üzerindeki kırmızı noktalar, yatay çizgideki kırmızı noktalardan ziyade aynı eğrideki siyah noktalarla daha ilintili gözüküyor. Gözünüz doğal olarak bir çizgi ya da eğriyi takip ettiğinden, devamlılık ilkesi renk benzerliğine kıyasla daha kuvvetli bir bağlantı sunuyor.

Devamlılık ilkesi örnekleri

Aşağıdaki görselde de göreceğiniz üzere, Amazon’daki ilgili ürünlerin hepsinin birbirine benzer ya da ilişkili olduğunu göstermek için Devamlılık İlkesinden yararlanılmış.

6. İlke: Tamamlama

Tamamlama ilkesine göre karmaşık bir öğe bütününe baktığımızda tanıyabileceğimiz tek bir model arama eğiliminde oluyoruz.

Bir başka deyişle, eksik parçaları olan bir imaj gördüğünüzde beyniniz bu boşlukları dolduruyor ve oradaki modeli tanıyabilmenizi sağlıyor.

Mesela, yukarıdaki örneğe baktığınızda muhtemelen bir zebra görüyorsunuzdur, oysa burada birkaç siyah şekilden başka bir şey yok. Beyniniz, geçmiş deneyiminize dayanarak tanıyabileceği bir model yaratmak için oradaki bilgi eksikliğini kapatıyor.

Tamamlama ilkesi örnekleri

Tamamlama ilkesi IBM, NBC gibi çeşitli şirketlerin logo tasarımları için sık sık başvurdukları bir ilke.

7. İlke: Odak Noktası

Odak noktası ilkesine göre görsel olarak öne çıkan şey izleyicinin dikkatini çeken ilk şeydir.

Örneğin yukarıdaki imajda ilk dikkatinizi çeken şey kırmızı kare, çünkü etrafındaki siyah dairelerden farklı tek şey o. İlginizi ilk o çektikten sonra resmin geri kalanına dikkat etmeye başlıyorsunuz.

Odak noktası ilkesi örnekleri

Twilio, kullanıcının aksiyona geçmesini istediği aksiyon butonuna dikkat çekmek için, odak noktası ilkesinden yararlanmıştır.

Aşağıdaki örnekte Instacart, figür-arka plan ilkesini, odak noktası ilkesiyle birleştirerek dikkatinizi önce beyaz ön plana, sonra da yeşil “mağaza bul” butonuna yönlendiriyor.

Gestalt ilkeleri kullanıcı deneyimi tasarımı sürecine nasıl katkı sağlar?

Sonuç olarak, insan zihninin nasıl işlediğini anladığınızda kullanıcılarınızın dikkatini doğru yere yönlendirmeniz daha da kolaylaşacaktır. Bu ilkeleri her zaman aklınızda bulundurursanız, kullanıcı deneyimi, sürecinizin hep en merkezinde yer alır.