Cover

Apa aksi manusia ?

Apa reaksi komputer ?

Apa itu Interaksi Manusia dan Apa itu Interaksi Manusia dan Komputer ?Komputer ? Human-Computer InteractionHuman-Computer Interaction (HCI) (HCI) Bidang yang mengkaji bagaimana Bidang yang mengkaji bagaimana

interaksi manusia dan komputer interaksi manusia dan komputer berlangsung sehingga memudahkan berlangsung sehingga memudahkan manusia mengoperasikan komputer manusia mengoperasikan komputer dan mempertimbangkan umpan balik dan mempertimbangkan umpan balik yang diberikan komputer selama yang diberikan komputer selama manusia menggunakannyamanusia menggunakannya

Secara hardware : Secara hardware : I/O DeviceI/O Device, secara , secara Software : Pengontrolan I/O Device Software : Pengontrolan I/O Device dan Desain-Evaluasi-Implementasi dan Desain-Evaluasi-Implementasi Interface (umumnya GUI)Interface (umumnya GUI)

Pada awalnya pengkajian ini lebih Pada awalnya pengkajian ini lebih dominan dilakukan di dunia akademis dominan dilakukan di dunia akademis (universitas) ketimbang di dunia (universitas) ketimbang di dunia praktis/Industripraktis/Industri

Formalisasi perancangan GUI Formalisasi perancangan GUI Istilah yang berkaitan : Istilah yang berkaitan : User-friendlyUser-friendly, ,

UsabilityUsability

Bidang ilmu yang berkaitan Bidang ilmu yang berkaitan eraterat :: Teknik Elektronika-Teknik KomputerTeknik Elektronika-Teknik Komputer PsikologiPsikologi Grafis-Tipologi (Seni Cetak/Tata Grafis-Tipologi (Seni Cetak/Tata

huruf)huruf) ErgonomikErgonomik Antropologi (Tentang manusia)Antropologi (Tentang manusia) LinguistikLinguistik SosiologiSosiologi

Kesimpulan berdasarkan penelitian Kesimpulan berdasarkan penelitian : 40 sampai 50 % bagian : 40 sampai 50 % bagian Source Source codecode program/ aplikasi adalah program/ aplikasi adalah untukuntuk interface (Myers : 1989)(Myers : 1989)

Motivasi Pengembangan Motivasi Pengembangan interface :interface : Life-Critical SystemsLife-Critical Systems Industrial and Commercial usesIndustrial and Commercial uses Office, House, and entertainment Office, House, and entertainment

applicationapplication Exploratory, Creative, CooperativeExploratory, Creative, Cooperative

SystemsSystems Dibutuhkan Development Tools Dibutuhkan Development Tools

(ex : CAD, RAD, …) (ex : CAD, RAD, …)

IntroductionIntroduction

Presentation – User Interface Application Logic - Application Data Service – File / DataBase

Server

Tiga elemen pembangun aplikasi :

Bagaimana setiap elemen berhubungan pada suatu aplikasi menentukan jenis aplikasi tersebut apakah :

one-tier two-tier atau multi-tier/n-tier.

Struktur AplikasiStruktur Aplikasi

- Using MTS and SQL Server in an n-tier application -

One-tier

Two-tier

Multi-tier/n-tier

Contoh Implementasi pada Setiap Tier :

Human FactorHuman Factor Aplikasi yang Aplikasi yang

mempertimbangkan faktor mempertimbangkan faktor manusia akan manusia akan menghasilkan sistem menghasilkan sistem interaksi yang menarikinteraksi yang menarik

Lima faktor manusia yang Lima faktor manusia yang dapat diukur :dapat diukur :

Time to learnTime to learnSpeed of performanceSpeed of performanceRate of errors by usersRate of errors by usersRetention over timeRetention over timeSubjective satisfactionSubjective satisfaction

  Seperti pentingnya pe-Seperti pentingnya pe-

model-an sistem model-an sistem komputer, maka perlu juga komputer, maka perlu juga dibuat dibuat model sistem manusia. Beragam-nya karakter . Beragam-nya karakter manusia membuat hal ini manusia membuat hal ini lebih sulitlebih sulit

Diharapkan dapat meng-Diharapkan dapat meng-akomodasi ke-aneka-ragam-an akomodasi ke-aneka-ragam-an aspek persepsi, kognitif dan aspek persepsi, kognitif dan motorikmotorik ((universal approachuniversal approach))

Karakteristik interaksi manusia :Karakteristik interaksi manusia :PenglihatanPenglihatan Luminans, kontras, brightness, Luminans, kontras, brightness,

sharpnesssharpness Sudut dan medan penglihatanSudut dan medan penglihatan Warna : Warna : psikologi, , persepsi, ,

kognisi guidelines guidelinesPendengaranPendengaranSentuhanSentuhanModel sistem manusiaModel sistem manusia Pengolahan sadar dan otomatisPengolahan sadar dan otomatis Register memoriRegister memori Kanal kapasitas rendahKanal kapasitas rendah Memori jangka pendek dan Memori jangka pendek dan

panjangpanjang Sikap dan kecemasanSikap dan kecemasan Pengendalian motorikPengendalian motorik

