ndCrea® / Student / Resources / RS / 002

GÖRSEL ALGI

Görmenin fizyolojik girişinden dikkat ve Gestalt'a; renk, derinlik, hareket, okuma, veri algısı, kültür, etik ve teste kadar tasarımın algısal temelini öğren.

Algı kuramını grafik tasarım kararları, gerçek kullanım koşulları, etik ve kullanıcı testiyle birlikte ele alan görsel öğrenme kaynağı.

DOĞRULUKKaynak + bağlam
DERİNLİKLisans + ileri katman
GÖRSELKonuya özgü örnek
REFERANSGeri dönülebilir bilgi
ÖĞRENME HARİTASI21 konu başlığı / 8 ana adım
01

Gözün kaydettiği ile zihnin kurduğu aynı şey değildir.

Görsel algı fiziksel uyaranın alınması, özelliklerin işlenmesi, dikkatin seçimi, gruplama, nesne tanıma ve bağlam içinde yorumlanmasının etkileşimidir.

Görsel — Aynı ekranda her öğe aynı ağırlıkta işlenmezALGI
● ● ●YAKINLIK

Grouping

● ○ ●BENZERLİK

Difference

◐FİGÜR

Ground

◎ODAK

Attention

INPUTFiziksel uyaran

Işık, kontrast, renk, kenar, ölçek, hareket ve konum.

ORGANIZEÖrgütleme

Özellikler ayrıştırılır ve ilişkiler gruplanır.

SELECTDikkat

Görev, salience, beklenti ve konum bazı bilgileri önceliklendirir.

INTERPRETAnlam

Deneyim, kültür, dil ve uzmanlık yorumlama sürecini etkiler.

02

Dikkat sınırlıdır; her şeyi bağırttırmak hiyerarşi kurmak değildir.

Renk, yön veya hareket gibi bazı özellikler hızlı ayrışabilir; birden çok özelliği doğru nesnede birleştirmek daha fazla odak gerektirebilir. Görev ve beklenti salience kadar önemlidir.

SALIENCEBelirginlik

Kontrast dikkat çekebilir; görev dışı kontrast gürültü olabilir.

TASKGörev

Kullanıcının ne aradığı, neyi fark edeceğini değiştirir.

EXPECTBeklenti

Önceki deneyim görsel aramayı yönlendirir.

LOADYük

Benzer seçenek ve zayıf hiyerarşi karar maliyetini artırır.

03

Gestalt ilkeleri mutlak yasa değil, örgütlenmeyi açıklayan gözlem araçlarıdır.

Yakınlık, benzerlik, ortak bölge, bağlantı, süreklilik, kapanma ve figür-zemin öğelerin birlikte veya ayrı okunmasını etkiler.

Gestalt ilkelerini tek bakışta karşılaştırın GÖRSEL ÖRNEK
YAKINLIK

Yakın öğeler grup olarak algılanma eğilimindedir.

BENZERLİK

Şekil farkı gruplamayı değiştirebilir.

KAPANMA

Eksik kontur bütün olarak tamamlanabilir.

SÜREKLİLİK

Akıcı çizgiler kesişimde de sürer gibi okunabilir.

Bu ilkeler tasarım reçetesi değil, algısal örgütlenmeyi açıklayan gözlem araçlarıdır.
Görsel — Yakınlık, benzerlik, figür-zemin ve odakALGI
● ● ●YAKINLIK

Grouping

● ○ ●BENZERLİK

Difference

◐FİGÜR

Ground

◎ODAK

Attention

PROXYakınlık

Yakın öğeler çoğu durumda grup gibi okunur.

SIMBenzerlik

Renk, biçim, boyut veya yön benzerliği grup etkisi yaratır.

REGIONOrtak bölge

Aynı çerçeve/yüzey güçlü ilişki yaratabilir.

CONNECTBağlantı

Çizgiyle bağlanan öğeler aynı sistemin parçası okunabilir.

