Interaksi Manusia

- Komputer(IMK)
Human-Computer
Interaction (HCI)
Interaksi Manusia Dan Komputer (IMK)
Human-Computer Interaction (HCI)
Ada 3 aspek pada IMK

1.Aspek manusia
2.Aspek komputer
3.Aspek ergonomis

Perkembangan IMK
- Pertama sekali IMK berhubungan dengan dasar human factor
engineering untuk mendisain human computer interface.Di AS
human factor engineering muncul sebagai disiplin ilmu setelah PD II
untuk mendisain system militer
- Kemudian digunakan untuk aplikasi lain seperti keselamatan lalu
lintas jalan raya,disain lingkungan industri,dll
- Berikutnya bebapa ahli mengembangkan penelitian perangkat keras
seperti: desain CRT system,input devices yang didukung oleh
informasi pada biomechanic anthropometry.Selanjutnya beralih ke
dasar dasar presentasi informasi yaitu human formation processing
& cognition
- IMK adalah gabungan ilmu komputer
human factor engineering dan
prilaku.Berikutnya berkembang menjadi
gabungan antara ilmu linguistik dan
disain grafis yang akan menjadi alat untuk
human factor engineering yang
berorientasi ke perancangan
- Perkembangan selanjutnya adalah
pembuatan interface berbasis suara.
- Selanjutnya…
Sebuah program aplikasi
terdiri dari 2 bagian yaitu :
1.Interface,berfungsi sebagai sarana dialog
antara manusia & computer.Berhubungan
dengan cara penyajian informasi yang
semudah dan semenarik mungkin.
2.Aplikasi,berfungsi untuk menghasilkan
informasi berdasarkan olahan data yang sudah
dimasukkan oleh user melalui algoritma yang
diisyaratkan oleh aplikasi. Bagian aplikasi
mengimplementasikan 1 atau lebih algoritma
yang saling berhubungan untuk
menyelesaikan suatu persoalan
 Interface Manusia & Komputer
Contoh:

var A,B,C:integer; Output:

begin
write(‘Masukkan nilai A=‘);
readln A;
write(‘Masukkan nilai B=‘); Masukkan nilai A=4
readln B;
if B=0 then
Masukkan nilai B=2
writeln(‘Pembagian dengan C=2
0 tidak diijinkan’);
else
begin
C:=A div B;
writeln (‘C= ‘,C);
end;
End.
Jika data banyak maka digunakan interface
berbasis grafis,mis : pengisian formulir
Contoh:
Evolution of HCI ‘interfaces’
• 50s - Interface di tingkat perangkat keras untuk
engineers - switch panels
• 60-70s - interface di tingkat programming -
COBOL, FORTRAN
• 70-90s - Interface ditingkat terminal - command
languages, contoh: DOS
• 80s - Interface di tingkat dialog interaksi - GUIs,
multimedia
• 90s - Interface di work setting - networked
systems, groupware
• 00s - Interface menjadi pervasive (meluas)
– RF tags, Bluetooth technology, mobile devices,
consumer electronics, interactive screens,
embedded technology
 Apakah Paradigms
• Kerangka theoretis utama atau pandangan
dunia ilmiah
– e.g., Aristotelian, Newtonian, Einsteinian
(relativistic) paradigms in physics
• Memahami sejarah IMK secara luas
tentang pemahaman serangkaian
pergeseran paradigma
– Tidak semua daftar disini memerlukan
pergeseran ‘paradigma’, tetapi paling tidak
merupakan candidates
– Sejarah akan menetukan mana pergeseran
yang benar
 Paradigms of interaction
• Teknologi komputer yang baru,
mambuat persepsi baru dari
hubungan manusia—computer.
• Kita dapat menelusuri beberapa
pergeseran ini dalam sejarah
teknologi interaktif.
 The initial paradigm
• Batch processing

Impersonal computing
 Example Paradigm Shifts
• Batch processing
• Time-sharing

Interactive computing
 Example Paradigm Shifts
• Batch processing
• Timesharing @#$% !

• Networking

???

Community computing
 Example Paradigm Shifts
• Batch processing
• Timesharing C…P… filename
dot star… or was
Move this file here,
and copy this to there.
• Networking it R…M?

• Graphical % foo.bar

displays
ABORT
dumby!!!

Direct manipulation
 Example Paradigm Shifts
• Batch processing
• Timesharing
• Networking
• Graphical display
• Microprocessor

Personal computing
 Example Paradigm Shifts
• Batch processing
• Timesharing
• Networking
• Graphical display
• Microprocessor
• WWW
Global information
 Example Paradigm Shifts
