Presentasi sedang didownload. Silahkan tunggu

Presentasi sedang didownload. Silahkan tunggu

Interaksi Manusia-Komputer 2. Profil Pemakai Winangsari Pradani.

Presentasi serupa

Presentasi berjudul: "Interaksi Manusia-Komputer 2. Profil Pemakai Winangsari Pradani."— Transcript presentasi:

1 Interaksi Manusia-Komputer 2. Profil Pemakai Winangsari Pradani

2 Materi Terdapat persamaan dan perbedaan antar pemakai Persamaannya adalah : Pemrosesan Informasi oleh Manusia. Hal yang dibahas : apa yang bagus dilakukan oleh manusia dan apa yang tidak dapat dilakukan (buruk) oleh manusia; Model mental (model konseptual), teori aksi; eksternal cognition Perbedaannya adalah : berdasarkan psikologis, fisik, job, pemakai sistem, dll.

3 Mengapa kita perlu mengenali Pemakai ? Berinteraksi dengan teknologi merupakan proses kognitif Kita perlu mempertimbangkan proses kognitif dan keterbatasan kognitif pemakai Kita harus mencari tahu apa yang user dapat lakukan Mengidentifikasi dan menjelaskan penyebab problem- problem yang ditemukan oleh pemakai Dengan teori-teori, tolls pemodelan, petunjuk dan metoda kita dapat mendisain produk-produk interaktif yang lebih baik.

4 Proses Kognitif pada Manusia

5 Aspek Kognitif yang Utama Perhatian Persepsi dan Pengenalan Ingatan (Memori) Membaca, Berbicara, Mendengar Penyelesaian Problem, Merencanakan, Penalaran dan pembuatan keputusan, Belajar Yang paling relevan dengan disain interaksi adalah : Perhatian, Persepsi dan Pengenalan, dan Ingatan

6 Perhatian Adalah proses memilih satu titik perhatian dari sekumpulan stimuli di sekeliling kita Memungkinkan kita untuk fokus pada informasi yang relevan dengan apa yang sedang kita kerjakan. Involves audio and/or visual senses Berfokus dan membagi perhatian pada hal-hal yang kita pilih dapat membatasi kemampuan kita untuk mengikuti semua kejadian. (misalnya mengetik sambil nonton TV) Informasi pada antarmuka haruslah terstruktur untuk menangkap perhatian pemakai, misalnya gunakan batas-batas perseptual (jendela), warna, reverse video, bunyi, dan kelap-kelip (blinking)

7 Model Human processor (Card et al, 1983) Models the information processes of a user interacting with a computer Predicts which cognitive processes are involved when a user interacts with a computer Enables calculations to be made of how long a user will take to carry out a task

8 The human processor model

9 External cognition Concerned with explaining how we interact with external representations (e.g. maps, notes, diagrams) What are the cognitive benefits and what processes involved How they extend our cognition What computer-based representations can we develop to help even more?

10 Externalizing to reduce memory load Diaries, reminders, calendars, notes, shopping lists, to-do lists - written to remind us of what to do Post-its, piles, marked emails - where placed indicates priority of what to do External representations: – Remind us that we need to do something (e.g. to buy something for mother’s day) – Remind us of what to do (e.g. buy a card) – Remind us when to do something (e.g. send a card by a certain date)

11 Computational offloading When a tool is used in conjunction with an external representation to carry out a computation (e.g. pen and paper) Try doing the two sums below (a) in your head, (b) on a piece of paper and c) with a calculator. – 234 x 456 =?? – CCXXXIIII x CCCCXXXXXVI = ??? Which is easiest and why? Both are identical sums

12 Annotation and cognitive tracing Annotation involves modifying existing representations through making marks – e.g. crossing off, ticking, underlining Cognitive tracing involves externally manipulating items into different orders or structures – e.g. playing scrabble, playing cards

13 Design implication Provide external representations at the interface that reduce memory load and facilitate computational offloading e.g. Information visualizations have been designed to allow people to make sense and rapid decisions about masses of data

14 Distributed cognition Concerned with the nature of cognitive phenomena across individuals, artifacts, and internal and external representations (Hutchins, 1995) Describes these in terms of propagation across representational state Information is transformed through different media (computers, displays, paper, heads)

15 How it differs from information processing

16 What’s involved The distributed problem-solving that takes place The role of verbal and non-verbal behavior The various coordinating mechanisms that are used (e.g., rules, procedures) The communication that takes place as the collaborative activity progresses How knowledge is shared and accessed

17 Key points Cognition involves several processes including attention, memory, perception and learning The way an interface is designed can greatly affect how well users can perceive, attend, learn and remember how to do their tasks Theoretical frameworks such as mental models and external cognition provide ways of understanding how and why people interact with products, which can lead to thinking about how to design better products

18 Activity: Find the price of a double room at the Holiday Inn in Bradley

19 Activity: Find the price for a double room at the Quality Inn in Columbia

20 Activity Tullis (1987) found that the two screens produced quite different results – 1st screen - took an average of 5.5 seconds to search – 2nd screen - took 3.2 seconds to search Why, since both displays have the same density of information (31%)? Spacing – In the 1st screen the information is bunched up together, making it hard to search – In the 2nd screen the characters are grouped into vertical categories of information making it easier

