1. Prof.Dr. Kürşat Çağıltay,
İnsan Bilgisayar Etkileşimi ve Kullanılabilirlik Mühendisliği: Teoriden Pratiğe, Kitap Notları
GESTALT PRENSİPLERİ
Prof. Dr. Kürşat ÇAĞILTAY
Ayşe Hilal YERGÖK
2. Prof.Dr. Kürşat Çağıltay,
İnsan Bilgisayar Etkileşimi ve Kullanılabilirlik Mühendisliği: Teoriden Pratiğe, Kitap Notları
• Dünya ile olan etkileşimimiz ağırlıklı olarak görme duyumuz
sayesinde gerçekleşmektedir.
• Bilgisayar ile de etkileşirken karşımızdaki arayüzden bize
sunulan bilgileri algılama ve anlamlandırma süreci kritik bir
öneme sahiptir.
• Görsel bilginin algılanması, sınıflandırılması ve organize
edilmesi konusu ile ilgili en önemli araştırmalar Gestalt
psikologlarınca gerçekleştirilmiştir.
3. Prof.Dr. Kürşat Çağıltay,
İnsan Bilgisayar Etkileşimi ve Kullanılabilirlik Mühendisliği: Teoriden Pratiğe, Kitap Notları
Gestalt Prensipleri nedir?
• Gestalt psikolojik bir terim olarak
“birleştirilmiş bütünlük” anlamı taşımaktadır.
• Alman psikologlar tarafından 1920’ de
geliştirilen “Görsel Algı” teorisine atıfta
bulunmaktadır.
• Bu teoriler insanların görsel öğeleri
gruplandırma eğilimlerini veya prensipler
uygulandığında elde edilen “birleştirilmiş
bütünlük” olgusunu açıklamaya çalışmaktadır.
4. Prof.Dr. Kürşat Çağıltay,
İnsan Bilgisayar Etkileşimi ve Kullanılabilirlik Mühendisliği: Teoriden Pratiğe, Kitap Notları
GESTALT PRENSİPLERİ
• Kelime olarak, organizasyon, yapılandırma anlamına gelen
Gestalt teorisine göre, dünyayı anlamamız etrafımızdan gelen
uyaranların tek tek yorumlanması ile değil uyaranların bir
bütün olarak algılanması ile olur.
• Diğer bir deyişle bir bütün onu oluşturan alt birimlerin
toplamından farklıdır.
5. Prof.Dr. Kürşat Çağıltay,
İnsan Bilgisayar Etkileşimi ve Kullanılabilirlik Mühendisliği: Teoriden Pratiğe, Kitap Notları
GESTALT PRENSİPLERİ
• Gestalt teorisi görsel bazı örneklerde daha iyi anlaşılabilir.
Aşağıdaki şekilde ne görüyorsunuz?
6. Prof.Dr. Kürşat Çağıltay,
İnsan Bilgisayar Etkileşimi ve Kullanılabilirlik Mühendisliği: Teoriden Pratiğe, Kitap Notları
GESTALT PRENSİPLERİ
• Gestalt teorisi görsel bazı örneklerde daha iyi anlaşılabilir.
Aşağıdaki şekilde ne görüyorsunuz?
• Bu soruya cevap veren kişilerin büyük bir çoğunluğu, bunun
bir çember olduğunu söyleyeceklerdir. Çok büyük ihtimalle
dokuz adet nokta diye bir cevap kimseden gelmeyecektir.
Gestalt teorisine göre algı sistemimiz, bu örüntüyü zihnimizde
yapılandırmaya ve anlamlı şekilde organize etmeye
çalışmaktadır.
7. Prof.Dr. Kürşat Çağıltay,
İnsan Bilgisayar Etkileşimi ve Kullanılabilirlik Mühendisliği: Teoriden Pratiğe, Kitap Notları
Örnek Soru:
• Ancak birbiri ile çelişen ya da tam anlaşılamayan bir uyaranın
olması durumunda bilişsel sistemiz hatalı kararlar da
verebilmektedir.
• Örneğin, aşağıdaki şekilde ne görüyorsunuz:
8. Prof.Dr. Kürşat Çağıltay,
İnsan Bilgisayar Etkileşimi ve Kullanılabilirlik Mühendisliği: Teoriden Pratiğe, Kitap Notları
Cevap:
• Gestalt teorisine göre zihnimiz bu resimdeki eksik parçaları
birleştirme eğilimindedir ve birleştirme işlemini yaparken
geçmiş deneyimimiz doğrultusunda da anlam vermeye çalışır.
• Cevap verenlerin bir kısmı bunu bir At olarak algılarken bir
kısmı Zebra olarak algılayabilmektedir. Parçalar tek başlarına
bir anlam ifade etmemekte ama aradaki boşluklar zihnimizde
doldurulduğunda anlamlı bir resim ortaya çıkmaktadır.
9. Prof.Dr. Kürşat Çağıltay,
İnsan Bilgisayar Etkileşimi ve Kullanılabilirlik Mühendisliği: Teoriden Pratiğe, Kitap Notları
Gestalt Teorisi - Bilgisayar Ortamı
• Gestalt teorisini bilgisayar arayüzlerine uyarlayacak olursak,
bir arayüz kendisini oluşturan tüm parçalardan (menü, buton,
resim, yazı, vb.) daha farklıdır.
• Bütün bu birimleri teker teker incelemek arayüzün genel
değerlendirmesini yapmak için yeterli değildir.
• Gestalt teorisi doğrultusunda yapılan araştırmalar sonucunda
bir dizi tasarım kuralı oluşturulmuştur.
10. Prof.Dr. Kürşat Çağıltay,
İnsan Bilgisayar Etkileşimi ve Kullanılabilirlik Mühendisliği: Teoriden Pratiğe, Kitap Notları
Tasarım Kuralları:
• Benzerlik Kuralı (Law of Similarity):
• Yakınlık Kuralı (Law of Proximity):
• Simetri Kuralı (Law of Symmetry):
• Süreklilik Kuralı (Law of Continuity):
• Kapalılık Kuralı (Law of Closure):
• Aynı Yön Kuralı (Law of Common Fate):
• Desen – Zemin Kuralı (Law of Figure and Ground)
11. Prof.Dr. Kürşat Çağıltay,
İnsan Bilgisayar Etkileşimi ve Kullanılabilirlik Mühendisliği: Teoriden Pratiğe, Kitap Notları
Benzerlik Kuralı (Law of Similarity):
• Bilişsel sistemimiz benzer elemanları anlamlı bir bütün
oluşturması için gruplar. Gruplama işlemi renk, büyüklük ya da
şekle göre olabilir.
• Yukarıdaki örnek 11 ayrı objeden oluşmuştur fakat tek bir cisim olarak
algılanmaktadır. Bunun sebebi şekillerin birbirine benzerliğinden
kaynaklanmaktadır.
• Alt tarafta kartal görüntüsü oluşturan üçgen şekiller üstteki güneş ışığı şeklini
oluşturanlarla aynı göründüğü için bütünlük oluşturur.
12. Prof.Dr. Kürşat Çağıltay,
İnsan Bilgisayar Etkileşimi ve Kullanılabilirlik Mühendisliği: Teoriden Pratiğe, Kitap Notları
Benzerlik Kuralı (devamı)
Benzerlik kuralının oluştuğu durumlarda, objelerden biri
diğerlerinden farklı olursa vurgulanmış olur. Bu duruma “aykırılık”
denir.
Sağ tarafta en sonda bulunan figür odak nokta olarak
algılanmaktadır, çünkü diğerlerinden şekil olarak farklılaşmıştır..
13. Prof.Dr. Kürşat Çağıltay,
İnsan Bilgisayar Etkileşimi ve Kullanılabilirlik Mühendisliği: Teoriden Pratiğe, Kitap Notları
Benzerlik Kuralı
• Soldaki resimde görüldüğü gibi, iki taraftada aynı nesneler olmasına rağmen
sağda yatay kareler ayrı bir grup olarak algılanmaktadır.
• Benzer şekilde, Yahoo’nun web sitesinde sağ üstteki seçenekler (Mail,
Messenger, Puzzles, Weather, Events, Horoscope) benzerlik kuralına uyduğu
için bir grup olarak algılanmaktadır.
14. Prof.Dr. Kürşat Çağıltay,
İnsan Bilgisayar Etkileşimi ve Kullanılabilirlik Mühendisliği: Teoriden Pratiğe, Kitap Notları
Yakınlık Kuralı (Law of Proximity):
• Bilişsel sistemimiz birbirine mekansal ya da zamansal olarak
yakın elemanları anlamlı bir bütün oluşturması için gruplar.
Üstteki 9 kutucuk yakınlık kuralı
gözetilmeksizin yerleştirilmiştir.
Dolayısıyla ayrı ayrı şekiller olarak
algılanırlar.
Kutucuklar bu şekilde
yerleştirildiklerinde ise bütünlük
sağlanır. Halen ayrı ayrı şekiller
olmalarına rağmen bu kez bir grup
olarak algılanırlar.
15. Prof.Dr. Kürşat Çağıltay,
İnsan Bilgisayar Etkileşimi ve Kullanılabilirlik Mühendisliği: Teoriden Pratiğe, Kitap Notları
Yakınlık Kuralı (devamı)
Yanda bulunan 15 farklı şekil ise yakınlık kuralına göre
yerleştirildiklerinden dolayı bir bütün (ağaç) olarak algılanmaktadır.
•Sol taraftaki şekiller kolonlar arasına gelen boşluk nedeni ile daha farklı algılanmaktadır.
Boşluk nedeni ile kolonlar birer grup gibi görülmektedir.
•Sağdaki ekran görüntüsünde de Ürünlerimiz ya da Site Sahipleri İçin başlıkları altındaki kısımlar
birbirlerine yakın oldukları için onlar birer grup olarak algılanmaktadır.
16. Prof.Dr. Kürşat Çağıltay,
İnsan Bilgisayar Etkileşimi ve Kullanılabilirlik Mühendisliği: Teoriden Pratiğe, Kitap Notları
Simetri Kuralı (Law of Symmetry):
• Bilişsel sistemimiz simetrik elemanları,
birbirlerinden uzakta da olsalar, anlamlı bir
bütün oluşturması için gruplar.
• Üstteki şekiller birbirlerinden ayrı olmalarına
rağmen simetrik olduklarından dolayı 2’li
gruplar halinde algılanmaktadır.
{ } { } { } { }
17. Prof.Dr. Kürşat Çağıltay,
İnsan Bilgisayar Etkileşimi ve Kullanılabilirlik Mühendisliği: Teoriden Pratiğe, Kitap Notları
Simetri Kuralı (devamı)
{ } { } { } { }
Sayfada üstte bulunan bağlantılar
birbirlerinden “|” işareti ile ayrılmış
olmalarına rağmen bütünlük
sağlamaktadır.
Sağ tarafta bulunan Navigation ve
Photography bağlantıları ise alt başlıklar
içermektedir fakat simetrik oldukları
için aynı tür kategoriyi belirtmektedir.
18. Prof.Dr. Kürşat Çağıltay,
İnsan Bilgisayar Etkileşimi ve Kullanılabilirlik Mühendisliği: Teoriden Pratiğe, Kitap Notları
Süreklilik Kuralı (Law of Continuity):
Bilişsel sistemimiz görsel ya da işitsel elemanlarda oluşan
boşlukları birbirine bağlayıp, anlamlı bir süreklilik sağlar.
Gözümüz bir objeden koptuğu anda diğer bir objeye bakmaya
devam etmek zorunda kalıyorsa süreklilik durumu ortaya çıkar.
Üstteki örnekten de anlaşılacağı üzere, bakan kişinin gözü doğal
olarak bir çizgiyi (eğriyi) takip etmek durumunda kalıyor. H
harfindeki enine devam eden yumuşak kıvrım bakan kişiyi
yaprağa götürüyor.
19. Prof.Dr. Kürşat Çağıltay,
İnsan Bilgisayar Etkileşimi ve Kullanılabilirlik Mühendisliği: Teoriden Pratiğe, Kitap Notları
Süreklilik Kuralı (devamı)
• Bu kez de ayrı ayrı noktalar
sıralanışları bakımından bir
devamlılık sağlamakta,
dolayısıyla süreklilik
sağlayacak şekilde
algılanmaktadır.
20. Prof.Dr. Kürşat Çağıltay,
İnsan Bilgisayar Etkileşimi ve Kullanılabilirlik Mühendisliği: Teoriden Pratiğe, Kitap Notları
Kapalılık Kuralı (Law of Closure):
• Bilişsel sistemimiz görsel ya da işitsel elemanlarda oluşan
boşlukları doldurup, anlamlı bir bütün oluşmasını sağlar.
• Herhangi bir obje görseli tamamlanmamışsa veya boşluk
tarafından tamamen çevrelenmemişse kapalılık durumu
oluşur. Görselin yeterli kısmı algılanabiliyorsa, eksik kısımlar
bakan kişi tarafından otomatik olarak tamamlanır.
21. Prof.Dr. Kürşat Çağıltay,
İnsan Bilgisayar Etkileşimi ve Kullanılabilirlik Mühendisliği: Teoriden Pratiğe, Kitap Notları
Kapalılık Kuralı (devamı)
Yandaki şekilde panda görseli tam olarak
çizilmemiş olmasına rağmen gözümüz
tamamlanmış olarak görmekte ve panda
olduğunu algılamaktadır. Bakan kişinin algısı
şekli tamamladığında, kapalılık kuralı ortaya
çıkmaktadır.
Yandaki şekilde yerleşimleri uygun ayarlanmış
tamamlanmamış şekiller, ortada ayrı bir üçgen
figürü oluşturmaktadır.
22. Prof.Dr. Kürşat Çağıltay,
İnsan Bilgisayar Etkileşimi ve Kullanılabilirlik Mühendisliği: Teoriden Pratiğe, Kitap Notları
Kapalılık Kuralı (devamı)
Soldaki örnekte herhangi bir çerçeve yapısı kullanılmamasına rağmen sitenin içerik ve
menü bölümleri rahatlıkla ayırt edilebilmektedir.
Sağdaki örnekte ise sayfanın üstünde ve altında kullanılan resimler ile boşluklar
kapalılık kuralına göre tasarlanmış ve bir bütünlük sağlanmıştır.
23. Prof.Dr. Kürşat Çağıltay,
İnsan Bilgisayar Etkileşimi ve Kullanılabilirlik Mühendisliği: Teoriden Pratiğe, Kitap Notları
Aynı Yön Kuralı (Law of Common Fate):
• Bilişsel sistemimiz aynı yönü gösteren elemanları gruplar.
• Bakan kişi mantıksal olarak yukarıyı gösteren ok işaretlerini
veya sağ tarafı gösteren el işaretini gruplar. Ters tarafı veya
yönü gösteren objeler ise gerilim yaratır ve bakan kişi bunu
grubun bir parçası olarak görmez, farklı bir grup olarak algılar.
24. Prof.Dr. Kürşat Çağıltay,
İnsan Bilgisayar Etkileşimi ve Kullanılabilirlik Mühendisliği: Teoriden Pratiğe, Kitap Notları
Aynı Yön Kuralı (devamı)
• Üstteki örnekte sol bölümde bulunan ikonlar aynı hiza ve yönde
oldukları için bir grup olarak, sağdaki ikon tıklandığında yer
değiştirdiği için diğerlerinden ayrı olarak algılanmaktadır.
• Alttaki örnekte ise menüde dikey ve yatay yerleştirilen öğeler
ayrı ayrı gruplanmaktadır.
25. Prof.Dr. Kürşat Çağıltay,
İnsan Bilgisayar Etkileşimi ve Kullanılabilirlik Mühendisliği: Teoriden Pratiğe, Kitap Notları
Desen – Zemin Kuralı
(Law of Figure and Ground)
• Görsel bir nesneye bakıldığında içsel olarak 2 farklı yapı görme
eğilimi söz konusudur. Hem görselin ön planındaki figür, hem de
arka plan ayrı birer katman gibi algılanır.
• Gestalt prensiplerine göre bakan kişi objeyi ve onu çevreleyen
alanı ayırt ederek bir yapıyı, silueti veya şekli figür olarak, kalan
kısmı da zemin olarak algılar. Fakat bu her defasında bu kadar
keskin olmayabilir. Arka planda olan imajı asıl imaj olarak
algılayabilir veya ön plandaki figürü önce algılayıp diğer katmanı
arka plan olarak düşünebilir.
26. Prof.Dr. Kürşat Çağıltay,
İnsan Bilgisayar Etkileşimi ve Kullanılabilirlik Mühendisliği: Teoriden Pratiğe, Kitap Notları
Desen – Zemin Kuralı (devamı)
Yandaki şekilde açıkça beyaz olan kısım
arkaplan olarak, siyah olan kısımsa figür
olarak algılanıyor.
Bu durumda desen ve zemin dengesi
incelenir. Algıya göre görselde bir yüz
silueti görülebilir veya figür bir panjur
olarak düşünülebilir.
Alttaki görselde ise daha karmaşık bir yapı
gözlemlenmektedir. Desen-Zemin
ilşkisine bakıldığında yapraklar ayrı, su
dalgası ayrı ve ağaç ayrı ayrı
algılanmaktadır.
27. Prof.Dr. Kürşat Çağıltay,
İnsan Bilgisayar Etkileşimi ve Kullanılabilirlik Mühendisliği: Teoriden Pratiğe, Kitap Notları
Desen – Zemin Kuralı (devamı)
Soldaki örnekte içerik ve görseller arka plan zemininden keskin bir şekilde
ayrılmaktadır.
Sağdaki görselde ise zemin ve desen geçişi daha yumuşaktır.
28. Prof.Dr. Kürşat Çağıltay,
İnsan Bilgisayar Etkileşimi ve Kullanılabilirlik Mühendisliği: Teoriden Pratiğe, Kitap Notları
Prensipleri anlamlı şekilde kullan
• Yakınlık ve benzerlik AAA BBB
• Yakınlık ve kapalılık [] [] []
• İki prensibi çelişir şekilde kullanma!
– Yakınlık vs Kapalılık ][ ][ ][
– Yakınlık vs Benzerlik AAB BBC CCD