UNIVERSITAS BHAYANGKARA

JAKARTA RAYA
PROGRAM STUDI TEKNIK INFORMASI
FAKULTAS TEKNIK
INTERAKSI MANUSIA & KOMPUTER
TIF-3532
Interaksi Manusia & Komputer
PRINSIP USABILITY
Definisi dan Fungsi IMK

• Definisi IMK adalah :

Sebuah bidang ilmu yang mempelajari bagaimana
mendesain, mengevaluasi, dan menerapkan
(implementasi) interaksi antara manusia dan komputer.
• Fungsi dari IMK adalah : Mengoptimasikan performansi
antara manusia dengan komputer sebagai suatu sistem
Konteks Aksi dan Fungsi

Segala mesin yang dioperasikan

aksi
oleh manusia untuk mencapai
tujuan tertentu dengan
melakukan suatu aksi. Tujuannya
memaksimalkan fungsi suatu Fungsi
mesin. Jadi, ada interaksi antara
manusia dan mesin.
Kemampuan Penggunaan (Usability)

• Istilah Usability dimaksudkan untuk membuat kriteria

kualitas suatu perangkat lunak seperti fungsionalitas,
kehandalan, efisensi, kemudahan pemeliharaan
• Hal yang menyangkut usability :
• Kemampuan Pembelajaran (Learnability)
• Tolak Ukur Keluaran (Throughput)
• Keluwesan (Flexibility)
• Perilaku (Attitude)
Kemampuan Penggunaan (Usability)

USER FRIENDLY
Mudah dioperasikan

70-an
SULIT
DIOPERASIKAN
HCI 80-an
Sebelum 60-an
Tujuan Usability

• Efektif untuk digunakan

• Efisien untuk digunakan
• Aman untuk digunakan
• Memiliki utilitas yang baik
• Mudah digunakan
• Mudah mengingat bagaimana menggunakan
Usability dan Tujuan Pengalaman Pengguna

• Memilih istilah untuk menyampaikan perasaan seseorang,

emosi, dll, dapat membantu desainer memahami sifat
pengalaman pengguna
• Bagaimana tujuan kegunaan berbeda dari tujuan pengalaman
pengguna ?
• Apakah ada trade-off antara dua jenis tujuan?
• Misalnya dapat produk menjadi menyenangkan dan aman?
• Seberapa mudah untuk mengukur kegunaan dibandingkan tujuan
pengalaman pengguna?
Proses Menghasilkan Sistem dengan Antarmuka
yang Baik

• Apakah 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.
Pemetaan antara Tujuan, Aksi dan Hasil

Antarmuka/
Tujuan Aksi Fungsi dari
Kontrol Suatu Sistem Hasil
Pemakai Pemakai

Umpan Balik
Prinsip perancangan

• Abstraksi digeneralisasikan untuk berpikir tentang aspek yang

berbeda dari desain
• Apa yang harus dan tidak boleh dilakukan dalam desain
interaksi
• Apa yang tersedia dan tidak tersedia pada interface
• Berasal dari campuran berbasis teori pengetahuan,
pengalaman dan akal sehat
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
Perancangan Yang Buruk

Kontrol elevator dan keterangan di baris bawah semua kelihatan

sama, sehingga mudah untuk salah dalam menekan keterangan di
tombol kontrol.

www.baddesigns.com

Orang tidak membuat kesalahan yang sama untuk keterangan dan

tombol di atas. Mengapa tidak ?
Vending machine begitu buruk

• Perlu untuk menekan tombol dulu

untuk mengaktifkan pembaca.
• Secara normal memasukkan bill
dulu sebelum membuat pilihan.
• Bertentangan dengan konvensi
yang telah dikenal sebelumnya.

www.baddesigns.com
Perancangan Yang Baik

• Marble answering machine (Bishop,

1995)

• Berdasarkan bagaimana benda

sehari-hari berperilaku

• Mudah, intuitif, dan menyenangkan

untuk digunakan

• Hanya membutuhkan satu tindakan

untuk mencapai fungsi utama
Perancangan yang baik dan perancangan yang
buruk

• Mengapa remote TV lebih baik rancangannya daripada remote

kontrol standar?
• Kacang dibentuk agar sesuai di tangan
• Tata letak logis dan kode warna, tombol khas
• Mudah untuk menemukan tombol

Lihat di :
http://gizmodo.com/5017972/story-of-a-peanut-the-tivo-
remotes-untold-past-present-and-future

16
Dilema

Mana cara terbaik berinteraksi dengan smart TV ?

• Peralatan remote standar?
• Apple slimline remote control?
• Minnum’s new keyboard?

