Buku 2: RKPM INTERAKSI MANUSIA KOMPUTER

UNIVERSITAS GADJAH MADA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM JURUSAN ILMU KOMPUTER DAN ELEKTRONIKA PROGRAM STUDI ILMU KOMPUTER Sekip Unit III, FMIPA Gedung Selatan Sleman, Jogjakarta, 55281

Buku 2: RKPM (Rencana Kegiatan Pembelajaran Mingguan dan Modul Pembelajaran)

INTERAKSI MANUSIA KOMPUTER Semester Gasal/3 SKS/ MIK3401 oleh 1. Faizah, S.Kom., M.Kom. 2. Yunita Sari, S.Kom., M.Sc.

Didanai dengan dana BOPTN P3-UGM Tahun Anggaran 2012 Desember 2012

1. Pengenalan IMK 2. Kontrak belajar, Motivasi pembelajaran IMK (latar belakang)

Web4

Pendahuluan

Pentingnya perancangan antarmuka yang baik

Metode Ajar (STAR)3

Soal-tugas

Dapat menjelaskan:

Metode Evaluasi dan Penilaian2

Audio/Video

Topik (pokok, subpokok bahasan, alokasi waktu)

Gambar

Tujuan Ajar/ Keluaran/ Indikator

Presentasi

1

Media Ajar1

Teks

Pertemuan minggu ke-

Rencana Kegiatan Pembelajaran Mingguan (RKPM)







-



-

Tugas dengan skor 0-100 (PAN)

Mahasiswa berkelompo k dan berdiskusi







-



-



Waktu: 1x pertemuan @150 menit 2

Dapat menjelaskan:

Dasar-dasar IMK :


1. Faktor manusia dan computer. 2. Sisi ergonomis Waktu: 1x pertemuan

1

Aktivitas Mahasiswa

1. Baca bahan ajar sebelum kuliah, 2. Mendengarka n penjelasan dosen dan diskusi dalam kelompok 3. Mengerjakan tugas 1. Baca bahan ajar sebelum kuliah, 2. Mendengarka n penjelasan dosen dan

Aktivitas Dosen/ Nama Pengajar

Sumber Ajar

Memandu diskusi dan menjelaskan di depan kelas. Pengajar: Yunita Sari

Pustaka: 1


Pustaka: 1

Masing-masing media ajar disertakan dalam bentuk handout setiap minggu/pertemuan. Evaluasi mahasiswa dapat berupa: Kuis, Tugas, Self-Test, Tes formatif, Tes sumatif. Evaluasi mahasiswa ditujukan untuk mengukur ketercapaian tujuan (pada Kolom 2). 3 UGM menggunakan sistem pembelajaran STAR (Student Teacher Aesthetic Role-Sharing): kombinasi optimal antara SCL (Student Centered Learning) dan TCL (Teacher Centered Learning). 4 Tautan di internet disajikan dalam kolom terakhir (Sumber Ajar). Untuk materi online yang dikembangkan sendiri gunakan LMS eLisa http://elisa.ugm.ac.id/ 2

@150 menit

3. 3

Dapat menjelaskan:


Dasar IMK :







-



-

Interaction Style Waktu: 1x pertemuan @150 menit



1.

2.

3. 4

Dapat menjelaskan:


Dasar IMK : Faktor interaksi







-



-

Paradigma Waktu: 1x pertemuan @150 menit



1.

2.

3. 5

Dapat menjelaskan:

Hal-hal yang perlu diperhatikan dalam proses perancangan

Dasar-dasar perancangan interaksi : Teori, prinsip-prinsip dan panduan desain antar muka berdasarkan “Golden Rules of Interaction Design”Waktu: 1x pertemuan @150 menit







-



-



1.

2.

3.

diskusi dalam kelompok Mengerjakan tugas Baca bahan ajar sebelum kuliah, Mendengarka n penjelasan dosen dan diskusi dalam kelompok Mengerjakan tugas Baca bahan ajar sebelum kuliah, Mendengarka n penjelasan dosen dan diskusi dalam kelompok Mengerjakan tugas Baca bahan ajar sebelum kuliah, Mendengarka n penjelasan dosen dan diskusi dalam kelompok Mengerjakan


Pustaka: 1


Pustaka: 1


Pustaka: 1

6

Dasar-dasar perancangan interaksi : Mengelola proses perancangan, Teknikteknik pemodelan user: KLM, GOMS, OAI, dll Waktu: 1x pertemuan @150 menit







-



-



Evaluasi pemahaman mahasiswa secara menyeluruh.

Ujian Tengah Semester (UTS)



-

-

-

-

-

Tes summatif (PAN)

-

Dapat menjelaskan:

Tipe-tipe interaksi :







-



-









-



-



Dapat menjelaskan:

Hal-hal yang perlu diperhatikan dalam proses perancangan

7

8

Perbedaan jenis-jenis Menu & form fillin Waktu: 1x pertemuan tipe interaksi serta menerapkan panduan @150 menit perancangannya

9

Dapat menjelaskan:

Perbedaan jenis-jenis tipe interaksi serta menerapkan panduan perancangannya

Tipe-tipe interaksi : Bahasa perintah dan bahasa alami, Manipulasi langsung & virtual reality Waktu: 1x pertemuan @150 menit

tugas 1. Baca bahan ajar sebelum kuliah, 2. Mendengarka n penjelasan dosen dan diskusi dalam kelompok 3. Mengerjakan tugas


Pustaka: 1

Mahasiswa mengerjakan UTS secara individu di kelas.

Menyiapkan UTS

Seluruh bahan kuliah sejak dari awal.

1. Baca bahan ajar sebelum kuliah, 2. Mendengarka n penjelasan dosen dan diskusi dalam kelompok 3. Mengerjakan tugas 1. Baca bahan ajar sebelum kuliah, 2. Mendengarka n penjelasan dosen dan diskusi dalam kelompok

Memandu diskusi dan menjelaskan di depan kelas. Pengajar: Faizah

Pustaka: 1


Pustaka: 1

10

Dapat menjelaskan:







-



-



Prototyping & alat bantu perancangan : Metode-metode pembuatan prototipe teknik-teknik yang dapat digunakan sebagai alat bantu perancangan antarmuka Waktu: 1x pertemuan @150 menit







-



-



Evaluasi desain







-



-



Perancangan pesan

sistem, tampilan layar, 1. Perbedaan jenisjenis tipe interaksi dan warna : serta menerapkan Beberapa panduan umum dalam panduan perancangan pesan perancangannya sistem, tampilan layar 2. Rancangan dan warna antarmuka yang Waktu: 1x pertemuan baik sesuai dengan @150 menit prinsip-prinsip interaksi manusia komputer 11

Dapat menjelaskan: 1. Rancangan

antarmuka yang baik sesuai dengan prinsip-prinsip interaksi manusia komputer 2. Proses pembuatan prototipe antarmuka sebagai media presentasi hasil rancangan 12

Dapat menjelaskan:

Hasil evaluasi desain antarmuka yang kurang baik dan memilih teknik evaluasi yang sesuai

antarmuka : Ulasan pakar dan uji usability

3. Mengerjakan tugas 1. Baca bahan ajar sebelum kuliah, 2. Mendengarka n penjelasan dosen dan diskusi dalam kelompok 3. Mengerjakan tugas


Pustaka: 1

1. Baca bahan ajar sebelum kuliah, 2. Mendengarka n penjelasan dosen dan diskusi dalam kelompok 3. Mengerjakan tugas


Pustaka: 1

1. Baca bahan ajar sebelum kuliah, 2. Mendengarka n penjelasan

Memandu diskusi dan menjelaskan di depan kelas. Pengajar:

Pustaka: 1

dengan kebutuhan

Waktu: 1x pertemuan @150 menit

3. 13

Dapat menjelaskan:

Hasil evaluasi desain antarmuka yang kurang baik dan memilih teknik evaluasi yang sesuai dengan kebutuhan

14

Evaluasi pemahaman mahasiswa secara menyeluruh.

Antarmuka masa lalu dan masa depan:







-



-

Perkembangan teknologi antarmuka



Beberapa antarmuka masa depan Waktu: 1x pertemuan @150 menit Ujian Akhir Semester (UAS)

1.

2.

3. 

-

-

-

-

-

Tes summatif (PAN)

-

dosen dan diskusi dalam kelompok Mengerjakan tugas Baca bahan ajar sebelum kuliah, Mendengarka n penjelasan dosen dan diskusi dalam kelompok Mengerjakan tugas

Mahasiswa mengerjakan UAS secara individu di kelas.

Faizah


Pustaka: 1

Menyiapkan UAS

Seluruh bahan kuliah sejak dari UTS

DAFTAR ISI DAFTAR ISI.............................................................................................................................. 1 TINJAUAN MATA KULIAH ................................................................................................... 7 Deskripsi Singkat Mata Kuliah .............................................................................................. 7 Tujuan Mata Kuliah ............................................................................................................... 7 Susunan Bahan Ajar ............................................................................................................... 7 Petunjuk penggunaan bahan ajar ............................................................................................ 8 BAB 1 Pengenalan IMK ............................................................................................................ 9 1.1

Pendahuluan ................................................................................................................ 9

1.1.1

Deskripsi singkat .................................................................................................. 9

1.1.2

Manfaat ................................................................................................................ 9

1.1.3

Relevansi .............................................................................................................. 9

1.1.4

Learning Outcomes................................................................................................. 9

Mahasiswa dapat menjelaskan pentingnya perancangan antarmuka yang baik ................. 9 1.2

Penyajian ..................................................................................................................... 9

1.2.1

Materi, Contoh dan Ilustrasi ................................................................................ 9

1.2.2

Aktivitas ............................................................................................................. 14

1.2.3

Latihan dan Solusi.............................................................................................. 15

1.3

Penutup ...................................................................................................................... 16

1.3.1

Petunjuk Penilaian dan Umpan Balik ................................................................ 16

1.3.2

Tindak Lanjut ..................................................................................................... 16

BAB 2 Manusia........................................................................................................................ 17 2.1

Pendahuluan .............................................................................................................. 17

2.1.1

Deskripsi singkat ................................................................................................ 17

2.1.2

Manfaat .............................................................................................................. 17

2.1.3

Relevansi ............................................................................................................ 17

2.1.4

Learning Outcomes ............................................................................................ 17

2.2

Penyajian ................................................................................................................... 17

2.2.1

Materi, Contoh dan Ilustrasi .............................................................................. 17

2.2.2

Aktivitas ............................................................................................................. 24

2.2.3

Latihan dan Solusi............................................................................................. 25 1

2.2.4 2.3

Rangkuman ........................................................................................................ 25

Penutup ...................................................................................................................... 26

2.3.1


2.3.2

Tindak Lanjut ..................................................................................................... 26

BAB 3 Komputer ..................................................................................................................... 27 3.1

Pendahuluan .............................................................................................................. 27

3.1.1


3.1.2

Manfaat .............................................................................................................. 27

3.1.3

Relevansi ............................................................................................................ 27

3.1.3


3.2

Penyajian ................................................................................................................... 27

3.2.1


3.2.2

Aktivitas ............................................................................................................. 31

3.2.3


3.3

Penutup ...................................................................................................................... 32

3.3.1


3.3.2

Tindak Lanjut ..................................................................................................... 32

BAB 4 Interaction .................................................................................................................... 33 4.1

Pendahuluan .............................................................................................................. 33

4.1.1


4.1.2

Manfaat .............................................................................................................. 33

4.1.3

Relevansi ............................................................................................................ 33

4.1.4


4.2

Penyajian ................................................................................................................... 33

4.2.1


4.2.2

Aktivitas ............................................................................................................. 35

4.2.3

Latihan dan Tugas .............................................................................................. 35

4.3

Penutup ...................................................................................................................... 36

4.3.1


4.3.2

Tindak Lanjut ..................................................................................................... 36

BAB 5 Paradigma Interaksi ..................................................................................................... 37 5.1

Pendahuluan .............................................................................................................. 37

5.1.1

Deskripsi singkat ................................................................................................ 37 2

5.1.2

Manfaat .............................................................................................................. 37

5.1.3

Relevansi ............................................................................................................ 37

5.1.4


5.2 Penyajian ........................................................................................................................ 37 5.2.1


5.2.2

Aktivitas ............................................................................................................. 39

5.2.3


5.3

Penutup ...................................................................................................................... 40

5.3.1


5.3.2

Tindak Lanjut ..................................................................................................... 40

BAB 6 Dasar-Dasar Perancangan Interaksi (1) ....................................................................... 41 6.1

Pendahuluan .............................................................................................................. 41

6.1.1


6.1.2

Manfaat .............................................................................................................. 41

6.1.3

Relevansi .............................................................................................................. 41

6.1.2


6.2 Penyajian ........................................................................................................................ 41 6.2.1


6.2.2

Aktivitas ............................................................................................................. 42

6.2.3


6.3.1


6.3.2

Tindak Lanjut ..................................................................................................... 43

BAB 7 Dasar-Dasar Perancangan Interaksi (2) ....................................................................... 44 7.1

Pendahuluan .............................................................................................................. 44

7.1.1


7.1.2

Manfaat .............................................................................................................. 44

7.2

Penyajian ................................................................................................................... 44

7.2.1


7.2.2

Aktivitas ............................................................................................................. 46

7.2.3


7.3

Penutup ...................................................................................................................... 47

7.3.1


7.3.2

Tindak Lanjut ..................................................................................................... 47 3

Contoh UTS.......................................................................................................................... 48 BAB 8 TIPE-TIPE INTERAKSI ............................................................................................. 49 8.1

Pendahuluan .............................................................................................................. 49

8.1.1


8.1.2

Manfaat .............................................................................................................. 49

8.1.3

Relevansi ............................................................................................................ 49

8.1.4


8.2

Penyajian ................................................................................................................... 50

8.2.1


8.2.2

Aktivitas ............................................................................................................. 57

8.2.3


8.2.4

Rangkuman ........................................................................................................ 59

8.3

Penutup ...................................................................................................................... 59

8.3.1


8.3.2

Tindak Lanjut ..................................................................................................... 59

8.3.3 Materi Pengayaan .................................................................................................... 60 BAB 9 ...................................................................................................................................... 61 PERANCANGAN PESAN SISTEM, ..................................................................................... 61 TAMPILAN LAYAR, DAN WARNA ................................................................................... 61 9.1

Pendahuluan .............................................................................................................. 61

9.1.1


9.1.2

Manfaat .............................................................................................................. 61

9.1.3

Relevansi ............................................................................................................ 61

9.1.4


9.2

Penyajian ................................................................................................................... 62

9.2.1


9.2.2

Aktivitas ............................................................................................................. 67

9.2.3


9.2.4

Rangkuman ........................................................................................................ 68

9.3

Penutup ...................................................................................................................... 68

9.3.1

Petunjuk Penilaian dan Umpan Balik ............................................................... 68

9.3.2

Tindak Lanjut ..................................................................................................... 68

9.3.3

Materi Pengayaan............................................................................................... 69 4

BAB 10 .................................................................................................................................... 70 PROTOTYPING & ALAT BANTU PERANCANGAN ........................................................ 70 10.1 Pendahuluan .............................................................................................................. 70 10.1.1


10.1.2

Manfaat .............................................................................................................. 70

10.1.3

Relevansi ............................................................................................................ 70

10.1.4


10.2 Penyajian ................................................................................................................... 71 10.2.1


10.2.2

Aktivitas ............................................................................................................. 74

10.2.3

Latihan dan Solusi............................................................................................. 75

10.2.4

