INTERAKSI MANUSIA DAN KOMPUTER

PERANCANGAN TAMPILAN

DIBUAT OLEH :

KELOMPOK III

JURUSAN TEKNIK INFORMATKA

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER
AKBA
TAHUN 2019
 ANGGOTA KELOMPOK 3

RAHMAT (20172205095)

IRHAMDANI IDRIS (201722051030

MAI AMRIYANI (20172205100)

 DAFTAR ISI

DAFTAR ISI ................................................................................................ i

KATA PENGANTAR................................................................................... ii

BAB I PENDAHULUAN ............................................................................. 1

I.1. Perancangan Tampilan ................................................................. 1

BAB II PEMBAHASAN............................................................................... 2

II.1. Cara Pendekatan ......................................................................... 2

II.2. Prinsip dan Petunjuk Perancangan .............................................. 4

II.3. Peranti Bantu Perancangan Tampilan ........................................ 10

II.4. Jaringan Semantik Tampilan ...................................................... 11

BAB III KESIMPULAN .............................................................................. 12

BAB IV DAFTAR PUSTAKA ..................................................................... 13

Page | i
 KATA PENGANTAR

Puji syukur kami panjatkan kehadirat Allah SWT atas limpahan rahmat dan karunianya
kami dapat menyelesaikan makalah yang berjudul ” PERANCANGAN TAMPILAN”.
Kami juga mengucapkan terimakasih yang sebesar-besarnya kepada Bapak Dosen
Pengampuh Mata Kuliah Interaksi Manusia dan Komputer yang sudah memberikan kepercayaan
kepada kami untuk menyelesaikan tugas ini.
Kami sangat berharap makalah ini dapat bermanfaat dalam rangka menambah
pengetahuan juga wawasan menyangkut Perancangan Tampilan dan berbagai materi yang ada di
dalamnya.
Kami pun menyadari bahwa di dalam makalah ini masih terdapat banyak kekurangan dan
jauh dari kata sempurna. Oleh sebab itu, kami mengharapkan adanya kritik dan saran demi
perbaikan makalah yang akan kami buat di masa yang akan datang, mengingat tidak ada sesuatu
yang sempurna tanpa saran yang membangun.
Mudah-mudahan makalah sederhana ini dapat dipahami oleh semua orang khususnya
bagi para pembaca. Kami mohon maaf yang sebesar-besarnya jika terdapat kata-kata yang
kurang berkenan.

Makassar, 30 November 2019

Kelompok 3

Page | 2
 BAB I

PENDAHULUAN

I.1 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, ia pun 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 mendokumentasikan 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. Menggunakan 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.

Page | 1
 BAB II

PEMBAHASAN

II.1 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,
pengelolaan 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 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 antarmuka,tetapi di sisi lain hal itu justru sangat memberatkan

Page | 2
pemrogram karena apa yang diinginkan pengguna ada yang tidak bisa 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 aplikasi 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-object 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-object 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.

Page | 3
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.

II.2 Prinsip dan Petunjuk Perancangan

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.Model pengguna merupakan model konseptual yang diinginkan oleh
pengguna dalam memanipulasi informasi dan proses yang diaplikasikan pada informasi tersebut.
Setelah pengguna mengetahui dan memahami model yang ia inginkan, dia memerlukan peranti
untuk memanipulasi model itu. 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.

Komponen ketiga adalah umpan balik. Umpan balik di sini diartikan sebagai kemampuan
sebuah program yang membantu pengguna untuk pengoperasian 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.

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.

Page | 4
 II.2.1 Urutan Perancangan

Perancangan dialog, seperti halnya perancangan sistem ulang lain, harus dikerjakan secara top-
down. Proses perancangannya dapat dikerjakan secara step wise 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 kedalam 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.

Page | 5
√ 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 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.

II.2.2 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.

Page | 6
– 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

II.2.3 Perancangan Tampilan Berbasis Grafis

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).

Pada tahun 1970-an, di Xerox Palo Alto Research Centre (PARC) dilakukan sejumlah
penelitian yang mengarah kepada perancangan antarmuka yang disebut Xerox Star, yang

Page | 7
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 membuat
suatu obyek berkedip, menggunakan warna tertentu untuk obyek-obyek tertentu, serta
menyajikan suatu animasi yang akan lebih menarik perhatian pengguna. Tetapi, penggunaan

Page | 8
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
tidak akan ikut dicetak, tetapi digunakan untuk menunjukkan kepada pengguna antara lain
tentang font style yang digunakan, batas kiri dan batas kanan dari halaman teks serta 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

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.

II.2.4 Waktu Tanggap

Waktu tanggap yang lama akan mengalihkan perhatian pengguna untuk melakukan aktifitas lain.

Page | 9
 II.2.5 Penanganan Kesalahan

Penanganan kesalahan yang tepat biasanya dilakukan dengan memberikan pesan umpan balik
kepada pengguna akan keadaan eksekusi program saat itu. Kesalahan pada program dapat
disebabkan oleh dua hal: pertama kesalahan sintaksis yang bisa dideteksi kompiler biasa
disebut compile-time error dan kedua kesalahan logika ketika program dijalankan biasa
disebut run-time error atau fatal error.

II.3 Peranti Bantu Perancangan Tampilan

Perancang seharusnya membuat dokumentasi akan bentuk-bentuk tampilan yang akan

diimplementasikan. Peranti bantu sederhana yang dapat digunakan misalnya adalah lembar kerja
tampilan/LKT (screen design work sheet). Pada LKT, disajikan empat bagian:

1. Nomor lembar kerja

2. Bagian tampilan

3. Bagian navigasi

4. Bagian keterangan

Page | 10
II.4 Jaring Semantik Tampilan

Digunakan untuk mempermudah bagi pemrogram pada saat menuliskan program untuk
disesuaikan dengan navigasi pada setiap lembar kerja. Pada jaring semantik tampilan terdiri atas
dua komponen: nomor tampilan (biasa diberi notasi dengan lingkaran) dan transisi yang
menyebabkan perpindahan perpindahan ke tampilan yang lain (biasa diberi notasi dengan anak
panah).

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 cacah tampilan yang cukup
banyak, yang masing-masing mempunyai navigasi yang berbeda-beda pula.

Event yang menyebabkan terjadinya transisi dari satu tampilan ke tampilan berikutnya,
seperti dikatakan 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 alasan ini sebaiknya
dibuat kesepakatan antara pemrogram dan perancang tampilan agar pemrogram dapat benar-
benar mempunyai persepsi yang sama dengan perancang tampilan.

Page | 11
 BAB III

KESIMPULAN

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.
Idealnya, program komputer harusnya mempunyai bahasa perintah yang alami, sehingga
model pengguna dengan cepat dapat dioperasionalkan.
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.
Pada jaring semantik tampilan terdiri atas dua komponen: nomor tampilan (biasa diberi
notasi dengan lingkaran) dan transisi yang menyebabkan perpindahan perpindahan ke
tampilan yang lain (biasa diberi notasi dengan anak panah).

Page | 12
 BAB IV
DAFTAR PUSTAKA

BSI. (2011). Prinsip dan Petunjuk Perancangan (Online) http://designinterface.blogspot.com.

Diakses 3 Mei 2013

Ferdiyanto. Yusriel Arif. (2011). Design Interface (perancangan tampilan) (Online)

http://yusriel.wordpress.com.Diakes 3 Mei 2013

Page | 13