http://minuum.com
Untuk apa ada rancangan

• Perlu memperhitungkan :
• Siapa pengguna
• Kegiatan apa yang sedang dilakukan
• Dimana interaksi berlangsung

• Perlu untuk meningkatkan interaksi pengguna dengan

produk :
• Sehingga dapat menyesuaikan aktivitas dan
keperluan pengguna
Memahami kebutuhan pengguna

Perlu mempertimbangkan apa yang orang yang baik dan buruk

dalam hal :
• Mempertimbangkan apa yang mungkin membantu orang
dalam cara mereka saat melakukan sesuatu
• Memikirkan apa yang mungkin memberikan pengalaman
pengguna yang berkualitas
• Mendengarkan apa yang orang inginkan dan melibatkan
mereka
• Menggunakan metode yang berpusat pada pengguna
Apa itu perancangan interaksi?

• “Designing interactive products to support the way people

communicate and interact in their everyday and working lives.”
• Merancang produk interaktif untuk mendukung cara manusia
berkomunikasi dan berinteraksi setiap harinya dan mendukung
pekerjaan manusia
• Preece, Sharp and Rogers (2015)

• “The design of spaces for human communication and interaction.”

• Merancang ruang bagi komunikasi manusia dan interaksi manusia.
• Winograd (1997)
Tujuan Perancangan Interaksi

• Mengembangkan produk yang berguna

• Usabilitas berarti mudah dipelajari, efektif digunakan dan
menyediakan pengalaman yang menarik.

• Melibatkan pengguna dalam proses perancangan.

Karakteristik utama dalam perancangan
interaksi

• Pengguna seharusnya terlibat dalam pengembangan

proyek
• Kegunaan dan pengalaman pengguna perlu
diidentifikasi, didokumentasikan dengan jelas dan
disepakati pada awal proyek
• Pengulangan diperlukan untuk aktivitas inti
Jenis perancangan?

• Jumlah istilah lain yang digunakan menekankan apa yang sedang

dirancang, diantaranya :
• user interface design, software design, user-centered design,
product design, web design, experience design (UX)

• Perancangan interaksi adalah istilah yang mencakup semua aspek

• mendasar untuk semua disiplin ilmu, bidang, dan pendekatan
yang berkaitan dengan meneliti dan merancang sistem berbasis
komputer.
IMK dan Perancangan Interaksi
Bidang Ilmu yang Terkait dengan IMK
• Ilmu Komputer
Pengetahuan tentang kemampuan dari suatu teknologi, dan bagaimana haltersebut
dapat diterapkan, mencakup : bahasa pemrograman tingkat tinggi, sistem
manajemen antarmuka dan desain serta alat-alat prototipe.
• Cognitive Psychology/Pemahaman Psikologi
Melihat otak sebagai peralatan pemroses informasi. Pengetahuan tentang persepsi,
perhatian, ingatan, proses pembelajaran, cara berpikir dan pemecahan masalah
perlu dipahami
• Ergonomik
Ergonomik adalah konsep suatu desain yang diperlukan untuk memaksimalkan
kapasitas dan kapabilitas pemakai dengan tujuan untuk keamanan,
efisiensi,keandalan dan performasi pemakaian.
• Sosiologi
Adalah bidang ilmu untuk mempelajari tingkah laku manusia di dalam kontak sosial
• Desain Grafik
Kaitan Bidang Ilmu dengan HCI

Ilmu
Ergonomik
Komputer

HCI Sosiologi

Cognitive Desain
Psychology Grafis
Bekerja dalam tim dengan multi disiplin ilmu

• Banyak orang dari berbagai latar belakang ilmu terlibat

• Perspektif yang berbeda dan cara pandang yang juga berbeda
• Keuntungan
• Lebih banyak ide dan perancangan dapat dilakukan
• Kerugian
• Sulit untuk berkomunikasi dan sulit mencapai kemajuan
terhadap desain yang diciptakan
Apa yang dilibatkan dalam proses perancangan
interaksi ?

• Menghasilkan requirements
• Mengembangkan alternatif
• Prototyping
• Evaluasi
Konteks IMK

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

• User : U1-Organisasi/Lingkungan kerja, U2-Pengguna yang

menggunakan aplikasi komputer, U3-Proses adaptasi manusia dan
komputer
• Human : H1-Pemrosesan informasi pada manusia, H2-Penggunaan
bahasa, cara berkomunikasi dan interaksi terhadap mesin, H3-
Faktor Ergonomik
• Computer : C1-piranti masukan dan keluaran, C2-berbagai teknik
dialog, C3-pemilihan dialog yang tepat, C4-Komputer Grafik, C5-
merancang dialog secara keseluruhan (arsitektur dialog)
• Development : D1-pendekatan desain, D2-teknik dan alat untuk
implementasi, D3- teknik evaluasi, D4-contoh sistem dan studi kasus
Proses Desain

