Cover

1
Cover
Interaksi Manusia dan Komputer
Bahan Presentasi Kuliah
Herianto, S.Pd., M.T
STMIK Jayanusa 2009
2
Reaksi
Manusia
Komputer
Interaksi
Apa aksi manusia ?
Apa reaksi komputer ?
Aksi
3
Introduction

• Apa itu Interaksi Manusia dan Komputer ?
• Human-Computer Interaction (HCI)
• Bidang yang mengkaji bagaimana interaksi manusia
  dan komputer berlangsung sehingga memudahkan
  manusia mengoperasikan komputer dan
  mempertimbangkan umpan balik yang diberikan
  komputer selama manusia menggunakannya
• Secara hardware I/O Device, secara Software
  Pengontrolan I/O Device dan Desain-Evaluasi-Implem
  entasi Interface (umumnya GUI)
• 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

• Bidang ilmu yang berkaitan erat
• Teknik Elektronika-Teknik Komputer
• Psikologi
• Grafis-Tipologi (Seni Cetak/Tata huruf)
• Ergonomik
• Antropologi (Tentang manusia)
• Linguistik
• Sosiologi
• Kesimpulan berdasarkan penelitian 40 sampai
  50 bagian Source code program/ aplikasi adalah
  untuk interface (Myers 1989)
• Motivasi Pengembangan interface
• Life-Critical Systems
• Industrial and Commercial uses
• Office, House, and entertainment application
• Exploratory, Creative, Cooperative Systems
• Dibutuhkan Development Tools (ex CAD, RAD,
  )

4
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 -
5
One-tier
6
Two-tier
7
Multi-tier/n-tier
8
Contoh Implementasi pada Setiap Tier
9
Human Factor

• 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

• 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-model-an sistem komputer,
  maka perlu juga dibuat model sistem manusia.
  Beragam-nya karakter manusia membuat hal ini
  lebih sulit

10
Model Manusia
Perseptual
Perseptual
Memori
Intelektual
Pengolahan Sadar
MANUSIA
Intelektual
Pengolahan Otomatis
Kontrol Motorik
Kontrol Motorik
Responder
Sensor
Umpan Balik
Interface
Piranti Masukan
Piranti Keluaran
Pengontrol Masukan
Pengontrol Keluaran
Prosesor
KOMPUTER
Memori
Contoh Pe-model-an Sistem Pengolahan Pada Manusia
11
Warna psikologis

• 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
  biru-hijau. 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

12
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

13
Warna kognitif

• 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
• .

14
Kombinasi warna
Kombinasi warna terbaik
Kombinasi warna terjelek
15
Warna praktis

• Petunjuk Secara Umum
• Merancang dengan satu warna terlebih dahulu.
• Batasi jumlah warna yang digunakan. Jangan
  menggunakan lebih dari 4 - 7 warna untuk
  keseluruhan layar.
• Dalam satu layar, hindari pasangan-pasangan warna
  sebagai berikut
• Sebagai warna background dan foreground, gunakan
  pasangan warna seperti di bawah ini

merah dan hijaukuning pada putihhijau pada
putihbiru pada hitammerah pada hitamkuning
pada putih
merah dan birubiru dan hijaukuning dan
ungukuning pada hijaumagenta pada hijaumagenta
pada hitam

• Petunjuk Secara Khusus
• Buatlah warna-warna untuk membedakan sesuatu
  maksud tertentu, jangan menggunakan satu warna
  untuk maksud yang berbeda.
• Jangan menggunakan warna yang beraneka macam jika
  informasi yang ditampilkan hanya akan diakses
  oleh monitor monochrome.
• 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

• 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

16
sambungan

• 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.

17
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

18
Jenis Tata Letak Keyboard
Tata letak tombol Alphanumerik pada keyboard
jenis QWERT
Tata letak tombol Alphanumerik pada keyboard
jenis DVORAK
Tata letak tombol Alphanumerik pada keyboard
jenis ALPHABETIK
- Tata letak keyboard Klockenberg -
19
Pointing and Picking Devices
Penemu mouse, Doug Engelbat (1968)
Mouse Pertama Sekali
Joystick
Touch Sensititive Panel
Light Pen
20
Human and Computer Capability

• 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

• 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)

21
Ergonomic( Faktor kenyamanan kerja )

