Transcript Document

C
o
v
e
r
Apa aksi
manusia ?
Apa reaksi
komputer ?
Introduction
 Apa itu Interaksi Manusia dan
Komputer ?
 Bidang ilmu yang berkaitan erat :
 Teknik Elektronika-Teknik Komputer
 Psikologi
 Human-Computer Interaction (HCI)
 Grafis-Tipologi (Seni Cetak/Tata huruf)
 Bidang yang mengkaji bagaimana interaksi
 Ergonomik
manusia dan komputer berlangsung
 Antropologi (Tentang manusia)
sehingga memudahkan manusia
 Linguistik
mengoperasikan komputer dan
 Sosiologi
mempertimbangkan umpan balik yang
 Kesimpulan berdasarkan penelitian :
diberikan komputer selama manusia
40 sampai 50 % bagian Source code
menggunakannya
program/ aplikasi adalah untuk
 Secara hardware : I/O Device, secara
interface (Myers : 1989)
Software : Pengontrolan I/O Device dan
 Motivasi Pengembangan interface :
Desain-Evaluasi-Implementasi Interface
 Life-Critical Systems
(umumnya GUI)
 Industrial and Commercial uses
 Pada awalnya pengkajian ini lebih dominan
dilakukan di dunia akademis (universitas)
ketimbang di dunia praktis/Industri
 Formalisasi perancangan GUI
 Istilah yang berkaitan : User-friendly,
Usability
 Office, House, and entertainment
application
 Exploratory, Creative, Cooperative
Systems
 Dibutuhkan Development Tools
(ex : CAD, RAD, …)
Struktur Aplikasi
Tiga elemen pembangun aplikasi :
 Presentation – User Interface
 Application Logic - Application
 Data Service – File / DataBase Server
Bagaimana setiap elemen
berhubungan pada suatu aplikasi
menentukan jenis aplikasi tersebut
apakah :
one-tier
two-tier atau
multi-tier/n-tier.
- Using MTS and SQL Server in an n-tier application -
One-tier
Two-tier
Multi-tier/n-tier
Contoh Implementasi pada Setiap Tier :
Human Factor
 Aplikasi yang
mempertimbangkan faktor
manusia akan menghasilkan
sistem interaksi yang menarik
 Lima faktor manusia yang
dapat diukur :
Time to learn
Speed of performance
Rate of errors by users
Retention over time
Subjective satisfaction
 Seperti pentingnya pe-modelan sistem komputer, maka
perlu juga dibuat model
sistem manusia. Beragam-nya
karakter manusia membuat
hal ini lebih sulit
 Diharapkan dapat meng-akomodasi
ke-aneka-ragam-an aspek persepsi,
kognitif dan motorik (universal
approach)
 Karakteristik interaksi manusia :
 Penglihatan
 Luminans, kontras, brightness,
sharpness
 Sudut dan medan penglihatan
 Warna : psikologi, persepsi, kognisi
guidelines
 Pendengaran
 Sentuhan
 Model sistem manusia
 Pengolahan sadar dan otomatis
 Register memori
 Kanal kapasitas rendah
 Memori jangka pendek dan panjang
 Sikap dan kecemasan
 Pengendalian motorik
Memori
MANUSIA
Intelektual
Kontrol Motorik
Model Manusia
Interface
Kontrol Motorik
Responder
Sensor
Umpan Balik
Piranti Keluaran
Pengontrol Keluaran
KOMPUTER
Intelektual
Piranti Masukan
Pengontrol Masukan
Prosesor
Memori
Contoh Pe-model-an Sistem Pengolahan
Pada Manusia
Pengolahan Sadar
Perseptual
Perseptual
g
i
s
Petunjuk penggunaan warna dari aspek Psikologis :
 Hindarkan penggunaan tampilan secara simultan yang menampilkan sejumlah warna tajam. Merah, jingga,
kuning dan hijau dapat dilihat bersama-sama tanpa perlu pem-fokusan kembali. Tetapi cyan, biru dan
merah tidak dapat dilhat secara serempak dengan mudah. Pem-fokusan kembali mata yang berulang-ulang
akan menyebabkan kelelahan penglihatan.
 Hindarkan warna biru murni untuk teks, garis tipis dan bentuk yang kecil. Sistem penglihatan mata kita
tidak diset untuk rangsangan yang rinci, tajam, serta bergelombang pendek.
 Hindarkan warna berdekatan yang hanya berbeda dalam warna biru. Sudut-sudut yang berbeda hanya
pada prosentase warna biru akan terlihat sama.
 Pengamat yang lebih tua memerlukan aras ketajaman yang lebih tinggi untuk membedakan warna
 Warna akan berubah kenampakannya ketika level cahaya sekeliling berubah. Tampilan akan berubah
warna di bawah cahaya sekeliling yang berbeda. Kenampakan juga berbeda ketika level cahaya bertambah
atau berkurang. Di satu sisi perubahan terjadi karena adanya penambahan atau penurunan kontras, dan di
sisi lain perubahan terjadi karena adanya pergeseran sensitifitas mata
 Besarnya perubahan warna yang dapat dideteksi bervariasi untuk warna yang berbeda. Perubahan kecil
