by nasetiyanto 1

Presentasi
Pesan Kesalahan / Error
Message
 Desain dialog tergantung dari presentasi dan
tidak terikat pada detail presentasi dialog.

 Pembentukan pesan kesalahan atau

peringatan, sangat penting dalam user
interface, terutama untuk user pemula.

by nasetiyanto 2
 Presentasi
Pesan Kesalahan / Error
Message
 Hal-hal yang perlu dihindari pada pembentukan
pesan kesalahan :
1. “Tekanan” (suara atau pesan) keras yang
menyalahkan user
2. Pesan terlalu generik
(contoh : WHAT?, SYNTAX ERROR)
3. Pesan yang sulit dimengerti
(contoh : FAC RJCT 004004400400)

by nasetiyanto 3
Contoh
 SYNTAX ERROR (buruk)
 UNMATCHED LEFT PARENTHESIS (lebih baik)
 (Tidak sesuai dengan aturan penulisan)
 ILLEGAL ENTRY (buruk)
 TYPE FIRST LETTER : Send, Read, or Drop (lebih baik)
 (Ketikan huruf pertama : Send, Read or Drop)
 INVALID DATA (buruk)
 DAYS RANGE FROM 1 TO 31 (lebih baik)
 (Beri range data misal hari dari 1 – 31)
 BAD FILE NAME (buruk)
 FILES NAMES MUST BEGIN WITH A LETTER (lebih
baik)
 (Nama file harus mulai dari huruf)
by nasetiyanto 4
 Contoh
 Buruk :
 DISASTROUS STRING OVERFLOW, JOB ABONDONED
 Baik :
 String space consummed. Revise program to use shorter
strings or expand string space
 Buruk :
 UNDEFINED LABELS
 Baik :
 Define statement labels before use
 Buruk :
 ILLEGAL STA. WRN.
 Baik :
 RETURN statement cannot be used in a FUNCTION
subprogram
by nasetiyanto 5
 Tipe-tipe Kesalahan
(Errors)
1. Mistakes, aksi user yang diambil berdasar
keputusan yang salah.
Contoh : menggeser icon harddisk ke recycle
bin.
2. Slips, suatu kesalahan yang tidak disengaja.
3. Capturer error, kesalahan karena terlalu sering
atau kebiasaan.
Contoh : pada ‘vi editor’ dalam UNIX, mau save
(W) tetapi (WQ) save dan quit.

by nasetiyanto 6
 Tipe-tipe Kesalahan
(Errors)
4. Description error, kesalahan dalam melakukan
aksi pada objek yang salah.
Contoh : klik ‘X’ untuk menutup editor, tetapi
yang di klik adalah ‘X’ aplikasi.
5. Data-driven error, kesalahan karena pengaruh
data dari area edit.
Contoh : menulis nama file dengan sesuatu
yang terbaca di sekitar window, bukan nama
yang diinginkan.

by nasetiyanto 7
 Tipe-tipe Kesalahan
(Errors)
6. Assosiative-activation error, kesalahan karena
pengaruh data yang ada di dalam pikiran user
saat itu.
Contoh : mirip dengan data-driven error, tetapi
ini dengan sesuatu yang ada di pikiran user saat
itu.
7. Loss-of-activation error, kesalahan karena lupa
apa yang harus dilakukan.
Contoh : lupa mau searching apa.

by nasetiyanto 8
 Tipe-tipe Kesalahan
(Errors)
8. Mode error, kesalahan akibat lupa ada di ‘dunia’
mana.
Contoh : mengetikkan suatu perintah padahal
sedang berada di dalam ruang pengeditan teks
9. Keliru, aksi salah diambil berdasarkan
keputusan yang salah.
Contoh : ingin mengubah ukuran gambar tetapi
yang di lakukan adalah cropping.

by nasetiyanto 9
 Format fisik yang sesuai
 Gunakan kombinasi huruf besar dan kecil. Pesan
