Interaksi Manusia dan Komputer – part 9

1. Interaksi Manusia dan Komputer – part 9 Danny Kriestanto, S.Kom., M.Eng

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

3. User Model • User Requirement Model • Socio-technical Model => mewakili manusia dan persyaratan teknis • Soft System Methodology => memperhatikan permasalahan di sekitar manusia dan organisasi • Participatory Design => menyatukan user dengan proses desain • Cognitive Model => mempresentasikan sistem interaktif pengguna

4. User Model • Cognitive Model • Hierarchy Model => tugas dan tujuan user • Linguistic Model => tata bahasa user • Physical dan Device Model => keahlian manusia • Cognitive Architecture => mendasari semua yang ada di atas

5. Struktur IMK

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

7. Prinsip Perancangan • Buat model konseptual yang baik sehingga pengguna dapat memperkirakan akibat dari tindakan yang dilakukan • Buat segala sesuatunya terlihat oleh mata pengguna.

8. Prinsip Sistematis • Terorganisasi • Struktur konsep jelas dan konsisten • Ekonomis • Sederhana, jelas, distinctive, emphasis • Komunikatif • Readability, typography, symbolism

9. Faktor yang Mempengaruhi Interaksi terhadap Situs • Content • Seni • Desain • Navigasi • Kecepatan Transfer • Nama yang paling berpengaruh?

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

11. Solusi Kognitif • Terhadap keterbatasan perhatian dalam penglihatan; • Keterbatasan memilih => strukturisasi informasi 2 dimensi • Keterbatasan berfokus => penekanan (highlighting) • Keterbatasan membagi perhatian => Navigasi

12. Strukturisasi Informasi • 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

13. Strukturisasi Informasi • 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 • Variasi Kode

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

15. Strukturisasi Informasi • Sebisa mungkin saling menjelaskan • Komunikatif : readable, typography, symbolism • Konsisten internal dan external • Ada logical sequencing • Spaciousness • Relevance • Simplicity • Consistency

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

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

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

19. Navigasi • Alat navigasi • Simbol dikenal/umum di masyarakat • Simbol ditampilkan menyolok • Simbol navigasi tidak berubah-ubah/konsisten • Kompatibel, sesuai dengan yang disimbolkan

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

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

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

23. Prinsip Perancangan Berdasarkan Faktor Kognitif • Affordances • Causality • Visible Constraints • Mapping • Transfer Effects • Population Stereotypes

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

26. 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-klikmouse 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.

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

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

29. Contoh: Prehistoric Stove • Hubungan yang terlihat antara kompor dan tombol kontrol • Penyebab dan efek: putar tombol ke kiri untuk mematikan kompor

30. 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)

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

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