Contoh Pe-model-an Sistem Contoh Pe-model-an Sistem Pengolahan Pengolahan

Pada ManusiaPada Manusia

Perseptual

Perseptual

Intelektual

Intelektual

Kontrol Motorik

Kontrol Motorik

Responder

Memori

Sensor

Piranti Keluaran

Piranti Masukan

Pengontrol Masukan

Pengontrol Keluaran

Prosesor

Memori

KOMPUTER KOMPUTER

Pengolahan Pengolahan Otomatis Otomatis

PPeennggol olaahhaan n SSaaddaarr

Umpan BalikUmpan BalikInterfac Interfac

ee

Model Manusia

MANUSIA MANUSIA

Petunjuk penggunaan warna dari aspek 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

Warna psikologis

Petunjuk dari aspek perseptualPetunjuk 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

Warna persepsi

Petunjuk dari aspek kognitifPetunjuk 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

.

Warna kognitif

Latar Belakang Garis Tipis dan Teks Garis Tebal dan TeksPutih Biru, Hitam, Merah Hitam, Biru, MerahHitam Putih, Kuning Kuning, Putih, HijauMerah Kuning, Putih, Hitam Hitam, Kuning, Putih, CyanHijau Hitam, Biru, Merah Hitam, Merah BiruBiru Putih, Kuning, Cyan Kuning, Magenta, HitamCyan Biru, Hitam, Merah Merah, Biru, Hitam, MagentaMagenta Hitam, Putih, Biru Biru, Hitam KuningKuning Merah, Biru, Hitam Merah, Biru, Hitam

Kombinasi warna terbaik

Kombinasi warna terjelek Latar Belakang Garis Tipis dan Teks Garis Tebal dan TeksPutih Kuning, Cyan Kuning, CyanHitam Biru, Merah, Magenta Biru, MagentaMerah Magenta, Biru, Hijau, CyanMagenta, Biru, Hijau, CyanHijau Cyan, Magenta, Kuning Cyan, Magenta, KuningBiru Hijau, Merah, Hitam Hijau, Merah, HitamCyan Hitam, Kuning, Putih Kuning, Hijau, PutihMagenta Hijau, Merah, Cyan Cyan, Hijau, MerahKuning Putih, Cyan Putih, Cyan, Hijau

Kombinasi warnaKombinasi warna

Petunjuk Secara UmumPetunjuk Secara Umum1. Merancang dengan satu warna terlebih

dahulu. 2. Batasi jumlah warna yang digunakan. Jangan

menggunakan lebih dari 4 - 7 warna untuk keseluruhan layar.

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

Background Foreground Putih Biru gelap - Hitam - Merah gelap Hitam Putih - Kuning - Hijau Biru Putih - Kuning

4. Gunakan warna biru penuh hanya untuk background, bukan untuk data-data atau informasi penting.

5. Perhatikan pengaruh dari defisiensi penggunaan satu warna yang sama pada beberapa layar, karena sangat penting sebagai informasi.

6. Untuk membuat garis tipis yang mudah dilihat, gunakan warna-warna sebagai berikut :

merah dan birubiru dan hijaukuning dan ungukuning pada hijaumagenta pada hijaumagenta pada hitam

Jumlah warna Background putih Background hitam

1 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 Khusus1 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 :

Warna praktis

Warna Pengertian

Merah terang

Menunjukkan data yang hilang atau pemberitahuan tentang sesuatu yang akan segera terjadi tanpa campur tangan pemakai (misalnya sistem jaringan yang akan segera off-line).

Merah Menunjukkan data yang akan hilang atau pemberitahuan suatu hal dengan terlebih dahulu meminta aksi dari pemakai (misalnya menghapus file).

Kuning

Menunjukkan suatu peringatan, aksi tidak dapat dikembalikan atau informasi yang mungkin hilang atau berubah (misalnya menyimpan atau menghapus file).

Hijau Menunjukkan status siap atau setelah suatu pekerjaan selesai (misalnya proses selesai, sukses, dan kontrol dikembalikan kepada pemakai).

Putih atau Hitam

Tanpa status tertentu, menampilkan suatu informasi (misalnya untuk field data dan header).

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

…sambungan

Sisi HardwareSisi Hardware Interaction devices = I/O Interaction devices = I/O

devicesdevices Kemajuan kecepatan Kemajuan kecepatan

processor dan processor dan kemampuan kemampuan penyimpanan data juga penyimpanan data juga diimbangi dengan diimbangi dengan kemajuan pada peralatan kemajuan pada peralatan Input/OutputInput/Output

Ex. : Keyboard menjadi Ex. : Keyboard menjadi More precision device, More precision device, Teletype (Teletype (10 Char/sec10 Char/sec) ) menjadi high-speed mega menjadi high-speed mega pixel graphical displaypixel graphical display

I/O masa depan : I/O masa depan : - GesturalGestural input (isarat) input (isarat)- Three dimensional pointingThree dimensional pointing- Voice input-outputVoice input-output- Whole-body involvement I/O Whole-body involvement I/O devicesdevices

Beberapa I/O devicesBeberapa I/O devices--Keyboard :

