Interaksi Manusia dan Komputer

Antarmuka Berbasis Menu

PENGANTAR
Ketika

perancang

tidak

dapat

menciptakan

strategi

manipulasi langsung yang sesuai, menu dan borang isian

merupakan alternatif yang menarik. Antarmuka berbasis

menu banyak dijumpai pada sistem lama dan pada sistem
yang lebih modern biasanya diimplementasikan dengan

menggunakan pull down menu, checkbox atau radiobutton

didalam kotak dialog, atau link pada halaman web. Jika
pilihan yang tersedia disusun dengan urutan dan struktur

yang bagus, pengguna dapat menentukan pilihan yang

tersedia dengan mudah dan cepat.

ORGANISASI MENU BERBASIS TUGAS

Norman dan Chin (1989) menyebutkan bahwa jumlah
pilihan pada program aplikasi terkadang cukup banyak.
Semakin banyak jumlah menu yang ada maka tingkat
kompleksitasnya pun semakin tinggi.
Aplikasi yang paling sederhana terdiri atas sebuah menu
tunggal. Menu tunggal pun mempunyai variasi yang cukup
banyak.

Kelompok

kedua

adalah

sistem

menu

yang

menggunakan urutan linear untuk menampilkan pilihan

yang tersedia. Struktur pohon merupakan struktur menu

yang paling banyak dijumpai.

MENU TUNGGAL
Menu

tunggal

memungkinkan

pengguna

untuk

memilih salah satu dari dua pilihan, atau sejumlah

pilihan yang tersedia. Menu tunggal dapat berupa
pop-up pada daerah kerja yang aktif atau tersedia
secara permanen.

Variasi lain dari menu tunggal adalah menu banyak pilihan yang
memungkinkan pengguna untuk memilih lebih dari satu pilihan.
Menu jenis ini diimplementasikan menggunakan komponen interaksi
yang berupa kotak cek.

MENU DATAR DAN SELEKTOR PILIHAN

Pada tahun 1995, kebanyakan sistem menu masih
menuliskan pilihan pilihan yang tersedia dengan
menggunakan keseluruhan layar. Daftar menu yang
ada biasanya ditulis dengan kalimat kalimat yang

cukup panjang. Ragam menu seperti ini disebut

menu daftar.

Penentuan pilihan pada menu datar dapat dikerjakan

dengan

dua

menggunakan

cara,

cara

selektor

pertama
dari

adalah

setiap

dengan

pilihan

yang

tersedia. Cara kedua adalah dengan menggerakkan

penyorot

ke

suatu

pilihan

dan

kemudian

dikonfirmasikan dengan menekan tombol enter.

Untuk

memudahkan

pengguna

dalam

melakukan

pilihannya, pada setiap pilihan sering disertakan suatu

selektor

yang

dapat

berupa

campuran angka dengan huruf.

angka,

huruf,

atau

Jika banyaknya pilihan sama dengan atau kurang dari

10 buah, kita dapat menggunakan selektor yang

berupa angka. Tetapi jika pilihan lebih dari 10,
penggunaan selektor angka kurang cocok karena

pengguna harus menekan dua buah tombol untuk

memilih pilihan dengan nomor selektor 10 atau lebih.

Contoh pemakaian selektor

Selektor

tak

kompatible

kekurangan

yang

kompatible.

Ada

memiliki

berkebalikan
satu

kelebihan

dengan

kelemahan

yang

dan

selektor
sangat

mendasar dari penggunaan selektor tak kompatible,

yaitu pengguna harus menghafal kembali urutanya
apabila susunan atau urutan pilihanya diacak. Hal
inilah yang menghambat proses pencarian pilihan
pada menu tak kompatible.

Menu tarik (pull down menu)

Adalah menu yang mempunyai banyak pilihan tetapi karena
keterbatasan ruang pilihan pilihan yang ada hanya terlihat
pada saat menu utamanya di klik biasanya diletakkan di
bagian atas jendela. Jenis menu ini pertama kali dikenalkan
oleh Xerox star, Apple Lisa, dan Apple Machintosh.