dalam warna merah dan ungu sukar dideteksi dibandingkan dengan warna lain seperti kuning dan biruhijau. Selain itu sistem penglihatan kita tidak siap untuk merasakan perubahan warna hijau
 Hindarkan warna merah dan hijau yang ditempatkan secara berseberangan pada tampilan berskala besar.
Warna yang lebih cocok adalah biru dan kuning.
 Warna yang berlawanan dapat digunakan bersama-sama. Merah dengan hijau atau kuning dengan biru
merupakan kombinasi yang baik untuk tampilan sederhana. Kombinasi merah dengan kuning atau hijau
dengan biru akan menghasilkan citra yang lebih jelek
 Untuk pengamat yang mengalami kekurangan dalam melihat warna, hindarkan perubahan warna tunggal
Warna persepsi
Petunjuk dari aspek perseptual
 Tidak semua warna mempunyai dicernible yang sama. Secara perseptual kita memerlukan
perubahan yang besar dalam panjang gelombang agar kita dapat merasakan perubahan
warna pada suatu bagian spektrum, dan perubahan yang lebih kecil pada bagian spektrum
yang lain
 Luminans tidak sama dengan kecerahan. Dua luminans yang sama tetapi berbeda dalam hal
warna hue dapat menyebabkan perbedaan kecerahan. Deviasinya akan semakin jelas pada
warna-warna yang ada di ujung spektrum (merah, magenta, biru)
 Hue yang berbeda menyebabkan level saturasi yang berbeda
 Ketajaman (lightness) dan kecerahan (brigtness) dapat dibedakan pada bentuk tercetak,
tetapi tidak pada tampilan warna. Sifat alamiah layar tampilan tidak memungkinkan
ketajaman dan kecerahan bervariasi secara saling bebas
 Tidak semua warna mudah dibaca. Secara umum pemakaian warna-warna latar belakang
yang cendrung lebih gelap seperti merah, biru, magenta, coklat dan lain-lain akan
memberikan kenampakan yang lebih baik dibandingkan warna yang lebih cerah
 Hue berubah sesuai dengan perubahan intensitas warna dan latar belakang
 Hindarkan adanya diskriminasi warna pada daerah yang kecil. Infomasi tentang hue pada
daerah yang kecil akan hilang. Secara umum dua garis berdampingan yang mempunyai lebar
1 pixel akan nampak sebagai sebuah garis dengan lebar 2 pixel. Selain itu perlu juga diingat
bahwa sistem penglihatan manusia menghasilkan citra yang lebih tajam pada warna
akromatis. Sehingga untuk memberikan kerincian yang bagus gunakan warna hitam, putih
dan abu-abu, dan gunakan warna kromatis untuk panel yang lebih besar atau untuk menarik
perhatian pengguna
i
t
i
f
Petunjuk dari aspek kognitif
 Jangan menggunakan warna secara berlebihan. Mungkin aturan yang terbaik
adalah menggunakan warna secara berpasangan. Penggunaan warna terutama
ditujukan untuk menarik perhatian atau untuk pengelompokan informasi.
Keuntungan ini akan hilang jika warna yang digunakan terlampau banyak.
 Kelompokkan elemen-elemen yang saling berkaitan dengan latar belakang
yang sama
 Warna yang sama membawa pesan yang serupa
 Kecerahan dan saturasi akan menarik perhatian
 Urutkan warna sesuai dengan posisi spektralnya
 Warna hangat dan dingin sering digunakan untuk menunjukkan level tindakan.
