Desain

Menu dan
Navigasi
pada IMK
Topik Ke 9
 Hal yang dibahas
1. 1. Struktur Menu
2. 2. Fungsi Menu
3. 3. Format Menu
4. 4. Menulis Menu
5. 5. Navigasi menggunakan Menu
6. 6. Navigasi dan Link website
7. 7. Elemen-elemen Navigasi Website
Introduction

Mengapa Menu dan sistem

Navigasi Aplikasi sangat
diperlukan untuk Interaksi
Manusia dan Komputer…?
Introduction
Menu merupakan bentuk utama
navigasi sistem, jika dirancang dengan
benar akan membantu pengguna
membangun model mental dari sistem.
Menu efektif karena menggunakan
kelebihan manusia dalam hal
recognition (pengenalan) dan bukan
kelemahannya dalam hal ingatan.

Ingat ya, Manusia cenderung lebih

cepat mengenali dari pada disuruh
mengingat…Contoh coba anda disuruh
menghafal pasti harus diulang2 biar
ingat
Introduction
Menu merupakan pilihan yang tepat
untuk menunjukkan kemampuan dan
fasilitas yang dimiliki oleh sebuah
program aplikasi kepada pengguna.
Menu adalah daftar sejumlah pilihan
dalam jumlah terbatas, yang biasanya
berupa suatu kalimat atau kumpulan
beberapa kata.

Tujuan adanya menu sendiri yaitu

mengelompokkan suatu
perintah/pekerjaan user dalam sistem
yang masuk akal, komprehensif serta
mudah digunakan
 Struktur Menu

Struktur menu mendefinisikan tingkat

kendali pengguna dalam melaksanakan
sebuah task (tugas).
Struktur menu yang dikenal :

1. Menu Tunggal
2. Menu Linier Sekuensial
3. Menu Simultan
4. Menu Hirarki atau Sekuensial MyDelivery
5. Menu Terhubung
Struktur Menu
Organisasi Semantik Menu
 Menu Tunggal

menu yang berdiri secara

independen atau berdiri
sendiri dan tidak
mempengaruhi yang
lainnya. MyDelivery
Jenis Menu Tunggal
Jenis Menu Tunggal
Jenis Menu Tunggal
Jenis Menu Tunggal
 Linear Sequence & Multiple menus

Linear sequences and multiple menus (urutan linear dan menu ganda) :
- Memandu pemakai melalui serangkaian pilihan dengan urutan yang
sama
- Menstrukturisasi proses pengambilan keputusan

- Contoh :
 Linear menu : penggunaan menu wizard
 Multiple menu : kotak dialog yang mengandung seperangkat
menu – menu yang tidak tergantung satu sama lain
 Linear Sequences & Multiple menus

Linear sequences and multiple menus (urutan linear dan menu ganda) :
- Memandu pemakai melalui serangkaian pilihan dengan urutan yang
sama
- Berfungsi untuk memudahkan user membuat suatu pilihan yang
kompleks dan berguna untuk novice user (pemula).
- Menstrukturisasi proses pengambilan keputusan

- Contoh :
 Linear menu : penggunaan menu wizard
 Multiple menu : kotak dialog yang mengandung seperangkat
menu – menu yang tidak tergantung satu sama lain
Contoh Linear Sequence menus
Contoh Multiple menus
Contoh Linear Sequence & Multiple menus
Contoh Linear Sequence & Multiple menus
 Tree Structure menus
Ketika kumpulan item menu berkembang dan menjadi sulit dipelihara dalam kendali
intelektual, perancang dapat membentuk kategori item-item menu 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.
Breadth Menu lebih disukai daripada Depth Menu

 Pengelompokan semantik:
 Kelompokkan item-item menu yang serupa secara logis.
 Bentuk kelompok yang melingkupi semua kemungkinan.
 Pastikan masing-masing item menu tidak saling overlap.
 Gunakan istilah yang dikenal atau yang mudah dipahami.
Contoh Tree Structure menus
 Contoh
pengelompokan
Semantik dalam
Tree Structure
menus
 Network menus
Acyclic and cyclic menu networks (jaringan menu asiklik dan siklik)
Digunakan pada hypertext Seperti world wide web (www) Potensi user atau
pengguna untuk tersesat di dalam menu menjadi meningkat karena itu menu harus
dirancang dengan baik
 Network menus

Acyclic and cyclic menu networks (jaringan menu asiklik dan siklik)
Digunakan pada hypertext Seperti world wide web (www) Potensi user atau pengguna
untuk tersesat di dalam menu menjadi meningkat karena itu menu harus dirancang dengan
baik. Kadang-kadang lebih cocok daripada struktur tree. Memungkinkan jalur dari bagian
tree yang berbeda, tidak mengharuskan pemakai memulai dari menu utama.
 Fungsi Menu

1. Navigasi ke menu baru

2. Mengeksekusi sebuah aksi / prosedur
3. Menampilkan informasi
4. Memasukkan data
 Isi Menu

Sebuah menu terdiri atas 4 (empat) elemen, yaitu:

1. Konteks
menyediakan informasi untuk menjaga orientasi
pengguna, terutama pada sistem menu yang kompleks/
hirarkis
2. Judul
3. Pilihan
4. Instruksi penyelesaian
memberitahu pengguna bagaimana cara memilih
 Format Menu

Menu harus memiliki format sebagai berikut :

1. Konsisten
a. Konsisten dengan ekspektasi pengguna
b. Konsisten dalam menu :
- Format : organisasi, presentasi, urutan pilihan
- Frasa : judul, deskripsi pilihan, instruksi
- Cara pilih
- Skema navigasi
2. Tampilan
Permanen atau tidak berubah ubah
3. Presentasi
Sebuah menu dan pilihan-pilihannya dapat langsung dikenali
sebagai sebuah menu
 Format Menu (lanjutan….)

4. Organisasi
a. Sediakan menu utama
b. Tampilkan : semua alternatif relevan, hanya alternatif relevan
(hilangkan atau ‘gray-out’)
c. Sesuaikan struktur menu dengan struktur ‘task’
d. Minimalkan tingkat menu : untuk web site batasi hingga 2 level
e. Jumlah pilihan : tanpa pengelompokan elemen : 4-8 pilihan;
dengan pengelompokan : 18-24
f. Sediakan cara memendekkan menu
g. Jangan sampai menu di-scroll

5. Kompleksitas
Sediakan menu sederhana (untuk pemula, jumlah aksi dan menu
secukupnya) dan menu kompleks (untuk ahli, jumlah aksi dan menu lengkap)
 Format Menu (lanjutan….)

6. Susunan Pilihan
sedapat mungkin satu kolom; top- down, left-to-right
7. Urutan pilihan
8. Pengelompokan
9. Garis pembatas pada menu
10. Pemilihan menu pendukung
11. Bahasa / kata yang digunakan
12. Instruksi menu :
Pemula : sediakan cara menyelesaikan menu
Ahli : sediakan cara untuk mengabaikan instruksi ini
13. Intent Indicator
Indikator untuk menentukan user ingin mencari menu apa..?
14. Keyboard Shortcuts
 Format Menu (lanjutan….)

15. Memilih Pilihan

Pilihan dapat dipilih dengan cara menunjuk pada pilihan dengan penunjuk mekanis,
melalui keyboard, atau dengan mengetikkan nilai pilihan.
16. Sediakan defaults
17. Pilihan yang tidak dapat dipilih
18. Tanda aktif / non-aktif sebuah pilihan
Sekian dan
semoga Sukses

Kita akan bertemu lagi

masih pada materi Menu
dan Navigasi dengan topik
yang lebih seru…