TI1143 Interaksi Manusia dan Komputer 4-Persepsi dan Representasi

Persepsi dan Representasi

PERSEPSI

PERSEPSI

A vital foundation for interactive-systems Tanggapan panca indra

designer is an understanding of the
cognitive and perceptual abilities of the
users (Kantowitz and Sorkin, 1983; Wickens, 1992) Penglihatan: benda, ukuran, warna, bentuk,
kepadatan, tekstur
The human ability to interpret sensory Pendengaran: nada, warna nada, pola titi nada,
input rapidly and to initiate complex intensitas, frekuensi
Perasa: merasakan tekanan, suhu
actions makes modern computer systems Penciuman: membedakan bau
possible (Shneiderman, 2004) Pencecap: membedakan rasa manis/kecut/
pahit/asin

1
TI1143 Interaksi Manusia dan Komputer 4-Persepsi dan Representasi

Tanggapan panca indra Ecological Theory

Factors affecting perceptual and motor performance Ecological theory of perception
Arousal and vigilance Actively explore the objects in the environment
Fatigue
Perceptual (mental) load by seeing, touching, listening, smelling etc.
Knowledge of results
Monotomy and boredom
Sensory deprivation
Sleep deprivation
Anxiety and fear
Isolation
Affordance
Aging
Drugs and alcohol
Visibility
Ciradian rhytms (Journal Ergonomics Abstracts)

Ecological Theory Ecological Theory

Affordance Affordance
Hal-hal apa yang bisa dimanipulasi
Apa yang terjadi jika suatu obyek dimanipulasi

2
TI1143 Interaksi Manusia dan Komputer 4-Persepsi dan Representasi

Ecological Theory Ecological Theory

Affordance Visibility

Ecological Theory Constructivist Theory

Visibility Interpretasi menggunakan
world knowledge
konteks
aturan organisasi

Pemrosesan representasi untuk dicocokkan

dengan model

3
TI1143 Interaksi Manusia dan Komputer 4-Persepsi dan Representasi

Constructivist Theory Constructivist Theory

Visual Illusion Visual Illusion
Jika persepsi yang diterima tidak sesuai
dengan pengalaman karena representasi
yang tidak akurat maka dapat terjadi
mismatch
Perspective Illusion Imposible Figure

Salah satu contoh mismatch adalah ilusi

visual
Simultaneous Contrast

Visual Illusion Perceptual Organization

Manusia membuat penalaran terhadap dunia visual dengan
mengelompokkan obyek-obyek menjadi satu atau melihatnya
sebagai satu kesatuan

obyek yg berdekatan: organisasi spatial yang memberikan

Proximity interpretasi keterhubungan

obyek dg kesamaan bentuk / warna: menghindari

Similarity interpretasi yg ambigu dg membuat obyek-obyek yg
berhubungan tampak mirip dan yg tidak berhubungan
tidak mirip.
Closure missing parts filled in : manusia selalu mencoba untuk
melengkapi suatu pola
Huruf-huruf di atas terletak dalam satu bidang. Tetapi warna
Continuity garis yg tampak kontinyu
memberikan ilusi bahwa huruf Z tersebut terletak di bidang
yang berbeda dan pasangan huruf yang satu lebih dekat dari Elemen simtris tampak sebagai figur yg koheren
pasangan lainnya.
Symmetry
Gestalt Principles

4
TI1143 Interaksi Manusia dan Komputer 4-Persepsi dan Representasi

Perceptual Organization Perceptual Organization

Gestalt Principles Gestalt Principles

Features and Objects in Visual Processing Features and Objects in Visual Processing
POP OUT BOUNDARIES ILLUSORY CONJUNCTION

Batas-batas yang menonjol dari apa yg dilihat
manusia biasanya menampakkan property yg
sederhana pada tahap visual processing:
- Orientasi garis
- Orientasi bentuk
- Orientasi warna
Illusory conjuctions arise at a stage of visual
processing that precedes semantic access to
knowledge of familiar objects.
The conjuctions seem to be generated
preattentively from the sensory data, bottom-up
and not to be influenced by top-down
constrains.

Anne Treisman Anne Treisman

5
TI1143 Interaksi Manusia dan Komputer 4-Persepsi dan Representasi

Representasi Mental

REPRESENTASI Hubungan yang sistematis antara beberapa

elemen dari taget domain dan beberapa
elemen dari representasi model domain.

REPRESENTASI

Contoh
Representasi Mental
Menurut Palmer (1978) suatu sistem representasional
harus memenuhi 5 kondisi berikut:
memiliki target domain
memiliki modelling domain
subset dari struktur target domain yang relevan
subset dari struktur modelling domain yang relevan
hubungan sistematis yang terjadi antara kedua subset di
atas Target domain Model domain
(real world) (representation)