Kebanyakan kita berpengalaman bahwa warna yang hangat akan lebih
mendekatkan ke arah kita, sementara untuk warna yang dingin cendrung
menjauhi kita
.
Kombinasi warna
Kombinasi warna terbaik
Latar Belakang Garis Tipis dan Teks
Garis Tebal dan Teks
Putih
Biru, Hitam, Merah
Hitam, Biru, Merah
Hitam
Putih, Kuning
Kuning, Putih, Hijau
Merah
Kuning, Putih, Hitam
Hitam, Kuning, Putih, Cyan
Hijau
Hitam, Biru, Merah
Hitam, Merah Biru
Biru
Putih, Kuning, Cyan
Kuning, Magenta, Hitam
Cyan
Biru, Hitam, Merah
Merah, Biru, Hitam, Magenta
Magenta
Hitam, Putih, Biru
Biru, Hitam Kuning
Kuning
Merah, Biru, Hitam
Merah, Biru, Hitam
Kombinasi warna terjelek
Latar Belakang
Garis Tipis dan Teks
Garis Tebal dan Teks
Putih
Kuning, Cyan
Kuning, Cyan
Hitam
Biru, Merah, Magenta
Biru, Magenta
Merah
Magenta, Biru, Hijau, CyanMagenta, Biru, Hijau, Cyan
Hijau
Cyan, Magenta, Kuning
Cyan, Magenta, Kuning
Biru
Hijau, Merah, Hitam
Hijau, Merah, Hitam
Cyan
Hitam, Kuning, Putih
Kuning, Hijau, Putih
Magenta
Hijau, Merah, Cyan
Cyan, Hijau, Merah
Kuning
Putih, Cyan
Putih, Cyan, Hijau
s
Petunjuk Secara Umum
1.
Merancang dengan satu warna terlebih dahulu.
2.
Batasi jumlah warna yang digunakan. Jangan
menggunakan lebih dari 4 - 7 warna untuk
keseluruhan layar.
Dalam satu layar, hindari pasangan-pasangan warna
sebagai berikut :
merah dan biru
merah dan hijau
biru dan hijau
kuning pada putih
kuning dan ungu
hijau pada putih
kuning pada hijau
biru pada hitam
magenta pada hijau
merah pada hitam
magenta pada hitam
kuning pada putih
3.
4.
5.
6.
Sebagai warna background dan foreground, gunakan
pasangan warna seperti di bawah ini :
Background
Foreground
Putih
Biru gelap - Hitam - Merah gelap
Hitam
Putih - Kuning - Hijau
Biru
Putih - Kuning
Gunakan warna biru penuh hanya untuk background,
bukan untuk data-data atau informasi penting.
Perhatikan pengaruh dari defisiensi penggunaan satu
warna yang sama pada beberapa layar, karena sangat
penting sebagai informasi.
Untuk membuat garis tipis yang mudah dilihat, gunakan
warna-warna sebagai berikut :
Jumlah
warna
1
Background putih
Background hitam
Merah, Hijau
Kuning, Cyan, Hijau
2
Merah - Hijau,
Magenta - Cyan,
Merah – Biru
Hijau - Magenta,
Kuning - Magenta,
Cyan - Magenta
3
Merah - Biru - Hijau
Cyan - Magenta - Kuning
Petunjuk Secara Khusus
1 Buatlah warna-warna untuk membedakan
sesuatu maksud tertentu, jangan
menggunakan satu warna untuk maksud yang
berbeda.
2 Jangan menggunakan warna yang beraneka
macam jika informasi yang ditampilkan hanya
akan diakses oleh monitor monochrome.
3 Pada Sistem Informasi Manajemen warna lebih
sering digunakan untuk mengindikasikan suatu
asosiasi dan grup daripada untuk melindungi
data dan status. Sewaktu digunakan untuk
melindungi data, gunakan warna dengan
masing-masing pengertian :
…sambunga
n
Warna
Merah
terang
Merah
Kuning
Hijau
Putih atau
Hitam
Biru
Pengertian
Menunjukkan data yang hilang atau
pemberitahuan tentang sesuatu yang
akan segera terjadi tanpa campur
tangan pemakai (misalnya sistem
jaringan yang akan segera off-line).
Menunjukkan data yang akan hilang
atau pemberitahuan suatu hal dengan
terlebih dahulu meminta aksi dari
pemakai (misalnya menghapus file).
Menunjukkan suatu peringatan, aksi
tidak dapat dikembalikan atau
informasi yang mungkin hilang atau
berubah (misalnya menyimpan atau
menghapus file).
Menunjukkan status siap atau setelah
suatu pekerjaan selesai (misalnya
proses selesai, sukses, dan kontrol
dikembalikan kepada pemakai).
Tanpa status tertentu, menampilkan
suatu informasi (misalnya untuk field
data dan header).
Pesan-pesan nasehat, saran.
4.
Gunakan warna yang berbeda untuk
membedakan sekumpulan informasi
yang kompleks, banyak, dan penting.
Tetapi pertahankan jangan sampai
terjadi konflik dengan penggunaan
warna pada no. 3 di atas.
5.
Gunakan aturan penggunaan warna
dalam keseluruhan sistem untuk
menjaga konsistensi.
Sisi Hardware
 Interaction devices = I/O
devices
 Kemajuan kecepatan
processor dan kemampuan
penyimpanan data juga
diimbangi dengan kemajuan
pada peralatan
Input/Output
 Ex. : Keyboard menjadi
More precision device,
Teletype (10 Char/sec)
menjadi high-speed mega
pixel graphical display
 I/O masa depan :
- Gestural input (isarat)
- Three dimensional pointing
- Voice input-output
- Whole-body involvement I/O
devices
 Beberapa I/O devices
-Keyboard :
QWERTY
DVROK
Alphabetic
Klockkenberg
-Pointing and Picking Devices :
Mouse
Joystick
Tracball
Digittizing Tablet
Light Pen
Touch Sensititive Panel
-Speech Recognition
-Display
Jenis Tata Letak Keyboard
1
2
3
Q
4
W
A
5
E
S
R
D
Z
6
X
7
T
F
Y
G
C
8
V
9
U
H
B
I
O
J
K
N
7
0
A
2
B
K
3
C
L
U
4
D
M
V
5
E
N
W
6
F
O
X
7
G
P
Y
H
Q
I
R
E
O
Q
9
1
P
A
L
M
8
3
P
Tata letak tombol Alphanumerik pada keyboard
jenis QWERT
1
5
U
J
9
Y
I
K
0
F
D
X
2
G
H
B
4
C
T
M
6
R
N
W
L
S
V
0
T
Z
Tata letak tombol Alphanumerik pada keyboard jenis
ALPHABETIK
Z
Tata letak tombol Alphanumerik pada keyboard
jenis DVORAK
J
S
8
- Tata letak keyboard Klockenberg -
Pointing and Picking Devices
Mouse Pertama Sekali
Joystick
Light Pen
Penemu mouse, Doug Engelbat (1968)
Tracball
Touch Sensititive Panel
Human and Computer
Capability
 What do humans do well ?
