Perancangan

Tampilan
(Interaksi Manusia & Komputer)

Kelompok 9 :
1. Siti Maharani
2. Khofifah Putri Tiara

3 Januari 2020
9.1 PENGANTAR

Salah satu criteria penting dari sebuah antar muka adalah tampilan yang menarik. Ada
pepatah mengatakan, “Cinta pada pandangan pertama.” Jika pepatah ini dikaitkan
dengan sebuah antar muka, maka tampilan yang dihadapi oleh penggunalah yang
pertama kali akan menarik perhatian pengguna untuk mengoperasikannya.

Untuk membuat tampilan yang menarik memang tidak mudah dilakukan. 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.

Bagi perancang antarmuka, hal yang sangat penting untuk ia perhatikan adalah bahwa
ia sebaiknya (atau seharusnya) mendokumentasikan semua pekerjaan yang ia lakukan.
Dengan dokumentasi yang baik, ia dapat merubah rancangannya ketika ia berubah
pikiran atau menemukan bahwa rancangannya tidak mudah di implementasikan.
Perubahan yang terjadi bisa karena usulan pengguna yang berubah atau karena alasan
lain.

Dokumentasi rancangan dapat dikerjakan atau dilakukan dengan beberapa cara:

1. Membuat sketsa pada kertas (yang dalam bab ini akan di jelaskan pada Subbab
9.4),
2. Menggunakan peranti purwarupa GUI,
3. Menuliskan keterangan yang menjelaskan tentang kaitan antara satu jendela
dengan jendela yang lain,
4. Menggunakan peranti bantu yang disebut CASE (Computer-Aided Software
Engineering).

Cara kedua dan keempat tidak selalu dapat diterapkan, karena peranti tersebut
biasanya harus dibeliu dan seringkali cukup mahal. Cara ini kebanyakan diterapkan
pada pembuatan antar muka grafis untuk suatu jenis pekerjaan berskala besar.
9.2 CARA PENDEKATAN

Sebuah program aplikasi pastilah ditujukan kepada pengguna, yang utama, bukan
perancang program aplikasi tersebut. Program aplikasi pada dasarnya dapat
dikelompokkan dalam dua kategori besar, yakni program aplikasi untuk keperluan
khusus dengan pengguna yang khusus pula (special purpose software), yang juga
sering dikenal dengan sebutan public software. Karena perbedaan pada calon
pengguna, maka perancang program antarmuka perlu memperhatikan hal ini.

Pada kelompok pertama, yakni pada program aplikasi untuk keperluan khusus,
misalnya program aplikasi untuk inventori gudang , pengelolaan data akademis
mahasiswa, pelayanan reservasi hotel, dan program-program aplikasi yang serupa,
kelompok calon pengguna yang akan memanfaatkan program aplikasi tersebut dapat
dengan mudah diperkirakan, baik dalam hal keahlian pengguna maupun ragam antar
muka yang akan digunakan. Untuk kelompok ini ada satu pendekatan yang dapat
dilakukan, yakni pendekatan yang disebut dengan pendekatan perancangan berpusat-
ke-pengguna (user-centered design approach).

Pendekatan perancangan berpusat-ke-pengguna 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
yang mereka inginkan. 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 adan kerugian wajah antarmuka yang
diinginkan oleh pengguna, serta kerumitan implementasinya. Dengan cara ini maka
pengguna seolah-olah sudah mempunyai gambaran nyata tentang antarmuka yang
nanti akan merenka gunakan.

Pada perancangan-oleh-pengguna, pengguna sendirilah yang merancang wajaah

antarmuka yang diinginkan. Di satu sisi, cara ini akan mempercepat proses
pengimplementasian modul antarmuka. Tetapi disisi yang lain, hal ini justru sangat
memberatkan pemrogram karena apa yang diinginkan pengguna belum tentu dapat
diimplementasikan dengan mudah, atau bahkan tidak dapat dikerjakan dengan
menggunakan peranti bantu yang ada.

