MODUL 1

ANTARMUKA MANUSIA DAN KOMPUTER

Prinsip dasar sebuah Manusia komputer adalah masukan, proses, keluaran (input,
process, output). Manuasia sebagai pengguna (user) komputer, memberikan data
masukan kepada komputer. Data masukan biasanya berupa angka maupun deretan
karakter. Data masukan ini kemudian diolah atau diproses oleh komputer menjadi
keluaran yang diinginkan atau diharapkan oleh pengguna.
Ketika seseorang bekerja dengan sebuah komputer, secara disadari atau tidak, dia
akan melakukan interaksi dengan komputer menggunakan cara-cara tertentu. Interaksi
terjadi ketika pengguna memasukkan data, yang kemudian akan ditanggapi oleh
komputer dengan menampilkan suatu keluaran ke layar tampilan atau ke pencetak. Dari
jargon "masukan, proses, keluaran" di atas, pengguna memang tidak tahu menahu (atau
tidak ingin tahu) dengan proses yang sesungguhnya terjadi di dalam sistem komputer.
Dengan kata lain, lewat masukan dan keluaranlah pengguna dan komputer saling
berinteraksi.

A. ANTARMUKA MANUSIA – KOMPUTER

Interaksi antara pengguna dan komputer dapat terjadi jika tersedia media
interaksi. Media ini diperlukan agar pengguna dan komputer dapat saling
berinteraksi. Media interaksi ini diwujudkan dalam bentuk antarmuka (interface).
Antarmuka yang dirancang dengan baik membuat pengguna merasakan keramahan
sistem komputer yang digunakannya. Contoh yang sering kita jumpai adalah
antarmuka dari paket Microsoft Office. Antarmuka ini sangat membantu pengguna
mengenal sistem dengan cepat.
Pada Gambar 1.1 terlihat konsistensi dalam tampilan dan fitur paket Microsoft
Office. Konsistensi merupakan salah satu faktor yang diperlukan untuk membuat
antarmuka yang user-friendly. Setelah pengguna mempelajari salah satu aplikasi,
maka pengguna dapat mempelajari dengan mudah aplikasi lainnya. Pengguna tidak
perlu mempelajari antarmuka dari awal lagi, namun hanya mempelajari fitur yang
dimaksudkan untuk aplikasi tertentu karena hal lainnya telah dia pelajari.
 Gambar 1.1
Contoh Microsoft Office

Interaksi manusia dan komputer juga dapat digambarkan melalui contoh

program sederhana. Pada Gambar 1.2 diberikan contoh sederhana yang ditulis
menggunakan bahasa pemrograman Python. Dalam program tersebut, dapat diIihat
contoh sederhana interaksi, yaitu ketika pengguna menerapkan statemen
raw_input dan/atau input. Ketika komputer mengolah statemen ini, komputer
meminta pengguna untuk memasukkan data ke komputer. Selanjutnya, statemen
print digunakan untuk mencetak hasil proses yang telah dikerjakan oleh komputer.
Gambar 1.2 menunjukkan contoh penggunaan statemen raw_input, input, dan print
pada bahasa pemrograman Python yang digunakan untuk meminta masukan dari
pengguna dan mencetak keluaran hasil eksekusi program.
 Gambar 1.2
Contoh Program Sederhana Phyton

1. Ketika program dijalankan, maka pada Iayar pertama kali akan terlihat pesan
Nama Anda? Dengan pesan ini, komputer meminta pengguna memasukkan
sembarang kombinasi karakter yang akan dianggap atau diterima sebagai nama
pengguna.
2. Setelah pengguna memasukkan namanya, pesan kedua, yaitu Alamat Anda? akan
muncul. Dalam hal ini, komputer kembali meminta pengguna untuk memasukkan
data yang akan dianggap sebagai alamat pengguna.
3. Selanjutnya pesan Usia Anda? akan muncul. Di sini, pengguna diminta
memasukkan usia pengguna.
4. Setelah pengguna mengisikan data yang diminta, komputer akan menampilkan
hasilnya.

B. INTERAKSI MANUSIA-KOMPUTER
Interkasi Manusia dan Komputer merupakan sebuah disiplin ilmu yang
mempelajari tentang perancangan, implementasi, dan evaluasi sistem komputasi
interaktif, dan berbagai aspek terkait, yang didukung oleh berbagai disiplin ilmu lain,
antara lain Ilmu Komputer, Psikologi, Antropologi, Sosiologi, Teknik Elektronika,
Linguistik, Perancangan Industri.
Dari sudut pandang ilmu komputer IMK membahas tentang perancangan
aplikasi dan rekayasa/perancangan antarmuka agar dapat digunakan oleh manusia
dengan mudah. Dalam hal ini menyangkut pemilihan program bantu pendukung,
Bahasa pemrograman, teknik pemrograman, serta bidang ilmu komputer lain,
seperti pengolahan bahasa alami, struktur data, basis data, dan Iain-lain.
Selain itu, perlu juga diketahui bahwa IMK berurusan dengan kinerja gabungan
antara manusia dan mesin; struktur komunikasi antara manusia dan mesin,
kemampuan manusia menggunakan mesin (termasuk kemampuan untuk dipelajari
dari antarmuka yang digunakan); algoritma dan pemrograman antarmuka; isu-isu
rekayasa yang muncul pada saat merancang dan membangun antarmuka; proses
spesifikasi, perancangan dan implementasi antarmuka; serta biaya perancangan.

Konteks interaksi manusia dan komputer

Konteks interaksi manusia dan komputer dikenal dengan UHCD yaitu:

1) U merupakan pengguna (user)
a. U1, organisasi sosial dan lingkungan kerja, meliputi aspek sosial dan
organisasi, kultur kerja, alur kerja, hierarki organisasi, aktivitas
global organisasi dan kebutuhan organisasi.
b. U2, pengguna yang menggunakan aplikasi untuk memenuhi
kebutuhan tertentu
c. U3, proses adaptasi manuasi dan komputer
a. adaptasi sistem: kostumisasi system
b. adaptasi pengguna: kenyamanan belajar, metode pelatihan
c. panduan penggunaan
2) H merupakan manusia (human)
a. H1, pemrosesan informasi pada manusia
 a. bagaimana agar sistem mudah dipahami, dipelajari dan
digunakan
b. ingatan, persepsi, perhatian, penyelesaian masalah,
pembelajaran dan perolehan kemahiran, motivasi
b. H2, penggunaan bahasa, cara komunikasi dan interaksi manusia
terhadap mesin
a. penggunaan bahasa untuk menciptakan interaksi manusia
terhadap mesin
b. penggunaan bahasa untuk menciptakan interaksi yang nyaman
c. penggunaan bahasa: syntax, semantik, pragmatic
d. penggunaan bahasa khusus (simbol, interaksi dalam bentuk
grafik, dll)
c. H3, Faktor Ergonomi
a. aspek kenyamanan dalam penggunaan system
b. penyusunan tampilan layer
c. sensor dan efek persepsi teknologi tampilan layer
d. kognitif dan keterbatasan sensor manusia
e. kelelahan dan kesehatan pengguna
3) C merupakan komputer (computer)
a. C1, piranti masukan dan keluaran
a. konstruksi teknis peralatan input-output yang menghubungkan
manusia dan mesin/komputer
b. C2, berbagai teknik dialog, interaksi dapat dilihat sebagai dialog
antara manusia dan komputer
c. C3, model/gaya dialog
a. penggunaan gaya atau metode dalam interaksi manusia-
komputer
b. gaya interaksi yang umum dipakai: antarmuka baris perintah
(command line), bahasa sehari-hari (natural language),
pertanyaan/jawaban dan dialog pertanyaan (query), WIMP
(Windows, Icons, Menus, and Pointers)
d. C4, komputer grafik: konsep dasar pada tampilan grafis komputer
a. geometri 2 dan 3 dimensi, transformasi linear
b. tampilan warna
c. teknik-teknis grafika komputer yang lain
e. C5, merancang dialog secara keseluruhan (arsitektur dialog)
a. multiuser interface architecture
b. window manager models
4) D merupakan proses pengembangan (development)
a. D1, pendekatan desain: penggunaan metode pengembagan software
b. D2, teknis dan kakas untuk implementasi
• metode implementasi, pembuatan prototype, representasi data
dan algortima
c. D3, teknik evaluasi
• mengevaluasi kualitas sofware yang dihasilkan
• tes tingkat penggunaan dan fungsionalitas sistem
• dapat dilakukan di laboratorium, lapangan dan dalam kolaborasi
dengan pengguna
• evaluasi baik dalam desain dan implementasi
d. D4, contoh sistem dan studi kasus
 MODUL 2
