only materi

1. DESIGN INTERFACE dalam Interaksi Manusia & Komputer (IMK)
10.59 Gilang No comments
A. Perencanaan Tampilan
Salah satu kriteria dari sebuah antar muka adalah yang menarik.Seorang pengguna,apalagi
pengguna baru,biasanya tertarik untuk mencoba sebuah program aplikasi dengan terlebih dahulu
tertarik pada suatu tampilan yang ada di hadapan mereka.
Untuk sebuah tampilan yang menarik,memang tidak senantiasa mudah. Seorang perancang
tampilan selain harus mempunyai jiwa seni yang memadai, iapun juga harus mengerti selera
pengguna secara umum. Hal ini yang perlu disadari oleh seorang perancang tampilan adalah
bahwa ia harus bias meyakinkan pemrogramnya,bahwa apa yang ia bayangkan dapat diwujudkan
(diimplementasikan) dengan peranti bantu (tool) yang tersedia.
Bagi perancang antarmuka,hal yang sangat penting untuk ia perhatikan adalah bahwa ia
sebaiknya mendocumentasikan semua pekerjaan yang ia lakukan. Dengan dokumentasi yang
baik, ia dapat mengubah rancangannya apabila menurut ia terdapat rancangan ynag tidak mudah
diimplementasikan atau rancangan tersebut mengalami perubahan disesuaikan dengan usulan
dari pengguna atau karena alasan lain.
Dokumentasi rancangan dapat dikerjakan atau dilakukan dalam bberapa cara :
a. Membuat sketsa pada kertas
b. Meggunakan piranti prototype GUI
c. Menuliskan tekstual yang menjelaskan tentang kaitan antara satu jendela dengan jendela yang
lain
d. Menggunakan piranti bantu yang disebut CASE (Computer Aided Software Engineering).
Cara b dan d tidak selalu dapat diterapkan, karena peranti tersebut biasanya berharga cukup
mahal,sehingga hanya diterapkan pada pembuatan antarmuka grafik untuk suatu jenis pekerjaan
yang besar pula.
B. Cara Pendekatan
Sebuah program aplikasi pastilah ditunjukan kepada pengguna yang dapat dipastikan bukan
merupakan perancang program aplikasi tersebut. Program aplikasi, pada dasarnya dapat di
kelompokkan ke dalam dua kategori besar, yakni program aplikasi untuk keperluan khusus
dengan pengguna yang khusus pula (special purpose software) dan program aplikasi yang akan
digunakan oleh banyak pengguna (general purpose software) yang juga sering dikenal dengan
sebutan public software. Karena perbedaan pada calon pengguna, maka perancang program
antarmuka harus benar-benar memperhatikan hal ini.
Pada kelompok pertama, yakni pada program aplikasi untuk keperluan khusus, misalnya
program aplikasi untuk inventori gudang, pengeloaan data akademis mahasiswa, pelayanan
reservasi hotel, dan program-program aplikasi serupa, kelompok calon pengguna yang akan
memanfaatkan program aplikasi tersebut dapat dengan mudah diperkirakan, baik dalam hal
keahlian pengguna, maupun ragam antarmuka yang akan digunakan. Untuk kelompok ini ada
satu pendekatan yang dapat dilakukan, yakni pendekatan yang disebut dengan user-centered
design approach. Cara pendekatan ini berbeda dengan user design approach.
Pendekatan secara user centered design adalah perancangan antarmuka yang melibatkan
pengguna. Pelibatan pengguna disini tidak diartikan bahwa pengguna harus ikut memikirkan
bagaimana implementasinya nanti, tetapi pengguna diajak untuk aktif berpendapat ketika
perancang antarmuka sedang menggambar “wajah” antarmuka. Dengan kata lain, perancang dan