Pada daftar pilihan yang tersaji secara vertikal seringkali terdapat:

1. Tombol kunci-cepat, misalnya kombinasi Mac+K (pada Macintosh)
atau Ctrl-K (padaWindows). Digunakan untuk mempercepat
pemilihan menu.
2. Symbol tiga titik () merupakan pertanda bahwa jika diklik akan
memunculkan dialog baru. Sedangkan yang tidak ada titik biasanya
adalah menu yang berisikan sebuah perintah langsung.
3. Symbol panah (>) menunjukkan bahwa menu pilihan itu masih

mempunyai subpilihan yang lain.

MENU BERBASIS ICON DAN TOOLBAR

Jika semua menu ditampilkan selain membingungkan

pengguna hal itu juga mengurangi ruang kerja pengguna.

Dengan demikian pada kedua jenis menu diatas perancang
harus menyediakan fasilitas untuk memuncul hilangkan
pilihan pilihan tertentu sesuai keinginan pengguna.

MENU DENGAN PILIHAN PANJANG

Ada beberapa cara untuk menampilkan menu panjang

yaitu:
1. Menu gulung (Scroll Menu)

2. Kotak Kombo (Combo Box)

3. Menu mata ikan (Fish Eye Menu)

4. Penggeser

5. Menu 2 dimensi

MENU DAN HOTLINK TERTANAM

Dalam keadaan tertentu, pilihan yang ada sering ditanam
(embedded) pada suatu teks atau foto/citra. Hal ini
disebabkan karena tidak ada lokasi khusus yang dapat
digunakan untuk menempatkan pilihan yang tersedia.

Contohnya dalam sebuah foto udara yang diambil dari

Google earth. Pilihan

yang tersedia disimbolkan dengan

balon kecil berwarna biru dan keterangan tempat, misalnya

KPTU Teknik UGM. Dengan mengklik balon kecil berwarna

biru tersebut, beberapa informasi penting akan muncul.

Sambungan tertanam (embedded link) diperkenalkan oleh

sistem Hyperties yang digunakan pada dua proyek hiperlink
komersial (Shiderman 1988; Shneiderman dan Kearsley, 1989),
dan menjadi inspirasi untuk hotlink pada situs Web. Sambungan
tertanam memungkinkan pengguna untuk melihat pilihan sesuai
konteksnya

dan

menghindari

adanya

pilihan

lain

yang

mengganggu dan menghabiskan kapling pada layar tampilan.

MENU BREADCRUMB
Otter

and

Johnson

(2000),

menyebut

sebuah

fenomena dengan istilah disorientasi atau tersesat di

dunia maya, ketika pengguna berselancar di dunia
maya dengan cara mengunjungi situs web dan akan

merasa tersesat dan tidak tahu apa yang harus ia

lakukan. Untuk membantu pengguna mengetahui
posisinya
digunakan.

saat

itu,

menu

breadcrumb

sering

contoh menu breadcrumb

Lebih lanjut Nielsen mengatakan bahwa sejak tahun 1995 dia

merekomendasikan menu breadcrumb karena beberapa alasan
yaitu:
1. Menu breadcrumb menunjukkan kepada penggunaan situs
lokasi itu sehingga membantu mereka memahami posisi mereka

terhadap bagian siitus yang lain.

2. Menu breadcrumb memungkinkan "satu klik akses ke tingkat

situs yang lebih tinggi" sehingga dapat membantu pengguna
yang terlanjur masuk terlalu dalam ke dalam struktur menu
menunju ke bagian yang tidak dikehendaki.
3. Menu breadcrumb tidak pernah menimbulkan persoalan

dalam pengujian (oleh) pengguna; seseorang dapat saja tersilap

dengan tidak melihat elemen perancangan yang kecil ini, tetapi
mereka tidak pernah menyalahkan-artikan jejak breadcrumb
atau mengalami kesulitan dalam mengoperasikannya.
4. Menu breadcrumb hanya memerlukan tempat yang sempit.