MODEL SISTEM PENGOLAHAN PADA MANUSIA DAN KOMPUTER

A. MODEL SISTEM PENGOLAHAN

Untuk merancang sistem IMK yang baik, perlu mempertimbangkan
pemahaman tentang aspek teknis komputer dan juga pemahaman tentang
bagaimana manusia mengolah informasi. Komputer biasanya dimodelkan dengan
elemen-elemen seperti pengolah pusat, pengingat asosiatif, dan pengontrol
peranti masukan/keluaran untuk memungkinkan komunikasi antar komponen
dan dengan dunia nyata.
Dalam proses perancangan IMK, perancang juga perlu memodelkan manusia
dengan pendekatan serupa, meskipun ini lebih kompleks karena manusia
memiliki karakteristik yang bervariasi, sulit diprediksi, kurang konsisten, dan
kurang deterministik dibandingkan dengan komputer. Dalam merancang IMK,
perlu mempertimbangkan keanekaragaman karakteristik manusia, termasuk
aspek kognitif, fisik, sosial, dan budaya.
Secara umum, perbandingan kecakapan relatif antara manusia dan
komputer dapat dilihat pada Tabel di bawah ini

Perbandingan Kecakapan Relatif Manusia dan Komputer

Kecakapan Manusia Kecakapan Komputer
1. Estimasi 1. Kalkulasi akurat
2. Intuisi 2. Deduksi logika
3. Kreativitas 3. Aktivitas perulangan
4. Adaptasi 4. Konsistensi
5. Kesadaran serempak 5. Pekerjaan serempak
6. Pengolahan 6. Pengolahan rutin
abnormal/pengecualian 7. Penyimpan dan pemanggil
7. Pengingat asosiatif kembali data
8. Pengambilan keputusan non 8. Pengambilan keputusan
deterministic deterministic
9. Pengenalan pola 9. Pengolahan data
10. Pengetahuan tentang dunia 10. Pengetahuan tentang domain
11. Kesalahan manusiawi 11. Bebas dari kesalahan

Manusia maupun komputer memiliki peranti masukan, sistem pengolah, dan

peranti keluaran. Selama interaksi, manusia menggunakan peranti masukan
seperti papan ketik atau mouse, mengirimkan data atau memilih menu, dan
hasilnya ditampilkan di layar. Manusia memantau keluaran komputer melalui
sensor-sensor seperti penglihatan dan pendengaran, dan hasil ini diproses dalam
sistem pengolah kognitif manusia. Hasilnya adalah tanggapan manusia terhadap
layar, misalnya dengan mengetik pada papan ketik untuk memulai interaksi
berikutnya.
Sistem pengolahan dalam diri manusia sangat kompleks, dan meskipun sulit
untuk dimodelkan dengan lengkap, kita dapat menggunakan pendekatan yang
membagi sistem pengolahan manusia menjadi pengolahan perceptual, intelektual
(kognitif), dan motorik, semuanya berinteraksi dengan pengingatan manusia.
Model ini dibandingkan dengan model sistem komputer konvensional yang
memiliki pengolah, pengingat, dan interaksi melalui bus. Perbandingan ini
dimaksudkan untuk memahami cara kerja komputer dan sistem pengolahan
manusia meskipun tidak mencerminkan secara akurat kompleksitas operasi otak
manusia yang sebenarnya.

Gambar 2.1
Model Sistem Pengolahan pada Manusia dan Komputer
B. ASPEK INTERAKSI MANUSIA-KOMPUTER
Pentingnya mempertimbangkan indera penglihatan, dan pendengaran
dalam menciptakan antarmuka yang dapat diakses oleh beragam pengguna
dengan berbagai kondisi dan kebutuhan. Ini termasuk pengguna dengan
gangguan penglihatan atau pendengaran, serta pengguna dalam situasi
lingkungan yang bervariasi. Dengan mendesain antarmuka dengan
memperhatikan ketiga aspek ini, pengalaman pengguna dapat ditingkatkan secara
signifikan dalam hal inklusivitas dan efektivitas.

1. Indera Penglihatan
Pengguna melalui indera penglihatan memproses informasi melalui
tampilan visual. Oleh karena itu, antarmuka pengguna harus dirancang dengan
memperhatikan faktor seperti kontras, ukuran teks yang dapat disesuaikan,
dan pemilihan warna yang memperhitungkan aksesibilitas.
Pemilihan warna dalam menampilkan informasi sangat penting untuk
interaksi manusia dan komputer yang efektif. Pemahaman penggunaan warna
adalah kunci dalam menjaga layar tampilan warna dapat diterima oleh
pengguna. Warna dapat meningkatkan interaksi hanya jika digunakan dengan
memperhatikan prinsip dasar tentang bagaimana manusia memahami dan
merespons warna.
Pemahaman tentang psikologi warna, kontrast, keterbacaan, dan
konsistensi dalam penggunaan warna adalah elemen-elemen penting dalam
merancang antarmuka pengguna yang efektif. Warna yang digunakan dengan
bijak dapat memperkaya pengalaman pengguna dan membantu
menyampaikan informasi dengan lebih baik. Namun, penggunaan warna yang
tidak tepat atau berlebihan dapat membingungkan pengguna dan mengurangi
keterbacaan informasi.
 KOMBINASI WARNA TERBAIK

KOMBINASI WARNA TERJELEK

Berikut ini disajikan sejumlah tinjauan kombinasi warna dilihat dari

berbagai aspek yang dapat dikatakan sebagai saran penggunaan warna untuk
mendapatkan kombinasi warna yang sesuai dan nyaman.
a. Aspek Psikologis
• Hindari penggunaan tampilan yang secara bersamaan menampilkan
sejumlah warna tajam. Merah, jingga, kuning, dan hijau dapat dilihat
bersama-sama tanpa perlu pemfokusan kembali. tetapi cyan, biru dan
merah tidak dapat dilihat secara serempak dengan mudah. Pemfokusan
kembali mata yang berulang-ulang menyebabkan kelelahan
penglihatan.
• Hindari warna biru murni untuk teks, garis tipis, dan bentuk yang kecil.
Sistem penglihatan mata kita tidak diatur untuk rangsangan yang
terinci, tajam, serta bergelombang pendek.
 • Hindari warna berdekatan yang hanya berbeda dalam hal komponen