Rangkuman ........................................................................................................ 75

10.3 Penutup ...................................................................................................................... 76 10.3.1


10.3.2

Tindak Lanjut ..................................................................................................... 76

10.3.3

Materi Pengayaan............................................................................................... 76

BAB 11 .................................................................................................................................... 77 EVALUASI DESAIN ANTARMUKA ................................................................................... 77 11.1 Pendahuluan .............................................................................................................. 77 11.1.1


11.1.2

Manfaat .............................................................................................................. 77

11.1.3

Relevansi ............................................................................................................ 77

11.1.4


11.2 Penyajian ................................................................................................................... 77 11.2.1


11.2.2 Aktivitas................................................................................................................. 82 11.2.3 Latihan dan Solusi ................................................................................................ 82 11.2.4

Rangkuman ........................................................................................................ 83

11.3 Penutup ...................................................................................................................... 83 11.3.1


11.3.2

Tindak Lanjut ..................................................................................................... 83

11.3.3 Materi Pengayaan .................................................................................................. 84 BAB 12 .................................................................................................................................... 85 5

ANTARMUKA MASA LALU DAN MASA DEPAN ........................................................... 85 12.1 Pendahuluan .............................................................................................................. 85 12.1.1


12.1.2

Manfaat .............................................................................................................. 85

12.1.3

Relevansi ............................................................................................................ 85

12.1.4


12.2 Penyajian ................................................................................................................... 85 12.2.1


12.2.2

Aktivitas ............................................................................................................. 88

12.2.3


12.2.4

Rangkuman ........................................................................................................ 89

12.3 Penutup ...................................................................................................................... 89 12.3.1 12.3.2

Petunjuk Penilaian dan Umpan Balik .................................................................... 89 Tindak Lanjut ..................................................................................................... 89

12.3.3 Materi Pengayaan .................................................................................................. 89 CONTOH SOAL UAS ............................................................................................................ 90 DAFTAR PUSTAKA .............................................................................................................. 92

6

TINJAUAN MATA KULIAH Deskripsi Singkat Mata Kuliah Interaksi Manusia dan Komputer adalah mata kuliah akan menjelaskan prinsip-prinsip interaksi manusia-komputer yang diterapkan dalam evaluasi dan perancangan berbagai jenis sistem, misalnya antarmuka, halaman web, sistem multimedia dan perangkat bergerak. Pada kuliah Interaksi Manusia Komputer (IMK), mahasiswa akan diberikan materi mengenai pentingnya mempelajari IMK dan apa implikasinya jika sebuah sistem tidak memiliki antar muka yang baik. Pada bab ini, mahasiswa setidaknya mempunyai gambaran apa yang akan dipelajari dalam matakuliah IMK dan apa manfaat yang bisa diambil. Dari mata kuliah ini diharapkan mahasiswa tertarik dan paham mengapa sebagai lulusan Ilmu Komputer harus bisa menguasai teknik perancangan antar muka.

Tujuan Mata Kuliah Tujuan dari kuliah ini adalah menjelaskan dasar-dasar IMK, tipe-tipe interaraksi dalam perancangan system, faktor-faktor kontekstual dalam pembangunan sistem interaktif, Memaparkan teori, prinsip dan panduan perancangan antarmuka sistem interaktif

dan

beberapa teknik evaluasi rancangan antarmuka kepada mahasiswa sehingga mahasiswa mampu mengimplementasikan ilmunya dalam proses perancangan antarmuka system.

Susunan Bahan Ajar Bab 1 Pengenalan IMK Bab 2 Dasar-dasar IMK : Faktor Manusia dan ergonomis Bab 3 Dasar-dasar IMK : Faktor Komputer Bab 4 Dasar-dasar IMK :Interaction Style Bab 5 Dasar-dasar IMK : Faktor interaksi paradigma Bab 6 Dasar-dasar perancangan interaksi : Teori, prinsip dan panduan desain antar muka Bab 7 Dasar-dasar perancangan interaksi : Mengelola Proses Perancangan, Teknik Pemodelan Bab 8 Tipe-tipe interaksi Bab 9 Perancangan pesan sistem, tampilan layar, dan warna Bab 10 Prototyping 7

Bab 11 Evaluasi Desain Antar Muka Bab 12 Antarmuka masa lalu dan masa depan

Petunjuk penggunaan bahan ajar 1. Mahasiswa membaca bagian materi 2. Mahasiswa mengerjakan latihan yang diberikan 3. Evaluasi dilakukan bersama dengan dosen 4. Jika output belum sesuai harapan, maka proses bisa diulang kembali.

8

BAB 1 Pengenalan IMK

1.1 Pendahuluan 1.1.1 Deskripsi singkat Pada Bab 1, Pengenalan Interaksi Manusia Komputer (IMK), mahasiswa akan diberikan materi mengenai pentingnya mempelajari IMK dan apa implikasinya jika sebuah sistem tidak memiliki antar muka yang baik. Pada bab ini, mahasiswa setidaknya mempunyai gambaran apa yang akan dipelajari dalam matakuliah IMK dan apa manfaat yang bisa diambil. 1.1.2 Manfaat Dari Bab 1 ini, diharapkan mahasiswa tertarik dan paham mengapa sebagai lulusan Ilmu Komputer harus bisa menguasai teknik perancangan antar muka. 1.1.3 Relevansi Materi pada bab ini, sebagai perkenalan awal dengan mahasiswa, sehingga diharapkan mahasiswa paham apa yang akan dipelajari selama satu semester.

1.1.4 Learning Outcomes Mahasiswa dapat menjelaskan pentingnya perancangan antarmuka yang baik

1.2 Penyajian 1.2.1 Materi, Contoh dan Ilustrasi Human Computer Interaction atau Interaksi Manusia Komputer (IMK) merupakan salah satu disiplin ilmu yang mempelajari hubungan antara manusia dan komputer yang meliputi perancangan, evaluasi, dan implementasi antar muka (user interface) pengguna komputer agar mudah digunakan oleh manusia. Sebagai catatan, istilah komputer yang akan digunakan dalam modul pembelajaran ini merujuk kepada sistem baik hardware maupun software. Untuk hardware sendiri tidak dibatasi sekedar komputer saja melainkan semua hardware yang mempunyai antar muka, sebagai contoh: telefon genggam, keyboard, mouse dan lain lain. Antar muka atau user interface yang baik telah banyak membawa banyak perubahan baik di dunia bisnis maupun pada kehidupan individual manusia. Contoh mudahnya, user 9

interface telah membuat success story pada dunia bisnis seperti yang dialami oleh Wall Street, kemudahan akses internet yang berimbas pada mudahnya pengaksesan informasi juga tidak lepas dari peran perkembangan user interface. Pada level individual, keefektifan user interface juga berpengaruh besar pada performa pekerjaan seseorang. User interface yang efektif memudahkan dokter untuk membuat diagnosa yang akurat, memudahkan pilot untuk menerbangkan pesawat dengan tingkat safety yang tinggi, memudahkan anak-anak untuk belajar lebih cepat dan efisien dan banyak pekerjaan lain yang terbantu dengan adanya perubahan ini. Akan tetapi, disisi yang lain, perancangan user interface yang tidak pas juga akan berdampak buruk pada pengguna. Sebagai contoh, jika salah satu software memberikan error message sebagai berikut : “ Run-Time error ‘-2147469 (800405): Method ‘Private Profile String’ of object ‘System’ failed.”. Apa reaksi pengguna? Apakah pengguna paham pesan tersebut kemudian berusaha mencari solusinya? Atau pengguna merasa tertekan dan bahkan tidak mau menggunakan software tersebut lagi? Jika ditelaah, maka interaksi manusia dan komputer mempunyai tiga komponen utama, yaitu manusia atau pengguna, komputer dan interaksi. 1. Manusia / pengguna Pengguna disini bisa merujuk ke pengguna individu maupun pengguna yang tergabung dalam sebuah grup. Dalam bab selanjutnya, akan dibahas mengenai bagaimana pentingnya indera yang dimiliki oleh manusia. Selain itu juga, akan dibahas tentang bagaimana pengguna dengan latar belakang yang berbeda baik dari budaya-nya maupun asal negaranya akan mempunyai cara yang berbeda dalam berinteraksi dengan komputer. 2. Komputer Seperti yang sudah disebutkan sebelumnya, ketika menyebutkan istilah komputer maka istilah ini akan me-refer ke semua teknologi baik dari komputer desktop hingga komputer sistem yang berskala besar. Sebagai contoh, jika kita membahas tentang desain sebuah website, maka website tersebut merupakan komputer dalam IMK. 3. Interaksi Cara manusia berinteraksi dengan komputer atau mesin tentu saja akan sangat berbeda dengan cara manusia berinteraksi dengan manusia yang lain. IMK bertujuan untuk memastikan bahwa interaksi antara manusia dengan komputer berjalan dengan lancer. Untuk itu, kita perlu memahami dari sisi manusia dan juga dari sisi komputer itu sendiri. 10

Dengan mengimplementasikan IMK, ada beberapa goal atau tujuan yang ingin dicapai, beberapa diantaranya: 