dengan huruf besar semua hanya digunakan untuk
peringatan gawat.

 Hindari pesan hanya dengan nomor kode. Jika

perlu tampilkan kode di akhir pesan

 Penempatan pesan : dekat sumber masalah,

dibaris pada bagian bawah layar, sebagai pop-up
window di tengah layar.

 Peringatan dengan suara berguna tetapi dapat

memalukan pemakai, pemakai harus dapat
mengendalikannya. by nasetiyanto 10
Rancangan pesan yang efektif

 Produk
 Sespesifik dan sepresisi mungkin
 Konstruktif : tunjukkan apa yang harus dilakukan
 Gunakan nada positif, jangan memarahi
 Gunakan kata yang berpusat ke pemakai
 Gunakan tatabahasa, istilah dan singkatan yang
konsisten
 Pertimbangkan pesan yang bertingkat
 Gunakan format visual dan penempatan yang
konsisten

by nasetiyanto 11
Rancangan Nonantropomorfik
 Antropomorfik adalah :
 sifat suatu barang yang memiliki sifat atau pribadi
manusia

 Masalah yang muncul dengan instruksi antropomorfik, dan

sekaligus alasan untuk menggunakan instruksi
nonantropomorfik :
 Atribut ‘bebas’ dapat menipu, membingungkan, dan
menyesatkan pemakai
 Penting untuk membedakan manusia dengan komputer
 Meskipun antarmuka antropomorfik bisa menarik
beberapa orang, namun dapat mengganggu orang lain
 Penelitian menunjukkan bahwa instruksi
nonantropomorfik lebih baik
by nasetiyanto 12
 Rancangan Nonantropomorfik
Alternatif bagi perancang software adalah memfokuskan
pada :
pemakai dan menggunakan kata ganti orang ketiga
tunggal
tidak menggunakan kata ganti sama sekali
contoh :
 Buruk :
I will begin the lesson when you press RETURN

 Lebih baik :
You can begin the lesson by pressing RETURN

 Baik :
To begin the lesson, press RETURN
by nasetiyanto 13
Pedoman Perancangan
Nonantropomorfik
 Hindari menampilkan komputer sebagai orang pribadi
(manusia)
 Gunakan tokoh yang sesuai (manusia atau karakter animasi)
dalam pengenalan atau sebagai pemandu
 Hati – hati dalam merancang wajah manusia atau tokoh
kartun dengan komputer
 Gunakan karakter kartun di games atau software anak-anak
jika diperlukan
 Rancang antarmuka yang dapat dimengerti, dapat
diramalkan, dan dapat dikendalikan
 Gunakan sudut pandang pemakai dalam orientasi dan
keadaan selesai
 Jangan gunakan ”I” ketika komputer menanggapi aksi
pemakai
 Gunakan ”You” hanya untuk memandu pemakai dan
menyebutkan fakta-fakta
by nasetiyanto 14
Rancangan tampilan (display)
 Pada setiap tahap dalam sekuen transaksi, pastikan
bahwa data apapun yang dibutuhkan pemakai
tersedia pada tampilan
 Tayangkan data kepada pemakai dalam bentuk yang
langsung dapat digunakan, jangan mengharuskan
pemakai mengkonversikan data yang ditampilkan
 Untuk setiap jenis tampilan data, pertahankan format
yang konsisten dari satu tampilan ke tampilan
lainnya.
 Gunakan kalimat yang pendek dan sederhana
 Gunakan pernyataan yang positif, bukan negatif
 Gunakan prinsip logis dalam pengurutan list, jika tidak
ada aturan khusus, urutkan secara alfabetis
by nasetiyanto 15
 Rancangan tampilan
 (display)
Pastikan label cukup dekat dengan data field yang
berhubungan tetapi harus dipisahkan dengan paling
sedikit satu spasi
 Buat kolom data alfabetis rata kiri agar mudah