wama biru. Sudut-sudut yang berbeda hanya pada prosentase
komponen warna biru akan terlihat sama.
• Untuk membedakan wama, pengamat yang lebih tua memerlukan
tingkat ketajaman yang lebih tinggi.
• Warna akan berubah penampakannya ketika cahaya sekeiiling
berubah. Tampilan akan berubah warna di bawah cahaya sekeiiling
yang berbeda, Penampakan juga berbeda ketika tingkat cahaya
bertambah atau berkurang. Di satu sisi, perubahan terjadi karena
adanya penambahan atau penurunan kontras, dan di sisi lain
perubahan terjadi karena adanya pergeseran sensitivitas mata.
• Besarnya perubahan warna yang dapat dideteksi bervariasi untuk
warna yang berbeda. Perubahan kecil dalam warna merah dan ungu
sukar dideteksi dibandingkan dengan warna lain sepcrti kuning dan
biru-hijau. Selain itu, sistem penglihatan kita tidak siap untuk
merasakan perubahan wama hijau.
• Hindari wama merah dan hijau yang ditempatkan secara
berseberangan pada tampilan berskala besar. Warna yang lebih cocok
adalah biru dan kuning.
• Warna yang berlawanan dapat digunakan bersama-sama. Merah
dengan hijau, atau kuning dengan biru, merupakan kombinasi yang
baik untuk tampilan sederhana. Kombinasi merah dengan kuning, atau
hijau dengan biru, menghasilkan citra yang lebih jelck.
• Untuk pengamat yang mempunyai kelemahan dalam melihat warna,
hindarkanlah perubahan warna tunggal.
b. Aspek Perseptual
• Tidak semua warna mempunyai discernible yang sama. Secara
perseptual, kita memerlukan perubahan yang besar dalam panjang
gelombang agar kita dapat merasakan perubahan warna pada suatu
bagian spektrum, dan perubahan yang lebih kecil pada bagian spektrum
yang lain.
• Luminansi tidak sama dengan kecerahan. Dua luminansi yang sama
tetapi berbeda dalam hal warna hue akan mempunyai kecerahan yang
berbeda. Deviasinya akan semakin jelas pada wama-warna yang ada di
ujung spektrum (merah, magenta, biru).
• Hue yang berbeda menyebabkan tingkat saturasi yang berbeda.
• Ketajaman (lightness) dan kecerahan dapat dibedakan pada bentuk
tercetak, tetapi tidak pada tampilan warna. Sifat alamiah layar tampilan
tidak memungkinkan ketajaman dan kecerahan bervariasi secara saling
bebas.
• Tidak semua warna mudah dibaca. Secara umum, pemakaian warna-
warna latar belakang yang cenderung lebih gelap seperti merah, biru,
 magenta, coklat, dan lain-lain akan memberikan penampakan yang lebih
baik dibanding warna yang lebih cerah.
• Hue berubah sesuai dengan perubahan intensitas warna dan latar
belakang.
• Hindarkan adanya diskriminasi warna pada daerah yang kecil. Informasi
tentang hue pada daerah yang kecil akan hilang. Secara umum, dua garis
berdampingan yang mempunyai lebar 1 piksel akan nampak sebagai
sebuah garis dengan lebar 2 piksel. Selain itu perlu juga diingat bahwa
sistem penglihatan manusia mcnghasilkan citra yang lebih tajam pada
warna akromatis. Sehingga, untuk memberikan kerincian yang bagus,
gunakan warna hitam, putih, dan abu-abu, dan gunakanlah warna
kromatis untuk panel yang lebih besar atau untuk menarik perhatian
pengguna.
c. Aspek Kognitif
• Jangan menggunakan warna secara berlebihan. Barangkali aturan yang
terbaik adalah menggunakan warna secara berpasangan. Penggunaan
warna terutama ditujukan untuk menarik perhatian, atau untuk
pengelompokan informasi. Keuntungan ini akan hilang jika warna yang
digunakan terlalu banyak.
• Waspadaiah terhadap manipulasi warna secara tak linear pada layar
tampilan dan bentuk cetakan.
• Kelompokkan elemen-elemen yang saling berkaitan dengan latar
belakang yang sama.
• Warna yang sama "membawa" pesan serupa.
• Kecerahan dan saturasi akan menarik perhatian.
• Urutkan warna sesuai dengan posisi spektralnya.
• Warna hangat dan dingin soring digunakan untuk menunjukkan tingkat
tindakan. Warna yang hangat (memiliki panjang gelombang besar),
biasanya digunakan untuk menunjukkan adanya tindakan atau
tanggapan yang diperlukan. Warna yang dingin biasanya digunakan
untuk menunjukkan status atau informasi latar belakang. Wama-wama
yang hangat akan nampak lebih mendekat ke arah pengguna, sementara
untuk warna yang dingin cenderung menjauhi pengguna.

2. Indera Pendengaran
Meskipun penglihatan adalah aspek utama, suara juga memiliki peran yang
signifikan dalam interaksi manusia dengan komputer. Pengembangan
komunikasi interaktif antara komputer dan manusia menggunakan media
suara adalah suatu kemungkinan. Dengan teknologi seperti digital signal
processing (DSP), penggunaan suara dalam interaksi komputer manusia dapat
berkembang lebih lanjut.
 Manusia memiliki kemampuan mendengar dalam rentang frekuensi 20
Hertz hingga 20 KHz. Namun, batas-batas ini dapat dipengaruhi oleh faktor
seperti usia dan kesehatan individu. Pendengaran manusia lebih sensitif
terhadap suara dalam rentang frekuensi 1000-4000 Hertz. Selain itu, tingkat
kebisingan (loudness) suara juga memainkan peran penting dalam bagaimana
kita mendengar suara. Mendengar suara dengan tingkat kebisingan di atas 140
dB dapat menyebabkan kerusakan pada telinga manusia. Penting untuk
menjaga telinga dari paparan suara yang terlalu keras.
Setiap individu memiliki sensitivitas yang berbeda terhadap frekuensi dan
kebisingan suara. Selain itu, sensitivitas ini juga dapat berubah seiring waktu.
Penggunaan suara dalam interaksi manusia dan komputer memiliki potensi
untuk menyebabkan kebingungan pengguna. Oleh karena itu, perancangan
yang cermat diperlukan untuk mengintegrasikan suara ke dalam aplikasi dan
program dengan baik.

3. Lingkungan Sekitar
Selain memperhatikan panca indera manusia, persepsi, kognitif dan
pengendalian motorik, seorang perancang sistem perlu memperhatikan
berbagai aspek yang berkaitan dengan lingkungan sekitar, seperti lingkungan
sosial dan kognitif, tempat pengguna bekerja. Dengan mengkombinasikan
kemampuan yang dimiliki oleh setiap individu dan dengan mengingat
berbagai keuntungan dan resiko dari lingkungan sekitar, maka sasaran utama
perancangan interaktif dapat lebih mudah dicapai.
 MODUL 3
ANTARMUKA BERBASIS MENU

Pengorganisasian menu menjadi hal yang sangat penting dalam sebuah

perancangan sistem, dengan adanya menu yang terorganisir akan memudahkan
pengguna dalam berinteraksi dengan sistem.
Perancangan menu dapat bervariasi di antaranya dengan merancang menu tunggal,
menu berurutan linier, menu struktur pohon, jaring menu tak berputar, dan jaring menu
berputar. Menu yang soring dijumpai pada sistem adalah menu tunggal yang terdiri dari
menu datar dan selektorpilihan, menu tarik, menu berbasis ikon dan toolbar, menu
dengan pilihan yang panjang, menu dan hotlink tertanam, menu breadcrumb. Jenis menu
lain yaitu menu kombinasi yang terdiri dari menu linear dan menu serempak, menu
berstruktur pohon, peta situs, jaring menu tak berputar dan berputar.

Gambar 3.1
Skema Berbagai Jenis Menu

