Company

LOGO

PENDAHULUAN1

Interaksi

Manusia

dan

Komputer

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 ]

IMK dalam konteks kerja dan tugas user melibatkan : Desain Implementasi Evaluasi

Sistem interaktif

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.

5

Kenapa kita perlu mempelajari IMK

untuk memungkinkan kita dalam merancang produk-produk interaktif yang mendukung manusia bekerja dalam kehidupan sehari-hari

Why

6

Kenapa kita perlu mempelajari IMK

Mengembangkan produk yang dapat digunakan agar: Mudah dipelajari Efektif untuk digunakan Memberikan pengalaman yang

menyenangkan

Why

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

Why

8

Seberapa cepat yang bisa dicapai?

9

Bagaimana keluar dari lift ?

10

Dimana mouse harus ditancapkan?

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

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.

13

IMKPhilosofi

Lingustik

Antropologi

Seni

Matematika

Seni Grafik

SosiologiAI

Ilmu Komputer

Psikologi

IMK berasal dari berbagai disiplin bidang ilmu...

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.

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.

16

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

17

Why Is This Important ?

Komputer (dalam satu sisi) sekarang mempengaruhi setiap orang dalam masyarakat Peningkatan persentase penggunaan

komputer dalam pekerjaan

Kesuksesan produk mungkin tergantung pada kemudahan penggunaan, bukan pada kekuatannya

18

Seperti apakah interface yang baik ?

Tidak mudah membuat sebuah interface.

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.

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).

Disainer Tugas-tugas User

Sistem Tereksekusi

21

PENTING !!!

Sistem komputer dibuat untuk membantu manusia.

22

USABILTY

23

Menurut Jacob Nielsen,  usability adalah atribut kualitas yang

menjelaskan atau mengukur seberapa mudah penggunaan suatu antar muka (interface). 

Kata “Usability” juga merujuk pada suatu metode untuk meningkatkan kemudahan pemakaian selama proses desain. 

24

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

25

Learnability

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

26

Learnability

Terlalu banyak tombolkah untuk sebuah mesin cuci ?

27

Efficiency

mengukur kecepatan mengerjakan tugas tertentu setelah mempelajari desain tersebut. 

28

Memorability

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

29

Aplikasi apa ini?Masih ingat cara menggunakannya?

30

Errors

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

31

Satisfaction

mengukur tingkat kepuasan dalam menggunakan desain.

32

Design principles

Visibility Feedback Constraints Mapping Consistency Affordance

[Don Norman: The Design of Everyday Things]

33

Visibility

kemampuan suatu obyek untuk melihat atau berhubungan dengan obyek lain

34

Feedback

Memberikan informasi balik kepada user setelah melakukan sebuah tindakan.

Meliputi suara, cahaya, animasi dan kombinasi dari ketiganya

35

Constraints

Membatasi tindakan yang mungkin yang dapat dilakukan

Membantu mencegah pengguna dari pemilihan opsi yang salah

Tiga jenis utama physical cultural logical

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.

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 .

38

Cultural constraints

Menggunakan perumpaan dari hal-hal umum yang berlaku untuk diterapkan pada teknologi aplikasi. Contoh : penggunaan gambar ikon, penamaan menu,

tombol keyboard

39

Mapping

Hubungan antara posisi kontrol dan arah gerakan yang dihasilkannya.

40

Which is the better mapping, and why?

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

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

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 '

44

External inconsistency

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

46

Physical affordances Apa benda-benda fisik berikut mampu? Apakah

affordance yang sudah jelas?

47

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

mereka?

48

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

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

50

Bad Example - An example of a poor UI

51

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

52

Good Example – MSDN allows users to score achievement points

53

Bad example: Can you find how to check in?

54

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

55

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

56

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