Organisasi Semantik Menu
• Binary menus
• Multiple selection menus
• Multiple-item menus / radio buttons
• Pull-down and pop-up menus
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaY0jKyDjmgP8KSnjri8GKip3MEn4yA3hGAcobQME-hpIrwE0EyU5xN7one6BRLLXJUBwhdWhXoiC2rWH7GdL2T6o47tMGI9qxr90PGeh9cf9GGnk8MKT_tZNCiVjUI2XZl30wwhsKxlay/s320/5.JPG)
• Scrolling and two-dimensional menus
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu0AwZHxxqNTef76U8It4FShQD2VwXOgskKqLo40HxqTI6YkxEHZ7cGOkyFdkKYWPfnKkzukvsgAvjdLBpUdF3diT3wOP9ZkNosJ9pXlDaaUBwjPl1jqWKPmpBsLhOJCoH_eWTpHU8oeV1/s320/6.JPG)
• Alphasliders
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUE-lIfaZxnEgy7v4jISpVmXBy6-0nEHT2eDJE1WQr_1plE0fqnhnK74uov5WM-NZKr787IIJgbAHPcWdb7iE0aEYVtgYhubk70SyQwvhHhb6tvCzDUfBUk5XZsVHkOZD7-ih2gZMEWUZz/s320/7.JPG)
• Embedded links
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWq6RKdkfMF9Rg8hXcri3Q4FSOi9BX2gDXiiCnN_g0K3DZyEdUZt3ySmLl8-ACgJl87_4r_hP-jR0a1LLgCeCsTdn9XaCk-mLJGpBm0KwBgn3_k8iDymm7okEdO9B8KmA1Xe3-pTS0FoUa/s320/8.JPG)
• Iconic menus, toolbars, or palettes
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL5gVarjykXZP6ezknkLGHaGzaeFGwMkuLbuaLhy_q-7bTIJoA-mtji21J0s0rP-LmI57kAl2QmYwDxySNCQjWc1uxSZipiGfPNmNhwWwz1j0jY2e0pXxDYAdU7L5bls_bF0RYi1A4ii83/s320/9.JPG)
Linear Sequences & Multiple Menus
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU2oKbY6KW11uPcjYfrVWinLzMfm_uZZhz49874XrqwggBgXZIN-Olx5b474PKyLhookYWl4cA8e3eXIZ1ALsrp2HqdYairTmkk9LDfJKivRzRFAhyrqMdmuXMWI5q1G8o_fM3a3ua2OYn/s320/10.JPG)
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.
– Gunakan peristilahan yang dikenal.
Acyclic & Cyclic Menu Networks
• Kadang-kadang lebih cocok daripada struktur tree.
• Memungkinkan jalur dari bagian tree yang berbeda, tidak mengharuskan pemakai memulai dari menu utama.
• Secara alami terdapat pada:
– Hubungan sosial.
– Jalur transportasi.
– Kutipan dalam jurnal ilmiah.
• Membutuhkan penelusuran balik.
• Kadang-kadang lebih cocok daripada struktur tree.
• Ketika item-item menu telah dipilih, urutan presentasinya perlu diperhatikan.
• Beberapa dasar pengurutan:
– Waktu (kronologis).
– Numeris (menaik atau menurun).
– Sifat fisik (panjang, luas, volume dsb. Secara menaik atau menurun).
• Banyak kasus pengurutan tidak mempunyai aturan pengurutan yang berhubungan dengan tugas, sehingga perlu dipertimbangkan:
– Pengurutan alfabetis istilah-istilah.
– Pengelompokan item-item serupa (dibatasi dengan pemisah antarkelompok).
– Yang sering digunakan ditempatkan di awal.
– Yang paling penting ditempatkan di awal.
Pergerakan Cepat pada Menu
• Menu dengan typeahead
• Nama menu atau bookmarks
• Menu macros
Menu dengan Typeahead
• Penting jika menu sudah sering digunakan sementara waktu respons atau kecepatan tampil lambat.
• Pendekatan BLT (Bacon, Lettuce, Tomato Sandwich): pembentukan mnemonik dari penggabungan huruf-huruf pilihan menu.
Nama Menu atau Bookmarks
• Penamaan sederhana memudahkan pemakai mengakses menu secara langsung.
• Web browser menyediakan bookmarks atau favorites sebagai jalan pintas bagi pemakai untuk menuju situs yang pernah dikunjungi.
Menu Macros
• Perintah yang sering digunakan dapat direkam dan disimpan sebagai makro.
• Pada beberapa software, makro dapat ditempatkan di toolbar sebagai ikon.
Tata Letak Menu
• Judul
• Penamaan pilihan menu
• Tata letak dan desain grafis
Tata Letak Menu: Judul
• Menu tunggal: Judul yang deskriptif.
• Menu tree: Nama pilihan harus sama dengan judul halaman yang dipanggil.
Tata Letak Menu: Penamaan Pilihan Menu
• Gunakan peristilahan yang dikenal dan konsisten.
• Pastikan item dapat dibedakan dari pilihan lain.
• Gunakan pemilihan kata yang konsisten dan singkat.
• Tempatkan kata kunci di kiri.
Tata Letak Menu: Tata Letak dan Desain Grafis
• Perhatikan kendala seperti lebar dan tinggi layar, kecepatan tampil, character set, dan highlighting.
• Buat pedoman/panduan untuk komponen-komponen: judul, penempatan item, petunjuk, pesan kesalahan, dan laporan status.
Formulir Isian
• Formulir isian cocok dipakai jika banyak field data dibutuhkan.
• Pendekatan formulir isian menarik karena:
– Kelengkapan penuh informasi terlihat.
– Seperti formulir kertas.
– Sedikit petunjuk diperlukan.
Beberapa Variasi Isian Field
• Combo box: kombinasi list box dan text box.
• Coded fields: mempunyai mask untuk format isian khusus. Mis.:
– Telepon – (___)___-_____
– Social Security Number – ___-__-____
– Waktu – __:__ __
– Tanggal – __/__/____
– Nilai uang – $_____.00
Kotak Dialog
• Kotak dialog adalah kombinasi teknik menu dan formulir isian yang banyak digunakan di GUI 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
• Penampilan dan penutupan halus.
• Dapat dibedakan tapi batasnya kecil.
• Ukuran cukup kecil (minimalkan overlap).
• Dekat dengan item yang sesuai.
• Tidak menghalangi item yang harus dilihat.
• Mudah ditutup (dibuat menghilang).
• Jelas penyelesaian/pembatalannya.
Contoh Kotak Dialog
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggcWpoc4eWgmaoV_S38rNOeNzIrilx4TBSOE476K5VuzXoE2_Zi3-BXYmbmSz5ePbBHfULAMcXxuWCWAAknkx0c20jV8NGe_lLtnxJJSH8O9fM4dSaSJYJmJPckWtQI4D0IUv9dX5jRUF0/s320/12.JPG)
Contoh Kotak Dialog
referensi :
http://journal.mercubuana.ac.id/data/LecNote%20Paradigma_Prinsip%20dan%20Proses%20Desain.pdf
• Scrolling and two-dimensional menus
• 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
• 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.
– Gunakan peristilahan yang dikenal.
Acyclic & Cyclic Menu Networks
• Kadang-kadang lebih cocok daripada struktur tree.
• Memungkinkan jalur dari bagian tree yang berbeda, tidak mengharuskan pemakai memulai dari menu utama.
• Secara alami terdapat pada:
– Hubungan sosial.
– Jalur transportasi.
– Kutipan dalam jurnal ilmiah.
• Membutuhkan penelusuran balik.
• Kadang-kadang lebih cocok daripada struktur tree.
• Ketika item-item menu telah dipilih, urutan presentasinya perlu diperhatikan.
• Beberapa dasar pengurutan:
– Waktu (kronologis).
– Numeris (menaik atau menurun).
– Sifat fisik (panjang, luas, volume dsb. Secara menaik atau menurun).
• Banyak kasus pengurutan tidak mempunyai aturan pengurutan yang berhubungan dengan tugas, sehingga perlu dipertimbangkan:
– Pengurutan alfabetis istilah-istilah.
– Pengelompokan item-item serupa (dibatasi dengan pemisah antarkelompok).
– Yang sering digunakan ditempatkan di awal.
– Yang paling penting ditempatkan di awal.
Pergerakan Cepat pada Menu
• Menu dengan typeahead
• Nama menu atau bookmarks
• Menu macros
Menu dengan Typeahead
• Penting jika menu sudah sering digunakan sementara waktu respons atau kecepatan tampil lambat.
• Pendekatan BLT (Bacon, Lettuce, Tomato Sandwich): pembentukan mnemonik dari penggabungan huruf-huruf pilihan menu.
Nama Menu atau Bookmarks
• Penamaan sederhana memudahkan pemakai mengakses menu secara langsung.
• Web browser menyediakan bookmarks atau favorites sebagai jalan pintas bagi pemakai untuk menuju situs yang pernah dikunjungi.
Menu Macros
• Perintah yang sering digunakan dapat direkam dan disimpan sebagai makro.
• Pada beberapa software, makro dapat ditempatkan di toolbar sebagai ikon.
Tata Letak Menu
• Judul
• Penamaan pilihan menu
• Tata letak dan desain grafis
Tata Letak Menu: Judul
• Menu tunggal: Judul yang deskriptif.
• Menu tree: Nama pilihan harus sama dengan judul halaman yang dipanggil.
Tata Letak Menu: Penamaan Pilihan Menu
• Gunakan peristilahan yang dikenal dan konsisten.
• Pastikan item dapat dibedakan dari pilihan lain.
• Gunakan pemilihan kata yang konsisten dan singkat.
• Tempatkan kata kunci di kiri.
Tata Letak Menu: Tata Letak dan Desain Grafis
• Perhatikan kendala seperti lebar dan tinggi layar, kecepatan tampil, character set, dan highlighting.
• Buat pedoman/panduan untuk komponen-komponen: judul, penempatan item, petunjuk, pesan kesalahan, dan laporan status.
Formulir Isian
• Formulir isian cocok dipakai jika banyak field data dibutuhkan.
• Pendekatan formulir isian menarik karena:
– Kelengkapan penuh informasi terlihat.
– Seperti formulir kertas.
– Sedikit petunjuk diperlukan.
Beberapa Variasi Isian Field
• Combo box: kombinasi list box dan text box.
• Coded fields: mempunyai mask untuk format isian khusus. Mis.:
– Telepon – (___)___-_____
– Social Security Number – ___-__-____
– Waktu – __:__ __
– Tanggal – __/__/____
– Nilai uang – $_____.00
• Kotak dialog adalah kombinasi teknik menu dan formulir isian yang banyak digunakan di GUI 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
• Penampilan dan penutupan halus.
• Dapat dibedakan tapi batasnya kecil.
• Ukuran cukup kecil (minimalkan overlap).
• Dekat dengan item yang sesuai.
• Tidak menghalangi item yang harus dilihat.
• Mudah ditutup (dibuat menghilang).
• Jelas penyelesaian/pembatalannya.
Contoh Kotak Dialog
Contoh Kotak Dialog
http://journal.mercubuana.ac.id/data/LecNote%20Paradigma_Prinsip%20dan%20Proses%20Desain.pdf
Comments (0)
Posting Komentar