Persepsi dan RepresentasiPersepsi dan Representasi
Restyandito, S.Kom, MSISRestyandito, S.Kom, MSIS
PERSEPSIPERSEPSI
A vital foundation for interactive-systemsdesigner is an understanding of thecognitive and perceptual abilities of theusers A vital foundation for interactive-systemsdesigner is an understanding of thecognitive and perceptual abilities of theusers (Kantowitz and Sorkin, 1983; Wickens, 1992)
The human ability to interpret sensoryinput rapidly and to initiate complexactions makes modern computer systemspossible The human ability to interpret sensoryinput rapidly and to initiate complexactions makes modern computer systemspossible (Shneiderman, 2004)
Tanggapan panca indraTanggapan panca indra
Penglihatan: benda, ukuran, warna, bentuk,kepadatan, tekstur
Pendengaran: nada, warna nada, pola titi nada,intensitas, frekuensi
Perasa: merasakan tekanan, suhu
Penciuman: membedakan bau
Pencecap: membedakan rasa manis/kecut/pahit/asin
Tanggapan panca indraTanggapan panca indra
Arousal and vigilance
Fatigue
Perceptual (mental) load
Knowledge of results
Monotomy and boredom
Sensory deprivation
Sleep deprivation
Anxiety and fear
Isolation
Aging
Drugs and alcohol
Ciradian rhytms
Factors affecting perceptual and motor performance
(Journal Ergonomics Abstracts)
Ecological TheoryEcological Theory
Ecological theory of perception
“Actively explore the objects in the environmentby seeing, touching, listening, smelling etc….”
Affordance
Visibility
Hal-hal apa yang bisa dimanipulasi
Apa yang terjadi jika suatu obyek dimanipulasi
Ecological TheoryEcological Theory
AffordanceAffordance
Ecological TheoryEcological Theory
AffordanceAffordance
Ecological TheoryEcological Theory
AffordanceAffordance
VisibilityVisibility
Ecological TheoryEcological Theory
VisibilityVisibility
Ecological TheoryEcological Theory
Constructivist TheoryConstructivist Theory
Interpretasi menggunakan
– world knowledge
– konteks
– aturan organisasi
Pemrosesan representasi untuk dicocokkan
dengan model
Jika persepsi yang diterima tidak sesuaidengan pengalaman – karena representasiyang tidak akurat – maka dapat terjadiJika persepsi yang diterima tidak sesuaidengan pengalaman – karena representasiyang tidak akurat – maka dapat terjadi
‘ mismatch ’ ‘ mismatch ’
Salah satu contoh ‘ mismatch ‘ adalah ilusivisualSalah satu contoh ‘ mismatch ‘ adalah ilusivisual
Visual IllusionVisual Illusion
Constructivist TheoryConstructivist Theory
Perspective Illusion
Simultaneous Contrast
Imposible Figure
Visual IllusionVisual Illusion
Constructivist TheoryConstructivist Theory
Visual IllusionVisual Illusion
Huruf-huruf di atas terletak dalam satu bidang. Tetapi warnamemberikan ilusi bahwa huruf Z tersebut terletak di bidangyang berbeda dan pasangan huruf yang satu lebih dekat daripasangan lainnya.
Perceptual OrganizationPerceptual Organization
Manusia membuat penalaran terhadap dunia visual denganmengelompokkan obyek-obyek menjadi satu atau melihatnyasebagai satu kesatuan …
• Proximity
• Similarity
• Closure
• Continuity
• Symmetry
Gestalt Principles
obyek yg berdekatan: organisasi spatial yang memberikaninterpretasi keterhubungan
obyek dg kesamaan bentuk / warna: menghindariinterpretasi yg ambigu dg membuat obyek-obyek ygberhubungan tampak mirip dan yg tidak berhubungantidak mirip.
missing parts filled in : manusia selalu mencoba untuk
melengkapi suatu pola
garis yg tampak kontinyu
Elemen simtris tampak sebagai figur yg koheren
Perceptual OrganizationPerceptual Organization
Gestalt Principles
Perceptual OrganizationPerceptual Organization
Gestalt Principles
Features and Objects in Visual ProcessingFeatures and Objects in Visual Processing
Anne Treisman
POP OUT BOUNDARIESPOP OUT BOUNDARIES
- Orientasi garis
- Orientasi bentuk
- Orientasi warna
Batas-batas yang menonjol dari apa yg dilihatmanusia biasanya menampakkan property ygsederhana pada tahap visual processing:
Features and Objects in Visual ProcessingFeatures and Objects in Visual Processing
Anne Treisman
Illusory conjuctions arise at a stage of visualprocessing that precedes semantic access toknowledge of familiar objects.
The conjuctions seem to be generatedpreattentively from the sensory data, bottom-upand not to be influenced by top-downconstrains.
ILLUSORY CONJUNCTIONILLUSORY CONJUNCTION
REPRESENTASIREPRESENTASI
Representasi MentalRepresentasi Mental
Hubungan yang sistematis antara beberapaelemen dari taget domain dan beberapaelemen dari representasi model domain.Hubungan yang sistematis antara beberapaelemen dari taget domain dan beberapaelemen dari representasi model domain.
Representasi MentalRepresentasi Mental
memiliki target domainmemiliki target domain
memiliki modelling domainmemiliki modelling domain
subset dari struktur target domain yang relevansubset dari struktur target domain yang relevan
subset dari struktur modelling domain yang relevansubset dari struktur modelling domain yang relevan
hubungan sistematis yang terjadi antara kedua subset diatashubungan sistematis yang terjadi antara kedua subset diatas
Menurut Palmer (1978) suatu sistem representasionalharus memenuhi 5 kondisi berikut:Menurut Palmer (1978) suatu sistem representasionalharus memenuhi 5 kondisi berikut:
ContohContoh
Target domain
(real world)
Model domain
(representation)
target terdiri dari 3 kotak.target terdiri dari 3 kotak.
model terdiri dari 3 kumpulan ‘titik’.model terdiri dari 3 kumpulan ‘titik’.
struktur yang relevan dari target adalah tinggi kotakstruktur yang relevan dari target adalah tinggi kotak
struktur yang relevan dari model adalah jumlah ‘titik’struktur yang relevan dari model adalah jumlah ‘titik’
hubungan sistematis antara target dengan model yaitujumlah titik merepresentasikan tinggi kotakhubungan sistematis antara target dengan model yaitujumlah titik merepresentasikan tinggi kotak
Representasi MentalRepresentasi Mental
Model AModel A
Target domain
(real world)
Model domain
(representation)
Model BModel B
Target domain
(real world)
Model domain
(representation)
A C B
Model CModel C
Target domain
(real world)
Model domain
(representation)
Representasi GrafisRepresentasi Grafis
Secara ideal, informasi yang ditampilkan dilayar sebaiknya semirip mungkin denganobyek yang ada pada dunia nyata.Secara ideal, informasi yang ditampilkan dilayar sebaiknya semirip mungkin denganobyek yang ada pada dunia nyata.
Representasi GrafisRepresentasi Grafis
ukuran ukuran
interposisi interposisi
Graphical ModelingGraphical Modeling
Perceptual Depth Cue
Representasi GrafisRepresentasi Grafis
contrast, clarity, brightnes contrast, clarity, brightnes
Graphical ModelingGraphical Modeling
Representasi GrafisRepresentasi Grafis
bayangan bayangan
Graphical ModelingGraphical Modeling
Representasi GrafisRepresentasi Grafis
texture texture
Graphical ModelingGraphical Modeling
Representasi GrafisRepresentasi Grafis
Saat seseorang bergerak, obyek yang dilihatnyabergerak dengan kecepatan berbedaSaat seseorang bergerak, obyek yang dilihatnyabergerak dengan kecepatan berbeda
Graphical ModelingGraphical Modeling
Motion Parallax
Representasi GrafisRepresentasi Grafis
Disebut juga binocular depth cues, obyek yangditampilkan dari 2 sudut yg berbedaDisebut juga binocular depth cues, obyek yangditampilkan dari 2 sudut yg berbeda
Graphical ModelingGraphical Modeling
Stereoscopic
Representasi GrafisRepresentasi Grafis
Graphical CodingGraphical Coding
Teknik pengkodean grafik untuk merepresentasikanproses sistem yang abstrak, obyek data, dll.Teknik pengkodean grafik untuk merepresentasikanproses sistem yang abstrak, obyek data, dll.
Penggunaan grafik dapat menunjukkan abstraksiinformasi dari data kuantitatif.Penggunaan grafik dapat menunjukkan abstraksiinformasi dari data kuantitatif.
• Arbitrary mappings
tidak ada hubungan khusus antara simbol
dengan obyek , hanya berdasarkan
‘kesepakatan’
Representasi GrafisRepresentasi Grafis
Graphical CodingGraphical Coding
• Nonarbitrary mappings
(Direct symbol mapping), ada hubungan
antara simbol dg obyek yg direpresentasikan
– ukuran gambar besar file
– lebar garis tebalnya garis huruf
– bar chart trends suatu data numerik
Representasi GrafisRepresentasi Grafis
Graphical CodingGraphical Coding
• Iconic (resemblance)
gambar yang dibunakan untuk ‘meniru’
suatu obyek yang ada pada dunia nyata
- keranjang sampah : tempat menghapus file
- map / folder : file
Representasi GrafisRepresentasi Grafis
Graphical CodingGraphical Coding
Representasi GrafisRepresentasi Grafis
Representasi grafis memudahkan persepsi:Representasi grafis memudahkan persepsi:
1. Hubungan antara data yang multidimensional1. Hubungan antara data yang multidimensional
2. Trend data yang selalu berubah2. Trend data yang selalu berubah
Graphical CodingGraphical Coding
Representasi GrafisRepresentasi Grafis
Graphical CodingGraphical Coding
Representasi GrafisRepresentasi Grafis
Colour CodingColour Coding
gunakan warna untuk membedakan layers gunakan warna untuk membedakan layers
gunakan warna kalem / gelap untuk back gunakan warna kalem / gelap untuk back
ground, warna terang untuk foreground ground, warna terang untuk foreground
Segmentasi
Representasi GrafisRepresentasi Grafis
Colour CodingColour Coding
warna merah tampak berada di satu bidang
warna biru tampak berada di bidang yg lain
warna merah tampak berada di satu bidang
warna biru tampak berada di bidang yg lain
warna merah tampak berada di satu bidang
warna biru tampak berada di bidang yg lain
Segmentasi
Representasi GrafisRepresentasi Grafis
Colour CodingColour Coding
Segmentasi
Representasi GrafisRepresentasi Grafis
Colour CodingColour Coding
kadang warna digunakan utk memperkuat kadang warna digunakan utk memperkuat
representasi (redundant coding) representasi (redundant coding)
hindari penggunaan warna yg berlebihan hindari penggunaan warna yg berlebihan
Penggunaan warna
Colour PolutionColour Polution
Colour PolutionColour Polution
Psikologi WarnaPsikologi Warna
Kombinasi warna terbaik
Psikologi WarnaPsikologi Warna
Kombinasi warna terjelek
Representasi GrafisRepresentasi Grafis
Colour CodingColour Coding
gunakan warna untuk menonjolkan hal – gunakan warna untuk menonjolkan hal –
hal yang penting hal yang penting
mis: Windows yang aktif
Pencarian
Representasi GrafisRepresentasi Grafis
Colour CodingColour Coding
Mediaelektronikadalahcaramengirimkanpesanmenggunakanbentuk/secaraelektronik.Bentukelektronikmencakupbeberapateknologikomunikasimasasepertiradio,film,televisi,CD-ROMdanInternet.Karakteristikdarimediaelektronikiniberupabentuknaratifyangbertolakbelakangdenganbudayacetak(massprint),budayamembacabukudanpenelitian
Pencarian
Representasi GrafisRepresentasi Grafis
Colour CodingColour Coding
Mediaelektronikadalahcaramengirimkanpesanmenggunakanbentuk/secaraelektronik.Bentukelektronikmencakupbeberapateknologikomunikasimasasepertiradio,film,televisi,CD-ROMdanInternet.Karakteristikdarimediaelektronikiniberupabentuknaratifyangbertolakbelakangdenganbudayacetak(massprint),budayamembacabukudanpenelitian
Pencarian
Coding MethodCoding Method
Number ofcodesNumber ofcodes
CommentsComments
Alpha numericsAlpha numerics
UnlimitedUnlimited
Highly versatile. Meaning can be self evident. Locationtime may be longer than for graphic coding
ShapesShapes
10 – 2010 – 20
Very effective if code matches object or operationrepresented
ColourColour
4 – 114 – 11
Attractive and efficient. Exessive use confusing. Limitedvalue for colour-blind.
Line angleLine angle
8 – 118 – 11
Good in special cases, for example: wind direction
Line lengthLine length
3 – 43 – 4
Good. Can clutter display if many codes displayed
Line widthLine width
2 – 32 – 3
Good
Line styleLine style
5 – 95 – 9
Good
Metode PengkodeanMetode Pengkodean
Maquire, 1985Maquire, 1985
Coding MethodCoding Method
Number of codesNumber of codes
CommentsComments
Object sizeObject size
3 – 53 – 5
Fair. Can take up considerable space. Location timelonger than for shape and colour.
BrightnessBrightness
2 – 42 – 4
Can be fatiquing, especially if screen contrast is poor.
BlinkBlink
2 – 42 – 4
Good for getting attention but should be suppressibleafterwards. Annoying if overused. Limit to small fields.
Reverse videoReverse video
No dataNo data
Effective for making data stand out. If large area is inreverse video, flickers is more easily perceived
UnderliningUnderlining
No dataNo data
Useful but can redce text legibility
combinationcombination
unlimitedunlimited
Can reinforce coding but complex combination can beconfusing
Metode PengkodeanMetode Pengkodean
Maquire, 1985Maquire, 1985
What, bentuk penampilan, struktur fisik dan hubungan /organisasi antar bagian secara keseluruhan.
How, gerakan fisik, aliran sistem, proses reaksi yang terjaditerhadap suatu kejadian.
How much, ukuran fisik, kuantitas numerik, kecenderungannaik/turun dan pengelompkkan bagian-bagian.
Where, lokai obyek, posisi dibanding obyek lain danseterusnya.
Komunikasi Visual Desain GrafisKomunikasi Visual Desain Grafis
Suitability to TaskSuitability to Task
Representasi yang berbeda mendukung persepsiyang berbeda untuk tugas kognitif yang berbedapula.
ReferensiReferensi
Preece, Rogers, Sharp, 2002, Interaction Design: BeyondHuman-Computer Interaction, John Wiley & Sons, Inc.Preece, Rogers, Sharp, 2002, Interaction Design: BeyondHuman-Computer Interaction, John Wiley & Sons, Inc.
( hal 76-78 )( hal 76-78 )
Preece, Rogers, Sharp, 1996, IHuman-ComputerInteraction, Addison-Wesley.Preece, Rogers, Sharp, 1996, IHuman-ComputerInteraction, Addison-Wesley.
( hal 75-98 )( hal 75-98 )
Barsalou, 1992, Cognitive Psychology: An Overview forCognitive Scientist, LEA Publisher.Barsalou, 1992, Cognitive Psychology: An Overview forCognitive Scientist, LEA Publisher.
( hal 52-59 )( hal 52-59 )
The EndThe End