•
•
•
•
•
•
Sense low level stimuli
Pattern recognition
Inductive reasoning
Multiple strategies
Adapting
“Hard and fuzzy things”,
 What do computers do
well?
• Counting and measuring
• Accurate storage and recall
• Rapid and consistent responses
• Data processing/calculation
• Repetitive actions
• “Simple and sharply defined things”
(George Miller)
 Kecakapan manusia : Estimasi, Intuisi,
kreativitas, adaptasi, kesadaran serempak,
pengolahan abnormal, memory asosiatif,
pengambilan keputusan non deterministik,
pengenalan pola, pengetahuan dunia,
kesalahan manusiawi
 Kecakapan komputer : Kalkulasi akurat,
deduksi logika, aktivitas perulangan,
konsistensi, multitasking,Pengolahan rutin,
penyimpanan dan pengambilan kembali,
pengambilan keputusan deterministik,
pengolahan data, pengetahuan dominan,
bebas dari kesalahan
(P. Insap S)
 Let humans do what humans do
well and let computers do what
computers do well
Ergonomic
( Faktor kenyamanan kerja )
 Aspek-aspek penting :
 Stasion kerja
• Aspek penggunaan
stasion kerja : Lingkungan
kerja, Durasi kerja, Tipe
kerjaan, Beban psikologi
• Aspek kesehatan : Beban
visual, beban otot, beban
postur tubuh, beban
tekanan mental
• Tipe kerjaan :
- Pekerjaan pemasukan
data
- Pekerjaan akuisisi data
- Pekerjaan interaktif
- Pekerjaan pengolahan
data
 Pencahayaan
 Masalah utama : kilau di depan layar
 Mengontrol sumber cahaya yang ada
 Keseimbangan cahaya layar dan
sekitar
 Suhu dan Kualitas Udara
 Suhu perangkat komputer
 Fasilitas pengontrol suhu
 Gangguan Suara
 Kesehatan dan Keamanan Kerja
Kondisi kesehatan ber-resiko : radang
persendian, diabetes, darah tinggi,
stress, merokok, kehamilan,…
 Kebiasaan Bekerja
 Antropometrik dan Masalah
Kuantisasi Standar
Petunjuk Praktis
Cara Sehat Menggunakan Komputer
Bagi mereka yang sering menggunakan komputer
selama beberapa jam, tentu pernah mengalami
beberapa gejala seperti mata merah, kering
ataupun berair, pandangan kabur, sakit kepala,
susah konsentrasi, otot leher tegang, dan pegal di
seluruh badan. Nah, untuk menghindari hal
tersebut, simak tips berikut ini:
1.Jarak minimum yang baik antara mata dengan
layar komputer adalah sekitar 18 sampai 24
inci.
2.Atur sudut penempatan yang tepat antara
layar monitor dan keyboard agar Anda merasa
nyaman dan relaks ketika harus menggunakan
komputer dalam waktu lama.
3.Kedudukan layar monitor sebaiknya tidak lebih
tinggi dari mata.
4.Saat menggunakan komputer sebaiknya
jangan menggunakan lampu yang sinarnya
mengarah ke satu sudut saja, seperti lampu
baca atau lampu tidur. Gunakan jenis lampu
pijar dengan arah sinar yang berasal dari
langit-langit ruangan, sehingga mata Anda
memperoleh cahaya yang cukup tanpa
terhalang atau terbatas oleh bayang-bayang.
5.Gunakan sejenis layar penyaring (screen glare
filter) untuk mengurangi efek radiasi yang
mungkin ditimbulkan oleh monitor komputer
Anda.
6.Agar mata tak cepat lelah, usahakan untuk
tidak terlalu memfokuskan mata pada layar
monitor. Cobalah sekali-kali membebaskan
mata Anda dengan antara lain menutup mata
selama beberapa menit, melihat benda-benda
yang jaraknya agak jauh, ataupun melihat
benda yang berwarna netral dan lembut di
sekeliling Anda.
7.Jika Anda telah berada di depan komputer
selama kurang lebih satu jam secara terus
menerus, istirahatlah minimal 15 menit hingga
20 menit.
8.Selain itu, usahakan agar kedua kaki Anda
menginjak lantai. Lepaskan alas kaki, dan
basahi tangan Anda dengan cara menaruhnya
di bawah kucuran air sekitar lima menit. Cara
ini dimaksudkan untuk menetralkan tubuh Anda
dengan 'membumikan' ion-ion radiasi yang
mungkin ada.
e
h
a
t
Dialoque Style
 Yaitu :