QWERTYQWERTY DVROK DVROK AlphabeticAlphabeticKlockkenbergKlockkenberg

-Pointing and Picking Devices ::MouseMouseJoystickJoystickTracballTracballDigittizing TabletDigittizing TabletLight PenLight PenTouch Sensititive PanelTouch Sensititive Panel

-Speech RecognitionSpeech Recognition-DisplayDisplay

Q W E R T Y U I O P

A S D F G H J K L

Z X C V B N M

1 2 3 4 5 6 7 8 9 0

Tata letak tombol Alphanumerik pada keyboard Tata letak tombol Alphanumerik pada keyboard jenis QWERT jenis QWERT

P Y F G C R L

E U I D H T N S

J K X B M W V

7 5 3 1 9 0 2 4 6 8

A O

Q Z

Tata letak tombol Alphanumerik pada keyboard Tata letak tombol Alphanumerik pada keyboard jenis DVORAK jenis DVORAK

A B C D E F G H I J

K L M N O P Q R S

U V W X Y Z

1 2 3 4 5 6 7 8 9 0

T

Tata letak tombol Alphanumerik pada keyboard Tata letak tombol Alphanumerik pada keyboard jenis ALPHABETIKjenis ALPHABETIK - Tata letak keyboard Klockenberg -- Tata letak keyboard Klockenberg -

Jenis Tata Letak KeyboardJenis Tata Letak Keyboard

Penemu mouse, Penemu mouse, Doug Engelbat Doug Engelbat (1968)(1968)

Mouse Pertama Mouse Pertama SekaliSekali

Touch Sensititive PanelTouch Sensititive Panel

TracballTracballJoystickJoystick

Light PenLight Pen

Pointing and Picking DevicesPointing and Picking Devices

What do humans do What do humans do well ?well ?• Sense low level stimuliSense low level stimuli• Pattern recognitionPattern recognition• Inductive reasoningInductive reasoning• Multiple strategiesMultiple strategies• AdaptingAdapting• ““Hard and fuzzy things”, Hard and fuzzy things”,

What do computers do What do computers do well?well?

• Counting and measuringCounting and measuring• Accurate storage and recallAccurate storage and recall• Rapid and consistent responsesRapid and consistent responses• Data processing/calculationData processing/calculation• Repetitive actionsRepetitive actions• ““Simple and sharply defined Simple and sharply defined

things” things” ((George MillerGeorge Miller))

Kecakapan manusia :Kecakapan manusia : Estimasi, Intuisi, Estimasi, Intuisi, kreativitas, adaptasi, kesadaran kreativitas, adaptasi, kesadaran serempak, pengolahan abnormal, serempak, pengolahan abnormal, memory asosiatif, pengambilan memory asosiatif, pengambilan keputusan non deterministik, keputusan non deterministik, pengenalan pola, pengetahuan dunia, pengenalan pola, pengetahuan dunia, kesalahan manusiawikesalahan manusiawi

Kecakapan komputer :Kecakapan komputer : Kalkulasi Kalkulasi akurat, deduksi logika, aktivitas akurat, deduksi logika, aktivitas perulangan, konsistensi, perulangan, konsistensi, multitasking,Pengolahan rutin, multitasking,Pengolahan rutin, penyimpanan dan pengambilan kembali, penyimpanan dan pengambilan kembali, pengambilan keputusan deterministik, pengambilan keputusan deterministik, pengolahan data, pengetahuan dominan, pengolahan data, pengetahuan dominan, bebas dari kesalahanbebas dari kesalahan

(P. (P. Insap SInsap S)) Let humans do what humans Let humans do what humans

do well and let computers do do well and let computers do what computers do wellwhat computers do well

Human and Computer Human and Computer CapabilityCapability

ErgonomicErgonomic( Faktor kenyamanan kerja )( Faktor kenyamanan kerja )

Aspek-aspek penting :Aspek-aspek penting : Stasion kerjaStasion kerja

• Aspek penggunaan Aspek penggunaan stasion kerja : stasion kerja : Lingkungan kerja, Lingkungan kerja, Durasi kerja, Tipe Durasi kerja, Tipe kerjaan, Beban kerjaan, Beban psikologipsikologi

• Aspek kesehatan : Aspek kesehatan : Beban visual, beban Beban visual, beban otot, beban postur otot, beban postur tubuh, beban tekanan tubuh, beban tekanan mentalmental

• Tipe kerjaan :Tipe kerjaan :- Pekerjaan Pekerjaan

pemasukan datapemasukan data- Pekerjaan akuisisi Pekerjaan akuisisi

datadata- Pekerjaan interaktifPekerjaan interaktif- Pekerjaan Pekerjaan

pengolahan datapengolahan data

PencahayaanPencahayaan Masalah utama : kilau di depan Masalah utama : kilau di depan

layar layar Mengontrol sumber cahaya yang Mengontrol sumber cahaya yang

adaada Keseimbangan cahaya layar dan Keseimbangan cahaya layar dan

sekitarsekitar Suhu dan Kualitas UdaraSuhu dan Kualitas Udara