A. MENU TUNGGAL
1. Menu Datar dan Selektor Pilihan
Pada pertengahan tahun 1995 ketika ragam interaksi belum begitu banyak
dijumpai, dan perkembangan teknologi grafis belum secanggih sekarang,
kebanyakan sistem menu masih menuliskan piiihan-pilihan yang tersedia
menggunakan keseluruhan layar. Ragam menu seperti ini disebut dengan menu
datar. Cocok untuk sistem dengan sedikit opsi yang tidak perlu struktur hierarkis
yang dalam.
 Gambar 3.2
Contoh Menu Datar

2. Menu Tarik (Dropdown)

Menu tarik (dropdown) adalah menu yang selalu tersedia bagi pengguna,
biasanya diletakkan di bagian atas jendela (Gambar 3.3). Jenis menu ini pertama
kali diperkenalkan oleh Xerox Star, Apple Lisa, dan Apple Macintosh. Jenis menu
ini sekarang menjadi sangat popular, terutama untuk aplikasi-aplikasi untuk
Windows, Macintosh, dan juga Linux. Pilihan umum yang sering dijumpai adalah
File, Edit, View, dan Help, selain pilihan-pilihan lain yang tergantung dari
aplikasinya.
Sebagai contoh, pada Gambar 3.3. ditunjukkan bahwa ketika pengguna meng-
klik menu Insert, maka pengguna akan melihat sederetan pilihan dari menu Insert
lersebut, yaitu Break, Page Numbers, Date and Time, dan seterusnya. Pengguna
dapat memilih salah satu pilihan dengan mcnggcrakkan pcranti penuding, dan
sistem akan mcrcsponnya dengan menampilkan penyorot (highlight marker) pada
salah satu pilihan. Dengan meng-klik pilihan yang disorot, maka pilihan tersebut
akan diaktifkan.
 Gambar 3.3
Contoh Menu Tarik dari Microsoft Word
yang Dijalankan pada Macintosh OS X Leopard

3. Menu Berbasis Ikon dan Toolbar

Menu berbasis ikon dan toolbar menawarkan berbagai kemudahan kepada
pengguna untuk mengaktifkan suatu aplikasi dengan cara meng-klik pilihan
tertentu. Jenis menu ini pertama kali digunakan dalam aplikasi untuk
menggambar dan perancangan terbantu komputer, namun sekarang hampir
semua program aplikasi menggunakannya. Gambar 3.4.a dan Gambar 3.4.b
menunjukkan contoh menu berbasis ikon dan toolbar.
Sebuah program aplikasi sering mempunyai jumlah pilihan menu yang
sangat banyak. Jika semua menu ditampilkan, selain membingungkan pengguna,
hal ini juga mengurangi ruang kerja pengguna. Sehingga, pada kedua jenis menu
di atas, perancang harus menyediakan fasilitas untuk memuncul-hilangkan
pilihan-pilihan tertentu sesuai dengan keinginan pengguna. Dengan cara ini,
pengguna akan mempunyai kebebasan untuk memilih menu apa saja yang
muncul di layar, dan tidak harus selalu sama.

Gambar 3.4
Contoh Menu Berbasis Ikon dan Toolbar
 Secara teknis, menu berbasis ikon boleh dikatakan merupakan variasi dari
menu berbasis teks, misalnya pada menu tarik. Sebuah pilihan, yang menyatakan
suatu aktivitas tertentu, pada menu tarik diungkapkan dengan menggunakan satu
atau dua kata. Pada menu berbasis ikon, pilihan tersebut dinyatakan dalam suatu
gambar.

4. Menu dengan Pilihan yang Panjang

Seringkali terdapat menu yang mempunyai pilihan yang sangat panjang, dan
sangat tidak mungkin untuk ditampilkan seluruhnya sekaligus. Sebagai contoh,
menu negara yang berisi nama-nama negara yang sangat panjang, atau daftar font
yang semakin lama juga semakin panjang. Jika pilihan yang ada dapat
dikelompokkan menjadi beberapa kategori, mereka dapat diimplementasikan
menggunakan struktur pohon. Tetapi hal ini tidak selalu diinginkan, atau meskipun
dikelompokkan dalam kategori tertentu, masing-masing kategori tetap berisi daftar
pilihan yang panjang.
Ada beberapa cara yang dapat dilakukan untuk menampilkan menu dengan
daftar pilihan yang panjang berikut.
a. Menu Gulung
Pada menu gulung {scrolling menu), sejumlah pilihan akan ditampilkan
sesuai dengan ukuran daerah kerja layar tampilan yang dapat digunakan.
Pada menu gulung, baris pertama dan baris terakhir biasanya digunakan
sebagai penggulung untuk menampilkan pilihan sebelumnya atau
sesudahnya.

Gambar 3.5
Contoh Menu Gulung
b. Kotak Kombo
Apabila tempat yang tersedia untuk menampilkan pilihan terlalu kecil,
atau penggunaan menu gulung tidak dikehendaki, maka perancang dapat
menggunakan kotak kombo untuk menampilkan pilihan yang ada. Pada kotak
kombo, pengguna akan melihat adanya penggulung, yang biasanya
ditempatkan di sisi kanan kotak kombo tersebut, untuk menampilkan pilihan
yang tidak terlihat.
Gambar 3.6 menunjukkan contoh dari dua buah kotak kombo, Pada
kotak kombo di sebelah kanan, penggulungnya dinon-aktifkan, karena
pilihan yang ada semuanya dapat ditampilkan pada ruangan yang tersedia.
Scmcntara itu, pada kotak kombo di sebelah kiri, penggulungnya terlihat jelas
karena ada pilihan yang tersembunyi.

Gambar 3.6
Contoh Kotak Kombo

c. Menu Mata Ikan

Alternatif lain yang dapat digunakan untuk sekaligus menampilkan
pilihan yang cukup panjang adalah dengan suatu teknik yang disebut menu
mata ikan (Bederson, 2000). Dalam menu mata ikan, semua pilihan
ditampilkan, hanya saja piliban-pilihan yang terletak jauh dari posisi
kursor/penyorot akan ditampilkan dengan menggunakan font atau ikon
berukuran kecil, sementara pilihan yang dekat dengan posisi
kursor/penyorot akan ditampilkan menggunakan font atau ikon berukuran
normal.
Gambar 3.7 menampilkan contoh menu mata ikan menggunakan ikon
yang terdapat pada Macintosh OS X Leopard yang disebut dengan Dock

Gambar 3.7
Contoh Menu Mata Ikan pada Dock Macintosh OS X Leopard
d. Penggeser
Ketika pengguna harus memilih suatu nilai yang terletak di antara dua
batas, penggunaan penggeser merupakan pilihan yang tepat. Batas nilai yang
dapat dipilih juga dapat diimplementasikan menggunakan penggeser dua
sisi. Pengguna memilih nilai tertentu dengan cara menggeser tanda pemilih
di sepanjang penggeser tersebut.
Gambar 3.8 menunjukkan beberapa variasi penggeser dari berbagai
program aplikasi.

Gambar 3.8
Berbagai Variasi Penggeser

e. Menu Dua Dimensi

Alternatif lain yang dapat digunakan untuk menampilkan menu tunggal
dalam jumlah yang banyak adalah menggunakan menu dua dimensi. Pilihan-
pilihan yang tersedia disusun menjadi sejumlah bans dan kolom seperti
sebuah label. Dengan cara ini, pengguna dapat melihat dengan jelas pilihan
yang tersedia. Menu jenis ini banyak sekali dimanfaatkan untuk perancangan
halaman situs Web. Hal ini digunakan untuk mengurangi proses
penggulungan layar karena jumlah menu yang banyak. Gambar 3.9
menunjukkan contoh menu dua dimensi dari salah satu situs Web
(www.hmv.com).
 Gambar 3.9
