~MER~

Interaksi
Manusia & Komputer
Human Computer Interaction
 Materi Pertemuan 1

Pengantar Interaksi
Manusia dan Komputer
 Bermula saat PD II, dengan IMK
menghasilkan banyak senjata yang lebih
efektif.
 “HCI is about designing computer systems
that support people so that, they can
carry out their activities, productively &
safety” - Jenny Preese.
 It is commonly used interchangeably with
term such as “man-machine interaction”
(MMI), HCI is the study of the interaction
between humans and computers.
 Humans are complicated. Computers, by comparison, are
simple.
 We’re young, old, female, male, experts, novices, left-
handed, right-handed, English-speaking, Chinese-speaking,
from the north, from the south, tall, short, strong, weak, fast,
slow, able-bodied, disabled, sighted, blind, motivated, lazy,
creative, bland, tired, alert, and on and on.
 “know thy user” (Shneiderman and Plaisant, 2005, p. 66)
 Why do humans make mistakes?
 Why do humans forget how to do things?
 Why do humans get confused while installing
apps on their computers?
 Why do humans have trouble driving while talking
on a mobile phone?
 Why do humans enjoy Facebook or Instagram so
much?

The more we understand humans,

the better are our chances of
designing interactive systems that
work as intended.
 Antara manusia dengan manusia terjadi suatu
interaksi; yang beragam cara berinteraksinya dapat
secara berdialog, menggunakan suatu bahasa yang
di kenal antar manusia atau melalui simbol-simbol
yang diciptakan oleh manusia tsb.
Bagaimana manusia dapat
berinteraksi (berdialog) dengan
komputer?
 Setiap komunikasi antara pengguna (user) dengan
komputer, secara langsung maupun tidak langsung;
Interaksi tersebut melibatkan suatu dialog dengan
suatu umpan-balik (feedback) dan kontrol hasil
kinerja dari suatu kerja.
 Interaksi
yang yang bagus antar pengguna dengan
komputer dapat memberikan suatu kemudahan
dalam melakukan pekerjaan sehingga dapat
menghasilkan suatu hasil yang diinginkan tepat
waktu → Efficiency & Effectivness
Materi Pertemuan 2

Human Factor
Faktor Manusia
 The five classical human senses are vision, hearing,
touch, taste, and smell.
 One feature the senses share is the reception and
conversion into electrical nerve signals of physical
phenomena such as sound waves, light rays, flavors,
odors, and physical contact. The signals are
transmitted to the brain for processing. Sensory
stimuli and sense organs are purely physiological.
 Perception, includes both the sensing of stimuli and
use of the brain to develop identification,
awareness, and understanding of what is being
sensed.
 Vision (Sight)
Vision, or sight, is the
human ability to
receive information
from the environment in
the form of visible light
perceived by the eye.
Penelitian Yarbus,
1. Ingat posisi dari semua orang dalam gambar!
2. Kenali ada berapa pria dan wanita?
Scan
path
Hearing
(Audition) Hearing, or
audition, is the
detection of sound
by humans. Sound
is transmitted
through the
environment as
sound waves—
cyclic fluctuations
of pressure in a
medium such as
air.
 Touch(Tactition)

This system includes sensory receptors in the skin, muscles, bones,

joints, and organs that provide information on a variety of physical
or environmental phenomena, including touch, temperature, pain,
and body and limb position.
 Taste & Smell
• Smell (olfaction) is the ability to perceive
odors. For humans, this occurs through
sensory cells in the nasal cavity.
• Taste (gustation) is a direct chemical
reception of sweet, salty, bitter, and sour
sensations through taste buds in the tongue
and oral cavity.

While humans use smell and taste all

the time without effort, these senses are
not generally “designed in” to systems.
 Human Brain
The brain is the most complex biological structure
known. With billions of neurons, the brain provides
humans with a multitude of capacities and resources,
including pondering, remembering, recalling, reasoning,
deciding, and communicating.

While sensors (human inputs) and responders (human

outputs) are nicely mirrored, it is the brain that connects
them. Without sensing or experiencing the environment,
the brain would have little to do.
Perception
 Cognition

Sumber gambar: https://www.moedu-sail.org/metacognition-materials/

Memory
Language
Human
Performance
Humans use their sensors, brain, and
responders to do things. When the three
elements work together to achieve a goal,
human performance arises.
Reaction Time
Visual Search
Skilled Behavior
Attention

Human Error
Challenge :
Materi Pertemuan 3
Computer
Factor
Komputer ?
 Peralatan interaksi pada komputer dipengaruhi oleh Input dan Output,
seperti
 Input device
 Output device (monitor atau printer pada umumnya)
 Paper output and input
 Memory
 Processing

 PIRANTI INPUT
Piranti input adalah segala instrumen, peralatan dan mekanisme yang
dapat digunakan untuk memasukkan informasi ke dalam komputer.
Penelitian IMK bertujuan untuk membuat suatu piranti input yang
dapat memaksimalkan sifat-sifat fisik dan karakteristik kognitif manusia,
sehingga meningkatkan efisiensi, reabilitas, dan kenyamanan sistem.
Input Device
Audio Conversion Device
Barcode readers and
scanners
Biometrics
 When referring to computers and security, biometrics is the
identification of a person by the measurement of their biological
features.
 For example, a user identifying themselves to a computer or
building by their finger print or voice is considered a biometrics
identification. When compared to a password, this type of
system is much more difficult to fake since it is unique to the
person.

 Types of biometric devices

