27/02/2010

INTERAKSI
MANUSIA & KOMPUTER

Sejarah IMK ?
• Dikenal sejak 1980
• Studi permulaan
– Menekankan manual tasks
– Manusia-Mesin untuk sistem persenjataan
(PD II)

PENDAHULUAN

1
 27/02/2010

Apa Itu IMK ?

• Melibatkan banyak disiplin ilmu
• Terutama: Ilmu Komputer & Desain
Sistem
• IMK: “Desain, implementasi dan evaluasi
sistem interaktif dalam konteks user task
dan work”

Apa Saja Yang Terlibat

dalam IMK ?
• Ilmu Psikologi & Kognitif
– Persepsi user
– Kognitif
– Kemampuan pemecahan masalah
– Ergonomi
– Sosiologi
• Ilmu Komputer dan Teknik
• Ilmu Bisnis
• Desain Grafis
• Technical writing

Teori dan IMK

• Orang
• Sistem
• Kebergunaan (usability)

2
 27/02/2010

Produk Sukses
• Useful (Berguna)
• Usable (Dapat digunakan)
• Used (Digunakan)

Sistem Interaktif
• Komponen Fundamental
– User manusia
– Sistem komputer
– Proses interaktif

MANUSIA

3
 27/02/2010

Pendahuluan -1-
• Sistem komputer dirancang agar bisa
membantu Manusia-User
• Memahami kemampuan dan keterbatasan
manusia
• Psikologi kognitif dlm sistem komputer:
– Manusia melihat dunia sekitarnya
– Menyimpan dan memproses informasi serta
memecahkan masalah
– Memanipulasi objek secara fisik

Pendahuluan -2-
• Model Human Processor
– Sistem perceptual
– Motor System
– Cognitive system
• Pemrosesan informasi
– Input/Output
– Memori
– Pemrosesan

Saluran Input-Output -1-

• Interaksi
– Pengirim & Penerima
– Input (Indera), Output (motor control of the effector)
• Penginderaan
– Penglihatan
– Pendengaran
– Peraba/Sentuhan
– Perasa
– Pembau

4
 27/02/2010

Saluran Input-Output -2-

• Effector
– Tungkai (Limbs)
– Jari
– Mata
– Kepala
– Sistem vokal (suara)
• Bayangkan ketika Anda menggunakan PC
dengan mouse dan keyboard...

Saluran Input-Output -3-

• Penglihatan (Vision)
– 2 Tahap Persepsi/Penglihatan Visual:
• Resepsi fisik
• Pemrosesan dan interpretasi

Saluran Input-Output -4-

• Penglihatan (Vision)
– Mata Manusia
– Persepsi/Penglihatan Visual
• Memahami ukuran dan kedalaman
• Menyerap kecerahan (brightness)
• Menyerap warna
– Kemampuan dan keterbatasan pemrosesan
visual [Ilusi Muller-Lyer, Ilusi Ponzo]
• Membaca

5
 27/02/2010

A B C D E F ■ H I J K

Bentuk Ambigu ?

6
 27/02/2010

ABC

12 13 14

7
 27/02/2010

Ilusi Ponzo

Benar atau Salah ?

The quick brown

fox jumps over the
the lazy dog.

Membaca
• Tahapan dalam proses membaca:
– Pola visual kata yang dibaca
– Saccades
– 250 kata per menit
– Ukuran font 9-12 point
– Panjang baris 58 dan 132 mm
– Membaca di komputer lebih lambat dibanding
buku

8
 27/02/2010

Saluran Input-Output -5-

• Pendengaran
• Tutup mata Anda......
• Suara apa yg Anda dengar ?
• Berasal dari mana suara itu ?
• Perkirakan jarak suara tsb dari posisi Anda skrng ?
– Telinga Manusia
– Pemrosesan Suara

Pemrosesan Suara
• Suara : perubahan atau getaran dari
tekanan udara
• Pitch : frekuensi suara
– Frekuensi rendah = pitch rendah
– Frekuensi tinggi = pitch tinggi
• Frekuensi suara manusia 20 Hz s/d 15
kHz

9
 27/02/2010