Membuat software yang user friendly (ramah dengan pengguna sehingga pengguna merasa betah dalam mengoperasikan program tersebut, bahkan bagi seorang pengguna pemula



WYSIWYG (what you see is what you get)



Mengurangi frustasi, ketidakamanan, dan kebingungan pada pengguna



Sehingga implikasinya meningkatkan kepuasan dan efektifitas kerja

Akan tetapi programmer sebagai pihak yang yang mempunyai peran penting dalam mendesain dan men-develop aplikasi seringkali melakukan kesalahan yang berimbas pada desain yang mereka buat. Kesalahan yang umum dilakukan antara lain: 

Desain ini memuaskan saya, berarti juga akan memuaskan setiap orang



Desain ini memuaskan rata-rata orang, berarti juga akan memuaskan setiap orang



Manusia begitu amat beragam oleh karenanya tidak ada kemungkinan antar muka yang dapat memuaskan pengguna, tetapi karena sifat manusia yang adaptif sejak awalnya, maka itu tidak akan menjadi masalah



Faktor ergonomi cukup mahal namun demikian produk-produk aplikasi komputer tetap terjual hanya dengan berdasarkan penampilan dan corak. Jadi pertimbangan ergonomi boleh diabaikan



Ergonomi merupakan gagasan yang baik. Dalam mendesain sesuatu saya menggunakan pertimbangan ergonomi namun dilakukan berdasarkan intuisi dan menyandarkannya pada selera umum, jadi kita tidak memerlukan tabel data

Banyak faktor yang berpengaruh pada IMK. Karena itu ilmu ini menjadi ilmu yang menarik untuk dipelajari dan terbuka luas tidak hanya untuk mahasiswa bidang ilmu komputer saja. Beberapa faktor yang berpengaruh antara lain:

1. Organisation Factors Training, job design, politics, roles, workorganisation 2. Environmental Factors Noise, heating, lighting, ventilation, Health and Safety Factors

11

3. The User Cognitive processes and capabilities Motivation, enjoyment, satisfaction, personality, experience 4. Comfort Factors Seating, equipment, layout. 5. User Interface Input devices, output devices, dialogue structures, use of colour, icons, commands, navigation, graphics, natural language, user support, multimedia, 6. Task Factors Easy, complex, novel, task allocation, monitoring, skills 7. Constraints Cost, timescales, budgets, staff, equipment, buildings 8. System Functionality Hardware, software, application 9. Productivity Factors Increase output, increase quality, decrease costs, decrease errors, increase innovation

IMK sendiri sebetulnya bukan ilmu yang bisa berdiri sendiri. Dari komponennya saja yang terdiri dari manusia, interaksi dan komputer, kita bisa menebak bahwa setidaknya ada 3 bidang ilmu yang bermain peran disini, yaitu ilmu tentang manusia, tentang interaksi dan tentang komputer. Lebih jelasnya bisa dilihat pada Gambar 1. Pada gambar tersebut ada 11 bidang ilmu yang mempengaruhi IMK. Mulai dari ilmu dari bidang ilmu komputer sendiri seperti Software Engineering, Computational Linguistic, Artificial Intelligence sampai bidang ilmu yang berhubungan dengan manusia seperti Sociology dan Antropology.

12

Gambar 1 Bidang studi yang mempengaruhi IMK Banyak hal menarik yang akan dipelajari dari IMK. Mulai dari prototyping yaitu membuat rancangan sebelum men-develop sistem yang sebenarnya, memilih kombinasi warna yang tepat hingga bagaimana membuat user interface pada small display device seperti telefon genggam. Gambar 2, 3, dan 4 menunjukkan bagaimana peran IMK dalam pengembangan sistem tersebut.

Gambar 2 Prototype Twitter

13

Gambar 3 Pemilihan warna background dan tulisan yang tidak tepat

Gambar 4 Antar muka pada telefon genggam

1.2.2 Aktivitas Aktivitas mahasiswa terdiri dari : 1. Membaca bahan ajar sebelum kuliah 2. Mendengarkan penjelasan dosen dan berdiskusi dengan temannya sesuai dengan panduan dosen. 3. Mengunduh bahan ajar setelah kuliah 4. Mempresentasikan hasil diskusi kelompok 5. Aktivitas dosen berupa memandu diskusi dan menjelaskan di depan kelas.

14

1.2.3 Latihan dan Solusi Sebagai perkenalan awal, kita bisa meminta mahasiswa untuk mengkritisi desain sebuah interface. Interface yang diambil bisa dari software maupun hardware yang sering mereka gunakan dalam kehidupan sehari-hari. Sebagai contoh, pada modul pembelajaran ini, diambil contoh sebuah website dari Microsoft Windows Update. Pada website tersebut sekilas memang tidak terlihat kelemahan dari user interface yang diberikan. Akan tetapi jika ditelusuri, banyak hal yang bisa diperbaiki, sebagai contoh: 1. Pada website tersebut, user hanya bisa menggunakan Microsoft Internet Explorer 5 sebagai browsernya. Hal ini tentu saja bertentangan dengan prinsip put people first, dimana seharusnya sistem yang menyesuaikan dengan pengguna, bukan sebaliknya. 2. Pemilihan font terlalu standar, ukuran font juga terlalu kecil, sehingga mempersulit pengguna.

Gambar 5 Website Microsoft Windows Update

Contoh lain bisa juga diambil dari website Garuda Indonesia. Mahasiswa bisa diminta untuk menganalisa bagaimana kombinasi warna yang digunakan dalam website tersebut. Kemudian mereka bisa juga diminta untuk menemukan warna-warna yang digunakan sebagai pembawa pesan. Sebagai contoh, warna merah sering digunakan untuk penekanan atau bisa juga digunakan untuk meng-highlight sesuatu.

15

Gambar 6 Website Garuda Indonesia Airlines

Penilaian dilakukan dengan mengukur seberapa kritis mahasiswa dalam menganalisa sistem yang kita pilih.

1.3 Penutup 1.3.1 Petunjuk Penilaian dan Umpan Balik Penilaian tugas mahasiswa dilakukan dengan skor dari 0 – 100. Penilaian dilakukan berdasarkan tingkat pemahaman mereka terhadap topik yang telah dibicarakan yang tercermin dengan tugas yang diberikan. Tugas mahasiswa ini secara tidak langsung memberikan umpan balik kepada pengajar seberapa jauh pemahaman mahasiswa terhadap topik yang telah diberikan.

1.3.2 Tindak Lanjut Hasil tugas yang diberikan akan disampaikan via web dan akan ditunjukkan kepada mahasiswa tugas mana yang paling hasilnya paling bagus dan atau contoh hasil tugas yang benar agar dapat membantu mahasiswa untuk memperbaiki pengetahuan mereka sendiri.

16

BAB 2 Manusia

2.1 Pendahuluan 2.1.1 Deskripsi singkat Pada Bab II, mahasiswa akan diajak untuk mempelajari mengenai manusia. Dari mulai bagaimana indera-indera manusia bekerja, cara manusia mengingat dan mengatasi masalah. Dengan mengetahui karakteristik manusia, maka diharapkan ketika men-desain sebuah aplikasi, mahasiswa bisa menyesuaikannya dengan kemampuan yang dimiliki oleh manusia 2.1.2 Manfaat Dengan mengetahui karakteristik manusia, maka diharapkan ketika men-desain sebuah aplikasi, mahasiswa bisa menyesuaikannya dengan kemampuan yang dimiliki oleh manusia 2.1.3 Relevansi Pemahaman tentang manusia sangat diperlukan, karena dalam IMK yang dipelajari adalah interaksi antara manusia dan komputer

2.1.4 Learning Outcomes Mahasiswa dapat menjelaskan pentingnya perancangan antar muka yang baik 2.2 Penyajian 2.2.1 Materi, Contoh dan Ilustrasi PENGLIHATAN Ketika manusia melihat sebuah objek, sebenarnya ada dua tahapan yang dilaluinya yaitu: 1. Menerima stimulus Mata kita seperti layaknya sebuah kamera, tapi tidak seperti kamera pada film-nya, mata manusia memfokuskan cahaya pada membran sensitif yang disebut retina. Beginilah cara mata bekerja: Pada bagian paling depan mata kita adalah struktur transparan yang disebut kornea, yang membantu memusatkan cahaya yang masuk. Membran pigmen yang dikenal sebagai iris, berada di belakang kornea. Iris memiliki bukaan melingkar disebut pupil yang memungkinkan cahaya untuk masuk ke mata. Iris melebar dan 17

berkontraksi tergantung pada jumlah cahaya di sekitar kita. Humor berair adalah cairan transparan yang mengisi ruang antara kornea dan iris. Lensa mata yang merupakan struktur kristal transparan, terletak di belakang pupil dan dikelilingi oleh otot-otot siliar. Otot ini mengendalikan bentuk dari lensa sehingga kita bisa melihat dekat atau jauh. Ketika otot siliar mengendur, lensa mata kita menjadi pipih sehingga kita bisa melihat objek di kejauhan dan ketika otot-otot tersebut kontraksi maka lensa akan menebal sehingga kita bisa melihat objek yang dekat. Cahaya melewati lensa dan melalui cairan vitreous yang seperti jeli. Cahaya tersebut kemudian menyerang lapisan sensitif sel-sel yang dikenal sebagai retina. Retina terbentuk dari tiga lapisan; sklera adalah lapisan paling luar terkuat dan bagian putih bola mata (kornea termasuk dalam bagian lapisan luar), koroid adalah lapisan tengah dan berisikan pembuluh darah yang memberikan pasokan oksigen dan nutrisi kepada lapisan ketiga yaitu retina. Di dalam retina terdapat jutaan sel-sel yang sensitif terhadap cahaya; batang dan kerucut. Sel batang membuat kita bisa melihat dalam cahaya yang redup, sementara sel kerucut bertanggung jawab atas kemampuan kita untuk melihat warna. Sel kerucut mata kita terletak di pusat retina, yaitu fovea. Fovea terletak di dalam makula dan merupakan bagian retina yang paling sensitif terhadap cahaya. Ketika cahaya masuk ke dalam mata dan ke retina, cahaya tersebut diubah menjadi impuls syaraf elektrik yang dikirimkan ke otak melalui jaringan syaraf optik. Otak kita kemudian menerjemahkan impuls syaraf ini menjadi gambar yang kita lihat. Ilustrasi dari cara kerja mata bisa dilihat pada Gambar 1.

18

Gambar 1 Cara kerja mata 2. Memproses dan menginterpretasikan stimulus Ketika cahaya masuk ke dalam mata dan ke retina, cahaya tersebut diubah menjadi impuls syaraf elektrik yang dikirimkan ke otak melalui jaringan syaraf optik. Otak kita kemudian menerjemahkan impuls syaraf ini menjadi gambar yang kita lihat. Ada beberapa hal yang mempengaruhi otak dalam menerjemahkan impuls syaraf yaitu: Ukuran dan detail Objek  Sudut penglihatan mengindikasikan seberapa banyak bagian dari objek yang bisa kita lihat.  Ketajaman penglihatan merupakan kemampuan untuk melihat detail dari sebuah objek.  Objek yang sudah familiar akan dilihat mempunyai ukuran yang konstan  Adanya objek lain berdekatan bisa membantu mata kita untuk mengetahui ukuran dan detail dari sebuah objek. Kecerahan (Brightness)  Brightness merupakan reaksi subjektif terhadap level cahaya  Dipengaruhi oleh pencahayaan dari sebuah objek  Brightness bisa diukur secara langsung oleh mata kita  Ketajaman penglihatan akan meningkat jika pencahayaan terhadap sebuah objek juga meningkat.

Warna  Terdiri dari Hue, intensity dan saturation 19

 Sel kerucut pada mata merupakan bagian yang sensitif terhadap cahaya  Warna biru mempunyai ketajaman yang paling rendah  Fakta menunjukkan bahwa 8% laki-laki dan 1% wanita didunia mengalami buta warna.

Terkadang, mata manusia juga bisa dikelabui karena adanya ilusi optik pada sebuah benda. Pada Gambar 2 bisa dilihat ada dua macam ilusi yang dicontohkan yaitu The Ponzo Ilussion dan The Muller Lyer Illusion. Pada kedua ilusi tsb, mata kita seolah olah melihat benda lebih kecil / lebih pendek dari benda yang lain, padahal sebenarnya sama.

Gambar 2 Ilusi Optik PENDENGARAN Telinga merupakan indera manusia yang digunakan untuk menangkap dan menerjemahkan suara. Dengan telinga, kita bisa mengetahui keadaan disekitar kita misalnya jarak kita dari sumber suara, darimana suara berasal dll. Secara garis besar, cara kerja telinga adalah sebagai berikut: 1. Suara ditangkap daun telinga dan diarahkan melalui saluran telinga 2. Getaran suara ditangkap gendang telinga dan diteruskan ke telinga tengah 3. Getaran diteruskan oleh tulang – tulang sanggurdi ke jendela rumah siput 4. Rumah siput menghantarkan getaran melalui cairan yang memenuhi rumah siput sehingga dapat ditangkap oleh sel – sel saraf rambut getar dalam rumah siput 5. Sel – sel saraf rambut getar di rumah siput menghantarkan sinyal listrik akibat getarannya ke saraf pendengaran 6. Saraf pendengaran menghantarkan sinyal listrik ke otak 20

7. Otak menerjemahkan sinyal listrik sebagai sensasi bunyi

Telinga kita sendiri bisa dibagi menjadi 3 bagian besar yaitu Telinga luar, telinga tengah dan telinga dalam. Masing-masing tentu saja mempunyai fungsi yang berbeda beda. Telinga bagian luar berfungsi untuk melindungi telinga bagian dalam dan memperkuat bunyi. Telinga bagian tengah akan mengirimkan gelombang bunyi sebagai getaran ke telinga bagian dalam. Dan telinga bagian dalam akan menghantarkan sinyal ke otak. Gambar 3 menunjukkan struktur dari telinga manusia.

Gambar 3 Struktur dari telinga manusia Manusia bisa mendengar bunyi yang mempunyai frekuensi antara 20Hz sampai 15kHz. Selain itu, telinga kita juga mempunyai kemampuan untuk menyaring bunyi. Sebagai contoh, jika kita berada di pasar yang sangat berisik, kita tetap bisa mendengarkan suara teman yang berada di dekat kita.

PERABA Indera ketiga manusia yang akan dibahas adalah indera peraba. Indera ini bisa memberikan feedback tentang lingkungan disekitar kita. Bagi sebagian orang yang mempunyai kekurangan dalam penglihatan, indera peraba mereka akan lebih sensitif. Pada manusia normal, biasanya ada bagian tubuh yang lebih sensitif dibanding bagian tubuh yang lain. Indera peraba atau kulit kita terdiri dari tiga macam reseptor, yaitu: 21

 Thermoceptors: untuk merespon stimulus panas dan dingin  Nociceptors : untuk merespon rasa sakit  Mechanoreceptors : untuk merespon tekanan pada kulit kita GERAK Gerakan sederhana seperti menekan tombol pada keyboard sebagai salah satu reaksi dari sebuah stimulus (atau pertanyaan) jika diuraikan bisa jadi tidak menjadi hal yang sederhana lagi. Stimulus atau pertanyaan diterima melalui indera kita kemudian ditransmisikan ke otak. Stimulus akan direspon dan otak akan memerintahkan bagian otot tertentu untuk merespon. Setiap stage tentu saja memakan waktu, yang bisa dikategorikan dalam waktu dalam merespon (reaction time) dan waktu dalam bergerak(movement time). Movement time sangat bergantung pada kondisi fisik dari pengguna, misalnya faktor umur dan kesehatan akan sangat berpengaruh. Sedangkan reaction time sangat bervariasi tergantung pada dari indera mana stimulus diperoleh. Manusia bisa merespon bunyi sekitar 150ms, tanda visual sekitar 200ms dan rasa sakit 700ms. Dalam IMK, untuk menghitung movement time, kita bisa menggunakan Fitt’s Law. Movement time = a + b log2(distance/size +1) Dimana a dan b adalah konstanta yang telah ditentukan sebelumnya, sesuai dengan gerakan yang dilakukan. MEMORI Ketika kita kecil, pasti kita pernah memainkan game yang memerlukan memory. Sebagai contoh, misalnya setiap pemain diharuskan untuk menambahkan satu macam benda pada sebuah list dan diakhir, kita harus bisa mengingat semua list tersebut dengan urutan yang benar. Game semacam itu sebenarnya sederhana namun memerlukan kemampuan untuk mengingat yang baik. Secara umum, memori kita bisa dibagi menjadi tiga bagian besar seperti yang ditunjukkan pada Gambar 4. Yaitu: Sensory memory, Short-term memory dan Long-term memory.

22

Gambar 4 Model struktur dari memori Sensory Memory Sensory memory berfungsi sebagai buffer dari stimulus yang masuk melalui indera manusia. Sensory memory ada untuk setiap indera manusia, yaitu: iconic memory untuk stimulus penglihatan / visual, echoic memory untuk stimulus pendengaran / bunyi dan haptic memory untuk stimulus peraba. Memori pada bagian ini akan secara kontinu dihapus dan hanya berada di sensory memory pada waktu yang sangat singkat. Kita ambil contoh pada echoic memory, misalnya ada seseorang yang menanyakan sebuah pertanyaan kepada anda, ketika anda sedang membaca buku. Biasanya, kita akan meminta orang tsb untuk mengulang pertanyaan tsb. Tindakan kita sebenarnya bukan karena kita tidak mendengar, tetapi hanya untuk memastikan apakah pertanyaan yang kita dengar pertama kali sudah benar?. Kejadian seperti ini adalah bukti akan adanya echoic memory. Informasi dari sensory memory selanjutnya akan diteruskan ke short-term memory, tentu saja dengan difilter terlebih dahulu.

Short-term Memory Short-term memory atau working memory bekerja seperti sebuah scratch pad yang akan menyimpan informasi sementara. Sebagai contoh, misalnya kita diminta untuk menghitung hasil perkalian 35 x 6 tanpa bantuan kertas dan pensil. Mungkin yang akan kita lakukan adalah menghitung 30 x 6 terlebih dahulu kemudian menghitung 5 x 6 dan menjumlahkan hasilnya. Pada saat menghitung, kita perlu menyimpan informasi sementara hasil perkalian 30 x 6 sebelum nantinya ditambahkan dengan hasil 5 x 6. Informasi ini akan disimpan sementar di short-term memory.

23

Short-term memory bisa diakses dengan cepat, kurang lebih memakan waktu 70ms, tetapi informasi didalamnya jg akan terhapus dengan cepat dalam waktu sekitar 200ms. Short-term memory juga memiliki kapasitas yang terbatas. Mudahnya, jika diminta untuk mengingat sederetan angka, manusia hanya mampu mengingat plus minus 7 digit. Sebagai contoh perhatikan urutan angka dan huruf di bawa ini: 212348278493202 0121 414 2626 HEC ATR ANU PTH ETR EET Jika diminta untuk mengingat deretan angka yang paling atas, biasanya manusia akan kesulitan dan tidak mampu mengingatnya secara keseluruhan. Namun, berbeda jika angkaangka tsb dipisahkan per 3 atau 4 digit, maka akan lebih mudah diingat. Long-term Memory Long term memory merupakan tempat penyimpanan dari semua pengetahuan yang kita miliki. Tidak seperti short-term memory, long-term memory memerlukan waktu yang lebih lama baik dalam pengaksesan maupun dalam penghapusan informasi. Dari segi kapasitas, memori ini mempunyai kapasitas yang paling besar dibandingkan dengan memori yang lain. Secara garis besar, long-term memory bisa dibedakan menjadi dua tipe yaitu:  Episodic Tipe ini digunakan untuk menyimpan informasi secara serial, misalnya rangkaian dari sebuah kejadian  Semantic Tipe semantic digunakan untuk menyimpan informasi yang sifatnya terstruktur seperti fakta, konsep dan pengetahuan. Semantic long-term memory diturunkan dari episodic long-term-memory. 2.2.2 Aktivitas Aktivitas mahasiswa terdiri dari : 1.

Membaca bahan ajar sebelum kuliah

2.

Mendengarkan penjelasan dosen dan berdiskusi dengan temannya sesuai dengan panduan dosen.

3.

Mengunduh bahan ajar setelah kuliah 24

4.

Mempresentasikan hasil diskusi kelompok

5.

Aktivitas dosen berupa memandu diskusi dan menjelaskan di depan kelas.

2.2.3 Latihan dan Solusi Mahasiswa diminta untuk mendesain sebuah user interface yang disesuaikan dengan karakteristik cara

dari manusia baik dari segi penglihatan, pendengaran, peraba maupun

berpikir. Sebagai contoh, dalam pengambilan warna, apakah sudah sesuai dengan

prinsip

kerja mata? Bagaimana cara menampilkan informasi agar pengguna tidak

perlu mengingat terlalu banyak dan lama? Contoh Jawaban:

2.2.4 Rangkuman Untuk bisa membuat antar muka yang baik dan user friendly, sudah seharusnya developer

dan

designer mempelari terlebih dahulu bagaimana karakteristik dari

25

manusia itu

sendiri. Dari situ mereka bisa membangun aplikasi yang sesuai dengan

kebutuhan

manusia.



26

BAB 3 Komputer 3.1

Pendahuluan

3.1.1 Deskripsi singkat Pada Bab III, mahasiswa akan diajak untuk mempelajari mengenai komputer. Tentang device yang biasa digunakan sebagain input, output serta variasi desain dari perangkat komputer yang dibuat sesuai dengan kebutuhan manusia. 3.1.2 Manfaat Dengan

mengetahui

bagaimana

komputer

bekerja,

maka

mahasiswa

bisa

menyesuaikan bagaimana seharusnya interaksi antara manusia dengan komputer akan berjalan 3.1.3 Relevansi Pemahaman tentang komputer sangat diperlukan, karena dalam IMK yang dipelajari adalah interaksi antara manusia dan komputer

3.1.3 Learning Outcomes Mahasiswa dapat menjelaskan pentingnya perancangan antar muka yang baik 3.2

Penyajian

3.2.1 Materi, Contoh dan Ilustrasi Sebuah komputer sistem pasti terdiri dari beberapa elemen dimana elemen-elemen tersebut berpengaruh terhadap interaksinya dengan manusia. Beberapa elemen dari komputer antara lain: –

input devices – text entry dan pointing

–

output devices – screen (small&large), digital paper

–

virtual reality – special interaction dan display devices

–

physical interaction – e.g. sound, haptic, bio-sensing

–

paper –output (print) dan input (scan)

–

memory – RAM & permanent media, capacity & access

–

processing – speed of processing, networks

Untuk bisa merancang user interface yang sesuai dengan penggunanya, kita harus memahami karakteristik pengguna dan juga komputer. Apa yang sebenarnya terjadi 27

ketika kita mencetak tulisan lewat printer? Ketika layar monitor mengeluarkan gambar? Ketika mouse kita gerak-gerakkan dll. Dalam bab yang ke 3 ini, kita akan mempelajari tentang elemen-elemen dari sebuah komputer sistem beserta variasinya masing-masing. 1. Text entry device Keyboard merupakan text entry device yang paling biasa dan sering kita gunakan. Bagi experienced user, penggunaan keyboard memungkinkan untuk mengentrikan teks dengan cepat. Biasanya keyboard akan dikoneksikan dengan PC melalui kabel, tapi sejalan dengan perkembangan, saat ini sudah banyak wireless keyboard di pasaran. Beberapa desain keyboard yang umum antara lain: QWERTY Tata letak keyboard QWERTY ini ditemukan oleh Scholes, Glidden dan Soule pada tahun 1878, dan kemudian menjadi standar mesin tik komersial pada tahun 1905. QWERTY diambil dari6 huruf berurutan pada baris kedua dari tombol alfanumerik tersebut. Keyboard QWERTY didesain sedemikian rupa sehingga key yang paling sering ditekan terpisah letaknya sejauh mungkin, sehingga bisa meminimalkan kemacetan pada saat mengetik (pada mesin ketik mekanik). Meskipun tata letak QWERTY sangat luas pemakaiannya, tetapi memiliki beberapa kelemahan dan ketidakefisienan. Misalnya, 48 persen dari gerakan diantara huruf yang berurutan harus dilakukan dengan sebuah tangan. Hanya 32 persen ketukan yang dilakukan pada home row (baris awal dari posisi jari pada keyboard). Beban tangan kiri lebih besar dari tangan kanan (56 persen). Contoh paling nyata dari ketidakefisienan tata letak QWERTY adalah pengetikan huruf ‘a’ yang cukup sering dipakai, tetapi harus dilakukan oleh jari kelingking yang paling lemah.

2

1 Q

4

3 W

E

S

A Z

5 R

D X

6

C

T

F

Y

G

V

8

7 U

H

B

N

9 I

J M

0 O

K

L ,

SPACE

Gambar 1 Layout Keyboard QWERTY

28

P .

DVORAK Keyboard DVORAK (1932), dimana susunan hurufnya disusun sedemikian rupa sehingga tangan kanan dibebani lebih banyak pekerjaan dibanding dengan tangan kiri. Selain itu, tata letak Dvorak dirancang agar 70 persen dari ketukan jatuh pada home row, sehingga bisa mengurangi kelelahan karena pengetikan (lebih ergonomik). Sejumlah percobaan menunjukkan bahwa tata letak Dvorak lebih efisien 10-15 persen dibanding dengan tata letak QWERTY .

Gambar 2 Layout Keyboard DVORAK 2. Positioning, pointing and drawing Mouse Mouse adalah pointing device yang digunakan untuk mengatur posisi kursor di layar. Dengan menggeser mouse di bidang yang datar, misalnya meja kursor di layar akan bergeser sesuai dengan arah dari pergeseran mouse. Setelah kursor menempati posisi tertentu di layar yang diinginkan, Anda dapat menekan tombol yang ada di mouse untuk beberapa keperluan, tergantung dari program yang digunakan, misalnya untuk memilih suatu pilihan di layar. Mouse pertama kali dikembangkan oleh Dough Engelbart di Standford Research Institute sekitar tahun 1960, yang kemudian dikembangkan dan diterapkan pada komputer Xerox Star. Baru pada tahun 1982, Apple memperkenalkan produknya dengan nama Apple Lisa.

Touch screen (layar sentuh) Touch screen merupakan sebuah perangkat keras yang mirip seperti monitor komputer, tetapi mempunyai kelebihan dibandingkan monitor biasa. Layar sentuh atau dalam bahasa Inggrisnya touch screens, touch screens, touch panels, atau touch screen panels adalah layar tampilan komputer yang sensitif terhadap sentuhan manusia, sehingga seseorang dapat berinteraksi dengan komputer

29

dengan cara menyentuh gambar atau tulisan yang terpampang pada layar komputer. Touchscreen sering dipakai pada kios informasi di tempat- tempat umum, misalnya di bandara dan rumah sakit serta pada perangkat pelatihan berbasis komputer. Sistem touch screen tersedia dalam bentuk monitor yang sudah memiliki kemampuan layar sensitif sentuhan dan ada juga kit touch screen yang lebih ekonomis yang dapat dipasang pada monitor yang sudah ada. Contoh komputer yang telah menggunakan teknologi ini adalah komputer Hewlet-Packard HP 150.

Joystick Joystick biasa digunakan untuk mengendalikan aplikasi permainan (game). Pada prinsipnya cara kerja joystick sama dengan mouse hanya saja penggerak penunjuk layar berupa tongkat kecil.

Light Pen Light pen merupakan penunjuk yang berupa seperti pena dan dapat menghasilkan cahaya yang digunakan bersamaan dengan sebuah layar yang peka cahaya. Light pen memungkinkan pemakai menunjuk langsung ke layar di mana pemakai menghendaki pilihan atau perintah yang dijalankan. Contoh pemanfaatan light pen, yaitu pada alat pengendali lalu lintas udara pada bandara.

3. Display Device Monitor Monitor adalah salah satu perangkat keras komputer yang berfungsi menampilkan proses dari sebuah set komputer.

Printer Printer adalah alat yang menampilkan data dalam bentuk cetakan, baik berupa teks maupun gambar/grafik, di atas kertas.

30

Audio Output Audio output device adalah bagian computer yang mengubah audio informasi dari komputer ke output device. Contoh : speaker atau headphone 3.2.2 Aktivitas Aktivitas mahasiswa terdiri dari : 1. Membaca bahan ajar sebelum kuliah 2. Mendengarkan penjelasan dosen dan berdiskusi dengan temannya sesuai dengan panduan dosen. 3. Mengunduh bahan ajar setelah kuliah 4. Mempresentasikan hasil diskusi kelompok 5. Aktivitas dosen berupa memandu diskusi dan menjelaskan di depan kelas. 3.2.3 Latihan dan Solusi 1. Seperti yang sudah dijelaskan sebelumnya, ada beberapa macam elemen device yang mempunyai desain yang berbeda-beda, terangkan mengapa ada perbedaan desain dan cari kelemahan dan kelebihan dari masing-masing desain. Contoh jawaban: Keyboard, memiliki beberapa desain yang berbeda-beda seperti model QWERTY, Alphabetical, dan model Dvorak.

31

3.3

Penutup

3.3.1 Petunjuk Penilaian dan Umpan Balik Penilaian tugas mahasiswa dilakukan dengan skor dari 0 – 100. Penilaian dilakukan berdasarkan tingkat pemahaman mereka terhadap topik yang telah dibicarakan yang tercermin dengan tugas yang diberikan. Tugas mahasiswa ini secara tidak langsung memberikan umpan balik kepada pengajar seberapa jauh pemahaman mahasiswa terhadap topik yang telah diberikan.


32

BAB 4 Interaction

4.1

Pendahuluan

4.1.1 Deskripsi singkat Pada Bab IV, mahasiswa akan mempelajari mengenai bagaimana interaksi antara manusia dengan komputer, mulai dari model interaksi, sisi ergonomic, style dari interaksi dan konteks interaksi itu sendiri. 4.1.2 Manfaat Sama seperti bab-bab sebelumnya, dengan mengetahui bagaimana komputer dan manusia berinteraksi maka mahasiswa bisa menyesuaikan seperti apa seharusnya aplikasi yang akan dibangun. 4.1.3 Relevansi Pemahaman tentang interaksi sangat diperlukan, karena dalam IMK yang dipelajari adalah interaksi antara manusia dan komputer

4.1.4 Learning Outcomes Mahasiswa dapat menjelaskan pentingnya perancangan antar muka yang baik 4.2

Penyajian

4.2.1 Materi, Contoh dan Ilustrasi Secara garis besar, interaksi dalam IMK bisa diartikan sebagai komunikasi antara manusia dengan komputer. Dalam sebuah interaksi, ada tiga istilah mendasar yang sering digunakan yaitu” 

Domain : area kerja dimana kita melakukan sebuah interaksi (contoh: desain grafis)



Goal : Apa yang ingin dicapai (contoh: membuat sebuah segitiga berwarna merah)



Task : Bagaimana cara melakukannya (contoh: menekan tombol fill, klik pada area segitiga, dst)

Interaction Model Ada dua model interaction model yang biasa dipakai yaitu Donald Norman model dan Abowd and Beale model yang merupakan ekstensi dari Donald Norman model. Dalam Donald Norman model, interaksi antara manusia dengan komputer dibagi menjadi 7 tahapan seperti yang digambarkan pada Gambar berikut:

33

Gambar 4.1 Donald Norman model Jika dijabarkan maka 7 tahapan tersebut adalah: – 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 Sedangkan Abowd and Beale yang merupakan ekstensi dari Donald Norman Model, membagi interaksi menjadi 4 bagian utama yaitu input, output, system dan user yang bisa digambarkan pada Gambar 4.2

Gambar 4.2 Abowd and Beale model Ergonomic Adalah studi mengenai karakteristik fisik dari sebuah interaksi. Dengan ilmu ini, developer bisa dengan mudah mendefinisikan standard dan guidelines dalam membuat sebuah aplikasi atau user interface. Berikut ini contoh dari ergonomic: 34

1. Display dan Kontrol, ex: pengaturan brightnes dari layar monitor 2. Lingkungan sekitar pengguna, ex: kursi yang ergonomis untuk pengguna yang sering memakai komputer 3. Isu kesehatan, ex: posisi fisik yang baik ketika menggunakan komputer 4. Penggunaan warn, ex: penggunaan warna tertentu untuk membawa pesan.

Interaction Style Ada beberapa interaction style yang umum digunakan yaitu: • command line interface • menus • natural language • question/answer and query dialogue • form-fills and spreadsheets • WIMP • point and click • three–dimensional interfaces 4.2.2 Aktivitas Aktivitas mahasiswa terdiri dari : 1. Membaca bahan ajar sebelum kuliah 2. Mendengarkan penjelasan dosen dan berdiskusi dengan temannya sesuai dengan panduan dosen. 3. Mengunduh bahan ajar setelah kuliah 4. Mempresentasikan hasil diskusi kelompok 5. Aktivitas dosen berupa memandu diskusi dan menjelaskan di depan kelas. 4.2.3 Latihan dan Tugas 1. Mahasiswa diminta untuk memberikan contoh bagaimana penerapan dari kedua model interaksi yang sudah dijelaskan dalam interaksi manusia dengan komputer. 2. Berikan contoh dan diskusikan tentang contoh-contoh lain ttg ilmu ergonomi yang bisa dipakai dalam mendesain sebuah antar muka. Contoh jawaban:

Contoh paling sederhana dan umum adalah kursi kerja dengan manusia yang memakainya (mendudukinya). Penjelasan sederhananya: Jika kita duduk dikursi yang

35

nyaman, maka kita bisa bekerja dengan lebih nyaman dan santai sehingga konsentrasi tetap terjaga, akibatnya hasil kerja kita juga baik.

4.3

Penutup



36

BAB 5 Paradigma Interaksi

5.1

Pendahuluan

5.1.1 Deskripsi singkat Pada bab ini, akan dijelaskan mengenai paradigma dalam antar muka. Dimana terjadi pergeseran dan perubahan dari teknologi yang digunakan dahulu dan saat ini. Karena dengan adanya teknologi baru, maka seharusnya persepsi mengenai IMK juga berubah. Karena itu, mahasiswa diharapkan bisa memahami bahwa IMK adalah ilmu yang selalu berkembang. 5.1.2 Manfaat Mahasiswa mengetahui dan paham bahwa antarmuka akan selalu berganti sesuai dengan perkembangan teknologi. 5.1.3 Relevansi Pada materi ini, mahasiswa akan mempelajari tentang sejarah antarmuka 5.1.4 Learning Outcomes Mahasiswa dapat menjelaskan pentingnya perancangan antarmuka yang baik 5.2 Penyajian 5.2.1 Materi, Contoh dan Ilustrasi Perspektif sejarah pada desain sistem interaktif 1. Time Sharing (pembagian waktu)  Tahun 1940-1950an pertumbuhan teknologi meledak  J.C.R Licklider di ARPA  Komputer tunggal melayani banyak pengguna 2. Video display unit  Lebih banyak media yang lebih layak dibandingkan kertas  Komputer untuk visualisasi dan manipulasi data  Kontribusi dari seseorang dapat secara drastic merubah sejarah komputasi. 3. Programming Toolkit  Engelbart di Stanford Research Institute 37

 1963-Pengembangan intelektual manusia  1968 demonstrasi NLS/Augment  Perkakas pemrograman yang baik menyediakan blok pembangun untuk menghasilkan sistem interaktif yang kompleks 4. Komputasi Personal  Tahun 1970-an –bahasa LOGO dari Papert untuk pemrograman grafika sederhana untuk anak-anak  Suatu sistem lebih berdayaguna disebabkan ia lebih mudah untuk penggunanya  Masa depan komputasi pada mesin yang kecil, berdayaguna yang didedikasikan untuk individu  Kay pada Xerox PARC-Dynabook sebagai komputer pribadi utama. 5. Sistem Windows dan antarmuka WIMP  Manusia dapat mengerjakan lebih dari satu tugas pada waktu yang bersamaan  Windows digunakan untuk pemartisian dialog  1981- Xerox Star mengeluarkan sistem windowing pertama kalinya  WIMP merupakan tipe interaksi yang familiar dan mudah 6. Metafora  Menghubungkan komputer ke aktifitas dunia-nyata adalah teknik pembelajaran yang efektif  Permasalahan: beberapa tugas tidak dapat memenuhi metafora yang ada karena terpengaruh oleh bias pada budaya. 7. Manipulasi Langsung  1982-Shneiderman menjelaskan daya tarik interaksi berbasis grafik  1984-Apple Macintosh  Metafora model-dunia  WYSIWYG 8. Bahasa vs Aksi  Aksi-aksi tidak selalu dapat mengungkap lebih jelas dibandingkan dengan kata-kata  Direct manipulation menggantikan sistem yang mendasari paradigma bahasa  Pemrograman dengan contoh adalah baik aksi dan bahasa 9. Hypertext 38

 1945-Vannevar Bush and the memex  Kunci sukses dalam mengelola ledakan informasi  Pertengahan 1960-an Nelson mendeskripsikan hypertext sebagai struktur melihat yang tidak linear  Hypermedia dan multimedia  Projek Xanadu dari Nelson masih merupakan impian di masa sekarang ini 10. Multimodalitas  Mode adalah sebuah saluran komunikasi manusia  Menekankan pada penggunaan saluran secara bersamaan untuk input dan output 11. Computer Supported Cooperative Work  CSCW menghilangkan bias dari sistem pengguna tunggal  Tak dapat lagi mengabaikan aspek social  Contoh nyata pada e-mail 5.2.2 Aktivitas Aktivitas mahasiswa terdiri dari : 1. Membaca bahan ajar sebelum kuliah 2. Mendengarkan penjelasan dosen dan berdiskusi dengan temannya sesuai dengan panduan dosen. 3. Mengunduh bahan ajar setelah kuliah 4. Mempresentasikan hasil diskusi kelompok 5. Aktivitas dosen berupa memandu diskusi dan menjelaskan di depan kelas. 5.2.3 Latihan dan Tugas 1. Mahasiswa diminta untuk memberikan contoh real teknologi dari jaman dahulu hingga ke jaman sekarang. Kemudian minta mereka untuk mendiskusikan apa kelemahan dan kelebihan teknologi dahulu dengan saat ini. Contoh jawaban:  Original interfaces o Commands given to computer o Language-based  Direct Manipulation/WIMP o Commands performed on “world” representation o Action based 39

 Agents - return to language by instilling proactivity and “intelligence” in command processor o Avatars, natural language processing

5.3

Penutup



40

BAB 6 Dasar-Dasar Perancangan Interaksi (1)

6.1

Pendahuluan

6.1.1 Deskripsi singkat Dalam bab ini akan dijelaskan mengenai teknik untuk perancangan interaksi. Sehingga mahasiswa bisa merancang user interface yang baik 6.1.2 Manfaat Mampu merancang user interface sesuai dengan aturan yang ada

6.1.3 Relevansi Sangat relevan, karena merupakan bagian dari teknik perancangan user interface.

6.1.2 Learning Outcomes Mahasiswa dapat menjelaskan pentingnya perancangan antarmuka yang baik Mahasiswa mengenali hal-hal yang perlu diperhatikan dalam proses perancangan 6.2 Penyajian 6.2.1 Materi, Contoh dan Ilustrasi GOMS GOMS yang merupakan singkatan dari Goals, Operators, Method and Selection rules merupakan salah satu teknik pemodelan antar muka. Output dari GOMS bisa berupa ukuran yang sifatnya kualitatif maupun kuantitatif.  Goal: tujuan dari user  Operators : aksi yang dilakukan agar tujuan tercapai  Methods : operator yang berurutan agar tujuan tercapai  Selection Rules : mendeskripsikan bagaimana sebuah metode dipilih dari metodemetode yang lain Beberapa family dari GOMS antara lain:  CMN-GOMS (‘original’ GOMS; CMN = Card, Moran, Newell)  Keystroke-Level Model (KLM) - Card, Moran, Newell (1983)  Natural GOMS Language (NGOMSL) - Kieras (1988+)  Critical Path Method or Cognitive, Perceptual, and Motor GOMS (CPM-GOMS) John (1990+)

41

Output dari GOMS  Functionality coverage and consistency  Does UI contain needed functions?  Are similar tasks performed similarly?  Operator sequence  In what order are individual operations done?  Abstraction of operations may vary among models  Execution time  By expert  Very good rank ordering  Absolute accuracy ~10-20%  Procedure learning time  Accurate for relative comparison only  Does not include time for learning domain knowledge  Error recovery Aplikasi dari GOMS  Compare UI designs  Profiling  Sensitivity and parametric analysis  Building a help system 

GOMS modelling makes user tasks and goals explicit



Can suggest questions users will ask and the answers

6.2.2 Aktivitas Aktivitas mahasiswa terdiri dari : 1


2


3

Mengunduh bahan ajar setelah kuliah

4


5


6.2.3 Latihan dan Tugas 1. Mahasiswa diberikan sebuah task kemudia diminta untuk menganalisa dengan teknik GOMS. 42

Contoh jawaban:

2.



43

BAB 7 Dasar-Dasar Perancangan Interaksi (2)

7.1

Pendahuluan

7.1.1 Deskripsi singkat Dalam bab ini, mahasiswa akan diajarkan mengenai Golden Rules dalam perancangan antar muka. 7.1.2 Manfaat Dengan mempelajari materi ini, mahasiswa memiliki semacam guidelines yang bisa dipakai dalam perancangan antar muka. 7.1.3 Relevansi Materi ini tentu saja sangat berelevansi dengan IMK, karena merupakan petunjuk dalam pengembangan antar muka yang baik. 7.1.4 Learning Outcomes Mahasiswa dapat menjelaskan pentingnya perancangan antarmuka yang baik Mahasiswa mengenali hal-hal yang perlu diperhatikan dalam proses perancangan

7.2 Penyajian 7.2.1 Materi, Contoh dan Ilustrasi Jika diuraikan, secara garis besar ada 3 Golden Rules dalam perancangan user interface yaitu: Place Users in Control Yaitu membiarkan user untuk memegang kontrol atas user interface. Analogi yang bisa diambil yaitu dengan membiarkan seseorang untuk memilih apakah dia lebih suka naik kereta atau menyetir mobilnya sendiri. Jika menyetir sendiri, maka pengguna mempunyai kontrol penuh atas mobil tersebut baik dari sisi navigasi, tujuan, maupun kecepatan mobil. Namun tentu saja pengguna harus mempunyai skill yang cukup. Berbeda dengan pengguna yang memilih menggunakan kereta api, maka pengguna tsb harus mengikuti kemana kereta pergi dan hanya bisa duduk manis menunggu sampai kereta sampai di tujuan. Beberapa prinsip penting yang bisa digaris bawahi dalam rules yang pertama ini adalah: 1. Use modes judiciously (modeless) 2. Allow users to use either the keyboard or mouse (flexible) 44

3. Allow users to change focus (interruptible) 4. Display descriptive messages and text(Helpful) 5. Provide immediate and reversible actions, and feedback (forgiving) 6. Provide meaningful paths and exits (navigable) 7. Accommodate users with different skill levels (accessible) 8. Make the user interface transparent (facilitative) 9. Allow users to customize the interface (preferences) 10. Allow users to directly manipulate interface objects (interactive). Reduce User’s Memory Load Seperti yang sudah dijelaskan pada Bab mengenai manusia, kapasitas manusia untuk mengingat terbatas. Karena itu, dalam pengembangan sebuah antarmuka, kita harus meminimalkan fitur-fitur yang mengharuskan pengguna untuk mengingat. Beberapa prinsip yang masuk dalam rules ini antara lain: 1. Relieve short-term memory (remember) 2. Rely on recognition, not recall (recognition) 3. Provide visual cues (inform) 4. Provide defaults, undo, and redo (forgiving) 5. Provide interface shortcuts (frequency) 6. Promote an object-action syntax (intuitive) 7. Use real-world metaphors (transfer) 8. User progressive disclosure (context) 9. Promote visual clarity (organize)

Make the Interface Consistent Rules yang ketiga yaitu, buatlah antarmuka yang selalu konsisten. Contoh mudah konsistensi misalnya, kita bisa menggunakan metaphor untuk icon dalam antarmuka. Metaphor yang digunakan harus selalu konsisten dan sama di seluruh bagian antar muka. Misal kita mengambil metaphor keranjang sampah sebagai icon untuk “delete file”, maka kita sebaiknya tidak mengganti-gantinya lagi. Beberapa prinsip yang masuk dalam rules ini antara lain: 1. Sustain the context of users’ tasks (continuity) 2. Maintain consistency within and across products (experience) 3. Keep interaction results the same (expectations) 45

4. Provide aesthetic appeal and integrity (attitude) 5. Encourage exploration (predictable) 7.2.2 Aktivitas Aktivitas mahasiswa terdiri dari : 1. Membaca bahan ajar sebelum kuliah 2. Mendengarkan penjelasan dosen dan berdiskusi dengan temannya sesuai dengan panduan dosen. 3. Mengunduh bahan ajar setelah kuliah 4. Mempresentasikan hasil diskusi kelompok 5. Aktivitas dosen berupa memandu diskusi dan menjelaskan di depan kelas. 7.2.3 Latihan dan Tugas 1. Untuk setiap prinsip dalam masing-masing rule, berikan contohnya!

Jawaban: Place user in control Contoh: Ketika membuat sebuah aplikasi, user bisa dengan mudah memilih untuk menggunakan keyboard atau mouse sebagai alat interaksinya. Sebagai desaigner, kita tidak diperbolehkan memaksa user untuk menggunakan mouse saja atau keyboard saja. Karena bisa jadi kemampuan user berbeda-beda. Expert user cenderung lebih suka menggunakan keyboard karena menyediakan tombol-tombol shortcut. Sedangkan user-user baru, biasanya lebih nyaman jika menggunakan mouse. Reduce User’s Memory Load Contoh: Contoh yang sangat mudah misalnya pada sistem pencarian negara bagian di Amerika. Negara bagian di USA biasanya mempunyai singkatan tertentu, sebagai contoh: CA (California), NY(NewYork), LA( Los Angeles). Ketika user diminta untuk mengisikan form mengenai negara bagian tsb, sediakan list dari singkatan dari tiap-tiap negara bagian. Sehingga user hanya perlu untuk “mengenali” tidak perlu sampai harus “mengingat kembali”.

Make the interface consistent Contoh: Pada sebuah sistem, jika melakukan sebuah “action” yang sama, maka result-nya pun harus sama juga. Sebagai contoh, lampu merah pada traffic light menandakan kendaraan harus 46

berhenti. Sign tersebut sudah lama diketahui dan disetujui bersama. Sehingga tidak bisa jika kita dengan se-enaknya mengganti sign tsb.

7.3

Penutup



47

Contoh UTS Mata Kuliah : Interaksi Manusia Komputer Tanggal Ujian : Senin, 16 April 2012 Tipe Ujian

: OPEN BOOK

Waktu

: 90 menit

Dosen

: Yunita Sari, S. Kom., M. Sc.

1. Berdasarkan data dari pcworld.com, website Microsoft Windows Update dinominasikan sebagai salah satu dari The 25 Worst Website. Berikut ini screen shoot dari website tersebut:

Paparkan analisa anda, jika ditinjau dari prinsip Interaksi Manusia dan Komputer (termasuk di dalamnya The Eight Golden Rules) apa yang menyebabkan website tersebut masuk dalam nominasi The 25 Worst Website. 2. Ditinjau dari physical aspect (vision, hearing, touch, movement) penggunaan komputer (laptop) bisa menimbulkan dampak negatif. Misal, penggunaan earphone yang terlalu sering dengan volume keras bisa merusak saraf pendengaran. Untuk 4 physical aspect di atas, terangkan bagaimana cara terbaik ketika menggunakan laptop. 3. Dalam IMK, interface computer/sistem untuk office dan industri adalah berbeda. Sebutkan contoh perbedaan tersebut untuk interface sebuah sistem informasi yang sama-sama digunakan di office/industri. 4. Salah satu tujuan dalam IMK adalah “put people first”. Apa maksud dari pernyataan tersebut? 48

BAB 8 TIPE-TIPE INTERAKSI

8.1 Pendahuluan 8.1.1 Deskripsi singkat Pemilihan tipe interaksi yang akan digunakan dalam rancangan suatu user interface adalah salah satu bagian yang sangat penting untuk diperhatikan. Ketika desainer system tidak dapat menggunakan salah satu tipe interaksi dalam rancangan interface sistemnya, maka tipe-tipe interaksi yang lain dapat dijadikan sebagai alternative. Misalnya ketika strategi direct manipulation tidak dapat diterapkan maka menu selection dan form fillin dapat dijadikan sebagai salah satu alternatif. Ketika system yang akan dibangun lebih mementingkan kemudahan dalam pencegahan error maka command language interface dapat menjadi pilihan. Banyak faktor yang harus diperhatikan oleh seorang desainer sehingga system yang dikembangkan nantinya mampu memenuhi kebutuhan pengguna. Pada babini akan dibahas mengenai tipe-tipe interaksi dalam proses Interaksi Manusia dan Komputer. Beberapa tipe interaksi yang dibahas diantaranya adalah kapan dan bagaimanamenu & form fillin digunakan kemudian juga beberapa konsep mengenai command language interface,natural language danmanipulasi langsung

(direct

manipulation).

8.1.2 Manfaat Dengan mempelajari tipe-tipe interaksi diharapkan mahasiswa paham beberapa tipe interaksi yang dapat digunakan dalam perancangan suatu system/software. 8.1.3 Relevansi Bab ini memiliki relevansi dengan materi dasar-dasar perancangan interaksi 8.1.4 Learning Outcomes Mahasiswa dapat membedakan jenis-jenis tipe interaksi serta menerapkan panduan perancangannya

49

8.2

Penyajian

Pada bahasan awal akan dibahas mengenai beberapa konsep dasar dalam menu selection dan form fillin kemudian dilanjutkan dengan pembahasan mengenai Command Language Interface dan terakhir adalah konsep dasara dalam Direct Manipulation. 8.2.1 Materi, Contoh dan Ilustrasi Menu Selection Tipe interaksi jenis ini termasuk salah satu tipe interaksi yang paling umum digunakan hamper dalam semua system. Menu dapat dalam bentuk pull-down, pop-ups, checkbox/radio button dalam kotak dialog maupun langsung terhubung dalam link pada sebuah halaman web. Menu selection banyak digunakan karena beberapa hal sebagai berikut : 

Memungkinkan pemakai mengingat berbagai pilihan yang tersedia



Membimbing pemakai secara bertahap dalam menggunakan aplikasi (Sebaiknya di gunakan oleh pemakai pemula)



Cukup efektif karena pada umumnya pengguna lebih mudah ‘mengenali’ sesuatu secara visual dibandingkan jika harus ‘mengingat’ suatu perintah



Dengan disain menu yang sesuai maka dapat meningkatkan performance sebuah system

Namun demikian tipe interaksi jenis ini juga membutuhkan beberapa kondisi khusus diantaranya adalah karena perlu di organisasikan sehinga terkadang menjadi tidak fleksibeldan membutuhkan banyak tempat pada layar komputer Terkait dengan pengorganisasian menu, menu dapat dibagi menjadi beberapa jenis hirarki sebagaimana ditunjukkan pada Gambar 8.1.

50

Gambar 8.1 Beberapa Jenis Struktur Menu

Berdasarkan gambar 8.1 dapat dilihat bahwa terdapat 4 jenis struktur menu yang umumnya digunakan, yaitu : 1. Singles menu Termasuk didalam single menu diantaranya adalah binary menu dengan penggunaan radio button dan button choice danextended menus yang menampilkan banyak pilihan dengan menggunakan teknik-teknik seperti scrollbar, pulldown menus and pup up menus (dilihat dari cara permunculannya di layar). Beberapa contoh singles menu ditunjukkan pada Gambar 8.2 , Gambar 8.3 dan Gambar 8.4.

51

Gambar 8.2 Tampilan Menu dalam Ms. Office 2007

Gambar 8.3 Tampilan Menu dalam Paint

52

Gambar 8.4 Peta digital dengan menu yang terkait dengan link

2. Linear sequence dan multiples menu Pada linear sequence dapat memandu pengguna dalam proses penentuan keputusan terkait dengan proses yang sedang dipilih. Tipe seperti ini akan sangat berguna khususnya untuk pengguna baru. Misalnya digunakan pada system ujian online. Pada multiple menu ditampilkan beberapa pilihan menu yang aktif yang pada waktu yang sama dan pengguna tidak harus memilih menu yang ada secara urut. Sangat menguntungkan untuk pengguna yang telah berpengalaman.

3. Tree-structured menu Pada struktur menu jenis ini disainer dapat membuat struktur pohon untuk mengelompokkan item-item berdasarkan kategorinya. 4. Acyclic dan cylic menu network Suatu jenis struktur menu yang umumnya muncul secara alami yang menggambarkan suatu hubungan social dalam web. Navigasi menu jenis ini dapat menimbulkan kebingungan dan disorientasi bagi pengguna, namun demikian pada menu jenis ini proses navigasi dapat lebih fleksibel. Form-fillins Jika dibandingkan dengan menu selection pada beberapa fitur yang tersedia dalam sebuah system, penggunaan keyboard untuktyping bisa lebih atraktif dan cepat. Misalnya saja pada proses pengisian data pribadi dalam suatu form online. 53

Beberapa yang harus diperhatikan dalam pembuatan tipe interaksi jenis ini diantaranya : 

Judul yang sesuai dengan topiknya



Penggunaan perintah yang mudah dipahami (hindari kata : “type”, “press” atau “enter”)



Pengkategorian yang sesuai



Tampilan layout yang menarik



Penggunaan ‘Label’ yang familiar (pilih “Alamat” dibandingkan “Domisili”)



Penggunaan terminologi dan singkatan yang konsisten



Batasan pada setiap field jelas



Notifikasi error untuk setiap field



Pencegahan error dengan pembatasan tipe data



Pesan error untuk input data yang tidak sesuai



Pemberian feedback yang cepat setiap kali terjadi error



Informasi mengenai satu field diletakkan disamping/dibawahnya



Tombol “FINISH” atau “Submit” untuk menandakan bahwa data yang diinputkan sudah lengkap dan dapat dilanjutkan ke proses berikutnya.

Contoh dari layout form-fillin ditunjukkan pada gambar 8.5.

54

Gambar 8.5 Tampilan form-fillin pada pemesan tiket airasia Commnad line interface Bahasa perintah atau lebih popular disebut dengan istilah command language adalah bagian dari command line interface yang merupakan salah satu jenis tipe interaksi yang dapat digunakan user dalam berhubungan dengan sebuah system. Tipe interaksi jenis ini sering digunakan pada konfigurasi jaringan, server dan juga pemrograman berbasis unix atau dos. Beberapa kelebihan dari tipe interaksi jenis ini diantaranya adalah : 1. Efisien, pengguna dapat langsung menuliskan perintah yang diinginkan tanpa harus menelusuri menu dalam GUI

2. Cepat, proses transmisi data berupa text hamper tidak membutuhkan space bandwidth pada jaringan sehingga prosesnya dapat lebih cepat

3. Sangat flexibel, bahkan dapat dirangkai dan memiliki banyak argumen 4. Hanya sedikit membutuhkan ruang pada layar komputer 5. Memberikan kebebasan kepada pengguna 55

Namun demikian tipe interaksi jenis ini sebaiknya dipergunakan oleh pengguna yang sudah berpengalaman atau ahli, karena pengguna harus memiliki ingatan yang bagus untuk mengingat perintah-perintah yang dapat dimasukkan.Contoh pemanfaatan CLI ditunjukkan pada gambar 8.6.

Gambar 8.6 Layout CLI Direct manipulation (Manipulasi Langsung) Pada umumnya, sistem direct manipulation mempunyai icon-icon yangmepresentasikan suatu obyek, dimana dapat dipindah-pindahkan disekitar layarmonitor dan memanipulasikannya dengan mengontrol kursor melalui mouse. Beberapa karakter direct manipulation menurut Ben Shneiderman adalah : 1. Continuous visibility of the object and action of interest 2. Rapid, reversible, incremental actions whose effect is immediately noticeable 3. Replacement of command language syntax by direct manipulation of object of interest (physical actions, buttons,etc) Beberapa cirri yang dimiliki oleh tipe interaksi jeni ini adalah : 1. Pemakai pemula dapat mempelajari fungsi fungsi dasar sistem dengancepat. Di ’demo’ kan oleh pemakai yang sudah berpengalaman/mengerti 2. Pemakai ahli dapat mengerjakan berbagai pekerjaan dengan cepat dan terkadang bahkan mendefinisikan fungsi dan fitur-fitu baru 3. Pemakai yang terbatas pengetahuannya dapat menangkap maksud darikonsep operasionalnya 56

4. Pesan kesalahan jarang digunakan atau tidak ada 5. Pemakai dapat melihat apakah aksi yang mereka lakukan sejalan dengantujuan mereka, jika tidak mereka dapat mengganti aksinya 6. Pengalaman tidak begitu diperlukan 7. Mengontrol sistem dan respon dari sistem dapat diprediksi Beberapa contoh Direct Manipulation adalah sebagai berikut : -

Text dan graphics editor seperti Ms.Word, Corel Draw,dsb

-

VISICALC -1st electronic spreadsheet

-

CAD

-

Dekstop Metaphor

-

Video Games

-

3D immersive virtual reality system

8.2.2 Aktivitas Aktivitas mahasiswa terdiri dari : 6.


7.


8.


9.


10.


8.2.3 Latihan dan Solusi Mahasiswa bersama kelompoknya masing-masing (maksimal 6 orang) mengerjakan beberapa tugas berikut : Tugas Menu Selection You are in charge of designing a menu tree for navigating 1,250 books in a digital library. Present an argument of whether the menu should have larger depth (number of levels) or breadth (number of items per level). Tugas CLI Pilih 2 diantara 4 assignment berikut : Assignment 1 Design a CL for a coffee machine: 1) analyze all functions of the coffee machine in IPO; 2) design a CL (incl. abbreviations) for this machine; 57