CLOSEKapanma

Eksik kontur zihin tarafından tamamlanabilir.

FİGÜRFigür-zemin

Nesne ve arka plan ayrımı sınır, kontrast ve bağlama bağlıdır.

04

Görünür olmak, görülmek ve anlaşılmak aynı şey değildir.

Ölçek, ağırlık, konum, kontrast, boşluk, hareket ve tekrar okuma önceliği kurar. Hiyerarşi dikkat çekmenin ötesinde anlamlı sıra ve ilişki üretir.

LEVELBilgi seviyeleri

Başlık, gövde, meta, veri ve aksiyon rolleri görünür olmalıdır.

CONTRASTKontrast

Her şeyi yüksek kontrast yapmak hiyerarşiyi yok eder.

SPACEBoşluk

Yakınlık ve nefes alanı ilişkiyi düzenler.

ORDEROkuma sırası

Vurgu, bilgi ve eylem sırası görevle uyumlu olmalıdır.

05

Pozitif ve negatif alan birlikte tasarlanır.

Figür-zemin kararı kenar, kapatma, simetri, alan büyüklüğü, kontrast ve bağlamdan etkilenir. Ambiguous figure-ground bazı işlerde anlam zenginliği, bazı işlerde kullanım maliyeti yaratır.

Figür–zemin: hangi alan öne çıkıyor? GÖRSEL ÖRNEK
Soldaki klasik iki-yüz/vazo düzeni, figür ile zemin atamasının tersine dönebileceğini gösterir.
EDGEKenar

Net sınır ayrışmayı güçlendirir.

NEGNegatif alan

Boşluk grup, vurgu ve okunabilirlik aracıdır.

AMBAmbiguity

Logo/afişte yaratıcı, navigasyonda riskli olabilir.

ACCESSAlgısal erişilebilirlik

Düşük kontrast ve yoğun arka plan figürü belirsizleştirebilir.

06

Renk sabit nesne etiketi değil; ışık, çevre ve adaptasyonla değişen algısal sonuçtur.

Eşzamanlı kontrast, adaptasyon, luminance, renk constancy ve surrounding renk aynı fiziksel rengin farklı görünmesine neden olabilir.

Eşzamanlı kontrast: aynı gri, farklı çevre GÖRSEL ÖRNEK
Ortadaki iki gri kare aynı renktir; çevreleri farklı olduğu için farklı algılanabilir.
Aynı fiziksel renk farklı çevrede farklı görünebilir; renk kararını tek başına swatch üzerinden vermeyin.
LUMLuminance

Okunabilirlik yalnız hue farkına bırakılamaz.

SURRÇevre

Aynı gri koyu ve açık zeminde farklı algılanabilir.

CONSTRenk sabitliği

Görsel sistem değişen ışıkta nesne rengini kısmen sabit tutmaya çalışır.

CVDRenk görme farklılıkları

Kritik bilgi yalnız kırmızı/yeşil ayrımına bağlanmamalıdır.

07

İki boyutlu yüzeyde derinlik çoklu ipuçlarıyla kurulur.

Örtüşme, perspektif, göreli boyut, texture gradient, gölge, atmospheric perspective ve hareket paralaksı mekânsal yorum üretir.

Derinlik ipuçları: perspektif + göreli boyut + örtüşme GÖRSEL ÖRNEK
yakın / büyükortauzak / küçük
Tek bir ipucu yerine birden çok uyumlu ipucu mekânsal okumayı güçlendirir.
OCCÖrtüşme

Bir öğenin diğerini kapatması önde/arkada ilişkisi kurar.

SIZEGöreli boyut

Benzer nesnelerde küçük görüntü uzaklık ipucu olabilir.

PERSPerspektif

Paralel çizgilerin yakınsaması derinlik sağlar.

HAREKEThareket parallax

Yakın ve uzak öğeler viewer hareketinde farklı hızla kayar.

08