Suhu perangkat komputerSuhu perangkat komputer Fasilitas pengontrol suhuFasilitas pengontrol suhu

Gangguan SuaraGangguan Suara Kesehatan dan Keamanan KerjaKesehatan dan Keamanan Kerja

Kondisi kesehatan ber-resiko : Kondisi kesehatan ber-resiko : radang persendian, diabetes, radang persendian, diabetes, darah tinggi, stress, merokok, darah tinggi, stress, merokok, kehamilan,…kehamilan,…

Kebiasaan BekerjaKebiasaan Bekerja

Antropometrik dan Masalah Antropometrik dan Masalah Kuantisasi Standar Kuantisasi Standar

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.

Petunjuk Praktis Petunjuk Praktis Cara Sehat Menggunakan KomputerCara Sehat Menggunakan Komputer

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.

Gambar cara sehat

Dialoque StyleDialoque Style(Ragam Dialog)(Ragam Dialog)

Yaitu : Yaitu :

Ragam dialog :Ragam dialog :o Dialog berbasis perintah tunggalDialog berbasis perintah tunggalo Dialog berbasis bahasa Dialog berbasis bahasa

pemrogramanpemrogramano Interface berbasis bahasa alamiInterface berbasis bahasa alamio Sistem menuSistem menu

Menu Datar : Selektor pilihan, Menu Datar : Selektor pilihan, penggunaan tanda terangpenggunaan tanda terang

Menu tarik : status, shortcutMenu tarik : status, shortcuto Dialog berbasis pengisian formDialog berbasis pengisian formo Interface berbasis iconInterface berbasis icono Sistem penjendelaanSistem penjendelaan

Jendela TTYJendela TTY Time Mulitplexed WindowsTime Mulitplexed Windows Space Muliplexed WindowsSpace Muliplexed Windows

oo          Manipulasi langsungManipulasi langsungoo          Interface interaksi berbasis Interface interaksi berbasis

grafisgrafisoo          Interface interaksi berbasis Interface interaksi berbasis

suarasuara

Kualitas ragam dialog Kualitas ragam dialog dapat dilihatdapat dilihat berdasarkan kriteria berdasarkan kriteria berikut :berikut :

• InisiatifInisiatif• KeluwesanKeluwesan• KompleksitasKompleksitas• KekuatanKekuatan• Beban InformasiBeban Informasi• KonsistensiKonsistensi

• Umpan BalikUmpan Balik• ObservabilitasObservabilitas• KontrolabilitasKontrolabilitas• EfisiensiEfisiensi• KeseimbanganKeseimbangan

Question

Aspek PemrogramanAspek Pemrograman Type Interface dan Type Interface dan

Pemrogramannya :Pemrogramannya : Interface berbasis textInterface berbasis text Interface berbasis grafis :Interface berbasis grafis :

Grafis DOSGrafis DOSGrafis WindowsGrafis Windows

Interface berbasis textInterface berbasis text- Contoh :- Contoh :

Masukkan angka pertama:5Masukkan angka kedua :3

Hasil penjumlahannya : 8

Ingin hitung lagi ? [Y,T]:T

Implementasi dalam Implementasi dalam Pascal : ?Pascal : ?

- Tools pada pemrograman xbase - Tools pada pemrograman xbase (dbase cs), TurboVision,…(dbase cs), TurboVision,…

Interface berbasis grafis – DOS :Interface berbasis grafis – DOS :- Membutuhkan library/driver tertentu Membutuhkan library/driver tertentu

untuk menjalankan fungsi perubahan untuk menjalankan fungsi perubahan mode layar, contoh Borland mode layar, contoh Borland International Corp menyediakan library International Corp menyediakan library BGI (Borland Grafis Interface)BGI (Borland Grafis Interface)

- Membutuhkan prosedur khusus untuk Membutuhkan prosedur khusus untuk penggunaan dan manipulasi operasi penggunaan dan manipulasi operasi perangkat input grafis (yaitu mouse)perangkat input grafis (yaitu mouse)

Interface berbasis grafis – Interface berbasis grafis – WINDOWS :WINDOWS :Pemrograman grafis – windows dapat Pemrograman grafis – windows dapat dilakukan dengan 2 cara :dilakukan dengan 2 cara :1.1.Pemrograman windows non visualPemrograman windows non visual2.2.Pemrograman windows dengan visual - Pemrograman windows dengan visual -

ToolsTools

Pembangun Interface pada Visual-ToolsPembangun Interface pada Visual-Tools Pemrograman visual (tool) Pemrograman visual (tool)

menyediakan berbagai elemen menyediakan berbagai elemen sebagai dasar pembangun sebagai dasar pembangun interface grafis. Elemen tersebut interface grafis. Elemen tersebut disediakan disediakan built-inbuilt-in dan non dan non programming code. Secara teknis programming code. Secara teknis tool semacam ini dimungkinkan tool semacam ini dimungkinkan dengan peng-implementas-ian dengan peng-implementas-ian OOP.OOP.

Ada beberapa cara Ada beberapa cara mengelompok-kan elemen-mengelompok-kan elemen-elemen visual tersebut elemen visual tersebut (selanjutnya disebut komponen), (selanjutnya disebut komponen), misalnya salah satu dengan misalnya salah satu dengan pengelompokan seperti berikut :pengelompokan seperti berikut :