2. pengguna duduk bersama-sama untuk merancang wajah antarmuka yang diinginkan pengguna.
Pengguna menyampaikan keinginannya, sementara perancang menggambar keinginan pengguna
tersebut sambil menjelaskan keuntungan dan kerugian wajah antarmuka yang diingnkan oleh
pengguna, serta kerumitan implementasinya. Dengan cara seperti ini, pengguna seolah-olah
sudah mempunyai gambaran nyata tentang antarmuka yang nanti akan mereka gunakan.
Pada user design approach,penggguna sendirilah yang merancang wajah antarmuka yang
diinginkan. Di satu sisi cara ini akan mempercepat proses pengimplementasian modul
antarmukka,tetapi di sisi lain hal itu justru sangat memberatkan pemrogram karena apa yang
diinginkan pengguna ada yang tidak bias dikerjakan menggunakan piranti bantu yang ada.
Perancang program aplikasi yang dimasukkan dalam kelompok kedua,atau public software,perlu
menganggap bahwa program aplikasai tersebut akan digunakan oleh berbagai pengguna dengan
berbagai tingkat kepandaian dan karakeristik yang sangat beragam. Di satu sisi keadaan ini dapat
ia gunakan untuk “memaksa” pengguna menggunakan antarmuka yang ia buat,tetapi pada sisi
lain “pemaksaan’” itu akan berakibat bahwa program aplikasinya menjadi tidak banyak yang
menggunakan. Satu kunci penting dalam pembuatan modul antarmuka umtuk program” aplikasi
pada kelompok ini adalah dengan melakukan customization, sehingga pengguna dapat
menggunakan program aplikasi dengan wajah antarmukanya yang sesuai dengan selera masing-masing
pengguna. Salah satu contoh dari adanya kemampuan yang dimiliki oleh sebuah program
aplikaasi untuk dapat disesuaikan dengan karakeristik pengguna adalah pengaturan desktop pada
Microsoft Windows 94. Dengan adanya kemampuan ini ,pengguna dapat memilih sendiri warna
desktop yang dia inginkan.
* Faktor-faktor yang perlu diperhatikan :
1. Ilusi pada object-2 yang dapat dimanipulasi :
• gunakan kumpulan object yang ada
• yakinkan pengguna object
• gunakan mekanisme yang konsisten untuk memanipulasi object yang akan muncul dilayar
2. Urutan Visual & Fokus Pengguna
• Membuat suatu object berkedip (posisi kursor)
• Menggunakan warna untuk object-2 tertentu (suatu pilihan)
• Menyajikan suatu animasi yang akan lebih menarik
3. Struktural Internal
Yaitu Reveal Code : suatu tanda khusus yang digunakan untuk menunjukkan adanya perbedaan
karakter dari suatu tampilan.
4. Kosakata Grafis yang konsisten dan sesuai
Penggunaan simbol -simbol atau icon-icon tertentu.
5. Kesesuaian Dengan Media
Rancangan tampilan sesuaikan dengan kemampuan dari software dan hardware yang ada.
C. Prinsip dan Petunjuk Perancangan
Antarmuka pengguna secara alamiah terbagi menjadi empat komponen:
1. model pengguna
2. bahasa perintah
3. umpan balik, dan
4. penampilan informasi.
1. Model pengguna merupakan dasar dari tiga komponen yang lain.
Model pengguna merupakan model konseptual yang diinginkan oleh pengguna dalam
memanipulasi informasi dan proses yang diaplikasikan pada informasi tersebut.Setelah pengguna