1. Meningkatnya kompleksitas
 Sejumlah control mempunyai penambahan aksi yang menarik
 Umpan balik lebih rumit dan sulit dipisahkan
 Errors terus meningkat serius/mahal
2. Tekanan Pemasaran
 Waktu adalah uang
 Menambahkan kemampuan (kompleksitas) sekarang mudah dan
murah
 Menambahkan kontrol / umpan balik adalah mahal
 Desain biasanya memerlukan beberapa iterasi (perulangan)
sebelum sukses
Proses Desain

3. Banyak orang sering mempertimbangkan biaya dan tampilan

desain pada faktormanusia
 Style (Corak)
 Desain yang jelek kemungkinan tidak akan tampak
4. Kreatifitas penuh dengan tantangan
 Tidak hanya membuat satu salinan
 Inginkan kreatifitas, tapi ingin yang praktis
Ide Dalam Membuat Desain

• Ide berasal dari • Mengutip dari bidang lain

 Imajinasi  Animasi

 Analogi  Teater

 Observasi dari praktek  Information displays

saat ini  Arsitektur
 Observasi dari sistem saat  ...
ini
Prinsip Desain

1. Gunakan dialog yang sederhana dan natural.

 Cocokkan tugas pengguna pada satu cara yang natural
 Hindari jargon, techno-speak
 Tampilkan info yg user perlukan secara tepat
Contoh :
Prinsip Desain (cont…)

2. Berusaha untuk konsisten

 Urutan, aksi, perintah, layout, daftar kata-kata
penting
 Buat lebih banyak prediksi

OK Cancel Help

Done Cancel Apply

Prinsip Desain

3. Sediakan umpan balik yang informatif

 Secara terus-menerus memberitahukan pengguna tentang
yang terjadi
 Paling penting yang sering dikunjungi, aksi yang nyata
4. Minimalkan beban ingatan user
 Pengenalan lebih baik dibandingkan mengingat
 Deskripsikan format input yg diperlukan, meliputi contoh dan
default
Prinsip Desain

5. Mengijinkan perubahan aksi yang mudah

 Undo!
 Kurangi kebimbangan, anjurkan percobaan
6. Sediakan tanda Exit dengan jelas
 Jangan membuat User merasa terperangkap
Contoh :
• Tombol Cancel pada dialog
• Interrupt/resume pada operasi yg panjang (modeless)
• Quit – bisa keluar setiap waktu
• Reset/defaults – restore pada suatu sheet
Prinsip Desain

7. Sediakan shortcuts
Memungkinkan user untuk menjalankan operasi yg sering
dipakai dengan cepat
 Keyboard & Mouse
 Navigasi diantara windows/forms
8. Mendukung fokus internal dari kontrol
Prinsip Desain

9. Menangani kesalahan dengan lancar dan secara positif

dgn memberi petunjuk tentang kesalahan yg dilakukan
user dan langkah perbaikannya

10. Sediakan help dan dokumentasi

Desain Grafik

• Look (Visualisasi)
o Simbolisasi/Icon
o Enable/Disable
o Active/Inactive
o dll
• Feel
o Drag
o Click/dblclick
o Drag and Drop
Prinsip Desain Grafik

• Metaphor
• Kejelasan
• Konsistensi
• Alignment
• Pendekatan (Proximity)
• Kontras
Metaphor

• Presentasi dan unsur visual untuk beberapa item yang

relevan.
Contoh : Desktop metaphor
Contoh :
Kejelasan
• Tiap-tiap elemen pada suatu interface harus mempunyai
satu tujuan.
• White Space
 Menyediakan keseimbangan dan simetri dalam
penggunaannya
 Memperkuat dampak pesan yg disampaikan
 Mengijinkan mata untuk istirahat dari unsur aktivitas
 Digunakan untuk meningkatkan kesederhanaan,
kerapian, kelas.
Contoh :
 TUGAS

1. Rancanglah Desain Input dan Output dari sebuah kasus di

lingkungan kampus atau dalam kehidupan sehari-hari
dengan memperhatikan prinsip-prinsip dalam IMK, tema :
bebas.
2. Dalam Diskusi, jelaskan desain hasil perancangan
proses tersebut dari mulai cara kerja input-proses-
output dan memberikan pengaruh dari aktivitas tersebut
Catatan :
a. Batas waktu :