Dokumen tersebut membahas tentang Human-Computer Interaction (HCI) yang merupakan disiplin ilmu yang berkaitan dengan perancangan, evaluasi, dan implementasi sistem komputer interaktif untuk digunakan manusia beserta studinya. HCI melibatkan desain sistem interaktif, implementasi, dan evaluasi untuk mempelajari interaksi antara manusia, komputer, dan tugas mereka. Pembelajaran HCI penting untuk merancang produk interaktif yang mendukung manusia dalam

1. PENDAHULUAN
Company
LOGO

2. Interaksi Manusia dan Komputer
Human-Computer Interaction (HCI)
 Adalah disiplin ilmu yang berhubungan dengan
perancangan, evaluasi, dan implementasi
sistem komputer interaktif untuk digunakan
oleh manusia, serta studi fenomena-fenomena
besar yang berhubungan dengannya.
[ Definisi oleh ACM SIGCHI ]
2

3.  IMKdalam konteks kerja dan tugas user
melibatkan :
 Desain
Sistem
 Implementasi
interaktif
 Evaluasi

4.  Human Computer Interaction (HCI = IMK)
merupakan studi tentang interaksi antara
manusia, komputer dan tugas/ task.
Bagaimana manusia dan komputer secara
interaktif melaksanakan dan menyelesaikan
tugas/ task dan bagaimana sistem yang
interaktif itu dibuat.
4

5. Kenapa kita perlu mempelajari
IMK
 untuk memungkinkan kita dalam
merancang produk-produk interaktif
yang mendukung manusia bekerja
dalam kehidupan sehari-hari
5

6. Kenapa kita perlu mempelajari
IMK
 Mengembangkan produk yang
dapat digunakan agar:
 Mudah dipelajari
 Efektif untuk digunakan
 Memberikan pengalaman yang
menyenangkan
6

7. Kenapa kita perlu mempelajari
IMK
 Ada banyak desain di sekitar kita
yang dapat menyebabkan masalah
bagi pengguna
Desain yang baik melibatkan pemahaman
bagaimana pengguna berinteraksi dengan
komputer, dan memungkinkan mereka untuk
melakukannya secara efektif
7

8. Seberapa cepat yang bisa dicapai?
8

9. Bagaimana keluar dari lift ?
9

10. Dimana mouse harus
ditancapkan?
10

11. Untuk menghindari desain
bermasalah kita perlu ...
 Memperhitungkan
 siapa yang menggunakan
 kegiatan apa yang sedang dilakukan
 dimana interaksi berlangsung
 Mengoptimalkan interaksi pengguna
dengan produk
 sehingga akan sesuai antara kegiatan
pengguna dan kebutuhan
11

12. IMK meliputi ergonomi dan faktor manusia
 Ergonomi
• Secara tradisional, ergonomi memfokuskan pada
karakteristik fisik mesin dan sistem dan melihat unjuk
kerja (performance) dari user.
 Faktor manusia.
 Faktor manusia merupakan studi tentang manusia
dan tingkah lakunya dalam menggunakan mesin,
alat-alat teknologi dalam menyelesaikan tugas.
12

13. IMK berasal dari berbagai disiplin bidang
ilmu...
Ilmu
Komputer Seni
Psikologi
Lingustik
IMK Matematika
Philosofi
Seni Grafik
Antropologi
AI Sosiologi
13

14. Yang Terlibat Dalam IMK
 Psikologi dan ilmu kognitif :
 persepsi user, kognitif, kemampuan memecahkan
masalah
 Ergonomi :
 kemampuan fisik user
 Sosiologi :
 kemampuan memahami konsep interaksi
 Ilmu komputer dan teknik :
 membuat teknologi
 Bisnis :
 pemasaran
 Desain grafis :
 presentasi interface
 Dan lain-lain.
14

15.  User :
 siapa saja yang terlibat dalam menyelesaikan tugas
dengan menggunakan teknologi
 Komputer :
 teknologi, dari desktop sampai sistem komputer besar,