Contoh Menu Dua Dimensi

5. Menu dan Hotlink Tertanam

Semua jenis menu tunggal yang telah kita bahas termasuk jenis menu
eksplisit, yaitu yang pilihannya tersusun rapi menurut urutan tertentu. Dalam
keadaan tertentu, pilihan yang ada sering ditanam (embedded) pada suatu teks
atau foto/citra. Hal ini disebabkan karena tidak ada Iokasi khusus yang dapat
digunakan untuk menempatkan pilihan yang tersedia.
Sebagai contoh Gambar 3.10 menunjukkan contoh menu tertanam 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 meng-klik balon kecil berwarna biru tersebut,
beberapa informasi penting akan muncul.
 Gambar 3.10
Contoh Menu “Tertanam” pada Citra Satelit

6. Menu Breadcrumb
Ketika pengguna berselancar di dunia maya dengan cara mengunjungi situs
web, tidak tertutup kemungkinan dia merasa tersesat dan tidak tahu apa yang
harus dia lakukan, Beberapa peneliti, misalnya Otter and Johnson (2000),
menyebut fenomena ini dengan istilah disorientasi atau tersesat di dunia maya.
Untuk membantu pengguna mengetahui posisinya saat itu, menu breadcrumb
soring digunakan.
Menu breadcrumb digunakan untuk menampilkan jejak sambungan kepada
pengguna. Berdasarkan template yang digunakan, menu breadcrumb dapat
berupa daftar sambungan atau ditampilkan sebagai jalur crumb. Gambar 3.11
menunjukkan contoh menu breadcrumb.

Gambar 3.11
Contoh Menu Breadcrumb

Menurut Nielsen, menu breadcrumb merupakan bantuan navigasi kedua,

sama seperti halnya peta situs (sitemap). Dalam keadaan biasa, pengguna situs
akan menggunakan menu dan kotak pencarian, yang jelas-jelas sangat penting
untuk faktor kebergunaan. Tetapi dari waktu ke waktu, para pengunjung situs
mulai menggunakan peta situs atau menu breadcrumb ketika navigasi utamanya
tidak sesuai dengan keinginan mereka.
B. MENU KOMBINASI
Sejumlah menu dapat dikombinasikan secara linear maupun disajikan secara
serempak. Strategi yang biasa digunakan adalah menyusun menu-menu tersebut
menggunakan struktur pohon. Menu-menu juga dapat disusun secara jaring tak
berputar maupun jaring berputar.

1. Menu Linear dan Menu Serempak

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. Sebagai contoh, jika kita
ingin memesan pizza secara online, maka dengan menggunakan antarmuka yang
tersedia, kita akan diminta untuk memilih ukuran pizza yang akan dipesan (kecil,
sedang, besar), ketebalan (tipis, normal, tebal), dan ramuan atau topping yang
diinginkan.
Contoh lain adalah pemesanan tiket secara online. Saat pertama kali
seseorang memesan tiket, dia terlebih dulu harus memilih apakah tiketnya untuk
sekali jalan atau pergi-pulang, dilanjutkan dengan memilih tanggal penerbangan,
jumlah tiket yang akan dibeli (termasuk apakah ada bayi atau anak-anak). Setelah
calon pembeli tiket meng-klik tombol cari pada situs tersebut, maka kepadanya
akan disajikan sejumlah pilihan penerbangan, baik untuk tanggal yang berbeda
maupun kelas tempat duduknya, selanjutnya calon pembeli tiket akan diminta
untuk mengisi identitas dan beberapa informasi yang relevan dengan calon
penumpang, cara pembayaran, sampai kepada pencetakan tiket elektroniknya.
Dua contoh di alas menunjukkan bagaimana menu yang disusun secara
linear membantu pengguna untuk mengambil keputusan setahap demi setahap,
sampai kepada keputusan akhir. Cara ini terutama akan sangat berguna bagi
pengguna mula.
Pada menu serempak, pengguna akan dihadapkan pada antarmuka yang
memuat berbagai pilihan dan memungkinkan pengguna untuk memilih
sembarang menu yang ada secara bebas (Gambar 3.12). Jenis menu ini
memerlukan kapling (space) yang besar, sehingga kadang-kadang tidak cocok
untuk jenis tampilan dan struktur menu tertentu. Tetapi, dari sebuah studi
menunjukkan bahwa pengguna ahli yang melakukan tugas yang rumit sangat
terbantu dengan tersedianya menu serempak (Hochheiser dan Shneiderman,
1999).
 Gambar 3.12
Contoh Menu Serempak dari www.amazon.com

2. Menu Berstruktur Pohon

Ketika jumlah pilihan semakin besar sehingga menjadi lebih sukar untuk
dipelihara, perancang dapat mengelompokkan pilihan-pilihan tersebut
berdasarkan kriteria tertentu. Dengan cara ini, akan tercipta struktur pohon.
Sejumlah pilihan dapat dengan mudah dikelompokkan menjadi sejumlah kategori
terpisah dengan pembeda yang unik. Sebagai contoh, toko kelontong online dapat
dikategorikan berdasar hasil bumi, daging, produk pembersih, dan lain-lain. Hasil
bumi, selanjutnya, dapat dikelompokkan menjadi sayuran, buah-buahan, kacang-
kacangan. Produk pembersih. misalnya, dapat dikelompokkan menjadi keperluan
mandi, keperluan mencuci, dan lain-lain.
Struktur pohon mempunyai keuntungan yang membuatnya mampu
menampilkan informasi dalam jumlah besar kepada pengguna mula atau
pengguna yang tidak selalu aktif. Sebagai contoh, jika setiap menu mempunyai 30
pilihan, maka pohon dengan 4 tingkat dapat membawa pengguna mula ke 810.000
tujuan yang berbeda. Angka ini tentulah sangal fantastis apabila kita
menerapkannya pada pengolah kata, tetapi menjadi lebih realistik apabila
diterapkan pada aplikasi berbasis Web, seperti koran (www.kompas.com),
perpustakaan (www.loc.gov), atau portal Web seperti Yahoo! (www.yahoo.com).

3. Peta Situs
Pengguna akan semakin mengalami kesulitan untuk menentukan posisinya
ketika kedalaman menu bertambah. Situasi ini sering disebut dengan
disorientasi atau tersesat (Conklin, 1986). Pada dasarnya, menurut Conklin,
 seorang pengguna disebut mengalami disorientasi atau tersesat apabila dia tidak
mengetahui:
a. posisinya (di dalam situs Web),
b. apakah ada titik tuju yang diinginkan
c. cara menuju titik tuju yang diinginkan

Persoalan di atas terjadi karena pengguna tidak mengetahui secara tepat

struktur situs Web yang dia kunjungi. Untuk membantu pengguna memahami
struktur situs Web yang dia kunjungi secara lengkap, perancang dapat
menambahkan peta situs (sitemap) yang berisi semacam ringkasan isi situs Web.
Gambar 3.13 menunjukkan peta situs dari www.ebay.com.

Gambar 3.13
Contoh Peta Situs dari www.ebay.com

4. Jaring Menu Tak Berputar dan Berputar

Meskipun struktur pohon cukup menarik, seringkali struktur jaring lebih
sesuai digunakan untuk situasi tertentu, Sebagai contoh, pada layanan komersial
online, akan lebih logis apabila perancang menyediakan akses ke informasi
tertentu baik kepada petugas bank maupun pelanggannya. Motivasi kedua untuk
menggunakan jaring menu adalah untuk memberikan keleluasaan pengguna
bergerak dari satu menu yang berada pada satu cabang ke menu lain pada cabang
lain tanpa harus kembali ke menu utama terlebih dahulu.
Struktur jaring dalam bentuk tak berputar maupun berputar banyak sekali
dijumpai secara alamiah dalam lingkungan sosial, transportasi, dan tentu saja
situs Web. 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).
 MODUL 4