ditelusuri
 Pada tampilan banyak halaman,berikan label pada
setiap halaman untuk menunjukkan hubungan
dengan halaman lainnya.
 Awali setiap tampilan dengan judul atau header yang
menggambarkan secara singkat isi atau tujuan
tampilan, sisakan paling sedikit satu baris kosong
antara judul dan isi tampilan.
 Untuk kode ukuran, simbol yang lebih besar tingginya
paling sedikit 1,5 kali tinggi simbol berikut yang lebih
kecil
by nasetiyanto 16
 Rancangan tampilan
(display)
Gunakan kode warna untuk aplikasi sehingga
pemakai dapat membedakan dengan cepat berbagai
kategori data, khususnya ketika item data terpencar
pada tampilan
 Jika menggunakan blink, kecepatan kedip harus
antara 2 – 5 herts dengan minimum duty cycle 50
persen
 Untuk tabel dasar yang melebihi kapasitas display
pastikan pemakai dapat melihat kepala kolom dan
label baris di semua bagian
 Jika kebutuhan tampilan data berubah, sediakan cara
bagi pemakai (administrator sistem) untuk
melakukan perubahan yang diinginkan.
by nasetiyanto 17
Warna
 Warna dapat menarik bagi pemakai dan dapat
meningkatkan kinerja tetapi dapat disalahgunakan

 Warna dapat :
 Menyejukkan atau menyakiti mata
 Menambah aksen pada tampilan yang tidak
menarik
 Memungkinkan pembedaan yang halus pada
tampilan yang kompleks
 Menekankan organisasi logis informasi
 Menarik perhatian kepada peringatan
 Menimbulkan reaksi emosional yang kuat berupa
sukacita, kegembiraan, ketakutan atau kemarahan
by nasetiyanto 18
Pedoman penggunaan warna
 Gunakan warna secara konservatif
 Batasi jumlah warna
 Kenali kekuatan warna sebagai teknik
pengkodean
 Pastikan bahwa warna simbol mendukung tugas
 Tampilkan warna simbol dengan usaha pemakai
yang minimal
 Tempatkan warna simbol dibawah kendali
pemakai
 Rancang untuk monokrom dulu
 Gunakan warna untuk membantu pemformat
by nasetiyanto 19
Pedoman penggunaan warna

 Gunakan warna simbol yang konsisten

 Perhatikan ekspektasi umum tentang warna
simbol
 Perhatikan masalah perpaduan warna
 Gunakan perubahan warna untuk menunjukkan
perubahan status
 Gunakan warna pada tampilan grafis untuk
kerapatan informasi yang lebih tinggi
 Waspada atas kehilangan resolusi pada tampilan
warna
by nasetiyanto 20
 Model kognitif
 pemodelan kognitif memperkirakan pikir dan reaksi.
 adalah sebuah model yang di rancang dari cara kerja
user,untuk mengetahui bagaimana user akan
berinteraksi dengan interface.
 adalah model yang berhubungan dengan sistem
interaktif dimana akan memodelkan aspek pengguna,
seperti pemahaman, tujuan dan pemrosesan.
 mempunyai beragam dalam level representasi :
rencana dan pemecahan masalah tingkat tinggi,
sampai ke aksi motorik tingkat rendah (mis: keypress)

22
 Pemodelan Kognitif

o MHP (Model Human Processor)

o GOMS (Goals, Operators, Methods and Selections)

o CCT (Cognitive Complexity Theory)

o KLM (Keystroke Level Model)

23
 Model Human Processor (MHP)
Dari Card,Moran, dan Newell (1980an)
 adalah model yang menganggap manusia sebagai
sistem pemrosesan informasi

Komponen MHP:
 kumpulan memori dan pemrosesan bersama
 kumpulan Prinsip Operasi
 model diskrit dan berurutan
 setiap tahapan mempunyai karakteristik waktu
