Dokumen tersebut membahas tentang perancangan tampilan antarmuka pengguna untuk program aplikasi. Ada dua pendekatan utama yaitu user centered design untuk program khusus dan mempertimbangkan berbagai jenis pengguna untuk program umum. Prinsip desain meliputi model pengguna, informasi, umpan balik, dan bahasa perintah serta mempertimbangkan faktor seperti urutan, kelompokan, kesederhanaan dan konsistensi. Dokumen tersebut

1. BAB IV
PERANCANGAN TAMPILAN
DIAN HARTANTI, S.KOM, MMSI

2. 4.1 Cara Pendekatan
Program aplikasi pada dasarnya dapat dikelompokkan
kedalam dua kategori besar, yakni :
 program aplikasi untuk keperluan khusus dengan
penggunaan yang khusus pula (special purpose
software).
 program aplikasi yang akan digunakan oleh banyak
pengguna (general purpose software) atau sering
disebut public software.

3. Karena perbedaan calon pengguna, perancang program
antar muka harus memperhatikan hal berikut:
1. Pada kelompok pertama, program aplikasi untuk
keperluan khusus. Cara pendekatannya disebut
dengan “user centered design approach”adalah
perancangan antar muka yang melibatkan
pengguna.
2. Perancang program aplikasi kelompok kedua atau
public software, perlu menganggap bahwa
program aplikasi tersebut akan digunakan oleh
berbagai pengguna dengan berbagai tingkat
kepandaian dan karakteristik yang beragam.
Satu kunci penting dalam pembuatan modul antarmuka
untuk program-program aplikasi pada kelompok ini
adalah dengan menggunakan customization, sehingga
pengguna dapat menggunakan program aplikasi dengan
wajah antarmuka yang sesuai dengan selera masing-
masing pengguna. Salah satu contoh adalah pengaturan
desktop pada Microsoft windows 94 seperti terlihat
pada Gambar 4.1.

4. Gambar 4.1 Contoh kostumisasi tampilan

5. 4.2 Prinsip Dan Petunjuk Perancangan.
Antarmuka penguna secara alamiah tebagi menjadi
empat komponen model pengguna:
 Model Pengguna
 Tampilan Informasi
 Umpan Balik
 Bahasa Perintah

6. 4.2.1 Urutan Perancangan.
Proses perancangannya dapat dikerjakan secara
stepwise refinement, sebagai berikut :
a. Pemilihan ragam dialog
b. Perancangan struktur dialog
c. Perancangan format pesan
d. Perancangan penanganan kesalahan
e. Perancangan struktur data

7. 4.2.2 Perancangan Tampilan Berbasis Teks
Ada enam factor harus dipertimbangkan agar
diperoleh tata letak tampilan yang berkualitas tinggi:
1. Urutan penyajian, harus disesuaikan dengan model
pengguna yang telah disusun.
2. Kelonggaran (spaciousness), penggunaan tata letak
yang tidak mengindahkan estetika akan
mempersulit pengguna dalam pencarian suatu teks.
3. Pengelompokan, data yang saling berkaitan
dikelompokkan untuk mempermudah penstrukturan
layar tampilan secara keseluruhan.
4. Kesederhanaan, yaitu menunjukkan cara yang
paling mudah untuk menyajikan aras informasi
yang dapat dipahami dengan cepat oleh pengguna.
5. Konsistensi, dalam system berbasis frame
(misalnya dialog berbasis pengisian boring),
pengguna harus konsisten dalam menggunakan
ruang tampilan yang tersedia.
6. Relevansi, hanya menampilkan pesan-pesan yang
relevan dengan topik yang sedang ditampilkan pada
layar.

8. Pengisian Data Pribadi
Nama : Okky Wisnu Murti Santosa
Tempat/tgl lahir : Klaten, 8 Januari 1961
Alamat : Jalan Pelan-pelan No. 7A Yogyakarta
Kelamin : Laki-laki
Pekerjaan : Wiraswasta
Pendidikan :
SD : SDN Ungaran I, Yogyakarta
SMP : SMPN 87, Medan
SMU : SMUN 24, Jakarta
Sarjana : Universitas Merdeka, Jakarta
a)
urutan penyajian relevansi
Pengisian Data Pribadi
Nama : Okky Wisnu Murti Santosa
Tempat/tgl lahir : Klaten, 8 Januari 1961
Kelamin : Laki-laki
Alamat : Jalan Pelan-pelan No. 7A Yogyakarta
Pendidikan : kesederhanaan
SD : SDN Ungaran I, Yogyakarta
SMP : SMPN 87, Medan pengelompokan
SMU : SMUN 24, Jakarta
Sarjana : Universitas Merdeka, Jakarta
Pekerjaan : Wiraswasta
konsistensi
b)
kelonggaran
Gambar 4.2 Contoh tata letak tekstual