• A symbiosis of
• Batch processing physical and electronic
• Timesharing worlds in service of
everyday activities.
• Networking
• Graphical display
• Microprocessor
• WWW
• Ubiquitous
Computing
 Time-sharing
• 1940s and 1950s – explosive technological
growth

• 1960s – need to channel the power

• J.C.R. Licklider at ARPA

• single computer supporting multiple users

 Video Display Units
• more suitable medium than paper

• 1962 – Sutherland's Sketchpad

• computers for visualizing and manipulating

data

• one person's contribution could drastically

change the history of computing
 Programming toolkits
• Engelbart at Stanford Research Institute

• 1963 – augmenting man's intellect

• 1968 NLS/Augment system demonstration

• the right programming toolkit provides

building blocks to producing complex
interactive systems
 Personal computing
• 1970s – Papert's LOGO language for simple
graphics programming by children

• A system is more powerful as it becomes

easier to user

• Future of computing in small, powerful

machines dedicated to the individual

• Kay at Xerox PARC – the Dynabook as the

ultimate personal computer
 Window systems and the
WIMP interface
• humans can pursue more than one task at a
time

• windows used for dialogue partitioning, to

“change the topic”

• 1981 – Xerox Star first commercial

windowing system

• windows, icons, menus and pointers now

familiar interaction mechanisms
 Metaphor
• relating computing to other real-world
activity is effective teaching technique
– LOGO's turtle dragging its tail
– file management on an office desktop
– word processing as typing
– financial analysis on spreadsheets
– virtual reality – user inside the metaphor

• Problems
– some tasks do not fit into a given metaphor
– cultural bias
 Direct manipulation
• 1982 – Shneiderman describes appeal of
graphically-based interaction
– visibility of objects
– incremental action and rapid feedback
– reversibility encourages exploration
– syntactic correctness of all actions
– replace language with action

• 1984 – Apple Macintosh

• the model-world metaphor
• What You See Is What You Get (WYSIWYG)
 Language versus Action
• actions do not always speak louder than
words!
• DM – interface replaces underlying system
• language paradigm
• interface as mediator
• interface acts as intelligent agent
• programming by example is both action
and language
 Hypertext
• 1945 – Vannevar Bush and the memex

• key to success in managing explosion of

information

• mid 1960s – Nelson describes hypertext as

non-linear browsing structure

• hypermedia and multimedia

• Nelson's Xanadu project still a dream today

 Multimodality
• a mode is a human communication
channel

• emphasis on simultaneous use of

multiple channels for input and
output
 Computer Supported
Cooperative Work (CSCW)
• CSCW removes bias of single user /
single computer system

• Can no longer neglect the social

aspects

• Electronic mail is most prominent

success
 The World Wide Web
• Hypertext, as originally realized, was
a closed system
• Simple, universal protocols (e.g.
HTTP) and mark-up languages (e.g.
HTML) made publishing and
accessing easy
• Critical mass of users lead to a
complete transformation of our
information economy.
 Agent-based Interfaces
• Original interfaces
– Commands given to computer
– Language-based
• Direct Manipulation/WIMP
– Commands performed on “world”
representation
– Action based
• Agents - return to language by instilling
proactivity and “intelligence” in command
processor
– Avatars, natural language processing
 Ubiquitous Computing
The most profound technologies are those
that disappear.”
Mark Weiser, 1991

Late 1980’s: computer was very apparent

How to make it disappear?

– Shrink and embed/distribute it in the physical
world
– Design interactions that don’t demand our
intention
Sensor-based and Context-
aware Interaction
• Humans are good at recognizing the
“context” of a situation and reacting
appropriately
• Automatically sensing physical phenomena
(e.g., light, temp, location, identity)
becoming easier
• How can we go from sensed physical
measures to interactions that behave as if
made “aware” of the surroundings?
 Dari IMK ke Perancangan
Interaksi
• Interaksi Manusia-Komputer (IMK) adalah:
“mengenai perancangan, evaluasi dan implementasi
dari system komputer interaktif untuk digunakan
manusia dan dengan belajar dari fenomena utama
disekelilingnya.” (ACM SIGCHI, 1992, p.6)
• Perancangan Interaction (Interaction Design –ID)
adalah: “perancangan tempat untuk komunikasi
manusia dan interaksi” -Winograd (1997)
• ID: Merancang product yang interaktif untuk
mendukung manusia di setiap harinya dan
pekerjaannya. -Sharp, Rogers and Preece (2002)
• Bertambahnya, lebih banyak bidang aplikasi,
teknologi yang lebih dan lebih banyak masalah yang
dipertimbangkan ketika merancang ‘interfaces’
 Goals of interaction design