Saluran Input-Output -6-

• Sentuhan/Peraba (haptic)
– Bayangkan Anda membuka tutup botol...
• Gerakan
– Manusia dapat beraksi atas sinyal suara
sebesar 150 milidetik, sinyal visual 200
milidetik, rasa sakit 700 milidetik

Memori Manusia -1-

• Bagaimana memori kita bekerja?
• Mengapa ada org yg sangat mudah
mengingat di banding yg lainnya?
• Apa sebenarnya yg terjadi ketika kita
sedang lupa?

Memori Manusia -2-

Sensor memori
Iconic Memori Jangka pendek Memori Jangka
Echoic atau Memori beke
bekerja Panjang
Haptic

Perhatian Repetisi

10
 27/02/2010

Sensor Memori
• Saluran memori:
– Memori Iconic: stimulus visual
– Memori Echoic: stimulus suara
– Memori Haptic: stimulus peraba

Memori Jangka Pendek -1

• Sebagai “scratch-pad” pemanggilan
informasi sementara
• Menyimpan informasi sekilas/singkat
Contoh:
– 35 x 6 = (1) 5 x 6 (2) 30 x 6 (3) (1)+(2) atau
(1) 6 = 2 x 3 (2) 2 x 35 = 70 (3) 3 x 70
• Dapat diakses dg cepat, 70 milidetik
• Dapat hilang dg cepat, 200 milidetik

Memori Jangka Pendek -2

• Kapasitas terbatas
• 2 metode pengukuran kapasitas memori:
Coba baca: 265397620853
• Tulis sebanyak mungkin angka yg diingat
Coba baca: 44 113 245 8920
• Tulis sebanyak mungkin anga yg diingat
• Formula 7 ± 2

11
 27/02/2010

Memori Jangka Panjang -1

Untuk menyimpan informasi jangka panjang
Waktu mengingat: menit, jam bahkan hari
• Struktur memori jangka panjang
– Memori Episodik
– Memorik Semantik

Penalaran dan
Pemecahan Masalah
• Penalaran (reasoning): proses
penggunaan pengetahuan untuk
mengambil kesimpulan
– Penalaran deduktif
– Penalaran induktif
– Penalaran Abduktif
• Pemecahan Masalah
– Gary Kasparov vs Deep Blue (IBM)

12
 27/02/2010

Contoh
• Deduction:
– derive logically necessary conclusion from given premises.
e.g. If it is Friday then she will go to work
It is Friday
Therefore she will go to work.
• Logical conclusion not necessarily true:
e.g. If it is raining then the ground is dry
It is raining
Therefore the ground is dry
• When truth and logical validity clash …
e.g. Some people are babies
Some babies cry
Inference - Some people cry

Contoh
• Induction:
– generalize from cases seen to cases unseen
e.g. all elephants we have seen have trunks
therefore all elephants have trunks.

• Unreliable:
– can only prove false not true

… but useful!
• Humans not good at using negative evidence
e.g. Wason's cards.

Contoh
• reasoning from event to cause
e.g. Sam drives fast when drunk.
If I see Sam driving fast, assume drunk.

• Unreliable:
– can lead to false explanations

13
 27/02/2010

Emosi

Perbedaan Individual

Psikologi dan Desain

Sistem Interaktif
• Panduan
• Model pendukung desain
• Teknik untuk evaluasi

14
 27/02/2010

KOMPUTER

Pendahuluan -1
• Mengapa menggunakan komputer?
• Berinteraksi dengan komputer: harus
paham komputer...
what goes in and out
devices, paper,
sensors, etc.

Melakukan apa?
memory, processing,
networks

Pendahuluan -2
• Sistem Komputer
window 1

window 2

12-37pm

15
 27/02/2010

Pendahuluan -3
• Level interaksi: Batch processing
• Richer interaction

sensors
and devices
everywhere

Piranti Text Entry

• Keyboard Alfanumerik
– Keyboard QWERTY
– Keyboard alfabetik
– Keyboard DVORAK
• Chord Keyboards
• Phone keypad (T9 Entry)
• Handwriting recognition
• Speech Recognition
• Keyboard Numerik...??
– Beri contoh