6
TI1143 Interaksi Manusia dan Komputer 4-Persepsi dan Representasi

Model A
Representasi Mental
target terdiri dari 3 kotak.
model terdiri dari 3 kumpulan titik
titik.
struktur yang relevan dari target adalah tinggi kotak
struktur yang relevan dari model adalah jumlah titik
titik
hubungan sistematis antara target dengan model yaitu
jumlah titik merepresentasikan tinggi kotak

Target domain Model domain

(real world) (representation)

Model B Model C

A C B

Target domain Model domain Target domain Model domain

(real world) (representation) (real world) (representation)

7
TI1143 Interaksi Manusia dan Komputer 4-Persepsi dan Representasi

Representasi Grafis Representasi Grafis

Graphical Modeling
Perceptual Depth Cue
Secara ideal, informasi yang ditampilkan di ukuran
layar sebaiknya semirip mungkin dengan
obyek yang ada pada dunia nyata.

interposisi

Representasi Grafis Representasi Grafis

Graphical Modeling Graphical Modeling

contrast, clarity, brightnes bayangan

8
TI1143 Interaksi Manusia dan Komputer 4-Persepsi dan Representasi

Representasi Grafis Representasi Grafis

Graphical Modeling Graphical Modeling
Motion Parallax
Saat seseorang bergerak, obyek yang dilihatnya
bergerak dengan kecepatan berbeda

texture

Representasi Grafis Representasi Grafis

Graphical Modeling
Stereoscopic
Disebut juga binocular depth cues, obyek yang
ditampilkan dari 2 sudut yg berbeda
Graphical Coding
Teknik pengkodean grafik untuk merepresentasikan
proses sistem yang abstrak, obyek data, dll.
Penggunaan grafik dapat menunjukkan abstraksi
informasi dari data kuantitatif.

9
TI1143 Interaksi Manusia dan Komputer 4-Persepsi dan Representasi

Representasi Grafis Representasi Grafis

Graphical Coding Graphical Coding
Arbitrary mappings Nonarbitrary mappings
tidak ada hubungan khusus antara simbol (Direct symbol mapping), ada hubungan
dengan obyek , hanya berdasarkan antara simbol dg obyek yg direpresentasikan
kesepakatan ukuran gambar besar file
lebar garis tebalnya garis huruf
bar chart trends suatu data numerik

Representasi Grafis Representasi Grafis

Graphical Coding Graphical Coding
Iconic (resemblance)
gambar yang dibunakan untuk meniru Representasi grafis memudahkan persepsi:
suatu obyek yang ada pada dunia nyata 1. Hubungan antara data yang multidimensional
- keranjang sampah : tempat menghapus file 2. Trend data yang selalu berubah
- map / folder : file

10
TI1143 Interaksi Manusia dan Komputer 4-Persepsi dan Representasi

Representasi Grafis Representasi Grafis

Graphical Coding Colour Coding
Segmentasi
gunakan warna untuk membedakan layers
gunakan warna kalem / gelap untuk back

ground, warna terang untuk foreground

Representasi Grafis Representasi Grafis

Colour Coding Colour Coding
Segmentasi Segmentasi
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

11
TI1143 Interaksi Manusia dan Komputer 4-Persepsi dan Representasi

Representasi Grafis Colour Polution

Colour Coding
Penggunaan warna
kadang warna digunakan utk memperkuat
representasi (redundant coding)
hindari penggunaan warna yg berlebihan

Colour Polution Psikologi Warna

Kombinasi warna terbaik

Background Garis dan Teks (Normal) Garis dan Teks (Tebal)

Putih Biru(94%), Hitam(63%), Merah(25%) Hitam(69%), Biru(63%) Merah(31%)
Hitam Putih(75%), Kuning(63%) Kuning(69%), Putih(59%), Hijau(25%)
Merah Kuning(75%), Putih(56%), Hitam(44%) Hitam(50%), Kuning(44%),
Putih(44%), Cyan(31%)
Hijau Hitam(100%), Biru(56%), Merah(25%) Hitam(69%), Merah(63%), Biru(31%)
Biru Putih(81%), Kuning(50%), Cyan(25%) Kuning(38%), Magenta(31%),
Hitam(31%), Cyan(31%), Putih(25%)
Cyan Biru(69%), Hitam(56%), Merah(37%) Merah(56%), Biru(50%), Hitam(44%),
Magenta(25%)
Magenta Hitam(63%), Putih(56%), Biru(44%) Biru(50%), Hitam(44%), Kuning(25%)
Kuning Merah(63%), Biru(63%), Hitam(56%) Merah(75%), Biru(63%), Hitam(50%)