(Ragam Dialog)
 Ragam dialog :
o
o
o
o
o
o
o
o
o
o
Dialog berbasis perintah tunggal
Dialog berbasis bahasa pemrograman
Interface berbasis bahasa alami
Sistem menu
 Menu Datar : Selektor pilihan,
penggunaan tanda terang
 Menu tarik : status, shortcut
Dialog berbasis pengisian form
Interface berbasis icon
Sistem penjendelaan
 Jendela TTY
 Time Mulitplexed Windows
 Space Muliplexed Windows
Manipulasi langsung
Interface interaksi berbasis grafis
Interface interaksi berbasis suara
 Kualitas ragam dialog
dapat dilihat berdasarkan
kriteria berikut :
• Inisiatif
• Keluwesan
• Kompleksitas
• Kekuatan
• Beban Informasi
• Konsistensi
Question
•
•
•
•
•
Umpan Balik
Observabilitas
Kontrolabilitas
Efisiensi
Keseimbangan
Aspek Pemrograman
 Type Interface dan
Pemrogramannya :
 Interface berbasis text
 Interface berbasis grafis :
Grafis DOS
Grafis Windows
Interface berbasis text
- Contoh :
Masukkan angka pertama:5
Masukkan angka kedua :3
Hasil penjumlahannya : 8
Ingin hitung lagi ? [Y,T]:T
Implementasi dalam Pascal : ?
- Tools pada pemrograman xbase (dbase
cs), TurboVision,…
Interface berbasis grafis – DOS :
- Membutuhkan library/driver tertentu untuk
menjalankan fungsi perubahan mode layar,
contoh Borland International Corp
menyediakan library BGI (Borland Grafis
Interface)
- Membutuhkan prosedur khusus untuk
penggunaan dan manipulasi operasi
perangkat input grafis (yaitu mouse)
Interface berbasis grafis – WINDOWS :
Pemrograman grafis – windows dapat dilakukan
dengan 2 cara :
1. Pemrograman windows non visual
2. Pemrograman windows dengan visual - Tools
Pembangun Interface pada Visual-Tools
 Pemrograman visual (tool)
menyediakan berbagai elemen
sebagai dasar pembangun interface
grafis. Elemen tersebut disediakan
built-in dan non programming code.
Secara teknis tool semacam ini
dimungkinkan dengan pengimplementas-ian OOP.
 Ada beberapa cara mengelompok-kan
elemen-elemen visual tersebut
(selanjutnya disebut komponen),
misalnya salah satu dengan
pengelompokan seperti berikut :
-Komponen Input
-Komponen output
-Komponen tombol
-Komponen Peng-group
-Komponen penghubung data
-Komponen menu
-Komponen image
-……
 Komponen input : Edit (TextBox),






CheckBox, RadioButton(OptionButton),
ComboBox, ScrollBar, …
Komponen output : Label, Memo,…
Komponen tombol : Button
(Command),…
Komponen Peng-group :
GroupBox(Frame) ,
Panel,TabControl(SSTab,TabStrip),Frame …
Komponen penghubung data : Table
(Data,Adox),…
Komponen menu : MainMenu,
PopupMenu,
Komponen image : Image, …
 Form adalah komponen utama tempat
semua komponen lain diletakkan
 Sebagai konsekuensi implementasi OOP
maka setiap komponen memiliki :
Property, Event dan Method

Pengaruh interface terhadap cara
user menggunakan produk
Petunjuk Perancangan Interface (GUI)
 Secara non formal kriteria
interface yang baik adalah :
mudah digunakan dan menarik
 Perancang interface yang
profesional biasanya akan
mendokumentasikan semua
pekerjaan yang ia lakukan.
Dengan dokumentasi yang
baik ia dapat mengubah
rancangannya apabila terjadi
perubahan atau apabila
menurutnya terdapat
rancangan yang tidak mudah
untuk diwujudkan
 Dokumentasi rancangan dapat
dilakukan dengan cara :
 Membuat sketsa pada kertas 
 Menggunakan piranti prototype GUI
 Menuliskan tekstual, menjelaskan
kaitan antara satu jendela dengan
jendela yang lain 
 Menggunakan pirantin bantu CASE
(Computer-Aided Software
Engineering)
 Special purpose software
mengguna-kan metoda user- center
design approach, General purpose
software biasanya menyediakan
fasilitas customization.
 Piranti bantu perancangan :
 Screen design work sheet
 Screen semantic net
Contoh piranti perancangan :
Contoh : Screen design work sheet
T
2
No :
Tampilan
Navigasi
T
1
T
3
T
4
Keterangan
Penjelasan :
- No, Nomor lembar kerja, biasanya sebuah aplikasi memiliki
beberapa tampilan
- Tampilan, berisi sketsa tampilan yang akan muncul di layar
- Navigator, tempat menjelaskan setaip kejadian (event) pada
tampilan, misalnya kapan tampilan muncul dan kapan tampilan
bealih ke tampilan lain.
- Keterangan, berisi penjelasan singkat tentang atribut tampilan
yang akan dipakai. Contohnya teks judul menggunakan font
Tomes New Roman, 20 point, warna cyan, warna latar belakang
birutua, teks pada button menggunakan font Arial, 16 point,
dan seterusnya
T
5
T
6
T
7
Contoh : Screen semantic net
Contoh Flow diagram :
Contoh Tool untuk Perancangan GUI Aplikasi :
GUI Design Studio
http://www.carettasoftware.com/
…Lanjutan Petunjuk GUI
 Shackel juga menekankan pentingnya
 Shackel(1990) mengajukan formalisasi