3) discuss the pros and cons of your design; 4) prepare a presentation of about 10 min. Assignment 2 Assess the UNIX CL: 1) analyze the document about the UNIX CL; 2) search on the internet for additional information about the described commands; 3) assess this CL using the ISO 9241:part 15 procedure; 4) discuss the pros and cons of this CL and come up with re-design recommendations; 5) prepare a presentation of about 10 min. Assignment 3 Assess the PDP-11 editor CL: 1) analyze the document about the PDP-11 editor CL; 2) search on the internet for additional information about the described commands; 3) assess this CL using the ISO 9241:part 15 procedure; 4) discuss the pros and cons of this CL and come up with re-design recommendations; 5) prepare a presentation of about 10 min. Assignment 4 Design a CL for a phone: 1) analyze all basic functions of the phone on your desk; 2) design a CL (incl. abbreviations) for this machine; 3) discuss the pros and cons of your design; 4) prepare a presentation of about 10 min.

Buat dalam bentuk Laporan dan Slide Presentasi selengkap mungkin,kemudian upload di elisa bagian Tugas Contoh Jawaban :

58

8.2.4 Rangkuman 1. Pemilihan tipe interaksi sangat tergantung pada kebutuhan user dan tipe pengguna 2. Setiap tipe interaksi pada prinsipnya dapat digunakan pada semua jenis sistem