3. mengetahui dan memahami model yang ia inginkan, dia memerlukan peranti untuk
memanipulasi model itu.
2. Peranti pemanipulasian model ini sering disebut dengan bahasa perintah (command language),
yang sekaligus merupakan komponen kedua dari antarmuka pengguna. Idealnya, program
komputer kita mempunyai bahasa perintah yang alami, sehingga model pengguna dengan cepat
dapat dioperasionalkan.
3. Komponen ketiga adalah umpan balik. Umpan balik di sini diartikan sebagai kemampuan
sebuah program yang membantu pengguna untuk mengoperasian program itu sendiri. Umpan
balik dapat berbentuk: pesan-pesan penjelasan, pesan penerimaan perintah, indikasi adanya
obyek terpilih, dan penampilan karakter yang diketikkan lewat papan ketik. Beberapa bentuk
umpan balik terutama ditujukan kepada pengguna yang belum berpengalaman dalam
menjalankan program aplikasi itu. Umpan balik dapat digunakan untuk memberi keyakinan
bahwa program telah menerima perintah pengguna dan dapat memahami maksud perintah
tersebut.
4. Komponen keempat adalah tampilan informasi. Komponen ini digunakan untuk menunjukkan
status informasi atau program ketika pengguna melakukan suatu tindakan. Pada bagian ini,
perancang harus menampilkan pesan-pesan tersebut seefektif mungkin, sehingga mudah
dipahami oleh pengguna.
a. Urutan Perancangan
Perancangan dialog, seperti halnya perancangan sistem uang lain, harus dikerjakan secara top-down.
Proses perancangannya dapat dikerjakan secara stepwise refinement sebagai berikut:
- Pemilihan Ragam Dialog
Pemilihan ragam dialog dipengaruhi oleh karakteristik populasi pengguna (pengguna mula,
menengah, atau pengguna ahli), tipe dialog yang diperlukan, dan kendala teknologi yang ada
untuk mengimplementasikan ragam dialog tersebut. Ragam dialog yang terpilih dapat berupa
sebuah program tunggal, atau sekumpulan ragam dialog yang satu sama lain saling mendukung.
- 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 banyak
dilibatkan, sehingga pengguna langsung mendapatkan umpan balik yang berupa diskusi informal
maupun prototipe dari dialog yang nantinya akan ia digunakan.
- 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.
- Perancangan Penanganan Kesalahan
Bentuk-bentuk penanganan kesalahan yang dapat dilakaukan antara lain adalah:
√ Validasi pemasukan atau: misalnya jika pengguna harus memasukkan bilangan positif,
sementara ia memasukkan data negatif atau nol, maka harus ada mekanisme untuk mengulang
pemasukan data tersebut.
√ Proteksi pengguna: program memberi peringatan ketika pengguna melakukan suatu tindakan
secara tidak sengaja, misalnya penghapusan berkas.
√ 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.
- Perancangan Struktur Data
Struktur data yang diperlukan untuk mengimplementasikan dialog berbasis grafis jauh lebih
rumit dibandingkan dengan struktur data yang diperlukan pada dialog berbasis tekstual.
Meskipun demikian, sesulit atau semudah apapun 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.
b. Perancangan Tampilan Berbasis Teks
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.
- Urutan Penyajian
Urutan penyajian harus disesuaikan dengan model pengguna yang telah disusun. Biasanya
berdasarkan kesepakatan dengan calon pengguna tentang urutan tampilan yang akan digunakan.
- Kelonggaran (Spaciousness)
Penyusunan tata letak yang tidak mengindahkan estetika akan mempersulit pengguna dalam
pencarian suatu teks
- Pengelompokkan
Data yang berkaitan sebaiknya dikelompokkan
- Relevansi
Tampilkan hanya pesan-pesan yang relevan sesuai topik
- Konsistensi
Perancang harus konsisten dalam menggunakan ruang tampilan yang tersedia
- Kesederhanaan
Cari cara yang paling mudah untuk menyajikan informasi yang dapat dipahami dengan cepat
oleh pengguna
D. Perancangan Tampilan Berbasis Grafis
Faktor – faktor yang perlu diperhatikan :
1. Ilusi pada object-2 yang dapat dimanipulasi :
• gunakan kumpulan object yang ada
• yakinkan pengguna object
• gunakan mekanisme yang konsisten untuk memanipulasi object yang akan muncul dilayar
2. Urutan Visual & Fokus Pengguna
• Membuat suatu object berkedip (posisi kursor)
• Menggunakan warna untuk object-2 tertentu (suatu pilihan)
• Menyajikan suatu animasi yang akan lebih menarik
3. Struktural Internal
Yaitu Reveal Code : suatu tanda khusus yang digunakan untuk menunjukkan adanya perbedaan
karakter dari suatu tampilan.
4. Kosakata Grafis yang konsisten dan sesuai
Penggunaan simbol -simbol atau icon-icon tertentu.
5. Kesesuaian Dengan Media
Rancangan tampilan sesuaikan dengan kemampuan dari software dan hardware yang ada.
Dengan antarmuka berbasis grafis berbagai kemudahan dalam hal pengontrolan format tampilan
dapat dikerjakan dengan lebih mudah dan fleksibilitas tampilan dapat semakin dirasakan oleh

5. 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).
Pada tahun 1970an, di Xerox Palo Alto Research Centre (PARC) dilakukan sejumlah penelitian
yang mengarah kepada perancangan antarmuka yang disebut Xerox Star, yang menggunakan
teknik manipulasi langsung. Selain itu ditempat yang sama juga dikembangkan suatu antarmuka
berbasis grafis yang kemudian dikenal dengan sebutan Lisa yang berjalan denagn Macintosh.
Penelitian lain untuk mendapatkan antarmuka berbasis grafis terus dilakukan. Beberapa
kemampuan yang dimiliki oleh Xerox Star dan Lisa, yang kemudian diikuti oleh sistem seperti
Microsoft Windows, antara lain adalah:
√ Pengguna tidak harus mengingat perintah-perintah yang sering kali cukup panjang, tetapi
cukup dikerjakan dengan melihat dan kemudian menunjuk kesuatu gambar yang mewakili suatu
aktifitas (yang seterusnya disebut dengan ikon),
√ Penggunaan form property atau option untuk mengatur penampakan (wajah) desktop,
√ Kemampuan WYSIWYG (what you see is what you get) yang kemudian menjadi sangat
terkenal,
√ Perintah-perintah yang berlaku umum, seperti MOVE, DELETE, atau COPY, dan lain-lain.
Berdasarkan kelebihan-kelebihan yang disebutkan pada contoh diatas, ada lima faktor yang perlu
diperhatikan pada saat kita merancang antarmuka berbasis grafis yang masing-masing dijelaskan
sebagai berikut.
- 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. Jika obyek-obyek
itu belum ada, kita dapat mengembangkannya sendiri. Kedua, penampilan obyek-obyek grafis
harus dilakukan dengan keyakinan bahwa ia akan dengan mudah dimengerti oleh pengguna.
Ketiga, gunakan mekanisme yang konsisten untuk memanipulasi obyek yang akan muncul
dilayar.
- Urutan visual dan fokus pengguna
Antarmuka dapat digunakan untuk menarik perhatian pengguna antara lain dengan menbuat
suatu obyek berkedip, menggunakan warna 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.
- 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 pengola kata, kita dapat melihat apa yang disebut dengan reveal code, yakni suatu
tanda khusus yang digunakan untuk menunjukkan adanya perbedaan font style. Reveal code ini
tdak akan ikut dicetak, tetapi digunakan untuk menunjukkan kepada pengguna antara lain
tentang font style yang digunakan, batas kiri dan batas kanan dari halaman teks setrta informasi
yang lain. Reveal code biasanya berupa suatu karakter khusus.
- Kosakata grafis yang konsisten dan sesuai
Penggunaan simbol-simbol obyek, atau ikon, memang tidak ada standarnya, dan biasanya
disesuaikan dengan kreatifitas perancangnya.
- Kesesuaian dengan media