pendekatan User-centered
kriteria perancangan interface dengan
dibandingkan System-centered
istilah : Usability menggantikan istilah
user-friendly yang menurutnya sukar
untuk diukur
Define users and
Usebility
Requirements
 Ada 4 aspek pada usability :
 Effectiveness, seberapa efektif
unjuk kerja pekerjaan terbantukan
dengan interface tersebut
 Learnability, berapa lama pelatihan
dibutuhkan untuk dapat
menggunakan interface tersebut
secara efektive
 Flexibility, jika ada perubahan
pekerjaan seberapa efektive interface
masih bisa digunakan
 Attitude, apakah user yang
menggunakan interface tersebut
menjadi cepat lelah atau frustasi atau
justru menjadi tambah semangat
Model User
Task
Model User
Objects
Design GUI
Prototype GUI
Evaluate GUI
GUI Design
Define Style
Guide
utan Petunjuk GUI
Smith dan Mosier (1986)
menyarankan 5 high-level objectives
untuk perancangan tampilan :
1. Consistency of data display
2. Efficient information assimilation by the user
3. Minimal memory load on user
4. Compatibility of data display
5. Flexibility of user control of data display
The Electric Power Research Institute
(Lockheed, 1981) menambahkan
komentar seperti berikut :
• Be consistent in labelling and graphic
convention
• Standardize abbreviation
• Use consistent format in all displays
• Present a page number on each display page
Present data only if they assist the
operator
• Present Information Graphically
• Present digital value only when necessary
• Use high-level resolution monitors
• Design a display in monochrommatic form
• Involve operators in the depelopment of new
display
 Important Issue :
Should user interface be copy right
 Masalah Response Time dan Display
rate
Petunjuk :
 Users prefer shorter response time
 Longer response times (greater than 15
seconds) are disruptive
 Users change usage profile with response time
 Shorter response time lead to short user thenk
times
 Response time should be appropriate to the