baik dari sistem pengontrolan proses atau sistem
embedded. Sistem ini mencakup yang non komputer,
maupun orang lain.
 Interaksi :
 komunikasi user dan komputer, dibedakan 2 (dua) yaitu :
• Langsung : dialog dengan feedback dan kontrol dari
performance tugas
• Tidak langsung : proses background dan batch.
15

16.  Apa
yang terjadi ketika manusia dan
komputer berkumpul bersama untuk
mengerjakan tugas ?
16

17. Why Is This Important ?
 Komputer
(dalam satu sisi) sekarang
mempengaruhi setiap orang dalam
masyarakat
 Peningkatan persentase penggunaan
komputer dalam pekerjaan
 Kesuksesanproduk mungkin tergantung
pada kemudahan penggunaan, bukan
pada kekuatannya
17

18. Seperti apakah interface yang
baik ?
Tidak mudah membuat sebuah interface.
18

19.  User
interface : lebih dari apa yang
manusia dapat lihat, sentuh atau dengar.
• User interface mencakup konsep, kebutuhan user
untuk mengetahui sistem komputer, dan harus
dibuat terintegrasi ke seluruh sistem.
• User interface tidak cukup hanya berpenampilan
„bagus‟ tetapi harus dapat mendukung tugas yang
dilakukan manusia dan dibuat menghindari
kesalahan-kesalahan kecil.
19

20.  Komputer dan peralatannya harus didesain
sesuai dengan kebutuhan yang diinginkan dan
dapat membantu manusia dalam pekerjaan
sehari-hari (disesuaikan dengan tugas khusus
yang diberikan).
Sistem Tugas-tugas
Disainer Tereksekusi User
20

21. Sistem komputer dibuat untuk membantu manusia.
PENTING !!!
21

22. USABILTY
22

23.  Menurut Jacob Nielsen,
 usability adalah atribut kualitas yang
menjelaskan atau mengukur seberapa mudah
penggunaan suatu antar muka (interface).
“Usability” juga merujuk pada suatu
 Kata
metode untuk meningkatkan kemudahan
pemakaian selama proses desain.
23

24.  Usability diukur dengan lima kriteria,
yaitu:
 Learnability,
 Efficiency,
 Memorability,
 Errors,
 Satisfaction.
24

25. Learnability
 mengukur tingkat kemudahan melakukan
tugas-tugas sederhana ketika pertama kali
menemui suatu desain.
25

26. Learnability
Terlalu banyak
tombolkah untuk
sebuah mesin cuci ?
26

27. Efficiency
 mengukur kecepatan mengerjakan tugas
tertentu setelah mempelajari desain tersebut.
27

28. Memorability
 Melihat seberapa cepat pengguna mendapatkan
kembali kecakapan dalam menggunakan desain
tersebut ketika kembali setelah beberapa
waktu.
28

29. Aplikasi apa ini?
Masih ingat cara menggunakannya?
29

30. Errors
 melihat seberapa banyak kesalahan yang dilakukan
pengguna, separah apa kesalahan yang dibuat, dan
semudah apa mereka mendapatkan penyelesaian.
30

31. Satisfaction
 mengukur
tingkat kepuasan dalam
menggunakan desain.
31

32. Design principles
 Visibility
 Feedback
 Constraints
 Mapping
 Consistency
 Affordance
[Don Norman: The Design of Everyday Things]
32

33. Visibility
 kemampuan suatu obyek untuk melihat
atau berhubungan dengan obyek lain
33

34. Feedback
 Memberikan informasi balik kepada user setelah
melakukan sebuah tindakan.
 Meliputi suara, cahaya, animasi dan kombinasi
dari ketiganya
34

35. Constraints
 Membatasi tindakan yang mungkin yang
dapat dilakukan
 Membantu mencegah pengguna dari
pemilihan opsi yang salah
 Tiga jenis utama
 physical
 cultural
 logical
35