• 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

• 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

22
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
• Jarak minimum yang baik antara mata dengan layar
  komputer adalah sekitar 18 sampai 24 inci.
• Atur sudut penempatan yang tepat antara layar
  monitor dan keyboard agar Anda merasa nyaman dan
  relaks ketika harus menggunakan komputer dalam
  waktu lama.
• Kedudukan layar monitor sebaiknya tidak lebih
  tinggi dari mata.
• 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.

1. Gunakan sejenis layar penyaring (screen glare
   filter) untuk mengurangi efek radiasi yang
   mungkin ditimbulkan oleh monitor komputer Anda.
2. 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.
3. Jika Anda telah berada di depan komputer selama
   kurang lebih satu jam secara terus menerus,
   istirahatlah minimal 15 menit hingga 20 menit.
4. 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.

23
Gambar cara sehat
24
Dialoque Style(Ragam Dialog)

• Yaitu
• Ragam dialog
• 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
• 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

• Umpan Balik
• Observabilitas
• Kontrolabilitas
• Efisiensi
• Keseimbangan

Question
25
Aspek Pemrograman

• Type Interface dan
• Pemrogramannya
• Interface berbasis text
• Interface berbasis grafis
• Grafis DOS
• Grafis Windows
• Interface berbasis text
• - Contoh

• - 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
• Pemrograman windows non visual
• Pemrograman windows dengan visual - Tools

Masukkan angka pertama5 Masukkan angka kedua
3 Hasil penjumlahannya 8 Ingin hitung lagi ?
Y,TT
Implementasi dalam Pascal ?
26
Pembangun Interface pada Visual-Tools

• 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

• 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 peng-implementas-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

27

• Pengaruh interface terhadap cara user menggunakan
  produk

28
Petunjuk Perancangan Interface (GUI)

• 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

• 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

29
Contoh piranti perancangan
Contoh Screen design work sheet

• 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

Contoh Screen semantic net
30
Contoh Flow diagram
31
Contoh Tool untuk Perancangan GUI Aplikasi
GUI Design Studio
http//www.carettasoftware.com/
32
Lanjutan Petunjuk GUI

• Shackel juga menekankan pentingnya pendekatan
  User-centered dibandingkan System-centered

• Shackel(1990) mengajukan formalisasi kriteria
  perancangan interface dengan istilah Usability
  menggantikan istilah user-friendly yang
  menurutnya sukar untuk diukur
• 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

GUI Design
33
Lanjutan Petunjuk GUI

• 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

• Smith dan Mosier (1986) menyarankan 5 high-level
  objectives untuk perancangan tampilan
• Consistency of data display
• Efficient information assimilation by the user
• Minimal memory load on user
• Compatibility of data display
• 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

34
Dialog Style Analys
Dialog Style vs User Characteristics
Klasifikasi Dialog Style

• Menu
• Fill-Form
• Q/A (Question/Answer)
• Command
• DM (Direct Manipulation)
• Natural Language

35
Karakteristik User
Psychological Characteristics Cognitive
Style - Verbal/analytic - Spatial/Intuitive Att
itude - Positive - Neutral -
Negative Motivation - High - Moderate - Low
36
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
37
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
38
Identifikasi Ragam dialog yang bersesuaian
dengan karakteristik user
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
Psychology
User Profile
Knowledge Experience
39
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
User Profile
Job Task Characteristics
40
Example of User Characteristics
Kasus1
Kasus2

• Attitude Negative Negative
• Motivation Low Low
• Typing skill High High
• System Experience Low High
• Task Experience High Low
• App. Experience Low High
• Use of other systems Infrequent Frequent
• Computer literacy Low High
• Freq. of use Low High
• Primary training None Formal
• System use Discretionary Mandatory
• Turnover use High Low

41
Identifying appropriate dialog style
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
Psychology
User Profile
Knowledge Experience
42
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 High Moderate High Low High High
User Profile
Job Task Characteristics
43
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
Psychology
User Profile
Knowledge Experience
44
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 High Moderate High Low High High
11 9 11 3 12 12
User Profile
Job Task Characteristics
Integrating Multiple Dialog Styles
Provide alternative dialog styles for different
user type
45
Interface pada Aplikasi WEB
Layout
Header
Menu
Side bar
Side bar
Body
Footer
46
User Interface Guidelines Untuk Web Publishing