PERANCANGAN TAMPILAN

Salah satu kriteria penting dari suatu antarmuka adalah tampilan yang menarik.
Seorang pengguna, apalagi pengguna baru, biasanya tertarik untuk mencoba sebuah
program aplikasi dengan terlebih dahulu tertarik pada tampilan yang ada di hadapannya.
Untuk membuat tampilan yang menarik, memang tidak mudah. Seorang perancang
tampilan selain harus mempunyai jiwa seni yang memadai, ia juga harus mengerti selera
pengguna secara umum. Hal lain yang perlu disadari oleh seorang perancang tampilan
adalah bahwa ia harus bisa meyakinkan pemrogramnya, bahwa apa yang ia bayangkan
dapat diwujudkan (diimplementasikan) dengan peranti bantu yang tersedia.

A. PRINSIP DAN PETUNJUK PERANCANGAN

Bagi perancang antarmuka, hal yang sangat penting untuk diperhatikan adalah
bahwa ia sebaiknya mendokumentasikan semua pekerjaan yang ia lakukan. Dengan
dokumentasi yang baik, ia dapat mengubah rancangannya ketika ia berubah pikiran,
atau menemukan bahwa rancangannya tidak diimplementasikan. Perubahan yang
terjadi bisa karena usulan dari pengguna, atau karena alasan lain.
Dokumentasi rancangan dapat dikerjakan/dilakukan dengan beberapa cara:
1. membuat sketsa pada kertas
2. menggunakan peranti prototipe GUI (graphical user interface)
3. menuliskan teks yang menjelaskan tentang kaitan antara satu jendela dengan
jendela yang lain
4. menggunakan peranti bantu yang disebut CASE (Computer-Aided Software
Engineering)

Antarmuka pengguna secara alamiah terbagi menjadi empat komponen: model

pengguna, bahasa perintah, umpan balik, dan penampilan informasi. Model
pengguna merupakan dasar dari tiga komponen yang lain.

1. Urutan Perancangan
Perancangan dialog, seperti halnya perancangan sistem yang lain, harus
dikerjakan secara atas-ke-bawah (top-down). Proses perancangannya dapat
dikerjakan secara perbaikan bertahap (stepwise refinement) sampai rancangan
yang diinginkan terbentuk, sebagai berikut.
a. Pemilihan ragam dialog
Untuk suatu tugas tertentu, pilihlah ragam dialog yang menurut perkiraan
cocok untuk tugas tersebut. Ragam dialog dapat dipilih dari sejumlah ragam
dialog yang telah dijelaskan pada modui sebelumnya. Pemilihan ragam dialog
dipengaruhi oleh karakteristik populasi pengguna (pengguna mula,
menengah, atau pengguna ahli), tipc dialog yang diperlukan, dan kendala
teknologi yang ada untuk mengimplementasikan ragam dialog tersebut.
 Ragam dialog yang terpilih dapat berupa sebuah ragam tunggal, atau
sekumpulan ragam dialog yang satu sama lain saling mendukung,
b. Perancangan struktur dialog
Tahap kedua adalah melakukan analisis tugas dan menentukan model
pengguna dari tugas tersebut untuk membentuk struktur dialog yang sesuai.
Dalam tahap ini pengguna sebaiknya banyak dilibatkan, sehingga pengguna
langsung mendapatkan umpan balik yang berupa diskusi informal maupun
prototipe dialog yang akan digunakan.
c. Perancangan format pesan
Pada tahap ini tata letak tampilan dan keterangan tekstual secara terinci
harus mendapat perhatian lebih. Selain itu, kebutuhan data masukan yang
mengharuskan pengguna untuk memasukkan data ke dalam komputer juga
harus dipertimbangkan dari segi efisiensinya. Salah satu contohnya adalah
dengan mengurangi pengetikan yang tidak perlu, dengan cara mengefektifkan
penggunaan tombol.
d. Perancangan penanganan kesalahan
Dalam pengoperasian sebuah program aplikasi, tidak dapat dihindarkan
adanya kesalahan yang dilakukan oleh pengguna ketika ia memasukkan data,
atau kesalahan yang timbul karena programnya melakukan operasi yang
tidak sah, misalnya pembagian dengan nol. Untuk menghindari adanya
kondisi penghentian eksekusi program secara abnormal, yaitu eksekusi
program berhenti karena terjadi kesalahan, maka bentuk-bentuk penanganan
kesalahan perlu dilakukan.
Bentuk-bentuk penanganan kesalahan yang dapat dilakukan antara lain
adalah:
1. validasi pemasukan data: misalnya jika pengguna harus memasukkan
bilangan positif, sementara ia memasukkan bilangan negatif atau nol, maka
harus ada mekanisme untuk mengulang pemasukan data tersebut;
2. proteksi pengguna: program memberi peringatan ketika pengguna
melakukan suatu tindakan secara tidak disengaja, misalnya penghapusan
berkas;
3. pemulihan dari kesalahan: tersedianya mekanisme untuk membatalkan
Tindakan yang baru saja dilakukan;
4. penampilan pesan salah yang tepat dan sesuai dengan kesalahan yang
terjadi pada waktu itu.
e. Perancangan struktur data
Setelah semua aspek antarmuka dipertimbangkan, maka tiba saatnya
Anda harus memusatkan perhatian pada struktur internalnya, yaitu Anda
harus menentukan struktur data yang dapat digunakan untuk menyajikan dan
mendukung fungsionalitas komponen-komponen antarmuka yang
diperlukan. Struktur ini harus dipetakan langsung ke dalam model pengguna
yang telah dibuat, meskipun tingkat kompleksitas antara satu aplikasi dengan
aplikasi Iain dapat saja berbeda. Sebagai contoh, struktur data yang
 diperlukan untuk mengimplementasikan dialog berbasis gratis jauh lebih
rumit dibandingkan dengan struktur data yang diperlukan pada dialog
berbasis tekstual. Meskipun demikian, sesulit atau semudah apa pun struktur
data yang akan digunakan, struktur data tersebut harus diturunkan dari
spesifikasi antarmuka yang telah dibuat. Hal ini perlu ditekankan agar
keinginan pengguna dan model sistem yang telah dirancang saling
mempunyai kecocokan satu sama lain.

2. Perancangan Tampilan Berbasis Teks