• Mengembangkan produk yang bisa
digunakan
- Usability berarti mudah digunakan,
effective untuk digunakan dan
menyediakan pengalaman yang
menyenangkan
- Melibatkan user dalam proses
perancangan
 Relationship between Interction
Design (ID), HCI and other fields
Academic
Design practices
disciplines
(e.g. graphic design)
(e.g. computer
science,
psychology)
Interaction
Design

Interdisciplinary fields
(e.g HCI, CSCW)
 Relationship between ID,
HCI and other fields
• Disiplin ilmu yang berhubungan pada
ID:
– Psychology
– Social Sciences
– Computing Sciences
– Engineering
– Ergonomics
– Informatics
 Relationship between ID,
HCI and other fields
• Latihan perancangan yang
berhubungan pada ID:
– Graphic design
– Product design
– Artist-design
– Industrial design
– Film industry
 Relationship between ID,
HCI and other fields
• Bidang ilmu pengetahuan yang
‘diperlukan’ pada interaction design:

– HCI
– Human Factors
– Cognitive Engineering
– Cognitive Ergonomics
– Computer Supported Co-operative Work
– Information Systems
 Apa yang bisa dilakukan oleh
professional pada bisnis ID?
• interaction designers – orang yang terlibat dalam
perancangan keseluruhan aspek interaktif dari sebuah
product.

• usability engineers – orang yang fokus pada meng-evaluasi

products, menggunakan usability methods and principles

• web designers – orang yang mengembangkan dan

membuat perancangan visual dari websites, seperti layouts

• information architects – orang yang mempunyai ide

tentang bagaimana merencanakan dan membuat structure
interactive products

• user experience designers – orang yang melakukan semua

hal diatas tapi juga yang membawa bidang ilmu untuk
mengetahui perancangan products.
Apa yang dilibatkan dalam
proses perancangan interaksi
• Mengidentifikasi kebutuhan dan
membuat syarat-syaratnya.
• Mengembangkan alternatif
perancangan.
• Membangun prototype yang
interaktif yang dapat
dikomunikasikan dan diperkirakan.
• Mengevaluasi apakah sudah
membuat seluruh proses
 Karakteristik Inti ID
• users harus dilibatkan pada
pengembangan project
• Kegunaan khusus dan tujuan
kebutuhan user diidentifikasikan,
mendokumntasikan dengan jelas dan
setuju memulai project
• Pengulangan diperlukan melalui
aktivitas inti
 Tujuan Penggunaan
• Effective untuk digunakan
• Efficient untuk digunakan
• Aman untuk digunakan
• Mempunyai utility yang baik
• Mudah dipelajari
• Mudah diingat bagaimana cara
menggunakannya
 Activitas pada penggunaan
• Berapa lama harus melakukannya dan berapa
lama seharusnya melakukannya:
– Menggunakan sebuah VCR untuk ‘play’ video?
– Menggunakan sebuah VCR to ‘pre-record’ two
programs?
– Menggunakan suatu ‘authoring tool’ untuk
membuat website?
 User experience goals
– Satisfying - Rewarding
– Fun - support creativity
– Enjoyable - emotionally
– Entertaining fulfilling
– Helpful - …and more
– Motivating
– Aesthetically
pleasing
Prinsip-prinsip Perancangan
• Umumnya abstractions untuk berfikir
tentang aspek yang berbeda dari
perancangan
• ‘Yang boleh’ dan ‘tidak’ of interaction
design
• Apa yang tersedia dan tidak pada interface
• Menurunkan dari suatu gabungan teori-
based knowledge, experience and
common-sense
 Visibility (Penglihatan)
Ini adalah suatu control panel
untuk elevator.
• Bagaimana ia bekerja?
• Tekan tombol untuk lantai
yang diinginkan?
• Tidak terjadi apa-apa.tekan
tombol lainnya? Tetap tidak
terjadi apa-apa. Apa yang
harus dilakukan?

Ini tidak kelihatan apa yang

dilakukan!
From: www.baddesigns.com
Visibility…
…anda perlu memasukkan room card
anda agar elevator bekerja!

Bagaimana anda membuat tindakan