9. 4.2.3 Perancang Tampilan Berbasis Grafis
Ada lima factor yang perju diperhatikan pada saat kita
merancang antar muka berbasis grafis, yaitu:
1. Ilusi pada objek-objek yang dapat dimanipulasi
2. Urutan visual dan fokus pengguna
3. Struktur internal
4. Kesesuaian dengan media
5. Kosakata grafis yang konsisten dan sesuai

10. naskah bersih
I WILL ALWAYS LOVE YOU
by Whitney Houston
If I should stay, I will only be in your way
So I’ll go, but I know
I’ll think of you in every step of the way
and I will always love you, will always love you
my darling you
naskah dengan reveal code
[BOLD}I WILL ALWAYS LOVE YOU[bold][HRt]
[Tab][Tab][ITALC]by[Und] Whitney Houston[und][italc][HRt]
[HRt]
If I should stay, I will only be in your way[HRt]
So I’ll go, but I know[HRt]
I’ll think of you in every step of the way[HRt]
and I will always love you, will always love you[HRt]
my darling you[HRt]
[HRt}
Gambar 4.3 Reveal code pada Word Perfect 5.1

11. Gambar 4.4 struktur internal
obyek grafis
Gambar 4.4 struktur internal obyek grafis
Pada gambar 4.4 ditunjukkan bahwa delapan kotak kecil
yang melingkupi tulisan ABCDE membentuk mekanisme
yang dinamakan dengan object handle, yang dapat
dikatakan sebagai batas dari ukuran dari tulisan
tersebut. Satu kotak kecil di sebelah dalam object
handle menunjukkan perapian tulisan ABCDE terhadap
object handlenya, dalam hal ini dipilih rapi tengah
(center justified).

12. 4.2.4 Waktu Tanggap
Waktu tanggap yang baik memang tidak dapat
ditetukan, 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.

13. 4.2.5 Penanganan Kesalahan
Kesalahan dapat dibagi menjadi dua, yakni:
1. Kesalahan pada saat implementasi program, yakni
kesalahan sintaksis yang secara langsung akan
dideteksi oleh kompilersehingga sering disebut
dengan nama compile-time error.
2. Kesalahan logika ketika program sedang
dijalankan atau run-time error atau fatal error.
Penyebab kesalahan logika dapat berasal dari dua
penyebab, yaitu:
• Penyebab pertama datang dari penggunanya
• Penyebab yang kedua berasal dari proses
eksekusi

14. Kesalahan sintaksis terjadi ketika program sedang
dikompilasi. Sebelum kesalahan itu dibetulkan,
program tidak dapat dioperasikan. Gambar 4.5
menunjukkan contoh program dalam bahasa pascal
yang berisi kesalahan sintaksis.
[1] var A, B, C1 : integer ;
[2] begin
[3] readln (A) ; readln (B) ;
[4] C1 := A / B ;
[5] writeln (C1) ;
[6] end .
Gambar 4.5 Contoh kesalahan sintaksis.

15. 4.3 Peranti Bantu Sederhana.
Peranti Bantu yang akan dijelaskan hanya berbentuk
lembaran kertas yang tidak perlu disiapkan secara
khusus, tetapi dapat menggunakan sembarang kertas
kosong, yang dapat digunakan untuk
mendokumentasikan wajah antarmuka yang diinginkan.
Untuk mempermudah penamaan, maka lembaran kertas
yang dimaksud diberi nama dengan lembar kerja
tampilan (screen design work sheet), dan dsingkat LKT.
Gambar 4.8 menunjukkan LKT yang dimaksud.

16. nNo:
Tampilan Navigasi
Keterangan :
Gambar 4.8 Contoh Lembar Kerja Tampilan (LKT)

17. LKT yang disajikan pada Gambar 4.8 pada dasarnya
terdiri atas empat bagian, yaitu :
• Nomor lembar kerja.
• bagian Tampilan: berisi sketsa tampilan yang
akan muncul dilayar.
• bagian Navigator: bagian ini antara lain
menjelaskan kapan tampilan itu akan muncul, dan
kapan tampilan itu berubah menjadi tampialn
lain.
• bagian Keterangan: bagian ini berisi penjelasan
singkat tentang atribut tampilan yang akan
dipakai. Sebagai contoh: teks judul menggunakan
font Time News Roman, 20 point, berwarna
Cyan, warna latar belakang biru tua, dan lain-lain.

18. 4.4 Jaringan Semantik Tampilan
Jaringan semantik tampilan terdiri atas dua komponen:
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 tanda anak
panah. Pada bagian atas atau bawah anak panah perlu
dituliskan event yang mengakibatkan adanya transisi.