812F3d01

TI1143 Interaksi Manusia dan Komputer

4-Persepsi dan Representasi

Persepsi dan Representasi

PERSEPSIRestyandito, S.Kom, MSIS Restyandito,

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)

Tanggapan panca indraPenglihatan: 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

Restyandito, S.Kom,MSIS

1



Tanggapan panca indraFactors affecting perceptual and motor performanceArousal 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)

Ecological TheoryEcological theory of perception Actively explore the objects in the environment by seeing, touching, listening, smelling etc.

Affordance Visibility

Ecological Theory AffordanceHal-hal apa yang bisa dimanipulasi Apa yang terjadi jika suatu obyek dimanipulasi

Ecological Theory Affordance


2



Ecological Theory Affordance

Ecological Theory Visibility

Ecological Theory Visibility

Constructivist TheoryInterpretasi menggunakan world knowledge konteks aturan organisasi

Pemrosesan representasi untuk dicocokkan dengan model


3



Constructivist Theory Visual IllusionJika persepsi yang diterima tidak sesuai dengan pengalaman karena representasi yang tidak akurat maka dapat terjadi mismatch Salah satu contoh mismatch adalah ilusi visual

Constructivist Theory Visual Illusion

Perspective Illusion

Imposible Figure

Simultaneous Contrast

Visual Illusion

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

Proximity Similarity ClosureHuruf-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.

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. missing parts filled in : manusia selalu mencoba untuk melengkapi suatu pola garis yg tampak kontinyu

Continuity Symmetry

Elemen simtris tampak sebagai figur yg koheren

Gestalt Principles


4



Perceptual Organization

Perceptual Organization

Gestalt Principles

Gestalt Principles

Features and Objects in Visual Processing

Features and Objects in Visual Processing

POP OUT BOUNDARIESBatas-batas yang menonjol dari apa yg dilihat manusia biasanya menampakkan property yg sederhana pada tahap visual processing: - Orientasi garis - Orientasi bentuk - Orientasi warna

ILLUSORY CONJUNCTIONIllusory 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



Representasi MentalHubungan yang sistematis antara beberapa elemen dari taget domain dan beberapa elemen dari representasi model domain.

REPRESENTASI

Representasi MentalMenurut 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

Contoh

Target domain (real world)

Model domain (representation)


6



Representasi Mentaltarget 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

Model A



Model B

Model C

A

C

B






7



Representasi GrafisSecara ideal, informasi yang ditampilkan di layar sebaiknya semirip mungkin dengan obyek yang ada pada dunia nyata.

Representasi Grafis Graphical ModelingPerceptual Depth Cue

ukuran

interposisi

Representasi Grafis Graphical Modeling


contrast, clarity, brightnes

bayangan


8




Representasi Grafis Graphical ModelingMotion Parallax Saat seseorang bergerak, obyek yang dilihatnya bergerak dengan kecepatan berbeda

texture

Representasi Grafis Graphical ModelingStereoscopic Disebut juga binocular depth cues, obyek yang ditampilkan dari 2 sudut yg berbeda

Representasi Grafis Graphical CodingTeknik pengkodean grafik untuk merepresentasikan proses sistem yang abstrak, obyek data, dll. Penggunaan grafik dapat menunjukkan abstraksi informasi dari data kuantitatif.


9



Representasi Grafis Graphical Coding Arbitrary mappings tidak ada hubungan khusus antara simbol dengan obyek , hanya berdasarkan kesepakatan

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

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

Representasi Grafis Graphical CodingRepresentasi grafis memudahkan persepsi: 1. Hubungan antara data yang multidimensional 2. Trend data yang selalu berubah


10



Representasi Grafis Graphical Coding

Representasi Grafis Colour CodingSegmentasi

gunakan warna untuk membedakan layers gunakan warna kalem / gelap untuk back ground, warna terang untuk foreground



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



Representasi Grafis Colour CodingPenggunaan warna

Colour Polution

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

Colour Polution