-Komponen InputKomponen Input-Komponen outputKomponen output-Komponen tombolKomponen tombol-Komponen Peng-groupKomponen Peng-group-Komponen penghubung dataKomponen penghubung data-Komponen menuKomponen menu-Komponen imageKomponen image-…………

Komponen inputKomponen input : Edit (TextBox), : Edit (TextBox), CheckBox, RadioButton(OptionButton), CheckBox, RadioButton(OptionButton), ComboBox, ScrollBar, …ComboBox, ScrollBar, …

Komponen outputKomponen output : Label, Memo,… : Label, Memo,… Komponen tombolKomponen tombol : Button : Button

(Command),…(Command),… Komponen Peng-groupKomponen Peng-group : :

GroupBox(Frame) , GroupBox(Frame) , Panel,TabControl(SSTab,TabStrip),Frame Panel,TabControl(SSTab,TabStrip),Frame ……

Komponen penghubung dataKomponen penghubung data : : Table (Data,Adox),…Table (Data,Adox),…

Komponen menu Komponen menu : MainMenu, : MainMenu, PopupMenu,PopupMenu,

Komponen imageKomponen image : Image, …: Image, … Form adalah komponen utama Form adalah komponen utama

tempat semua komponen lain tempat semua komponen lain diletakkandiletakkan

Sebagai konsekuensi implementasi Sebagai konsekuensi implementasi OOP maka setiap komponen OOP maka setiap komponen memiliki : Property, Event dan memiliki : Property, Event dan MethodMethod

Pengaruh interface terhadap Pengaruh interface terhadap cara user menggunakan cara user menggunakan

produkproduk

Petunjuk Perancangan Interface (GUI)Petunjuk Perancangan Interface (GUI) Secara non formal kriteria Secara non formal kriteria

interface yang baik adalahinterface yang baik adalah : mudah digunakan : mudah digunakan dandan menarikmenarik

Perancang interface yang Perancang interface yang profesional biasanya profesional biasanya akan akan mendokumentasikanmendokumentasikan semua pekerjaan yang ia semua pekerjaan yang ia lakukan. Dengan lakukan. Dengan dokumentasi yang baik ia dokumentasi yang baik ia dapat mengubah dapat mengubah rancangannya apabila rancangannya apabila terjadi perubahan atau terjadi perubahan atau apabila menurutnya apabila menurutnya terdapat rancangan yang terdapat rancangan yang tidak mudah untuk tidak mudah untuk diwujudkandiwujudkan

Dokumentasi rancangan dapat Dokumentasi rancangan dapat dilakukan dengan cara :dilakukan dengan cara : Membuat sketsa pada kertas Membuat sketsa pada kertas Menggunakan piranti prototype Menggunakan piranti prototype

GUIGUI Menuliskan tekstual, Menuliskan tekstual,

menjelaskan kaitan antara satu menjelaskan kaitan antara satu jendela dengan jendela yang lain jendela dengan jendela yang lain

Menggunakan pirantin bantu Menggunakan pirantin bantu CASE (Computer-Aided Software CASE (Computer-Aided Software Engineering)Engineering)

Special purpose softwareSpecial purpose software mengguna-kan metoda mengguna-kan metoda user- user- center design approachcenter design approach, General , General purpose software biasanya purpose software biasanya menyediakan fasilitas menyediakan fasilitas customizationcustomization..

Piranti bantu perancangan :Piranti bantu perancangan : Screen design work sheetScreen design work sheet Screen semantic netScreen semantic net

No :Tampilan Navigasi

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

Contoh : Contoh : Screen design work sheetScreen design work sheet

Contoh : Screen semantic netContoh : Screen semantic net

T1

T2

T3

T4

T5 T

6

T7

Esc

Esc

Esc

Exit

Exit

Exit

Alt-XAlt-S

Selesai

Cetak

Alt-Q

Simpan

Alt-E

LoopContoh piranti perancangan :Contoh piranti perancangan :

Contoh Flow diagram :

Contoh Tool untuk Perancangan GUI Contoh Tool untuk Perancangan GUI Aplikasi :Aplikasi :

GUI Design StudioGUI Design Studio

http://www.carettasoftware.com/

Shackel(1990) mengajukan Shackel(1990) mengajukan formalisasi kriteria perancangan formalisasi kriteria perancangan interface dengan istilah : interface dengan istilah : UsabilityUsability menggantikan istilah user-friendly menggantikan istilah user-friendly yang menurutnya sukar untuk yang menurutnya sukar untuk diukurdiukur

Ada 4 aspek pada usability :Ada 4 aspek pada usability : EffectivenessEffectiveness, seberapa efektif , seberapa efektif

unjuk kerja pekerjaan unjuk kerja pekerjaan terbantukan dengan interface terbantukan dengan interface tersebuttersebut

LearnabilityLearnability, berapa lama , berapa lama pelatihan dibutuhkan untuk pelatihan dibutuhkan untuk dapat menggunakan interface dapat menggunakan interface tersebut secara efektivetersebut secara efektive