1 2 3 4 5 6 7 8 9 0
Q W E R T Y U I O P
A S D F G H J K L
Z X C V B N M , .
SPACE

16
27/02/2010

17
 27/02/2010

Mengapa 9 Entri ?

18
 27/02/2010

Positioning, Pointing &

Drawing
• Mouse
• Touchpad
• Trackball dan thumbweel
• Joystick
• Touchscreens
• Styluss dan light pen
• Digitizing tablet
• Eyegaze
• Cursor key dan discreate positioning

19
27/02/2010

20
27/02/2010

21
27/02/2010

22
 27/02/2010

Piranti Display
• Bitmap Display – Resolusi dan warna
• Teknologi
– CRT (Cathode Ray Tube)
– LCD (Liquid Crystal Display)
– Display khusus
• Display Besar dan Display Kondisional
– HDTV (High Definition Television)
– LCD Proyektor
• Digital Paper

• Resolution … used (inconsistently) for

– number of pixels on screen (width x height)
• e.g. SVGA 1024 x 768, PDA perhaps 240x400
– density of pixels (in pixels or dots per inch - dpi)
• typically between 72 and 96 dpi

• Aspect ratio
– ration between width and height
– 4:3 for most screens, 16:9 for wide-screen TV
• Colour depth:
– how many different colours for each pixel?
– black/white or greys only
– 256 from a pallete
– 8 bits each for red/green/blue = millions of colours

Jaggies
– diagonal lines that have discontinuities in due to horizontal raster scan
process.

Anti-aliasing
– softens edges by using shades of line colour
– also used for text

23
 27/02/2010

electron beam

electron gun

focussing and
deflection

phosphor-
coated screen

24
 27/02/2010

appearance

• what?
– thin flexible sheets
– updated electronically cross
section
– but retain display

• how?
– small spheres turned
– or channels with coloured liquid
and contrasting spheres
– rapidly developing area

25
 27/02/2010

Piranti Interaksi VR dan 3D

• Posisi Ruang 3 Dimensi
– Cockpit dan kendali virtual
– Mouse 3D
– Dataglove
– Helm VR
– Whole body tracking
• Display 3 Dimensi
– Penglihatan 3D
– VR motion sickness
– Simulator kabin VR

yaw

roll
pitch

26
 27/02/2010

Kendali Fisik, Sensor &

Piranti Khusus
• Display khusus
• Output suara
• Sentuhan/raba, rasa dan penciuman
• Pengendali fisik
• Biosensing

27
 27/02/2010

Suara
• beeps, bongs, clonks, whistles and whirrs

• used for error indications

• confirmation of actions e.g. keyclick

Sentuhan/raba, rasa dan

penciuman
• touch and feeling important
– in games … vibration, force feedback
– in simulation … feel of surgical instruments
– called haptic devices

• texture, smell, taste

– current technology very limited

Pengendali Fisik

easy-clean
smooth buttons

multi-function
control
large buttons
clear dials

tiny buttons

28
 27/02/2010

Display Khusus
• analogue representations:
– dials, gauges, lights, etc.

• digital displays:
– small LCD screens, LED lights, etc.

• head-up displays
– found in aircraft cockpits
– show most important controls
… depending on context

Paper: Print dan Scan

• Printing (dot based printer)
• Font dan page
• Screen dan page
• Scanner dan OCR

29
 27/02/2010

Font
• Font – the particular style of text
Courier font
Helvetica font
Palatino font
Times Roman font
 §´µº¿Â Ä¿~ (special symbol)
• Size of a font measured in points (1 pt about
1/72”) (vaguely) related to its height
This is ten point Helvetica
This is twelve point
This is fourteen point
This is eighteen point
and this is twenty-four point

Screen
• WYSIWYG
– what you see is what you get
– aim of word processing, etc.
• but …
– screen: 72 dpi, landscape image
– print: 600+ dpi, portrait
• can try to make them similar
but never quite the same
• so … need different designs, graphics etc, for screen
and print

30
 27/02/2010