59

8.3.3 Materi Pengayaan Mempelajari materi dan mengerjakan latihan pada link dari link berikut : http://www.hcibook.com/hcibook/resource.html#exercise

60

BAB 9 PERANCANGAN PESAN SISTEM, TAMPILAN LAYAR, DAN WARNA

9.1 Pendahuluan 9.1.1 Deskripsi singkat Pada proses perancangan desain sebuah system salah satu isu penting yang harus diperhatikan adalah masalah perancangan pesan system, tampilan layar dan juga pemilihan warna. Hal ini sangat penting mengingat impresi awal seorang pengguna terhadap sebuha system dimulai dari tampilan user interface nya. Sehingga tampilan user interface suatu system idealnya dirancang sedetail mungkin sehingga memberikan kenyamanan optimal bagi pengguna. Pada bab ini akan dibahas mengenai beberapa panduan umum dalam perancangan pesan sistem, tampilan layar dan warna. Kendati tampilan cocok tidaknya suatu tampilan user interface juga sangat tergantung pada karakter penggunannya, namun tetap terdapat beberapa hal penting yang harus diperhatikan dalam proses perancangan ini agar system yang dibangun dapat memenuhi beberapa minimal yang ditentukan. Beberapa issue penting yang akan dibahas diantaranya adalah pesan error, non-anthropomorphic design, display design, windows design dan pemilihan warna.