Perancang program aplikasi yang dimasukkan dalam kelompok kedua, atau public
software, perlu menganggap bahwa program aplikasi tersebut akan digunakan oleh
pengguna dengan berbagai tingkat kepandaian dan karakteristik yang sangat beragam.
Disatu sisi keadaan ini dapat ia gunakan untuk “memaksa” pengguna untuk
menggunakan antar muka yang ia buat, tetapi pada sisi lain “pemaksaan” itu akan
berakibat bahwa program aplikasinya menjadi tidak banyak penggunanya. Satu kunci
penting dalam pembuatan modul antarmuka untuk program-program aplikasi pada
kelompok ini adalah dengan melakukan customization. Dengan customization
pengguna dapat menggunakan program aplikasi dengan wajah antarmuka yang sesuai
dengan selera masing-masing pengguna.

Salah satu contoh dari adanya kemampuan yang dimiliki oleh sebuah program aplikasi
atau system operasi yang dapat disesuaikan dengan karakteristik pengguna adalah
pengaturan desktop pada OS X versi 10.5. dengan adanya kemampuan ini, maka
pengguna dapat memilih sendiri latar belakang dekkstop yang dia inginkan. Latar
belakang standar barang kali bukan merupakan gambar favoritnya, sehingga pengguna
dapat mengubahnya sesuai keinginan justru akan membuat mata pengguna itu sakit,
dikarenakan mata harus melakukan akomomasi maksimum terus-menerus untuk
menyesuaikan dengan warna tampilan yang ada.

Selain cara pendekatan yang dijelaskan diatas, anda yang terbiasa menulis program-
program aplikasi mungkin mempunyai cara khusus untuk berhadapan dengan
pengguna. Tetapi perlu anda ingat bahwa apapun cara yang anda gunakan, anda tetap
harus mempunyai pedoman bahwa pada akhirnya program itu bukan untuk anda
sendiri, tetapi akan dogunakan oleh orang lain. Dengan kata lain, jangan pernah
mengabaikan pendapat (calon) pengguna program aplikasi anda.

9.3 PRINSIP DAN PEUTUNJUK PERANCANGAN

Antarmuka secara alamiah terbagi menjadi empat komponen: model pengguna, bahasa
perintah, umpan balik, penampilan imformasi. Model pengguna merupakan dasar dari
tiga komponen yang lain. Seperti dijelaskan pada Bab III, model mental pengguna
merupakan model konseptual yang dimiliki oleh pengguna ketika ia menggunakan
sebuah system atau program aplikasi. Model ini memungkinkan seorang pengguna
untuk mengembangkan pemahaman mendasar tentang bagian yang dikerjakan oleh
program, bahkan oleh pengguna yang sama sekali tidak mengetahui teknologi
computer. Dengan pertolongan model itu pengguna dapat mengantisipasi pengaruh
suatu tindakan yang ia lakukan dan dapat memilih strategi yang cocok untuk
mengoperasikan program tersebut. Model pengguna dapat berupa suatu simulasi
tentang keadaan sebenarnya dalam dunia nyata, sehingga ia tidak perlu
mengembangkannya sendiri dari awal.

Setelah pengguna mengetahui dan memahami model yang ia inginkan, dia memerlukan
peranti untuk memanipulasikan model itu. Peranti pemanipulasian model ini sering
disebut dengan bahasa perintah (command language), yang sekaligus merupakan
komponen kedua dari antarmuka pengguna. Idealnya, program computer kita
mempunyai bahasa perintah yang alami, sehingga model pengguna dengan cepat
dapat dioperasionalkan.

Komponen ketiga adalah umpan balik. Umpan balik disini diartikan sebagai
kemampuan sebuah program yang membantu pengguna untuk mengoperasikan
rogram itu sendiri. Umpan balik dapat berbentuk pesan penjelasan, pesan penerimaan
perintah, indikasi adanya obyek tepilih, penampilan karakter yang diberikan lewat papan
ketik. Beberapa bentuk umpan balik terutama ditujukan kepada pengguna yang belum
berpengalaman dalam menjalankan program sebuah aplikasi. Umpan balik dapat
digunakan untuk memberikan keyakinan bahwa program telah menerima perintah
pengguna dan dapat memahami maksud perintah tersebut.