Memori
• RAM dan Memori Jangka Pendek
• Disk dan Memori Jangka Panjang
• Kecepatan dan Kapasitas
• Kompresi
• Format dan standar penyimpanan
• Metode pengaksesan

RAM & Memori Jangka

Pendek
• Random access memory (RAM)
– on silicon chips
– 100 nano-second access time
– usually volatile (lose information if power turned off)
– data transferred at around 100 Mbytes/sec

• Some non-volatile RAM used to store basic set-up

information

• Typical desktop computers:

64 to 256 Mbytes RAM

31
 27/02/2010

Disk dan Memori Jangka

Panjang
• magnetic disks
– floppy disks store around 1.4 Mbytes
– hard disks typically 40 Gbytes to 100s of Gbytes
access time ~10ms, transfer rate 100kbytes/s

• optical disks
– use lasers to read and sometimes write
– more robust that magnetic media
– CD-ROM
- same technology as home audio, ~ 600 Gbytes
– DVD - for AV applications, or very large files

Kecepatan dan Kapasitas

• what do the numbers mean?

• some sizes (all uncompressed) …

– this book, text only ~ 320,000 words, 2Mb
– the Bible ~ 4.5 Mbytes
– scanned page ~ 128 Mbytes
• (11x8 inches, 1200 dpi, 8bit greyscale)
– digital photo ~ 10 Mbytes
• (2–4 mega pixels, 24 bit colour)
– video ~ 10 Mbytes per second
• (512x512, 12 bit colour, 25 frames per sec)

Kompresi
• reduce amount of storage required
• lossless
– recover exact text or image – e.g. GIF, ZIP
– look for commonalities:
• text: AAAAAAAAAABBBBBCCCCCCCC 10A5B8C
• video: compare successive frames and store change
• lossy
– recover something like original – e.g. JPEG, MP3
– exploit perception
• JPEG: lose rapid changes and some colour
• MP3: reduce accuracy of drowned out notes

32
 27/02/2010

Format -teks
• ASCII - 7-bit binary code for to each letter and character
• UTF-8 - 8-bit encoding of 16 bit character set
• RTF (rich text format)
- text plus formatting and layout information
• SGML (standardized generalised markup language)
- documents regarded as structured objects
• XML (extended markup language)
- simpler version of SGML for web applications

Format - audio
• Images:
– many storage formats :
(PostScript, GIFF, JPEG, TIFF, PICT, etc.)
– plus different compression techniques
(to reduce their storage requirements)

• Audio/Video
– again lots of formats :
(QuickTime, MPEG, WAV, etc.)
– compression even more important
– also ‘streaming’ formats for network delivery

Processing dan Network

• Efek dari kecepatan prosesor yg terbatas
• Keterbatasan kinerja pd sistem interaktif
• Komputasi jaringan

33
 27/02/2010

Computation bound
– Computation takes ages, causing frustration for the user
Storage channel bound
– Bottleneck in transference of data from disk to memory
Graphics bound
– Common bottleneck: updating displays requires a lot of effort -
sometimes helped by adding a graphics co-processor optimised to take
on the burden
Network capacity
– Many computers networked - shared resources and files, access to
printers etc. - but interactive performance can be reduced by slow
network speed

INTERAKSI

Pendahuluan

Apa itu INTERAKSI ??

34
 27/02/2010

Model Interaksi
• Istilah interaksi
• Execution – siklus evaluasi
• Framework interaksi

domain – the area of work under study

e.g. graphic design
goal – what you want to achieve
e.g. create a solid red triangle
task – how you go about doing it
– ultimately in terms of operations or actions
e.g. … select fill tool, click over triangle

Note …
– traditional interaction …
– use of terms differs a lot especially task/goal !!!

Model Norman
• Seven stages
– user establishes the goal
– formulates intention
– specifies actions at interface
– executes action
– perceives system state
– interprets system state
– evaluates system state with respect to goal

• Norman’s model concentrates on user’s view of the

interface

35
 27/02/2010

goal
execution evaluation
system
• user establishes the goal
• formulates intention
• specifies actions at interface
• executes action
• perceives system state
• interprets system state
• evaluates system state with respect to goal

