IMK-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 Menus

• Binary menus: Satu dari dua pilihan
• Multipel items menu, menampilkan banyak pilihan dengan menggunakan teknik-teknik seperti scrollbar, pulldown menus and pup up menus: dilihat dari cara permunculannya di layar.

Single menu: Binary Menus

• Mnemonic letters 

          Photo akan ditampilkan berdasarkan

             H = Hitam dan Putih

            W = Warna

                Pilih huruf pilihan Anda ?

• Radio button

• Button choices

Single menu: Multiple-item menus

• Multiple-item menus

           Drive A tidak terbaca ? 

           Abort, Retry, Ignore, Fail ?

• Multiple-selection menus or check boxes

Single Menu:

Pull down dan pop up

• Alphasliders

• Embedded links

• Iconic menus, toolbars, or palettes

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.

Contoh Tree structured menus:

Acyclic dan Cyclic Menu Networks

Digunakan pada hypertext, seperti www dimana potensi untuk tersesat meningkat

Bergerak Pada Menu dengan Cepat

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

2. Nama menu untuk akses langsung

• Skema penamaan yg memungkinkan pemakai mengakses tujuan secara langsung
• Contoh : jump pada winamp, bookmark pada web browser

3. Menu Macros

    Merekam jalur menu yang sering digunakan sebagai perintah buatan sendiri.

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

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

Data Entry - Form Fill-in:

Dialog boxes

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

Perlu diperhatikan:

1. Tata letak internal kotak dialog
2. 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.

Contoh kotak dialog :

Open dialog box pada Macromedia Flash MX