KOMBINASI BANYAK MENU

Sejumlah menu yang saling terkait satu sama lain dapat
digunakan untuk menuntun pengguna menggunakan
sejumlah pilihan. Pengguna melihat hal ini sebagai
sejumlah menu yang berurutan secara linear.

Contohnya, pemesanan tiket yang dapat dilakukan secara online.

Pada saat pertama kali seseorang memesan tiket, ia terlebih dulu
harus memilih apakah tiketnya untuk sekali jalan atau pergipulang, dilanjutkan dengan memilih tanggal penerbangan,
banyaknya tiket yang akan dibeli (termasuk apakah ada bayi atau
anak-anak). Setelah calon pembeli tiket akan diminta untuk
mengisi identitas dan beberapa informasi yang relevan dengan
calon penumpang, cara pembayaran, sampai kepada percetakan

tiket elektroniknya.

Pada menu serempak, pengguna akan dihadapkan pada

antarmuka yang memuat berbagai pilihan dan pengguna dapat
memilih sembarang menu yang ada secara bebas

MENU BERSTRUKTUR POHON

Struktur pohon merupakan sejumlah pilihan dapat

dengan

mudah

dikelompokan

menjadi

sejumlah

kategori terpisah dengan pembeda yang unik.

Pengelompokan

dan

pengindeksan

merupakan

pekerjaan yang rumit, dan dalam berbagai situasi

tidak ada satu penyelesaian tunggal yang dapat
diterima oleh semua orang.

Penelusuran menu dapat dikerjakan dalam beberapa detik jika

pengelompokan setiap tingkat dibuat secara alamiah dan mudah
dimengerti oleh pengguna, dan jika pengguna mengetahui targetnya.

Sebaliknya, jika pengelompokannya tidak jelas dan pengguna hanya

mempunyai gambaran yang samar tentang apa yang akan dicari,
mereka dapat tersesat di dalam pohon menu yang ada (Norman dan
Chin, 1988).
Keuntungan struktur pohon adalah mampu menampilkan informasi

dalam jumlah besar kepada pengguna mula atau yang tidak aktif.

Contoh menu struktur pohon

PETA SITUS
Pengguna akan semakin sulit untuk menentukan posisinya
ketika kedalaman menu bertambah sehingga mengalami
apa yang disebut disorentasi atau tersesat di dunia maya
(Conklin, 1986). Pada dasarnya, menurut Conklin, seorang
pengguna disebut mengalami disorientasi atau tersesat

apabila dia:
1. tidak mengetahui posisinya (di dalam situs Web),
2. tidak mengetahui apakah ada titik tuju yang diinginkan,

dan
3. tidak mengetahui cara menuju titik tuju yang diinginkan.

Untuk mengatasi persoalan tersebut , perancang

menambahkan

peta

situs

(sitemap)

semacam ringkasan isi situs Web.

yang

berisi

JARING MENU BERPUTAR DAN TIDAK

BERPUTAR
Jaring menu berfungsi untuk memberikan keleluasan
pengguna sehingga bergerak ke menu selanjutnya
tanpa harus balik ke menu awal.

Ketika pengguna bergerak dari pohon ke jaring menu tak

berputar dan jaring menu berputar, kemungkinan untuk
tersesat menjadi semakin besar.
Kebingungan dan disorientasi sering dilaporkan oleh
pengguna situs Web yang mengalami kesulitan ketika
melakukan navigasi pada jaring berputar berskala besar
(Shneiderman dan Plaisant, 2005).

Pada struktur pohon terdapat sebuah menu yang berfungsi

sebagai menu utama, sehingga penelurusan balik lebih mudah
dilakukan. Dalam struktur jaring, untuk dapat melakukan
penelusuran balik, tumpukan dari menu yang sudah dikunjungi
harus dibuat.

Pada Suatu aplikasi seringkali terjadi

salahguna dalam

menggunakan jenis menu pada suatu sistem dan tidak

memberikan keleluasan kepada pelanggan dalam melakukan
aktifitasnya.

CARA MENGORGANISIR PILIHAN