FlexibilityFlexibility, jika ada perubahan , jika ada perubahan pekerjaan seberapa efektive pekerjaan seberapa efektive interface masih bisa digunakaninterface masih bisa digunakan

AttitudeAttitude, apakah user yang , apakah user yang menggunakan interface tersebut menggunakan interface tersebut menjadi cepat lelah atau frustasi menjadi cepat lelah atau frustasi atau justru menjadi tambah atau justru menjadi tambah semangatsemangat

Shackel juga menekankan Shackel juga menekankan pentingnya pendekatan pentingnya pendekatan User-User-centeredcentered dibandingkan dibandingkan System-System-centeredcentered

……Lanjutan Petunjuk GUILanjutan Petunjuk GUI

GUI Design

Define users and Usebility

Requirements

Model User Objects

Model User Task

Define StyleGuide

Design GUI

Prototype GUI

Evaluate GUI

Smith dan Mosier (1986) Smith dan Mosier (1986) menyarankan 5 high-level menyarankan 5 high-level objectives untuk perancangan objectives untuk perancangan tampilan :tampilan :

1.1. Consistency of data displayConsistency of data display2.2. Efficient information assimilation by the Efficient information assimilation by the

useruser3.3. Minimal memory load on userMinimal memory load on user4.4. Compatibility of data displayCompatibility of data display5.5. Flexibility of user controlFlexibility of user control of data of data

displaydisplayThe Electric Power Research The Electric Power Research Institute (Lockheed, 1981) Institute (Lockheed, 1981) menambahkan komentar seperti menambahkan komentar seperti berikut :berikut :

• Be consistent in labelling and graphic Be consistent in labelling and graphic conventionconvention

• Standardize abbreviationStandardize abbreviation• Use consistent format in all displaysUse consistent format in all displays• Present a page number on each display Present a page number on each display

page page Present data only if they Present data only if they assist the operatorassist the operator

• Present Information GraphicallyPresent Information Graphically

• Present digital value only when Present digital value only when necessarynecessary

• Use high-level resolution monitorsUse high-level resolution monitors• Design a display in monochrommatic Design a display in monochrommatic

formform• Involve operators in the depelopment of Involve operators in the depelopment of

new displaynew display Important Issue : Important Issue :

Should user interface be copy rightShould user interface be copy right Masalah Response Time dan Masalah Response Time dan

Display rateDisplay ratePetunjuk :Petunjuk : Users prefer shorter response timeUsers prefer shorter response time Longer response times (greater than 15 Longer response times (greater than 15

seconds) are disruptiveseconds) are disruptive Users change usage profile with Users change usage profile with

response timeresponse time Shorter response time lead to short user Shorter response time lead to short user

thenk timesthenk times Response time should be appropriate to Response time should be appropriate to

the taskthe task

……Lanjutan Petunjuk GUILanjutan Petunjuk GUI

Dialog Style Analys:Dialog Style Analys:

• Menu :

• Fill-Form :

• Q/A (Question/Answer) :

• Command

• DM (Direct Manipulation) :

• Natural Language :

Dialog Style vs User Characteristics

Klasifikasi Dialog Style :Klasifikasi Dialog Style :

Psychological Characteristics:Cognitive Style:

- Verbal/analytic- Spatial/Intuitive

Attitude:- Positive- Neutral- Negative

Motivation:- High- Moderate- Low

Karakteristik UserKarakteristik User

Knowledge and Experience:Knowledge and Experience:

lanjutan… Karakteristik User

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

Job and Task Characteristics:Frequency of use:

- Low- Medium- High

Primary training:- None- Some- Formal

Turnover rate:- High- Moderate- Low

System Use:- Mandatory- Discretionary

lanjutan… Karakteristik User

Identifikasi Ragam dialog yang bersesuaian Identifikasi Ragam dialog yang bersesuaian dengan karakteristik user :dengan karakteristik user :

Menu Fill-Form Q/A Command

DM Natural L.

Attitude Negative Neutral Negative Positive Negative NegativeMotivation 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 HighApp. 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

Dialog Style

Use

r Pr

ofile Ps

ycho

logy

Kno

wle

dge

& E

xper

ienc

e

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

Dialog Style

Use

r Pr

ofile

Job

& T

ask

Cha

ract

eris

tics

- 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

Example of User CharacteristicsExample of User Characteristics

Kasus1 Kasus2

Identifying appropriate dialog style

Menu Fill-Form Q/A Command

DM Natural L.

Attitude Negative Neutral Negative Positive Negative NegativeMotivation 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 HighApp. 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

Dialog Style

Use

r Pr

ofile Ps

ycho

logy

Kno

wle

dge

& E

xper

ienc

e

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

Dialog StyleU

ser

Prof

ileJo

b &

Tas

k C

hara

cter

istic

s

Identifying appropriate dialog style = Final Analysis

Menu Fill-Form Q/A Command

DM Natural L.

Attitude Negative Neutral Negative Positive Negative NegativeMotivation 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 HighApp. 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

Use

r Pr

ofile

Psyc

holo

gyK

now

ledg

e &

