Interaksi Manusia dan Komputer Pertemuan - 6

MENU, FORM FILL-IN, DIALOG BOX

Menu cara untuk menyajikan petunjuk yang tersedia bagi pengguna.

Form Fill-in adalah sistem interaktif untuk meminta data atau informasi dari pengguna.

Dialog box merupakan respon dari sistem interaktif setelah pengguna memberikan instruksi yang membutuhkan parameter.

Single Menu

- Binary menu: Satu dari dua pilihan 

•Mnemonic letters

Photo akan ditampilkan berdasarkan

 H = Hitam dan Putih

 W = Warna

Pilih huruf pilihan Anda ?

•Radio button

•Button choices

 

- Multipel items menu, menampilkan banyak pilihan dengan menggunakan teknik-teknik seperti scrollbar, pulldown menus and pup up menus: dilihat dari cara permunculannya

di layar.

Contoh : 

*Multiple-item menus

     Drive A tidak terbaca ?
     Abort, Retry, Ignore, Fail ?

*Multiple-selection menus or check boxes

  *Scrolling and two-dimensional menus

*Singel Menu : Pull down dan pop up

* Alphasliders

* Embedded links

* Iconic menus, toolbars, or palettes

 
Linear Sequences & Multiple Menus

TREE-STRUCTURED MENUS

Ketika kumpulan item berkembang dan menjadi sulit dipelihara dalam kendali intelektual, perancang dapat membentuk kategori item-item yang serupa, membentuk struktur tree. 

Contoh pengelompokan:

–Laki-laki, perempuan

–Hewan, sayuran, mineral

–Fonts, size, style, spacing

Pengelompokan semantik:

–Kelompokkan item-item yang serupa secara logis.

–Bentuk kelompok yang melingkupi semua kemungkinan.

–Gunakan peristilahan yang dikenal.

Acyclic dan Cyclic Menu Networks  

Digunakan pada hypertext, seperti www dimana potensi untuk tersesat meningkat

Kadang-kadang lebih cocok daripada struktur tree. Memungkinkan jalur dari bagian tree yang berbeda, tidak mengharuskan pemakai memulai dari menu utama. Biasanya terdapat pada kutipan dalam jurnal ilmiah

Cyclic Network : ktia bisa kembali ke menu sebelumnya dengan meng-klik simbol atau icon tertentu. misalnya : facebook (ketika kita memilih sebuah icon yang bergambar |  f  | maka kita akan kembali ke home facebook kita.

Acyclic Network : kebalikan dari Cyclic Network, kita tidak bisa kembali ke menu sebelumnya kecuali dengan meng-klik simbol back / undo dari browser kita.

Bergerak Pada Menu dengan Cepat 

Menu dengan typeahead tidak perlu menunggu menu selesai ditampilkan untuk memilih menu, dapat langsung mengetikkan serangkaian karakter dari menu utama. Pilihan-pilihan dapat digabungkan menjadi suatu perintah mnemonic. Contoh : menu pada handphone

Nama menu untuk akses langsung 

Skema penamaan yg memungkinkan pemakai mengakses tujuan secara langsung.

Contoh : jump pada winamp, bookmark pada web browser

Menu Macros : Merekam jalur menu yang sering digunakan sebagai perintah buatan sendiri. Di define oleh user.

Perancangan Menu

Pedoman Perancangan Menu :

- Gunakan task semantic

- Lebih baik lebar dan dangkal daripada sempit dan dalam

- Tunjukkan posisi dengan gambar, angka, atau judul

- Gunakan pengelompokan item yang berarti

- Tampilkan item dengan singkat 

- mulai dengan keyword

- Gunakan tata bahasa, tata letak, dan peristilahan yang konsisten

- Sediakan typeahead dan shortcut lainnya

Data Entry - Form Fill-in

Bermanfaat untuk banyak data dimasukkan :
- Lengkap informasi dapat dilihat oleh pengguna.
- Tampilan menyerupai bentuk familiar dengan form yang biasa di kertas
- Beberapa instruksi diperlukan untuk jenis entri tertentu.

Pengguna harus terbiasa dengan:
- Keyboard
- Penggunaan tombol TAB atau mouse untuk memindahkan kursor
- Metode koreksi kesalahan
- Makna Field-label
- Syarat ketentuan pengisian
- Penggunaan tombol ENTER dan / atau RETURN 

Pedoman mendesain form fill-in: 

 – judul yang bermakna 

 – instruksi yang mudah dipahami 

 – Pengelompokan logis dan sekuensing bidang 

 – Tata letak visual menarik dari bentuk 

 – Field-label yang familiar 

 – Konsisten menggunakan kata / singkatan 

 – Terlihat Ruang dan bounderies untuk bidang data-entry 

 – Gerakan kursor Nyaman 

 – Koreksi kesalahan untuk karakter individu dan seluruh bidang 

 – Pencegahan kesalahan di mana mungkin 

 – Pesan kesalahan untuk nilai-nilai yang tidak dapat diterima 

 – Penandaan bidang yang diperlukan 

 – Penjelasan pesan untuk bidang 

 – Field dengan Format-specific biasanya nomor telepon, waktu, tanggal, mata uang

Contoh : 

 







Dialog boxes

Dialog boxes (kotak dialog) adalah kombinasi teknik menu dan formulir isian yang banyak digunakan di GUI (graphical user interface)  modern. 

Perlu diperhatikan:

– Tata letak internal kotak dialog 
– Hubungan eksternal kotak dialog 

 Pedoman Tata Letak Internal Kotak Dialog 

- Judul berarti, gaya konsisten. 

- Pengurutan dari atas kiri ke bawah kanan. 

- Pengelompokan dan penegasan. 

- Tata letak yang konsisten. 

- Peristilahan, font, penggunaan huruf besar, justifikasi yang konsisten. 

- Tombol standar (OK, Cancel).

- Pencegahan kesalahan. 

Pedoman Hubungan Eksternal Kotak Dialog

- Dapat dibedakan tapi batasnya kecil. 

- Ukuran cukup kecil (minimalkan overlap). 

- Mudah ditutup (dibuat menghilang). 

- Jelas penyelesaian/pembatalannya.

contoh kotak dialog :

To be continue.. :)
For the next week issue "Interaksi Manusia dan Komputer - Pertemuan 7"