task
Dialog Style Analys:
Dialog Style
vs
User Characteristics
Klasifikasi Dialog Style :
• Menu :
• Fill-Form :
• Q/A (Question/Answer) :
• Command
• DM (Direct Manipulation) :
• Natural Language :
Karakteristik User
Psychological Characteristics:
Cognitive Style:
- Verbal/analytic
- Spatial/Intuitive
Attitude:
- Positive
- Neutral
- Negative
Motivation:
- High
- Moderate
- Low
lanjutan
… Karakteristik User
Knowledge and Experience:
Typing Style:
- Low
- Medium
- High
Education:
Computer Literacy:
System Experience:
- Expert
- Moderate
- Novice
Task Experience:
- Novice
- Moderate
- Expert
Application Experience:
- no similar system
- one or more
Native Language:
Use of other systems:
- Little or none
- Frequent
lanjutan
… Karakteristik User
Job and Task Characteristics:
Frequency of use:
- Low
- Medium
- High
Primary training:
- None
- Some
- Formal
Turnover rate:
- High
- Moderate
- Low
System Use:
- Mandatory
- Discretionary
Identifikasi Ragam dialog yang bersesuaian
dengan karakteristik user :
Psychology
Knowledge & Experience
User Profile
Dialog Style
Menu
Fill-Form
Q/A
Command
DM
Natural L.
Attitude
Negative
Neutral
Negative
Positive
Negative
Negative
Motivation
Low
Moderate
Low
High
Low
Low
Typing Skill
Low
High
High
High
Low
High
System Exp
Low
Moderate
Moderate
High
Moderate
Low
Task Exp
Low
High
Low
High
Low
High
App. Exp
Low
Moderate
Moderate
High
Moderate
Low
Use of Other
Syst
Frequent
Frequent
Frequent
Infrequent
Frequent
Frequent
Comp. Lit
Low
High
Low
High
Low
Low
Job & Task Characteristics
User Profile
Dialog Style
Menu
Fill-Form
Q/A
Command
DM
Natural L.
Freq. of Use
Low
High
Low
High
Low
Low
Primary
Training
None
Some
None
Formal
Some
None
System Use
Discretionary
Discretionary
Discretionary
Mandatory
Discretionary
Discretionary
Turnover
rate
Hgh
Moderate
High
Low
High
High
Example of User Characteristics
Kasus1
- Attitude
- Motivation
- Typing skill
- System Experience
- Task Experience
- App. Experience
- Use of other systems
- Computer literacy
- Freq. of use
- Primary training
- System use
- Turnover use
Negative
Low
High
Low
High
Low
Infrequent
Low
Low
None
Discretionary
High
Kasus2
Negative
Low
High
High
Low
High
Frequent
High
High
Formal
Mandatory
Low
Identifying appropriate dialog style
Psychology
Knowledge & Experience
User Profile
Dialog Style
Menu
Fill-Form
Q/A
Command
DM
Natural L.
Attitude
Negative
Neutral
Negative
Positive
Negative
Negative
Motivation
Low
Moderate
Low
High
Low
Low
Typing Skill
Low
High
High
High
Low
High
System Exp
Low
Moderate
Moderate
High
Moderate
Low
Task Exp
Low
High
Low
High
Low
High
App. Exp
Low
Moderate
Moderate
High
Moderate
Low
Use of Other
Syst
Frequent
Frequent
Frequent
Infrequent
Frequent
Frequent
Comp. Lit
Low
High
Low
High
Low
Low
Job & Task Characteristics
User Profile
Dialog Style
Menu
Fill-Form
Q/A
Command
DM
Natural L.
Freq. of Use
Low
High
Low
High
Low
Low
Primary
Training
None
Some
None
Formal
Some
None
System Use
Discretiona
ry
Discretiona
ry
Discretiona
ry
Mandatory
Discretiona
ry
Discretiona
ry
Turnover
rate
High
Moderate
High
Low
High
High
Psychology
Knowledge & Experience
User Profile
Identifying appropriate dialog style = Final Analysis
Menu
Fill-Form
Q/A
Command
DM
Natural L.
Attitude
Negative
Neutral
Negative
Positive
Negative
Negative
Motivation
Low
Moderate
Low
High
Low
Low
Typing Skill
Low
High
High
High
Low
High
System Exp
Low
Moderate
Moderate
High
Moderate
Low
Task Exp
Low
High
Low
High
Low
High
App. Exp
Low
Moderate
Moderate
High
Moderate
Low
Use of Other
Syst
Frequent
Frequent
Frequent
Infrequent
Frequent
Frequent
Comp. Lit
Low
High
Low
High
Low
Low
Job & Task Characteristics
User Profile
Dialog Style
Menu
Fill-Form
Q/A
Command
DM
Natural L.
Freq. of Use
Low
High
Low
High
Low
Low
Primary
Training
None
Some
None
Formal
Some
None
System Use
Discretiona
ry
Discretiona
ry
Discretiona
ry
Mandatory
Discretiona
ry
Discretiona
ry
Turnover
rate
High
Moderate
High
Low
High
High
11
9
11
3
12
12
Integrating Multiple Dialog Styles
Provide alternative dialog styles for different user type
Interface pada Aplikasi WEB
Layout :
Header
Menu
Side bar
Body
Footer
Side bar
User Interface Guidelines
Untuk Web Publishing
Aturan Navigasi :
Navigation
1. Buat signature unik (grafik atau logo) di
atas page.
Untuk memberitahukan user apakah
mereka masih di dalam situs atau sudah
keluar.
2. Tawarkan link navigasi yang bervariasi di
tiap page.
3. Sadari pemakaian icon yang menunjukkan
tujuan navigasi
4. Sediakan informasi yang mengidentifikasi
diri di tiap page, sebab mungkin ada user
yang datang dari luar link, dan kehilangan
welcome page.
5. Hadapi kemungkinan kasus dimana page
disave atau diprint.
6. Buat kata atau icon yang menarik untuk
link ketimbang menuliskan 'klik here‘
7. Modularisasikan isi page menjadi bagianbagian untuk menghindari kebutuhan
scrolling.
1.
Jika harus menggunakan tombol
grafik untuk navigasi, sebaiknya
labelnya berulang (sama)
2. Sediakan teks sebagai alternatif lain
dari tombol navigasi.
3. Jika dibutuhkan, sediakan brief
table menerangkan isi di atas page
4. Taruh header judul di tiap page
5. Pilih judul HTML yang merefleksikan
judul page.
6. Pilih judul yang merupakan
rangkuman isi dari page
7. Sediakan layanan search
8. Pada dokumen banyak, sediakan
header
9. Pertimbangkan menduplikat header
di bawah page
10. Cegah tombol atau link "return to"
atau "back" Cegah tombol navigasi
yang berwarna.
Elemen-elemen navigasi
1.
2.
3.
4.
Navigasi Menu
Adalah navigasi utama untuk user. Pada
menu utama semua item menu harus
digarisbawahi. Jika user memilih menu,
maka menu tsb highlighted
Navigasi Sub Menu
Setelah memilih menu, maka level
selanjutnya dipresentasikan dalam box
warna untuk membedakan item yang
digarisbawahi. Misal jika ukuran font
adalah 12 pixel. Jika text berwarna putih,
dan background gelap maka font
ditebalkan. Selain itu berarti biasa, dengan
teks gelap background putih. Teks awal
harus berjarak 4 pixel dari atas dan kiri.
Pada box pertama yang diatas harus diberi
garis dibawah item. Disamping box ditaruh
image (biasanya gif) untuk merealisasikan
spasi.
Navigasi dalam situs bisnis
Navigasi item yang general
Elemen-elemen umum navigasi diletakkan
di bawah menu navigasi. Terdiri atas link yang
tertuju ke home, peta situs sendiri, kontak
person, page sesudahnya, tombol kembali
(optional) dan link ke atas page. Tombol ke
atas page, biasanya diletakkan dibawah tiap
page. Tombol ini tidak bisa diedit user.
Human Computer Interface Guidelines :
User dapat kehilangan arah di sistem yang
terlalu komplek. Maka user harus mengetahui
dimana dia berada, apa yang bisa
dilakukannya, dan bagaimana ia dapat keluar.
Maka orientasi sistem adalah :
1. Berikan layar dan window dengan
deskripsi judulnya, ditaruh di lokasi yang
konsisten.
2. Sediakan isyarat untuk mengidentifikai
page saat ini dan total dari seluruh
page.
3. Tunjukkan peta situs untuk menunjukan
dimana user berada.
 Menghadapi kemungkinan aksi user :