21 Design implications for attention Make information salient when it needs attending to Use techniques that make things stand out like colour, ordering, spacing, underlining, sequencing and animation Avoid cluttering the interface - follow the example of crisp, simple design Avoid using too much because the software allows it

22 An example of over-use of graphics

23 Perception and recognition How information is acquired from the world and transformed into experiences Obvious implication is to design representations that are readily perceivable, e.g. – Text should be legible – Icons should be easy to distinguish and read

24 Is color contrast good? Find italian

25 Are borders and white space better? Find french

26 Activity Weller (2004) found people took less time to locate items for information that was grouped – using a border (2nd screen) compared with using color contrast (1st screen) Some argue that too much white space on web pages is detrimental to search – Makes it hard to find information Do you agree?

27 What goes on in the mind?

28 Contoh Disain AP yang Buruk – Tombol elevator dan label di baris bawah semuanya kelihatan sama, sehingga pemakai sering salah menekan label dan bukan tombol nya. – Orang tidak melakukan kesalahan yang sama pada baris atas. Mengapa ? Dari :

29 Contoh Disain AP yang Buruk – Tombol elevator dan label di baris bawah semuanya kelihatan sama, sehingga pemakai sering salah menekan label dan bukan tombol nya. – Orang tidak melakukan kesalahan yang sama pada baris atas. Mengapa ? Dari :

30 Mengapa Mesin Penjual Barang (Vending Machine) ini Buruk? Perlu menekan tombol dulu untuk mengaktifkan pembacaan masukan Normalnya masukkan uang dulu baru memilih. Contravenes well known convention From:

31 Contoh Disain AP yang baik : Kamera Manual An old manual camera has a superbly intuitive interface. Take the three of exposure: Shutter speed, aperture and film speed. To change the size of the hole in the lens, you twist a ring on the lens. Ditto shutter speed -- a dial around the shutter release. And while ISO was usually only set once per film, it was, again, a simple dial. Muscle memory meant that these could be grabbed and used with the eye to the viewfinder, and the layout of the controls quashed any ambiguity as to their purpose. Compare that to the multibutton, menu-driven crap on the modern digicam. Canon at least put a real ISO dial on the G9, but why can’t we have an aperture ring and a shutter speed dial. Pretty please?

32 Contoh Disain AP yang buruk : Kalkulator Here is an example to learn how not to do an user interface. Things are made complex by adding the slider controls and unreadable scale and do not forget to look the accuracy after the decimal point.example All that was required was textbox controls for user to input data and validate the data at the background. Incidentally is finance and stock advisory site. I wonder how they complicate other informations to the user!

33 Contoh Disain AP yang baik : Mouse Mouse The mouse, whether invented by Xerox, Apple, Stanford Research Institute or Walt Disney, changed computing. The mouse, and a menu- driven, window-based desktop metaphor made it easy for anybody to work with a computer. Point, click, drag instead of typing out arcane command lines onto a screen. The mouse successfully bridged the gap between box and brain and also ushered in the since-abused layer of abstraction now found everywhere. It enabled people to use complex functions without knowing how the magic happened: The computer did the translation

34 Sasaran AP (UI Goals) Usability goals : Effective to use; Efficient to use; Safe to use; Have good utility; Easy to learn; Easy to remember how to use User experience goals : Satisfying; aesthetically pleasing; enjoyable; supportive of creativity; Engaging; supportive of creativity; pleasurable; rewarding; exciting; Fun; entertaining; provocative; helpful; surprising; motivating; enhancing sociability; emotionally fulfilling; challenging Boring; annoying; frustrating; cutsey 1. Clear Purpose The purpose of the site and the purpose of each page in the site needs to be clearly communicated. When a visitor comes to a site they first scan the content and then skim the content. The whole process is done in seconds and if the visitor doesn’t think they are in the right place, they will leave. To make it easy for a visitor to decide if they are in the right place, the purpose needs to be communicated in the fastest loading elements (text) and in the most obvious elements (headings, link text). 2. Good Visual Design A good visual design should support the purpose of the site while enhancing credibility…

35 Profesi Perancang AP (UI Designer) interaction designers - people involved in the design of all the interactive aspects of a product usability engineers - people who focus on evaluating products, using usability methods and principles web designers - people who develop and create the visual design of websites, such as layouts information architects - people who come up with ideas of how to plan and structure interactive products user experience designers (UX) - people who do all the above but who may also carry out field studies to inform the design of products

36 Aktifitas Temukan produk antarmuka (software dan non-software) di sekitarmu, foto lah, diskusikan dalam kelompok hal-hal yang baik dan buruk mengenai antarmuka tersebut. Kaitkan dengan usability goals dan user experience goals

37 3, 12, 6, 20, 9, 4, 0, 1, 19, 8, 97, 13, 84 Cat, house, paper, laugh, people, red, yes, number, shadow, broom, rain, plant, lamp, chocolate, radio, one, coin, jet

Download ppt "Interaksi Manusia-Komputer 2. Profil Pemakai Winangsari Pradani."

Presentasi serupa

Iklan oleh Google