Dokumen ini membahas interaksi manusia dan komputer (HCI), termasuk definisi, tujuan, dan permasalahan yang muncul dalam desain sistem interaktif. Selain itu, dibahas faktor manusia, antarmuka yang ramah pengguna, serta pentingnya ergonomi dan penggunaan warna yang efektif dalam desain. Berbagai prinsip dan kriteria juga diuraikan untuk menciptakan pengalaman pengguna yang baik dan mengurangi frustrasi dalam penggunaan sistem.

1. Interaksi
Komputer dan
Manusia
Hj. Yuslena Sari, M.Kom
yuzlena@gmail.com
1

2. Materi Bahasan
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
2
Pendahuluan
Faktor Manusia
Ragam Dialog
Perancangan Tampilan
Piranti Interaktif
Aspek Ergonomic
Teknik-teknik Evaluasi
Tingkat Kedewasaan HCI
Past, Present, and future user interface software tools
Creating Creativity
Technology of Information: HCI and the digital Library

3. Pendahuluan

4. Apa aksi
manusia ?
Apa reaksi
komputer ?

5. Pengertian IMK

Interaksi adalah komunikasi antara dua atau
lebih objek yang saling mempengaruhi satu
sama lain.

6. Pengertian IMK
“ Interaksi manusia dan komputer merupakan disiplin ilmu
yang mempelajari desain,evaluasi, implementasi dari sistem
komputer interaktif untuk dipakai oleh manusia,beserta
studi tentang faktor-faktor utama dalam lingkungan
interaksinya.”
(ACM SIGCHI,1992,p.6)

7. Sistem IMK
HCIS = ƒ (h,m,e,i,t)
Dimana:
HCIS = sistem manusia dan komputer
h = subsistem manusia
m = subsistem mesin
e = subsistem lingkungan
i = interaksi manusia dengan sub-sub sistem
t = waktu, lamanya interaksi terjadi

8. Human Computer-Interface (HCI)

Istilah lain: man-machine interaction (MMI), computer and
human interaction (CHI), dan human-machine interaction
(HMI)

Tujuan:




User friendly (ramah dengan pengguna): kemampuan yang dimiliki
oleh software atau program aplikasi yang mudah dioperasikan, dan
mempunyai sejumlah kemampuan lain 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
Implikasi: meningkatkan kepuasan kerja dan menurunkan tingkat
absensi pekerja

9. HCI (lanjutan)

Permasalahan yang muncul:







Programer tidak dapat memahami secara tepat
penggunanya, mis: tentang keinginan dan
lingkungan kerja pengguna
Sistem komputer mengharuskan pengguna
untuk mengingat terlalu banyak informasi
Sistem komputer tidak memberikan ruang
untuk toleransi kesalahan
Para pengguna berbeda dari sebelumnya
Para pengguna berbeda satu dengan lainnya
Para pengguna berbeda dari kita
Mulai diterapkannya GUI (Graphical User
Interface)

10. Prinsip Kerja Sistem Komputer
Input:
Angka, karakter,
gambar, dll
Proses
Interaksi manusia dan komputer
Output:
Angka, karakter,
gambar, suara, dll

11. Kriteria User Friendly




Memiliki tampilan yang
bagus
Mudah dioperasikan
Mudah dipelajari
Pengguna selalu merasa
senang setiap kali
menggunakan software
tersebut

12. Definisi IMK

Sekumpulan proses, dialog, dan kegiatan dimana
melaluinya pengguna memanfaatkan dan
berinteraksi dengan komputer

Suatu disiplin ilmu yang menekankan pada aspek
desain, evaluasi, dan implementasi dari sistem
komputer interaktif untuk kegunaan manusia
dengan mempertimbangkan fenomena-fenomena
disekitar manusia itu sendiri

Suatu studi ilmiah tentang masyarakat didalam
lingkungan kerjanya

13. Konteks Aksi dan Fungsi
Segala mesin yang
dioperasikan oleh
manusia untuk
mencapai tujuan
tertentu dengan
melakukan suatu aksi.
Tujuannya
memaksimalkan fungsi
suatu mesin. Jadi, ada
interaksi antara
manusia dan mesin.
aksi
Fungsi

14. Kemampuan Penggunaan
(Usability)
USER FRIENDLY
SULIT
DIOPERASIKAN
Sebelum 70-an
70-an
HCI
80-an

15. Kemampuan Penggunaan (Usability)


Istilah Usability dimaksudkan untuk membuat
kriteria kualitas suatu perangkat lunak seperti
fungsionalitas, kehandalan, efisensi, kemudahan
pemeliharaan
Hal yang menyangkut Usability :




Learnability (Kemampuan Pembelajaran)
Throughput (Tolak Ukur Keluaran)
Flexibility (Keluwesan)
Attitude (Perilaku)

16. Proses Menghasilkan Sistem dengan
Antarmuka yang Baik


Apa mungkin merancang antarmuka yang baik ?
“Sangat Mungkin”
Caranya dengan memetakan secara jelas antara
Tujuan dari seorang Pemakai dengan Aksi dan Hasil
yang ingin dicapai. Dari Hasil tersebut akan
diperoleh Umpan Balik untuk memperbaiki tujuan
pemakai

17. Pemetaan antara Tujuan, Aksi dan
Hasil
Tujuan
Pemakai
Antarmuka/
Kontrol
Aksi
Pemakai
Umpan Balik
Fungsi dari
Suatu Sistem
Hasil

18. Aplikasi IMK







Perkantoran
Kendali proses
Penerbangan
Komunikasi
Desain pekerjaan
Pelatihan/seleksi
dll

19. Bidang Studi yang Mempengaruhi Perkembangan
IMK
Softare
engineering
Computation
al linguistics
Social
psychology
Artificial
intelligenc
e
Cognitive
science
HCI
Sociology
Cognitive
psychology
Ergonomics
Mathematics
Organizational
psychology
Anthropology

20. Piranti Bantu Pengembangan Sistem

Pertama kali dikembangkan oleh MacApp
oleh Apple pada pertengahan tahun 1980-an

Contoh piranti bantu lainnya: Visual dBase,
Visual BASIC, Visual J++, Visual C/C++,
Borland Delphi, dll

Keuntungan:


Tampilan/antarmuka yang dihasilkan menjadi
lebih baik
Program antarmuka menjadi mudah ditulis dan
lebih ekonomis untuk dipelihara

21. Kesalahan Mendasar Programmer





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

22. Konsekuensi Interface yang Buruk




Meningkatnya kesalahan dalam penginputan
data dan sistem pengoperasian
Tidak bisa diaksesnya suatu fungsi
Kefrustasian Pemakai : produktivitas yang
rendah atau pemanfaatan yang rendah
Gagalnya suatu sistem disebabkan oleh
penolakan pemakai

24. Konteks IMK

1.
2.
3.
4.
5.
Produk yang memiliki IMK yang baik ialah GUI
(Graphical User Interface) yang memiliki
keuntungan dibandingkan dengan interface mode
teks (command driven) yi:
Tugas pemakai lebih cepat selesai
Tingkat frustasi relatif lebih rendah
Penurunan kelebihan tenaga
Pemakai mudah untuk belajar sendiri, sehingga menurunkan
biaya pelatihan
Pemakai bisa mempelajari lebih banyak kemampuan suatu
aplikasi

25. TUGAS 1

Rancanglah desain input dan desain output dari
sebuah kasus sederhana (tema: bebas)

26. Faktor Manusia

27. Pendahuluan

Aspek dalam sistem komputer



Aspek hardware
Aspek software
Aspek brainware

Kegiatan memodelkan manusia adalah kegiatan yang cukup
sulit karena manusia menggunakan panca indera

Panca indera:





Mata: benda, ukuran, warna, bentuk, kepadatan, dan tekstur
Telinga: nada, warna nada, pola titik nada, intensitas, frekuensi
Hidung: membedakan bau
Lidah: membedakan rasa manis, kecut, pahit, asin
Kulit: merasakan tekanan dan suhu

28. Kecapakan Manusia dan Komputer
Kecakapan Manusia
Kecakapan Komputer
Estimasi
Kalkulasi akurat
Intuisi
Deduksi logika
Kreatifitas
Aktifitas perulangan
Adaptasi
Konsistensi
Kesadaran serempak
Multitasking
Pengolahan abnormal/perkecualian
Pengolahan rutin
Memori asosiatif
Penyimpanan dan pemanggilan
kembali data
Pengambilan keputusan nondeterministik
Pengambilan keputusan deterministik
Pengenalan pola
Pengolahan data
Pengetahuan duniawi
Pengetahuan domain
Kesalahan manusiawi
Bebas dari kesalahan

29. Istilah dalam Penglihatan/Visual

Luminans



Banyaknya cahaya yang dipantulkan oleh
permukaan obyek
Semakin besar luminans sebuah obyek, rincian
obyek yang dapat dilihat oleh mata akan
semakin bertambah
Kontras



