PERANCANG

AN
TAMPILAN
Interaksi manusia Dan Komputer
 Apa Itu Perancangan 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 bisa 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 beberapa 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.
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.
 User Centered
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 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.
 Design Approach

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 aplikasi 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.
 KOMPONEN ANTAR
MUKA PENGGUNA
1. Model pengguna; memungkinkan user untuk mengembangkan
pemahaman yang mendasar tentang apa yang dikerjakan oleh program,
bahkan oleh user yang sama sekali tidak mengetahui teknologi komputer
2. Bahasa perintah; sedapat mungkin menggunakan bahasa alami
3. Umpan balik; kemampuan sebuah program yang membantu user untuk
mengoperasikan program itu sendiri
4. Tampilan informasi; digunakan untuk menunjukkan status informasi atau
program ketika user melakukan suatu tindakan
Faktor-Faktor yang perlu di perhatikan

a. Ilusi pada object-2 yang dapat b. Urutan Visual & Fokus Pengguna

dimanipulasi : • Membuat suatu object berkedip (posisi kursor)

• gunakan kumpulan object yang ada • Menggunakan warna untuk object-2 tertentu
• yakinkan pengguna object (suatu pilihan)
• gunakan mekanisme yang konsisten untuk • Menyajikan suatu animasi yang akan lebih
menarik
memanipulasi object yang akan muncul dilayar
Faktor-Faktor yang perlu di perhatikan

c. Struktural Internal

Yaitu Reveal Code : suatu tanda khusus yang digunakan untuk menunjukkan adanya perbedaan

karakter dari suatu tampilan.

d. Kosakata Grafis yang konsisten dan sesuai

Penggunaan simbol -simbol atau icon-icon tertentu.

e. 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 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).
 URUTAN
PERANCANGAN
 Pemilihan ragam dialog
 Perancangan struktur dialog; melakukan analisis tugas
dan menentukan model pengguna dari tugas tersebut
 Perancangan format pesan; tata letak tampilan,
keterangan tektual secara terinci, dan efisiensi inputing
data harus mendapat perhatian lebih
 Perancangan penanganan kesalahan
 Perancangan struktur data
 Penanganan Kesalahan
• Validasi pemasukan data, misalnya: jika user harus memasukkan bilangan
positif, namun dia memasukkan data negatif atau nol, maka harus ada
mekanisme untuk mengulang pemasukan data tersebut
• Proteksi user; program memberi peringatan ketika user melakukan suatu
tindakan secara tidak sengaja, mis: penghapusan berkas
• Pemulihan dari kesalahan: tersedianya mekanisme untuk membatalkan
tindakan yang baru saja dilakukan
• Penampilan pesan salah yang tepat dan sesuai dengan kesalahan yang
terjadi pada waktu itu
PERANCANGAN TAMPILAN
BERBASIS TEKS
 Urutan penyajian; disesuiakan dengan model pengguna
•    Kelonggaran; misalnya: dengan adanya jarak spasi antar
perintah, atau penempatan yang khusus
•    Pengelompokkan data yang saling berkaitan
•    Relevansi; hanya pesan-pesan yang relevan saja yang
ditampilkan di layar
•    Konsistensi; menggunakan suku kata yang konsisten untuk
menjelaskan sesuatu
•    Kesederhanaan; menggunakan singkatan yang dipahami oleh
umum
 Perancangan Tampilan Berbasis Grafis
• Ilusi pada obyek-obyek yang dapat dimanipulasi, mis: gambar disket,
printer, dll
• Urutan visual dan fokus pengguna, mis: tanda kedip untuk posisi kursor,
penggunaan warna yang berbeda
• Struktur internal; berguna untuk menunjukkan bahwa obyek yang
sedang dihadapi dapat dimodifikasi sesuai dengan keinginan user
• Kosakata grafis yang konsisten dan sesuai, mis: gambar disket, printer,
dll
• Kesesuaian dengan media/informasi yang akan disampaikan