9.1.2 Manfaat Dari materi ini diharapkan mahasiswa paham mengenai beberapa panduan umum dalam perancangan pesan sistem, tampilan layar dan warna dan mampu mengimplementasikannya dalam proses perancangan system.

9.1.3 Relevansi Bab ini memiliki relevansi dengan materi dasar-dasar perancangan interaksi dan interaction styles 9.1.4 Learning Outcomes Mahasiswa dapat membedakan jenis-jenis tipe interaksi serta menerapkan panduan perancangannya

61

9.2 Penyajian Pada bahasan awal akan dibahas error message atau pesan error, kemudian nonanthropomorphic design, display design, windows design dan terakhir mengenai pemillihan warna. 9.2.1 Materi, Contoh dan Ilustrasi Error Messages Penggunaan pesan error sebagai salah satu penanda atau peringatan terjadinya error pada suatu system sangat penting karena dari pesan tersebut pengguna menyadari adanya kesalahan dalam suatu proses dan dapat segera mengambil tindakan untuk mengatasinya. Beberapa hal yang harus dihindari dalam perancangan suatu pesan error : 1. penggunaan kalimat maupun tone negatif yang mencela pengguna 2. pesan yang terlalu generic (misalnya WHAT? Atau hanya SYNTAX ERROR) 3. pesan yang tidak jelas (misalnya FAC RJCT 004004400400) Beberapa panduan umum yang dapat dijadikan sebagai dasar dalam pembuatan pesan error adalah sebagai berikut : 1. spesifik Beberapa contoh pesan error yang baik dan buruk ditunjukkan pada tabel 9.1 Tabel 9.1 Contoh Pesan Error yang baik dan buruk Better

Poor SYNTAX ERROR

Unmatched left parenthesis

ILLEGAL ENTRY

Type first letter: Send, Read, or Drop

INVALID DATA

Days range from 1 to 31

BAD FILE NAME

File names must begin with a letter

2. memberikan informasi yang jelas kepada pengguna mengenai ‘error’ yang terjadi dengan kalimat yang positif

62

Beberapa contoh kalimat negative yang harus dihindari misalnya :FATAL ERROR, RUN ABORTED, CATASTROPHIC ERROR: LOGGED WITH OPERATOR, ILLEGAL, ERROR, INVALID, BAD 3. memperhatikan karakter pengguna, dengan cara memberikan informasi yang konstruktif dan komunikatif. Contoh : In a telephone company,  “We’re sorry, but we are unable to complete your call as dialed. Please hang up, check your number, or consult the operator for assistance”, versus  “Illegal telephone number. Call aborted. Error number 583-2R6.9. Consult your user manual for further information.’ Pada contoh diatas informasi yang disampaikan dengan kalimat pertama lebih baik dibandingkan contoh kalimat kedua. 4. menggunakan format fisik yang jelas, yaitu dengan menghindari penggunakan bilangan dan penempatan pesan error yang tepat, seperti misalnya di tengah layar.

Non-anthropomorphic design Anthropomorphic adalah penggunaan atribut manusia ke benda yang tidak hidup, contohnya seperti penanaman intelligence ke dalam computer yang menyebabkan system yang dibangun menyerupai manusia dari segi bentuk maupun fisiknya sehingga membingungkan pengguna. Dalam menggabarkan hubungan antara amnesia dan computer perly diperjelas perbedaan antara manusia dan computer karena bagaimanapun juga hubungan antara manusia dan computer berbeda dengan hubungan anatra manusia dan manusia. Pengguna dan desainer system harus bertanggungjawab terhadap penyalahgunaaan computer yang disebabkan oleh penggunaan anthropomorphic ini.Meskipun lebih interaktif dan atraktif, interface dengan desain anthropomorphic dapat menyebabkan kebingungan dan menggangu pengguna.Salah satu contoh penggunaan desain anthropomorphic ditunjukkan pada Gambar 9.1.

63

Gambar 9.1 Desain anthropomorphic Untuk menghasilkan desain interface yang nonanthropomorphic namun tetap menarik dapat dilakukan dengan mengikuti panduan berikut : 1. berhati-hati dalam menyajikan interface yang menggunakan karakteristik manusia untuk merepresentasikan komputer 2. suatu interface sebaiknya mudah dipahami, mudah diprediksi dan dikendalikan user 3. gunakan karakter kartun dalam games atau software untuk anak-anak tetapi jangan diterapkan pada software lain 4. jangan menggunakan kata ganti “saya” ketika komputer merespon tindakan user 5. gunakan “kamu” untuk memandu user atau hanya dengan sebuah peryataan saja contoh penggunaan kalimat pemandu pada desain nonanthropomorphic ditunjukkan pada Gambar 9.2.

Gambar 9.2 Contoh Kalimat nonanthropomorphic

Display design Suatu tampilan yang efektif harus mampu menyediakan semua data yang dibutuhkan dalam sekali tampil.Pengelompokan berdasarkan kategori yang tepat dan penggunaan urutan wizard yang sesuai dapat meningkatkan performansi suatu system. Penggunaan blank space 64

ataupun kotak untuk membedakan satu kategori dengan kategori yang lain dapat menjadi salah satu alternatif. Alternatif lain yang dapat digunakan adalah dengan penggunaan ‘pencahayaan’, background shading, warna atau font khusus pada item-item terkait. Smith and Mosier memberikan beberapa sample dari 162 panduan dalam menampilkan sebuah data seperti ditunjukkan pada gambar 9.3.

Gambar 9.3 beberapa sampel dari 162 panduang penyajian data menurut Smith dan Mosier (1986) Salah satu contoh penyajian data yang baik dan buruk ditunjukkan pada Gambar 9.4.

65

Gambar 9.4 contoh tampilan data yang baik dan buruk

Windows design Ketika menggunakan suatu system pengguna membutuhkan multiple-windows yang mampu menyediakan informasi yang cukup dan kemudahan akses.Penggunaan multiplewindows salah satunya dengan menyediakan beberapa workspaces pada layar dapat membatu kinerja user khususnya yang sudah berpengalaman. Color Pemilihan warna dalam menyajikan suatu interface system sangat penting diperhatikan. Dengan penggunaan warna yang baik, dapat memberikan beberapa pengaruh positif diantaranya : -

menambahkan aksen pada tampilan yang kurang menarik

-

memperjelas perbedaan antara satu menu dengan menu yang lain

-

memperjelas pengorganisasian informasi yang logis

-

user dapat langsung menyadari adanya ‘peringatan’ yang muncul pada system

-

meningkatkan ketertarikan, kenyamanan dan ke-enjoy-an user ketika menggunakan system Warna sering digunakan untuk video games, diagram, gambar, pemandangan maupun

objek-objek 3D. Beberapa panduan yang harus diperhatikan dalam penggunaan warna adalah sebagai berikut : 1. Gunakanwarnakonservatif 2. Batasijumlahwarna 3. Penggunaan warnaharus mendukungtugas 4. Penggunaan warnaharus di bawahkontrol pengguna 5. Gunakan desainwarnamonokrom terlebih dahulu 66

6. Perhatikan kebutuhanwarna bagi pengguna berkebutuhan khusus 7. Gunakan warna secara konsisten 8. Hati-hati dalam pemilihan kombinasi warna, jangan salah melakukan kombinasi, beberapa contoh kombinasi yang buruk : biru/merah, kuning/ungu, magenta/hijau, kuning/putih, coklat/hitam, ... contoh kombinasi yang baik: biru/putih, hitam/biru muda, ...