Selisih antara luminans obyek dengan luminans
latar belakang
Nilai kontras dapat positif atau negatif
Nilai kontras negatif akan membuat obyek tidak
nampak

30. Istilah dalam Penglihatan/Visual

Kecerahan


Tanggapan subyektif pada cahaya
Tidak ada kaitan dengan luminans dan kontras, namun luminans
dapat berimplikasi pada kecerahan

Sudut dan ketajaman penglihatan


Sudut penglihatan (visual angle): sudut yang
dibentuk antara obyek dengan mata
Ketajaman penglihatan (visual acuity): sudut
penglihatan minimum ketika mata masih dapat
melihat sebuah obyek dengan jelas

31. Istilah dalam Penglihatan/Visual

Medan penglihatan: sudut yang dibentuk ketika mata bergerak ke kiri terjauh
dan ke kanan terjauh
 Daerah I, penglihatan binokuler
 Daerah II, penglihatan monokuler kiri
 Daerah III, penglihatan monokuler kanan
 Daerah IV, daerah buta
62-70
II
94-104
62-70
I
III
IV
94-104

32. Penggunaan Warna yang Efektif
Aspek psikologis
 Hindarkan penggunaan warna berikut secara bersama-sama
seperti cyan, magenta, dan kuning karena dapat menimbulkan
kelelahan mata
 Hindarkan warna biru untuk garis tipis, teks dan bentuk kecil,
sebab sistem penglihatan kita tidak disiapkan untuk rangsangan
yang tajam, terinci dan bergelombang pendek
 Pertimbangkan warna tajam untuk pengguna usia tua
 Warna akan berubah jika aras cahaya sekeliling berubah dan
juga akibat penambahan dan penurunan kontras
 Perubahan warna yang dapat dideteksi bervariasi untuk warna
yang berbeda. Merah dan ungu sukar dideteksi dibandingkan
dengan kuning, hijau atau biru
 Hindarkan warna merah dan hijau dalam skala besar pada
tempat berseberangan. Warna yang cocok adalah biru-kuning

33. Penggunaan Warna …. (lanjutan)
Aspek psikologis (lanj.)
 Warna berlawanan yang dapat digunakan bersama-sama
mis: merah-hijau dan biru-kuning. Kombinasi hijau-biru
memberikan citra jelek
 Hindarkan perubahan warna tunggal untuk menolong
pengguna dengan keterbatasan dalam melihat warna
Aspek kognitif
 Jangan menggunakan warna secara berlebihan. Penggunaan
warna ditujukan untuk menarik perhatian, atau untuk
pengelompokkan informasi. Manfaat itu akan hilang jika
warna yang digunakan terlalu banyak
 Waspadalah terhadap manipulasi warna secara tidak linier
 Kelompokkanlah elemen-elemen yang saling berkaitan
dengan warna latar belakang yang sama

34. Penggunaan Warna …. (lanjutan)
Aspek kognitif (lanj.)
 Warna yang sama “membawa” pesan yang serupa
 Kecerahan dan saturasi akan menarik perhatian
 Urutkan warna sesuai dengan posisi spektralnya
 Warna hangat (panjang gelombang besar) dapat
digunakan untuk menunjukkan aras tindakan.
Biasanya warna yang hangat digunakan untuk
menunjukkan adanya tindakan atau tanggapan
yang diperlukan. Warna yang dingin dapat dipakai
untuk menunjukkan status atau informasi latar
belakang

35. Memori Manusia
External
environment
Sensor
Information
store
Visual: 0.1 - 0.2 sec
Auditory: 2-4 sec
without processing
Short-term
memory
20-30 sec
Long-term
memory
? forever

36. Memori Manusia
Sensory stores
 Dapat dipandang sebagai sekumpulan register penyangga temporer
 Informasi yang masuk akan dinyatakan dalam bentuk tak terproses atau
tak terkodekan
 Informasi disimpan dalam bentuk fisik dan bukan dalam bentuk
simbolik
Short-term memory
 Dapat dipandang sebagai penyimpan temporer
 Informasi yang masuk akan dinyatakan dalam bentuk terkodekan bukan
dalam bentuk fisik
 Sering disebut sebagai working memory
Long-term memory
 Informasi yang masuk melalui kesadaran penuh yang disebut proses
“belajar” atau lewat proses bawah sadar yang terjadi berulang-ulang
 Berbasis semantik dan diakses secara asosiatif
 Sifat penyimpanannya sukar dilupakan

37. Ragam Dialog

38. Dialog Manusia Komputer
Pengertian dialog:
 Umum, dialog adalah proses komunikasi antara
2 atau lebih agen, dalam dialog makna harus
dipertimbangkan agar memenuhi kaidah
semantis dan pragmatis
 IMK, dialog adalah pertukaran instruksi dan
informasi yang mengambil tempat antara user
dan sistem komputer

39. Aturan dalam Perancangan Dialog







Pegang teguh konsistensi
Sediakan shortcut bagi pengguna aktif
Sediakan feedback yang informatif
Sediakan error handling yang mudah
Ijinkan pembatalan aksi
Sediakan fasilitas bantuan (help)
Kurangi beban ingatan jangka pendek

40. Pegang Teguh Konsistensi

Informasi disusun dalam formulir-formulir, namanama dan susunan menu, ukuran dan bentuk dari
ikon, dll, semuanya harus konsisten diseluruh
sistem



Konsisten mengijinkan banyak aksi menjadi otomatis
Jika ada aplikasi baru hadir dengan fungsi yang berbeda
akan menyebabkan user harus mempelajari kembali
operasi-operasi yang dilakukan
Mis: konsistensi di dalam menu bar untuk File, Edit dan
Format

41. Sediakan Short Cut Bagi Pengguna Aktif

User yang bekerja dengan satu aplikasi dalam
seluruh waktunya akan menginginkan
penghematan waktu dengan memanfaatkan short
cut




User mulai hilang kesabaran dengan urutan menu
panjang ketika mereka sudah tahu pasti apa yang
mereka kerjakan
Short cut keys dapat mereduksi jumlah interaksi
untuk tugas yang diberikan
Designer dapat menyediakan fasilitas makro bagi
user untuk membuat short cuts bagi dirinya sendiri
Dengan short cut membuat user lebih produktif

42. Sediakan Feedback yang
Informatif

Setiap aksi dari user harus ada feedback dari
komputer untuk menunjukkan hasil dari aksi
tersebut


Mis: jika user meng-”click” sebuah button harus secara
visual ada perubahan bentuk atau bisa berupa bunyi yang
mengindikasikan komputer telah meresponnya
Informasi feedback sangat penting bagi user, mis:

Jika komputer sedang melakukan proses tertentu, maka perlu ada
informasi

43. Sediakan Error Handling
yang Mudah


Error dapat menjadi masalah yang serius, sehingga
designer harus mencoba mencegah user membuat
error
Ketika errors terjadi perlu cara mengatasinya:



Pesan error harus dinyatakan secara jelas apa kesalahannya
dan menerangkan bagaimana kesalahan tersebut terjadi
Hindari pesan yang menakutkan atau menyalahkan user
seperti: “FATAL ERROR 2005”
Juga sediakan informasi yang memudahkan untuk
mengoreksi error tersebut, mis: “the date of birth entered
is not valid. Check to be sure only numeric characters in
appropriate ranges are entered in the date of birth
fields….”

44. Contoh Error Handling

45. Ijinkan Pembatalan Aksi




User memerlukan bahwa ketika mereka sudah
memilih opsi dan membuat aksi, aktivitas itu dapat
dibatalkan atau kembali ke kondisi sebelumnya
dengan mudah
Mengijinkan user untuk belajar tentang sistem
dengan melakukan eksplorasi
Jika mereka melakukan kesalahan, mereka dapat
membatalkan aksinya
Jika user akan menghapus sesuatu yang substansial
(mis: sebuah file), sistem harus meminta
konformasi terhadap aksi tersebut

46. Sediakan Fasilitas Bantuan (Help)

User yang berpengalaman menginginkan
bahwa mereka yang mengendalikan sistem
dan sistem merespon mereka. Segala sesuatu
yang mereka tidak tahu rasanya ingin segera
mendapat jawabannya, oleh sebab itu fasilitas
“help” penting untuk menolongnya agar
segera mendapatkan solusi

User yang tidak berpengalaman ketika
mengalami kesulitan dalam mengeksplorasi
sistem juga perlu mendapat pertolongan
yang mudah dan sederhana, fasilitas “help”
yang lengkap, mudah dioperasikan akan
menolong mereka mengatasi kesulitannya

47. Kurangi Muatan Short-Term Memory


Orang mempunyai keterbatasan pada shortterm memory-nya
Orang hanya mengingat sekitar 7 chunk
informasi pada satu saat

48. Karakteristik Umum Ragam Dialog

Inisiatif



Inisiatif oleh komputer; user memberikan tanggapan atas prompt
yang diberikan oleh komputer
Inisiatif oleh user; user mempunyai sifat keterbukaan yang luas dalam
artian user diharapkan agar dapat memahami sekumpulan perintah
yang harus ditulis menurut aturan (sintaks) tertentu
Keluwesan