1. Face scanner
2. Hand scanner
3. Finger scanner
4. Retina or iris scanner
5. Voice scanner
Business Card Reader
Digital Camera or Camcorder
Electroencephalography
Gamepad, Joystick,
and Game Paddle
Game
Steering
Wheel
Gesture
Recognition
Graphics
tablet
Keyboard
Launchpad
Beban Jari
Dvorak
Keyboard
Magnetic Card Reader
Magnetic - Ink Character
Recognition
Mouse
Mouse

http://jrhs.umsha.ac.ir/index.php/JRHS/article/view/1089/html
Optical Mark Reader
Stylus
Scanner
Touchscreen
Voices Command with
Virtual Assistant
Video Capture
Virtual Reality
Webcam
 Flight
Simulator
Piranti Input (Keyboard
Model)
Uji Ketepatan Keyboard
PIRANTI INPUT Cursor Key

 Suatu bentuk pada layar yang digunakan untuk

menunjukkan posisi di layar
 Pengembangan dari keyboard (tombol arah)
 Kelemahan:
 Gerakan pointer lambat. Jika gerakan dibuat cepat
mengurangi ketepatan (akurasi)
 Repetitive strain injury (Dr.Leo M. Rozmaryn, M.D)
Output Device
3D Printer
Flat Panel
Projector
Sound Card
Speaker
Video Card
Pengembangan di masa
depan ???
Source: worldinfuture
Materi Pertemuan 4

Interaksi
The interaction
framework
observation

performance articulation
 Common Interaction
Styles
 Command line interface
 Menus
 Natural language
 Question/answer and query dialogue
 Form-fills
 Spreadsheets
 Point and click
 Three–dimensional interfaces
 WIMP
Command Line Interface
• Way of expressing instructions to the computer
directly
– function keys, single characters, short
abbreviations, whole words, or a combination
• Suitable for repetitive tasks
• Better for expert users than novices
• Offers direct access to system functionality
• Command names/abbreviations should be
meaningful!

Typical example: the Unix system

Menus
 Set of options displayed on the screen
 Options visible
– less recall - easier to use
– rely on recognition so names should be meaningful
 Selection by:
– numbers, letters, arrow keys, mouse
– combination (e.g. mouse plus accelerators)
 Often options hierarchically grouped
– sensible grouping is needed
 Restricted form of full WIMP system
Natural Language
 Familiar to user
 Speech recognition or typed natural language
 Problems
– vague
– ambiguous
– hard to do well!
 Solutions
– try to understand a subset
– pick on key words
Bahasa
Query Interfaces
 Question/answer interfaces
– user led through interaction via series of questions
– suitable for novice users but restricted functionality
– often used in information systems
Form-fills
 Primarily for data entry or data retrieval
 Screen like paper form
 Data put in relevant place
 Requires
good design
obvious correction facilities
Spreadsheets
 First spreadsheet VISICALC, followed by Lotus 1-2-3.
MS Excel most common today
 Sophisticated variation of form-filling
– grid of cells contain a value or a formula
– formula can involve values of other cells
e.g. sum of all cells in this column
– user can enter and alter data spreadsheet
maintains consistency
Point and Click Interfaces
 Used in
– multimedia
– web browsers
– hypertext
 Just click something
– icons, text links or location on map
 Minimal typing
 Three Dimensional
Interfaces
 Virtual reality
 ‘ordinary’ window systems
– highlighting
– visual affordance
– indiscriminate use just confusing!
 3D workspaces
– use for extra virtual space
– light and occlusion give depth
– distance effects
 WIMP
Interface
Windows
Icons
Menus
Pointers
… or windows, icons, mouse, and pull-down menus!
 Default style for majority of interactive computer
systems, especially PCs and desktop machines
Window Icon Menu Pointer
Windows
 Areas of the screen that behave as if they were
independent
– can contain text or graphics
– can be moved or resized
– can overlap and obscure each other, or can be laid out next
to one another (tiled)
 Scrollbars
– allow the user to move the contents of the window up and
down or from side to side
 Title bars
– describe the name of the window
Icons
 Small picture or image
 Represents some object in the interface
– often a window or action
 Windows can be closed down (iconised)
– small representation if many accessible windows
 Icons can be many and various
– highly stylised
– realistic representations
Icons
Menus
 Choice of operations or services offered on the
screen
 Required option selected with pointer

problem – take a lot of screen space

solution – pop-up: menu appears when needed
Kinds of Menus
 Menu Bar at top of screen (normally), menu
drags down
– pull-down menu - mouse hold and drag down menu
– drop-down menu - mouse click reveals menu
– fall-down menus - mouse just moves over bar!
 Contextual menu appears where you are
– pop-up menus - actions for selected object
– pie menus - arranged in a circle
 easier to select item (larger target area)
 quicker (same distance to any option)
… but not widely used!
pie menus
pop-up menus
 Cascading
menus
– hierarchical menu structure
– menu selection opens new menu
– and so in ad infinitum
 Keyboard accelerators
– key combinations - same effect as menu item
– two kinds
 active when menu open – usually first letter
 active when menu closed – usually Ctrl + letter
usually different !!!
Menus Design Issues

 Which kind to use

 What to include in menus at all
 Words to use (action or description)
 How to group items
 Choice of keyboard accelerators
Pointers
 Important component
– WIMP style relies on pointing and selecting things
 Uses mouse, trackpad, joystick, trackball, cursor
keys or keyboard shortcuts
 Wide variety of graphical images
 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!

Referensi:
1. Designing The User Interface
~ By Shneiderman, B., & Plaisant, C.
(2005)
2. Human-Computer Interaction: An
Empirical Research Perspective
~ By I. Scott MacKenzie (2013)
3. Materi IMK ~ Evangs Mailoa (2015)
4. www.google.com ☺