36. Physical constraints
 Pencegahan kesalahan yang mengacu pada bentuk fisik
tertentu dari sebuah objek
Contoh :
Untuk memasukan mouse, hanya
ada satu posisi yang tepat pada
konektornya.
36

37. Logical constraints
 Penggunaan penalaran kita tentang hubungan
antara objek-objek yang ada disekitarnya.
 Hubungan antara gambar dengan objek
menjelaskan menjelaskan posisi dari benda yang
akan dihubungkan.
 Pemberikan kode warna untuk memperjelas
hubungan antara objek yang ada .
37

38. Cultural constraints
 Menggunakan perumpaan dari hal-hal umum
yang berlaku untuk diterapkan pada teknologi
aplikasi.
 Contoh : penggunaan gambar ikon, penamaan menu,
tombol keyboard
38

39. Mapping
 Hubungan antara posisi kontrol dan arah
gerakan yang dihasilkannya.
39

40.  Which is the better mapping, and why?
40

41. Consistency
 Desain antarmuka untuk memiliki operasi
serupa dan menggunakan unsur-unsur yang
sama untuk tugas yang sama
 Sebagai contoh:
 Selalu menggunakan ctrl key plus pertama awal
perintah untuk operasi-ctrl + C, ctrl + S, ctrl + O
 Manfaat utama adalah antarmuka yang
konsisten lebih mudah dipelajari dan digunakan
41

42. Consistency breakdowns
 Apa yang terjadi jika ada lebih dari satu perintah dimulai
dengan huruf yang sama?
Contoh :
 Perintah : save, spelling, select, style
 Harus menemukan inisial lain atau kombinasi dari kunci,
sehingga melanggar aturan konsistensi
Contoh :
 ctrl + S, ctrl + Sp, ctrl + shift + L
 Meningkatkan pembelajaran beban pada pengguna,
membuat mereka lebih rentan terhadap kesalahan
42

43. Internal And External
Consistency
 Konsistensi internal mengacu merancang
operasi untuk berperilaku sama dalam aplikasi
 Sulit untuk mencapai dengan antarmuka yang
kompleks
 Konsistensi eksternal mengacu merancang
operasi, antarmuka, dll, harus sama di seluruh
aplikasi dan perangkat
 Sangat jarang terjadi, berdasarkan preferensi
desainer yang berbeda '
43

44. External inconsistency
44

45. Affordances
 Mengacu pada atribut dari objek yang memungkinkan
bagaimana orang tahu cara menggunakannya
 Contoh : tombol mouse mengundang mendorong, pegangan
pintu affords menarik
 Norman (1988) menggunakan istilah untuk membahas
desain benda sehari-hari
 Karena telah banyak dipopulerkan dalam desain
interaksi untuk mendiskusikan bagaimana merancang
objek antarmuka
 Contoh : scrollbar untuk mampu bergerak naik dan turun, ikon
untuk mampu mengklik
45

46. Physical affordances
 Apa benda-benda fisik berikut mampu? Apakah
affordance yang sudah jelas?
46

47. Virtual affordances
 Bagaimana obyek layar berikut mampu?
 Bagaimana jika Anda adalah pengguna pemula?
 Apakah Anda tahu apa yang harus dilakukan dengan
mereka?
47

48. Bad Example – It might not have been a
good idea to place a male policeman
where the exhaust pipe is.
48

49.  Old MS Word - Because of the UI, people never knew how to use styles
 New MS Word - Because of the UI, people know intuitively how to use
styles 49

50.  Bad Example - An example of a poor UI
50

51.  Bad Example - Functional overload (a programmer probably
designed this one)
51

52.  Good Example –
MSDN allows users
to score achievement
points
52

53.  Bad example: Can you find how to
check in?
53

54.  Good example: What about here? Can you find how
to check in?
54

55. Blocks of 4 or less menu items are easier for the brain to
consume
55

56.  Even though the iPad has a larger
screen estate, it still uses a max of 4
icons across
56