Komponen keeempat 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.
Setelah kita memahami beberapa prinsip dalam perancangan antarmuka pengguna,
pada bagian berikut ini akan diberikan petunjuk singkat tentang perancangan
antarmuka yang akan anda lakukan sebagai seorang perancang tampilan.

9.3.1 URUTAN PERANCANGAN

Perancangan dialog, seperti halnya perancangan system yang lain, harus dikerjakan
secara atas-ke-bawah (top-down). Proses perancangannya dapat dikerjakan secara
bertahap (stepwise refinement) sampai rancangan yang diinginkan terbentuk, yaitu
sebagai berikut:

1. 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 bab-bab sebelumnya. Pemilihan ragam dialog dapat
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 ragam tunggal, atau sekumpulan ragam dialog yang satu
sama lain saling mendukung.
2. 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 dari diskusi yang terjadi. Pada tahap ini
suatu purwarupa dialog seringkali dibuat untuk memberikan gambaran yang
lebih jelas kepada calon pengguna.
3. 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 kedalam computer juga harus
dipertimbangkan dari segi efisiennya. Salah satu contohnya adalah dengan
 mengurangi pengetikan yang tidak perlu dengan cara mengefektifkan pengguna
tombol.
4. Perancangan penanganan kesalahan
Dalam pengoprasian 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 berhenti Karena terjadi kesalahan, maka bentuk-
bentuk penanganan kesalahan perlu diberikan.
Bentuk bentuk penanganan kesalahan yang dapat diberikan antara lain adalah:
a. Validasi pemasukan data: misalnya jika pengguna harus memasukkan
bilangan positif, sementara ia memasukkan data negative atau nol, maka
harus ada mekanisme untuk mengulang pemasukan data tersebut.
b. Proteksi pengguna: program memberikan peringatan ketika pengguna
melakukan tindakan secara tidak sengaja, misalnya penghapusan berkas.
c. Pemulihan dari kesalahan: tersedianya mekanisme untuk membatalkan
tindakan yang baru saja dilakukan.
d. Penampilan pesan salah yang tepat dan sesuai dengan kesalahan yang
terjadi pada waktu itu.
5. Perancangan struktur data
Setelah semua aspek antarmuka dipertimbangkan maka tiba saatnya bagi anda
untuk memusatkan perhatian pada struktur internalnya. Dalam hal ini anda harus
menentukan struktur data yang dapat digunakan untuk menyajikan dan
mendukung fungsionalitas komponen-komponen antarmuka yang diperlukan.
Strutur ini harus dipetakan langsung kedalam model pengguna yang telah dibuat,
meskipun tingkat kompleksitas antara satu aplikasi dengan aplikasi lain dapat
saja berbeda. Sebagai contoh, 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 system
yang telah dirancang saling mempunyai kecocokan satu sama lain.

9.3.2 PERANCANGAN TAMPILAN BERBASIS TEKS

Sebelum layar tampilan berkemampuan grafis dekenal luas, antarmuka pada berbagai
program aplikasi hamper dipastikan berbasis tekstual, yakni yang mendasarkan diri
pada kumpulan karakter ASCII. Meskipun saat ini teknologi layar tampilan yang
mendukung aplikasi grafis semakin canggih, tetapi antarmuka berbasis teks masih
digunakan.

Pada perancangan antarmuka berbasis teks, ada enam factor yang harus
dipertimbangkan agar diperoleh tata letak tampilan yang berkualitas tinggi. Keenam
factor tersebut dijelaskan sebagai berikut:

1. Urutan penyajian
Dalam model pengguna telah dijelaskan urutan operasi dari sebuah program
aplikasi. Dengan demikian urutan penyajian tampilan berbasis teks juga harus
disesuaikan dengan model pengguna yang telah disusun. Jika hal ini tidak dapat
dicapai maka perancang harus membuat semacam kesepakatan dengan calon
pengguna tentang urutan tampilan yang akan digunakan. Dengan cara ini maka
pengguna akan merasa tidak tertipu dengan apa yang sebelumnya telah
disepakati bersama.
2. Kelonggaran (Spaciousness)
Penyusunan tata leetak yang tidak mengindahkan estetika akan mempersulit
pengguna dalam melakukan pencarian 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 teks
tersebut dapat langsung memusatkan perhatian pengguna.
3. Pengelompokan
Teks yang saling berkaitan sebaiknya dikelompokkan untuk mempermudah
penstrukturan layar tampilan secara keseluruhan. Beberapa karakter khusus,
 atau baris kosong, dapat dipasang untuk menunjukkan kelompok teks yang