• Aturan Navigasi
• Buat signature unik (grafik atau logo) di atas
  page. Untuk memberitahukan user apakah mereka
  masih di dalam situs atau sudah keluar.
• Tawarkan link navigasi yang bervariasi di tiap
  page.
• Sadari pemakaian icon yang menunjukkan tujuan
  navigasi
• Sediakan informasi yang mengidentifikasi diri di
  tiap page, sebab mungkin ada user yang datang
  dari luar link, dan kehilangan welcome page.
• Hadapi kemungkinan kasus dimana page disave atau
  diprint.
• Buat kata atau icon yang menarik untuk link
  ketimbang menuliskan 'klik here
• Modularisasikan isi page menjadi bagian-bagian
  untuk menghindari kebutuhan scrolling.

• Navigation
• Jika harus menggunakan tombol grafik untuk
  navigasi, sebaiknya labelnya berulang (sama)
• Sediakan teks sebagai alternatif lain dari tombol
  navigasi.
• Jika dibutuhkan, sediakan brief table menerangkan
  isi di atas page
• Taruh header judul di tiap page
• Pilih judul HTML yang merefleksikan judul page.
• Pilih judul yang merupakan rangkuman isi dari
  page
• Sediakan layanan search
• Pada dokumen banyak, sediakan header
• Pertimbangkan menduplikat header di bawah page
• Cegah tombol atau link "return to" atau "back"
  Cegah tombol navigasi yang berwarna.

47
Elemen-elemen navigasi

• 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
• Berikan layar dan window dengan deskripsi
  judulnya, ditaruh di lokasi yang konsisten.
• Sediakan isyarat untuk mengidentifikai page saat
  ini dan total dari seluruh page.
• Tunjukkan peta situs untuk menunjukan dimana user
  berada.

1. Navigasi Menu Adalah navigasi utama untuk user.
   Pada menu utama semua item menu harus
   digarisbawahi. Jika user memilih menu, maka menu
   tsb highlighted
2. 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.
3. Navigasi dalam situs bisnis
4. Navigasi item yang generalElemen-elemen umum
   navigasi diletakkan

48
Aksi user

• Menghadapi kemungkinan aksi user
• Sediakan list dari pilihan-pilihan control,
  melayani home base atau starting point yang
  konsisten untuk kontrol entries.
• Tunjukkan pilihan-pilihan transaksi yang mungkin
  tgerjadi
• Buat menu yang aplikabel dan pilihan kontrol yang
  availabel untuk user di setiap waktu
• 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 E-Commerse
• Context Sites layout and design
• Content Text, pictures, sound and video that
  web pages contain
• Community The ways sites enable user-to-user
• Communication That ways sites enable site-to
  user communication or two-way communication
• Customization Sites ability to self-tailor to
  different users or to allow users to personalize
  the site
• Connection Degree site is linked to other sites
• Commerse Sites capabilities to enable
  commercial transactions

49
Amazon.com
Context
Content
Commerse
Community
Connection
Customization
Communication
50
(No Transcript)
51
(No Transcript)
52
(No Transcript)
53
(No Transcript)
54
(No Transcript)
55
Tool pengembangan interface untuk aplikasi WEB
Html Editor
Frontpage
Dream weaver
Web 2.0

• CMS
• - Engine
• Themes
• Plug-in

PHP Framework
Javax
JAVA Applet
dotNET
56
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\wp-content\theme
  s, ubah the

57
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

58
Riset-riset Terbaru di bidang HCI
- Adaptive Brain Interfaces (ABI)
- Arsitektur -
59
- Volumetric Displays
60
(No Transcript)
61
(No Transcript)
62
- 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-
63
Latihan dan Tugas

• 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
• Jelaskan tentang fenomena CMS dalam kaitannya
  dengan perkembangan interface pada aplikasi WEB !
• 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 !

64
4. Beri penilaian terhadap interface dari sebuah
aplikasi berikut dan modifikasi berdasarkan
kritik anda
65
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.
66
Contact Me
Email herianto_at_unsada.ac.id, heri_unsada04_at_yahoo.
com
Site http//herianto.unsada.ac.id
Blog http//herianto.wordpress.com
FB http//www.facebook.com/herianto.yunus