Hareket güçlü dikkat sinyalidir; gereksiz olduğunda bilişsel ve fiziksel yük yaratabilir.

Apparent hareket, optic flow, change blindness ve temporal continuity hareket tasarımı ve arayüz kararlarını etkiler.

CHANGEDeğişim körlüğü

Dikkat başka yerdeyse büyük değişiklikler bile kaçabilir.

FLOWOptic flow

Sahne hareketi yön ve hız hissi oluşturur.

TRANSTransition

İyi transition durum değişimini açıklar.

REDUCEazaltılmış hareket

Vestibular hassasiyet için alternatif hareket davranışı gerekir.

09

Nesneleri yalnız konturdan değil özellik, parça, bağlam ve geçmiş deneyimle tanırız.

İkon, sembol ve piktogram tasarımında prototipik özellik, ayırt edilebilirlik, kültürel öğrenme ve label ilişkisi önemlidir.

FEATUREAyırt edici özellik

Kritik özellik küçük ölçekte korunmalıdır.

BAĞLAMBağlam

Aynı işaret başka çevrede başka okunabilir.

LEARNEDÖğrenilmiş kod

Birçok ikon kullanım yoluyla öğrenilir.

LABELMetin etiketi

Yeni/kritik eylemde ikon + metin ambiguity azaltır.

10

Okuma, görsel tarama ile dilsel çözümlemenin birlikte çalıştığı süreçtir.

Göz metin üzerinde sürekli kaymaz; saccade ve fixation örüntüleriyle örnekleme yapar. Tipografi, düzen, dil ve içerik tarama davranışını etkiler.

Okuma: fixation ve saccade mantığını görün GÖRSEL ÖRNEK

Tipografi ve sayfa düzeni, gözün metin üzerinde yaptığı fixation ve saccade örüntülerini etkiler. Göz her harfi kesintisiz çizgi gibi izlemez; kısa sabitlenmeler ve hızlı sıçramalarla örnekler.

Bu şema gerçek eye-tracking kaydı değil, temel mekanizmayı öğretmek için hazırlanmış açıklayıcı bir modeldir.
SACSaccade

Gözün bir fixation noktasından diğerine hızlı sıçramasıdır.

FIXFixation

Bilginin işlendiği görece sabit bakış dönemidir.

LAYOUTdüzen

Başlık, kolon, imge ve whitespace tarama stratejisini etkiler.

LANGDil

Script, kelime uzunluğu ve okuma yönü göz hareketini değiştirir.

11

Grafik, sayısal değeri algısal göreve dönüştürür.

Position, length, angle, area, renk ve volume aynı hassasiyetle karşılaştırılmaz. Encoding seçimi analitik göreve göre yapılmalıdır.

Veri algısı: uzunluk ve alan aynı hassasiyetle okunmaz GÖRSEL ÖRNEK
ORTAK EKSENDE UZUNLUK / POSITION + LENGTH
ALAN / AREA
Karşılaştırma görevi için görsel kodlama seçin; dekoratif 3B hacim sayısal doğruluğu zayıflatabilir.
POSKonum

Ortak ölçek üzerindeki pozisyon hassas karşılaştırmayı destekler.

LENUzunluk

Bar gibi uzunluk kodlamaları büyüklük karşılaştırmasına uygundur.

AREAAlan

Bubble/area karşılaştırmaları daha kaba algılanabilir.

COLORRenk kodlama

Sequential/diverging/category palette veri türüne uygun seçilmelidir.

12

Algı biyolojik altyapıya sahip olsa da yorum kültür, uzmanlık ve öğrenmeyle biçimlenir.

Renk çağrışımı, sembol, okuma yönü, harita/piktogram bilgisi ve mesleki pattern recognition kullanıcı grupları arasında değişebilir.

CULTKültürel kod

İşaret anlamı evrensel varsayılmamalıdır.

EXPERTUzmanlık

Uzmanlar karmaşık örüntüleri daha hızlı sınıflandırabilir.