berbeda.
4. Relevansi
Tampilkan pesan-pesan relevan atau sesuai dengan topic yang sedang
ditampilkan pada layar.
5. Konsistensi
Dalam system 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 maka pengguna secara tidak
langsung akan membawa dirinya sendiri untuk mempelajari berbagai tipe
informasi yang dapat ditemukan.
6. Kesederhanaan
Kesederhanaan disini menunjuk kepada cara paling mudah untuk menyajikan
aras informasi yang dapat dipahami dengan cepat oleh pengguna

9.3.3 PERANCANGAN TAMPILAN BERBASIS GRAFIS

Dunia grafis sudah dikenal lama, khususnya bagi mereka yang bergerak dalam bidang
dan percetakan . Dalam dunia computer, ketenaran antarmuka berbasis dapat
dikatakan “baru saja dimulai” seiring dengan semakin meluasnya teknologi penampilan
gambar pada layar computer. Dengan antarmuka berbasis grafis berbagai pengontrolan
format tampilan dapat dikerjakan dengan lebih mudah, dan fleksibelitas tampilan dapat
semakin dirasakan oleh perancang tampilan maupun penggunanya. Di sisi lain, kita
harus memerhatikan beberapa kendala dalam penerapan antarmuka berbasis grafis ini,
yang antara lain adalah waktu tanggap, kecepatan penampilan, lebar pita penampilan,
dan tipe pada layar monokrom (meskipun saat ini semakin jarang ditemui) lebih
terbatas disbanding jika menggunakan layar berwarna.
Pada tahun 1970-an, di Xerox Paolo Alto Research Center (PARC) dilakukan sejumlah
penelitian yang mengarah kepada perancangan antarmuka yang disebut Xerox Star,
yang menggunakan teknik manipulasi langsung. Selain itu, pada tahun 1983, ditempat
yang sama juga dikembangkan suatu antarmuka berbasis grafis yang kemudian dikenal
dengan sebutan Lisa, yang berjalan pada Macintosh. Penelitian lain untuk
mendapatkan antarmuka berbasis grafisterus dilakukan. Beberapa kemampuan yang
dimiliki oleh Xerox Star dan lisa, yang kemudian diikiuti oleh system seperti Microsoft
Windows dengan versi terbarunya, dan system operasi seperti Macintosh, yaitu leopard
Snow, anrata lain adalah :
1. penggunaan tidak harus mengingat perintah-perintah yang seringkali cukup
panjang, tetapi cukup dikerjakan dengan melihat dan kemudian menunjukkan ke
suatu gambar yang mewakili suatu aktivitas (yang seterusnya dengan icon)
2. penggunaan boring property atau option untuk mengatur kenampakan (wajah)
desktop,
3. kemampuan WYSIWYG (what you see is what you get) yang kemudian menjadi
sangat terkenal,
4. perintah-perintah yang berlaku umum, seperti SAVE, 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 :

1. 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
mengembangkan sendiri. 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.

2. Urutan visual dan focus pengguna

 Antarmuka grafis dapat digunakan untuk menarik perhatian pengguna antara lain