Tidak hanya dilihat dari kemampuan sistem menyediakan sejumlah
perintah-perintah yang memberikan hasil sama, tetapi bagaimana
sistem dapat menyesuaikan diri dengan keinginan pengguna dan
bukan sebaliknya

49. Karakteristik Umum Ragam Dialog (lanj)

Kompleksitas


Keluwesan harus dibayar dengan kompleksitas
implementasi yang tinggi, oleh sebab itu perlu
pembatasan kompleksitas dengan cara TIDAK membuat
antarmuka lebih dari yang diperlukan karena tidak ada
keuntungan darinya
Kekuatan

Didefinisikan sebagai jumlah kerja yang dapat dilakukan
oleh sistem untuk setiap perintah yang diberikan oleh
user. Aspek ini dapat berbenturan dengan aspek
keluwesan dan kompleksitas

50. Karakteristik Umum Ragam Dialog (lanj)

Beban informasi


Konsistensi


Penyampaian informasi dalam dialog yang sesuai dengan kebutuhan
pengguna
Suatu atribut yang dapat mendorong user mengembangkan
mentalitas dengan cara memberikan semacam petunjuk untuk
mengeksplorasi pengetahuan tentang pemahaman perintah-perintah
baru dengan opsion yang sudah ada
Umpan balik

Kemampuan untuk memberikan informasi kepada user tentang
proses yang sedang berjalan akibat adanya masukan yang dilakukan
oleh user

51. Karakteristik Umum Ragam Dialog (lanj)

Observabilitas


Sistem dapat berfungsi secara benar namun nampak
sederhana bagi user
Kontrolabilitas

Sistem yang selalu dalam kontrol user. Dialog yang
memiliki sifat ini harus memungkinkan user agar dapat
menentukan:




Dimana sebelumnya ia berada
Dimana sekarang ia berada
Kemana ia dapat pergi
Apakah pekerjaan yang sudah dilakukan dapat dibatalkan

52. Command Language


Bahasa perintah biasanya diperlukan dalam sistem operasi DOS dan
UNIX. User menulis suatu perintah dan menunggu respon dari sistem.
Jika hasilnya benar, perintah berikutnya diterbitkan, jika salah tindakan
selanjutnya ada ditangan user
Contoh:


C:>DIR
C:>DIR *.DOC/s
Keuntungan
•Luwes
•Inisiatif pada pengguna
•Nyaman dalam penciptaannya
•Memberdayakan user
•Cepat
•Efisien
•Akurat
- C:>copy *.doc A:LETTER
- C:DOS>FORMAT A: /S
Kerugian
•Membutuhkan pelatihan yang
lama
•Membutuhkan penggunaan yang
teratur
•Beban ingatan yang tinggi
•Jelek dalam menangani
kesalahan

53. Command Language
(lanj)
Beberapa pedoman:
 Buatlah model eksplisit dari obyek atau tindakan
 Pilihlah nama-nama yang penuh arti, spesifik dan
jelas
 Gunakanlah struktur hirarki
 Usahakan struktur yang konsisten
 Aturan-aturan penyingkatan harus konsisten
 Pertimbangkan pemakaian menu-menu perintah
pada tampilan berkecepatan tinggi
 Batasi jumlah perintah untuk menjalankan suatu
tugas

54. Bahasa Alami


Sistem harus tunduk dan merespon kalimatkalimat dan frase-frase pada bahasa alami
Keuntungan:


Mengurangi beban mempelajari sintaks
Kerugian:



Memerlukan dialog klarifikasi
Memerlukan lebih banyak pengetikan
Tidak dapat diprediksi

55. Manipulasi Langsung

User berinteraksi secara langsung dengan obyek pada layar grafis
sementara sistem menyediakan umpan balik yang cepat pada user
Keuntungan
Kerugian
•Mempunyai analogi yang jelas
dengan suatu pekerjaan nyata
•Mengurangi waktu pembelajaran
•Memberikan tantangan untuk
eksplorasi pekerjaan yang nyata
•Penampilan visual yang bagus
•Mudah dioperasikan
•Tersedianya berbagai perangkat
bantu untuk merancang ragam
dialog manipulasi langsung
•Memerlukan program yang rumit
dan berukuran besar
•Memerlukan tampilan grafis
berkinerja tinggi
•Memerlukan peranti masukan
seperti mouse, trackball, dll
•Memerlukan perancangan
tampilan dengan kualifikasi
tertentu

56. Contoh Manipulasi Langsung

57. Sistem Menu

Pengguna menentukan satu dari sejumlah pilihan pada daftar, kemudian
menerapkan sintaks untuk mengindikasikan pilihan, menegaskan
pilihan, memulai aksi dan mengamati hasilnya
Keuntungan
•Proses belajar singkat
•Mengurangi pengetikan
•Kesalahan mudah diatasi
•Struktur terdefinisi dengan baik
•Beban memori rendah
•Perancangannya mudah
Kerugian
•Proses sedikit lambat
•Menghabiskan ruang layar
•Kurang cocok untuk aktivitas
pemasukan data
•Memerlukan kecepatan tampilan
yang tinggi

58. Sistem Menu Datar
Sistem Informasi Akademik
STMIK “AMIKOM”
[A] Registrasi Mahasiswa Baru
[B] Registrasi Mahasiswa Lama
[C] Edit Data Mahasiswa
[D] Edit Mata Kuliah
[E] Cetak KHS/KRS
[F] Cetak Presensi Kuliah
[G] Selesai
Pilih salah satu: _

59. Sistem Menu Tarik

60. Sistem Menu Tarik

61. Borang Isian (Form Fill-In)

Pengguna melihat suatu tampilan medan yang berhubungan satu sama
lainnya, kursor dipindahkan sepanjang medan-medan yang ada
selanjutnya data diisikan pada medan yang dikehendaki
Keuntungan
•Proses pemasukan datanya
relatif mudah
•Perlu sedikit pelatihan
•Beban memori rendah
•Strukturnya jelas
•Tersedia berbagai piranti bantu
desain tampilan
•Perancangannya mudah
Kerugian
•Menghabiskan ruang layar
•Tidak cocok untuk pemilihan
instruksi
•Memerlukan pengontrol kursor
•Mekanisme navigasi tidak jelas
•Sering kali cukup lambat

62. Contoh Borang Isian

63. Perancangan Tampilan

64. Pendahuluan

Salah satu kriteria penting dari sebuah antarmuka adalah tampilan yang
menarik

Yang harus dimiliki oleh perancang tampilan:


Jiwa seni yang memadai
Mengetahui selera user secara umum

Seorang perancang tampilan HARUS mendokumentasikan semua
pekerjaan yang telah dia kerjakan selama ini, sebagai bahan evaluasi
pembuatan tampilan yang baru atau memperbaiki tampilan sebelumnya

PROGRAM YANG DIBUAT BUKAN UNTUK ANDA, NAMUN
UNTUK ORANG LAIN

65. Cara Pendekatan
Jenis program aplikasi:


Special purpose software
General purpose software

66. Special Purpose Software




Yaitu program aplikasi untuk keperluan khusus dengan user
yang khusus pula (special purpose software)
Kelompok user dapat dengan mudah diperkirakan, baik dari
segi keahlian maupun ragam antarmuka yang akan
digunakan
Mis: program inventori gudang, pengelolaan data akademis
mahasiswa, pelayanan reservasi hotel
Pendekatan yang digunakan:


User-centered design approach: perancang dan user bersama-sama
membuat tampilan antarmuka
User design approach: hanya user yang membuat tampilan
antarmuka

67. General Purpose Software

Yaitu program aplikasi yang akan digunakan oleh berbagai
macam kalangan user

Perancang dapat melakukan „pemaksaan‟ kepada user untuk
menerima tampilan antarmukanya, walaupun dapat
memberikan dampak program tersebut tidak laku

Salah satu cara yang dapat dilakukan adalah user dapat
melakukan perubahan tampilan sesuai dengan keinginannya
sendiri (customization), mis: merubah warna dasar,
pengaturan desktop, wallpaper, screensaver, dll

68. Komponen Antarmuka Pengguna
1.
2.
3.
4.
Model pengguna; memungkinkan user untuk
mengembangkan pemahaman yang mendasar
tentang apa yang dikerjakan oleh program,
bahkan oleh user yang sama sekali tidak
mengetahui teknologi komputer
Bahasa perintah; sedapat mungkin menggunakan
bahasa alami
Umpanbalik; kemampuan sebuah program yang
membantu user untuk mengoperasikan program
itu sendiri
Tampilan informasi; digunakan untuk
menunjukkan status informasi atau program
ketika user melakukan suatu tindakan

69. Urutan Perancangan
1.
2.
3.
4.
5.
Pemilihan ragam dialog
Perancangan struktur dialog; melakukan
analisis tugas dan menentukan model
pengguna dari tugas tersebut
Perancangan format pesan; tata letak tampilan,
keterangan tektual secara terinci, dan efisiensi
inputing data harus mendapat perhatian lebih
Perancangan penanganan kesalahan
Perancangan struktur data