SCRIPTYazı yönü

LTR/RTL ve dikey dizgi akış varsayımını etkiler.

TESTYerel test

Uluslararası tasarım hedef kullanıcıyla doğrulanmalıdır.

13

Algı bilgisi kullanıcıyı desteklemek için de manipüle etmek için de kullanılabilir.

Dark pattern, düşük görünürlük, sahte urgency, yanıltıcı grafik ölçeği ve kritik bilginin kontrastla gizlenmesi etik sorunlardır.

Algısal güç etik sorumluluk da getirir GÖRSEL ÖRNEK
YANILTICI95105

Kırpılmış eksen küçük farkı dramatik gösterebilir.

BAĞLAMI GÖSTER0200

Ölçek ve bağlam açıklanırsa yorum daha dürüst olur.

Grafik ölçeği, kontrast ve görünürlük kullanıcıyı bilgilendirebilir veya yanıltabilir.
DISCGörünürlük

Risk ve maliyet kritik eylemden önce anlaşılır olmalıdır.

CHOICESeçim mimarisi

Bir seçeneği aşırı avantajlı göstermek davranışı manipüle edebilir.

DATAGrafik dürüstlüğü

Kırpılmış eksen veya 3D abartı yanlış izlenim yaratabilir.

ACCESSÇeşitlilik

Algı farklılıkları tasarım kusuru değil kullanıcı çeşitliliğidir.

14

Tasarımcının algı varsayımı kullanıcı kanıtı değildir.

Görev testi, think-aloud, comparative test, eye tracking ve erişilebilirlik evaluation farklı sorular için kullanılır; araç araştırma sorusunun yerine geçmez.

TASKGörev başarısı

Kullanıcı kritik bilgiyi bulup doğru eylemi tamamlıyor mu?

HATAHata

Süre kadar yanlış seçim ve tereddüt de kaydedilir.

EYEEye tracking

Nereye bakıldığını gösterir; neden bakıldığını tek başına açıklamaz.

ITERİterasyon

Bulgu tasarım değişikliğine ve yeniden teste bağlanır.

15

Algı kusursuz kayıt sistemi değildir; dikkat, çevresel yoğunluk ve kısa süreli bellek nedeniyle bilgi kaçabilir.

Değişim körlüğü, çevresel görme, crowding, maskeleme ve sınırlı dikkat; özellikle yoğun arayüz, yönlendirme, veri grafiği ve hareketli içerikte tasarım kararını etkiler.

Crowding: boşluk işlevsel bir algı aracıdır GÖRSEL ÖRNEK
CROWDING / GÖRSEL SIKIŞMA
HHEHH

Hedef harf çevresindeki flankers nedeniyle periferide ayırt edilmesi zorlaşabilir.

AYRIŞTIRMA
H H E H H

Artan spacing hedefi ayırmayı kolaylaştırabilir.

Özellikle küçük ekran, çevresel görme ve yoğun ikon kümelerinde boşluk yalnız estetik tercih değildir.
DEĞİŞİM Değişim körlüğü

Dikkat başka yerdeyse büyük değişiklikler bile fark edilmeyebilir; yalnız animation kullanmak kritik durum değişimini garanti etmez.

ÇEVRE Çevresel görme

Çevrede hareket ve kaba biçim güçlü, ince ayrıntı ve metin zayıftır; kritik metin yalnız periferide bırakılmamalıdır.

SIKIŞMA Görsel sıkışma

Yakın çevredeki benzer öğeler hedef nesnenin tanınmasını zorlaştırabilir; boşluk yalnız estetik değildir.

MASKELEME Maskeleme

Hızlı ardışık veya çakışan uyaranlar önceki/sonraki bilginin işlenmesini bozabilir.

BELLEK Kısa süreli bellek

Kullanıcı ekranda olmayan bilgiyi uzun süre taşımak zorunda bırakılmamalıdır.

TARAMA Tarama örüntüsü