12
TI1143 Interaksi Manusia dan Komputer 4-Persepsi dan Representasi

Psikologi Warna Representasi Grafis

Colour Coding
Kombinasi warna terjelek
Pencarian
Background Garis dan Teks (Normal) Garis dan Teks (Tebal) gunakan warna untuk menonjolkan hal
Putih Kuning(100%), Cyan(94%) Kuning(94%), Cyan(75%)
Hitam Biru(87%), Merah(44%),
Magenta(25%)
Biru(81%), Magenta(31%)
hal yang penting
Merah Magenta(81%), Biru(44%), Hijau dan Magenta(69%), Biru(50%), Hijau(37%)
Cyan(25%) Cyan(25%) mis: Windows yang aktif
Hijau Cyan(81%), Magenta(50%), Cyan(81%), Magenta dan
Kuning(37%) Kuning(44%)
Biru Hijau(62%), Merah dan Hitam(37%) Hijau(44%), Merah dan Hitam (31%)
Cyan Hitam(81%), Kuning(75%), Putih(31%) Kuning(69%), Hijau(62%), Putih(56%)
Magenta Hijau(75%), Merah(56%), Cyan(44%) Cyan(81%), Hijau(69%), Merah(44%)
Kuning Putih dan Cyan(81%) Putih(81%), Cyan(56%), Hijau(25%)

Representasi Grafis Representasi Grafis

Colour Coding
Pencarian
Mediaelektronikadalahcaramengirimkanpesanmenggunakan
bentuk/secaraelektronik.Bentukelektronikmencakupbeberapa
teknologikomunikasimasasepertiradio,film,televisi,CD-ROM
danInternet.Karakteristikdarimediaelektronikiniberupabentuk
naratifyangbertolakbelakangdenganbudayacetak(massprint),
budayamembacabukudanpenelitian
Colour Coding
Pencarian
Mediaelektronikadalahcaramengirimkanpesanmenggunakan
bentuk/secaraelektronik.Bentukelektronikmencakupbeberapa
teknologikomunikasimasasepertiradio,film,televisi,CD-ROM
danInternet.Karakteristikdarimediaelektronikiniberupabentuk
naratifyangbertolakbelakangdenganbudayacetak(massprint),
budayamembacabukudanpenelitian

13
TI1143 Interaksi Manusia dan Komputer 4-Persepsi dan Representasi

Metode Pengkodean Metode Pengkodean

Maquire, 1985 Maquire, 1985
Number of
Coding Method Comments Coding Method Number of codes Comments
codes
Highly versatile. Meaning can be self evident. Location Fair. Can take up considerable space. Location time
Alpha numerics Unlimited Object size 35
time may be longer than for graphic coding longer than for shape and colour.
Very effective if code matches object or operation Can be fatiquing, especially if screen contrast is poor.
Shapes 10 20 Brightness 24
represented
Attractive and efficient. Exessive use confusing. Limited Good for getting attention but should be suppressible
Colour 4 11 Blink 24
value for colour-blind. afterwards. Annoying if overused. Limit to small fields.
Good in special cases, for example: wind direction Effective for making data stand out. If large area is in
Line angle 8 11 Reverse video No data
reverse video, flickers is more easily perceived
Good. Can clutter display if many codes displayed Useful but can redce text legibility
Line length 34 Underlining No data

Good Can reinforce coding but complex combination can be

Line width 23 combination unlimited
confusing
Good
Line style 59

Komunikasi Visual Desain Grafis Suitability to Task

What, bentuk penampilan, struktur fisik dan hubungan /

organisasi antar bagian secara keseluruhan.
How, gerakan fisik, aliran sistem, proses reaksi yang terjadi Representasi yang berbeda mendukung persepsi
terhadap suatu kejadian. yang berbeda untuk tugas kognitif yang berbeda
pula.
How much, ukuran fisik, kuantitas numerik, kecenderungan
naik/turun dan pengelompkkan bagian-bagian.
Where, lokai obyek, posisi dibanding obyek lain dan
seterusnya.

14
TI1143 Interaksi Manusia dan Komputer 4-Persepsi dan Representasi

Referensi

Preece, Rogers, Sharp, 2002, Interaction Design: Beyond

Human-
Human-Computer Interaction,
Interaction, John Wiley & Sons, Inc.
( hal 76-
76-78 )
Preece, Rogers, Sharp, 1996, IHuman-
IHuman-Computer
Interaction,
Interaction, Addison-
Addison-Wesley.
( hal 75-
75-98 )
Barsalou, 1992, Cognitive Psychology: An Overview for
Cognitive Scientist,
Scientist, LEA Publisher.
( hal 52-
52-59 )

15