goal
execution evaluation
system
• user establishes the goal
• formulates intention
• specifies actions at interface
• executes action
• perceives system state
• interprets system state
• evaluates system state with respect to goal

goal
execution evaluation
system
• user establishes the goal
• formulates intention
• specifies actions at interface
• executes action
• perceives system state
• interprets system state
• evaluates system state with respect to goal

36
 27/02/2010

goal
execution evaluation
system
• user establishes the goal
• formulates intention
• specifies actions at interface
• executes action
• perceives system state
• interprets system state
• evaluates system state with respect to goal

extension of Norman…
their interaction framework has 4 parts O
– user output
– input S U
– system core task
– output I
input
each has its own unique language
interaction Þ translation between languages

problems in interaction = problems in translation

Screen design

O Ergonomi
Ergo

S U
I
Dialog

37
 27/02/2010

Ergonomi
• Apakah ergonomi itu ?
• Environment fisik dalam interaksi
• Masalah kesehatan
• Penggunaan warna

Ergonomi
• Study of the physical characteristics of
interaction
• Also known as human factors – but this
can also be used to mean much of HCI!
• Ergonomics good at defining standards
and guidelines for constraining the way we
design certain aspects of systems

• arrangement of controls and displays

e.g. controls grouped according to function or frequency of use,
or sequentially
• surrounding environment
e.g. seating arrangements adaptable to cope with all sizes of user
• health issues
e.g. physical position, environmental conditions (temperature,
humidity), lighting, noise,
• use of colour
e.g. use of red for warning, green for okay,
awareness of colour-blindness etc.

38
 27/02/2010

Masalah Kesehatan
• Posisi secara fisik
• Temperatur
• Pencahayaan
• Noise
• Waktu

Style Interaksi
• Command line interface
• Menu
• Natural language
• Dialog tanya/jawab dan query
• Form fills dan spreadsheet
• WIMP interface
• Point-and-Click interface
• Interface tiga dimensi

39
 27/02/2010

Command line interface

Sable.soc.staffs.ac.uk> javac HelloWorldApp
Javac: invalid argument: HelloWorldApp
Use: javac [-g] [-o] [-classpath path] [-d
dir] file.java...
Sable.soc.staffs.ac.uk> java
HelloWorldApp.java
Sable.soc.staffs.ac.uk> java HelloWorldApp
Hello world!!
Sable.soc.staffs.ac.uk>

Menu
PAYMENT DETAILS

Please select payment method:

1. cash
2. check
3. credit card
4. invoice

9. abort transaction

Anak itu memukul anjing

dengan kayu

40
 27/02/2010

WIMP
• Window
• Ikon
• Menu
• Pointer

Point-and-click
• Digunakan pada ..
– multimedia
– web browsers
– hypertext

• just click something!

– icons, text links or location on map

• minimal typing

41
 27/02/2010

3D

flat buttons …

click me!

… or sculptured

Elemen WIMP
• Windows
• Ikon
• Menu
• Pointer
• Tombol
• Toolbar
• Palette
• Kotak Dialog

42
 27/02/2010

Menu
Fi l e Ed it Opt i ons Fo nt
Ty p ewr it e r
Screen
Times

Tombol

43
 27/02/2010

Pointer

INTERAKTIVITAS
• rapidly improving …
… but still inaccurate
• how to have robust dialogue?
… interaction of course!

e.g. airline reservation:

reliable “yes” and “no”
+ system reflects back its understanding
“you want a ticket from New York to Boston?”

Look and feel..

• WIMP systems have the same elements:
windows, icons., menus, pointers, buttons,
etc.

• but different window systems

… behave differently

e.g. MacOS vs Windows menus

appearance + behaviour = look and feel

44
 27/02/2010

Inisiatif
• who has the initiative?
old question–answer – computer
WIMP interface – user

• WIMP exceptions …
pre-emptive parts of the interface

• modal dialog boxes

– come and won’t go away!
– good for errors, essential steps
– but use with care

KONTEKS INTERAKSI
Interaction affected by social and organizational
context