(tambahkan waktu tiap tahapan untuk memperoleh
total waktu kerja)
24
 Model kognitif - subsystem

 Persepsi

 Kognitif

 Motorik

25
 Model kognitif – sistem
persepsi
o Terdiri atas banyak sensor dan memori
pendukung.

o Memori terpenting adalah pada penyimpanan

visual dan audio image

o Menunda output sistem sensor ketika sedang

dikodekan (simbolik)
26
 Model kognitif- sistem
kognitif

 Menerima kode-kode simbolik (informasi) dari

penyimpanan sensor image pada memori kerja-
nya.

 Menggunakannya dengan informasi (yang telah

tersimpan sebelumnya) pada long term memory
untuk memutuskan aksi/respon.

27
 Model kognitif- sistem
motorik

 Masing-masing memiliki prosessor dan memori

 Isi memori kerja menyulut aksi yang tersimpan

dalam long-term memory

 Menjalankan response yang sesuai

28
 GOMS (Goals, Operators,
Methods, Selection)
 Goal / Tujuan : status terakhir yang ingin dicapai,
kemudian uraikan dalam sub tujuan.

 Operator : aksi pada tingkat paling rendah, terdiri

atas tindakan dasar yang harus dilakukan user dalam
menggunakan sistem (untuk menjalankan suatu
kegiatan)
 misal: press key, drag mouse, memindahkan
pointer
29
 GOMS (Goals, Operators,
Methods, Selection)
 Methods: urutan operator (prosedur) untuk menuntaskan suatu
tujuan (satu atau lebih)
contoh: Memilih kalimat gerakkan mouse ke awal kata, press
mouse, tarik ke akhir kata, lepaskan mouse

 Contoh:
 GOAL : CLOSE-WINDOW
 [select GOAL : USE-MENU-METHOD
 MOVE-MOUSE-TO-FILE-MENU
 PULL-DOWN-FILE-MENU
 CLICK-OVER-CLOSE-OPTION
GOAL : USE-CTRL-W-METHOD
 PRESS-CONTROL-W-KEYS] 30
 GOMS (Goals, Operators,
Methods, Selection)
 Selection Rules: merupakan pilihan terhadap metode
yang ada. Secara umum bergantung kepada user
dengan melihat kebutuhan, kondisi sistem dan detail
tujuan.
 Contoh: dapat menghapus sebuah kata baik dengan
cara ctrl-X ataupun melalui menu tertentu.

 Rule 1: GunakanUSE-MENU-METHOD kecuali ada

aturan lain
 Rule 2: Jika aplikasi adalah Game, gunakan CTRL-W-
METHOD
31
 Example:
*GOAL: create a Word document Goal
* * GOAL: create new document Sub-goal
*** choose new doc icon Operator
Operator
*** set font
Operator
*** set font size Operator
*** type document text
** GOAL: save document Sub-goal
*** SELECT save icon Operator
Operator
File then save from menu
*** complete save dialogue box Operator
** GOAL: print document Sub-goal
*** SELECT print icon Operator
File then print from menu Operator

32
33
 ANALISIS GOMS
 Terdiri dari satu tujuan tingkat tinggi yang di
dekomposisi menjadi deretan unit tugas (task).
 Kemudian di dekomposisi lagi sampai pada level
operator dasar.

 Dekomposisi tujuan dan unit memerlukan

pemahaman terhadap strategi pemecahan
masalah oleh user dan domain aplikasi secara
detail.
34
 Manfaat-manfaat goms
 Analisis struktur tujuan GOMS digunakan untuk
mengukur kinerja.
 Kedalaman tumpukan struktur tujuan digunakan
untuk meng-estimasi kebutuhan memori jangka
pendek.
 Pemilihan dapat diuji keakuratannya dengan
jejak user dan perubahan respons.
 Mendeskripsikan bagaimana seorang user yang
ahli melakukan pekerjaannya.
35
 Cognitive complexity theory