Okuma yolu sabit F/Z şablonlarına indirgenemez; görev, içerik, dil ve düzen taramayı değiştirir.

16

Tipografi algısal bir sistemdir: harf ayırt edilebilirliği, kelime biçimi, satır ritmi ve hiyerarşi birlikte okunur.

Okunabilirlik yalnız font büyüklüğü değildir; x-height, counter, aperture, boşluk, satır uzunluğu, kontrast, dil ve ekran/baskı koşulu birlikte değerlendirilir.

HARF Harf ayrımı

Benzer harflerin açıklığı ve açık counter/aperture özellikle küçük boyutta ayırt edilebilirliği etkiler.

SÖZCÜK Kelime ritmi

Tutarlı boşluk, harf biçimi ve sözcük arası ritim akıcı okumayı destekler.

SATIR Satır

Satır uzunluğu ve satır aralığı gözün sonraki satırı bulma maliyetini etkiler.

HİYERARŞİ Tipografik hiyerarşi

Boyut, ağırlık, boşluk ve konum okuma sırasını kurar; yalnız bold kullanmak yeterli değildir.

KONTRAST Kontrast

Renk farkı, luminance kontrastının yerine her durumda geçmez.

DİL Dil ve yazı sistemi

Okuma yönü, kelime yapısı, diakritikler ve script özellikleri algısal kararları değiştirir.

17

Algısal karar, kullanım mesafesi ve süreye göre değişir.

Afiş, mobil ekran, kitap, yönlendirme, veri panosu ve hareketli medya aynı kontrast, detay ve hiyerarşi stratejisini taşımaz.

KİTAP Kitap / yayın

Uzun okuma, sabit ışık ve yakın mesafe; satır ritmi, sayfa yapısı ve göz yorgunluğu önemlidir.

MOBİL Mobil ekran

Kısa görev, parmak etkileşimi, parlama ve değişken çevre; hedef büyüklüğü ve hiyerarşi kritik.

AFİŞ Afiş / açık hava

Mesafe, kısa bakış süresi ve hareket hâlindeki izleyici; büyük ölçekli odak ve az bilgi gerekir.

YÖNLENDİRME Yönlendirme

Karar noktasından önce görülme, mesafe, açı ve çevresel karmaşa belirleyicidir.

VERİ Veri panosu

Karşılaştırma görevi, hızlı tarama, sayı doğruluğu ve durum farkı birlikte tasarlanır.

HAREKET Hareketli medya

Zamanlama, geçici bilgi, caption ve hareket sensitivity nedeniyle süre hiyerarşinin parçasıdır.

18

Algı kuramı, gerçek boyut ve gerçek ortam testine dönüşmelidir.

Tasarım ekranda büyütülmüş görünümde değil, kullanıcının göreceği ölçü, mesafe, ışık ve görevde kontrol edilir.

1:1 Gerçek boyut

Mobil ve baskı öğelerini mümkün olduğunda 1:1 ölçekte kontrol et.

MESAFE Gerçek mesafe

Afiş ve yönlendirmeyi hedef izleme mesafesinde gör.

GRİ Gri ton

Hiyerarşinin yalnız hue farkına bağlı kalıp kalmadığını kontrol et.

BULANIK Bulanık test

Düşük frekanslı hiyerarşi ve ana odak, ayrıntı kaybolduğunda da görülebiliyor mu?

KÜÇÜK Küçük önizleme

Ana biçim, odak ve grouping çok küçük ölçekte hâlâ seçiliyor mu?

GÖREV Görev testi

Kullanıcı kritik bilgiyi bulup anlayabiliyor mu; yalnız ‘beğendin mi?’ diye sorma.

19

Algı bilgisini evrensel reçetelere indirgemek bilimsel ve tasarımsal hata üretir.

‘Kırmızı dikkat çeker’, ‘insanlar F biçiminde okur’ veya ‘Gestalt yasaları her zaman çalışır’ gibi cümleler ancak bağlamla birlikte anlamlıdır.

