apa itu interaksi manusia dan - airlangit.files.wordpress.com · interaksi manusia dan komputer ......

Apa itu Interaksi Manusia dan Apa itu Interaksi Manusia dan Komputer ?Komputer ?

HumanHuman--Computer InteractionComputer 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 dan manusia mengoperasikan komputer dan mempertimbangkan umpan balik yang mempertimbangkan umpan balik yang diberikan komputer selama manusia diberikan komputer selama manusia menggunakannyamenggunakannya

Secara hardware : Secara hardware : I/O DeviceI/O Device, secara , secara Software : Pengontrolan I/O Device dan Software : Pengontrolan I/O Device dan DesainDesain--EvaluasiEvaluasi--Implementasi Interface Implementasi Interface (umumnya GUI)(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 : UserUser--friendlyfriendly, , UsabilityUsability

Bidang ilmu yang berkaitan eratBidang ilmu yang berkaitan erat ::Teknik ElektronikaTeknik Elektronika--Teknik KomputerTeknik KomputerPsikologiPsikologiGrafisGrafis--Tipologi (Seni Cetak/Tata huruf)Tipologi (Seni Cetak/Tata huruf)ErgonomikErgonomikAntropologi (Tentang manusia)Antropologi (Tentang manusia)LinguistikLinguistikSosiologiSosiologi

Kesimpulan berdasarkan penelitian : Kesimpulan berdasarkan penelitian : 40 sampai 50 % bagian 40 sampai 50 % bagian Source codeSource codeprogram/ aplikasi adalah untukprogram/ aplikasi adalah untukinterfaceinterface (Myers : 1989)(Myers : 1989)Motivasi Pengembangan interface :Motivasi Pengembangan interface :

LifeLife--Critical SystemsCritical SystemsIndustrial and Commercial usesIndustrial and Commercial usesOffice, House, and entertainment Office, House, and entertainment applicationapplicationExploratory, Creative, CooperativeExploratory, Creative, CooperativeSystemsSystems

Dibutuhkan Development Tools Dibutuhkan Development Tools (ex : CAD, RAD, (ex : CAD, RAD, ……))

IntroductionIntroduction

Presentation – User Interface Application Logic - ApplicationData 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

Human FactorHuman FactorAplikasiAplikasi yangyangmempertimbangkan faktor mempertimbangkan faktor manusia akan menghasilkan manusia akan menghasilkan sistem interaksisistem interaksi yangyang menarikmenarik

LimaLima faktor manusia yuang faktor manusia yuang dapat diukurdapat 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 peSeperti pentingnya pe--modelmodel--anan sistem komputersistem komputer,, maka maka perlu juga dibuat perlu juga dibuat modelmodelsistem manusiasistem manusia.. BeragamBeragam--nya nya karakter manusia membuat karakter manusia membuat hal ini lebih sulithal ini lebih sulit

Diharapkan dapat mengDiharapkan dapat meng--akomodasi akomodasi keke--anekaaneka--ragamragam--anan aspek persepsiaspek persepsi,,kognitif dan motorikkognitif dan motorik ((universal universal approachapproach))

Karakteristik interaksi manusiaKarakteristik interaksi manusia ::PenglihatanPenglihatan

LuminansLuminans,, kontraskontras, brightness, , brightness, sharpnesssharpnessSudut dan medan penglihatanSudut dan medan penglihatanWarnaWarna : : psikologipsikologi, , persepsipersepsi, , kognisikognisiguidelinesguidelines

PendengaranPendengaranSentuhanSentuhanModelModel sistem manusiasistem manusia

Pengolahan sadar dan otomatisPengolahan sadar dan otomatisRegisterRegister memorimemoriKanal kapasitas rendahKanal kapasitas rendahMemori jangka pendek dan panjangMemori jangka pendek dan panjangSikap dan kecemasanSikap dan kecemasanPengendalian motorikPengendalian motorik

Contoh PeContoh Pe--modelmodel--anan Sistem Pengolahan Sistem Pengolahan Pada ManusiaPada Manusia

Perseptual Perseptual

Intelektual Intelektual

Kontrol MotorikKontrol Motorik

Responder

Mem

ori

Sensor

Piranti Keluaran Piranti Masukan

Pengontrol MasukanPengontrol Keluaran

Prosesor

Memori

KO

MP

UTE

RK

OM

PU

TER

Peng

olah

an O

tom

ati s

Peng

olah

an O

tom

ati s Pengolahan Sadar

Pengolahan Sadar

Umpan BalikUmpan Balik

Inte

rfac

eIn

terf

ace

Model Manusia

MA

NU

SIA

MA

NU

SIA

Petunjuk penggunaan warna dari aspek PsikologisPetunjuk 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 warnaWarna 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 mataBesarnya 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 hijauHindarkan 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 jelekUntuk pengamat yang mengalami kekurangan dalam melihat warna, hindarkan perubahan warna tunggal

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 berbedaKetajaman (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 bebasTidak 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 cerahHue berubah sesuai dengan perubahan intensitas warna dan latar belakangHindarkan 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 belakangyang samaWarna yang sama membawa pesan yang serupaKecerahan dan saturasi akan menarik perhatianUrutkan warna sesuai dengan posisi spektralnyaWarna 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

.

arna

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 terjelekLatar 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 Umum

1. 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 Khusus

1 Buatlah warna-warna untuk membedakan sesuatu maksud tertentu, jangan menggunakan satu warna untuk maksud yangberbeda.

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 melindungidata dan status. Sewaktu digunakan untuk melindungi data, gunakan warna dengan masing-masing pengertian :

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 informasiyang 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 informasiyang kompleks, banyak, dan penting.Tetapi pertahankan jangan sampai terjadi konflik dengan penggunaan warna pada no. 3 di atas.

6. Gunakan aturan penggunaan warna dalam keseluruhan sistem untuk menjaga konsistensi.

…sambungan

SisiSisi HardwareHardwareInteraction devices = I/O Interaction devices = I/O devicesdevices

Kemajuan kecepatanKemajuan kecepatanprocessorprocessor dan kemampuan dan kemampuan penyimpananpenyimpanan datadata juga juga diimbangi dengan kemajuan diimbangi dengan kemajuan pada peralatanpada peralatanInput/OutputInput/Output

Ex. : KeyboardEx. : Keyboard menjadimenjadiMore precision device, More precision device, Teletype (Teletype (10 Char/sec10 Char/sec))menjadimenjadi highhigh--speed mega speed mega pixel graphical displaypixel graphical display

I/OI/O masa depanmasa depan ::-- GesturalGestural input (input (isaratisarat))-- Three dimensional pointingThree dimensional pointing-- Voice inputVoice input--outputoutput-- WholeWhole--body involvement I/O body involvement I/O devicesdevices

BeberapaBeberapa I/O devicesI/O devices

--Keyboard :Keyboard :QWERTYQWERTYDVROK DVROK AlphabeticAlphabeticKlockkenbergKlockkenberg

--Pointing and Picking Devices Pointing and Picking Devices ::MouseMouseJoystickJoystickTracballTracballDigittizingDigittizing TabletTabletLight PenLight PenTouchTouch SensititiveSensititive PanelPanel

--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 padaTata letak tombol Alphanumerik pada keyboardkeyboardjenisjenis QWERT 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 padaTata letak tombol Alphanumerik pada keyboardkeyboardjenisjenis DVORAK 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 padaTata letak tombol Alphanumerik pada keyboardkeyboard jenisjenisALPHABETIKALPHABETIK -- Tata letakTata letak keyboardkeyboard KlockenbergKlockenberg --

Jenis Tata LetakJenis Tata Letak KeyboardKeyboard

PenemuPenemu mouse, mouse, DougDoug EngelbatEngelbat (1968)(1968)MouseMouse Pertama SekaliPertama Sekali

TouchTouch SensititiveSensititive PanelPanel

TracballTracballJoystickJoystick

Light PenLight Pen

Pointing and Picking DevicesPointing and Picking Devices

What do humans do well ?What do humans do well ?•• Sense low level stimuliSense low level stimuli•• Pattern recognitionPattern recognition•• Inductive reasoningInductive reasoning•• Multiple strategiesMultiple strategies•• AdaptingAdapting•• ““Hard and fuzzy thingsHard 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

thingsthings””((George MillerGeorge Miller))

Kecakapan manusiaKecakapan manusia :: EstimasiEstimasi,, IntuisiIntuisi,,kreativitaskreativitas,, adaptasiadaptasi,, kesadaran serempakkesadaran serempak,,pengolahanpengolahan abnormal, memoryabnormal, memory asosiatifasosiatif,,pengambilan keputusanpengambilan keputusan nonnon deterministikdeterministik,,pengenalan polapengenalan pola,, pengetahuan duniapengetahuan dunia,,kesalahan manusiawikesalahan manusiawi

Kecakapan komputerKecakapan komputer :: Kalkulasi akuratKalkulasi akurat,,deduksi logikadeduksi logika,, aktivitas perulanganaktivitas perulangan,,konsistensikonsistensi, multitasking,, multitasking,Pengolahan rutinPengolahan rutin,,penyimpanan dan pengambilan kembalipenyimpanan dan pengambilan kembali,,pengambilan keputusanpengambilan keputusan nonnon deterministikdeterministik,,pengolahanpengolahan data,data, pengetahuan dominanpengetahuan dominan,,bebas dari kesalahanbebas dari kesalahan

(P.(P. InsapInsap SS))

Let humans do what humans do Let humans do what humans do well and let computers do what well and let computers do what computers do wellcomputers do well

Human and Computer Human and Computer CapabilityCapability

ErgonomicErgonomic(( Faktor kenyamanan kerjaFaktor kenyamanan kerja ))

AspekAspek--aspek pentingaspek penting ::Stasion kerjaStasion kerja•• Aspek penggunaan Aspek penggunaan

stasion kerjastasion kerja :: Lingkungan Lingkungan kerjakerja,, Durasi kerjaDurasi kerja,, Tipe Tipe kerjaankerjaan,, Beban psikologiBeban psikologi

•• Aspek kesehatanAspek kesehatan :: BebanBebanvisual,visual, beban ototbeban otot,, beban beban postur tubuhpostur tubuh,, beban beban tekanantekanan mentalmental

•• Tipe kerjaanTipe kerjaan ::-- Pekerjaan pemasukanPekerjaan pemasukan

datadata-- Pekerjaan akuisisiPekerjaan akuisisi datadata-- Pekerjaan interaktifPekerjaan interaktif-- Pekerjaan pengolahanPekerjaan pengolahan

datadata

PencahayaanPencahayaanMasalah utamaMasalah utama :: kilau di depan layar kilau di depan layar Mengontrol sumber cahayaMengontrol sumber cahaya yangyang adaadaKeseimbangan cahaya layar dan Keseimbangan cahaya layar dan sekitarsekitar

Suhu dan Kualitas UdaraSuhu dan Kualitas UdaraSuhu perangkat komputerSuhu perangkat komputerFasilitas pengontrol suhuFasilitas pengontrol suhu

Gangguan SuaraGangguan SuaraKesehatan dan Keamanan KerjaKesehatan dan Keamanan Kerja

Kondisi kesehatan berKondisi kesehatan ber--resikoresiko :: radang radang persendianpersendian, diabetes,, diabetes, darah tinggidarah tinggi, , stress,stress, merokokmerokok,, kehamilankehamilan,,……

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.

r

cara

sehat

DialoqueDialoque StyleStyle((RagamRagam Dialog)Dialog)

YaituYaitu ::

RagamRagam dialog :dialog :oo DialogDialog berbasis perintah tunggalberbasis perintah tunggaloo DialogDialog berbasis bahasa berbasis bahasa

pemrogramanpemrogramanoo InterfaceInterface berbasis bahasa alamiberbasis bahasa alamioo SistemSistem menumenu

MenuMenu DatarDatar :: Selektor pilihanSelektor pilihan,,penggunaan tanda terangpenggunaan tanda terangMenuMenu tariktarik : status, shortcut: status, shortcut

oo DialogDialog berbasis pengisianberbasis pengisian formformoo InterfaceInterface berbasisberbasis iconiconoo Sistem penjendelaanSistem penjendelaan

JendelaJendela TTYTTYTimeTime MulitplexedMulitplexed WindowsWindowsSpaceSpace MuliplexedMuliplexed WindowsWindows

oo Manipulasi langsungManipulasi langsungoo InterfaceInterface interaksi berbasis grafisinteraksi berbasis grafisoo InterfaceInterface interaksi berbasis suarainteraksi berbasis suara

Kualitas ragamKualitas ragam dialogdialogdapat dilihatdapat dilihat berdasarkan berdasarkan kriteria berikutkriteria berikut ::

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

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

Question

Aspek PemrogramanAspek Pemrograman

Type InterfaceType Interface dan dan PemrogramannyaPemrogramannya ::

InterfaceInterface berbasisberbasis texttextInterfaceInterface berbasis grafisberbasis grafis ::

GrafisGrafis DOSDOSGrafisGrafis WindowsWindows

InterfaceInterface berbasisberbasis texttext-- ContohContoh ::

Masukkan angka pertama:5Masukkan angka kedua :3

Hasil penjumlahannya : 8

Ingin hitung lagi ? [Y,T]:T

Implementasi dalamImplementasi dalam Pascal : ?Pascal : ?

-- ToolsTools pada pemrograman xbasepada pemrograman xbase (dbase(dbasecscs),), TurboVisionTurboVision,,……

InterfaceInterface berbasis grafisberbasis grafis –– DOS :DOS :-- MembutuhkanMembutuhkan library/driverlibrary/driver tertentu untuk tertentu untuk

menjalankan fungsi perubahanmenjalankan fungsi perubahan modemodelayarlayar,, contohcontoh Borland International CorpBorland International Corpmenyediakanmenyediakan library BGI (Borlandlibrary BGI (Borland GrafisGrafisInterface)Interface)

-- Membutuhkan prosedur khusus untuk Membutuhkan prosedur khusus untuk penggunaan dan manipulasi operasi penggunaan dan manipulasi operasi perangkatperangkat inputinput grafisgrafis ((yaituyaitu mouse)mouse)

InterfaceInterface berbasis grafisberbasis grafis –– WINDOWS :WINDOWS :Pemrograman grafisPemrograman grafis –– windowswindows dapat dapat dilakukan dengandilakukan dengan 22 caracara ::1.1.PemrogramanPemrograman windows non visualwindows non visual2.2.PemrogramanPemrograman windowswindows dengandengan visual visual --

ToolsTools

PembangunPembangun InterfaceInterface padapada VisualVisual--ToolsTools

PemrogramanPemrograman visual (tool)visual (tool)menyediakan berbagai elemen menyediakan berbagai elemen sebagai dasar pembangunsebagai dasar pembangun interfaceinterfacegrafisgrafis.. Elemen tersebut disediakanElemen tersebut disediakanbuiltbuilt--inin dandan non programming non programming code.code. Secara teknisSecara teknis tooltool semacam semacam ini dimungkinkan dengan pengini dimungkinkan dengan peng--implementasimplementas--ianian OOP.OOP.Ada beberapa cara mengelompokAda beberapa cara mengelompok--kan elemenkan elemen--elemenelemen visualvisual tersebuttersebut((selanjutnya disebut komponenselanjutnya disebut komponen),),misalnya salah satu dengan misalnya salah satu dengan pengelompokan seperti berikutpengelompokan seperti berikut ::

--KomponenKomponen InputInput--KomponenKomponen outputoutput--Komponen tombolKomponen tombol--Komponen PengKomponen Peng--groupgroup--Komponen penghubungKomponen penghubung datadata--KomponenKomponen menumenu--KomponenKomponen imageimage--…………

KomponenKomponen inputinput : Edit (: Edit (TextBoxTextBox),),CheckBoxCheckBox,, RadioButtonRadioButton((OptionButtonOptionButton),),ComboBoxComboBox,, ScrollBarScrollBar, , ……KomponenKomponen outputoutput : Label, Memo,: Label, Memo,……Komponen tombolKomponen tombol : Button : Button (Command),(Command),……Komponen PengKomponen Peng--groupgroup ::GroupBoxGroupBox(Frame) , (Frame) , Panel,Panel,TabControlTabControl((SSTabSSTab,,TabStripTabStrip),Frame ),Frame ……Komponen penghubungKomponen penghubung datadata :: Table Table (Data,(Data,AdoxAdox),),……KomponenKomponen menu menu :: MainMenuMainMenu,,PopupMenuPopupMenu,,KomponenKomponen imageimage : Image, : Image, ……

FormForm adalah komponen utama tempat adalah komponen utama tempat semua komponensemua komponen lainlain diletakkandiletakkanSebagai konsekuensi implementasiSebagai konsekuensi implementasi OOPOOPmaka setiap komponen memilikimaka setiap komponen memiliki : : Property, EventProperty, Event dandan MethodMethod

Petunjuk PerancanganPetunjuk Perancangan Interface (GUI)Interface (GUI)

SecaraSecara non formalnon formal kriteriakriteriainterface yanginterface yang baik adalahbaik adalah ::mudah digunakan mudah digunakan dandan menarikmenarik

PerancangPerancang interface yanginterface yangprofesional biasanya profesional biasanya akan akan mendokumentasikanmendokumentasikan semua semua pekerjaanpekerjaan yangyang ia lakukania lakukan..Dengan dokumentasiDengan dokumentasi yangyangbaik ia dapat mengubah baik ia dapat mengubah rancangannya apabila terjadi rancangannya apabila terjadi perubahan atau apabila perubahan atau apabila menurutnya terdapat menurutnya terdapat rancanganrancangan yangyang tidak mudah tidak mudah untuk diwujudkanuntuk diwujudkan

Dokumentasi rancangan dapat Dokumentasi rancangan dapat dilakukan dengan caradilakukan dengan cara ::

Membuat sketsa pada kertasMembuat sketsa pada kertas aaMenggunakan pirantiMenggunakan piranti prototype GUIprototype GUIMenuliskan tekstualMenuliskan tekstual,, menjelaskan menjelaskan kaitan antara satu jendela dengan kaitan antara satu jendela dengan jendelajendela yang lain yang lain aaMenggunakan pirantin bantuMenggunakan pirantin bantu CASE CASE (Computer(Computer--Aided Software Aided Software Engineering)Engineering)

Special purpose softwareSpecial purpose softwaremenggunamengguna--kan metodakan metoda useruser-- center center design approachdesign approach, General purpose , General purpose softwaresoftware biasanya menyediakan biasanya menyediakan fasilitasfasilitas customizationcustomization..

Piranti bantu perancanganPiranti bantu perancangan ::Screen design work sheetScreen design work sheetScreen 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 tampilanyang 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

ContohContoh : : Screen design work sheetScreen design work sheet

ContohContoh : Screen semantic net: Screen semantic net

T1

T2

T3

T4

T5T6

T7

Esc

Esc

Esc

Exit

Exit

Exit

Alt-XAlt-S

Selesai

Cetak

Alt-Q

SimpanAlt-E

LoopContoh piranti perancanganContoh piranti perancangan ::

Contoh Flow diagram :

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

GUI Design StudioGUI Design Studio

http://www.carettasoftware.com/

http://www.carettasoftware.com/gds/index.html

ShackelShackel(1990)(1990) mengajukan mengajukan formalisasi kriteria perancanganformalisasi kriteria perancanganinterfaceinterface dengan istilahdengan istilah : : UsabilityUsabilitymenggantikan istilahmenggantikan istilah useruser--friendly friendly yangyang menurutnya sukar untuk diukurmenurutnya sukar untuk diukur

AdaAda 44 aspek padaaspek pada usability :usability :

EffectivenessEffectiveness,, seberapa efektif seberapa efektif unjuk kerja pekerjaan terbantukan unjuk kerja pekerjaan terbantukan dengandengan interfaceinterface tersebuttersebut

LearnabilityLearnability,, berapaberapa lamalama pelatihan pelatihan dibutuhkan untuk dapat dibutuhkan untuk dapat menggunakanmenggunakan interfaceinterface tersebut tersebut secara efektivesecara efektive

FlexibilityFlexibility,, jika ada perubahan jika ada perubahan pekerjaan seberapa efektivepekerjaan seberapa efektive interfaceinterfacemasih bisa digunakanmasih bisa digunakan

AttiudeAttiude,, apakahapakah user yanguser yangmenggunakanmenggunakan interfaceinterface tersebut tersebut menjadi cepat lelah atau frustasi atau menjadi cepat lelah atau frustasi atau justru menjadi tambah semangatjustru menjadi tambah semangat

Shackel juga menekankan pentingnya Shackel juga menekankan pentingnya pendekatanpendekatan UserUser--centeredcentereddibandingkandibandingkan SystemSystem--centeredcentered

……Lanjutan PetunjukLanjutan Petunjuk GUIGUI

GUI Design

Define users andUsebility

Requirements

Model User Objects

Model User Task

Define Style

Guide

Design GUI

Prototype GUI

Evaluate GUI

SmithSmith dandan Mosier (1986)Mosier (1986)menyarankanmenyarankan 5 high5 high--level objectiveslevel objectivesuntuk perancangan tampilanuntuk perancangan tampilan ::

1.1. Consistency of data displayConsistency of data display

2.2. Efficient information assimilation by the userEfficient information assimilation by the user

3.3. Minimal memory load on userMinimal memory load on user

4.4. Compatibility of data displayCompatibility of data display

5.5. Flexibility of user controlFlexibility of user control of data displayof data display

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

•• Be consistent inBe consistent in labellinglabelling and graphic and graphic conventionconvention

•• Standardize abbreviationStandardize abbreviation

•• Use consistent format in all displaysUse consistent format in all displays

•• Present a page number on each display page Present a page number on each display page Present data only if they assist the Present data only if they assist the operatoroperator

•• Present Information GraphicallyPresent Information Graphically

•• Present digital value only when necessaryPresent digital value only when necessary

•• Use highUse high--level resolution monitorslevel resolution monitors

•• Design a display inDesign a display in monochrommaticmonochrommatic formform

•• Involve operators in theInvolve operators in the depelopmentdepelopment of new of new displaydisplay

Important Issue : Important Issue : Should user interface be copy rightShould user interface be copy right

MasalahMasalah Response TimeResponse Time dandan Display Display raterate

PetunjukPetunjuk ::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 response timeUsers change usage profile with response time

Shorter response time lead to short userShorter response time lead to short user thenkthenktimestimes

Response time should be appropriate to the Response time should be appropriate to the tasktask

……Lanjutan PetunjukLanjutan Petunjuk GUIGUI

Dialog Dialog Style Analys: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 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

Dialog Style

Use

r Pr

ofile Ps

ycho

logy

Kno

wle

dge

& E

xper

ienc

e


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- Motivation Low- Typing skill High- System Experience Low- Task Experience High- App. Experience Low- Use of other systems Infrequent- Computer literacy Low- Freq. of use Low- Primary training None- System use Discretionary- Turnover use High

Example of User CharacteristicsExample of User Characteristics

Identifying appropriate dialog style








Use of Other Syst



Dialog Style

Use

r Pr

ofile Ps

ycho

logy

Kno

wle

dge

& E

xper

ienc

e



Primary Training


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








Use of Other Syst



Use

r Pr

ofile

Psyc

holo

gyK

now

ledg

e &

Exp

erie

nce



Primary Training


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

User Interface Guidelines for User Interface Guidelines for Web PublishingWeb Publishing

Aturan Navigasi :Aturan Navigasi :

1.1. Buat signature unik (grafik atau logo) di Buat signature unik (grafik atau logo) di atas page. atas page. Untuk memberitahukan user apakah Untuk memberitahukan user apakah mereka masih di dalam situs atau sudah mereka masih di dalam situs atau sudah keluar. keluar.

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

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

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

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

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

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

NavigationNavigation

1.1. Jika harus menggunakan tombol Jika harus menggunakan tombol grafik untuk navigasi, sebaiknya grafik untuk navigasi, sebaiknya labelnya berulang (sama) labelnya berulang (sama)

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

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

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

judul page. 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, sediakan Pada dokumen banyak, sediakan

header header 9.9. Pertimbangkan menduplikat header Pertimbangkan menduplikat header

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

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

1.1. NavigasiNavigasi MenuMenuAdalah navigasi utama untukAdalah navigasi utama untuk user.user. PadaPadamenumenu utama semuautama semua item menuitem menu harus harus digarisbawahidigarisbawahi.. JikaJika useruser memilihmemilih menu,menu,makamaka menumenu tsbtsb highlightedhighlighted

2.2. NavigasiNavigasi Sub MenuSub MenuSetelah memilihSetelah memilih menu,menu, makamaka levellevelselanjutnya dipresentasikan dalamselanjutnya dipresentasikan dalam boxboxwarna untuk membedakanwarna untuk membedakan item yangitem yangdigarisbawahidigarisbawahi.. Misal jika ukuranMisal jika ukuran fontfontadalahadalah 12 pixel.12 pixel. JikaJika texttext berwarna putihberwarna putih,,dandan backgroundbackground gelap makagelap maka fontfontditebalkanditebalkan.. Selain itu berarti biasaSelain itu berarti biasa,, dengan dengan teks gelapteks gelap backgroundbackground putihputih.. Teks awal Teks awal harus berjarakharus berjarak 4 pixel4 pixel dari atas dan kiridari atas dan kiri..PadaPada boxbox pertamapertama yangyang diatas harus diberi diatas harus diberi garis dibawahgaris dibawah item.item. DisampingDisamping boxbox ditaruhditaruhimage (image (biasanyabiasanya gif)gif) untuk merealisasikan untuk merealisasikan spasispasi..

3.3. Navigasi dalam situs bisnis Navigasi dalam situs bisnis 4.4. NavigasiNavigasi item yang generalitem yang general

ElemenElemen--elemen umum navigasi diletakkanelemen umum navigasi diletakkan

di bawahdi bawah menumenu navigasinavigasi.. Terdiri atasTerdiri atas link yanglink yangtertuju ketertuju ke home,home, peta situs sendiripeta situs sendiri,, kontakkontakperson, pageperson, page sesudahnyasesudahnya,, tombol kembalitombol kembali(optional)(optional) dandan linklink ke ataske atas page.page. Tombol ke Tombol ke atasatas page,page, biasanya diletakkan dibawah tiapbiasanya diletakkan dibawah tiappage.page. Tombol ini tidak bisa dieditTombol ini tidak bisa diedit user. user.

Human Computer Interface Guidelines :Human Computer Interface Guidelines :

UserUser dapat kehilangan arah di sistemdapat kehilangan arah di sistem yangyangterlalu komplekterlalu komplek.. MakaMaka useruser harus mengetahui harus mengetahui dimana dia beradadimana dia berada,, apaapa yangyang bisa bisa dilakukannyadilakukannya,, dan bagaimana ia dapat keluardan bagaimana ia dapat keluar..Maka orientasi sistem adalahMaka orientasi sistem adalah ::

1.1. Berikan layar danBerikan layar dan windowwindow dengan dengan deskripsi judulnyadeskripsi judulnya,, ditaruh di lokasiditaruh di lokasiyangyang konsistenkonsisten..

2.2. Sediakan isyarat untuk mengidentifikaiSediakan isyarat untuk mengidentifikaipagepage saat ini dansaat ini dan totaltotal dari seluruhdari seluruhpage.page.

3.3. Tunjukkan peta situs untuk menunjukan Tunjukkan peta situs untuk menunjukan dimanadimana useruser beradaberada..

ElemenElemen--elemen navigasielemen navigasi

Menghadapi kemungkinan aksiMenghadapi kemungkinan aksi user :user :

1.1. SediakanSediakan listlist dari pilihandari pilihan--pilihanpilihancontrol,control, melayanimelayani home basehome base atauataustarting point yangstarting point yang konsisten untuk konsisten untuk kontrolkontrol entries.entries.

2.2. Tunjukkan pilihanTunjukkan pilihan--pilihan transaksipilihan transaksiyangyang mungkin tgerjadi mungkin tgerjadi

3.3. BuatBuat menu yangmenu yang aplikabel dan pilihan aplikabel dan pilihan kontrolkontrol yangyang availabel untukavailabel untuk useruser di di setiap waktu setiap waktu

4.4. Sediakan fungsi batalSediakan fungsi batal,, interup dan interup dan kontinuekontinue..

Bedakan antaraBedakan antara file yangfile yang bisa diedit denganbisa diedit denganfile yangfile yang tidak bisa diedittidak bisa diedit..

Petunjuk perancanganPetunjuk perancangan interface interface WEBWEB untuk kebutuhanuntuk kebutuhanCustomerCustomer EE--CommerseCommerse ::

InterfaceInterface padapada EE--Commerse bagiCommerse bagi customercustomeradalah repsentasiadalah repsentasi virtualvirtual dari perusahaan dari perusahaan bisnis tersebutbisnis tersebut..

77 elemenelemen yangyang menjadi pertimbangan menjadi pertimbangan dalamdalam menmen--desaindesain interface Customer Einterface Customer E--CommerseCommerse ::

11 Context : SContext : Siteite’’s layout and designs layout and design22 Content :Content : Text, pictures, sound Text, pictures, sound

and video that web pages contain and video that web pages contain 33 Community :Community : The ways sites The ways sites

enable userenable user--toto--user user 44 Communication :Communication :That ways sites That ways sites

enable siteenable site--to user communication to user communication or twoor two--way communicationway communication

55 Customization :Customization : SiteSite’’s ability to s ability to selfself--tailor to different users or to tailor to different users or to allow users to personalize the siteallow users to personalize the site

66 Connection : Connection : Degree site is linked Degree site is linked to other sitesto other sites

77 CommerseCommerse : : SiteSite’’s capabilities to s capabilities to enable commercial transactionsenable commercial transactions

Aksi user

Context

Commerse

Connection

Content

Community

Customization

Communication

Amazon.comAmazon.com ::

MasalahMasalah yangyang masih hangatmasih hangat

CoordinatCoordinat WindowsWindows

Windows 3DWindows 3D

Virtual RealityVirtual Reality

Printed Manuals, Online help and TutorialPrinted Manuals, Online help and Tutorial

PenggunaanPenggunaan HypertextHypertext dandan HypermediaHypermedia

Searching Interface Searching Interface

Cooperative WorkCooperative Work

Kode Etik dan Dampak SosialKode Etik dan Dampak Sosial HCIHCI

RisetRiset--riset Terbaru di bidang HCI :riset Terbaru di bidang HCI :

- Adaptive Brain Interfaces (ABI)

- Arsitektur -

- Volumetric Displays

-- VoiceXMLVoiceXML

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 TugasLatihan dan Tugas1.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 andaimplementasinya ke depan !

5. Beri penilaian terhadap interface dari sebuah aplikasi berikut dan modifikasi berdasarkan kritik anda :

Modifikasi

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.

d.c.

apa itu interaksi manusia dan - airlangit.files.wordpress.com · interaksi manusia dan komputer ......

Documents