dengan membuat suatu obyek-obyek tertentu, serta menyajikan suatu animasi
yang akan lebih menarik perhatian pengguna. Namun demikian 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 symbol yang berkedip untuk
menyatakan posisi kursor: atau gunakan warna dengan kontras yang berbda
untuk menunjukkan adanya pilihan yang berbeda. Dengan cara seperti ini maka
akan menjadi terbiasa dengan tanda-tanda- khsus pada layar meskipun ia
mengguanaka system yang berbeda.
3. Struktur internal
Pada pengolah kata-kata seringkali menulis beberapa kata yang berbeda
dengan kata-kata 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, identasi, style halaman, dan lain-
lain. Reveal code biasanya berupa karakter khusus. Pada antarmuka bebasis
grafis, khususnya pada obyek-obyek yang dimanipulasi, perancangan juga harus
memberikan struktur internal (reveal structure) dalam bentuk yang berbeda
dengan yang digunakan pada dokumen teks. Hal ini bertujuan untuk
memberitahu pengguna sampai sejauh mana pengguna dapat mengubah atau
memanipulasi obyek tersebut. Mekanisme ini, bersama – sama dengan elemen
lain yang tersembunyi, misalnya peralatan obyek, merupakan kunci yang sangat
penting dalam perancangan antarmuka berbasis grafis
4. Kosa kata grafis yang konsisten dan sesuai
Penggunaan symbol-simbol obyek atau ikon, tidak ada standarnya, dan biasanya
disesuaikan dengan kreativitas perancangnya. Untuk program aplikasi yang
berbeda pengunaan symbol yang berbeda untuk tujuan yang sama tentu saja
sangat wajar. Tetapi pada sebuah program aplikasi, hendaknya digunakan
symbol yang sama untuk yujuan yang sama, sehingga pengguna akan merasa
bingung ketika ia harus melakukan aktivitas yang dimaksud. Tetapi, agar
 pengguna tidak memerlukan waktu untuk belajar hal-hal yang pernah mereka
pelajari, meskipun pada berbagai program aplikasi yang berbeda, ada baiknya
digunakan ikon yang sama untuk tujuan yang sama.

5. Kesesuain dengan media

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, meskipun sudah jarang dijumpai, pemnculan 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, terutama setelah layar jenis LCD dikembangkan, kraetivitas perancang
saat ini lebih dituntut untuk memenuhi permintaan penguna akan aspek
kenyamanan, keindahan, dan keramahan antarmuka.

9.3.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
ragam interaksi yang diinginkan dan kefasihan pengguna dalam menjalankan program
aplikasi. 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 pengguna cenderung untuk melakukan aktivitas
sampai system menyelesaikan apa yang harus ia kerjakan. Pada beberapa aplikasi
yang memerlukan aktivitas interaktif, misalnya pemilihan menu, pengisian boring, dan
pemberian perintah, waktu tanggap yang kurang dari 2 detik dianggap cukup memadai.
Tetapi, ada system yang memerlukan waktu tanggap seketika, misalnya pemasukan
karakter demi karakter lewat papan ketikl, atau pelacakan kursor mouse.
9.3.5 PENANGANAN KESALAHAN

Kata bijak mengatakan “berbuat salah adalah manusiawi”. Tetapi, dalam dunia
computer, kesalahan kecil dapat berakibat fatal sehingga harus diupayakan agar
kesalahan-kesalahan yang mungkin dilakukan dapat dihindari dengan cara-cara
tertentu agar tidak mengakibatkan terhentinya eksekusi program aplikasi.

Kesalahan dibagi menjadi dua, yakni kesalahn pada saat penulisan program yakni
kesalahn sintaksis yang secara langsung akan dideteksi oleh compiler sehingga sering
disebut dengan compile-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. Gambar 9.5 menunjukkan contoh program dalam bahasa
pascal yang berisi kesalahan sintaksis.