70. Penanganan Kesalahan




Validasi pemasukan data, mis: jika user harus
memasukkan bilangan positif, namun dia memasukkan
data negatif atau nol, maka harus ada mekanisme untuk
mengulang pemasukan data tersebut
Proteksi user; program memberi peringatan ketika user
melakukan suatu tindakan secara tidak sengaja, mis:
penghapusan berkas
Pemulihan dari kesalahan: tersedianya mekanisme
untuk membatalkan tindakan yang baru saja dilakukan
Penampilan pesan salah yang tepat dan sesuai dengan
kesalahan yang terjadi pada waktu itu

71. Perancangan Tampilan Berbasis Teks






Urutan penyajian; disesuiakan dengan model
pengguna
Kelonggaran; mis: dengan adanya jarak spasi antar
perintah, atau penempatan yang khusus
Pengelompokkan data yang saling berkaitan
Relevansi; hanya pesan-pesan yang relevan saja
yang ditampilkan di layar
Konsistensi; menggunakan suku kata yang
konsisten untuk menjelaskan sesuatu
Kesederhanaan; menggunakan singkatan yang
dipahami oleh umum

72. Perancangan Tampilan Berbasis Grafis





Ilusi pada obyek-obyek yang dapat dimanipulasi, mis:
gambar disket, printer, dll
Urutan visual dan fokus pengguna, mis: tanda kedip untuk
posisi kursor, penggunaan warna yang berbeda
Struktur internal; berguna untuk menunjukkan bahwa
obyek yang sedang dihadapi dapat dimodifikasi sesuai
dengan keinginan user
Kosakata grafis yang konsisten dan sesuai, mis: gambar
disket, printer, dll
Kesesuaian dengan media/informasi yang akan disampaikan

73. Piranti
Interaktif

74. Piranti Input/Output


Didalam konteks IMK, suatu piranti
memungkinkan komunikasi antara manusia dan
komputer melalui beberapa saluran komunikasi
fisik
Diklasifikasikan sebagai:


Piranti masukan (ke komputer), mis: keyboard
Piranti keluaran (dari komputer), mis: speaker

75. Piranti Input Keyboard



Pertama kali desain keyboard didasarkan pada rancangan
QWERTY, dikembangkan pada tahun 1866 untuk mesin
ketik
QWERTY keyboard dirancang untuk mengatasi tomboltombol yang paling sering ditekan, dalam artian untuk
mengurangi kemacetan penekanan
Keyboard akan optimal bilamana tata letak kunci-kuncinya
sedemikian rupa sehingga menyebabkan pergantian jari
yang menekan tombol akan menghasilkan kecepatan yang
maksimal namun dengan ketegangan otot yang minimal.
Secara ergonomi, keyboard telah dirancang untuk
mengurangi ketegangan otot jari

76. Piranti Input – Keyboard (2)

Keyboard merupakan piranti terbaik untuk
inputan berbentuk teks. Meskipun demikian,
penelitian menunjukkan bahwa untuk
melaksanakan pekerjaan berbentuk pilihan (mis:
dari suatu menu), keyboard lebih lambat,
kurang akurat, dan kurang disukai pengguna
dibandingkan piranti masukan lainnya

77. Piranti Input: Mouse

Sebuah mouse menggabungkan dua operasi
penting berbasis layar:




Kemampuan menggerakkan kursor, dan
Kemampuan memilih suatu obyek pada layar ke dalam
satu piranti
Gerakan mouse pada permukaan datar menentukan
gerakan kursor pada layar, mouse umumnya
mempunyai 1 sampai 3 tombol pada bagian atas
untuk pilihan obyek
Teknologi dasar mouse:


Mekanis
Optis

78. Piranti Input: Joystick


Sebuah joystick terdiri dari sebuah tuas yang ditanamkan
pada sebuah alas
Teknologi dasar joystick:

Pergeseran – gerakan kursor pada layar sepadan dengan gerakan tuas

Daya operasi – tuasnya kaku, namun ketegangan yang menimbulkan


joystick
tekanan terhadap tuas dikonversikan pada gerakan kursor yang tepat
pada layar
Saklar digital – gerakan yang tidak sepadan dari tuas dalam 8 arah
dideteksi oleh saklar digital di dalam joystick
Sifat joystick:


Kurang akurat dibandingkan mouse, namun hanya membutuhkan
sedikit ruangan
Teknologinya kurang dikembangkan dibandingkan piranti lainnya

79. Piranti Input: Accupoint



Dikenal sebagai G-stick, accupoint adalah miniatur
dari joystick yang diletakkan diantara kunci G dan
H pada keyboard. Biasanya dipakai bersama dengan
2 buah tombol dan fungsinya sama dengan mouse
Karena accupoint ditempelkan pada keyboard,
maka tidak memerlukan tambahan ruang untuk
operasinya
Accupoint dioperasikan cukup dengan 1 jari saja
dan tidak memerlukan ruang

80. Piranti Input: Trackball


Trackball dapat dilukiskan sebagai gabungan fungsi
dari joystick dan mouse. Terdiri atas dasar yang
tetap, yang menyangga sebuah bola. Arah rotasi
dan kecepatan rotasi menentukan arah dan
kecepatan dari gerakan kursor pada layar
Sifat trackball:



Mudah dipelajari
Membutuhkan sedikit ruangan (seperti joystick)
Dilaporkan oleh beberapa peneliti bahwa trackball adalah
salah satu piranti penuding yang terefisin (dalam hal
ketepatan dan kecepatan)

81. Piranti Input: Light Pens


Merupakan pena yang membangkitkan informasi
ketika ditudingkan pada layar. Ketika light pen
ditudingkan pada tampilan CRT, sebuah lensa
memfokuskan setiap cahaya yang dipancarkan dari
layar menuju sebuah detektor cahaya atau
photocell
Ketika pancaran elektron di dalam CRT
menyegarkan fosfor pada titik dimana light pen
sedang menuding, pertambahan kecerahan
menyebabkan suatu signal listrik dikirimkan ke
komputer

82. Piranti Input: Touch Screen



Dapat digolongkan dalam panel sensitif sentuhan
Cara kerjanya adalah dengan mengintrupsi matriks berkas
cahaya atau dengan mendeteksi adanya perubahan
kapasitansi atau bahkan pantulan ultrasonik
Sifat touch screen:






Mengijinkan koordinasi mata dan tangan secara alamiah
Membutuhkan sedikit atau tanpa tambahan ruang kerja
Dapat menyebabkan kelelahan lengan dengan beban pemakaian yang
ekstensif
Dalam mengaburkan layar
Cocok ditempatkan dalam lingkungan yang tidak ramah, mis: mesin
pabrik, kabin pesawat, dll
Jari tangan bukan alat penuding yang presisi, terutama untuk untuk
menuding bagian-bagian daerah yang kecil

83. Pemilihan Piranti
(cocok dengan pekerjaan)
Jenis Pekerjaan
Piranti Yang Cocok
Masukan numerik
Tombol numerik
Masukan teks
Alphanumerik keyboard (QWERTY)
Seleksi obyek
Mouse, joystick, trackball, light pen
Manipulasi obyek
Mouse, joystick, trackball, light pen
Tracking
Mouse, light pen

84. Pemilihan Piranti (cocok dengan user)


Aspek penting dari piranti masukan adalah
hubungan antara gerakan fisik dari piranti dan
kegiatan yang khas pada antarmuka
Langsung vs tidak langsung


Apakah gerakan fisik dari piranti secara langsung
berkaitan dengan aksi pada layar?
Absolut vs relatif

Apakah lokasi piranti secara langsung mengendalikan
lokasi dari aksi pada layar?

85. Panduan Memilih Piranti





Pertimbangkan karakteristik dari user sekarang dan
masa datang
Cocokkan karakteristik piranti masukan terhadap
persyaratan yang diminta
Pertimbangkan penelitian sebelumnya dan unjuk
kerja user
Ujilah piranti masukan didalam lingkungan kerja
Optimumkan sifat-sifat piranti yang mudah
dimodifikasi

86. Masukan Berbentuk Suara (Voice Input)

Terdapat 2 kategori utama dari piranti masukan
berbentuk suara:


Piranti-piranti pengenalan kata (word recognition) yang
mampu merespon ucapan-ucapan secara individu atau
perintah-perintah yang menggunakan teknik yang
dikenal sebagai speaker verification. Pertama kali sistem
akan membangkitkan suatu template untuk mengenali
suara user
Piranti pengenalan kalimat (speech recognition) yang
mampu mengenali hubungan antar kata terucap didalam
kalimat atau frase. Teknik-teknik statistik dipakai dalam
hal pola perekaman suara yang akan dicocokkan dengan
kata-kata terucap

87. Piranti Keluaran: Layar Tampilan (1)

Layar tampilan adalah sumber utama informasi dan harus
diakui memiliki keterbatasan dibandingkan kertas. Pada
dasarnya semua layar tampilan memiliki 3 komponen
utama, yaitu:




Pengingat digital (frame buffer)
Layar penampil
Pengendali tampilan (display controller)
Ada 2 macam cara penampilan gambar:


Vector display; pengingat digitalnya berisi daftar tampilan dan
program tampilan
Raster display; garis, karakter, dan bentuk-bentuk lain digambar
berdasarkan komponen terkecilnya yaitu titik yang sering disebut
pixel

88. Piranti Keluaran: Layar Tampilan (2)

Layar komputer, pada umumnya
karakteristik sbb:







memiliki
Tidak stabil
Timbul kedip pada saat gambar di refresh
Upayakan gambar yang secara relatif memiliki kontras
yang rendah – warna hijau dan hijau tua paling sulit
dioptimalkan
Dipengaruhi faktor-faktor lingkungan (seperti refleksi,
posisi user, cahaya ruangan, dll)
Rentan terhadap naik turunnya tegangan listrik
Dapat membuat mata cepat lelah
Untuk layar CRT dapat menimbulkan radiasi gelombang
elektromagnetik

89. Piranti Keluaran: Pedoman Warna





Jumlah warna yang ideal maksimum 5-10
Retina mata manusia tidak sensitif terhadap warna merah
dan hijau, oleh sebab itu informasi yang dimasukkan untuk
mencari perhatian tidak menggunakan warna tersebut
(walaupun ada stereotip bahwa merah berarti bahaya atau
salah). Warna kuning dan biru bagus untuk warna-warna
periperal
Biru sebaiknya tidak dipakai untuk teks yang menyatakan
pusat perhatian. Biru sangat cocok untuk warna latar
belakang
Pasangan warna yang saling berkomplemen adalah
merah/hijau dan kuning/biru
Hindari warna dengan tingkat luminansinya rendah untuk
orang tua

90. Aspek Ergonomi Dalam
IMK

91. Pengertian Ergonomi






Suatu bidang studi yang mencari atau
menangani
desain peralatan dan tugas-tugas
yang cocok dengan
kapabilitas manusia dan limitnya
Faktor kenyamanan kerja
Ergonomi harus bisa memahami seluruh keadaan manusia,
baik dari segi anatomi, fisiologi, psikologi, engineering,
manajemen, dan desain/perancangan untuk membuat
desain tugas yang berguna
Aturan atau kebijaksanaan dalam bekerja
Ramah penggunaan di segala tempat dan bidang
Bahwa seorang pekerja yang mengoperasikan banyak
peralatan, namun dapat dijangkau dengan mudah

92. Keuntungan Penerapan Ergonomi
Bagi Pekerja




Lebih baik dalam mengerjakan tugasnya
Lebih sehat
Meningkatkan kepuasan kerja
Lebih produktif

93. Aspek Ergonomi dari Stasiun Kerja


Stasiun kerja: sistem komputer termasuk mebeler
yang digunakan, mis: kursi, meja
Permasalahan yang muncul jika seorang operator
komputer terlalu lama bekerja di depan komputer:



Serangan miopi yang semakin besar
Keluhan mata, mis: iritasi, ketegangan
Ketegangan punggung, otot siku,
otot pundak
mata
dan

94. Prinsip-prinsip Ergonomi

Prinsip fisikal

Prinsip kognitif

95. Prinsip Fisikal





Jadikan segala sesuatu
mudah untuk
dijangkau
Bekerja dengan tinggi yang sesuai/cocok
Bekerja dengan postur yang sesuai
Mengurangi pengeluaran tenaga yang
berlebihan
Meminimalkan kepenatan/keletihan

96. Prinsip Fisikal (lanj.)





Mengurangi pengulangan yang berlebihan
Memberikan jarak ruang dan akses
Meminimalkan contact stress
Memberikan mobilisasi dan merubah postur/posisi
Menciptakan lingkungan yang
menyenangkan



Pencahayaan yang tepat
Temperatur yang tepat
Menahan getaran

97. Prinsip-prinsip Kognitive






Adanya standardisasi
Membuat stereotipe
Menghubungkan aksi dengan persepsi
Mempermudah pemaparan suatu informasi
Menyajikan informasi pada level yang tepat
secara detail
Memberikan image/gambaran yang jelas

98. Prinsip-prinsip Kognitive (lanj.)




Membuat redundansi, mis: warna yang berbeda,
cetak tebal, miring, dll
Membuat pola/patterns
Memberikan stimulan yang bervariasi sesuai
dengan keadaan
Memberikan umpan balik secara cepat/seketika

99. Pencahayaan

Tujuan perancangan pencahayaan:




Menghindarkan user dari cahaya terang langsung atau
pantulannya
Memperoleh keseimbangan antara kecerahan
(brightness) layar tampilan dan kecerahan yang ada di
depan user
Menghindari cahaya langsung atau pantulan yang
langsung mengenai layar tampilan
Memberikan keyakinan bahwa ada pencahayaan yang
cukup untuk pekerjaan yang tidak menggunakan layar
tampilan

100. Sumber Cahaya

Cahaya langsung, yang berasal dari:



Matahari yang menerobos masuk lewat jendela, atau
Sumber cahaya buatan, mis: bolam lampu
Cahaya tidak langsung, yang dipantulkan oleh:






Tembok atau partisi
Langit-langit rumah atau plafon
Lantai rumah
Bahan yang ada disekitar layar tampilan, mis: pemegang
dokumen
Bagian atas dari meja yang digunakan
Pakaian yang digunakan oleh operator

101. Suhu dan Kualitas Udara



Komputer yang dihidupkan dalam waktu yang lama
akan menghasilkan panas sehingga akan
mempengaruhi suhu ruangan dimana komputer
tersebut ditempatkan
Panas yang berlebih ini akan berpengaruh secara
negatif pada kinerja operator dan komputer
Untuk itu diperlukan peralatan lain untuk
menetralisir suhu yang tinggi tersebut, diantaranya
adalah penggunaan kipas angin, dan atau AC

102. Gangguan Suara




Dapat berasal dari: suara AC, komputer, manusia,
suara speaker, atau peralatan lainnya
Gangguan ini akan nampak jika suara yang terjadi
relatif besar bagi user
Akibatnya: user akan merasa terganggu, stress dan
konsentrasinya menurun
Cara mengatasi:


Menutup telinga dengan rapat („tuli‟)
Memasang peredam suara

103. Evaluasi IMK

104. Pendahuluan





Adanya perdebatan tentang penilaian sebuah
tampilan
Ada yang mengatakan “BAGUS”, “SEDANG”, atau
“JELEK”
Adanya asumsi bahwa selama suatu software dapat
digunakan, maka itu sudah cukup bagus
Kegiatan evaluasi suatu software atau tampilan
merupakan kegiatan yang dihindari karena akan
menambah waktu pengembangan dan biaya
Kegiatan evaluasi merupakan sesuatu yang sangat
penting karena desainer dapat mengetahui apakah
karyanya berguna dan diinginkan oleh user

105. Pendahuluan (lanj.)


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 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

106. Mengapa Evaluasi Dibutuhkan



Desainer tidak dapat berasumsi bahwa orang lain
seperti dirinya, dan mengikuti design guidelines
menjamin bahwa karyanya pasti bagus
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

107. Kapan Evaluasi Dilakukan

Evaluasi dapat dilakukan pada:

Selama 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
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
Evaluasi produk dapat dilakukan melalui riset pasar, baik
melalui perorangan atau sekelompok user

108. Paradigma Evaluasi




“Quick and dirty” evaluation
Usability testing
Field studies
Predictive evaluation

109. “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

110. Usability Testing




Evaluasi ini cukup dominan digunakan pada tahun 1980-an
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:




Melihat secara langsung
Merekamnya dalam video
Evaluasi ini menggunakan kuesioner dan wawancara kepada
user tentang kepuasannya menggunakan sistem tersebut
Penelitian biasanya dilakukan di dalam sebuah laboratorium,
dimana user diberi suatu treatment tertentu (mis: cahaya,
suara, warna, dll) atau bisa juga tanpa treatment

111. 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:





Teknik yang dapat digunakan:





Membantu mengidentifikasi kesempatan sebuah teknologi baru
Menentukan kebutuhan-kebutuhan untuk melakukan desain
Memfasilitasi pengenalan sebuah teknologi
Evaluasi teknologi
Interview
Observasi (pengamatan yang hanya dilakukan oleh desainer)
Partisipatori (user dilibatkan dalam pembuatan desain)
Ethnography (penilaian berdasarkan budaya)
Dari data yang didapatkan tersebut, maka desainer dapat melakukan
evaluasi, baik secara kuantitatif maupun kualitatif, terhadap produknya

112. 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:



User yang diinginkan tidak perlu untuk dihadirkan
Proses pembuatannya relatif cepat, murah, dan cukup
disukai oleh perusahaan
Tahun-tahun terakhir ini, evaluasi ini cukup
populer

113. Teknik-Teknik Evaluasi