(CCT)

 Diperkenalkan oleh Kieras dan Polson.

 Merupakan perluasan dari GOMS.

 Mengandung banyak prediksi / kemungkinan.

36
 Dua deskripsi paralel pada
CCT
1. User goal : berhubungan dengan aturan produksi.
aturannya berbentuk “IF kondisi THEN aksi” dan
dipisahkan antara aturan untuk pemula dan yang
sudah ahli.

2. System atau device : berhubungan dengan

jaringan transisi tergeneralisasi yang sangat
detail. Terdapat deskripsi yang luas dan jaringan
transisinya mencakup semua model dialog.
37
 CCT
State (kondisi)
 adalah pernyataan tentang isi memori kerja.

 Jika kondisi bernilai benar, maka aturan produksi

dijalankan.

 Aksi dapat terdiri dari satu atau lebih aksi

elementer yang mungkin mengubah memori
kerja atau berupa aksi eksternal seperti
keystroke.
38
 Masalah pada CCT
 Semakin detail deskripsinya, ukuran deskripsi dari
satu bagian interface dapat menjadi sangat besar.
 Pemilihan notasi yang digunakan. Kapan akan
menggunakan notasi tertentu yang menjadi suatu
hal yang penting.
 Merupakan engineering tool (alat rekayasa)
dengan pengukuran kemudahan untuk dipelajari
(learnability) dan tingkat kesulitan (difficulty)
secara garis besar, digabung dengan deskripsi
detail perilaku user.
39
KLM (Keystroke Level
Model)
 KLM ditujukan untuk suatu unit tugas dalam
interaksi, misalnya, eksekusi dari beberapa perintah
sederhana yang tidak lebih dari 20 detik.
Contohnya adalah perintah search and replace,
atau mengubah jenis huruf (font) dari suatu kata.

 KLM mengasumsikan bahwa suatu tugas yang

kompleks harus sudah di pecah-pecah menjadi
tugas yang lebih sederhana (seperti dalam GOMS)
sebelum user berupaya untuk mengekspresikannya
dalam suatu model.

40
Model KLM

 K keystroke, berupa penekanan tombol keyboard,

termasuk tombol shift dan tombol-tombol lainnya.
 B berupa penekanan tombol mouse (mouse
button)
 P pointing, menggerakkan mouse (atau device
lain) ke suatu target lokasi
 H homing, perpindahan tangan dari mouse dan
keyboard
 D drawing, menggambar garis dengan
menggunakan mouse
 M mental, persiapan pemikiran untuk
menyelesaikan suatu aksi fisik
 R system response, yang bisa diabaikan jika user
tidak perlu menunggu penyelesaian dari suatu tugas,
seperti dalam mengcopy satu karakter.
41
Waktu Eksekusi

42
 Edit Karakter
 Move hand to mouse H[mouse]
 position mouse after bad character PB[LEFT]
 return to keyboard
H[keyboard]
 delete character MK[DELETE]
 type correction K[char]
 reposition insertion point H [mouse]

MPB[LEFT]

43
 Total Waktu

TEXECUTE = TK + TB + TP + TH + TD + TM + TR
= 2tK + 2tB + tP + 3tH + 0 + 2tM + 0

44
 Example

GOAL: ICONISE-WINDOW
[select
GOAL: USE-CLOSE-METHOD
. MOVE-MOUSE-TO-WINDOW-HEADER
. POP-UP-MENU
. CLICK-OVER-CLOSE-OPTION
GOAL: USE-L7-METHOD
assume hand starts on mouse
PRESS-L7-KEY]
USE-L7-METHOD USE-CLOSE-METHOD
H[to kbd] 0.40 P[to menu] 1.1
M 1.35 B[LEFT down] 0.1
K[L7 key] 0.28 M 1.35
P[to option] 1.1
B[LEFT up] 0.1

Total 2.03 secs Total 3.75 secs

45