2.


3.


4.

Mempresentasikan hasil diskusi di depan kelas

5.


9.2.3 Latihan dan Solusi Mahasiswa bersama kelompoknya masing-masing (maksimal 6 orang) mengerjakan beberapa tugas berikut : membuat disain rancangan user interface untuk social-networking media dengan memperhatikan prinsip perancangan antar muka yang baik. Contoh Jawaban :

67

9.2.4 Rangkuman Setiap pengguna pada dasaranya memiliki

karakteristik yang berbeda yang juga

menyebabkan perbedaan selera dalam menyikapi suatu interface. Oleh karena itu seorang desainer harus mampu menampilkan informasi maupun data dalam sebuah system sebaik mungkin sehingga mampu memberikan kenyamanan dan kemudahan bagi user.Salah satu hal yang perlu diperhatikan adalah masalah penyampaian pesan error, penyajian menu dalam layar dan juga penggunaan warna. Pada bab ini telah dibahas beberapa panduan umum untuk hal-hal tersebut. 9.3 Penutup 9.3.1 Petunjuk Penilaian dan Umpan Balik Penilaian tugas mahasiswa dilakukan dengan skor dari 0 – 100. Penilaian dilakukan berdasarkan tingkat pemahaman mereka terhadap topik yang telah dibicarakan yang tercermin dengan tugas yang diberikan. Tugas mahasiswa ini secara tidak langsung memberikan umpan balik kepada pengajar seberapa jauh pemahaman mahasiswa terhadap topik yang telah diberikan.

9.3.2 Tindak Lanjut Hasil tugas yang diberikan akan disampaikan via web dan akan ditunjukkan kepada mahasiswa tugas mana yang paling hasilnya paling bagus dan atau contoh hasil tugas yang benar agar dapat membantu mahasiswa untuk memperbaiki pengetahuan mereka sendiri. 68


69

BAB 10 PROTOTYPING & ALAT BANTU PERANCANGAN

10.1Pendahuluan 10.1.1 Deskripsi singkat Prototype adalah salah satu metode dapat digunakan sebagai alat bantu perancangan antarmuka. Dari prototype user akan mendapatkan gambaran system sebenarnya sehingga dapat memberikan feedback kepada desainer pada proses evaluasi system.Stakeholder akan lebih mudah melakukan evaluasi dengan menggunakan prototype jika dibandingkan dengan dokumen. Anggota tim juga dapat berkomunikasi lebih efektif jika telah tersedia prototype interface system. Dapat dikatakan bahwa sebuah prototype mampu menjawab beberapa pertanyaan yang dibutuhkan dalam proses evaluasi dan membantu desainer memilih beberapa alternatif solusi yang ada. Beberapa hal yang harus ada dalam sebuah prototype dianataranya : o Technical issues o Work flows, task design o Screen layot dan information display o Area kritis , sukar dan kontroversial Pada bab ini akan dibahas mengenai beberapa proses yang harus dilalui dalam perancangan system, jenis prototype dan tool yang dapat digunakan untuk hi-fi prototyping. 10.1.2 Manfaat Dari materi mengenai prototyping dan alat bantu perancangan diharapkan mahasiswa paham mengenai metode-metode pembuatan prototype dan teknik-teknik dalam perancangan antar muka 10.1.3 Relevansi Bab ini memiliki relevansi dengan materi dasar-dasar perancangan interaksi yang telah disamapaikan pada bab sebelumnya 10.1.4 Learning Outcomes -

Mahasiswa dapat merancang antarmuka yang baik sesuai dengan prinsip-prinsip interaksi manusia komputer.

70

-

Mahasiswa dapat membuat prototipe antarmuka sebagai media presentasi hasil rancangan

10.2Penyajian Pada bahasan awal akan dibahas mengenai proses perancangan system dimana salah satu tahapannya membutuhkan prototype. Kemudian akan dibahas mengenai jenis-jenis prototype, requirement yang dibutuhkan pada proses pengembangan prototype dan tools yang digunakan untuk hi-fi prototyping. 10.2.1 Materi, Contoh dan Ilustrasi Proses Perancangan Dalam proses pengembangan system, proses perancangan adalah tahapan yang paling penting karena dari proses ini dapat diketahui kebutuhan pengguna dan gambaran system secara menyeluruh. Gambaran proses perancangan ditunjukkan pada Gambar 10.1.

Gambar 10.1 Proses Perancangan Sistem Dari gambar 10.1 dapat dilihat bahwa tahapan perancangan system terdiri atas pengumpulan kebutuhan, analisis, desain system, prototype dan implementasi dan pengembangan.Prototype dibutuhkan untuk mengevaluasi hasil perancangan system yang telah dilakukan. Jika hasil evaluasi terhadap prototype yang dihasilkan menunjukkan hasil yang belum sesuai maka proses analisis kebutuhan dilakukan lagi untuk mengasilkan rancangan yang sesuai dengan kebutuhan user. Proses ini dapat berlangsung berulang-ulang sampai prototype yang dihasilkan sesuai dengan permintaan user dan mampu menjalankan fungsi sesuai dengan spesifikasi system yang akan dibangun. Istilah yang popular untuk menggambarkan hal ini adalah ‘software versi alpha, versi beta’ dan sejenisnya.

71

Prototype Prototype adalah miniature atau model awal sebuah system.Dalam desain interaksi prototype didefinisikan sebagai : 1. Serangkaian sketsa layar 2. a Storyboard 3. a lump of wood (e.g. PalmPilot) 4. a cardboard mock-up 5. a Powerpoint slide show 6. video simulasi penggunaan system 7. software dengan fungsi terbatas Prototype dibutuhkan karena hal-hal sebagai berikut : 1. proses evaluasi dan feedback adalah bagian paling penting dalam desain interaksi antarmuka 2. dengan prototype, stakeholder dapat melihat, menggunakan dan berinteraksi dengan prototype lebih mudah jika dibandingkan dengan dokumen 3. anggota tim dapat berkomunikasi dengan lebih efekti 4. user maupun desainer dapat langsung melakukan ujicoba terhadap system 5. prototype mencerminkan system yang sebenarnya 6. prototype menjawab semua pertanyaan yang dibutuhkan dalam proses evaluasi dan membantu desainer menemukan beberapa alternatif solusi untuk menghasilkan system yang lebih baik sebelum prototype dibuat idealnya keinginan user ‘s mental model telah compatible dengan designer’s conceptual model. Untuk menyatukan model konseptual dari sisi user maupun desainer

dapat

dilakukan

melalui

pemberian

peintah,

manipulasi

dan

navigasi,

pengkonversian dan exploring maupun browsing.Disamping itu juga dapat dilakukan dengan melakukan model konseptual berbasis objek dengan perumpaman atau analogi.Salah satu contoh model konseptual berbasis objek dengan analogi ditunjukkan pada gambar 10.2.

72

Gambar 10.2 Star Interface based on office objects Jenis Prototyping Protototyping dibedakan menjadi 2 jenis, yaitu : 1. Low fidelity Media yang digunakan pada prototype jenis ini adalah kertas dan cardboard, sehingga hasilnya biasanya berupa sketsa, storyboard dan ‘Wizard-of-Oz’.Kelebihan prototype jenis ini adalah cepat dibuat.murah dan mudah untuk dirubah.Salah satu contoh hasil prototype jenis ini ditunjukkan pada Gambar 10.3.

Gambar 10.3 Sketsa Layar

73

2. High fidelity Bahan yang digunakan pada prototyping jenis adalah bahan yang memang akan digunakan untuk produk akhirnya, sehingga hasil prototypenya sudah menyerupai produk akhir. Namun yang menjadi masalah adalah user terkadang telah menganggap bahwa protype yang dibangun adalah system finalnya. Prototyping Tools Untuk membuat sebuah protype system dapat digunakan beberapa tool. Beberapa persyaratan yang harus dimiliki oleh tool yang akan digunakan untuk prototyping diantaranya adalah : 1. Ease of learn and use 2. Fast turn-around 3. Extensive control over prototype features 4. Potential for scaling up 5. Team support 6. Version control Kemudian beberapa jenis tool yang dapat digunakan pada Hi-Fi Prototyping adalah sebagai berikut :  GUI builder Contoh :Netbeans GUI builder, Java Me Visual Mobile Designer, Visual Basic  Façade Tools Contoh :Powerpoint, Visio, Denim  RAD tools Contoh :Director, Flash, Dreamweaver  Scripting languages Contoh :Lingo, ActionScript, Javascript, html, xml, css  Graphic languages Contoh :Processing, Quartz Composer  Domain specific tools Contoh :4GLs, CMSs 10.2.2 Aktivitas Aktivitas mahasiswa terdiri dari : 1.


2.

Mendengarkan penjelasan dosen dan berdiskusi dengan temannya sesuai dengan panduan dosen. 74

3.


4.

Mempresentasikan hasil diskusi di depan kelas

5.


10.2.3 Latihan dan Solusi Mahasiswa bersama kelompoknya masing-masing (maksimal 6 orang) mengerjakan beberapa tugas berikut : membuat prototype untuk satu aplikasi tertentu dengan memperhatikan prinsip perancangan prototype yang baik Contoh Solusi : Membuat Prototype dengan menggunakan Balsamiq Mockup

10.2.4 Rangkuman 1.

Prototypingmemungkinkan desaineruntuk

membangundesainiteratifdengan

melibatkanpengguna 2.

Hal yang paling pentingdalam protyping adalahuntuk merancangmodel konseptualpengguna

3.

2 jenisprototipedigunakanuntuk tujuan yang berbedapada setiap tahapannya, 2 jenis prototype tersebut adalah : 75



Low fidelity , yang digunakan pada tahap awalsebagai solusidesain awal



High fidelity, untukmemperbaikisolusidesain yang ada




76

BAB 11 EVALUASI DESAIN ANTARMUKA 11.1Pendahuluan 11.1.1 Deskripsi singkat Evaluasi adalah sebuah proses yang secara sistematis mengumpulkan data yang menginformasikan kepada kita tentang pendapat seseorang atau sekelompok user mengenai pengalamannnya menggunakan sebuah produk untuk sebuah tugas tertentu dalam sebuah lingkungan tertentu. Pada bab ini dibahas mengenai teknik evaluasi desain antar muka. Teknik ini perlu dipelajari karena pada setiap proses pengembangan system selalu muncul perdebatan mengenai bagus tidaknya suatu desain antarmuka. Disatu sisi beberapa pengguna tidak terlalu memperhatikan masalah desain antarmuka selama system/software yang dikembangkan telah dapat menjalankan fungsi sebagaimana mestinya. Meskipun terkadang tahapan evaluasi dihindari karena akan menambah waktu dan biaya, kegiatan evaluasi merupakan sesuatu yang sangat penting karena dari hasil evaluasi inilah desainer akan dapat mengetahui apakah karyanya berguna dan telah sesuai dengan keinginan user.

11.1.2 Manfaat Dengan mempelajari teknik evaluasi desain antarmuka diharapkan mahasiswa paham mengenai teknik evaluasi antar muka dan mampu menggunakan sebagai salah satu tahapan dalam pengembangan system. 11.1.3 Relevansi Bab ini memiliki relevansi dengan materi prototyping dan alat bantu perancangan yang telah dibahas pada bab sebelumnya. 11.1.4 Learning Outcomes Mahasiswa dapat mengkritisi desain antarmuka yang kurang baik dan memilih teknik evaluasi yang sesuai dengan kebutuhan 11.2Penyajian Pada bahasan awal akan dibahas mengenai konsep dasar evaluasi, manfaat, kapan perlu dilakukan, kemudian akan dibahas pula paradigma evaluasi, teknik-teknik evaluasi, jenisjenis evaluasi, dan metode dalam perancanganevaluasi.

77

11.2.1 Materi, Contoh dan Ilustrasi Konsep Dasar Evaluasi Evaluasi adalah sebuah proses yang secara sistematis mengumpulkan data yang menginformasikan kepada kita tentang pendapat seseorang atau sekelompok user mengenai pengalamannnya menggunakan sebuah produk untuk sebuah tugas tertentu dalam sebuah lingkungan tertentu .Seorang user pada umumnya berkeinginan untuk menggunakan sebuah sistem yang mudah dipelajari, dan penggunaannya sedapat mungkin efektif, efisien, aman, dan memuaskan. Selain itu, sedapat mungkin menyenangkan, atraktif, menantang, dll

.

Proses Evaluasi tidak dikerjakan dalam satu fase proses perancangan tetapi melalui perancangan dengan prinsip life cycle Beberapa alasan kenapa evaluasi dibutuhkan adalah sebagai berikut :  Desainer tidak dapat berasumsi bahwa orang lain seperti dirinya, dan mengikuti design guidelines menjamin bahwa karyanya pasti bagus  Evaluasi digunakan untuk melihat apakah hasil rancangan dengan proses uji coba system yang telah dibuat sesuai dengan permintaan pengguna (user)  Evaluasi dibutuhkan untuk memeriksa apakah user dapat menggunakan produk tersebut dan menyukainya  Evaluasi

kepuasan

penggunaan

terhadap

sebuah

produk

dapat

dilakukan

menggunakan kuesioner dan atau interview Manfaat adanya proses evaluasi diantaranya adalah untuk melihat :  Seberapa jauh sistem berfungsi  Efek suatu interface ke pengguna  Problem yang terjadi pada system Proses evaluasi dapat dilakukan pada beberapa kondisi, diantaranya dilakukan pada:  Proses pembuatan produk tersebut supaya selalu sama dengan yang diminta atau dibutuhkan oleh user. Proses ini biasa disebut formative evaluations  Saat produk tersebut telah jadi yaitu melalui prototype

78

 Saat produk tersebut telah dipasarkan. Jika ada kekurangan atau perubahan

kebutuhan user, maka produk tersebut bisa dibuatkan versi

yang

terbaru/upgrade, mis: program-program Windows, Winamp, dll. Evaluasi ini biasa disebut summative evaluations Paradigma Evaluasi Beberapa paradigma dalam proses evaluas: 1. “Quick and dirty” evaluation Adalah umpan balik berupa keinginan dan yang disukai dari user atau konsultan yang disampaikan secara informal kepada desainer tentang produk yang dibuatnya .Evaluasi ini dapat dilakukan pada semua tahapan pembuatan produk dan penekanannya pada masukan yang cepat/sesingkat mungkin daripada temuan yang didokumentasikan secara hati-hati 2. Usability testing Adalah

evaluasi

yang

melibatkan

pengukuran

kinerja

user

dalam

mempersiapkan tugasnya secara hati-hati, dari proses inilah maka dibuatkan desain sistemnya. Kinerja user umumnya diukur dalam jumlah kesalahan yang dilakukan dan waktu yang dibutuhkan untuk menyelesaikan tugas. Cara yang umumnya digunakan untuk membuat sistem ini yaitu dengan cara: a. Melihat secara langsung b. Merekamnya dalam video 3. Field studies Berbeda dengan usability testing, evaluasi ini dilakukan di lingkungan asli dimana user bekerja, hal ini bertujuan untuk meningkatkan pemahaman tentang kerja user secara alami dan bagaimana teknologi tersebut berdampak padanya Evaluasi ini dapat digunakan untuk: a. Membantu mengidentifikasi kesempatan sebuah teknologi baru b. Menentukan kebutuhan-kebutuhan untuk melakukan desain c. Memfasilitasi pengenalan sebuah teknologi d. Evaluasi teknologi Teknik yang dapat digunakan: a. Interview b. Observasi (pengamatan yang hanya dilakukan oleh desainer) c. Partisipatori (user dilibatkan dalam pembuatan desain) 79