1. Sediakan list dari pilihan-pilihan
control, melayani home base atau
starting point yang konsisten untuk
kontrol entries.
2. Tunjukkan pilihan-pilihan transaksi
yang mungkin tgerjadi
3. Buat menu yang aplikabel dan pilihan
kontrol yang availabel untuk user di
setiap waktu
4. Sediakan fungsi batal, interup dan
kontinue.
Bedakan antara file yang bisa diedit dengan
file yang tidak bisa diedit.
Petunjuk perancangan interface
WEB untuk kebutuhan
Customer E-Commerse :
 Interface pada E-Commerse bagi customer
adalah repsentasi virtual dari perusahaan
bisnis tersebut.
 7 elemen yang menjadi pertimbangan
dalam men-desain interface Customer ECommerse :
1 Context : Site’s layout and design
2 Content : Text, pictures, sound
and video that web pages contain
3 Community : The ways sites
enable user-to-user
4 Communication :That ways sites
enable site-to user communication
or two-way communication
5 Customization : Site’s ability to
self-tailor to different users or to
allow users to personalize the site
6 Connection : Degree site is linked
to other sites
7 Commerse : Site’s capabilities to
enable commercial transactions
Aksi user
Context
Amazon.com :
Content
Commerse
Community
Connection
Customization
Communication
Tool pengembangan interface
untuk aplikasi WEB
Html Editor
Frontpage
Dream weaver
Web 2.0
CMS :
- Engine
PHP Framework
Javax
-Themes
- Plug-in
JAVA
Applet
dotNET
Contoh Langkah membangun interface WEB
dengan engine Wordpress









1.
Memiliki sejumlah file berikut : xampp, engine wordpress, themes WP, plug-in WP
2. Aktifkan xampp (apache, mysql)
3. Buat database baru melalui mysql (phpmyadmin)
4. Copy file dari engine WP ke : xampp\htdocs
5. Jalankan web WP anda dengan : http://localhost/imkyarsi
6. Isikan beberapa parameter berkaitan dengan database
7. Run install, jangan lupa mencatat password admin
8. Web anda selesai (default)
9. Untuk mencoba berbagai themes, copy kan file thems ke : \xampp\htdocs\IMKYarsi\wpcontent\themes, ubah the
Masalah yang masih hangat
 Windows 3D
 Virtual Reality
 Penggunaan Hypertext dan Hypermedia
 Searching Interface
 Cooperative Work
 Forum interface
 Blog fenomenal : posting, comment, pingback,…
 Sharing knowledge
 Kode Etik dan Dampak Sosial HCI
Riset-riset Terbaru di bidang HCI :
- Adaptive Brain Interfaces (ABI)
- Arsitektur -
- Volumetric Displays
- VoiceXML
What is VoiceXML ?
VoiceXML is :
- an XML XML-based dialog markup language
- brings the Web to telephones and wireless
devices
- rendered by a voice browser instead of a GUI
browser.
VoiceXML applications can
- receive input from the user via speech or
the telephone keypad
- speak to a user via synthesized speech
or via audio files.
- Arsitektur-
Latihan dan Tugas
1.
Buatlah perbandingan terhadap fasilitas interface (komponen visual) yang dimiliki
oleh VB 6 dan Delphi 7. Lakukan analisa mulai dari layout tampilan kedua tool
tersebut secara keseluruhan, fasilitas toolbox/component, property, project,
kemudahan melakukan debugging, dan seterusnya
2.
Jelaskan tentang fenomena CMS dalam kaitannya dengan perkembangan interface
pada aplikasi WEB !
3.
Carilah di internet minimal 2 riset/penemuan terbaru di bidang HCI ini, beri
penjelasan (bila perlu dengan gambar) dan bagaimana menurut anda
implementasinya ke depan !
4. Beri penilaian terhadap interface dari sebuah aplikasi berikut dan modifikasi
berdasarkan kritik anda :
5. Bagaimana penilaian anda terhadap pesan error dibawah ini. Bila pesan error
tersebut tidak memenuhi kaidah-kaidah penyampaian pesan error, jelaskan
kaidah yang seperti apa serta bagaimana seharusnya !
a.
b.
c.
d.
Contact Me :