Pemilihan Menu dan Pengisian Formulir Hendri Sopryadi,MTI. (HUMAN-COMPUTER INTERACTION) Pertemuan ke 3 Pemilihan Menu dan Pengisian Formulir

Pembagian Jenis Menu Jenis Menu Single Menu Binary Menu Multiple Item Menu Extended Menu Pull Down & Pop Up Menu Permanent Menu Multiple Selection Menu Linier Sequence & Multiple Menu Tree Structure Menu Network Menu Linier Menu Depth Menu Breadth Menu Cyclic Menu Acyclic Menu

Jenis-jenis Menu Single menus (menu tunggal) Binary menus * Button Choices * Multiple – item menus * Radio Buttons *

Extended Menus Pull-down and pop-up menus

Permanent menus (iconic menus, toolbars, or palettes)

Multiple-selection menus (check boxes)

Linear sequences and multiple menus (urutan linear dan menu ganda)

Linier Menu Multiple Menu Memandu pemakai melalui serangkaian pilihan dengan urutan yang sama Menstrukturisasi proses pengambilan keputusan Contoh : Multiple Menu Kotak dialog yang mengandung seperangkat menu-menu yang tidak tergantung satu sama lain

Tree structured menus D E P T H M NU TI SI MI KA TK BREADTH MENU

Depth vs Breadth Depth : jumlah level Breadth : jumlah item per level Breadth menu lebih disukai dibanding Depth menu

Pengelompokkan semantik dalam tree structure menu Kelompokkan item-item yang serupa secara logis Bentuk kelompok yang melingkupi semua kemungkinan Pastikan item tidak saling overlap/ menumpuk Gunakan peristilahan yang dikenal

Acyclic and cyclic menu networks (jaringan menu asiklik dan siklik) Digunakan pada hypertext Seperti world wide web (www) Potensi untuk tersesat meningkat karena itu harus dirancang dengan baik

Bergerak pada menu dengan cepat Menu dengan typeahead Nama menu untuk akses langsung Menu macros

Pedoman perancangan menu Gunakan task semantic dalam organisasi menu Lebih baik lebar dan dangkal daripada sempit dan dalam Tunjukkan posisi dengan gambar, angka, atau judul

Lanjutan….. Gunakan pengurutan item yang berarti Gunakan pengelompokkan item yang berarti Tampilkan item dengan singkat, mulai dengan keyword Gunakan tatabahasa, layout, dan peristilahan yang konsisten

Lanjutan… Sediakan typeahead, jumpahead, dan shortcut lainnya Sediakan lompatan ke menu sebelumnya dan menu utama Perhatikan petunjuk online, mekanisme pilihan “baru”, waktu respon, kecepatan tampil, dan ukuran layar

E-MAIL REGISTRATION FORM Contoh Formulir E-MAIL REGISTRATION FORM Name : Address : Birthday : / Gender : Male E-Mail Username : Password ; Confirm : City : State : Zip Code : Education : Occupation : Submit Cancel Phone : - Female

Pedoman perancangan formulir Gunakan judul yang berarti Identifikasi topik dan jauhi istilah komputer Gunakan petunjuk yang dapat dipahami Jelaskan task dengan singkat dan jika perlu sediakan layar petunjuk Gambarkan aksi yang harus dilakukan Hindari kata ganti atau referensi ke pemakai

Kelompokkan dan urutkan field secara logis Lanjutan… Kelompokkan dan urutkan field secara logis field yang berhubungan harus berdekatan pemisah antara kelompok harus jelas urutan wajar (city, state, zip code)

Layout formulir harus menarik secara visual Lanjutan… Layout formulir harus menarik secara visual field jangan dikumpulkan di satu tempat perhatikan alignment formulir di layar harus menyerupai di kertas

Gunakan label field yang dikenal pemakai Lanjutan… Gunakan label field yang dikenal pemakai gunakan istilah umum.contoh: …………… Jika memungkinkan, tampilkan pesan yang menjelaskan berikan informasi mengenai field atau isinya

Gunakan peristilahan dan singkatan yang konsisten Lanjutan… Gunakan peristilahan dan singkatan yang konsisten daftarkan istilah dan singkatan yang dapat diterima pergunakan daftar tersebut dan tambahkan isinya jika sudah dipertimbangkan baik-baik

Ruang kosong dan batas field yang perlu diisi harus jelas terlihat Lanjutan… Ruang kosong dan batas field yang perlu diisi harus jelas terlihat berikan tanda jumlah karakter yang dapat diisi Pergerakan kursor harus leluasa perhatikan penggunaan tombol tab dan anak panah

Memungkinkan koreksi kesalahan untuk karakter atau field Lanjutan… Memungkinkan koreksi kesalahan untuk karakter atau field backspace,delete, overtyping Tampilkan pesan kesalahan untuk nilai yang tak dapat diterima tampilkan nilai-nilai yang boleh diisikan

Tandai field optional dengan jelas Lanjutan… Tandai field optional dengan jelas tandai dengan “(optional)” atau lainnya Field yang wajib diisi ditandai Sediakan tanda selesai pemakai harus memberi tahu pengisian selesai hindari penyelesaian automatis