Exp

erie

nce

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

Dialog StyleU

ser

Prof

ileJo

b &

Tas

k C

hara

cter

istic

s

Provide alternative dialog styles for different user type

Integrating Multiple Dialog Styles

Interface pada Aplikasi WEB

Header

Menu

Side bar Side bar

Footer

Body

Layout :

User Interface User Interface GuidelinesGuidelines Untuk Untuk Web Web PublishingPublishing

Aturan Navigasi :Aturan Navigasi :1.1. Buat signature unik (grafik atau logo) Buat signature unik (grafik atau logo)

di atas page. di atas page. Untuk memberitahukan user apakah Untuk memberitahukan user apakah mereka masih di dalam situs atau mereka masih di dalam situs atau sudah keluar. sudah keluar.

2.2. Tawarkan link navigasi yang Tawarkan link navigasi yang bervariasi di tiap page. bervariasi di tiap page.

3.3. Sadari pemakaian icon yang Sadari pemakaian icon yang menunjukkan tujuan navigasi menunjukkan tujuan navigasi

4.4. Sediakan informasi yang Sediakan informasi yang mengidentifikasi diri di tiap page, mengidentifikasi diri di tiap page, sebab mungkin ada user yang datang sebab mungkin ada user yang datang dari luar link, dan kehilangan dari luar link, dan kehilangan welcome page. welcome page.

5.5. Hadapi kemungkinan kasus dimana Hadapi kemungkinan kasus dimana page disave atau diprint. page disave atau diprint.

6.6. Buat kata atau icon yang menarik Buat kata atau icon yang menarik untuk link ketimbang menuliskan 'klik untuk link ketimbang menuliskan 'klik here‘here‘

7.7. Modularisasikan isi page menjadi Modularisasikan isi page menjadi bagian-bagian untuk menghindari bagian-bagian untuk menghindari kebutuhan scrolling.kebutuhan scrolling.

NavigationNavigation1.1. Jika harus menggunakan Jika harus menggunakan

tombol grafik untuk navigasi, tombol grafik untuk navigasi, sebaiknya labelnya berulang sebaiknya labelnya berulang (sama) (sama)

2.2. Sediakan teks sebagai alternatif Sediakan teks sebagai alternatif lain dari tombol navigasi. lain dari tombol navigasi.

3.3. Jika dibutuhkan, sediakan brief Jika dibutuhkan, sediakan brief table menerangkan isi di atas table menerangkan isi di atas page page

4.4. Taruh header judul di tiap page Taruh header judul di tiap page 5.5. Pilih judul HTML yang Pilih judul HTML yang

merefleksikan judul page. merefleksikan judul page. 6.6. Pilih judul yang merupakan Pilih judul yang merupakan

rangkuman isi dari page rangkuman isi dari page 7.7. Sediakan layanan search Sediakan layanan search 8.8. Pada dokumen banyak, Pada dokumen banyak,

sediakan header sediakan header 9.9. Pertimbangkan menduplikat Pertimbangkan menduplikat

header di bawah page header di bawah page 10.10. Cegah tombol atau link "return Cegah tombol atau link "return

to" atau "back" Cegah tombol to" atau "back" Cegah tombol navigasi yang berwarna.navigasi yang berwarna.

1.1. Navigasi Menu Navigasi Menu Adalah navigasi utama untuk user. Adalah navigasi utama untuk user. Pada menu utama semua item menu Pada menu utama semua item menu harus digarisbawahi. Jika user harus digarisbawahi. Jika user memilih menu, maka menu tsb memilih menu, maka menu tsb highlighted highlighted

2.2. Navigasi Sub Menu Navigasi Sub Menu Setelah memilih menu, maka level Setelah memilih menu, maka level selanjutnya dipresentasikan dalam selanjutnya dipresentasikan dalam box warna untuk membedakan item box warna untuk membedakan item yang digarisbawahi. Misal jika ukuran yang digarisbawahi. Misal jika ukuran font adalah 12 pixel. Jika text font adalah 12 pixel. Jika text berwarna putih, dan background berwarna putih, dan background gelap maka font ditebalkan. Selain itu gelap maka font ditebalkan. Selain itu berarti biasa, dengan teks gelap berarti biasa, dengan teks gelap background putih. Teks awal harus background putih. Teks awal harus berjarak 4 pixel dari atas dan kiri. berjarak 4 pixel dari atas dan kiri. Pada box pertama yang diatas harus Pada box pertama yang diatas harus diberi garis dibawah item. Disamping diberi garis dibawah item. Disamping box ditaruh image (biasanya gif) box ditaruh image (biasanya gif) untuk merealisasikan spasi. untuk merealisasikan spasi.

3.3. Navigasi dalam situs bisnis Navigasi dalam situs bisnis 4.4. Navigasi item yang generalNavigasi item yang general

Elemen-elemen umum navigasi Elemen-elemen umum navigasi diletakkandiletakkan