• other people
– desire to impress, competition, fear of failure
• motivation
– fear, allegiance, ambition, self-satisfaction
• inadequate systems
– cause frustration and lack of motivation

EXPERIENCE,
ENGAGEMENT AND FUN
• Memahami experience
• Perancangan experience
• Desain fisik dan engagement
• Managing value

45
 27/02/2010

Experience?
• home, entertainment, shopping
– not enough that people can use a system
– they must want to use it!

• psychology of experience
– flow (Csikszentimihalyi)
– balance between anxiety and boredom

• education
– zone of proximal development
– things you can just do with help

• wider ...
– literary analysis, film studies, drama

Designing experience

• real crackers
– cheap and cheerful!
– bad joke, plastic toy, paper hat
– pull and bang

Designing experience

• virtual crackers
– cheap and cheerful
– bad joke, web toy, cut-out mask
– click and bang

46
 27/02/2010

Designing experience

• virtual crackers
– cheap and cheerful
– bad joke, web toy, cut-out mask
– click and bang

how crackers work

fill in web form

sender receive email recipient

To: wxv
From: ..

closed
cracker page

open
watches recipient clicks
message
progress cracker opens ...
very slowly
open
cracker page
sender joke
links

web toy
mask

The crackers experience

real cracker virtual cracker
Surface elements
design cheap and cheerful simple page/graphics
play plastic toy and joke web toy and joke
dressing up paper hat mask to cut out
Experienced effects
shared offered to another sent by email message
co-experience pulled together sender can't see content
until opened by recipient
excitement cultural connotations recruited expectation
hiddenness contents inside first page - no contents
suspense pulling cracker slow ... page change
surprise bang (when it works) WAV file (when it works)

47
 27/02/2010

Physical design
• many constraints:
– ergonomic – minimum button size
– physical – high-voltage switches are big
– legal and safety – high cooker controls
– context and environment – easy to clean
– aesthetic – must look good
– economic – … and not cost too much!

Design trade-offs
constraints are contradictory … need trade-offs
within categories:
e.g. safety – cooker controls
front panel – safer for adult
rear panel – safer for child

between categories
e.g. ergonomics vs. physical – MiniDisc remote
ergonomics – controls need to be bigger
physical – no room!
solution – multifunction controls & reduced functionality

Fluidity
• do external physical aspects reflect logical
effect?
– related to affordance (chap 5)

logical state revealed in physical state?

e.g. on/off buttons

inverse actions inverse effects?

e.g. arrow buttons, twist controls

48
 27/02/2010

inverse actions

• yes/no buttons
– well sort of

• ‘joystick’

• also left side control

spring back controls

• one-shot buttons
• joystick
• some sliders

good – large selection sets

bad – hidden state

a minidisk controller

twist for track movement

series of spring-back controls pull and twist for volume
each cycle through some options – spring back
–natural inverse back/forward – natural inverse for twist

49
 27/02/2010

physical layout

controls:
logical relationship
~ spatial grouping

compliant interaction

state evident in rotary knobs reveal internal state and

can be controlled by both user and
mechanical buttons machine

Managing value

people use something

ONLY IF
it has perceived value
AND
value exceeds cost

BUT NOTE
• exceptions (e.g. habit)
• value NOT necessarily personal gain or money

50
 27/02/2010

Weighing up value
value
• helps me get my work done
• fun
• good for others
cost
• download time
• money £, $, €
• learning effort

Discounted future
• in economics Net Present Value:
– discount by (1+rate)years to wait

• in life people heavily discount

– future value and future cost
– hence resistance to learning
– need low barriers
and high perceived present value

example – HCI book search

• value for people who have the book
helps you to look up things
– chapter and page number

• value for those who don’t …

sort of online mini-encyclopaedia
– full paragraph of context

… but also says “buy me”!!

… but also says “buy me”!!

51
 27/02/2010

Value and organisational design

• coercion
• tell people what to do!
• value = keep your job
• enculturation
• explain corporate values
• establish support (e.g share options)
• emergence
• design process so that
individuals value ® organisational value

General lesson …
if you want someone to do something …

• make it easy for them!

• understand their values

RINGKASAN

52