Dalam bahasa pemrograman [ascal, operator / tidak dapat digunakan pada operan
(peubah) yang bertipe integer. Ketika program diatas dikompilasi, compiler akan
melihat bahwa pada baris [4] akan terjadi kesalahan yang berbunyi Type mismatch.
Tetapi ketika baris [4] diubah menjadi

C1 := A div B;

Maka pesan kesalahan tidak akan muncul lagi. Hal ini berarti program berhasil
dikompilasi dan siap untuk dijalankan.

[1] var A, B, C1 ; integer;

[2] begin

[3] readln(A) ; readln (B);

[4] writeln(C1) ;

[5] end.

Gambar 9.5 Contoh kesalahan sintaksis

Kesalahan logika berasal dari dua penyebab. Penyebab pertama datang dari
penggunanya, misalnya ketika pengguna mengisikan data yang tidak sah. Penyebab
yang kedua berasal dari proses eksekusi. Beberapa contoh dapat disebutkan di sini
misalnya ketika program perlu membaca data dari sebuah berkas ternyata berkas yang
dimaksud tersebut tidak ada, ketika terjadi pembagian dengan nol, terjadi kekurangan
memori ketika program akan mengalokasikan perubah dinamis, dan lain-lain. Jika
kesalahan sintaksis langsung dapat dideteksi oleh compiler, maka kesalahan logika
tidak akan dapat diperkirakan kapan ia akan datang, sehingga cara penayangannyapun
terkadang cukup susah dan memakan waktu lama.

Penanganan kesalahan harus dilakukan dengan tepat. Salah satu strategi yang biasa
dilakukan adalah dengan memberikan pesan umpan balik kepada pengguna akan
keadaan eksekusi program saat itu. Penanganan kesalahan ini hanya dapat dilakukan
apabila didalam program saat itu. Penanganan kesalahan ini hanya dapat dilakukan
apabila didalam program tersebut terdapat modul perangkap kesalahan. Berdasarkan
kondisi pada perangkap kesalahan inilah dapat dilakukan penanganan kesalahan yang
tepat. Perhatikan contoh program pada gambar 9.6 yang merupakan modifikasi dari
gambar 9.5 dengan peubahan pada baris [4].

[1] var A, B, C1 ; integer;

[2] begin

[3] readln(A) ; readln (B);

[4] C1 := A div B ;

[5] end.

Gambar 9.6 Program yang mengandung kemungkinan salah logika

Sepintas program yang tersaji pada gambar 9.6 tampak sempurna, tetapi coba sedikit
teliti. Sekarang cobalah memasukkan nilai 0 untuk perubah B, dan perhatikan apa yang
terjadi. Anda akan melihat pesan yang berbunyi Divide by Zero dan program tidak
memberikan hasil apapun. Ketika pesan di atas muncul, berarti terjadi kesalahan logika,
yaitu bahwa di dalam operasi matematis, pembagian dengan nol tidak mungkin
dilaksanakan sehingga program diatas mungkin masih mengandung kesalahan yang
dapat berakibat fatal. Sekarang bandingkan program diatas dengan program pada
gambar 9.7

[ 1] var A, B, C1 ; integer;

[ 2] begin

[ 3] readln(A) ; readln (B);

[ 4] if B = 0 then

[ 5] wrieln(“Pembagian dengan nol tak diijinkan”)

[ 6] else

[ 7] begin

[ 8] C1 := A div B ;

[ 9] writeln(C1);

[10] end

[11] end.

Gambar 9.7 program yang berisi perangkap kesalahan

Pada gambar 9.7 penulis menyisipkan perangkap kesalahan pada baris [4], yakni
dengan mencetak apakah nilai B sama dengan 0. Jika ya, maka program akan
menampilkan pesan “pembagian dengan nol tak dijinkan”, dan eksekusi program
akan berhenti secara normal. Jika nilai peubah B tidak sama dengan 0, maka program
akan melanjutkan eksekusi ke baris [8], kemudian ke baris [9], dan seterusnya. Dalam
rekayasa perangkat lunak, program pada Gambar 9.7 dikatakan mempunyai tibgkat
reboystness yang lebih baik dibandingkan program pada gambar 9.6
Kesalahan logika diatas dianggap terjadi pada sebuah system yang berdiri sendiri
(stand alone system0. Kesalahan logika juga dapat terjadi pada system banyak
pengguna (multiuser). Dalam system banyak pengguna yang diakibatkan oleh
pengguna lain. Cara penanganan kesalahan pada system benyak pengguna lebih rumit
disbanding pada system yang berdiri sendiri, tetapi biasanya didukung oleh system
perangkat kerasnya.

Bentuk-bentuk penanganan kesalahan yang dapat dilakaukan antara lain adalah:

 Validasi pemasukan ata: 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: teredianya mekanisme untuk membatalkan tindakan
yang baru saja dilakukan.
 Penampilan pesan salah yang tepat dan sesuai dengan kesalahan yang terjadi
pada waktu itu.

9.4 PERANTI BANTU PERANCANGAN TAMPILAN

Pada bagian awal dari babini telah dijelaskan bahwa perancangan seharusnya
membuat dokumentasi tata letak tampilan yang akan diimplementasikan. Hal ini selain
berguna bagi pemrograman sebagai pedoman untuk mengimplimentasikan antarmuka
tersebut, juga sangat berguna bagi pengguna terutama untuk program-program aplikasi
pesanan, yang memungkinkan untuk membayangkan wajah program aplikasi yang
akan dibuat. Padan subbab ini diperkenalkan sebuah peranti sederhana yang dapay
digunakan untuk mendokumentasikan wajah antarmuka yang diinginkan. Peranti bantu
yang dimaksud hanya berbetuk 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. Gambar
9.8 menunjukkan contoh LKT yang dimaksud

Gambar 9.8 Lembar Kerja Tampilan

LKT yang disajikan pada gambar 9.8 pada dasarnya terdiri atas empat bagian yaitu ;

1. Nomor lembar kerja

2. Tampilan: berisi sketsa tampilan yang akan muncul dilayar
3. Navigasi: bagian ini antara lain menjelaskan kapan tampilan yang dimaksud
akan muncu, dan kapan tampilan itu berubah menjadi tampilan lain. Perubahan
tampilan 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 ini dapat berupa perangkap kesalahan, program meminta
masukan dari pengguna dan lain-lain.
 5. 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, warna latar belakang biru tua; teks pada push button
menggunakan font arial, 16 point, berwarna biru muda; dan lain-lain

Gambar 9.9 menunjukkan contoh penggunaan LKt untuk merancang tampilan

pengisian data pada program aplikasi pegelolaan data KTP (Kartu Tanda Penduduk).
Dalam Gambar 9.9 ditunjukkan berbagai elemen antarmuka grafis yang digunakan
untuk mempermudah pengguna dalam pengisian data KTP. Seperti dijelaskan diatas,
pada bagian Navigator diisikan peristiwa-peristiwa khusus yang akan meyebabkan
tampilan berubah atau kejadian lain oleh program, dan pada bagian Keterangan
diidikan berbagai attibut tampilan yang diinginkan perancang.

Gambar 9.9 Contoh penggunaan lembar kerja tampilan

9.5 JARING SEMANTIC TAMPILAN

Aspek penting yang ingin ditonjolkan dari perancangan tampilan adalah wajah program
aplikasi yang memungkinkan pengguna berdialog dengan computer. Hal yang mungkin
menjadi persoalan, khususnya bagi pemrograman, adalah apabila cacah tampilan
cukup banyak dan masing-masing tampilan mempunyai navigasi yang berbeda-beda.
Agar pemrogram tidak perlu membolak-balik lembar kerja pada saat ia menuliskan
program untuk disesuaikan dengan navigasi pada setiap lembar kerja, akan lebih
mudah bagi pemrogram untuk memeriksa navigasi yang ada dengan
menggambarkannya lewat suatu bagian yang disebut jarring semantic tampilan (screen
semantic net)
Jarring semantic tampilan terdiri atas dua komponen : nomor tampilan (lembar kerja)
dan transisi yang menyebabkan perpindahahn ke tampilan yang lain (sesuai dengan isi
bagian pada rancangan tampilan). Dalam jaring semantic, 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
9.10 menunjukkan contoh sebuah jaring semantic tampilan.
 Gambar 9.10 Contoh jaring semantic tampilan

Pada contoh yang tersaji pada gambar 9.10, T!, 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 ia menekan tombol Alt+Q (ada
peristiwa penekanan papan ketik), maka tampilan akan berubah menjadi T7; jika
menekan Selesai, ia akan dibawa kembali ke tampilan T1.
Dalam contoh diatas, 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 mengklik tombol tekan) atau
juga dapat disebabkan karena adanya kondisi khusus. Dalam contoh yang tersaji pada
gambar 9.10 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 alas an ini sebaiknya dibuat
kesepakatan antara pemrograman dan perancang tampilan agar pemrogram dapat
benar-benar mempunyai persepsi yang sama dengan perancangan tampilan.