Sebelum layar tampilan berkemampuan grafis dikenal luas, antarmuka pada
berbagai program aplikasi hampir dipastikan berbasis tekstual, yakni yang
mendasarkan diri pada kumpulan karakter ASCII (American Standard Code for
Information Interchange). Meskipun saat ini teknologi layar tampilan yang
mendukung aplikasi grafis semakin canggih, tetapi antarmuka berbasis tekstual
tidak juga segera ditinggalkan, mengingat banyak aspek yang harus
dipertimbangkan.
Pada perancangan tampilan untuk antarmuka berbasis teks, ada enam faktor
yang harus dipertimbangkan agar diperoleh tata letak tampilan yang berkualitas
tinggi. Keenam faktor tersebut dijelaskan sebagai berikut.
a. Urutan penyajian
Dalam model pengguna telah dijelaskan urutan operasi dari sebuah
program aplikasi, sehingga urutan penyajian pun harus disesuaikan dengan
model pengguna yang telah disusun. Jika hal ini tidak dapat dicapai, perancang
harus membuat semacam kesepakatan dengan calon pengguna tentang
urutan tampilan yang akan digunakan. Dengan cara seperti ini, pengguna
merasa tidak tertipu dengan apa yang sebelumnya telah disepakati bersama.
b. Kelonggaran (Spaciousness)
Penyusunan tata letak yang tidak mengindahkan estetika akan
mempersulit pengguna dalam melakukan pcncarian suatu teks. Penggunaan
tabulasi dan sejumlah spasi, meskipun kadang-kadang menghabiskan tempat
kosong pada layar, akan memudahkan pengguna mencari suatu teks yang
diinginkan. Teks-teks tertentu harus ditempatkan dalam posisi tertentu
dengan harapan ia dapat langsung memusatkan perhatian pengguna.
c. Pengelompokan
Data yang saling berkaitan sebaiknya dikelompokkan untuk
mempermudah penstrukturan layar tampilan secara keseluruhan. Beberapa
karakter khusus dapat dipasang untuk inenunjukkan adanya pengelompokan
sejumlah data.
d. Relevansi
Tampilkan hanya pesan-pesan yang relevan dengan topik yang sedang
ditampilkan pada layar.
e. Konsistensi
 Dalam sistem berbasis frame (misalnya pada dialog berbasis pengisian
borang), pengguna sering dihadapkan pada sejumlah tampilan yang penuh
dengan informasi.
Dalam hal ini perancang harus konsisten dalam menggunakan ruang
tampilan yang tersedia. Dengan cara seperti ini, pengguna secara tidak
langsung akan membawa dirinya sendiri untuk mempelajari berbagai tipe
informasi yang dapat ditemukan.
f. Kesederhanaan
Kesederhanaan di sini menunjuk kepada cara paling mudah untuk
menyajikan aras informasi yang dapat dipahami dengan cepat oleh pengguna.
Gambar 4.1 menunjukkan contoh tampilan pada antarmuka berbasis teks.

Gambar 4.1
Contoh Tata Letak Tekstual

Pada Gambar 4.1.a ditunjukkan contoh format tampilan yang jelek,

sehingga justru dapat membuat pengguna kebingungan dalam menyadap
informasi yang ada di sana. Gambar 4.1b menampilkan informasi yang sama
dengan Gambar 4.1a tetapi dengan memperhatikan faktor-faktor yang
dijelaskan di atas.

3. Perancangan Tampilan Berbasis Grafis

Dunia grafis sudah dikenal lama, khususnya bagi mereka yang bergerak
dalam bidang penerbitan dan percetakan. Dalam dunia komputer, ketenaran
antarmuka berbasis grafis dapat dikatakan “baru saja dimulai” seiring dengan
semakin meluasnya teknologi penampilan gambar pada layar komputer. Dengan
antarmuka berbasis grafis berbagai kemudahan dalam hal pengontrolan format
tampilan dapat dikerjakan dengan lebih mudah dan fleksibilitas tampilan dapat
semakin dirasakan oleh perancang tampilan maupun penggunanya.
Di sisi lain, kita harus memperhatikan beberapa kendala dalam penerapan
antarmuka berbasis grafis ini, antara lain adalah waktu tanggap, kecepatan
penampilan, lebar pita penampilan, dan tipe tampilan (berorientasi ke tekstual
atau grafis). Sebagai contoh, tampilan pada layar monokrom (meskipun saat ini
semakin jarang ditemui) lebih mempunyai keterbatasan dibanding jika digunakan
layar berwama.
Beberapa kemampuan yang dimiliki oleh Xerox Star dan Lisa, yang
kemudian diikuti oleh sistem seperti Microsoft Windows dengan versi terbarunya,
dan sistem terbaru dari Macintosh, yaitu Leopard Snow, antara lain adalah:
a. pengguna tidak harus mengingat perintah-perintah yang sering kali cukup
panjang, tetapi cukup dikerjakan dengan melihat dan kemudian menunjuk ke
suatu gambar yang mewakili suatu aktivitas (ikon)
b. penggunaan borang property atau option untuk mengatur penampakan
desktop
c. kemampuan WYSIWYG (what you see is what you get) yang kemudian menjadi
sangat terkenal
d. perintah-perintah yang berlaku umum, seperti SAVE, MOVE, DELETE, atau
COPY, dan lain-lain.
Berdasarkan kelebihan-kelebihan yang disebutkan pada contoh di atas, ada
lima faktor yang perlu diperhatikan pada saat kita merancang antarmuka berbasis
grafis yang masing-masing dijelaskan sebagai bcrikut.
a. Ilusi pada obyek-obyek yang dapat dimanipulasi
Perancangan antarmuka berbasis grafis yang efektif harus melibatkan
tiga komponen. Pertama, gunakan kumpulan obyek yang disesuaikan dengan
aplikasi yang akan dibuat. Kedua, penampilan obyek-obyek grafis harus
dilakukan dengan keyakinan penuh bahwa ia akan dengan mudah dimengerti
oleh pengguna. Ketiga, gunakan mekanisme yang konsisten untuk
memanipulasi obyek yang akan muncul di layar.
b. Urutan visual dan fokus pengguna
Antarmuka grafis dapat digunakan untuk menarik perhatian pengguna,
antara lain dengan membuat suatu obyek berkedip, menggunakan wama
tertentu untuk obyek-obyek tertentu, serta menyajikan suatu animasi yang
akan lebih menarik perhatian pengguna. Tetapi, penggunaan rangsangan
visual yang berlebihan justru akan membuat pengguna bingung dan merasa
tidak nyaman. Gunakanlah rangsangan visual tertentu untuk maksud tertentu.
Sebagai contoh, gunakan suatu simbol yang berkedip untuk menyatakan
posisi kursor, atau gunakan warna dengan kontras yang berbeda untuk
menunjukkan adanya pilihan yang berbeda. Dengan cara seperti ini, pengguna
 akan menjadi terbiasa dengan tanda-tanda khusus pada layar meskipun dia
menggunakan sistem yang berbeda.
c. Struktur internal
Pada pengolah kata kita seringkali menulis beberapa kata yang berbeda
dengan kata-kata yang lain, misalnya ada sekelompok kata yang ditebalkan,
dimiringkan, atau diberi garis bawah. Pada salah satu pengolah kata, kita
dapat melihat apa yang disebut dengan reveal code, yakni suatu tanda khusus
yang digunakan untuk menunjukkan adanya tabulasi, indentasi, style
halaman, dan lain-lain. Reveal code ini tidak akan ikut dicetak, tetapi
digunakan untuk menunjukkan kepada pengguna beberapa informasi
tambahan yang diperlukan untuk pengaturan tata letak teks pada suatu
naskah. Reveal code biasanya berupa suatu karakter khusus.
d. Kosakata grafis yang konsisten dan sesuai
Penggunaan simbol-simbol obyek, atau ikon, tidak ada standarnya, dan
biasanya disesuaikan dengan kreativitas perancangnya. Sebagai contoh,
simbol disket banyak digunakan untuk menyatakan aktivitas penyimpanan
data.
e. Kesesuaian dengan media
Karakteristik khusus dari layar tampilan yang digunakan akan
mempunyai pengaruh yang besar terhadap keindahan “wajah” antarmuka
yang akan ditampilkan. Dengan semakin canggihnya teknologi layar tampilan
pada saat ini, terutama setelah layar jenis LCD (Liquid Crystal Display)
dikembangkan, kreativitas perancang tampilan lah yang saat ini lebih dituntut
untuk memenuhi permintaan pengguna akan aspek kenyamanan, keindahan,
dan keramahan antarmuka.

