MENU, FORM FILL-IN, AND DIALOG BOX (Session 6)

Introduction

Menu adalah cara sebuah sistem untuk menampilkan instruksi yang tersedia untuk user.

Form fill-in adalah cara sebuah sistem untuk meminta data atau informasi dari user.

Dialog box adalah respon dari sistem setelah user memberikan instruksi atau informasi
Tujuan utama dari desain menu, form fill-in dan dialog box adalah menciptakan sesuatu yang relevan dengan tugas user yang dapat dimengerti, diingat, dan dengan pengorganisasian yang baik sehingga user merasa nyaman saat menggunakan sistem tersebut

Tipe - Tipe menu 

1. Single Menus

Single menu adalah menu yang berdiri secara independen tidak mempengaruhi yang lainnya.

• Binary menu adalah menu yang hanya terdiri dari satu jawaban yang pasti saja seperti angka biner kalau bukan satu pasti bernilai nol. Contohnya mnemonic letter (seperti yes atau no saat konfirmasi menghapus suatu file), radio button, dan button choice.

• Multiple-item menus adalah terdapat banyak pilihan menu namun hanya dapat memilih satu saja.

• Multiple-selection menus adalah menu dengan banyak pilihan juga dapat memilih lebih dari satu. Contohnya check box.

• Pulldown, pop-up, toolbars menu adalah menu dengan sangat banyak pilihan dan bercabang. Contoh menu file di ms word.

• Menu for long list adalah menu yang disediakan agar kita dapat langsung menuju ke tempat yang dituju. Biasanya berbentuk slider. Contohnya seperti dalam contact di smartphone samping kanan ada huruf dari a – z itu merupakan contoh menu for long list.

• Embedded menus adalah menu yang ditempelkan di tempat lain. Contoh hot links

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

Depth versus Breadth:

•         Depth: jumlah level.

•         Breadth: jumlah item per level.

Pengelompokan semantik:

•         Kelompokkan item-item yang serupa secara logis.

•         Bentuk kelompok yang melingkupi semua kemungkinan.

•         Pastikan item tidak overlap.

• Linear sequence menus (membantu user dalam membuat suatu pilihan yang kompleks, dan sangat berguna bagi novice users)

• Simultaneous menus (memberikan semua pilihan yang mungkin secara bersamaan dan memperbolehkan user untuk memasukkan pilihan secara sembarang)

• Menu maps (membantu user agar tidak bingung dengan menu yang ada). Memperlihatkan semua menu yang ada

• Cyclic Network

Cyclic network adalah tipe menu yang dapat bercabang – cabang dan dapat kembali ke menu utama atau menu sebelumnya.

• Acyclic Network

Acyclic network adalah tipe menu yang dapat bercabang – cabang dan setiap menu dapat ditempu dengan beberapa cara namun tidak dapat kembali ke menu sebelumnnya atau menu utama.

Content Organization

• Melakukan pengelompokan pekerjaan yang berkaitan dalam satu kategori.
• Membuat menu yang berurutan (dapat dengan waktu, urutan secara numerik, maupun berdasarkan properties yang dimiliki)

Guidelines untuk menu :

• Organisasikan menu berdasarkan jenis pekerjaan
• Lebih cenderung pada broad - shallow daripada narrow - deep
• Perlihatkan posisi dengan grafik, angka, ataupun judul
• Gunakan items sebagai judul untuk subtrees
• Pengelompokkan item harus memiliki arti
• Pembuatan urut - urutan item harus memiliki arti
• Gunakan kalimat singkat (keyword)
• Perhatikan konsistensi grammar, layout, dan terminologi
• Sediakan shortcut
• Perbolehkan user untuk langsung kembali ke menu sebelumnya dan main menu
• Pertimbangkan online help, response time, display rate, dan ukuran layar

Penamaan Menu

• Gunakan kata atau istilah yang familiar dan konsisten
• Pastikan sebuah menu dapat dibedakan dengan yang lain
• Jangan bertele – tele

Hal - hal yang perlu diperhatikan dalam menu layout :

• Judul
• Layout dan design (ukuran layar, display rate, character set, dan teknik highlighting)
• Konsistensi (judul, penempatan item, instruksi, pesan kesalahan, dan laporan status)
• Teknik (indentasi, huruf besar / kecil, simbol, penanda posisi, cascading menus, magic lens)

Untuk memudahkan expert user berikan keyboard shortcuts, bookmarks, dan toolbar yang dapat dipersonalisasi oleh user.

Input Data with Menu

1. Form Fill – In

Diperlukan ketika banyak data yang harus diinput. Namun user harus sudah lancar dalam menggunakan keyboard, tabulasi, metode koreksi kesalahan, arti dari label yang ada, field konten yang diperbolehkan, dan penggunaan enter.

Dalam menciptakan sebuah formulir digital perlu diperhatikan bahwa:

• Kelengkapan informasi harus terlihat jelas oleh user
• Harus mirip dengan formulir kertas
• Instruksi yang dibutuhkan untuk bagian data tertentu

Form fill – in guidelines

• Judul
• Instruksi yang jelas
• Pengelompokkan yang jelas
• Tampilan form yang menarik
• Label yang umum
• Istilah dan singkatan yang konsisten
• Batas yang jelas terlihat untuk bagian pemasukkan data
• Pergerakan cursor yang nyaman
• Adanya koreksi kesalahan pada karakter dan pemasukkan data
• Hindari kesalahan jika mungkin
• Adanya pesan error jika yang dimasukkan tidak sesuai
• Penandaan pada data yang harus diisi atau diperlukan
• Pesan penjelasan
• Tanda penyelesaian untuk mendukung kontrol user

2. Format spesific field

Digunakan untuk field yang berupa kode seperti nomor telepon, nomor jaminan sosial, waktu, tanggal, dan jumlah uang.

3. Dialog Box

Merupakan kombinasi dari menu dan form fill-in. 

Guidelines untuk layout dialog box adalah :

• Judul dan model yang konsisten
• Urut - urutan dari atas kiri ke bawah kanan
• Gunakan penekanan
• Layout yang konsisten (pada margin, grid, white space, line, dan box)
• Terminologi, fonts, penggunaan huruf kapital, dan indentasi yang konsisten
• Gunakan tombol standard (OK dan Cancel)
• Hindari kesalahan dengan direct manipulation

Selain itu dialog box juga harus memenuhi syarat berikut agar sesuai dengan lingkungan luarnya :

• Dialog box muncul dan hilang dengan mulus
• Dibedakan dari lingkungan luar dengan pembatas tipis
• Ukuran cukup kecil sehingga tidak terjadi overlap
• Tampilkan dekat item yang memicu dialog box
• Hindari overlap pada item yang diperlukan
• Mudah untuk ditutup
• Mudah untuk diselesaikan / dibatalkan

4. Novel Design

Merupakan gabungan antara menu dengan direct manipulation. Meliputi pie menus, control menus, marking menus, flow menus, dan toolglass.