d. Ethnography (penilaian berdasarkan budaya) 4. Predictive evaluation Didasarkan pada pengalaman seorang ahli dalam menghadapi user, dan biasanya hal ini dijadikan patokan untuk memprediksi masalah-masalah penggunaan sebuah produk Keuntungan evaluasi ini: a. User yang diinginkan tidak perlu untuk dihadirkan b. Proses pembuatannya relatif cepat, murah, dan cukup disukai oleh perusahaan Jenis-jenis Evaluasi Beberapa jenis evaluasi yang sering digunakan diantaranya :  Dalam kondisi percobaan (Laboratory) Penggunaan pengujian system ini pada ruang percobaan mempunyai beberapa kondisi diantaranya : o Laboratorium yang bagus biasanya memiliki fasilitas perekaman audio/visual yang baik, komputer beserta perlengkapannya yang mungkin tidak ada pada lokasi kerja sebenarnya o Operator bebas dari gangguan yang menghambat pekerjaan  Dalam kondisi lokasi kerja sebenarnya Penggunaan pengujian system ini pada lokasi kerja sebenarnya mempunyai beberapa kondisi diantaranya : -

Tingkat gangguan yang melebihi ambang batas, tingkat-tingkat pergerakan yang besar dan interupsi yang tetap, seperti panggilan telepon menyebabkan observasi ini sulit dilakukan.

-

Situasi yang lebih “terbuka” antara system dan pengguna, dimana kondisi ini tidak ditemukan pada kondisi di laboratorium

 Participatory Design Adalah suatu pemikiran yang melibatkan keseluruhan alur perancangan dan tidak hanya proses evaluasi saja.Perancangan ini dilakukan pada ruang kerja yang melibatkan pengguna yang tidak hanya digunakan sebagai subyek percobaan tetapi juga sebagai anggota yang aktif dalam team perancangan. Beberapa karakteristik yang dimiliki evaluasi jenis ini diantaranya :  Meningkatkan lingkungan kerja dan tugas

80

 Mempunyai sifat kerja sama, yakni pengguna dilibatkan dalam anggota team dan mempunyai kontribusi pada setiap tingkat perancangan.  Mempunyai pendekatan iterative, perancangan adalah suatu subyek untuk evaluasi dan revisi pada setiap tingkatan. Evaluasi Perancangan Beberapa metode yang dapat digunakan dalam evaluasi perancangan adalah sebagai berikut : 1. Cognitive Walkthrough Adalah suatu usaha yang dilakukan untuk mengenalkan teori psikologi ke dalam bentuk informal dan subyektif . Teknik ini mempunyai tujuan untuk mengevaluasi perancangan dengan melihat seberapa besar dukungan yang diberikan ke pengguna untuk mempelajari beberapa tugas yang diberikan.Pendekatan ini dikemukakan oleh Polson Untuk melakukan Cognitive Walkthrough harus mempunyai informasi yang dibutuhkan, yaitu : 

Deskripsi dari suatu interface yang dibutuhkan itu sendiri



Deskripsi dari tugas termasuk usaha yang benar untuk melakukannya dan struktur tujuan untuk mendukungnya

Dengan Informasi ini maka Evaluator dapat melakukan langkah dari walkthrough, yaitu : a. Memilih Tugas b. Mendeskripsikan Tujuan dari user c. Melakukan kegiatan yang tepat d. Menganalisa proses keputusan untuk setiap kegiatan

2. Heuristic Evaluation Hampir sama dengan Cognitive Walkthrough tetapi metode ini sedikit terstruktur dan sedikit terarah. Dalam system ini terdapat beberapa criteria :  Perilaku Sistem dapat dipastikan.  Perilaku Sistem konsisten  Kemampuan memori user tidak melebihi batas  Dialog merupakan orientasi tugas Tujuan dari evaluasi jenis ini adalah :  Untuk memperbaiki perancangan secara efektif. 81

 Orang yang melakukan evaluasi melalui kinerja dari serangkaian tugas dengan perancangan dan penilaiannya sesuai dengan kriteria setiap tingkatan. Jika ada kesalahan terdeteksi maka perancangan dapat ditinjau ulang untuk memperbaiki masalah ini sebelum pada tingkatan implementasi. 3. Review Based Evaluation Adalah Eksperimen antara psikologi dengan interaksi manusia dan komputer yang menghasilkan hasil-hasil eksperimen yang baik dan pengalaman yang nyata.Dalam

kenyataannya

hasil

eksperimen

ini

tidak

dapat

dipastikan

mempertahankan keadaan yang tetap.Orang yang melakukan evaluasi harus memilih data secara hati-hati, rancangan ekperimen yang dipilih, subyek masyarakat yang digunakan, analisa penyelenggaraan dan asumsi yang telah dibuat. 4. Model Based Evaluation Adalah metode yang dapat digunakan untuk mengevaluasi perancangan dengan mengkombinasi spesifikasi perancangan dan evaluasi ke dalam kerangka kerja yang sama. Contoh GOMS model, keystroke level model dan design rationale.



2.


3.


4.


11.2.3 Latihan dan Solusi Mahasiswa bersama kelompoknya masing-masing (maksimal 6 orang) mengerjakan beberapa tugas berikut : mengevaluasi hasil rancangan prototype pada tugas sebelumnya Contoh Jawaban :

82

11.2.4 Rangkuman 1.

Proses evaluasi dibutuhkan untuk melihat apakah hasil rancangan dengan proses uji coba system yang telah dibuat sesuai dengan permintaan pengguna (user)

2.

Terdapat beberapa paradigma dan teknik evaluasi yang dapat digunakan

3.

Hal terakhir yang perlu diperhatikan dalam memilih teknik evaluasi adalah Peralatan, waktu, biaya, subyek serta evaluator yang ahli.



83


84

BAB 12 ANTARMUKA MASA LALU DAN MASA DEPAN 12.1Pendahuluan 12.1.1 Deskripsi singkat Pada bab ini akan dibahas mengenai perkembangan terkini desain antar muka , memprediksi desain antarmuka di masa depan dan juga membandingkannya dengan antarmuka di masa yang lalu. Antar muka di masa lalu lebih menekankan pada sisi fungsi dan proses, tidak terlalu banyak menggunakan grafis, masih mengandalkan pemanfaatan keyboard dan mouse sebagai media input dan high learning curve. Antar muka saat ini bersifat user centered, lebih mengarah pada pengembangan Sistem Operasi dan pemanfaatan teknologi baru yang menmanfaatkan unsur animasi objek dan audio (suara dan bunyi), motion capture, touch screen, unsur tiga dimensi (spasial atau ruang) dan dalam realitas maya dan berorientasi objek. Dimasa depan tentu saja teknologi yang digunakan dalam membuat user interface akan lebih canggih dan teliti dibandingkan teknologi HCI yang ada sekarang dengan pemanfaatan multi technologi, minimal learning curve dan high mobility. Untuk mendukung hal tersebut juga dibutuhkan beberapa tool software antarmuka. Tool seperti ini akan sangat membantu para developer dalam mendesain maupun mengimplementasikan user interface.

12.1.2 Manfaat Dengan materi ini diharapkan mahasiswa paham mengenai antarmuka masa lalu dan masa depan 12.1.3 Relevansi Bab ini memiliki relevansi dengan materi evaluasi desain.antarmuka 12.1.4 Learning Outcomes Mahasiswa dapat mengkritisi desain antarmuka yang kurang baik dan memilih teknik evaluasi yang sesuai dengan kebutuhan 12.2Penyajian Pada bahasan awal akan dibahas mengenai antarmuka masa lalu dilihat dari perspektif sejarahnya, software-software yang dapat digunakan untuk merancang antarmuka masa lalu dan masa sekarang, antarmuka masa sekarang dan antarmuka masa depan.

85

12.2.1 Materi, Contoh dan Ilustrasi Berbicara mengenai antarmuka masa lalu, saat ini dan masa depan maka tidak terlepas dari penggunaan User Interface Software Tools. UI Software tool membantu developer merancang desain antarmuka dan mengimplementasikannya. Beberapa tool yang sangat populer untuk pengembangan antarmuka saat ini diantaranya adalah :Window Managers, Toolkits, Interface Builders ubiquitous. Hampir sebagian besar software yang ada dikembangkan dengan tool-tool tersebut. Pada dasarnya terdapat 3 prinsip yang sama yang digunakan sebagai landasan pengembangan antarmuka masa lalu, masa kini dan masa yang akan datang. 3 prinsip tersebut adalah useful, usable dan used.Jika dilihat dari perspektif sejarah terkait dengan pemanfaatan tool-tool untuk pengembangan antarmuka dimasa lalu, maka dapat dimulai dengan 4 pertanyaan berikut : 1.

What worked Beberapa Tool yang telah digunakan pada pengembangan antarmuka di masa lalu diantaranya adalah :  Window Managers and Toolkits  Event Languages  Graphical, Interactive Tools  Component Architectures  Scripting Languages  Hypertext  Object Oriented Programming  Constraints

2.

What didn’t catch on Beberapa hal yang belum mampu dicapai di masa lalu adalah :  User Interface Management Systems  Formal Language-Based Tools  Model-Based and Automatic Techniques

3.

Why

4.

Lessons Learned Kemudian untuk melihat bagaimana antarmuka di masa depan dapat dilakukan dengan

mengamati perkembangan trend dan teknologi pendukung yang ada saat ini. Trend yang berkembang saat ini diantaranya terkait pada beberapa hal berikut :

86

 Ubiquitous Computing  Move to recognition-based interfaces  3-D interfaces  End-user customization and scripting Berdasarkan style pengguna komputer, Human Computer Interaction (HCI) sejauh ini mengalami perkembangan dalam 3 fase, yaitu : 1. Era Mainframe (1960s)

: 1 komputer banyak pengguna

2. Era PC (1980s)

: 1 komputer 1 user

3. Era Mobile (2000s)

: beberapa komputer per user

Sementara itu perkembangan HCI berdasarkan evolusi antarmukanya, dibagi ke dalam beberapa fase, yaitu : 1. Tahun 50 an

: antarmuka pada level hardware untuk teknik, contoh : switch panel

2. Tahun 60-70an

: antarmuka pada level pemrograman, contoh : COBOL,

FORTRAN 3. Tahun 70-90an

: antarmuka pada level instruksi

4. Tahun 80an

: antarmuka pada level dialog interaksi, contoh : GUI, Multimedia

5. Tahun 90an

: Antarmuka pada level lingkungan kerja, COntoh : Sistem Network,

Groupware 6. Tahun 2000an-sekarang

: antarmuka berkembang luas kearah system interaktif

HCI pada setiap masa memiliki ciri dan karakteristik masing-masing. Berikut ciri-ciri Antarmuka masa lalu, masa sekarang dan masa depan. Ciri Antar Muka Masa Lalu : 1. Lebih mementingkan fungsi dan proses yang terjadi 2. Tidak banyak menggunakan grafis 3. Lebih berkembang segi hardware 4. Proses input terpaku pada penggunaan keyboard dan mouse 5. High learning curve Ciri Antar Muka Masa Sekarang : 1. Berpusat pada pengguna (user centered) 2. Focus pada pengembangan system operasi 3. Perkembangan hardware dan software 4. Teknologi ditujukan pada natural feel, motion capture, touch screen 87

5. Pemanfaatan teknologi baru yang meanfaatkan unsur animasi objek dan audio (suara dan bunyi), , unsur tiga dimensi (spasial atau ruang) dan dalam realitas maya dan berorientasi objek Ciri Antar Muka Masa depan : 1. Lebih cepat dan lebih canggih dibandingkan dengan teknologi HCI masa sekarang 2. Penggunaan multi teknologi pada gadget, motion capture dan touch screen 3. Minimal learning curve 4. High mobility



2.


3.


4.


12.2.3 Latihan dan Solusi Mahasiswa bersama kelompoknya masing-masing (maksimal 6 orang) mendiskusikan mengenai disain user interface masa kini dan masa depan. Contoh Jawaban :

88

12.2.4 Rangkuman 1. UI

Software tool membantu developer merancang desain antarmuka dan mengimplementasikannya 2. Terdapat 3 prinsip yang sama yang digunakan sebagai landasan pengembangan antarmuka masa lalu, masa kini dan masa yang akan dating, yaitu useful,usable dan used 3. Antarmuka pada setiap masa memiliki ciri khas masng-masing dan saling berkesinambungan, dalam artian pada setiap proses perkembangan selalu diperhatikan perspektif sejarahnya sehingga selalu menghasilkan antarmuka yang lebih baik. 12.3 Penutup 12.3.1 Petunjuk Penilaian dan Umpan Balik Penilaian tugas mahasiswa dilakukan dengan skor dari 0 – 100. Penilaian dilakukan berdasarkan tingkat pemahaman mereka terhadap topik yang telah dibicarakan yang tercermin dengan tugas yang diberikan. Tugas mahasiswa ini secara tidak langsung memberikan umpan balik kepada pengajar seberapa jauh pemahaman mahasiswa terhadap topik yang telah diberikan.



89

CONTOH SOAL UAS UJIAN AKHIR SEMESTER FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS GADJAH MADA Mata Kuliah : Interaksi Manusia dan Komputer Prodi : Ilmu Komputer Kelas B Hari/Tanggal : Selasa, 15 Januari 2013 Waktu : 100 menit Sifat : Buku terbuka, boleh menggunakan laptop/ipad Dosen : Faizah, S.Kom, M.Kom

Perhatian : -Jangan lupa berdoa dulu sebelum Mengerjakan soal ^_^

SOAL 1. Untuk meningkatkan pelayanan terhadap konsumennya, Hotel ‘Golden’ berniat untuk mengembangkan sistem “Booking Room Online” berbasis mobile. Buatkan prototype desain mobile interface untuk sistem tersebut. Berikan penjelasan secukupnya ![30 poin] 2. HCI (Human Computer Interface) mengalami perkembangan dari masa ke masa. Jelaskan perbedaan karakteristik 4 interaction style (Direct Manipulation, Command Language, Menu Selection dan Form Fill-in) dari masa ke masa (masa lalu, saat ini dan prediksi di masa yang akan datang) ! [30 poin] 3. Lakukan evaluasi terhadap 2 desain website berikut.Kesalahan apa saja yang terjadi dalam proses perancangan dan metode evaluasi seperti apa yang paling tepat untuk digunakan? Berikan alasan secukupnya! [40 poin] Desain web 1

90

Desain web 2

------------------Selamat mengerjakan, semoga sukses  --------------------

91

DAFTAR PUSTAKA Dix, Alan, Finlay, Janet., et.al , 2004. Human-Computer Interaction (3rd Edition), Prentice Hall. ISBN 0-13-046109-1 Shneiderman , Ben., Plaisant, Catherine., et.al. 2010. Designing the User Interface: Strategies for Effective Human-Computer Interaction (5th Edition) , Addison-Wesley. ISBN 0321-26978-0 Chapman,Roger J.,2005. Slide :An Instructor’s Outline of Designing the User Interface 4th Edition, Pearson Education, Inc Kiewe, Howard., 2003. Slide :Command Language Design, UPA/STC Montréal Romero, Pablo., 2005, Slide Lecture : Design, prototyping, construction and prototyping tools, Department of Informatics of the University of Sussex

92

Buku 2: RKPM INTERAKSI MANUSIA KOMPUTER

Recommend Documents