Observing users
Asking users their opinions
Asking experts their opinions
Testing user‟s performance
Modeling users‟ task performance to predict the
efficacy of a user interface

114. Hubungan Antara Paradigma
dan Teknik Evaluasi
Teknik
“Quick and Dirty”
Observing users
Penting untuk melihat bagaimana user
berperilaku dalam lingkungan aslinya
Asking users
Diskusi dengan user dan user yang
potensial, dalam suatu group atau
group yang khusus
Asking experts
Untuk mendapatkan kritik tentang
kegunaan sebuah prototipe
User testing
===
Modeling users’ task performance
===

115. Hubungan Antara Paradigma
dan Teknik Evaluasi (lanj.)
Teknik
Usability Testing
Observing users
Melalui video dan catatan, dilakukan analisa untuk
mengidentifikasi kesalahan, investigasi cara kerja
software, atau menghitung kinerja waktu
Asking users
Dengan menggunakan kuesioner kepuasan, maka
dilakukan pengumpulan opini user. Interview kadang
digunakan untuk mendapatkan opini yang lebih detail
Asking experts
User testing
Modeling users’
task performance
===
Dilakukan di laboratorium
===

116. Hubungan Antara Paradigma
dan Teknik Evaluasi (lanj.)
Teknik
Field Studies
Observing users
Dilakukan di lokasi manapun juga. Dalam studi
etnografi, evaluator turut serta dalam lingkungan user
Asking users
Evaluator dapat melakukan interview atau
mendiskusikan apa yang dilihatnya kepada peserta.
Asking experts
===
User testing
===
Modeling users’
task performance
===

117. Hubungan Antara Paradigma
dan Teknik Evaluasi (lanj.)
Teknik
Predictive
Observing users
===
Asking users
===
Asking experts
User testing
Modeling users’
task performance
Seorang menggunakan patokannya dalam pembuatan
desain untuk memprediksi kemanjuran sebuah tatap
muka
===
Model yang digunakan untuk memprediksi kemanjuran
sebuah tatap muka atau membandingkan kinerja waktu
dengan versinya

118. Skala Likert






Merupakan suatu skala yang cukup banyak
digunakan untuk melakukan evaluasi
Ukuran skala mulai dari 4 hingga 7
Ukuran 4 (1 = sangat buruk, 2 = buruk, 3 = bagus, 4
= sangat bagus)
Ukuran 5 (1 = sangat buruk, 2 = buruk, 3 = netral, 4
= bagus, 5 = sangat bagus)
Ukuran 7 (1 = sangat buruk, 2 = buruk, 3 = agak
buruk, 4 = netral, 5 = agak bagus, 6 = bagus, 7 =
sangat bagus)
Penelitian umumnya menggunakan 5 skala

119. Contoh Evaluasi
Bayangkan web site Amikom, kemudian berikan penilaiannya:
Kriteria
Evaluator
1
2
3
4
5
Ratarata
Layout
5
4
4
3
4
4
Kecepatan akses
3
4
3
3
4
3.4
Prosedur akses, mis: KHS, KRS
4
4
5
3
4
4
Perpaduan warna
4
4
2
4
2
3.2
Informasi yang selalu up to date
5
4
3
4
4
4.2
Rata-rata
3.76
•Dari hasil tersebut, maka secara keseluruhan pendapat para evaluator adalah
netral karena nilainya 3.76
•Kriteria yang paling bagus adalah informasi yang selalu up to date, sedangkan
yang harus mendapat perhatian lebih baik adalah kriteria perpaduan warna

120. Tingkat Kedewasaan HCI

121. Pendahuluan



HCI adalah sebuah disiplin yang dicurahkan untuk
membantu manusia memenuhi kebutuhan dan tujuannya
dengan menggunakan aksesibilitas, berarti, dan kepuasan
terhadap teknologi komputer
Paradigma HCI ini sedikit berubah pada awal abad milenium
baru (tahun 2000) yaitu dibangun dengan sungguhsungguh untuk melayani pengembangan kebutuhan
manusia yang hidupnya lebih mobile dan gaya hidup saling
terkoneksi dengan peningkatan harapan untuk mendukung
gaya hidup mereka akibat dari munculnya teknologi
komputer
Dari kondisi inilah, maka HCI akan mencapai tingkat
kedewasaannya

122. Cara Mengukur Tingkat
Kedewasaan HCI
Terdapat beberapa cara pandang yang berbeda
untuk mengukur tingkat kedewasaan HCI:



Technology-based perspective: dapat dinilai pada
teknologi-teknologi interaksinya
Model-based perspective: dapat dinilai pada model-model
interaksinya melalui kekuatan prediktifnya
Process-based perspective: dapat dinilai pada kekuatannya
menghasilkan efisiensi dan efektivitas. Salah satu yang
cukup terkenal adalah CMM (capability maturity model)
yang dikembangkan oleh SEI (the software engineering
institute)

123. Present Levels of HCI Maturity

Level 1 HCI: basic usability



Meliputi sebuah campuran dukungan untuk memenuhi
kebutuhan seperti kemudahan penggunaan, kemudahan
belajar, proteksi pada kesalahan, menemukan kesalahan,
dan efisiensi kinerja user terhadap penggunaan teknologi
komputer
Contoh tahap ini: penggunaan graphical user interfaces
(GUI), interaction metaphors, direct manipulation,
point-and-click input devices, user interface
management systems, GOMS (goals, operators, methods,
and selection rules) model, dan standar desain
HCI ditujukan pada level tertinggi kebutuhan dan tujuan
penggunaannya

124. Present Levels of HCI Maturity (lanj.)

Level 2 HCI: collaborative, organizational, and
role-based interaction



Pada level ini, komputer tidak hanya digunakan untuk
kerja semata, namun digunakan untuk melakukan
koneksi antar user dan komputer. Sehingga pekerjaan
dapat dilakukan dimana saja dan kapan saja
Contoh level ini: internet, enterprise computing systems,
decision support systems, dan penelitian di bidang
computer-supported cooperative work (CSCW)
Skope HCI diperluas pada isu-isu struktur organisasi,
lingkungan kerja, definisi aturan dalam organisasi,
customization of processes, dan tim kerja

125. Future HCI: Level 3: Individualized and
Holictic Interaction



The future computer environment
Individualized and holistic interaction design
Moving toward holistic interaction

126. The Future Computer Environment





Lingkungan komputer masa depan akan menjadi ambisius, tidak
kelihatan, melekat, nyata, virtual, aktif, terintegrasi, interkoneksitas,
interoperable, dan mobile
Karakteristik lingkungan ini adalah: selalu hidup, selalu di tangan,
meresap, dan campuran
Pada lingkungan ini, tubuh manusia akan dicampur dengan peralatan
melalui pemakaian atau pemasangan secara permanen, dan manusia
akan berada pada populasi hybrid physical-virtual space
Teknologi komputer akan bergeser dari general-purposes machines ke
special-purpose tools untuk mendukung suatu tugas yang khusus dan
penyebaran informasi
Teknologi ini akan mendukung penggunaan smart cards, active
whiteboards, home financial center, active badges, wearable devices,
implanted health aids, sensory networks, integrated media, virtual
environments, intelligent agents, dan highly mobile computing devices

127. Individualized and Holistic Interaction Design




Manusia akan semakin individual karena teknologi akan terintegrasi
secara ketat dalam setiap interaksi dengan pengalaman yang ada disekitar
kita, atau singkatnya, teknologi akan memberikan semua kebutuhan
kita tanpa harus berinteraksi dengan individu lain
Interaksi holistik adalah sebuah konsep untuk sebuah pendekatan desain
interaksi yang akan membantu pengembangan produktivitas, kinerja,
keselamatan, kerjasama, kebiasaan efektif, dan pertumbuhan individual
dengan menghormati kebutuhan pribadi seseorang, tujuan dan gaya
hidupnya, atau singkatnya, holistik adalah mempertimbangkan semua
hal yang ada disekitar manusia yaitu fisik dan batiniah
Desain interaksi holistik juga dapat diarahkan pada isu-isu yang
berhubungan dengan emosi dan motivasi seorang individu
Bekerja pada lingkungan yang holistik akan meningkatkan overlapping
antar bidang kerja, mis: desainer HCI, arsitek, desainer interior, desainer
mode, spesialis organisasi dan proses bisnis, ahli terapi, dan sejenisnya
akan bersama-sama bekerja untuk menciptakan pendekatan baru yang
terintegrasi dan baru yang sifatnya holistik

128. Moving Toward Holistic Interaction

Untuk mencapai level interaksi yang holistik,
tidak dapat dilakukan secara mendadak namun
harus melalui beberapa perubahan yang
mendahuluinya, yaitu:



Perubahan di bidang teknik/engineering
Merangkai human interface
The information-interaction counselor

129. Perubahan di Bidang Teknik/ Engineering


Disini proses engineering memainkan peran
penting dalam desain dan pengembangan sistem
komputer-manusia
Engineering menjadi salah satu alat untuk
mencapai lingkungan komputer yang ambisius,
dimana desain HCI akan semakin luas untuk
menjawab isu-isu desain interaksi