ini lebih kelihatan?
- Buat card reader lebih jelas
- Sediakan pesan yang bisa didengar,
yang mengatakan apa yang harus
dilakukan (bahasa yang mana?)
- Sediakan label yang besar kemudian
card reader bercahaya ketika
sesorang memasukkannya.
- Buat bagian yang berhubungan
terlihat
- Buat apa yang sudah dilakukan
dengan jelas.
 Feedback
• Kirim informasi kembali ke user tentang
apa yang sudah dilakukan
• Termasuk suara, highlighting, animation
dan kombinasinya.
• Contoh: ketika screen button ditekan
muncul suara or red highlight feedback:
“ccclichhk”
 Constraints
• Restricting the possible actions that
can be performed
• Helps prevent user from selecting
incorrect options
• Three main types (Norman, 1999)
–physical
–cultural
–logical
 Physical constraints
• Refer to the way physical objects restrict
the movement of things
– E.g. only one way you can insert a key into a
lock
• How many ways can you insert a CD or
DVD disk into a computer?
• How physically constraining is this action?
• How does it differ from the insertion of a
floppy disk into a computer?
 Logical constraints
• Exploits people’s everyday common
sense reasoning about the way the
world works

• An example is they logical

relationship between physical layout
of a device and the way it works as
the next slide illustrates
 How to design them more
logically
(i) A. menyediakan
pemetaan
penyesuaian langsung
antara icon dan
connector

(ii) B. menyediakan code

warna yang
menghubungkan
connectors dengan
labels
From: www.baddesigns.com
 Cultural constraints
• Pelajari kebiasaan
yang berubah-ubah
seperti segitiga merah
untuk peringatan

• Dapat dianggap
universal or culturally
specific
 Mapping (Pemetaan)
• Hubungan antara controls dan
pergerakannya dan hasil didunia
• Kenapa ini merupakan suatu
mapping of control buttons yang
buruk?
 Mapping
• Kenapa ini merupakan mapping yang lebih
baik?

• The control buttons dipetakan lebih baik

pada mengurutkan tindakan fast rewind,
rewind, play and fast forward
 Activity on mappings
– Which controls go with which rings
(burners)?

A B C D
Why is this a better design?
 Consistency
• Design interfaces to have similar
operations and use similar elements
for similar tasks
• For example:
– always use ctrl key plus first initial of
the command for an operation – ctrl+C,
ctrl+S, ctrl+O
• Main benefit is consistent interfaces
are easier to learn and use
 When consistency breaks
down
• What happens if there is more than one
command starting with the same letter?
– e.g. save, spelling, select, style
• Have to find other initials or combinations
of keys, thereby breaking the consistency
rule
– E.g. ctrl+S, ctrl+Sp, ctrl+shift+L
• Increases learning burden on user, making
them more prone to errors
 Internal and external
consistency
• Internal consistency refers to designing
operations to behave the same within an
application
– Difficult to achieve with complex interfaces
• External consistency refers to designing
operations, interfaces, etc., to be the
same across applications and devices
– Very rarely the case, based on different
designer’s preference
 Internal and external
consistency
• Internal consistency refers to designing
operations to behave the same within an
application
– Difficult to achieve with complex interfaces
• External consistency refers to designing
operations, interfaces, etc., to be the
same across applications and devices
– Very rarely the case, based on different
designer’s preference
 Keypad numbers layout
• Internal and external consistency

(a) phone, remote control (b) Calculator, computer

keypads

1 2 3 7 8 9
4 5 6 4 5 6
7 8 9 1 2 3
0 0
 Affordances: to give a clue
• Refers to an attribute of an object that
allows people to know how to use it
– e.g. a mouse button invites pushing, a door
handle affords pulling
• Norman (1988) used the term to discuss
the design of everyday objects
• Since has been much popularised in
interaction design to discuss how to design
interface objects
– e.g. scrollbars to afford moving up and down,
icons to afford clicking on
What does ‘affordance’ have
to offer interaction design?
• Interfaces are virtual and do not have
affordances like physical objects
• Norman argues it does not make sense to
talk about interfaces in terms of ‘real’
affordances
• Instead interfaces are better
conceptualised as ‘perceived’ affordances
– Learned conventions of arbitrary mappings
between action and effect at the interface
– Some mappings are better than others
 Activity
– Physical affordances:
How do the following physical objects
afford? Are they obvious?
 Activity
– Virtual affordances (kemampuan virtual)
Bagaimana mengikuti kemampuan tampilan
object?
Bagaimana jika anda user baru?
Tahukah anda apa yang anda lakukan dengan
object tersebut?
Typical engineering development life-
cycle
Engineering Development life-cycle with added HCl
Engineering development life-cycle with
added HCl practitioners and specialists