di bawah menu navigasi. Terdiri atas link di bawah menu navigasi. Terdiri atas link yang tertuju ke home, peta situs sendiri, yang tertuju ke home, peta situs sendiri, kontak person, page sesudahnya, tombol kontak person, page sesudahnya, tombol kembali (optional) dan link ke atas page. kembali (optional) dan link ke atas page. Tombol ke atas page, biasanya Tombol ke atas page, biasanya diletakkan dibawah tiap page. Tombol ini diletakkan dibawah tiap page. Tombol ini tidak bisa diedit user. tidak bisa diedit user.

Human Computer Interface Human Computer Interface Guidelines :Guidelines :

User dapat kehilangan arah di sistem User dapat kehilangan arah di sistem yang terlalu komplek. Maka user harus yang terlalu komplek. Maka user harus mengetahui dimana dia berada, apa mengetahui dimana dia berada, apa yang bisa dilakukannya, dan bagaimana yang bisa dilakukannya, dan bagaimana ia dapat keluar. Maka orientasi sistem ia dapat keluar. Maka orientasi sistem adalah :adalah :

1.1. Berikan layar dan window dengan Berikan layar dan window dengan deskripsi judulnya, ditaruh di lokasi deskripsi judulnya, ditaruh di lokasi yang konsisten. yang konsisten.

2.2. Sediakan isyarat untuk Sediakan isyarat untuk mengidentifikai page saat ini dan mengidentifikai page saat ini dan total dari seluruh page. total dari seluruh page.

3.3. Tunjukkan peta situs untuk Tunjukkan peta situs untuk menunjukan dimana user berada.menunjukan dimana user berada.

Elemen-elemen navigasiElemen-elemen navigasi

Menghadapi kemungkinan aksi Menghadapi kemungkinan aksi user :user :1.1.Sediakan list dari pilihan-pilihan Sediakan list dari pilihan-pilihan

control, melayani home base atau control, melayani home base atau starting point yang konsisten starting point yang konsisten untuk kontrol entries. untuk kontrol entries.

2.2.Tunjukkan pilihan-pilihan transaksi Tunjukkan pilihan-pilihan transaksi yang mungkin tgerjadi yang mungkin tgerjadi

3.3.Buat menu yang aplikabel dan Buat menu yang aplikabel dan pilihan kontrol yang availabel pilihan kontrol yang availabel untuk user di setiap waktu untuk user di setiap waktu

4.4.Sediakan fungsi batal, interup dan Sediakan fungsi batal, interup dan kontinue. kontinue.

Bedakan antara file yang bisa diedit Bedakan antara file yang bisa diedit dengan file yang tidak bisa diedit.dengan file yang tidak bisa diedit.

Petunjuk perancangan Petunjuk perancangan interface WEB untuk interface WEB untuk kebutuhan kebutuhan CustomerCustomer E- E-CommerseCommerse : :

Interface pada E-Commerse bagi Interface pada E-Commerse bagi customer adalah repsentasi virtual customer adalah repsentasi virtual dari perusahaan bisnis tersebut.dari perusahaan bisnis tersebut.

7 elemen yang menjadi 7 elemen yang menjadi pertimbangan dalam men-desain pertimbangan dalam men-desain interface Customer E-Commerse :interface Customer E-Commerse :

1 Context : SContext : Site’s layout and ite’s layout and designdesign

2 Content :Content : Text, pictures, Text, pictures, sound and video that web sound and video that web pages contain pages contain

3 Community :Community : The ways sites The ways sites enable user-to-user enable user-to-user

4 Communication :Communication :That ways That ways sites enable site-to user sites enable site-to user communication or two-way communication or two-way communicationcommunication

5 Customization :Customization : Site’s ability Site’s ability to self-tailor to different users to self-tailor to different users or to allow users to personalize or to allow users to personalize the sitethe site

6 Connection : Connection : Degree site is Degree site is linked to other siteslinked to other sites

7 Commerse : Commerse : Site’s Site’s capabilities to enable capabilities to enable commercial transactionscommercial transactionsAksi user

Context

Commerse

Connection

Content

Community

Customization

Communication

Amazon.comAmazon.com : :

Tool pengembangan interface untuk aplikasi WEB

Html EditorFrontpageDream

weaver

CMS : - Engine-Themes- Plug-in

dotNETJAVA Applet

Javax

Web 2.0

PHP Framework

Contoh Langkah membangun interface Contoh Langkah membangun interface WEB dengan engine WordpressWEB 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\themes, ubah the

Masalah yang masih hangatMasalah yang masih hangat

Windows 3DWindows 3D Virtual RealityVirtual Reality Penggunaan Hypertext dan HypermediaPenggunaan Hypertext dan Hypermedia Searching Interface Searching Interface Cooperative WorkCooperative Work Forum interfaceForum interface Blog fenomenal : posting, comment, Blog fenomenal : posting, comment,

pingback,…pingback,… Sharing knowledgeSharing knowledge Kode Etik dan Dampak Sosial HCIKode Etik dan Dampak Sosial HCI

Riset-riset Terbaru di bidang Riset-riset Terbaru di bidang HCI :HCI :

- Adaptive Brain Interfaces (ABI)

- Arsitektur -

- Volumetric Displays

- - VoiceXMLVoiceXMLWhat 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 TugasLatihan 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.

d.c.

Contact Me :Contact Me :