Upload presentasi
Presentasi sedang didownload. Silahkan tunggu
1
Persepsi dan Representasi
Restyandito, S.Kom, MSIS
2
PERSEPSI
3
A vital foundation for interactive-systems designer is an understanding of the cognitive and perceptual abilities of the users (Kantowitz and Sorkin, 1983; Wickens, 1992) The human ability to interpret sensory input rapidly and to initiate complex actions makes modern computer systems possible (Shneiderman, 2004)
4
Tanggapan 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
5
Tanggapan panca indra Factors affecting perceptual and motor performance 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 (Journal Ergonomics Abstracts)
6
Ecological Theory Ecological theory of perception
“Actively explore the objects in the environment by seeing, touching, listening, smelling etc….” ‘ecological’ thinking that sees events and activities as offering affordances or opportunities for use and interaction that depend on who is involved. (Cameron2002:5) Affordance Visibility
7
Ecological Theory Affordance Hal-hal apa yang bisa dimanipulasi
Apa yang terjadi jika suatu obyek dimanipulasi
8
Ecological Theory Affordance
9
Ecological Theory Affordance
10
Ecological Theory Visibility
11
Ecological Theory Visibility
12
Constructivist Theory
Interpretasi menggunakan – world knowledge – konteks – aturan organisasi Constructivism is a philosophy of learning founded on the premise that, by reflecting on our experiences, we construct our own understanding of the world we live in. Each of us generates our own "rules" and "mental models," which we use to make sense of our experiences. Learning, therefore, is simply the process of adjusting our mental models to accommodate new experiences. Pemrosesan representasi untuk dicocokkan dengan model
13
Constructivist Theory Visual Illusion
Jika persepsi yang diterima tidak sesuai dengan pengalaman – karena representasi yang tidak akurat – maka dapat terjadi ‘ mismatch ’ Salah satu contoh ‘ mismatch ‘ adalah ilusi visual
14
Constructivist Theory Visual Illusion
Perspective Illusion Imposible Figure Simultaneous Contrast
15
Visual Illusion Some people tend to see shorter wavelength colors (greens, blues, violets, etc) as further way than equally bright longer wavelength colors (yellows, oranges, reds). Brighter colors tend to be seen as closer. Huruf-huruf di atas terletak dalam satu bidang. Tetapi warna memberikan ilusi bahwa huruf Z tersebut terletak di bidang yang berbeda dan pasangan huruf yang satu lebih dekat dari pasangan lainnya.
16
Perceptual Organization
Manusia membuat penalaran terhadap dunia visual dengan mengelompokkan obyek-obyek menjadi satu atau melihatnya sebagai satu kesatuan … • Proximity • Similarity • Closure • Continuity • Symmetry obyek yg berdekatan: organisasi spatial yang memberikan interpretasi keterhubungan obyek dg kesamaan bentuk / warna: menghindari interpretasi yg ambigu dg membuat obyek-obyek yg berhubungan tampak mirip dan yg tidak berhubungan tidak mirip. • Proximity: objects close together: ensure that spatial organisation leads to appropriate interpretation of 'relatedness‘ • Similarity: objects of same shape, color : avoid ambiguous interpretation by making related things look similar and unrelated things look different • Closure: missing parts filled in : people look to complete patterns • Continuity: lines seen as continuous : ensure that visual sequences really are sequences. • Symmetry: symmetric elements perceived as coherent figures : ensure that perceived symmetry is actual eg 'Add' and 'Delete' missing parts filled in : manusia selalu mencoba untuk melengkapi suatu pola garis yg tampak kontinyu Elemen simtris tampak sebagai figur yg koheren Gestalt Principles
17
Perceptual Organization
proximity Gestalt Principles
18
Perceptual Organization
similarity Gestalt Principles
19
POP OUT BOUNDARIES Features and Objects in Visual Processing
Batas-batas yang menonjol dari apa yg dilihat manusia biasanya menampakkan property yg sederhana pada tahap visual processing: - Orientasi garis - Orientasi bentuk - Orientasi warna Batas-batas yang menonjol dari apa yg dilihat manusia biasanya menampakkan property yg sederhana pada tahap visual processing: Orientasi garis Orientasi bentuk Orientasi warna Anne Treisman
20
ILLUSORY CONJUNCTION Features and Objects in Visual Processing
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. Batas-batas yang menonjol dari apa yg dilihat manusia biasanya menampakkan property yg sederhana pada tahap visual processing: Orientasi garis Orientasi bentuk Orientasi warna Anne Treisman
21
REPRESENTASI
22
Representasi Mental Hubungan yang sistematis antara beberapa elemen dari taget domain dan beberapa elemen dari representasi model domain.
23
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
24
Contoh Target domain (real world) Model domain (representation)
25
Representasi Mental target terdiri dari 3 kotak.
model terdiri dari 3 kumpulan ‘titik’. struktur yang relevan dari target adalah tinggi kotak struktur yang relevan dari model adalah jumlah ‘titik’ hubungan sistematis antara target dengan model yaitu jumlah titik merepresentasikan tinggi kotak
26
Model A Target domain (real world) Model domain (representation)
27
Model B A C B Target domain (real world) Model domain (representation)
28
Model C Target domain (real world) Model domain (representation)
29
Representasi Grafis Secara ideal, informasi yang ditampilkan di layar sebaiknya semirip mungkin dengan obyek yang ada pada dunia nyata.
30
Representasi Grafis Graphical Modeling ukuran interposisi
Perceptual Depth Cue ukuran interposisi
31
Representasi Grafis Graphical Modeling contrast, clarity, brightnes
32
Representasi Grafis Graphical Modeling bayangan
33
Representasi Grafis Graphical Modeling texture
34
Representasi Grafis Graphical Modeling Motion Parallax
Saat seseorang bergerak, obyek yang dilihatnya bergerak dengan kecepatan berbeda
35
Representasi Grafis Graphical Modeling Stereoscopic
Disebut juga binocular depth cues, obyek yang ditampilkan dari 2 sudut yg berbeda
36
Representasi Grafis Graphical Coding
Teknik pengkodean grafik untuk merepresentasikan proses sistem yang abstrak, obyek data, dll. Penggunaan grafik dapat menunjukkan abstraksi informasi dari data kuantitatif.
37
Representasi Grafis Graphical Coding • Arbitrary mappings
tidak ada hubungan khusus antara simbol dengan obyek , hanya berdasarkan ‘kesepakatan’ Arbitrary Mappings Imagine trying to drive a car by using just a computer keyboard. The four arrow keys are used for steering, the space bar for braking, and the return key for accelerating. To indicate left you need to press the F1 key and to indicate right the F2 key. To sound your horn you need to press the F3 key. To switch the headlights on you need to use the F4 key and, to switch the windscreen wipers on, the F5 key. Now imagine as you are driving along a road a ball is suddenly kicked in front of you. What would you do? Bash the arrow keys and the space bar madly while pressing the F4 key? How would you rate your chances of missing the ball? Most of us would balk at the very idea of driving a car this way. Many early video games, however, were designed along these lines: the user had to press an arbitrary combination of function keys to drive or navigate through the game.
38
Representasi Grafis Graphical 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
39
Representasi Grafis Graphical Coding • Iconic (resemblance)
gambar yang dibunakan untuk ‘meniru’ suatu obyek yang ada pada dunia nyata - keranjang sampah : tempat menghapus file - map / folder : file Sifat-sifat icons: Mengurangi kompleksitas sistem Mudah penggunaan/dipelajari Resoluis dan ukuran terbatas
40
Representasi Grafis Graphical Coding
Representasi grafis memudahkan persepsi: 1. Hubungan antara data yang multidimensional 2. Trend data yang selalu berubah
41
Representasi Grafis Graphical Coding
42
Representasi Grafis Colour Coding
Segmentasi gunakan warna untuk membedakan layers gunakan warna kalem / gelap untuk back ground, warna terang untuk foreground
43
Representasi Grafis Colour Coding
Segmentasi warna merah tampak berada di satu bidang warna biru tampak berada di bidang yg lain
44
Representasi Grafis Colour Coding Segmentasi
45
Representasi Grafis Colour Coding
Penggunaan warna kadang warna digunakan utk memperkuat representasi (redundant coding) hindari penggunaan warna yg berlebihan
46
Colour Polution
47
Colour Polution
48
Psikologi Warna Kombinasi warna terbaik
49
Psikologi Warna Kombinasi warna terjelek
50
Representasi Grafis Colour Coding
Pencarian gunakan warna untuk menonjolkan hal – hal yang penting mis: Windows yang aktif
51
Representasi Grafis Colour Coding Pencarian
Mediaelektronikadalahcaramengirimkanpesanmenggunakan bentuk/secaraelektronik.Bentukelektronikmencakupbeberapa teknologikomunikasimasasepertiradio,film,televisi,CD-ROM danInternet.Karakteristikdarimediaelektronikiniberupabentuk naratifyangbertolakbelakangdenganbudayacetak(massprint), budayamembacabukudanpenelitian
52
Representasi Grafis Colour Coding Pencarian
Mediaelektronikadalahcaramengirimkanpesanmenggunakan bentuk/secaraelektronik.Bentukelektronikmencakupbeberapa teknologikomunikasimasasepertiradio,film,televisi,CD-ROM danInternet.Karakteristikdarimediaelektronikiniberupabentuk naratifyangbertolakbelakangdenganbudayacetak(massprint), budayamembacabukudanpenelitian
53
Metode Pengkodean Maquire, 1985 Coding Method Number of codes Comments
Alpha numerics Unlimited Highly versatile. Meaning can be self evident. Location time may be longer than for graphic coding Shapes 10 – 20 Very effective if code matches object or operation represented Colour 4 – 11 Attractive and efficient. Exessive use confusing. Limited value for colour-blind. Line angle 8 – 11 Good in special cases, for example: wind direction Line length 3 – 4 Good. Can clutter display if many codes displayed Line width 2 – 3 Good Line style 5 – 9
54
Metode Pengkodean Maquire, 1985 Coding Method Number of codes Comments
Object size 3 – 5 Fair. Can take up considerable space. Location time longer than for shape and colour. Brightness 2 – 4 Can be fatiquing, especially if screen contrast is poor. Blink Good for getting attention but should be suppressible afterwards. Annoying if overused. Limit to small fields. Reverse video No data Effective for making data stand out. If large area is in reverse video, flickers is more easily perceived Underlining Useful but can redce text legibility combination unlimited Can reinforce coding but complex combination can be confusing
55
Komunikasi Visual Desain Grafis
What, bentuk penampilan, struktur fisik dan hubungan / organisasi antar bagian secara keseluruhan. How, gerakan fisik, aliran sistem, proses reaksi yang terjadi terhadap suatu kejadian. How much, ukuran fisik, kuantitas numerik, kecenderungan naik/turun dan pengelompkkan bagian-bagian. Where, lokai obyek, posisi dibanding obyek lain dan seterusnya.
56
Suitability to Task Representasi yang berbeda mendukung persepsi yang berbeda untuk tugas kognitif yang berbeda pula.
57
Referensi Preece, Rogers, Sharp, 2002, Interaction Design: Beyond Human-Computer Interaction, John Wiley & Sons, Inc. ( hal ) Preece, Rogers, Sharp, 1996, IHuman-Computer Interaction, Addison-Wesley. ( hal ) Barsalou, 1992, Cognitive Psychology: An Overview for Cognitive Scientist, LEA Publisher. ( hal )
58
The End
Presentasi serupa
© 2024 SlidePlayer.info Inc.
All rights reserved.