Download - Interaksi Manusia dan Komputer – part 9
![Page 1: Interaksi Manusia dan Komputer – part 9](https://reader036.vdocuments.pub/reader036/viewer/2022062301/568133c7550346895d9ac1aa/html5/thumbnails/1.jpg)
INTE
RAKSI MANUSIA
DAN
KOMPU
TER –
PART
9
DA
NN
Y K
RI E
ST A
NT
O,
S. K
OM
. , M
. EN
G
![Page 2: Interaksi Manusia dan Komputer – part 9](https://reader036.vdocuments.pub/reader036/viewer/2022062301/568133c7550346895d9ac1aa/html5/thumbnails/2.jpg)
USER MODEL
Merupakan bagian dari IMK yang mendeskripsikan tentang proses pembuatan dan modifikasi sebuah model pengguna.
Tujuan utamanya : menkustomisasi dan mengadaptasi sistem yang sesuai dengan kebutuhan pengguna
Merepresentasikan koleksi data personal yang diasosiasikan dengan pengguna tertentu.
![Page 3: Interaksi Manusia dan Komputer – part 9](https://reader036.vdocuments.pub/reader036/viewer/2022062301/568133c7550346895d9ac1aa/html5/thumbnails/3.jpg)
USER MODEL
1. User Requirement Modela. Socio-technical Model => mewakili manusia dan
persyaratan teknis
b. Soft System Methodology => memperhatikan permasalahan di sekitar manusia dan organisasi
c. Participatory Design => menyatukan user dengan proses desain
d. Cognitive Model => mempresentasikan sistem interaktif pengguna
![Page 4: Interaksi Manusia dan Komputer – part 9](https://reader036.vdocuments.pub/reader036/viewer/2022062301/568133c7550346895d9ac1aa/html5/thumbnails/4.jpg)
USER MODEL
2.Cognitive Modela. Hierarchy Model => tugas dan tujuan user
b. Linguistic Model => tata bahasa user
c. Physical dan Device Model => keahlian manusia
d. Cognitive Architecture => mendasari semua yang ada di atas
![Page 5: Interaksi Manusia dan Komputer – part 9](https://reader036.vdocuments.pub/reader036/viewer/2022062301/568133c7550346895d9ac1aa/html5/thumbnails/5.jpg)
STRUKTUR IMK
![Page 6: Interaksi Manusia dan Komputer – part 9](https://reader036.vdocuments.pub/reader036/viewer/2022062301/568133c7550346895d9ac1aa/html5/thumbnails/6.jpg)
ASPEK KOGNITIF DESAIN
• Lazarus: kognitif bagus maka afektif menyusul
• Human factor engineering: desain mesin/teknologi yang mengakomodasi kemampuan kognitif/afektif manusia. Sebelum PD II, manusia menyesuaikan dengan mesin, setelah PD II sebaliknya
![Page 7: Interaksi Manusia dan Komputer – part 9](https://reader036.vdocuments.pub/reader036/viewer/2022062301/568133c7550346895d9ac1aa/html5/thumbnails/7.jpg)
PRINSIP PERANCANGAN
1. Buat model konseptual yang baik sehingga pengguna dapat memperkirakan akibat dari tindakan yang dilakukan
2. Buat segala sesuatunya terlihat oleh mata pengguna.
![Page 8: Interaksi Manusia dan Komputer – part 9](https://reader036.vdocuments.pub/reader036/viewer/2022062301/568133c7550346895d9ac1aa/html5/thumbnails/8.jpg)
PRINSIP SISTEMATIS
1.Terorganisasi Struktur konsep jelas dan konsisten
2.Ekonomis Sederhana, jelas, distinctive,
emphasis
3.Komunikatif Readability, typography, symbolism
![Page 9: Interaksi Manusia dan Komputer – part 9](https://reader036.vdocuments.pub/reader036/viewer/2022062301/568133c7550346895d9ac1aa/html5/thumbnails/9.jpg)
FAKTOR YANG MEMPENGARUHI INTERAKSI TERHADAP SITUS• Content
• Seni
• Desain
• Navigasi
• Kecepatan Transfer
Nama yang paling berpengaruh?
![Page 10: Interaksi Manusia dan Komputer – part 9](https://reader036.vdocuments.pub/reader036/viewer/2022062301/568133c7550346895d9ac1aa/html5/thumbnails/10.jpg)
KOGNITIF PENGLIHATAN (WICKENS, 1992)• Perhatian Selektif • Keterbatasan memilih: Fovea => Pursuit (kontinue
ataupun saccadic) => Fixasi
• Pemrosesan Paralel • Keterbatasan fokus• Baik bila opsional buruk jika mandatory• Tahap preatensi dan focal attention
• Visual Momentum • Keterbatasan membagi perhatian• Simbol dapat membingungkan jika tidak konsisten
![Page 11: Interaksi Manusia dan Komputer – part 9](https://reader036.vdocuments.pub/reader036/viewer/2022062301/568133c7550346895d9ac1aa/html5/thumbnails/11.jpg)
SOLUSI KOGNITIF
Terhadap keterbatasan perhatian dalam penglihatan;
• Keterbatasan memilih => strukturisasi informasi 2 dimensi
• Keterbatasan berfokus => penekanan (highlighting)
• Keterbatasan membagi perhatian => Navigasi
![Page 12: Interaksi Manusia dan Komputer – part 9](https://reader036.vdocuments.pub/reader036/viewer/2022062301/568133c7550346895d9ac1aa/html5/thumbnails/12.jpg)
STRUKTURISASI INFORMASI
1. Kepadatan:•Pada layar 80 x 24 karakter, kepadatan ideal 25% - 40%.•Semakin padat semakin lama waktu pencarian• Jarak spasi antar baris dan kolom•Kata kurang penting minimal•Font menyenangkan•Kalimat pendek tetapi jelas
![Page 13: Interaksi Manusia dan Komputer – part 9](https://reader036.vdocuments.pub/reader036/viewer/2022062301/568133c7550346895d9ac1aa/html5/thumbnails/13.jpg)
2. Pengelompokan•Column wise lebih baik daripada row wise (Wolf dalam Sanders, 1993).•Utk 80x24, lebar max 14 karakter, tinggi 7 baris•Pola pencarian user biasanya dimulai dari pojok kiri atas
3. Variasi Kode
STRUKTURISASI INFORMASI
![Page 14: Interaksi Manusia dan Komputer – part 9](https://reader036.vdocuments.pub/reader036/viewer/2022062301/568133c7550346895d9ac1aa/html5/thumbnails/14.jpg)
STRUKTURISASI INFORMASI
• Pola informasi di layar mudah diprediksi
• Gambar 3 dimensi lebih mudah dipersepsi daripada 2 dimensi
• Jumlah warna max 5 macam
• Tata letak model ekologis lebih mudah dipersepsi daripada administratif
• Kombinasi pola, warna sederhana.
• Dapat diterima user/reader (affordance)
• Causality dapat diterima
![Page 15: Interaksi Manusia dan Komputer – part 9](https://reader036.vdocuments.pub/reader036/viewer/2022062301/568133c7550346895d9ac1aa/html5/thumbnails/15.jpg)
STRUKTURISASI INFORMASI
• Sebisa mungkin saling menjelaskan
• Komunikatif : readable, typography, symbolism
• Konsisten internal dan external
• Ada logical sequencing
• Spaciousness
• Relevance
• Simplicity
• Consistency
![Page 16: Interaksi Manusia dan Komputer – part 9](https://reader036.vdocuments.pub/reader036/viewer/2022062301/568133c7550346895d9ac1aa/html5/thumbnails/16.jpg)
HIGHLIGHTING
Pemilihan kode Verbal :
(+) cocok untuk menampilkan informasi yang volume besar. (-) Lebih lama dan lebih sulit dibaca
Simbol (+) Cepat dibaca. (+) Sesuai untuk menampilkan informasi volume kecil (-) Gambar dan makna harus sesuai (-) Simbolo di suatu budaya belum tentu sama maknanya di
budaya lain (-) Bila simbolnya banyak, sulit dibedakan
![Page 17: Interaksi Manusia dan Komputer – part 9](https://reader036.vdocuments.pub/reader036/viewer/2022062301/568133c7550346895d9ac1aa/html5/thumbnails/17.jpg)
HIGHLIGHTING
• Verbal• Ukuran, penebalan, warna, font
• Pembuatan kode • Warna : manusia bisa menerima 9 macam, saran max
5 saja, tak ekstrim, nyaman dipandang, memperjelas informasi• Warna dapat dihubungkan dengan emosi (merah :
marah, hijau : aman, pink : cinta dll). Penggunaan warna yang salah malahan akan membingungkan pengguna.• Jenis warna lebih kuat efeknya daripada
pencahayaan.• Bentuk geometris : orang bisa 15 macam, saran max
5 macam, sudah dikenal orang, sesuai isinya (match), disukai orang
![Page 18: Interaksi Manusia dan Komputer – part 9](https://reader036.vdocuments.pub/reader036/viewer/2022062301/568133c7550346895d9ac1aa/html5/thumbnails/18.jpg)
HIGHLIGHTING
• Pembuatan kode simbol (lanjutan)• Inklinasi sudut : org bisa 24 macam, saran max 12 macam• Kecerahan/brightness : org bisa 4 macam, saran sebaiknya 2 macam saja• Kombinasi : tulisan gelap, latar belakang cerah : lebih baik• Population stereotype, budaya satu bisa berbeda dgn yg lain• Pertimbangkan mental model orang• Ekonomis : sederhana, jelas, distinctive.
![Page 19: Interaksi Manusia dan Komputer – part 9](https://reader036.vdocuments.pub/reader036/viewer/2022062301/568133c7550346895d9ac1aa/html5/thumbnails/19.jpg)
NAVIGASI
• Alat navigasi•Simbol dikenal/umum di masyarakat•Simbol ditampilkan menyolok•Simbol navigasi tidak berubah-ubah/konsisten•Kompatibel, sesuai dengan yang disimbolkan
![Page 20: Interaksi Manusia dan Komputer – part 9](https://reader036.vdocuments.pub/reader036/viewer/2022062301/568133c7550346895d9ac1aa/html5/thumbnails/20.jpg)
NAVIGASI
• Proses navigasi•Manipulasi dilakukan secara fisik bukan secara verbal. Metafora spasial sangat efektif.• Proses transisi bertahap• Sebisa mungkin ada umpan balik (tanda bahwa proses sedang berjalan)•Response time pendek, max 10 detik.• Selalu dapat dikembalikan ke posisi semula menghindari disorientasi posisi.
![Page 21: Interaksi Manusia dan Komputer – part 9](https://reader036.vdocuments.pub/reader036/viewer/2022062301/568133c7550346895d9ac1aa/html5/thumbnails/21.jpg)
NAVIGASI
• Representasi bentuk simbol kontinyu dan konsisten.• Posisi, warna, ukuran, kecerahan, kompatibilitas gerakan
alat navigasi kontinyu dan konsisten.
• Hypertext dan scrolling• Hypertext : (+) lebih cepat (-) mudah mengakibatkan
disorientasi• Scrolling : (+) lebih sederhana (-) waktu lama
• Pertimbangkan mental model
• Konsisten internal dan external
• Ada error handling
• Response time < 2 detik ok
![Page 22: Interaksi Manusia dan Komputer – part 9](https://reader036.vdocuments.pub/reader036/viewer/2022062301/568133c7550346895d9ac1aa/html5/thumbnails/22.jpg)
RESPONS TIME (DOWNTOWN, 1991)
• > 15 detik : user akan memperhatikan hal lain
• > 10 detik, pengguna internet akan lari
• > 4 detik jelek terhadap stimulus, sebaiknya dihindari
• > 2 detik akan butuh konsentrasi tinggi
• < 2 detik: Ok
![Page 23: Interaksi Manusia dan Komputer – part 9](https://reader036.vdocuments.pub/reader036/viewer/2022062301/568133c7550346895d9ac1aa/html5/thumbnails/23.jpg)
PRINSIP PERANCANGAN BERDASARKAN FAKTOR KOGNITIFA. Affordances
B. Causality
C. Visible Constraints
D. Mapping
E. Transfer Effects
F. Population Stereotypes
![Page 24: Interaksi Manusia dan Komputer – part 9](https://reader036.vdocuments.pub/reader036/viewer/2022062301/568133c7550346895d9ac1aa/html5/thumbnails/24.jpg)
A. AFFORDANCES
• Sifat dasar dan yang dapat dirasakan suatu obyek harus menggambarkan bagaimana obyek bekerja.
• Kemunculan suatu obyek mengindikasikan bagaimana seharusnya obyek digunakan. Misal, kursi untuk duduk, meja untuk meletakkan sesuatu di atasnya, tombol untuk ditekan.
![Page 25: Interaksi Manusia dan Komputer – part 9](https://reader036.vdocuments.pub/reader036/viewer/2022062301/568133c7550346895d9ac1aa/html5/thumbnails/25.jpg)
![Page 26: Interaksi Manusia dan Komputer – part 9](https://reader036.vdocuments.pub/reader036/viewer/2022062301/568133c7550346895d9ac1aa/html5/thumbnails/26.jpg)
B. CAUSALITY
• Sesuatu yang terjadi segera setelah suatu tindakan, sehingga dianggap tindakan tersebut sebagai penyebabnya.
• Causality yang tidak benar: menjalankan suatu aplikasi yang belum dikenal sebelum komputer rusak, akan menyebabkan komputer sering rusak
• Efek yang tidak terlihat: perintah yang hasilnya tidak jelas kelihatan sering diulangi berkali-kali (misal meng-klik mouse untuk mengaktifkan menu pada sistem yang sedang hang/tidak menanggapi)
• Prinsip perancangan:• Menyediakan umpan balik yang jelas, berorientasi pada
konteks dan dapat dipahami setelah melakukan suatu tindakan.
![Page 27: Interaksi Manusia dan Komputer – part 9](https://reader036.vdocuments.pub/reader036/viewer/2022062301/568133c7550346895d9ac1aa/html5/thumbnails/27.jpg)
C. VISIBLE CONSTRAINTS (BATASAN)
• Batasan jumlah tindakan yang mungkin diperoleh dari kemunculan obyek (look and feel)
• Prinsip Perancangan•Perluas rentang batasan peluang•Fasilitasi pengguna dengan peluang yang mungkin berdasarkan konteks-nya
![Page 28: Interaksi Manusia dan Komputer – part 9](https://reader036.vdocuments.pub/reader036/viewer/2022062301/568133c7550346895d9ac1aa/html5/thumbnails/28.jpg)
D. MAPPING
• Mendefinisikan himpunan relasi yang mungkin di antara obyek
• Prinsip Perancangan•Membuat relasi alami antar obyek dapat terlihat•Mengelompokkan dan mengorganisir obyek yang berhubungan dalam container•Containers harus mempunyai label
![Page 29: Interaksi Manusia dan Komputer – part 9](https://reader036.vdocuments.pub/reader036/viewer/2022062301/568133c7550346895d9ac1aa/html5/thumbnails/29.jpg)
CONTOH: PREHISTORIC STOVE
1. Hubungan yang terlihat antara kompor dan tombol kontrol
2. Penyebab dan efek: putar tombol ke kiri untuk mematikan kompor
![Page 30: Interaksi Manusia dan Komputer – part 9](https://reader036.vdocuments.pub/reader036/viewer/2022062301/568133c7550346895d9ac1aa/html5/thumbnails/30.jpg)
E. TRANSFER EFFECTS
• Orang akan mentransfer pelajaran / ekspektasi dari obyek yang sama
• Positive transfer – pelajaran sebelumnya dapat diterapkan pada situasi yang baru
• Negative transfer – pelajaran sebelumnya berbeda dengan situasi yang baru
• Prinsip perancangan:• Pertimbangkan pengalaman pengguna sebelumnya
dalam perancangan serta kemampuannya dalam belajar (perancangan pengalaman pengguna)
![Page 31: Interaksi Manusia dan Komputer – part 9](https://reader036.vdocuments.pub/reader036/viewer/2022062301/568133c7550346895d9ac1aa/html5/thumbnails/31.jpg)
F. POPULATION STEREOTYPES
• Populasi belajar bahwa idioms berlaku dengan cara tertentu
• Merah berarti bahaya, dan hijau berarti aman
• Namun idioms dapat berbeda pada budaya yang berbeda!
• Sklar lampu: di Amerika kebawah untuk mematikan, di Inggris untuk menghidupkan
• Prinsip Perancangan:• Abaikan/ubah apa yang terlihat dan terasa sesuai
dengan hubungan stereotypes dan budaya (pengguna Macintosh vs Windows) • Mengubah budaya stereotypes sangat sulit
![Page 32: Interaksi Manusia dan Komputer – part 9](https://reader036.vdocuments.pub/reader036/viewer/2022062301/568133c7550346895d9ac1aa/html5/thumbnails/32.jpg)
MENTAL MODEL
• Orang mempunyai model mental tentang bagaimana suatu obyek bekerja
• Model memungkinkan orang membayangkan/mensimulasikan operasi dari suatu piranti.
• Antarmuka pengguna adalah suatu model konseptual – gambaran dunia nyata – dari model mental