Beberapa

hal

yang

perlu

diperhatikan

dalam

pengorganisasian pilihan antara lain pengelompokan

dan pengurutan pilihan yang tersedia. Selain itu,
pemilihan judul atau label menu dan tata letak yang

sesuai

akan

banyak

membantu

menggunakan aplikasi tersebut.

pengguna

untuk

PENGELOMPOKAN BERBASIS TUGAS PADA

STRUKTUR POHON
Persoalan dalam pengelompokan pilihan timbul karena adanya
kategori yang tumpang tindih, penggunaan jargon yang sukar,
istilah yang sangat umum, maupun kemungkinan adanya pilihan

tambahan yang tidak jelas.

Berdasarkan berbagai persoalan di atas, di bawah ini disajikan salah

satu cara pemecahannya:
1. Satukan pilihan-pilihan yang secara logis serupa.
2. Kelompok berdasar nilai tertentu.
3. Pastikan bahwa pilihan-pilihan tersebut tidak saling tumpang tindih.

Pilihan-pilihan dalam tingkat lebih rendah harus secara alamiah

terhubung ke sebuah menu pada tingkat yang lebih tinggi.
4. Gunakan istilah yang sederhana dan pastikan bahwa antara satu
pilihan dengan pilihan lain harus berbeda.

URUTAN PENYAJIAN PILIHAN

Setelah perancang menetapkan pilihan yang ada,

perancang masih dihadapkan pada pemilihan urutan

penyajian dari pilihan itu. Jika pilihan yang tersedia
mempunyai urutan yang alamiah - misalnya nama
hari dalam seminggu, bab dalam sebuah buku, atau
ukuran

kaos

ditentukan.

maka

Urutan

keputusannya

penyajian

pilihan

menggunakan berbagai dasar, misalnya:

mudah
dapat

URUTAN PENYAJIAN PILIHAN

Waktu (urutan kronologis),

Urutan numerik (secara urut naik atau urut turun),

Sifat fisik (panjang, luas, volume, temperatur, berat,

kecepatan, dan lain-lain).

Dalam kebanyakan kasus, pilihan-pilihan yang ada tidak

mempunyai

urutan

berdasarkan

tugas,

dan

perancang harus menentukan urutannya berdasar

berbagai kemungkinan urutan, misalnya:
Pilihan paling penting diletakkan sebagai pilihan

pertama;
Pilihan paling sering digunakan diletakkan sebagai

pilihan pertama;

 Kelompok dari sejumlah pilihan yang saling terkait

(dipisahkan dengan baris kosong atau pemisah lain
antar kelompok);

Urutan secara alfabetis

 Dalam sebuah menu, biasanya terdapat beberapa

pilihan yang sering dipilih dibanding pilihan lain.
Ada semacam keinginan untuk mengorganisir
pilihan-pilihan tersebut dari pilihan yang paling
banyak dipilih ke yang paling sedikit dipilih. Cara

ini barangkali akan mempercepat pemilihan menu

teratas, tetapi kehilangan makna urutan dan
pilihan yang paling jarang dipilih dapat bersifat
menganggu.

 Microsoft dengan produknya Office 2000 menyajian

menu yang disebut dengan menu adaptif. Ketika
pengguna menggunakan salah satu aplikasi dari
Office 2000, pilihan yang belum dipilih tidak
ditampilkan dari daftar pilihan yang ada, sehingga

membuat daftar pilihannya menjadi pendek. Untuk

melihat pilihan yang tidak nampak, pengguna harus
mengklik simbol panah yang terdapat di bagian
paling bawah dari menu tersebut.

 Studi yang dilakukan oleh Mc Gicnere, et al., (2002)

membandingkan antara menu adaftif pada Microsoft
Word dengan varian menu lain yang memberikan
kesempatan kepada pengguna untuk menggunakan salah
satu dari dua alternatif: susunan normal dengan semua
pilihan terlihat dan susunan tertentu yang didasarkan
pada keinginan masing-masing pengguna.

