Presentasi sedang didownload. Silahkan tunggu

Presentasi sedang didownload. Silahkan tunggu

Persepsi dan Representasi Restyandito, S.Kom, MSIS.

Presentasi serupa


Presentasi berjudul: "Persepsi dan Representasi Restyandito, S.Kom, MSIS."— Transcript presentasi:

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  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  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 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)

6 Ecological Theory Ecological theory of perception “Actively explore the objects in the environment by seeing, touching, listening, smelling etc….”  Affordance  Visibility

7   Hal-hal apa yang bisa dimanipulasi   Apa yang terjadi jika suatu obyek dimanipulasi Ecological Theory Affordance

8 Affordance

9 Affordance

10 Visibility

11 Visibility

12 Constructivist Theory Interpretasi menggunakan – world knowledge – konteks – aturan organisasi Pemrosesan representasi untuk dicocokkan dengan model

13  Jika persepsi yang diterima tidak sesuai dengan pengalaman – karena representasi yang tidak akurat – maka dapat terjadi ‘ mismatch ’ ‘ mismatch ’  Salah satu contoh ‘ mismatch ‘ adalah ilusi visual Visual Illusion Constructivist Theory

14 Perspective Illusion Simultaneous Contrast Imposible Figure Visual Illusion Constructivist Theory

15 Visual Illusion 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 Gestalt Principles 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 Elemen simtris tampak sebagai figur yg koheren

17 Perceptual Organization Gestalt Principles

18 Perceptual Organization Gestalt Principles

19 Features and Objects in Visual Processing Anne Treisman POP OUT BOUNDARIES - Orientasi garis - Orientasi bentuk - Orientasi warna Batas-batas yang menonjol dari apa yg dilihat manusia biasanya menampakkan property yg sederhana pada tahap visual processing:

20 Features and Objects in Visual Processing Anne Treisman 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. ILLUSORY CONJUNCTION

21 REPRESENTASI

22 Representasi Mental Hubungan yang sistematis antara beberapa elemen dari taget domain dan beberapa elemen dari representasi model domain.

23 Representasi Mental  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 Menurut Palmer (1978) suatu sistem representasional harus memenuhi 5 kondisi berikut:

24 Contoh Target domain (real world) Model domain (representation)

25  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 Representasi Mental

26 Model A Target domain (real world) Model domain (representation)

27 Model B Target domain (real world) Model domain (representation) A C B

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  ukuran  interposisi Graphical Modeling Perceptual Depth Cue

31 Representasi Grafis  contrast, clarity, brightnes Graphical Modeling

32 Representasi Grafis  bayangan Graphical Modeling

33 Representasi Grafis  texture Graphical Modeling

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

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

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 • Arbitrary mappings tidak ada hubungan khusus antara simbol dengan obyek, hanya berdasarkan ‘kesepakatan’ Representasi Grafis Graphical Coding

38 • 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

39 • 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 Coding

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

41 Representasi Grafis Graphical Coding

42 Representasi Grafis Colour Coding  gunakan warna untuk membedakan layers  gunakan warna kalem / gelap untuk back ground, warna terang untuk foreground ground, warna terang untuk foreground Segmentasi

43 Representasi Grafis Colour 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

44 Representasi Grafis Colour Coding Segmentasi

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

46 Colour Polution

47

48 Psikologi Warna Kombinasi warna terbaik

49 Psikologi Warna Kombinasi warna terjelek

50 Representasi Grafis Colour Coding  gunakan warna untuk menonjolkan hal – hal yang penting hal yang penting mis: Windows yang aktif Pencarian

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

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

53 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 Good Metode Pengkodean Maquire, 1985

54 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 2 – 4 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 No data Useful but can redce text legibility combinationunlimited Can reinforce coding but complex combination can be confusing Metode Pengkodean Maquire, 1985

55 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. Komunikasi Visual Desain Grafis

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


Download ppt "Persepsi dan Representasi Restyandito, S.Kom, MSIS."

Presentasi serupa


Iklan oleh Google