130. Merangkai Human Interface



Dideskripsikan dengan bagaimana hubungan antara HCI dan
berbagai jenis engineering dengan level kebutuhan user
yang akan dituju
Suatu HCI dapat dikatakan mencapai tahap kedewasaan jika
terjadi pemisahan yang semakin besar antara desain interaksi
dan engineering, dan sebuah pertumbuhan desain HCI akan
dilakukan diluar engineering
Merangkai human interface adalah terdapatnya 2 unit
software yang dapat didesain dan implementasikan secara
sendiri-sendiri, maksudnya:




Setiap unit memiliki kode yang dapat dipisahkan dalam beberapa
tingkatan
Setiap unit tidak dapat dikembangkan secara bersama
Setiap unit tidak dapat didesain dan dikembangkan oleh individu atau
tim yang sama
Hal ini mencerminkan perbedaan manusia dari segi gaya
interaksi, kapabilitas, dan keterbatasannya

131. The Information-Interaction Counselor





Dalam sebuah lingkungan komputer yang ambisius,
terintegrasi, komunikasi, media, komersial, hiburan yang
terhubung dengan teknologi, membuat orang tidak mudah
untuk memilih gabungan teknologi mana yang
memberikan kepuasan yang maksimal sesuai dengan
kebutuhannya
Cara yang dapat membantu adalah penggunaan the
information-interaction counselors (IICs)
IICs merupakan sebuah software yang bersama-sama dengan
user akan memilih gabungan teknologi mana yang
sebaiknya dipakai
IICs ibarat seorang ahli yang sangat pakar di bidangnya
Contoh yang sekarang telah ada adalah CAD (computeraided design)

132. Past, Present, and Future
of User Interface Software
Tools

133. Pendahuluan



Semua software aplikasi yang sekarang ada merupakan hasil
penelitian yang dilakukan pada tahun 1970-1990-an
Hampir semua aplikasi yang ada di Windows, UNIX, atau
Macintosh umumnya menggunakan 1 set bahan yang
ditemukan sedikitnya 15 tahun yang lalu, mis: layar
monitor, keyboard, dan mouse, Window managers, GUI, dll
Penggunaan bahan ini supaya tercapai suatu kestabilan,
maksudnya:


Kestabilan bagi user: berguna untuk mengembangkan skill-nya di
bidang komputer
Kestabilan bagi pengembang peralatan atau software: berguna untuk
menyempurnakan konsep pengembangan peralatan dan software

134. Historical Perspective

Tema-tema dalam evaluasi peralatan





Bagian-bagian dari antar muka user yang dituju: bahwa peralatan
yang dianggap membantu yaitu pada saat mereka dibutuhkan
Threshold and ceiling. “Threshold” adalah tingkat kesulitan dalam
menggunakan suatu sistem. “Ceiling” adalah berapa banyak yang
dapat dilakukan oleh sistem tersebut. Tujuan pembuatan sistem
adalah pada saat yang bersamaan sistem tersebut memberikan
threshold yang rendah dan ceiling yang tinggi
Peralatan yang memberikan resistensi rendah
Kemampuan peralatan yang memberikan prediksi tentang
kemampuannya kepada programer
Peralatan yang dapat membantu dengan mudah pembuatan software
suatu tugas

135. Historical Perspective (lanj.)

Peralatan yang digunakan untuk pembuatan IMK







Windows managers and toolkits: memberikan sebuah model dasar
pemrograman yaitu imaging model dan input model
Event languages: penggunaannya dianggap sukses karena dapat secara
langsung memanipulasi graphical user interface. Contohnya mis: Apple‟s
HyperCard, Microsoft‟s Visual Basic, the Lingo scripting language dalam
Macromedia‟s Director
Interactive graphical tools: biasanya menggunakan mouse untuk membuat
interface. Mis: Visual Basic, Visual C++, NeXT Interface Builder, Trillium dari
Xerox PARC, dan MenuLay dari University of Toronto
Component systems: setiap komponen dikontrol menggunakan kotak segi
empat pada layar, dan komponen lainnya kemudian dimasukkan berikutnya,
mis: untuk membuat „garis‟ maka dapat menggunakan komponen „drawing‟
yang ada di windows
Scripting languages: mis: bahasa C dan C++
Hypertext: digunakan untuk pembuatan web site, mis: HTML, XML
Object-oriented programming: mis: Visual Basic, Visual FoxPro,dll

136. Future Prospects and Visions

Komputer akan menjadi komoditas


Ubiquitous computing



Yaitu penggunaan komputer akan melekat dalam bermacam jenis peralatan
yang berbeda dalam berbagai skala yang berbeda, mis: HP, PDA, Notebook,
sound systems, dll
Kapabilitas input dan output yang berbeda-beda


Disebabkan oleh kemampuan komputer yang sangat cepat mengikuti
hukum Moore
Mis: jumlah pixel yang semakin banyak, resolusi semakin tinggi, penggunaan
touch-sensitive screen yang semakin umum, perubahan dari penggunaan
mouse ke stylus
Hardware untuk mempercepat pembuatan peralatan, dan bukan hanya
dari software saja, mis: jaman sekarang ini untuk membuat sebuah
prototipe produk maka dapat dipercepat dengan menggunakan software
AutoCAD, namun untuk mendatang tidak hanya software saja namun
juga dapat menggunakan hardware
Peralatan untuk melakukan koordinasi berbagai macam peralatan
komunikasi

Fungsi komputer akan berubah menjadi alat komunikasi, mis: akses internet,
HP, PDA,dll

137. Future Prospects and Visions
(lanj.)

Antar muka pengguna berbasis pengenalan
(recognition-based user interfaces)

Perubahan penggunaan dari keyboard dan mouse
menuju gerakan isyarat, handwriting, dan speech input
and output

Penggunaan teknologi 3 dimensi


Teknologi 2 dimensi akan diganti dengan 3 dimensi
End-user programming, customization, and
scripting

Disebabkan oleh karena setiap orang memiliki keinginan
yang berbeda satu dengan lainnya, sehingga mereka ingin
memiliki software yang berbeda sesuai dengan seleranya
sendiri, dan pembuatan program yang semakin mudah
sehingga mereka dapat membuat sendiri

138. Creating Creativity: User
Interfaces for Supporting
Innovation

139. Pendahuluan

Penggunaan teknologi informasi selama ini:






Memelihara informasi
Menyebarkan informasi
Alat komunikasi dua arah antar manusia, dengan kecepatan
yang tinggi dan biaya yang minimal
Untuk mendukung kreativitas penambahan pengetahuan dan
seni
Dengan menggunakan TI, maka kegiatan yang
berhubungan dengan penambahan pengetahuan dan
pembuatan seni dapat dilakukan dengan lebih kreatif
dengan biaya yang minimal, mis: penggunaan viewer
untuk pengajaran, editing foto, dan produk-produk
digital lainnya
Dengan adanya alat-alat digital, maka kreativitas
dapat ditingkatkan

140. Perspektif dalam Kreativitas
Terdapat 3 perspektif dalam kreativitas:
1.
Inspirationalists
•
•
•
Kelompok ini menciptakan kreativitas dimulai dari adanya
„masalah‟ dan diakhiri dengan „evaluasi dan perbaikan‟
Kreativitas didapatkan melalui brainstorming, free association,
lateral thinking, dan perbedaan pendapat
Contoh software: IdeaFisher dan MindMapper
Structuralists
2.
•
•
Pemecahan masalah yang dipakai kelompok ini adalah: (1)
memahami masalah, (2) membuat suatu perencanaan, (3)
melaksanakan perencanaan, (4) melakukan feedback
Proses pembuatan sering ditunjukkan dengan animasi visual,
sehingga kelompok ini sering disebut visual thinkers
Situationalist
3.
•
•
Kelompok ini memandang kreativitas sebagai sesuatu yang
melekat dalam sebuah komunitas praktis dengan standar yang
berbeda-beda karena dipengaruhi oleh keluarga, pengajar, dan
teman
Kreativitas didapat melalui konsultasi dengan komunitasnya dan
kemudian menyebarkannya kepada orang lain yang
membutuhkannya

141. Genex (Generating Excellence)





Diperkenalkan oleh Csikszentmihalyi‟s tahun
1996
Cara lain untuk menciptakan kreativitas
Genex didasarkan pada pendekatan
situationalists untuk mengembangkan
internet dan software PC lainnya
Terdiri atas 4 tahapan, yaitu: collect, relate,
create, dan disseminate
Setiap tahapan ini tidak harus selalu diikuti,
namun melihat kebutuhan di lapangan,
misalkan langsung melakukan kreasi dan
penyebaran produk/informasi

142. Tahapan Genex
Collect
Searching and browsing digital
libraries, visualizing data and process
Relate
Consulting with peers and mentors
Create
Donate
Thinking by free associations, exploring
solutions, composing artifacts and
performance, reviewing and replaying
session histories
Disseminating results

