Faktor Manusia (Human Factor)
Human Computer Interaction User Interface Design Antarmuka
Kognisi Manusia ➲ ➲ ➲ ➲ ➲
Memori Perhatian (Atensi) Persepsi dan pengenalan Pembelajaran Pemecahan masalah dan reasoning
Model Memori Manusia Pengulangan
Sensasi
Sensori Memori
Pencocokan Pola/ Attensi
STM
Respon Output
LTM
Sensori Memori Sensory memory is memory that is first noticeable to the senses. The three different types of sensory memory are: ➲ Iconic Memory – for visual stimuli ➲ Echoic Memory – for auditory stimuli ➲ Haptic Memory – for touch stimuli Sensory memory mampu menyimpan sejumlah besar informasi selama durasi yang pendek, namun tidak punya kemampuan untuk memprosesnya. Iconic memory memiliki persistensi sekitar 0,2 detik. --> Dimanfaatkan dalam Animasi
STM-LTM ➲
Short-Term Memory (STM) ● ● ● ●
➲
Instan, untuk recall tidak perlu usaha yang besar Kapasitas sangat terbatas – “7 +- 2” “Chunking” Mudah sirna
Long-Term Memory (LTM) ● ● ● ●
Kapasitas “tak terbatas” Perlu waktu/usaha untuk menyimpan dan mengambil Pengambilan bersifat sensitif konteks rote memory (memorisasi lewat pembelajaran) vs. hubungan vs. penjelasan
Memori ➲
Manusia mudah untuk mengingat sesuatu ●
➲ ➲ ➲
Visual cues, khususnya wajah
Manusia lebih baik dalam mengenali (recognize) sesuatu daripada mengingatnya (recall) Manusia baik dalam pengingat asosiatif Manusia mengingat kasus umum dan tipikal
Karakteristik Fitur Sensori Entry Pre attentive Pemeliharaan Tidak mungkin Format
Apa adanya
Kapasitas Kehilangan
Besar Peluruhan
Duration
¼ to 10 sec
Retrieval Penggunaan
Readout Perluasan meja kerja
Short term memory Atensi Pengulangan terus menerus
Long term memory Pengulangan Pengulangan yang terorganisasi pada input (mnemonics) Phonemic Semantic, episodic, procedural Kecil (7+-2) unit Tak diketahui Tertimpa informasi baru Mungkin tidak pernah hilang Up to 30sec without Minutes, months, years continued rehearsal Automatic Retrieval cues Meja kerja Perpustakaan
Memori – Implikasi Desain ➲ ➲ ➲ ➲
➲
Jangan membuat pengguna mengingat prosedur-prosedur yang rumit Batasi jumlah item di menu Rancang antarmuka yang lebih mengutamakan pengenalan (recognition) daripada recall Berikan pengguna sumber daya untuk membantu mereka secara visual mengkodekan informasi (warna, icon, time stamps, etc.) Chunking ● ●
clustering, grouping, hirarki 031-592-2906, 08123.22.8251, 592 29 36
Perhatian (Atensi) ➲ ➲
Dari semua kemungkinan yang tersedia, memilih mana yang menjadi konsentrasi Scanning (pemindaian) visual atau auditory ● ●
➲
Visual: fokus pada satu objek tertentu, yang lain menjadi kabur (tidak penting); mencari objek Auditory: memilah suara dari noise/bising sekitar, dari suara-suara lain
Faktor-faktor yang memudahkan fokus pada hal yang tepat: ● ●
Penetapan tujuan Tampilan informasi
Atensi – Implikasi Desain ➲ ➲
➲
Informasi yang relevan dengan task yang sedang dikerjakan mesti menarik perhatian Teknik grafis seperti tata letak, urutan, organisasi, garis bawah, warna, animasi, dapat dimanfaatkan untuk mencapai tujuan ini Tetapi jangan lantas terlalu membumbui antarmuka: yang “biasa” (plain) saja mungkin lebih mudah dipakai
"Once you can remove no more, you are done." Japanese saying
Fokus Atensi
Eye input and mental image (simulated) Our eyes catch the light, but we see with our minds. In addition to this, each of our eyes has a “blind spot” where the optic nerve connects to the retina. It's up to our brain to “paint” the fine detail on peripheral areas and the blind spot (by combining the input from both eyes and recent visual memory).
Atensi – Contoh (1) ➲
Task adalah masukkan query “Eureka” ke dalam sebuah mesin pencarian (search engine).
➲
Perhatikan dua contoh antarmuka berikut yang mendukung pencarian dengan web; evaluasilah dari perspektif pengguna, apakah ia mampu memfokuskan di mana tempat ia akan memasukkkan query-nya.
Atensi – Contoh (2)
Atensi – Contoh (3)
Persepsi ➲ ➲ ➲
Memperoleh informasi dari lingkungan menggunakan indra-indra yang berbeda Hasil gabungan antara pengalaman internal yang dipicu dari event-event eksternal Penglihatan (visi) atau indra visual adalah indra dominan dari orang yang melek
Sulap Ilusi Mengalihkan atensi dengan mis-direksi (menuntun ke arah yang “salah”) Visi yang membangkitkan persepsi
Persepsi – Implikasi Desain ➲
Icon-icon mesti dirancang sedemikian rupa sehingga pengguna dapat membedakan/memilah makna-maknanya
➲
Suara mesti terdengar cukup jelas dan menjadi pembeda ● ●
➲
Suara selesai mengerjakan Suara kesalahan
Teks mesti terbaca dan dapat dibedakan dari latar ● ● ● ●
Ukuran Warna Letak Spasi
Persepsi - Contoh Tugas saya adalah membaca pesan-pesan baru dalam sebuah forum online
Icon-icon: maknanya jelas? Atensi: mudah untuk fokus pada hal yang tepat?
Pembelajaran ➲ ➲
Memperoleh pengetahuan atau ketrampilan baru Exploratory learning – learning by doing
Learning – Design Implications ➲
Create interfaces that encourage exploration ● ●
Easy to try out and undo actions Users are not afraid to make mistakes, to try ●
➲ ➲
System does not complain or get angry, instead guide
Design interfaces that constrain and guide users to select the right action Provide multiple, linked representations
Problem solving and reasoning ➲ ➲ ➲ ➲ ➲
Aktivitas yang sadar atau refleksi Berpikir kembali tentang satu pilihan Menentukan pilihan atau solusi terbaik Membuat perencanaan Menimbang keuntungan dan kelemahan
Problem solving – Implikasi Desain ➲ ➲
Sediakan informasi dan bantuan Tetapi akan lebih baik lagi bila menjadikan problem-solving dan reasoning tidak perlu lagi
➲
Analog dengan “Pesan kesalahan yang deskriptif dan kontekstual, yang memungkinkan pengguna mengetahui di mana ia melakukan kesalahan, melakukan koreksi atas kesalahan tsb” Akan lebih baik lagi, bila antarmuka mampu mencegah pengguna melakukan kesalahan Contoh: Google mencari teks yang salah eja
➲ ➲
Warna ➲
Warna sebagai penunjang, bukan komponen utama
Ilusi Warna
Tes Warna
Buta Warna