Psikologi WarnaKombinasi warna terbaikBackground Putih Hitam Merah Hijau Biru Cyan Magenta Kuning Garis dan Teks (Normal) Biru(94%), Hitam(63%), Merah(25%) Putih(75%), Kuning(63%) Kuning(75%), Putih(56%), Hitam(44%) Hitam(100%), Biru(56%), Merah(25%) Putih(81%), Kuning(50%), Cyan(25%) Biru(69%), Hitam(56%), Merah(37%) Hitam(63%), Putih(56%), Biru(44%) Merah(63%), Biru(63%), Hitam(56%) Garis dan Teks (Tebal) Hitam(69%), Biru(63%) Merah(31%) Kuning(69%), Putih(59%), Hijau(25%) Hitam(50%), Kuning(44%), Putih(44%), Cyan(31%) Hitam(69%), Merah(63%), Biru(31%) Kuning(38%), Magenta(31%), Hitam(31%), Cyan(31%), Putih(25%) Merah(56%), Biru(50%), Hitam(44%), Magenta(25%) Biru(50%), Hitam(44%), Kuning(25%) Merah(75%), Biru(63%), Hitam(50%)


12



Psikologi WarnaKombinasi warna terjelekBackground Garis dan Teks (Normal) Putih Kuning(100%), Cyan(94%) Hitam Biru(87%), Merah(44%), Magenta(25%) Merah Magenta(81%), Biru(44%), Hijau dan Cyan(25%) Hijau Cyan(81%), Magenta(50%), Kuning(37%) Biru Hijau(62%), Merah dan Hitam(37%) Cyan Hitam(81%), Kuning(75%), Putih(31%) Magenta Hijau(75%), Merah(56%), Cyan(44%) Kuning Putih dan Cyan(81%) Garis dan Teks (Tebal) Kuning(94%), Cyan(75%) Biru(81%), Magenta(31%) Magenta(69%), Biru(50%), Hijau(37%) Cyan(25%) Cyan(81%), Magenta dan Kuning(44%) Hijau(44%), Merah dan Hitam (31%) Kuning(69%), Hijau(62%), Putih(56%) Cyan(81%), Hijau(69%), Merah(44%) Putih(81%), Cyan(56%), Hijau(25%)

Representasi Grafis Colour CodingPencarian

gunakan warna untuk menonjolkan hal hal yang pentingmis: Windows yang aktif

Representasi Grafis Colour CodingPencarianMediaelektronikadalahcaramengirimkanpesanmenggunakan bentuk/secaraelektronik.Bentukelektronikmencakupbeberapa teknologikomunikasimasasepertiradio,film,televisi,CD-ROM danInternet.Karakteristikdarimediaelektronikiniberupabentuk naratifyangbertolakbelakangdenganbudayacetak(massprint), budayamembacabukudanpenelitian

Representasi Grafis Colour CodingPencarianMediaelektronikadalahcaramengirimkanpesanmenggunakan bentuk/secaraelektronik.Bentukelektronikmencakupbeberapa teknologikomunikasimasasepertiradio,film,televisi,CD-ROM danInternet.Karakteristikdarimediaelektronikiniberupabentuk naratifyangbertolakbelakangdenganbudayacetak(massprint), budayamembacabukudanpenelitian


13



Metode PengkodeanCoding MethodAlpha numerics Shapes Colour Line angle Line length Line width Line style

Maquire, 1985

Metode PengkodeanCoding MethodObject size Brightness Blink Reverse video Underlining combination

Maquire, 1985

Number of codes Unlimited 10 20 4 11 8 11 34 23 59

Comments Highly versatile. Meaning can be self evident. Location time may be longer than for graphic coding Very effective if code matches object or operation represented Attractive and efficient. Exessive use confusing. Limited value for colour-blind. Good in special cases, for example: wind direction Good. Can clutter display if many codes displayed Good Good

Number of codes 35 24 24 No data No data unlimited

Comments Fair. Can take up considerable space. Location time longer than for shape and colour. Can be fatiquing, especially if screen contrast is poor. Good for getting attention but should be suppressible afterwards. Annoying if overused. Limit to small fields. Effective for making data stand out. If large area is in reverse video, flickers is more easily perceived Useful but can redce text legibility Can reinforce coding but complex combination can be confusing

Komunikasi Visual Desain GrafisWhat, 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.

Suitability to Task

Representasi yang berbeda mendukung persepsi yang berbeda untuk tugas kognitif yang berbeda pula.


14



ReferensiPreece, Rogers, Sharp, 2002, Interaction Design: Beyond Human-Computer Interaction, John Wiley & Sons, Inc. HumanInteraction,( hal 76-78 ) 76-

Barsalou, 1992, Cognitive Psychology: An Overview for Cognitive Scientist, LEA Publisher. Scientist,( hal 52-59 ) 52-

( hal 75-98 ) 75-

Interaction, Addison-Wesley. Interaction, Addison-

Preece, Rogers, Sharp, 1996, IHuman-Computer IHuman-

The End


15

Documents

812F3d01