6. Karakteristik khusus dari layar tampilan yang digunakan akan mempunyai pengaruh yang besar
terhadap keindahan “wajah” antarmuka yang akan ditampilkan. Pada layar tampilan yang masih
berbasis pada karakter, misalnya CGA, pemunculan gambar tidak akan secantik apabila kita
menggunakan layar tampilan yang sering disebut dengan bitmap atau raster display. Dengan
semakin canggihnya teknologi layar tampilan pada saat ini, kreatifitas perancang tampilanlah
yang saat ini lebih dituntut untuk memenuhi permintaan pengguna akan aspek kenyamanan dan
keramahan antarmuka.
d. Waktu Tanggap
Waktu tanggap yang lama akan mengalihkan perhatian pengguna untuk melakukan aktifitas lain.
e. Penanganan Kesalahan
Penanganan kesalahan harus dilakukan dengan tepat, biasanya dilakukan dengan memberikan
pesan umpan balik kepada pengguna akan keadaan eksekusi program saat itu. Penanganan
kesalahan ini hanya dapat dilakukan apabiladi dalam program tersebut terdapat modul perangkap
kesalahan (eror trapping).Berdasarkan kondisi pada perangkap kesalahan inilah dapat dilakukan
penanganan kesalahan yang tepat.
Kesalahan pada program dapat disebabkan oleh dua hal:
• Kesalahan pada saat implementasi program yaitu kesalahan sintaksis yang secara langsung
akan dideteksi oleh kompiler sehingga disebut dengan compile – time error (kesalahan ini akan
tampil pada saat terjadinya kompilasi)
• Kesalahan Logika adalah kesalahan yang terjadi pada saat program sedang dijalankan,
kesalahan ini akan mengakibatkan terhentinya eksekusi program .kesalahan logika juga dapat
terjadi pada system banyak pengguna (multiuser).
E. Piranti Bantu Sederhana
Pada bagian awal dari bab ini telah dijelaskan bahwa perancang seharusnya membuat
dokumentasi akan bentuk – bentuk tampilan yang akan diimlpementasikan. Hal ini selain
berguna bagi pengguna, terutama untuk program-program aplikasi pesanan, yang
memungkinlkan ia membayangkan wajah program aplikasi yang akan dibuat. Pada subbab ini
diperkenalkan sebuah piranti bantu sederhana yang dapat digunakan untuk mendokumentasikan
wajah antarmuka yang diinginkan. Peranti bantu yang akan dijelaskan hanya berbantuk 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 (screen design work sheet), untuk seterusnya disingkat dengan
LKT.
F. Jaringan Sistematik Tampilan
Aspek penting yang ingin ditonjolkan dari perancangan tampilann adalah semacam wajah
program aplikasi yang memungkinkan pengguna dapat berdialog dengan computer. Hal yang
akan menjadi persoalan, khususnya bagi pemrogram, adalah apabila cacah tampilan yang cukup
banyak, yang masing-masing mempunyai navigasi yang berbeda-beda pula.
Event yang menybabkan terjadinya tranasisi dari satu tampilan ke tampilan berikutnya, seperti
dikatakna diatas,dapat berupa penekanan tombol papan ketik, pemilihan tombol tekan pada layar
tampilan (dengan cara mengeklik tombol tekan), atau juga dapat disebabkan karena adanya
kondisi khusus. Dalam gambar diatas memang tidak terlalu jelas tulisan yang menyatakan
penekanan tombol papan ketik, tulisan yang menyatakan pemilihan tombol tekan atau tulisan
yang menyatakan adanya event khusus oleh program. Untuk alas an ini sebaiknya dibuat
kesepakatan antara pemrogram dan perancang tampilan agar pemrogram dapat benar-benar
mempunyai persepsi yang sama dengan perancang tampilan.