143. Searching and Browsing Digital Libraries



Walaupun perpustakaan tradisional memiliki sumber
informasi yang kaya, namun perpustakaan digital
memberikan kemampuan lebih yaitu mendukung
searching, browsing, dan filtering sehingga diharapkan
kreativitas dapat dilakukan secara optimal
Melalui perpustakaan digital, maka pencarian
informasi dapat dilakukan dengan lebih luas, dan
tidak dibatasi oleh sebuah ruang dan banyaknya buku
atau literatur
Informasi yang didapatkan juga dapat disimpan (baik
melalui bookmark ataupun didisket atau sejenisnya)
sehingga memudahkan untuk pencarian kembali

144. Consulting with Peers and Mentors


Untuk mendapatkan ide yang kreatif, dapat
dilakukan dengan bertukar pikiran atau konsultasi
dengan teman atau pihak yang pakar di bidangnya,
melalui tatap muka langsung, email, listservs,
newsgroups, telepon, dan videoconferencing
Proses konsultasi ini dimulai dari:


Inovator mencari kelompok atau pihak yang dibutuhkan
untuk memberikan masukan
Langkah selanjutnya, inovator memberikan pertanyaan
dan bersama dengan pihak yang memberi jawaban
mencari metode yang terbaik

145. Visualizing Data and Processes



Setelah proses konsultasi selesai, maka segera dibuat
visualiasasi data yang dibutuhkan berikut prosesnya
sehingga produk yang akan dibuat dapat diproduksi
dengan baik
Visualisasi data ibarat mencari komponenkomponen apa saja yang dibutuhkan untuk
pembuatan produk tersebut
Sedangkan proses adalah bagaimana urutan
langkah-langkah yang harus ditempuh dalam
pembuatan produk, mulai dari langkah A sampai
dengan langkah Z

146. Thinking by Free Associations


Kreativitas membutuhkan sebuah pemikiran yang
berasal dari gabungan berbagai konsep yang
dilakukan secara bebas
Kreator diharapkan tidak takut dalam membuat
sesuatu yang lain, dimana hal tersebut merupakan
gabungan sesuatu yang baru atau belum pernah
dilakukan sebelumnya. Gabungan tersebut
mungkin dianggap melawan arus atau tidak
mengikuti kaidah baku yang ditetapkan

147. Exploring Solutions



Ibarat kita memiliki sebuah kertas dan pensil, dengan
menggunakan peralatan software yang ada (mis: bahasa
pemrograman dan piranti-piranti interaktif lainnya), maka
kita dapat melakukan eksplorasi berbagai solusi yang dapat
diambil dengan cepat
Misalkan dalam pembuatan iklan atau web site, maka kita
dapat membuat berbagai macam versi dengan cepat dan jika
ada perbaikan dapat dilakukan dengan segera sesuai dengan
keinginan user
Contoh software yang dapat digunakan untuk melakukan
eksplorasi solusi diantaranya: SimCity yang digunakan untuk
membuat perencanaan, dan berbagai macam software
simulasi lainnya

148. Composing Artifacts and Performance


Software yang ada sekarang ini juga memungkinkan
user untuk menciptakan sendiri produk yang
diinginkan, bahkan tanpa bantuan seorang
profesional di bidangnya, mis: pembuatan iklan
yang dapat dilakukan sendiri tanpa bantuan dari
profesional iklan
Contoh software yang dapat digunakan:


Word processor, untuk pembuatan iklan, laporan
penjualan, dll
Adobe PhotoDeluxe, untuk edit gambar atau foto,
bahkan dapat untuk meniru lukisan seperti aslinya saat di
print di sebuah kanvas

149. Reviewing and Replaying Session Histories


Yaitu kemampuan sebuah software dalam
melakukan kegiatan ulang atau memberikan suatu
produk yang telah dibuat sebelumnya
Mis: kemampuan software internet yang
memberikan informasi tentang alamat web site apa
saja yang telah kita buka sebelumnya, sehingga kita
dapat membuka kembali web site tersebut dengan
cepat

150. Disseminating Results


Penyebaran informasi dapat dilakukan melalui
media internet, digital library, e-mail,
newsgroup, jurnal online, galery digital, dll
Melalui media ini, diharapkan sebuah informasi
yang dihasilkan dapat diakses oleh sebanyak
mungkin user dan bukan hanya sebagian kecil
user saja

151. Technologies of Information:
HCI and the Digital Library

152. Pendahuluan




Digital library (DL) adalah koleksi informasi yang
diorganisasi dan saling terhubung/terkoneksi, dimana
informasi ini dapat disimpan, diakses, dimanipulasi dan
ditampilkan secara elektronis
Informasi yang disimpan dapat berupa teks, grafik, animasi,
video, atau kombinasinya, dimana dapat diakses secara lokal
(organisasi itu sendiri) atau melalui internet
Melalui DL, kita dapat mengakses buku, jurnal, gambar, dll
diberbagai negara selama 24 jam sehari dan 7 hari seminggu
secara elektronis untuk melakukan eksplorasi guna mencari
informasi, melakukan analisis, atau merangkum informasi
yang dibutuhkan
Disini, peran IMK sangat penting karena user menginginkan
adanya akses yang mudah, tampilan yang menarik dan
memberikan informasi sebanyak mungkin yang
dibutuhkannya dengan waktu yang relatif cepat dan biaya
yang murah

153. Dasar Pemikiran Diadakannya DL





Ide DL pertama kali dimunculkan oleh Vannevar Bush (1945), yang
menyatakan bahwa adanya peningkatan pekerjaan yang menuntut
spesialisasi dari pengetahuan pekerja dan kebutuhan yang sama untuk
mengakses informasi yang tumbuh dengan cepat dan semakin
kompleks. Ide DL saat itu belum secara eksplisit dinyatakan karena
adanya keterbatasan teknologi
Menampilkan dan mengakses informasi menjadi sesuatu yang
esensial jika pengetahuan dapat diorganisasi dan dipelihara
Baru pada tahun 1988 oleh Ted Nelson dan Doug Engelbart,
dimunculkan istilah “hypertext” sebagai embrio DL, dimana sebuah
dokumen dapat diakses oleh user dimanapun dan kapanpun melalui
teknologi internet pada komputer pribadinya
Melalui DL, pengetahuan pekerja dapat bertambah dengan cepat
karena secara online dapat mencari informasi yang dibutuhkannya
Peran IMK disini adalah memberikan akses secara langsung dan
mengembangkan peralatan yang dibutuhkan dan disesuaikan dengan
kemampuan user, baik secara fisik maupun kognitif

154. Outcome dan Proses DL

Secara umum, outcome (keluaran) dasar DL yang dikatakan
baik jika memenuhi unsur:






Proses utama yang diberikan oleh DL:



Speed; kecepatan dalam mengakses
Accuracy; keakuratan informasi yang diberikan
Comprehension; kemampuan untuk memberikan informasi secara
menyeluruh dan lengkap
Low fatigue; kemampuan untuk mengurangi keletihan
Preference; kemampuan untuk memberikan pilihan informasi yang
dibutuhkan
Navigation; kemampuan untuk mengarahkan informasi yang
dibutuhkan jika user kebingungan dalam mencari informasi yang
dibutuhkan
Manipulation; kemampuan untuk memberikan kombinasi informasi
atau modifikasi informasi yang dibutuhkan
Peran IMK sangat dibutuhkan untuk mendukung
tercapainya outcome dan proses tersebut

155. Masalah-masalah IMK dalam Desain DL

Apakah kita benar-benar mengetahui atau mengenal user
kita


Setiap produk yang akan dibuat harus disesuai dengan pangsa pasar
yang akan disasar
Variabel-variabel dalam riset dan pengukuran IMK, yang
terdiri atas:



Efektivitas
Efisiensi
Kepuasan
Pengukuran terhadap variabel di atas, tidak cukup hanya
menggunakan kuesioner berskala likert saja, namun harus
ditambah dengan interview terhadap sebagian user yang
dapat dijangkau

156. Memperluas Pengetahuan IMK melalui
DL


Disebabkan karena terjadi hubungan yang resiprokal (timbal
balik), yaitu IMK mempengaruhi desain DL, demikian juga
DL mempengaruhi perkembangan IMK
Cara memperluas pengetahuan IMK melalui DL:





Adanya gabungan dan penyesuaian peralatan multimedia (gambar,
suara, teks) dalam tampilan DL
Gaya hidup digital dan kebutuhan untuk mendapatkan informasi
seluas-luasnya
Melalui DL, kita dapat belajar dan mendapatkan instruksi mengenai
IMK
Kebutuhan DL untuk memberikan informasi yang lebih responsif
sesuai dengan imajinasi user
Akses DL dapat dilakukan dimana saja, mis: desktop, laptop, PDA,
dan HP. Peran IMK adalah bagaimana memberikan tampilan dan
akses yang bagus sesuai dengan layar monitor masing-masing
peralatan tersebut (kompatibel)

157. Selesai...
Terima Kasih...
157