URUTAN PENYAJIAN PILIHAN

Pada Subbab ini akan membahas sejumlah penilaian

subyektif tentang tata letak menu yang memerlukan

validasi empiris, diantaranya:
Judul Menu,
Pemilihan Ungkapan, dan
Tata letak Grafik.

 Judul Menu
Pemilihan Ungkapan
Tata letak Grafik.

 Untuk menu tunggal, judul singkat yang menjelaskan

suatu situasi sudah memadai. Pada menu tersusun
linear, judulnya harus secara akurat menunjukkan
langkah-langkah

yang

perlu

dilakukan

secara

berurutan. Penggunaan tata bahasa yang konsisten

akan mengurangi kebingungan, dan penggunaan

kata benda yang singkat tetapi tidak mendua
seringkali sudah memadai.

 Studi yang dilakukan oleh Teitelbaum dan Granda

(1983) menunjukkan bahwa pengguna memerlukan
waktu dua kali lebih lama untuk memilih menu yang
sama ketika posisi menunya berpindah-pindah
dibandingkan jika posisi menunya tetap. Dengan

demikian perancang harus berusaha sebisa mungkin

untuk menempatkan menu yang sama pada posisi
yang sama.

 Judul Menu
Pemilihan Ungkapan
Tata letak Grafik.

Beberapa aturan berikut ini sepertinya sudah jelas, tetapi

ada baiknya ditulis kembali, karena hal itu paling banyak
dilanggar:
Gunakan terminologi yang sudah dikenal dan konsisten.
Pastikan bahwa setiap pilihan berbeda satu dengan yang

lain.
Gunakan ungkapan yang singkat tetapi jelas dan
konsisten.
Gunakan kata kunci sebagai awal ungkapan.

 Judul Menu
Pemilihan Ungkapan
Tata letak Grafik.

Perancang menu harus mempunyai pedoman untuk

menjaga konsistensi paling tidak untuk komponen
menu berikut ini:
1. Penulisan judul. Beberapa pengguna lebih menyukai
judul yang ditulis rapi tengah, tetapi rapi kiri biasanya

lebih

disukai,

terutama

untuk

mempunyai kecepatan rendah.

tampilan

yang

2. Penempatan pilihan. Biasanya pilihan ditulis rapi kiri,

dengan nomor atau huruf tertentu yang mendahului
judul pilihan secara lengkap. Baris kosong seringkali
digunakan

untuk

memisahkan

kelompok

pilihan

tertentu. Jika menggunakan banyak kolom, penomoran

atau penggunaan huruf harus tetap konsisten.

3. Petunjuk. Petunjuk untuk setiap menu, jika ada,

harus seragam untuk setiap pilihan yang ada dan harus
ditempatkan diposisi yang sama. Aturan ini juga
digunakan untuk petunjuk tentang penelusuran,
pertolongan, atau penggunaan tombol fungsi.

4. Pesan kesalahan. Ketika pengguna memilih pilihan

yang tidak dapat diterima, pesan kesalahan harus
muncul pada posisi yang konsisten dan penggunaan
istilah serta sintaksisnya juga harus konsisten.
5.Laporan

status.

Sejumlah

sistem

mempunyai

semacam tanda yang menunjukkan dari menu yang

sedang dikunjungi, halaman yang sedang dilihat, atau
pilihan yang harus dipilih untuk menyelesaikan suatu
tugas. Informasi ini harus muncul pada posisi yang
konsisten dan juga harus mempunyai struktur yang

konsisten

Penggunaan berbagai gambar, jenis huruf, ukuran font

yang

berbeda,

dan

teknik

penyorotan

sangat

membantu pengguna untuk mengetahui menu yang

sedang dipilih.
Pada menu yang bertumpuk atau menu berjalan

(karena pengguna, pada satu saat harus berjalan

melewati beberapa tingkat) secara perseptual sangat
bermanfaat, tetapi akan menimbulkan tantangan
motorik kepada pengguna karena pengguna harus
menggerakkan kursor ke arah yang sesuai.

TERIMA KASIH