RENK Renk psikolojisi ezberi

Renk çağrışımı kültür, kategori, çevre ve luminance ilişkisine bağlıdır.

F / Z F ve Z kalıbı

Belirli sayfa türlerindeki göz izleme bulguları bütün tasarımlara evrensel şablon olamaz.

GESTALT Gestalt = yasa?

Gruplama ilkeleri güçlü gözlemlerdir; görev ve diğer ipuçları sonucu değiştirebilir.

7±2 Bellek sayısı

Tek bir sihirli öğe sayısını UI kuralına çevirmek doğru değildir; görev ve chunking önemlidir.

SAĞ/SOL Sağ beyin / sol beyin

Grafik tasarım pedagojisinde basit sağ/sol beyin stereotipleri bilimsel açıklama yerine kullanılmamalıdır.

GÖZ Eye tracking = anlam?

Bakış konumu dikkat göstergesi olabilir; kullanıcının neden baktığını tek başına açıklamaz.

20

Algı ilkesi tasarım kararına, ardından ölçülebilir kullanıcı sorusuna bağlanmalıdır.

Kuramı ‘güzel düzen’ gerekçesi olarak değil, hangi bilgiyi kimin hangi koşulda fark edeceği ve anlayacağı sorusunu yapılandırmak için kullanın.

YAKINLIK Gruplama

İlişkili öğeleri yakınlaştır → kullanıcı doğru ilişkiyi kuruyor mu?

KONTRAST Odak

Kritik öğeyi ayrıştır → ilk bakışta bulunuyor mu?

BENZERLİK Kategori

Aynı işlevdeki öğelere ortak dil ver → kullanıcı onları aynı grup olarak okuyor mu?

HAREKET Durum değişimi

Gereken yerde hareket kullan → değişim fark ediliyor ve anlaşılabiliyor mu?

NEGATİF ALAN Nefes ve ayrım

Boşluğu artır → grup sınırı ve ana mesaj daha doğru okunuyor mu?

METİN Okuma

Tipografik hiyerarşiyi kur → kullanıcı bilgi sırasını doğru takip ediyor mu?

21

Bir iletişim görevini algı hipotezi, gerçek test ve revizyonla çözün.

Amaç ‘hangisi daha güzel?’ değil; hangi düzenin hangi koşulda kritik bilgiyi daha doğru fark ettirdiğini ve anlattığını göstermek.

1 Bilgi önceliği

İletişim görevini ve hangi bilginin önce fark edilmesi gerektiğini yaz.

2 Üç kompozisyon

Aynı içerikle üç farklı hierarchy/grouping çözümü oluştur.

3 Algı gerekçesi

Yakınlık, benzerlik, figür-zemin, kontrast ve dikkat kararlarını açıklayın.

4 Gerçek koşul testi

1:1 boyut veya hedef mesafede, en az beş hedef kullanıcıyla bulma/anlama görevi yap.

5 Revizyon

Hata, süre ve yanlış anlama bulgularına göre düzeni değiştir.

6 Sonuç

Hangi kararın hangi koşulda neden daha iyi çalıştığını kanıtla.

REF

Doğrulanmış kaynaklar.

Bu sayfa kaynaklara geri dönülebilecek bir akademik/teknik başvuru noktası olarak tasarlanmıştır.

ndCrea Kaynak Politikası

Öncelik; standart kuruluşları, resmi teknik dokümantasyon, müze/arşiv koleksiyonları ve akademik/mesleki güvenilir kaynaklardadır. Koşula bağlı teknik değerler evrensel kural gibi sunulmaz.

NCBI BookshelfVisual pathways and perceptionKaynağa git ↗
APA DictionaryPerception and attention terminologyKaynağa git ↗
W3CWCAG 2.2Kaynağa git ↗
Nielsen Norman GroupAttention and visual hierarchy researchKaynağa git ↗