4. Waktu Tanggap
Secara umum, pengguna menginginkan bahwa program aplikasinya dapat
memberikan waktu tanggap yang sependek-pendeknya. Tetapi waktu tanggap
yang baik memang tidak dapat ditentukan, karena ada beberapa aspek yang
mempengaruhi, antara lain yakni ragam interaksi yang diinginkan dan kefasihan
pengguna dalam menjalankan program aplikasi tersebut. Selain itu, waktu
tanggap yang berbeda-beda dapat mempengaruhi konsentrasi pengguna yang
pada gilirannya akan mempengaruhi kinerja pengguna.
Waktu tanggap yang lama, lebih dari 14 detik, akan menyebabkan perhatian
pengguna terpecah ke aktivitas lain, sehingga dia cenderung untuk melakukan
aktivitas lain sampai sistem menyelesaikan apa yang harus dia kerjakan. Pada
beberapa aplikasi yang memerlukan aktivitas interaktif, misalnya pemilihan
menu, pengisian borang, dan pemberian perintah, waktu tanggap yang kurang
dari 2 detik dianggap cukup memadai. Tetapi, ada sistem yang memerlukan waktu
tanggap seketika, misalnya pemasukan karakter demi karakter lewat papan ketik,
atau pelacakan kursor mouse.
5. Penanganan Kesalahan
 Dalam dunia komputer, kesalahan kecil dapat berakibat fatal. Sehingga,
harus dicari suatu upaya agar kesalahan-kesalahan yang dilakukan oleh pengguna
dapat dihindari atau ditangani dengan cara-cara tertentu agar tidak
mengakibatkan terhentinya eksekusi sebuah program aplikasi yang sedang
dioperasikan.
Kesalahan dibagi menjadi dua: kesalahan pada saat penulisan program,
yakni kesalahan sintaksis yang secara langsung akan dideteksi oleh compiler,
sehingga sering disebut dengan compile-time error, dan kesalahan logika, yakni
ketika program sedang dijalankan, atau run-time error atau fatal error. Kesalahan
sintaksis terjadi pada saat program sedang dikompilasi. Sebelum kesalahan itu
dibetulkan, program tidak akan dapat dioperasikan. Kesalahan logika adalah
kesalahan yang terjadi pada saat program sedang dijalankan. Kesalahan ini akan
mengakibatkan terhentinya eksekusi program secara abnormal.

B. PERANTI BANTU PERANCANGAN TAMPILAN

Peranti bantu sederhana yang dapat digunakan untuk mendokumentasikan
wajah antarmuka yang diinginkan. Peranti bantu yang dimaksud hanya berbentuk
lembaran kertas yang tidak perlu disiapkan secara khusus, tetapi dapat
menggunakan sembarang kertas kosong. Untuk mempermudah penamaan, maka
lembaran kertas yang dimaksud diberi nama dengan lembar kerja tampilan.

1. PERANTI BANTU SEDERHANA

Lembar kerja tampilan (screen design work sheet), untuk seterusnya
disingkat dengan LKT. Contoh LKT dapat dilihat pada Gambar 4.3. LKT yang
disajikan pada Gambar 4.3 pada dasamya terdiri atas empat bagian, yaitu sebagai
berikut.
1. Nomor lembar kerja
2. Tampilan: berisi sketsa tampilan yang akan muncul di layar
3. Navigator: bagian ini antara lain menjelaskan kapan tampilan yang
dimaksud akan muncul, dan kapan tampilan itu berubah menjadi tampilan
lain. Perubahantampilan biasanya disebabkan oleh adanya suatu peristiwa
(event). Peristiwa tersebut antara lain dapat berupa penekanan tombol
mouse atau papan ketik oleh pengguna, atau oleh peristiwa khusus dari
program aplikasi yang sedang dieksekusi. Peristiwa khusus ini dapat berupa
perangkap kesalahan, program meminta masukan dari pengguna, dan lain-
lain.
4. Keterangan: bagian ini berisi penjelasan singkat tentang atribut tampilan
yang akan dipakai. Sebagai contoh: teks judul menggunakan font Times New
Roman, 20 point, berwarna cyan, wama latar belakang biru tua; teks pada
push button menggunakan font Arial, 16 point, berwarna biru muda; dan
lain-lain.
 Gambar 4.2
Contoh Lembar Kerja Tampilan

Contoh lain dapat dilihat pada Gambar 4.3. Gambar ini menunjukkan
contoh penggunaan LKT untuk merancang tampilan pengisian data pada
program aplikasi pengelolaan data KTP. Dalam Gambar 4.3 ditunjukkan
berbagai elemen antarmuka grafis yang digunakan untuk mempermudah
pengguna dalam pengisian data KTP.

Gambar 4.3
Contoh Penggunaan Lembar Kerja Tampilan
2. JARING SEMANTIK TAMPILAN
Aspek penting yang ingin ditonjolkan dari perancangan tampilan adalah
semacam wajah program aplikasi yang memungkinkan pengguna dapat
berdialog dengan komputer. Hal yang akan menjadi persoalan, khususnya bagi
pemrogram, adalah apabila jumlah tampilan yang cukup banyak dan masing-
masing mempunyai navigasi yang berbeda-beda pula.
Agar pemrogram tidak perlu membolak-balik lembar kerja pada saat dia
menuliskan program untuk disesuaikan dengan navigasi pada setiap lembar
kerja, akan lebih mudah bagi pemrogram untuk memeriksa navigasi yang ada
dengan menggambarkannya lewat suatu bagan yang disebut jaring semantik
tampilan (screen semantic net).
Jaring semantik tampilan terdiri atas dua komponen, yaitu nomor tampilan
(lembar kerja) dan transisi yang menyebabkan perpindahan ke tampilan yang
lain (sesuai dengan isi bagian navigasi pada rancangan tampilan), Dalam jaring
semantik, tampilan diberi notasi sebagai lingkaran dan transisi diberi tanda
anak panah. Pada bagian atas atau bawah anak panah perlu dituliskan event
yang akan mengakibatkan adanya transisi. Gambar 4.4 menunjukkan contoh
sebuah jaring semantik tampilan.

Gambar 4.4
Contoh Jaring Semantik Tampilan

Pada contoh yang tersaji pada Gambar 4.4, Tl, T2,...,T7 adalah nomor
tampilan (lembar kerja), tulisan yang ada, Alt-S, Exit, Esc, dan lain-lain,
menyatakan peristiwa, dan anak panah menunjukkan transisi yang terjadi.
Sebagai contoh, jika pengguna sedang berada pada tampilan T5, dan
kemudian dia menekan tombol Alt-Q (ada peristiwa penekanan papan ketik),
maka tampilan akan berubah menjadi T7; jika dia menekan Selesai, dia akan
dibawa kembali ke tampilan Tl.
Dalam contoh di atas, pada tampilan T2 terdapat satu transisi yang
berlabel Loop. Transisi semacam ini biasanya dipakai untuk meminta
konfirmasi pengguna, khususnya apabila ada kesalahan eksekusi yang
diperangkap oleh program aplikasi.
Peristiwa yang menyebabkan terjadinya transisi dari satu tampilan ke
tampilan berikutnya, seperti dikatakan di atas, dapat berupa penekanan
tombol papan ketik, pemilihan tombol tekan pada layar tampilan (dengan cara
meng-klik tombol tekan), atau juga dapat disebabkan adanya kondisi khusus.
Dalam contoh yang tersaji pada Gambar 4.4 di atas memang tidak terlalu
jelas tulisan yang menyatakan penekanan tombol papan ketik, tulisan yang
menyatakan pemilihan tombol tekan, atau tulisan yang menyatakan adanya
peristiwa khusus oleh program. Untuk alasan ini sebaiknya dibuat
kesepakatan antara pemrogram dan perancang tampilan agar pemrogram
dapat benar-benar mempunyai persepsi yang sama dengan perancang
tampilan.