C o v e r
Introduction ¾ Apa itu Interaksi Manusia dan Komputer ?
¾ Bidang ilmu yang berkaitan erat : 9 Teknik Elektronika-Teknik Komputer 9 Psikologi 9 Human-Computer Interaction (HCI) 9 Grafis-Tipologi (Seni Cetak/Tata huruf) 9 Bidang yang mengkaji bagaimana 9 Ergonomik interaksi manusia dan komputer 9 Antropologi (Tentang manusia) berlangsung sehingga memudahkan 9 Linguistik manusia mengoperasikan komputer dan 9 Sosiologi mempertimbangkan umpan balik yang ¾ Kesimpulan berdasarkan penelitian : diberikan komputer selama manusia 40 sampai 50 % bagian Source code menggunakannya program/ aplikasi adalah untuk 9 Secara hardware : I/O Device, secara interface (Myers : 1989) Software : Pengontrolan I/O Device dan ¾ Motivasi Pengembangan interface : Desain-Evaluasi-Implementasi Interface 9 Life-Critical Systems (umumnya GUI) 9 Industrial and Commercial uses 9 Office, House, and entertainment 9 Pada awalnya pengkajian ini lebih application dominan dilakukan di dunia akademis 9 Exploratory, Creative, Cooperative (universitas) ketimbang di dunia Systems praktis/Industri ¾ Dibutuhkan Development Tools 9 Formalisasi perancangan GUI (ex : CAD, RAD, …) 9 Istilah yang berkaitan : User-friendly, Usability
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
Human Factor ¾ Aplikasi yang mempertimbangkan faktor manusia akan menghasilkan sistem interaksi yang menarik ¾ Lima faktor manusia yuang dapat diukur : 9Time to learn 9Speed of performance 9Rate of errors by users 9Retention over time 9Subjective 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 : 9 Penglihatan Luminans, kontras, brightness, sharpness Sudut dan medan penglihatan Warna : psikologi, persepsi, kognisi guidelines 9 Pendengaran 9 Sentuhan 9 Model sistem manusia Pengolahan sadar dan otomatis Register memori Kanal kapasitas rendah Memori jangka pendek dan panjang Sikap dan kecemasan Pengendalian motorik
Memori
Pengolahan Otomatis
MANUSIA
Intelektual
Kontrol Motorik
Intelektual
Kontrol Motorik
Model Manusia
Responder
Interface
Sensor
Umpan Balik Piranti Keluaran
KOMPUTER
Pengontrol Keluaran
Piranti Masukan
Pengontrol Masukan
Prosesor Memori
Contoh Pe-model-an Sistem Pengolahan Pada Manusia
Pengolahan Sadar
Perseptual
Perseptual
p s i k o l o 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 berulangulang 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
a r n a k o g n 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
p r a k t i 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 :
…sambungan
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 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. Gunakan aturan penggunaan warna dalam keseluruhan sistem untuk menjaga konsistensi.
6.
Sisi Hardware 9 Interaction devices = I/O devices 9 Kemajuan kecepatan processor dan kemampuan penyimpanan data juga diimbangi dengan kemajuan pada peralatan Input/Output 9 Ex. : Keyboard menjadi More precision device, Teletype (10 Char/sec) menjadi high-speed mega pixel graphical display 9 I/O masa depan : - Gestural input (isarat) - Three dimensional pointing - Voice input-output - Whole-body involvement I/O devices
9 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
8 L
S V
Z
Tata letak tombol Alphanumerik pada keyboard jenis DVORAK
0 J
S
T
Z
Tata letak tombol Alphanumerik pada keyboard jenis ALPHABETIK
- 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 non 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 : 9 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
9 Pencahayaan Masalah utama : kilau di depan layar Mengontrol sumber cahaya yang ada Keseimbangan cahaya layar dan sekitar 9 Suhu dan Kualitas Udara Suhu perangkat komputer Fasilitas pengontrol suhu 9 Gangguan Suara 9 Kesehatan dan Keamanan Kerja Kondisi kesehatan ber-resiko : radang persendian, diabetes, darah tinggi, stress, merokok, kehamilan,… 9 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.
r c a r a s e h a t
Dialoque Style ¾ Yaitu : ¾ Ragam dialog :
(Ragam Dialog)
o Dialog berbasis perintah tunggal o Dialog berbasis bahasa pemrograman o Interface berbasis bahasa alami o Sistem menu Menu Datar : Selektor pilihan, penggunaan tanda terang Menu tarik : status, shortcut o Dialog berbasis pengisian form o Interface berbasis icon o Sistem penjendelaan Jendela TTY Time Mulitplexed Windows Space Muliplexed Windows o Manipulasi langsung o Interface interaksi berbasis grafis o 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 : 9 Interface berbasis text 9 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 mengelompokkan 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
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 : 9 Membuat sketsa pada kertas a 9 Menggunakan piranti prototype GUI 9 Menuliskan tekstual, menjelaskan kaitan antara satu jendela dengan jendela yang lain a 9 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 : 9 Screen design work sheet 9 Screen semantic net
Contoh piranti perancangan :
Loop
Contoh : Screen design work sheet T2
No :
Tampilan
Navigasi
Esc
Alt-X
Alt-S
T1
Alt-E
T3
Simpan Esc
Keterangan
T4
Selesai Cetak
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
Exit
Exit
T5
T6
Esc Exit
Alt-Q
T7
Contoh : Screen semantic net
Contoh Flow diagram :
Contoh Tool untuk Perancangan GUI Aplikasi : GUI Design Studio
http://www.carettasoftware.com/
…Lanjutan Petunjuk GUI
¾ Shackel(1990) mengajukan formalisasi kriteria perancangan interface dengan istilah : Usability menggantikan istilah user-friendly yang menurutnya sukar untuk diukur
¾ Shackel juga menekankan pentingnya pendekatan User-centered dibandingkan System-centered
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 Attiude, 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
…Lanjutan 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 : 9 Users prefer shorter response time 9 Longer response times (greater than 15 seconds) are disruptive 9 Users change usage profile with response time 9 Shorter response time lead to short user thenk times 9 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 - 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
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
User Interface Guidelines for 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 :
¾ 7 elemen yang menjadi pertimbangan 1. Sediakan list dari pilihan-pilihan dalam men-desain interface Customer Econtrol, melayani home base atau Commerse : starting point yang konsisten untuk 1 Context : Site’s layout and design kontrol entries. 2 Content : Text, pictures, sound 2. Tunjukkan pilihan-pilihan transaksi and video that web pages contain yang mungkin tgerjadi 3 Community : The ways sites 3. Buat menu yang aplikabel dan pilihan enable user-to-user kontrol yang availabel untuk user di 4 Communication :That ways sites setiap waktu enable site-to user communication 4. Sediakan fungsi batal, interup dan or two-way communication kontinue. 5 Customization : Site’s ability to self-tailor to different users or to Bedakan antara file yang bisa diedit dengan allow users to personalize the site file yang tidak bisa diedit. 6 Connection : Degree site is linked to other sites ¾ Petunjuk perancangan interface 7 Commerse : Site’s capabilities to enable commercial transactions WEB untuk kebutuhan
Customer E-Commerse :
¾ Interface pada E-Commerse bagi customer adalah repsentasi virtual dari perusahaan bisnis tersebut.
Aksi user
Context
Amazon.com :
Content
Commerse
Community
Connection
Customization Communication
Masalah yang masih hangat Coordinat Windows Windows 3D Virtual Reality Printed Manuals, Online help and Tutorial Penggunaan Hypertext dan Hypermedia Searching Interface Cooperative Work 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. Pilihlah sebuah aplikasi-jadi yang anda inginkan, kemudian lakukan analisis-kritis (evaluasi) terhadap interface-interface pada aplikasi tersebut dengan menyebutkan keunggulan dan kelemahannya 2. Buatlah perbandingan terhadap fasilitas interface visual yang dimiliki oleh VB 6 dan Delphi 5. Lakukan analisa mulai dari layout tampilan kedua tool tersebut secara keseluruhan, fasilitas toolbox/component, property, project, kemudahan melakukan debugging, dan seterusnya 3. Rancanglah tampilan Web untuk customer e-commerse, dan tunjukkan bagaimana anda mengimplementasikan 7 elemen interface E-Commerse pada tampilan web tersebut. 4. 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 !
5. Beri penilaian terhadap interface dari sebuah aplikasi berikut dan modifikasi berdasarkan kritik anda : M o d i f i k a s i
6. 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.
