Modul Pap2

Kerjalab Perancangan Antarmuka Pengguna

Laboratorium Sistem Informasi dan Multimedia

1

MODUL D3 KOMSI

Kerja Lab

Perancangan Antarmuka Pengguna

Oleh :

Dwiny Meidelfi, S.Kom., M.Cs

Sulvia Tri Herawati, S.Kom


Departemen Informatika dan Instrumentasi

Sekolah Vokasi

Universitas Gadjah Mada

2014



2

Silabus :

1. Pendahuluan

2. Analisis antarmuka perangkat lunak

3. Menu

4. Teknik Dialog Menu Datar

5. Teknik Dialog Menu Tarik

6. Pengaturan Tampilan dan Warna

7. Desain Form

8. Teknik Dialog Berbasis Pengisian Borang

9. Teknik Dialog Berbasis Icon

10. Multiple Windows

11. Teknik Dialog Manipulasi Langsung

12. CSCW

13. Antarmuka Pencarian Informasi berbasis data (desktop), berbasis map (googlemap),

multimedia (animasi, video,winamp, media player)

14. Final Project (Tugas Akhir)



3

BAB I

PENDAHULUAN

Pertemuan ke : 1

Alokasi waktu : 0,5 Jam

Kompetensi dasar : 1. Mahasiswa mampu memahami pentingnya mempelajari

perancangan antarmuka pengguna.

Indikator : 1. Menuliskan dan menjelaskan konsep interaksi dalam

menggunakan komputer.

A. Teori Pendukung

a. Pengertian IMK, pengertian user interface (antarmuka pengguna).

Interaksi Manusia dan Komputer (IMK) merupakan sebuah bidang ilmu yang

mempelajari bagaimana mendesain, mengevaluasi dan menerapkan (implementasi)

interaksi manusia dan komputer.

User Interface (antarmuka pengguna) merupakan salah satu layanan yang

disediakan sistem operasi sebagai sarana interaksi antara pengguna dengan sistem

operasi. Antarmuka adalah komponen sistem operasi yang bersentuhan langsung

dengan pengguna. Terdapat dua jenis antarmuka, yaitu Command Line Interface(CLI)

dan Graphical User Interface(GUI).

b. Fungsi IMK , pentingnya perancangan antar muka pengguna, keterkaitan antara IMK

dengan bidang ilmu yang lain

Fungsi dari IMK adalah : mengoptimasikan performansi antara manusia dengan

komputer sebagai suatu sistem.



4

Gambar 1.1

c. Konteks IMK

1. User : pengguna atau konteks tempat pengguna berada, terdiri dari

organisasi/lingkungan kerja, pengguna yang menggunakan aplikasi komputer,

proses adaptasi manusia dan komputer

2. Human : Terdiri dari pemrosesan informasi pada manusia, penggunaan bahasa,

cara komunikasi dan interaksi manusia terhadap mesin, faktor ergonomis

3. Computer : piranti masukan dan keluaran, berbagai teknik dialog, pemilihan

dialog yang tepat, komputer grafik, merancang dialog secara keseluruhan

(arsitektur dialog)

4. Proses pengembangan : pendekatan desain, teknik dan kakas untuk implementasi,

teknik evaluasi, contoh sistem dan studi kasus

Secara lebih jelas konteks pembelajaran IMK (Interaksi Manusia dan Komputer)

dapat dilihat dalam gambar

Gambar 1.2 Konteks IMK

d. Prinsip umum perancangan antarmuka pengguna

1. Aksesibilitas (Operabilitas dan Perseptibilitas)



5

Merupakan prinsip yang menekankan agar antarmuka dapat diakses oleh berbagai

pengguna dengan kemampuan yang berbeda-beda secara visual, auditori, fisik dan

kognitif serta berbeda pengalaman ataupun cara menyikapi teknologi.



6

2. Visibilitas

Memperlihatkan status sistem dan metode penggunaan sistem dengan jelas.

3. Kesederhanaan

Keserhanaan (Simplicity) merupakan prinsip menyediakan antarmuka yang

sesederhana mungkin, dengan cara :

o Menggunakan penguakan progresif (progressive disclosure), menyembunyikan

sesuatu hingga ia digunakan.

o Menyajikan fungsi yang umum dan perlu terlebih dahulu

o Menyediakan hirarki visual yang jelas

o Menyediakan default

o Menyediakan keseragaman dan konsistensi

o Mengeliminasi elemen yang tidak perlu.

o Memungkinkan pengguna untuk fokus pada tugas / pekerjaannya, tanpa harus

memikirkan mekanisme antarmuka.

o Menyembunyikan cara kerja di dalam komputer dan komunikasi proses

komputer.

o Tidak menggunakan terlalu banyak kode dan istilah teknis

4. Efisiensi

Prinsip yang menekankan pada minimasi pergerakan mata dan tangan serta aksi

kendali lain. Pengorganisasian sistem hendaknya sesuai dengan tugas-tugas yang

dilakukan pengguna untuk menyelesaikan pekerjaannya.

Struktur dan aliran fungsi hendaknya memungkinkan transisi yang mudah

antar beberapa tugas.

Jalur navigasi hendaknya sependek mungkin. Pengguna tidak boleh

dipaksa untuk bernavigasi antar aplikasi atau antar banyak layar untuk

menyelesaikan tugas sehari-hari.

Pergerakan mata ketika melihat layar hendaknya berurutan.

5. Konsistensi

Konsistensi dengan dunia nyata : Penggunaan konvensi dan aturan yang sama

dengan yang ada di dunia nyata



7

Konsistensi internal :Penggunaan konvensi dan aturan yang sama untuk semua

aspek sebuah antarmuka, meliputi :

o Prosedur operasi dan navigasi

o Identitas visual atau tema

o Pengorganisasian, penyajian, penggunaan dan lokasi komponen

o Konsistensi eksternal

o Penggunaan konvensi dan aturan yang sama untuk semua antarmuka-

antarmuka yang berhubungan.

o Bedakan hanya bila jelas manfaatnya bagi pengguna.

6. Prediktabilitas

Pengguna hendaknya mengantisipasi progresi natural dari setiap tugas.

Menyediakan elemen layar yang dapat dibedakan dan dikenali

Menyediakan petunjuk / gambaran tentang hasil dari aksi yang akan dilakukan

Tidak membungkus atau menggabungkan aksi.

Semua ekspektasi hendaknya benar-benar terpenuhi.

7. Kontrol dan Fleksibilitas

Pengguna harus memegang kendali interaksi

Aksi dihasilkan dari permintaan pengguna

Aksi dilaksanakan dengan cepat

Aksi dapat diinterupsi dan dihentikan oleh pengguna

Konteks harus berasal dari perspektif pengguna

Upaya mencapai tujuan harus fleksibel dan

kompatibel dengan kemampuan, pengalaman dan kesukaan pengguna.

Menghindari penggunaan mode karena membatasi aksi yang disediakan untuk

pengguna.

Memungkinkan pengguna untuk melakukan kustomisasi aspek- aspek

antarmuka, namun disamping itu sistem tetap menyediakan pengaturan default.

8. Respon terhadap pengguna (Responsiveness)

Sistem harus menanggapi permintaan pengguna dengan cepat.



8

Sistem menyediakan pemberitahuan segera (secara visual, tekstual ataupun

auditori) atas segala tindakan pengguna.

9. Penanganan kesalahan

Toleransi dan memaafkan kesalahan manusia yang umum dan tidak bisa

dihindari

Mencegah terjadinya error.

Melindungi dari bencana besar.

Menyediakan pesan yang membangun ketika kesalahan (error) terjadi.

10. Recovery

Sistem hendaknya memungkinkan perintah atau aksi dibatalkan atau

dikembalikan.

Kembali dengan segera ke keadaan tertentu jika ditemui kesulitan.

Memastikan pengguna tidak pernah kehilangan hasil pekerjaannya akibat

terjadinya kesalahan oleh pengguna atau terjadinya masalah pada perangkat

keras & perangkat lunak Safety Melindungi pengguna dari melakukan

kesalahan (mistake).

Menyediakan petunjuk, pengingat (dukungan memori bagi pengguna), daftar

pilihan dan bantuan lainnya. Tidak mengandalkan pengguna untuk mengingat

suatu hal.

11. Kejelasan arti dan tujuan setiap komponen pembentuk sistem

Antarmuka hendaknya jelas secara visual, konseptual, dan lingustik meliputi :

Elemen visual

Fungsi

Metafor

Kata dan teks

12. Kejelasan tentang keterkaitan antar komponen sistem secara keseluruhan

Sistem hendaknya mudah dipelajari dan dimengerti. seorang pengguna

hendaknya mengetahui hal-hal berikut : apa yang akan dilihat,apa artinya, apa

yang akan dilakukan, kapan dilakukannya, dimana dilakukannya, kenapa

melakukannya, bagaimana melakukannya.



9

Aliran tindakan, respon, presentasi visual dan informasi hendaknya dalam

urutan yang masuk akal sehingga mudah untuk ditempatkan di dalam konteks

13. Kesan Pertama yang positif

Prinsip yang menekankan agar pengguna mau untuk menggunakan kembali

setelah penggunaan pertama

14. Trade-Off

Mempertimbangkan baik buruknya penerapan prinsip-prinsip yang saling

berlawanan dan mengutamakan suatu prinsip dibandingkan prinsip yang lain, jika

diperlukan

e. Mengapa perlu ilmu antar muka pengguna?

1 Mengurangi kesalahan dalam pemasukan data dan sistem pengoperasian

2 Meminimalisasi tidak bisa di aksesnya suatu fungsi

3 Mengurangi frustasi pemakai yang bisa mengakibatkan produktivitas yang

rendahatau pemanfaatan yang rendah

4 Meminimalisir gagalnya suatu sistem yang disebabkan oleh penolakan

pemakai

f. Pemetaan antar tujuan, aksi dan hasil

User interface yang baik adalah UI yang proses pemetaannya jelas antara tujuan dari

seorang pemakai dengan aksi dan hasil yang ingin dicapai. Dari hasil tersebut akan

diperoleh umpan balik untuk memperbaiki tujuan pemakai. Proses ini akan berulang

sampai diperoleh hasil yang maksimal. Hubungan antara tujuan akhir, aksi dan hasil

yang diharapkan sebaiknya “visibility/dapat dicapai” dan transparasi. Untuk lebih

jelasnya pemetaan tersebut dapat dilihat pada gambar 1.3

Tujuan

pemakai

Aksi

pemakaiFungsi dari

Suatu sistem

Umpan balik

HasilAntarmuka/

kontrol

Gambar 1.3 Pemetaan antar tujuan, aksi dan hasil



10

g. Kemampuan penggunaan (Usability).

Perancangan Antarmuka Pengguna yang baik diharapkan dapat dijadikan user

interface/penghubung yang baik antara manusia dengan mesin. Dalam analisis sistem

modern dan rekayasa perangkat lunak istilah “usability” dimaksudkan untuk

membuat kriteria kualitas suatu perangkat lunak seperti fungsionalitas, kehandalan,

efisiensi, kemudahan pemeliharaan, dan portabilitas.

Beberapa hal yang menyangkut usability antara lain :

a) Kemampuan Pembelajaran (LEARNABILITY)

Beberapa pertanyaan yang menyangkut kemampuan pembelajaran

(leranability) adalah :

Seberapa mudah mempelajari suatu sistem ?

Seberapa cepat untuk menguasai sampai mahir?

b) Tolok Ukur Keluaran (THROUGHPUT)

Beberapa pertanyaan yang menyangkut tolok ukur keluaran (throughput)

adalah :

Seberapa cepat suatu tugas bisa dikerjakan?

Berapa banyak orang yang diperlukan untuk memperbaiki

kesalahannya?

c) Keluwesan (FLEXIBILITY)

Beberapa pertanyaan yang menyangkut keluwesan (flexibility) adalah :

Seberapa besar kecocokan sistem dengan keahlian

(pemula/menengah/mahir) seorang pemakai ?

Dapatkah sistem itu diubah untuk memenuhi jalan kerja yang berbeda

atau perbedaan level dari suatu keahlian?

d) Perilaku (ATTITUDE)

Beberapa pertanyaan yang menyangkut perilaku (attitude) adalah :

Apakah seorang pemakai puas terhadap sistem itu?

Apakah pemakai mendapat manfaat besar dari sistem itu?

Berapa lama sistem tersebut dipakai pada instansi tersebut?

B. Exercise



11

Carilah cara untuk anda berinteraksi dengan komputer, sehingga anda bisa menggunakan

komputer untuk kepentingan yang anda inginkan (misal membuat dokumen

teks).Tuliskan langkah-langkahnya. Sebutkan alat-alat yang ada pada komputer sehingga

anda bisa melakukan interaksi dengan baik. Jelaskan juga fungsi dari masing-masing alat

yang anda gunakan tersebut.

C. Tugas

Amatilah dua sistem operasi yang berbasis text /command driven dibandingkan dengan

sistem operasi yang menggunakan GUI (Graphical User Interface). Analisislah masing-

masing Sistem Operasi tersebut, dengan mengacu pada teori PAP, prinsip umum

perancangan antarmuka pengguna dan Usability tuliskan kedalam tabel perbedaan dari

masing-masing Sistem Operasi tersebut. Jelaskan setiap poin yang anda tuliskan.

D. Evaluasi



12

BAB II

ANALISIS ANTARMUKA PENGGUNA

Pertemuan ke : 1

Alokasi waktu :

Kompetensi dasar : 1. Mahasiswa mampu memahami komponen-komponen yang

dibutuhkan pada saat ingin melakukan analisis perancangan antar

muka pengguna.

Indikator : 1. Menuliskan dan menjelaskan analisis kebutuhan antar muka

pengguna.

A. Teori pendukung :

a. Teknik interaksi

Ada tiga kelompok teknik/gaya interaksi yaitu :

a.) Linguistic Styles

Merupakan penyampaian ‘aksi’ melalui bahasa yang dimengerti oleh

komputer. Karakteristik teknik ini antara lain :

Masukan aksi melalui papan ketik alfabet (alphanumerci keyboard)

yang ditulis/diketik.

Bahasa yang dimengerti oleh komputer merupakan bagian kecil dari

bahasa manusia.

Adanya aturan penulisan (syntax) dan semantic untuk menyatakan

‘aksi’

Contohnya bisa dilihat pada gambar 2.1 :



13

Gambar 2.1 Contoh tampilan penggunaan Linguistic Styles



14

b.) Key-Model Styles

Merupakan penyimpanan ‘aksi’ melalui penekanan tombol-tombol yang

diprogram sebelumnya untuk menjalankan fungsi-fungsi.

Karakteristik teknik ini antara lain :

Masukkan aksi melalui tombol fungsi atau tombol alfabet.

Masukkan langkah demi langkah.

Digunakan dalam sistem berjalan (walk-up system)

Contoh : question-and-answer (misal : apakah data dicetak? <Y/T>), function

key interaction (misal : Tekan F1-Menu Bantuan) dan menu-based interaction

(misal menu susun, menu tarik)

c.) Direct Manipulation Styles

Merupakan penyampaian ‘aksi’ melalui manipulasi terhadap objek tertentu.

Karakteristik teknik ini antara lain :

Ditampilkannya objek untuk interaksi pengguna.

Ditampilkannya penunjuk untuk memanipulasi objek (misal pointer).

Aksi diterapkan langsung terhadap objek.

Respon seketika fungsi objek (immediate feedback)

Contoh :

Pada Adobe Reader terdapat tombol untuk memperbesar (+) dan memperkecil (-)

area kerja.

Gambar 2.2 Contoh tampilan penggunaan Direct Manipulation Styles

b. Teori keterbatasan memori manusia (ada 3 bagian)

Ada dua tipe memori untuk merekam informasi :

a. Short-Term-Memory/STM (atau networking memory)

Ciri-ciri dari memori jenis ini adalah :



15

Mudah lupa dalam waktu 20detik

Lebih banyak informasi untuk diingat akan menambah kecepatan untuk

dilupakan pula

Gangguan terhadap informasi yang serupa sering menyebabkan

salahnya informasi saat dipanggil

Kecepatan informasi dilupakan tidak secara linear, tetapi seringkali

disebabkan dari hasil pemahaman terhadap sistem yang kompleks

b. Long-Term-Memory/LTM

Apabila menggunakan antarmuka kita harus mampu mengingat detil kunci dari

penggunaan sebelumnya. Contoh penggunaan Long-Term-Memory :

Files : sistem file dan penamaan file.

Procedure : password, logging on dan off.

Rules : aturan sistem.

Aturan yang perlu diperhatikan pada saat mencipatakan user interface terkait

dengan memori adalah :

Apapun antarmukanya harus memperhitungkan keterbatasan memori

Antarmuka harus memandu dan mendorong pengguna untuk

mengingatkan informasi yang telah diterimanya. Buatlah materi yang

mudah dikenal dan dipanggil kembali.

Nama dan icon harus mengandung arti supaya mudah diingat.

Rancangan antarmuka dan fungsi harus konsisten untuk mudah diingat.

c. Kelompok pengguna

Pembagian kelompok pengguna dibagi menjadi 3, yaitu :

a. Novice / First Time User

Mengetahui sedikit konsep

Hanya memiliki pengetahuan yang dangkal akan software

Pengguna asing dengan software

Action yang disediakan sebaiknya sedikit saja

Memberikan rasa nyaman dan bantuan



16

Informasi kesalahan harus secara detail dan terperinci

Bantuan dokumentasi dan step by step tutorial sangat membantu

b. Knowladgeable Intermittent Users

Mengetahui fungsi software

Kesulitan mencari letak dari fungsi-fungsi yang diketahui

Proteksi dari bahaya dibutuhkan karena user mulai melakukan

eksplorasi

Online help dan dokumentasi sangat membantu

c. Expert Frequent user

Ahli dan mengetahui secara detail kegunaan fungsi-fungsi software

Dapat menggunakan fungsi-fungsinya secara optimal

Membutuhkan respon yang cepat dan tidak mebutuhkan feedback

User memerlukan adanya perintah macro

Menu-menu yang ada dibuat ringkas dan cepat.

B. Langkah Praktikum :

Skenario :

Step 1 : Bentuklah kelompok dengan jumlah anggota 3 orang pada tiap-tiap kelompok

Step 2 : Tuliskan Software dengan tingkat

a. paling sering digunakan

b. jarang digunakan

c. belum pernah menggunakan.

Step 3 : Amatilah ketiga software tersebut

Step 4 : Gunakanlah ketiga software tersebut. Tuliskan bagaimana penguasaan anda dalam

menggunakannya terkait dengan antar muka yang tersedia.

Step 5 : Tuliskan komentar dan saran kelompok anda terhadap masing-masing software

tersebut sesuai dengan tingkatan masing-masing.

d. Goms dan Keystroke Level Model



17

Prinsip dasar KLM adalah menyusun daftar yang berisi urutan tindakan pada tingkat

penekanan tombol (keystroke-level actions) yang harus dilakukan oleh pengguna untuk

menyelesaikan sebuah tugas, kemudian menjumlahkan keseluruhan waktu yang diperlukan untuk

mengerjakan tindakan (action) tersebut. Tidak diperlukan contoh rancangan (mocked-up design)

yang menyerupai bentuk nyata, namun antarmuka pengguna harus ditunjukkan secara cukup

detil untuk menunjukkan urutan tindakan yang diperlukan dalam mengerjakan tugas-tugas yang

terkait.

Dengan menggunakan KLM, orang sering menemukan cara yang lebih efisien atau lebih

baik untuk menyelesaikan tugas hanya dengan menganalisa langkah-langkah yang diperlukan

dalam proses dan menata ulang atau menghilangkan langkah-langkah yang tidak dibutuhkan.

Tindakan-tindakan yang dilakukan oleh pengguna dikatakan berada pada keystroke level

jika tindakan yang dilakukan adalah menekan kunci/huruf, menggerakkan mouse, menekan

tombol, dan sebagainya. Contohnya adalah pada saat pengguna melakukan login ke sistem. Pada

tugas ini, pengguna harus menggerakkan mouse ke field yang tersedia, mengetikkan nama

pengguna dan kata sandi kemudian menekan tombol ’OK’.

Standar waktu eksekusi:

K - key press (0.2 sec = 55 wpm)

P - point with mouse (1.1 sec)

B - mouse button press (0.1 sec)

H - home hands to keyboard or mouse (0.4 sec)

M - mental act of thinking (1.2 sec)

W(t) - waiting for the system to respond (time t must be determined)

R - responding: The time a user must wait for a computer to respond to input.

Langkah-langkah Pengujian:

Untuk menguji penerapan KLM dalam memprediksi waktu eksekusi, secara umum

digunakan metodologi sebagai berikut :



18

a. Menyusun daftar aksi yang spesifik yang dilakukan pengguna untuk mengerjakan sebuah

tugas, misalnya :

Menekan kunci dan tombol

Menggerakkan mouse / navigation key

Memindahkan tangan antara keyboard (keypad) dan mouse (navi key)

Waktu tanggap sistem (jika pengguna harus menunggu)

b. Menambah Mental operators

c. Mencatat waktu eksekusi pada tiap-tiap langkah

d. Menjumlahkan keseluruhan waktu eksekusi. Total waktu eksekusi merupakan prediksi

waktu operator untuk menyelesaikan sebuah tugas

Skenario 1 :

Step 1 :

Pilihlah dua software text editor. Amati kedua software tersebut.

Step 2 :

Lakukan analisis untuk masing-masing software.

Step 3 :

Temukan kekurangan dan kelebihan software tersebut

Skenario 2 :

Step 1:

1. OpenOffice.org Impress

OpenOffice.org Impress adalah perangkat lunak yang digunakan untuk

membantu pembuatan dan penyajian presentasi dengan mudah dan dalam waktu yang

cepat.



19

Gambar. 1. Tampilan OpenOffice.org Impress

Layar utama OpenOffice.org Impress terdiri dari 3 bagian : slides panes, workspace

dan task pane, seperti nampak pada gambar 1. Sebagai tambahan beberapa toolbar

dapat disembunyikan atau ditampilkan ketika sedang membuat suatu presentasi.

2. Microsoft Office Power Point

Microsoft Office Power Point merupakan aplikasi yang dimiliki oleh

Microsoft dengan kemampuan yang sejenis dengan OpenOffice.org Impress, yaitu

aplikasi untuk membuat dan menampilkan suatu slide presentasi,seperti terlihat di

gambar 5.

Gambar 2. Tampilan Microsoft Office PowerPoint



20

Step 2 :

a. Task yang akan diidentifikasi

ada tiga task yang akan diidentifikasi berdasarkan kinerja yang paling baik, kinerja rata-

rata dan kinerja yang paling buruk :

(1) Task dengan kinerja baik :

Setelah melihat task yang terdapat pada OpenOffice.org Impress ini, task yang

memiliki kinerja cukup baik adalah task untuk menampilkan slide.

Untuk menampilkan slide, secara umum langkah-langkahnya adalah sebagai berikut,

Pilih View (menggunakan mouse).

Klik pilihan View yang ada, seperti normal, outline, slide sorter dan lain-lain

(menggunakan mouse), dapat dilihat pada gambar 2.

Gambar.2. Task Menampilkan Slide

atau

Dapat menggunakan pilihan untuk menampilkan sllide yang ada pada bagian

workspace (menggunakan mouse).

(2) Task dengan kinerja rata-rata :



21

Task kedua, yaitu task yang memiliki kemampuan rata-rata adalah untuk

memberikan warna pada background slide.

Untuk memberikan warna pada background slide, secara umum langkah-langkahnya

sebagai berikut,

Pilih Format (menggunakan mouse).

Klik pilihan Page.

Klik Background.

Pada bagian Fill, klik Color.

Pilih Warna yang diinginkan.

Klik OK. (dapat dilihat pada gambar 3)

Gambar.3. Task memberi warna pada background slide

(3) Task dengan kinerja buruk :

Setelah melihat task yang terdapat pada OpenOffice.org Impress ini, task yang

memiliki kinerja buruk adalah task untuk menyisipkan gambar.

Untuk menyisipkan gambar, secara umum langkah-langkahnya adalah sebagai

berikut,

Pilih Insert (menggunakan mouse).

Klik pilihan Insert, maka akan ada dua pilihan lagi, yaitu from file dan scan.

Pada pilihan Scan, terdapat pilihan lagi yaitu select source dan request.



22

Jika dipilih From File, maka muncul tampilan untuk memilih file yang akan

disisipkan. Pilih nama file dan tipe file yang diinginkan

Klik Open.(gambar 4)

Gambar.4. Task Menyisipkan gambar

a. Task yang akan diidentifikasi

Karena aplikasi yang dibahas memiliki kemampuan yang sejenis, maka tiga task yang

akan diidentifikasi berdasarkan kinerja yang paling baik, kinerja rata-rata dan kinerja

yang paling buruk akan didasarkan pada task yang sama yang telah diidentifikasi pada

aplikasi OpenOffice.org Impress:

(4) Task dengan kinerja baik :

Seperti task pada aplikasi sebelumnya, maka task yang memiliki kinerja baik adalah

untuk menampilkan slide.

Untuk menampilkan slide, secara umum langkah-langkahnya adalah sebagai berikut,

Pilih View (menggunakan mouse).

Klik pilihan View yang ada, seperti normal, outline, slide sorter dan lain-lain

(menggunakan mouse).

Sedikit berbeda dibandingkan aplikasi sebelumnya, untuk memilih tampilan

handouts, perlu dipilih pada Master, lalu klik handouts master dan beberapa

pilihan lainnya.(gambar 6)



23

Gambar.6. Task menampilkan slide

atau

Dapat menggunakan pilihan untuk menampilkan sllide yang ada pada bagian slide

pane. Letak pilihan ini berbeda dibandingkan pada aplikasi sebelumnya

(menggunakan mouse).

(5) Task dengan kinerja rata-rata :

Task kedua, yaitu task yang memiliki kemampuan rata-rata adalah untuk

memberikan warna pada background slide.

Untuk memberikan warna pada background slide, secara umum langkah-langkahnya

sebagai berikut,

Pilih Format (menggunakan mouse).

Klik Background.

Pada bagian Background Fill, pilih warna yang diinginkan.

Klik Apply to All atau Apply , dapat dilihat pada gambar 7.



24

Gambar.7. Task Memberi warna pada background slide

(6) Task dengan kinerja buruk :

Task ketiga yang memiliki kinerja buruk yaitu task untuk menyisipkan gambar.

Untuk menyisipkan gambar, secara umum langkah-langkahnya adalah sebagai

berikut,

Pilih Insert (menggunakan mouse).

Klik pilihan Insert, maka akan ada pilihan Picture.

Klik From File, pilih nama file dan tipe file yang diinginkan

Klik Insert.(gambar 8)

Gambar.8. Task Menyisipkan gambar pada slide



25

3. Keystroke Level Model

a. Task 1 pada OpenOffice.org Impress: Menampilkan Slide

Alternatif 1 : Menggunakan View

Deskripsi/langkah melakukan Task Operasi Waktu (detik)

Mengawali Task (inisialisasi) M 1.2

Home hand to mouse H 0.4

Klik View B 0.1

Berpikir untuk memilih jenis tampilan M 1.2

Klik jenis tampilan B 0.1

Total Waktu 3.0

Alternatif 2 : Menggunakan pilihan untuk menampilkan pada workspace




Berpikir untuk memilih jenis tampilan pada

workspace

M 1.2


Total Waktu 2.9



26

b. Task 2 pada OpenOffice.org Impress : Memberi warna pada background slide




Klik Format B 0.1

Berpikir untuk mencari pilihan page M 1.2

Klik Background B 0.1

Klik Color B 0.1

Berpikir untuk memilih warna M 1.2

Klik OK B 0.1

Total Waktu 4.4

c. Task 3 pada OpenOffice.org Impress: Menyisipkan Gambar

Menggunakan Insert




Klik Insert B 0.1

Berpikir untuk mencari pilihan picture M 1.2

Arahkan pointer ke pilihan picture P 1.1

Berpikir untuk memilih asal gambar yang

digunakan

M 1.2

Klik From File B 0.1

Berpikir untuk mencari gambar yang diinginkan M 1.2

Klik Open B 0.1

Total Waktu 6.6

d. Task 1 pada Microsoft Office PowerPoint : Menampilkan Slide

Alternatif 1 : Menggunakan View




Klik View B 0.1

Berpikir untuk memilih jenis tampilan M 1.2


Total Waktu 3.0



27

Alternatif 2 : Menggunakan pilihan untuk menampilkan pada slidepane




Berpikir untuk memilih jenis tampilan pada

slidepane

M 1.2


Total Waktu 2.9

e. Task 2 pada Microsoft Office PowerPoint : Memberi warna pada background

slide




Klik Format B 0.1

Berpikir untuk mencari pilihan Background M 1.2

Klik Background B 0.1

Berpikir untuk memilih warna yang dinginkan M 1.2

Klik Apply to all/apply B 0.1

Total Waktu 4.3

f. Task 3 pada Microsoft Office PowerPoint : Menyisipkan Gambar

Menggunakan Insert




Klik Insert B 0.1

Berpikir untuk mencari pilihan picture M 1.2

Arahkan pointer ke pilihan picture P 1.1

Berpikir untuk memilih asal gambar yang

digunakan

M 1.2

Klik From File B 0.1

Berpikir untuk mencari gambar yang diinginkan M 1.2

Klik Open B 0.1

Total Waktu 6.6



28

Step 3 :

Dari analisa yang dilakukan menggunakan Keystroke Level Model pada aplikasi OpenOffice.org

Impress dan Microsoft Office PowerPoint, didapatkan hasil yang hampir sama pada waktu yang

dibutuhkan untuk melakukan task-task tersebut. Hal ini dikarenakan aplikasi yang diberikan

mempunyai fungsi yang sama, sehingga langkah-langkah pada task yang ada pada kedua aplikasi

tersebut juga hampir sama. Jika terdapat perbedaan waktu, hasil yang diperoleh tidak terlalu

berbeda.

Skenario 3 :

Step 1 : Amati Sistem Operasi Windows

Step 2 : Amati Sistem Operasi Linux

Step 3 : Tuliskan daftar Function Keys dan Shortcut Keys kedalam tabel berikut untuk masing-

masing Sistem Operasi :

Key Nama Deskripsi

F1 Help Menyediakan bantuan kontekstual ketika kursor diarahkan pada daerah spesifik

di layar/panel

…. …… …………………………dst……………………………………………………….

Step 4 : Tuliskan kesimpulan dari isi tabel yang telah anda kerjakan.



29

BAB III

MENU

Pertemuan Ke :

Alokasi Waktu :

Kompetensi Dasar :1. Praktikan dapat merancang antarmuka sesuai dengan

paradigma IMK

Indikator :1. Praktikan dapat membuat menu

A. Teori Pendukung :

I. Struktur Menu dan Menu

Tujuan dari pembuatan menu, form fill-in, dan dialog-box : membuat suatu tugas (task)

menjadi wajar dan masuk akal, mudah dipahami dan mudah diingat oleh penggunanya. Adapun

struktur menu dikelompokkan seperti pada gambar dibawah ini :

Jenis-jenis menu yang dapat dikelompokkan sebagai berikut :

1) Menu Tunggal (single menus)

• mnemonic letter : pilihan item menggunakan huruf awal



30

• radio buttons : dengan bentuk radio button

• button choice : menggunakan bentuk tombol/button

• multiple-selection menus atau check boxes : item-nya diseleksi dapat lebih dari satu

• pop-up menus atau context menus : diaktifkan dengan mengklik tombol kanan mouse

pada area yang ditentukan

• scrolling – listbox choice : dengan menggunakan bentuk listbox

• scrolling – combobox choice : menggunakan bentuk combobox

• trackbar menu atau alpha-slider menu : dengan menggeser penunjuknya

• embedded links / hyperlinks : item-item disusun tidak beraturan atau mengikuti alur

cerita, contoh : tampilan browser atau help windows

• main menu, iconic menus, toolbars, atau palettes : menu yang digabung dengan icon

2) Linear sequences dan multiple menus

• memandu pengguna untuk proses yang kompleks

• contoh : clue cards atau wizard

3) Tree-structured menus

Terdiri dari : TreeView Menus, List View Menus, Tree-Struktured Menu (Tree View dan

List View).



31

4) Menu Maps

Efektif untuk meminimasi pengguna supaya terarah. Tampilan menu menggunakan arah /

alur atau peta ini efektif untuk meminimasi pengguna yang tidak terarah .

5) Menu Coolbar

Menu ini mirip seperti menu toolbar, hanya saja Coolbar lebih dinamis penampilannya

karena item yang dimunculkan bisa diatur tata letaknya, misal jika barnya diklik ganda,

digeser (drag) maka posisinya akan berubah.

II. Strategi Mengelompokkan Menu

Ada sejumlah cara bahwa item dalam menu dikelompokkan bersama. Hal ini termasuk :

Pengkategorian : pilihan dari tipe yang serupa ditempatkan bersama

Urutan yang lazim : misal nama hari dalam satu minggu

Jumlah pemakaian : pilihan yang digunakan terletak dekat dengan bagian atas dari menu.

Pastikan tidak ada item menu yang duplikasi atau overlapping

Gunakan istilah yang umum.

III. Urutan Penampilan Item Menu

Urutan dari item menu sangat penting dan sebaiknya mengikuti urutan alamiah seperti urutan :

Waktu

Urutan angka

Properti secara fisik

Apabila ditemukan kasus pengurutan tugas tidak memiliki hubungan satu sama lainnya,

perancang harus memilih dengan urutan sebagai berikut jika dimungkinkan :

Urutan alfabet

Pengelompokan item yang serupa

Letakkan item yang sering digunakan diurutan terdepan (paling atas/paling kiri)

Letakkan item yang paling penting di urutan pertama

IV. Tata Letak Menu

a. Judul



32

Untuk menu tunggal, gunakan judul yang sederhana. Sedangkan untuk tree-structured

menus, gunakan kata-kata pada item menu. Pada tingkat yang lebih tinggi, sebaiknya

dimunculkan pada judul menu dibawahnya.

b. Frase dari Item Menu

Gunakan istilah yang umum/familiar dan konsisten

Yakinkan bahwa setiap item berbeda dengan lainnya

Gunakan frase yang konsisten dan pasti

Letakkan keyword di sebelah kiri.

c. Tata Letak dan Desain Monitor (Graphic)

Ada beberapa batasan yang digunakan antara lain :

Lebar dan panjang layar

Display rate

Character set

Higlighting techniques

Panduan untuk konsistensi menu dengan memperhatikan hal-hal sebagai berikut :

Judul

Penempatan item

Intruksi-intruksi

Error messages

Status report

Teknik yang digunakan antara lain :

Indentasi

Upper/lower case character

Simbol-simbol seperti * atau – untuk membuat separator atau outlines

Penanda posisi

Cascading / walking menus

Magic lens

C. Langkah Praktikum

Skenario 1 :

Step 1 : Carilah software



33

Step 2 : Amati Software tersebut dan carilah menu-menu yang digunakan kemudian periksalah

tata letak menunya. Berikan penjelasan di setiap masing-masing jawaban anda.

Step 3 : Catatlah jawaban anda kedalam tabel berikut :

No Nama Software Menu-menu yang tersedia Penjelasan

1. Microsoft Office Menu Toolbar, …….., …… Terletak disebelah atas berisikan

menu-menu short cut yang biasa

digunakan user, seperti cut, paste dsb

2. …………………. ……………………………… …………………………………..

Skenario 2:

Step 1 :

Carilah software media player

Step 2 :

Tuliskan jenis struktur menu yang digunakan pada sofware tersebut

Step 3

Tuliskan menu-menu yang disediakan pada software tersebut beserta masing-masing fungsinya.

Skenario 3 :

Akan dibuat kalkulator kesehatan. Tuliskan struktur menu yang anda rekomendasikan dan

jelaskan. Tuliskan menu-menu yang bisa digunakan beserta fungsinya.



34

BAB IV

TEKNIK DIALOG MENU DATAR

Pertemuan ke :

Waktu :

Kompetensi Dasar : Dapat membuat dialog menu datar

Indikator : 1. Praktikan membuat tampilan suatu program dengan

mempraktekkan teknik dialog menu datar

A. Teori Pendukung

Sistem menu merupakan pilihan yang tepat untuk menunjukkan kemampuan dan

fasilitas yang dimiliki oleh sebuah program aplikasi kepada pengguna. System menu adalah

daftar sejumlah pilihan dalam jumlah terbatas, yang biasanya berupa kalimat/kumpulan

kata-kata.

Ada 2 jenis system menu yang pertama Sistem menu datar.

Adalah suatu program aplikasi ditampilkan lengkap dan menggunakan kalimat-kalimat

yang cukup panjang. Pada system menu datar pemilihan menu dapat dilakukan dengan 2

cara yaitu:

a. Menggunakan selector dari setiap pilihan yang tersedia. Cara ini bermaksud

memudahkan pengguna dalam melakukan pilihan, pada setiap pilihan biasanya

disertakan suatu selector yang dapat berupa huruf, angka atau campuran keduanya.

b. Penggunaan tanda terang (highlight). Tanda terang dapat digerakkan pada semua

pilihan yang ada dilayar dengan cara menggunakan bantuan tombol arah atau

menggunakan bantuan mouse, menempatkan tanda terang ke suatu pilihan yang

diinginkan, kemudian pengguna harus menekan tombol enter atau mengklik mouse

untuk mengkonfirmasi pilihannya.



35

Gambar 3.1. Contoh tampilan system menu datar

B. Langkah Praktikum

1. Mengadakan Pretes (15 Menit)

2. Tahapan Praktikum

Latihan membuat tampilan utama Sistem Informasi Perpustakan dengan teknik dialog

menu seperti yang tampak pada contoh dibawah ini.



36

Gambar 3.1. Tampilan utama S. I. Perpustakaan dengan teknik dialog menu datar

Contoh diatas hanya sebagian menu-menu yang ditampilkan pada Sistem Informasi

Perpustakaan, banyaknya menu tergantung kebutuhan sistem yang dibutuhkan. Pada saat

mendesain harus tetap memperhatikan pewarnaan, susunan dan urutan tata letak menu, style

huruf.

3. Tugas Praktikum

a. Analisislah proses apa saja yang terjadi dalam Sistem Informasi Akademik dalam suatu

Sekolah.

b. Desainlah form utama untuk Sistem Informasi Akademik dengan menggunakan teknik

dialog menu datar berdasarkan pada analisis yang sudah anda lakukan.

C. Evaluasi

Buatlah dialog menu datar Sistem Informasi Perpustakaan berdasar pada scenario dibawah

ini.

Skenario:

Akan dibangun sistem informasi perpustakaan, dimana user yang akan melakukan akses

pada system ini ada 3 kelompok pengguna utama, yaitu:

1. Petugas perpustakaan sekaligus admin, yang dapat mengakses semua fasilitas yang ada

pada SI Perpustakaan yang dibuat

2. Anggota perpustakaan, hanya dapat mengakses pada form pendaftaran anggota dan

informasi data buku serta fasilitas searching buku yang ada didalam perpustakaan

3. Kepala Perpustakaan, yang hanya bisa mengakses pada fasilitas laporan.

Setiap user diberikan 3 kali kesempatan melakukan kesalahan pada saat login.

Fasilitas lengkap yang disediakan oleh SI Perpustakaan ini meliputi Form Pendaftaran

Anggota Perpustakaan, form input data buku, searching buku berdasarkan judul, searching

anggota berdasarkan nama, form peminjaman, form pengembalian, laporan transaksi

peminjaman, laporan transaksi pengembalian, laporan denda, laporan data buku, laporan

data anggota, tutorial program, form login.

Tugas:



37

1. Desainlah tampilan utama dari scenario diatas dengan menggunakan ragam dialog menu

datar dimana pemilihan menunya menggunakan cara highlight

2. Desainlah minimal 3 form dari fasilitas lengkap yang muncul pada skenario diatas!

Point penilaian:

1. Kesesuaian desain dengan scenario

2. Tata letak sesuai dengan aturan teknik dialog yang dipilih

3. Pewarnaan dan pemilihan kata baik pada menu, form, maupun command button yang

dipilih.



38

BAB V

TEKNIK DIALOG MENU TARIK

Pertemuan ke :

Alokasi waktu :

Kompetensi Dasar : Mahasiswa dapat membuat dialog menu tarik

Indikator : Dapat membuat aplikasi dengan mengaplikasikan teknik dialog menu

tarik

A. Teori Pendukung

Apabila pada praktikum 4 sudah dipelajari tentang teknik dialog menu datar, maka

pada praktikum 5 ini akan dipelajari mengenai teknik dialog menu tarik.

Disebut sistem menu tarik (pulldown) karena seolah-seolah kita memegang sebuah

menu/pilihan dan kemudian menarik kebawah atau kesamping untuk dapat melihat submenu

dari menu/pilihan tersebut, setelah pilihan dikonfirmasikan, maka daftar subpilihan menjadi

tidak terlihat lagi, maka disebut juga menu pulldown.

Sebuah menu tarik pada dasarnya adalah system menu yang pilihan-pilihannya

dikelompokkan menurut kategori tertentu sehingga membentuk semacam hirarki pilihan.

Pada hirarki paling tinggi, pilihan-pilihan itu disebut sebagai pilihan/menu utama. Sebagian

atau semua pilihan/menu utama dapat mempunyai satu atau lebih sub menu/sub pilihan.

Struktur ini membentuk semacam struktur pohon.

Tata letak menu, harus diperhatikan agar tampilan dari menu menjadi indah. Ada

beberapa hal yang harus diperhatikan, yaitu:

1. Judul

Judul harus deskriptif, nama pilihan harus sama dengan judul halaman yang dipanggil.

2. Penamaan pilihan menu

Gunakan istilah yang dikenal, singkat dan konsisten, pastikan item dapat dibedakan dari

pilihan lain

3. Desain grafis



39

Perhatikan kendala seperti lebar dan tinggi layar, kecepatan tampil dan, karakter set

dan highlighting dan buat pedoman untuk komponen-komponen, judul, penempatan item,

petunjuk, pesan kesalahan dan laporan status.

B. Tahapan Praktikum

1. Mengadakan Pretest (15 menit)

2. Langkah praktikum

a. Perhatikan tampilan yang ada di gambar 4.1.

Gambar 4.1. contoh tampilan menu tarik

b. Dari contoh tampilan pada gambar 4.1., buatkan hierarkinya dengan menggunakan

tool user interface design, buatlah desain menu utama dari sebuah System Informasi

Perpustakaan yang merupakan implementasi dari teknik dialog menu tarik

3. Tugas Praktikum

c. Analisislah proses apa saja yang terjadi dalam Sistem Informasi Akademik dalam suatu

Sekolah.

d. Susunlah hasil analisis anda tadi dalam bentuk suatu hierarki, atau buatlah

pengelompokan dari proses-proses tersebut.

e. Desainlah form utama untuk Sistem Informasi Akademik dengan menggunakan teknik

dialog menu datar berdasarkan pada analisis yang sudah anda lakukan.

C. Evalusi

Desainlah tampilan Sistem Informasi Perpustakaan berdasarkan scenario yang ada dibawah

dengan menggunakan teknik dialog menu tarik.



40

Skenario:

Akan dibangun sistem informasi perpustakaan, dimana user yang akan melakukan akses

pada system ini ada 3 kelompok pengguna utama, yaitu:

4. Petugas perpustakaan sekaligus admin, yang dapat mengakses semua fasilitas yang ada

pada SI Perpustakaan yang dibuat

5. Anggota perpustakaan, hanya dapat mengakses pada form pendaftaran anggota dan

informasi data buku serta fasilitas searching buku yang ada didalam perpustakaan

6. Kepala Perpustakaan, yang hanya bisa mengakses pada fasilitas laporan.

7. Setiap user diberikan 3 kali kesempatan melakukan kesalahan pada saat login.

8. Fasilitas lengkap yang disediakan oleh SI Perpustakaan ini meliputi Form Pendaftaran

Anggota Perpustakaan, form input data buku, searching buku berdasarkan judul,

searching anggota berdasarkan nama, form peminjaman, form pengembalian, laporan

transaksi peminjaman, laporan transaksi pengembalian, laporan denda, laporan data buku,

laporan data anggota, tutorial program, form login.

Tugas:

1. Buatkan hierarki program dari SI Perpustakaan di atas.

2. Desainlah form utama bagi masing-masing user apabila user tersebut berhasil melakukan

login!

3. Desain form penanganan kesalahan bagi masing-masing user apabila mereka melakukan

kesalahan/gagal login!

4. Desainlah minimal 3 form dari fasilitas lengkap yang muncul pada skenario diatas!

Point penilaian:



3. Pewarnaan dan pemilihan kata baik pada menu, form, maupun command button yang

dipilih.



41

BAB VI

PENGATURAN TAMPILAN DAN WARNA

Waktu :

Kompetensi Dasar :

Indikator :

Perancangan yang berhubungan dengan bagian informasi dapat ditampilkan dengan cara yang

terbaik pada layar. Beberapa hal yang terkait yang perlu diperhatikan antara lain : kerapatan

visual dan keseimbangan (dari daerah-daerah teks), kejelasan teks, pengkodean visual,

visualisasi, dan penggunaan warna.

I. Kerapatan Visual dan Keseimbangan

Hal ini berhubungan dengan bagaimana “terkemas dengan eratnya” teks itu pada

layar dan oleh karena itu berhubungan dengan jumlah “white space” atau ruang kosong yang

ada sehubungan dengan teks itu. Kepadatan/kerapatan tinggi berarti ada banyak teks dan

sedikit ruang kosong dan pengaturan seperti ini membuat teks lebih sulit untuk dibaca.

Pada sebuah kertas sering dijumpai kerapatan tekas antara 70% - 80%, yang artinya

sebanyak 70% – 80% dari halaman kertas ditutupi oleh teks. Hal ini mungkin masih bisa

terbaca, tetapi pada layar komputer akan sulit dibaca. Oleh karena itu kerapatan yang

disarankan antara 15 % - 20%. Hal lain yang membuat suatu teks dapat terbaca atau tidak

adalah susunan teks pada layar.

II. Kejelasan Teks

Hal- hal yang perlu diperhatikan terkait dengan kejelasan teks antara lain :

a. Gunakan peraturan standar huruf besar dan kecil sesuai standar

b. Gunakan jenis-jenis huruf yang umum (Times, Courier, Geneva) . Hindari

penggunaan huruf yang tampak lucu, tetapi susah dibaca.

c. Hindari penggunaan lebih dari tiga jenis huruf, dan tiga ukuran huruf dalam

sebuah dokumen.



42

Satu teknik yang digunakan untuk antar muka www (browser) adalah dengan membuat tabel

yang terdiri dari hanya satu baris, tanpa batas dan mengatur lebarnya pada sejumlah partikel-

partikel gambar tertentu, sehingga layar teks akan selalu tetap lebarnya seperti yang telah

ditentukan berapapun ukuran jendela browser.

III. Pengkodean Visual

Hal ini mengacu kepada sejumlah teknik yang mungkin dapat digunakan untuk menarik

perhatian, atau memusatkan perhatian pada elemen-elemen tertentu dilayar. Elemen-elemen

tertentu dilayar. Elemen-elemen ini termasuk :

Elemen-elemen intensitas yang membedakan. Warna dasar yang hampir sama diletakkan

secara berdekatan, sehingga user akan lebih mudah melihat, dibandingkan jika diletakkan

berjauhan. Hal ini bisa dilakukan dengan menampilkannya dalam lingkaran warna (color

circle) atau bentuk bangun yang lain.

Contoh :

Pemilihan bentuk-bentuk yang unik , sebagai contoh teks yang diletakkan di dalam

bentuk ‘awan’, atau dalam sebuah kotak, akan tampak mencolok dari sekelilingnya.

Warna dan Shading/bayangan dapat digunakan untuk memberi efek yang bagus.

Informasi yang ditampilkan, dapat sangat mempengaruhi daya baca dan kemudahan

mendapatkan informasi-informasi tertentu, bahkan pada layar-layar yang cukup kompleks

sekalipun. Rancangan layar yang dibuat dengan teliti dapat meningkatkan kegunaan suatu paket

program.



43

IV. Warna

Mata manusia mengandung banyak syaraf-syaraf penerima yang terdiri dari sel-sel

berbentuk batang tongkat yang disebut rod dan sel-sel berbentuk corong yang disebut cone. Sel

cone peka terhadap tiga warna yaitu : warna merah/jingga atau hijau/kuning atau biru.Dalam

kehidupan ada beberapa manusia yang dikaruniai cacat warna hal ini harus dipertimbangkan

dalam membuat user interface. Bentuk cacat yang paling umum adalah tidak bisa membedakan

warna merah dengan hijau. Ketika ingin membuat sebuah tampilan, jangan hanya mengandalkan

pengkodean warna tetapi juga menggunakan bentuk simbol (misal : bentuk, ukuran, tekstur,

simbol-simbol). Contoh : lampu lalu lintas. Pengguna jalan tidak harus punya kemampuan

membedakan warna, dengan bantuan cahaya dapat diketahui warna apa yang palig terang.

Cahaya disini sebagai petunjuk tambahan.

V. Tuntunan untuk Menggunakan Warna

Dalam layar-layar yang kebanyakan terdiri dari teks, warna dapat membantu ketika pengguna

harus mencari atau membedakan bagian-bagian tertentu. Ini dapat digunakan untuk membagi

sebuah layar kedalam segmen-segmen yang berbeda sesuai kebutuhan. Warna juga dapat

digunakan untuk membedakan kategori-kategori data yang berbeda sebagai contoh, gunakan

warna untuk membedakan antara :

Data lama dan data baru

Fitur/gambar asli dengan figur-figur yang direncanakan

Judul/heading dan badan teks

Data yang disediakan oleh user/pengguna dan data yang disediakan oleh komputer.

Data yang benar dan data yang salah.

VI. Tuntunan Umum

Ada beberapa hal yang perlu diperhatikan terkait dengan tuntunan umum penggunaan warna,

yaitu :

Jangan menggunakan lebih dari 4 atau 5 warna sekaligus (layar bisa menjadi tidak

tersusun dengan baik)

Sebuah kode warna harus mendukung kelancaran tugas pengguna bukan

memperlambat. Gunakan untuk mengidentifikasi hal-hal yang sama yaitu : untuk

membedakan hal-hal yang berbeda, untuk menunjukkan keadaan-keadaan tertentu.



44

Ingat tidak ada terjemahan yang umum, jadi harus menggunakan skema warna yang

dikenali oleh pengguna sebagai contoh, merah sering diterjemahkan sebagai

‘bahaya’, tapi dalam beberapa konteks mungkin hanya berarti panas.

Tetaplah konsisten dengan penggunaan warna di dalam dan antara antarmuka-

antarmuka perangkat lunak.

Jika memungkinkan pengguna harus diberi kendali atas pengkodean warna sehingga

mereka dapat merancang warna yang memiliki arti bagi mereka.

Hindari kombinasi-kombinasi warna sebagai berikut :

o Merah pada biru bergetar

o Kuning pada biru bayangan

o Merah pada hijau bayangan

o Hijau pada biru after image

Teks merah pada latar belakang biru membuat teks tampak bergetar. Kuning pada

biru memberi kesan pinggiran-pinggiran pucat disekitar teks. Merah pada hijau atau kuning pada

biru memberi efek ‘bayangan’. Beberapa kombinasi seperti hijau pada biru, dapat menghasilkan

‘after image’ pada retina yang dapat mengganggu penglihatan untuk sementara.

VII. Penggunaan Sistem Warna RGB

a. Cahaya Melalui Kombinasi Warna Dasar/Primer

Cahaya terdiri dari tiga kombinasi warna dasar/primer merah, biru, dan hijau. Dengan

kombinasi warna dasar/primer ini dalam intensitas yang berbeda kita mendapatkan semua warna

kelihatan. Jika kita menghadirkan intensitas dari tiap warna primer dengan satu angka, maka kita

dapat melihat ketiga warna tersebut berupa tiga angka (satu angka untuk warna merah, satu

angka untuk marna hijau, dan satu angka untuk warna biru). Sistem ini dikenal dengan RGB

Color System (Red, Green, Blue).

b. Sistem Warna RGB

Sebagai asumsi jika menggunakan bilangan bulat dengan cakupan nilai dari 0 sampai

dengan 255 (1 byte), yaitu 256 nilai yang mungkin untuk masing-masing warna primer, maka

dengan tiga byte dapat menghasilkan 256x256x256 kombinasi warna yang berbeda.

Ada lebih dari 16juta warna yang dapat dihadirkan, dikenal dengan ‘true color’. Sistem ini

dikenal dengan RGB-256. Beberapa program ada yang menggunakan sistem RGB-100, yaitu



45

menggunakan angka-angka dengan cakupan 0..100 untuk menandakan persentase dari intensitas

(0%= off ; 100% = max).

c. Warna abu-abu (gray)

Warna hitam dilambangkan sebagai ketidakhadiran warna (cahaya) diwakili dengan nilai RGB

(Red = 0, Green = 0, Blue = 0 atau 0,0,0). Sedangkan warna putih dianggap sebagai kehadiran

dari semua warna (dalam intensitas maksimum) diwakili dengan RGB (255,255,255).

Contoh :

RGB (0,0,0) : hitam

RGB (128, 128, 128) : abu-abu gelap (dark gray)

RGB (192,192,192) : abu-abu terang (light gray)

RGB (255, 255, 255) : putih

d. Warna Dasar/Warna Primer

Kombinasi nilai RGB untuk warna dasar adalah sebagai berikut :

RGB (255,0,0) = merah menyala (merah terang)

RGB (0,255,0) = hijau menyala (hijau terang)

RGB (0,0,255) = biru menyala (biru terang)

Kombinasi warna dasar yang gelap :

RGB (128, 0, 0) = merah gelap

RGB (0,128,0) = hijau gelap

RGB (0,0,128) = biru tua

e. Warna Sekunder

Warna sekunder didapatkan dari mengkombinasikan dua warna primer dengan intensitas yang

sama :

RGB (0, 255, 255) = Cyan terang = light green + light blue

RGB (255, 0, 255) = Magenta Terang = light red + light blue

RGB (255, 255, 0) = Kuning (Yellow) Terang = light red + light green

Kombinasi warna sekunder dengan yang gelap :

RGB (0, 128, 128) = Cyan gelap = hijau gelap + biru tua

RGB (128, 0, 128) = Magenta gelap = merah tua +biru tua

RGB (128,128,0) = Kuning gelap = merah gelap + hijau gelap



46

f. Warna-warna lainnya

Orange merupakan warna campuran dari merah terang atau RGB (255, 0,0) dan

kuning terang atau RGB (255, 255, 0) sehingga kalau digabungkan akan menjadi

RGB (255, 128, 0) yang akan menghasilkan warna orange.

Cara mencarinya adalah :

Merah = (255 + 255) / 2= 255

Hijau = (0+255) / 2 = 128

Biru = (0 + 0) / 2 = 0

g. Warna Murni

Warna murni berkombinasi hanya dua warna dasar dan mempunyai format

RGB(X,Y,0), RGB(Y,X,0), RGB(0,X,Y), RGB(0,Y,X), RGB(X,Y,0) atau

RGB(Y,X,0) di mana x<> 0 dan x>=y:

Ketika y= 0, kita mempunyai suatu warna dasar.

Ketika x= y, kita mempunyai suatu warna sekunder.

Ketika y= x/2 kita mempunyai suatu warna yang persisnya antara suatu warna

dasar dan suatu warna sekunder. Sebagai contoh RGB(255,128,0) adalah warna

oranye persisnya antara merah dan kuning.

Ketika y < x/2 kita mempunyai suatu warna semakin dekat dengan warna dasar

dibanding warna sekunder. Sebagai contoh RGB(255,116,0) adalah oranye yang

semakin dekat ke merah dibanding ke kuning.

Ketika y > x/2 kita mempunyai suatu warna semakin dekat dengan warna

sekunder dibanding warna dasar. Sebagai contoh, RGB(255,140,0) adalah orange

yang semakin dekat ke kuning dibanding ke merah.

h. Hue dan Luminosity (kilauan)

Warna dengan format yang sama akan mempunyai hubungan sama dengan x/y, ini dikatakan

mempunyai “hue” sama. Sebagai contoh RGB(255,128,0) dan RGB(192,96,0) mempunyai

format yang sama ( RGB(X,Y,0)) dan keduanya mempunyai hubungan yang sama dengan x/y (

255/128= 192/96), sehingga dikatakan mempunyai hue sama.



47

Hue sering mengarah pada format warna yang sama. Contoh warna oranye terang dan oranye

gelap, keduanya mempunyai hue yang sama tetapi kilauan (luminosity) yang berbeda. Kilauan

mengukur bagaimana suatu warna dekat dengan putih, dan pada umumnya diwakili dengan

persentase. Sebagai contoh, RGB(192,96,0) adalah oranye dengan kilauan 75% dan

RGB(128,64,0) adalah oranye dengan kilauan 50%.

RGB(255,128,0) = Orange 100% luminosity



Hue dari RGB(0,0,128) dan RGB(0,0,64) adalah biru, tetapi warna yang kedua mempunyai

kilauan 50% dan 25%.

i. Saturation Kejenuhan

Terlepas dari kilauan dan hue, warna digambarkan oleh parameter ketiga yang dikenal sebagai

kejenuhan (saturation), yang mana mengukur kemurnian dari warna. Sejauh ini kita telah

berhadapan dengan 100% warna murni. Warna tidak murni adalah warna murni yang bercampur

dengan kelabu. Semakin sedikit bercampur dengan kelabu, semakin jenuh. Sebagai contoh,

RGB(192,128,64) mempunyai kilauan dan hue oranye terang RGB(255,128,0), tetapi 50%

kejenuhan. Hal ini diakibatkan percampuran oranye terang dengan abu-abu

sedangRGB(128,128,128):

Oranye merah kelabu =( 255+ 128) / 2= 192

Hijau=( 128+ 128) / 2= 128

Biru=( 0+ 128) / 2= 64

Jika kita mencampur hasil kelabu sedang lagi, kita akan membuat oranye dengan 25%

kejenuhan RGB(160,128,96), bahkan semakin dekat ke kelabu sedang. Jika kita mencampurnya

dengan kelabu lagi, kita mendapatkan suatu orange dengan 12,5% kejenuhan

RGB(144,128,112).

RGB(255,128,0) = Light Orange 100% saturation



RGB(144,128,112) = Light Orange 12,5% saturation



48

RGB(128,128,128) = Kelabu sedang / Medium Gray

Kejenuhan (Saturation) dapat dihitung dengan rumusan berikut :

Kejenuhan= (( maximum-medium)+ ( medium-minimum)) / 255* 100%

Sebagai contoh:

Saturation(160,128,96) = ((160-128) + (128-96)) / 255 * 100%

= (32 + 32) / 255 * 100%

= 64 / 255 * 100%

Saturation(160,128,96) = 25%

j. Penyajian Warna dengan Bilangan Bulat (Desimal dan Heksadesimal)

Ke tiga bytes itu menghadirkan suatu warna yang dapat dikombinasikan dalam 32-bit bilangan

bulat, secara normal diwakili oleh notasi hekadesimal. Sebagai contoh, RGB(160,128,96) adalah

6080A0:

Red (RR) = 160 dec = A0 hex

Green (GG) = 128 dec = 80 hex

Blue (BB) = 96 dec = 60 hex

Sebagai catatan kontanta warna mempunyai format BBGGRR (bukan RRGGBB), dimana BB

adalah byte (dua digit heksa) untuk biru, GG adalah byte untuk hijau dan RR adalah byte untuk

merah. Alasan penyimpanan dalam bilangan bulat dikarenakan pemakaian memori internal lebih

kecil. Kontanta BBGGRR akan disimpan dalam memori internal sebagai RRGGBB (urutan

terbalik), contoh 6080A0 secara internal disimpan sebagai A08060.

Skernario 1

Step 1 : Bukalah aplikasi browser, aplikasi word processor, dan aplikasi multimedia

Step 2 : Amati bagaimana ketiga user interfase software tersebut dalam menerapkan

desain warna.

Step 3 : Jelaskan software yang menggunakan fitur warna yang paling banyak dan yang

paling sedikit, jelaskan mengapa demikian

Skenario 2

Untuk membantu proses pembelajaran bahasa inggris akan dibuat aplikasi yang mirip seperti

kamus. Pengguna aplikasi ini ada dua macam yaitu anak-anak dan remaja. Jika dipilih tombol A

maka akan menuju ke aplikasi kamus anak-anak, jika dipilih tombol R maka akan menuju ke



49

aplikasi kamus remaja. Buatlah perancangan antar muka untuk aplikasi kamus tersebut dengan

memanfaatkan fungsi penggunaan warna.



50

Skenario 3

Akan dibuat aplikasi games mengenal benda-benda sekitar untuk anak-anak usia 1-3 tahun.

Buatlah perancangan antarmuka penggunanya. Manfaatkan fungsi penggunaan warna



51

BAB VII

DESAIN FORM

Pertemuan Ke :

Alokasi Waktu :

Kompetensi Dasar :1. Praktikan dapat merancang antarmuka sesuai dengan

paradigma IMK

Indikator :1. Praktikan dapat membuat tampilan form input data

2. Praktikan dapat membuat tampilan form searching

3. Praktikan dapat membuat tampilan form report

A. Teori Pendukung

Komputer dan peralatan harus didesain sesuai dengan kebutuhan yang diinginkan

dan dapat membantu manusia dalam pekerjaan sehari-hari.

Prinsip pada interaksi manusia dan computer yang harus diingat adalah:

1. Kenali Perbedaan

a. Batasi jumlah pilihan

b. Umpan balik yang informative

c. Manual dan tutorial yang efektif

d. Struktur menu yang rapi

e. Konsistensi

f. Kejelasan antarmuka

2. Gunakan 8 aturan emas perancangan

a. Berusaha untuk konsisten

b. Memungkinkan frequent users menggunanakn shortcut

c. Memberikan umpan balik yang informative

d. Merancang dialog yang memberikan penutupan (keadaan akhir)

e. Memberikan pencegahan kesalahan dan penanganan kesalahan yang sederhana



52

f. Memungkinkan pembalikan aksi yang mudah

g. Mendukung pusat kendali internal

h. Mengurangi beban ingatan jangka pendek

3. Cegah Kesalahan

a. Menempatkan tanda pembuka dan penutup dalam satu aksi

b. Mengingatkan pengguna bahwa tanda penutup belum dipasang

c. Memungkinkan penggabungan aksi-aksi menjadi suatu aksi baru dengan makro atau

sejenisnya

d. Melakukan aksi-aksi yang tergantung aksi lain secara automatis

e. Mengenali kekurangan perintah dan melengkapinya

f. Memberikan pilihan sebagai ganti mengetik


1. Mengadakan Pretest (15 Menit)


a. Mendesain form input data, perlu diperhatikan fungsi dan tata letak serta urutan

penempatan elemennya. Selain itu juga diperhatikan environment dari setiap data

yang di-input-kan. Misal data masukan adalah jenis kelamin maka label yang dipilih

bisa disediakan dalam bentuk radio button, option button.

b. Untuk mendesain form searching, perlu juga diperhatikan. Pencarian bisa

berdasarkan apa dan bagaimana tampilan hasil pencarian tersebut, bisa berdasarkan

No Anggota, Nama, Tempat Tanggal Lahir, Alamat dan lain-lain. Contoh sederhana

form searching:



53

Gambar 2.2. Form searching dengan menggunakan 1 keyword

Desain diatas hanya menggunakan satu kata kunci pada form pencarian, adakalanya

kita bertemu dengan form pencarian yang menghendaki lebih dari satu kata kunci,

seperti yang tampak pada gambar dibawah ini:

Gambar 2.3. Form searching dengan keyword lebih dari 1

c. Form untuk report. Sampai dimana kita inginkan report itu? Report juga penting

dalam antarmuka pengguna, desainnya juga harus rapi dan urut berdasarkan hasil

dari input data yang dibuat sebelumnya. Misalnya untuk report anggota, baik

perorangan maupun keseluruhan anggota. Contoh form report:f



54

3. Tugas Praktikum

Skenario 1 :

Buatlah Form untuk Input Data Anggota, searching dan report pada Sistem Informasi

Perpustakaan. Yang perlu diperhatikan fungsi dan tata letak desain yang akan anda buat

serta pewarnaan yang baik.

Tuliskan langkah-langkah anda dalam membuat form tersebut pada lembar evaluasi

C. Evaluasi/Postest

Berdasarkan pada skenario yang ada dibawah ini desainlah form-form yang digunakan

pada aplikasi tersebut!

Skenario:

Ada seorang petugas perpustakan akan menginputkan data pengembalian buku dari

seorang anggota perpustakaan. Sebelum melakukan proses input data pengembalian

buku, petugas tersebut harus login dulu, dimana dalam login yang dilakukan hanya

memperbolehkan terjadinya kesalahan login sebanyak 3 kali. Setelah berhasil login

petugas tersebut baru bisa memproses pengembalian tersebut, dan dalam proses

pengembalian buku terdapat ketentuan tentang denda bagi buku yang terlambat

dikembalikan, sementara untuk kejadian yang ada pada kasus ini adalah buku yang

dikembalikan sudah lewat dari batas akhir pengembalian bukunya.

Tugas :

1. Desainlah form login termasuk saran penanganan kesalahan pada saat login,

sesuaikan dengan kasus yang ada



55

2. Desainlah form pengembalian yang didalamnya sudah terdapat proses penghitungan

denda (proses penghitungan denda masuk pada form baru)

3. Desainlah form searching untuk mengetahui anggota yang belum menggembalikan

bukunya pada tanggal tertentu

4. Desainlah form untuk mencetak laporan peminjaman, laporan pengembalian, laporan

denda pada periode tertentu

Point-point yang dinilai:


2. Pewarnaan

3. Konten/esensi/usebality yang muncul dari masing-masing form yang didesain

4. Kemudahan dalam pengoperasian



56

TEKNIK DIALOG BERBASIS PENGISIAN BORANG

(FORM FILLING DIALOGUE)

Pertemuan :

Alokasi Waktu :

Kompetensi dasar : 1. Praktikan bisa mengimplementasikan Desain analisis ragam

dialog pengisian formulir.

2. Praktikan mampu mengaplikasikan teknik validasi data melalui

pengisian form untuk mengurangi efek human error.

Indikator : Membuat form dengan mengaplikasi teknik dialog pengisian borang.

A. Teori Pendukung

Dialog berbasis pengisian borang/formulir merupakan suatu penerapan langsung dari

aktifitas pengisian borang/formulir dalam kehidupan sehari-hari, dimana pengguna akan

dihadapkan langsung pada suatu bentuk formulir yang ada dilayar komputer yang mereka

gunakan. Dialog berbasis pengisian borang adalah tampilan sejumlah persyaratan yang

menampilkan option dan berbagai nilai parameter yang telah ditentukan dan

diintegrasikanke dalam sebuah tampilan pada layar dan biasa digunakan dalam system yang

membutuhkan pemasukan data yang banyak, contoh pengisian data pembuatan KTP, SIM.

Dialog berbasis pengisian borang, cocok dipakai jika banyak field data yang dibutuhkan,

pendekatan pengisian borang menarik karena kelengkapan informasi terlihat, seperti

formulir kertas dan sedikit petunjuk yang diperlukan.

Pedoman perancangan pengisian borang:

1. Judul yang berarti seperti instruksi yang dapat dipahami, pengelompokan dan pengurutan

field yang logis, tata letak yang menarik secara visual dan label field yang dikenal.

2. Ruang kosong dan batas field yang harus diisi harus terlihat jelas

3. Pergerakan kursor yang leluasa

4. Koreksi kesalahan untuk karakter dan field sebagai bentuk dari validasi data

5. Pesan kesalahan untuk nilai yang tidak dapat diterima

6. Field option jelas ditandai, atau sebaliknya field wajib yang ditandai

7. Hindari penyelesaian otomatis.



57

Gambar 5.1. Tampilan teknik dialog berbasis pengisian borang




Langkah-langkah pembuatan input katalog buku sistem informasi perpustakaan.

a. Pertama siapkan form terlebih dahulu.

b. Untuk input data katalog dibagi lagi, yaitu buku indonesia dan asing. Pada gambar

dibawah yang dipilih adalah untuk input katalog buku dari indonesia.

c. Pada katagori diberikan pilihan berdasarkan apa.

d. Setelelah katagori dipilih maka no koleksi akan otomatis mengapdate no urut

berdasarkan katagori yang di pilih.

3. Tugas Praktikum

Skenario:

Sistem Perpustakaan

Tugas:



58

a. Buatlah desain form input data anggota perpustakaan. Dengan ketentuan:

1) Status keanggotaan ada 2 yaitu anggota siswa dan non siswa/karyawan,

2) Angggota non siswa/karyawan ada catatan penting yang harus diperhatikan yaitu

karyawan PNS dan non PNS

b. Desainlah form untuk pendaftaran anggota, form transaksi peminjaman, form

transaksi pengembalian, dengan memperhatikan ketentuan perancangan desain form

menggunakan teknik dialog pengisian form/borang

c. Setiap kali memilih data label yang dirancang diharapkan sudah mengakomodir

kemampuan untuk mengurangi human error yang mungkin terjadi, dan berikan saran

buat penanganan kesalahan tersebut (exception handling) dalam bentuk message box.

Ingat: message error yang baik adalah yang didalamnya terdapat saran untuk

memperbaiki kesalahan yang terjadi.

d. Pemilihan label input data disesuaikan dengan environment dari tipe data yang

dimasukkan.

Skenario :

Buatlah form fill-in jika diketahui formulir pendaftaran seperti gambar berikut :



59

C. Evaluasi/

Dengan tugas yang ada di point3. Tugas Praktikum buatlah prototype untuk sistem

perpustakaan on line (E-Library).

Point yang dinilai:

1. Analisis dan desain sistem pengguna sistem

2. Desain yang sesuai dengan teknik dialog yang ditentukan

3. Kemampuan analisa dan desain dari praktikan



60

BAB VIII

TEKNIK DIALOG BERBASIS ICON

Pertemuan Ke :

Alokasi Waktu :

Kompetensi Dasar :

1. notasi-notasi dalam desain dialog

2. metode analisis dialog.

Indikator :

1. Praktikan mampu menganalisis tampilan berbasis icon

2. Praktikan bisa mengimplementasikan Desain teknik dialog berbasis

icon.

A. Teori Pendukung

Antarmuka berbasis ikon merupakan variasi dari antarmuka berbasis menu, karena

setiap ikon menunjukkan suatu aktifitas, sementara pada system menu, sebuah menu juga

menunjukkan suatu aktifitas. Perbedaannya terletak hanya pada cara penyajiannya. Pada

system menu, pilihan aktifitas dinyatakan dengan secara tekstual, sementara pada antarmuka

berbasis ikon, pilihannya dinyatakan dalam bentuk tanda atau symbol yang disebut ikon.

Gambar 6.1. Tampilan teknik dialog berbasis ikon

Icon adalah gambar atau symbol yang mewakili suatu konsep. Pedoman untuk

merancang icon adalah:



61

1. Representasikan objek atau aksi dengan cara yang dikenal.

2. Batasi jumlah ikon yang tampil

3. Buat agar ikon jelas terlihat dari layar belakangnya

4. Pertimbangkan ikon 3 dimensi: menarik tapi bisa mengalihkan perhatian

5. Pastikan icon yang terpilih jelas ketika dikelilingi yang tidak terpilih

6. Pastikan ikon dapat dibedakan dari yang lain

7. Pastikan keselarasan setiap icon sebagai anggota kelompok icon

8. Rancang animasi pergerakan icon

9. Tambahkan informasi rinci

10. Pikirkan penggunaan kombinasi ikon untuk menciptakan objek atau aksi baru.


1. Mengadakan Pre test (waktu 15 menit)

2. Tahapan praktikum

Langkah-langkah pembuatan tampilan teknik dialog berbasis icon.

a. Persiapkan aktifitas-aktifitas yang akan muncul dari menu utama

b. persiapkan symbol-simbol yang sesuai dengan aktifitas yang akan diwakilinya

c. Aturlah peletakan dari simbol-simbol yang dipakai, pergunakanlah pedoman yang

ada dalam dasar teori.

3. Tugas Praktikum

Skenario:

Pergunakan skenario pada praktikum 3.

Tugas:

a. Berdasarkan analisis pada skenario di praktikum 3, desain tampilan utama dengan

menggunakan menu datar, rubahlah desain utama menu datar tersebut menjadi

menu utama yang berbasis icon. Setiap kali icon tersebut dipilih muncul deskripsi

aktifitas yang diwakili oleh icon tersebut.

b. Desainlah 3 form hasil eksekusi 3 buah icon yang ada pada form utama.

C. Evaluasi



62

Buatlah prototype sebuah tampilan peta, dimana dari tampilan peta tersebut user sudah dapat

mengetahui informasi yang diinginkan, misal : tempat wisata alam, tempat wisata air, wisata

kuliner, hotel dll (kelengkapan informasi tergantung hasil analisis). Semua inforamsi

tersebut diwakili dengan icon-icon yang terpampang pada tampilan peta tersebut.

Point yang dinilai:

4. Kesesuain analisis dan desain dengan skenario

5. Pemilihan dan kesesuaian icon terhadap subjek yang diwakilinya.

6. Kemudahan dan kelengakapan informasi yang ada pada peta.

7. Kemampuan analisa dan desain dari praktikan



63

BAB IX

MULTIPLE WINDOW

Pertemuan Ke :

Alokasi Waktu :

Kompetensi Dasar : Elemen sistem windowing

Indikator :

1. Desain interface system windowing dengan prototyping

2. Pengimplementasian desain dengan metode multiple windows.

A. Teori Pendukung

System penjendelaan adalah bagian dari layar yang digunakan untuk menampilkan

suatu informasi. Informasi yang ditampilkan dapat berupa informasi tekstual maupun grafis.

Untuk menunjukkan daerah yang digunakan untuk menampilkan informasi, biasanya daerah

yang umumnya berupa persegi panjang dan dibatasi dengan garis pembatas. Sehingga

system penjendelaan adalah system antarmuka yang memungkinkan pengguna untuk

menampilkan berbagai informasi baik berdiri sendiri maupun secara bersamaan kedalam

bagian layar.

Pemakaian jendela tergantung dari pekerjaan yang akan diselesaikan sehingga analis

dan perancang tampilan pada dialog berbasis jendela harus dilaksanakan dengan penuh

pertimbangan. Sedikitnya ada tujuh fungsi yang bisa dimanfaatkan oleh pengguna dengan

adanya dialog berbasis jendela ini, yaitu:

1. Penampilan lebih banyak informasi

2. Pengaksesan banyak sumber informasi

3. Pengkombinasian berbagai sumber informasi

4. Pengendalian secara bebas atas sejumlah program

5. Sarana pengingat

6. Command context/active form

7. Penyajian jamak



64

Multiple window perlu dilengkapi dengan hal-hal berikut,

1. Multiple monitor

2. Rapid display flipping

3. Split displays

4. Fixed number, size, place, space-filling-tiling

5. Variable size, place, number, space-filling-tiling

6. Non-space-filling-tiling

7. Piles-of-tiles

8. Window zooming

9. Arbitrary overlaps

10. Cascade

Koordinasi dengan Tightly couple windows perlu di lengkapi dengan :

1. Synchronized scrolling

2. Hierarchical browsing

3. Direct selection

4. Two-dimensional browsing

5. Dependent-windows opening

6. Dependent-windows closing

7. Save atau open window state

Individual window

1. Judul

2. Border atau frame

3. Scroll bars

4. Aksi antarmuka window

a. Open action

b. Open place dan size

c. Close action

d. Resize action



65

e. Move action

f. Forward atau aktivasi

Gambar 7.1. Tampilan teknik dialog contoh system penjendelaan


1. Mengadakan Pre test ( waktu 15 menit)


Lagkah-langkah pembuatan tampilan teknik dialog dengan system

penjendelaan/windows:

a. Persiapkan aktifitas-aktifitas yang akan muncul dari menu utama

b. persiapkan symbol-symbol yang sesuai dengan aktifitas yang akan diwakilinya

c. Aturlah peletakan dari symbol-symbol yang dipakai, pergunakanlah pedoman yang

ada dalam dasar teori.

3. Tugas Praktikum

Dari Proses bisnis pada Sistem Informasi Perpustakaan, desainlah tampilan utama

dengan menggunakan teknik dialog multiple windows, yang ditampilkan adalah data

buku, data anggota, form peminjaman.

C. Evaluasi/Postest

Berdasarkan pada skenario yang ada dibawah ini desainlah form-form yang digunakan

pada aplikasi tersebut!



66

Skenario:

Sistem Informasi Perpustakaan



67

Tugas :

Dari tugas yang sudah anda kerjakan lengkapilah dengan form-form pendukung dari proses

pengembalian suatu sistem informasi perpustakaan.

Point yang dinilai:

1. Kesesuain desain dengan scenario

2. Kesesuaian dan kelengkapan interface.


4. Kemampuan analisa dari praktikan



68

BAB X

TEKNIK DIALOG MANIPULASI LANGSUNG

Pertemuan Ke :

Alokasi Waktu :

Kompetensi Dasar :

1. Mahasiswa memahami Konsep desain dialog

2. Mahasiswa memahami konsep desain dialog manipulasi langsung

3. Mahasiswa memahami kelebihan dan kekurangan dialog manipulasi

langsung

Indikator :

1. Praktikan mampu menganalisis dan mendesain interface dengan

teknik dialog manipulasi langsung

2. Praktikan mmapu mengimplementasikan Desain teknik dialog

Manipulasi Langsung.

A. Teori Pendukung

Manipulasi langsung adalah representasi visual (metapora) dari dunia aksi, dimana

obyek dan aksi terlihat. Aksi dapat dilakukan dengan cepat dan dapat juga dibatalkan

(seperti mengetik diganti dengan menunjuk dan memilih) sehingga hasil aksi dapat langsung

terlihat.

Dengan manipulasi langsung pengguna harus mempelajari arti komponen-komponen

representasi visual. Sifat-sifat manipulasi langsung dapat menguntungkan:

1. Pemula dapat belajar dengan cepat

2. Ahli dapat bekerja cepat

3. Pesan kesalahan jarang dibutuhkan

4. Pengguna langsung melihat jika aksi tidak sesuai dengan tujuan

5. Pengguna lebih menguasai system

Beberapa contoh dari system manipulasi langsung adalah:



69

1. Command line, adalah bahasa perintah yang berorientasi baris, sehingga untuk mengedit

teks menjadi sangat sulit, muncul pada tahun 1980-an

2. Word Processor, adalah pengolah kata yang menampilkan teks atau dokumen satu

halaman penuh dan hasilnya terlihat sama dalam bentuk cetakan arena bersifat

WYSIWYG (what you see is what you get). Word processor telah menggunakan ikon,

dengan member respon yang cepat untuk tampilan. Contohnya adalah MS Word, Page

Maker, Power Point.

3. Spreadsheet adalah lembar kerja yang menampilkan data yang dapat dimanipulas dalam

bentuk kolom dan baris, yang mendukung formula, makro dan grafik. Contoh Ms Excel,

Lotus 1-2-3, Visicalc.

4. Video games, adalah bidang visual yang membangkitkan minat, karena perintah yang

diberikan berupa aksi fisik dan hasilnya dapat langsung terlihat, kini perkembangannya

sangat pesat pada PC (personal computer) maupun mesin games bahkan pada

handphone.

5. Computer Aided Design (CAD) adalah suatu aplikasi yang sangat menyenangkan untuk

digunakan karena obyek yang diinginkan dapat dimanipulasi langsung, biasanya

digunakan untuk merancang rangkaian elektronik, arsitektur.

Gambar 8.1. Tampilan teknik dialog manipulasi langsung

Pada gambar 8.1 merupakan contoh interface dengan teknik dialog manipulasi langsung

dimana user bisa memberikan suatu aktifitas dan sistem komputer menampilkan aktifitas

user seperti pada kenyataan maya (virtual reality).




70



a. Bukalah www.games.co.id

b. Pilih salah satu permainan yang menurut anda menarik

3. Tugas Praktikum

a. Analisislah alur cerita yang ada pada permainaan tersebut

b. Proses apa saja yang ada pada tampilan permainan yang telah dipilih.

c. Bila memungkinkan berilah masukan untuk interface tersebut.

C. Evaluasi/Posttest

Skenario:

Sistem pembelajaran pengenalan huruf untuk anak-anak TK.

Tugas:

Desainlah interface untuk pembelajaran interaktif “Game ABC”, dengan alur cerita

sebagai berikut :

Di sini anak-anak akan belajar mengenal huruf-huruf abjad dari A hingga Z. Jika

anak sudah mengenal huruf abjad, bagian ini dapat menjadi pengenalan kembali.

Sambil belajar anak juga dapat bermain dengan permainannya. Setiap huruf abjad

yang diklik, akan muncul gambar yang membuat anak tidak akan merasa bosan.

Setiap gambar yang keluar, akan sesuai dengan huruf abjad yang diklik.

Point yang dinilai:

1. Kesesuain desain dengan scenario

2. Pemilihan kata/kalimat yang sesuai dengan calon user


4. Kemampuan analisa dari praktikan

http://www.games.co.id/



71

BAB XI

CSCW

Pertemuan ke :

Waktu :

Kompetensi Dasar : Mahasiswa Dapat membuat desain CSCW untuk kasus tertentu

Indikator : 1. Membuat interface CSCW dalam bidang bisnis.

D. Teori Pendukung

Computer-supported cooperative work (CSCW) merupakan suatu group user yaitu

bagaimana cara merancang suatu system yang digunakan untuk membantu pekerjaan

sebagai suatu group dan bagaimana memahami dampak dari suatu teknologi pada pola

pekerjaan mereka. HCI berasal dari ilmu psychology-computing sedangkan CSCW

bersumbu pada sociology-computing. CSCW merupakan suatu system komputer yang

mendukung pekerjaan sebagai suatu group yang dikenal dengan istilah groupware.

Computer-Supported Cooperative Work (CSCW) adalah bidang studi yang berfokus

pada perancangan dan evaluasi teknologi baru untuk mendukung proses sosial kerja, sering

di antara mitra yang berjauhan.

Hasil CSCW biasanya disebut Groupware. Groupware adalah jenis software yang

membantu kelompok kerja (workgroup) yang terhubung ke jaringan untuk mengelola

aktivitas mereka.

Penerapan CSCW pada pendidikan adalah koordinasi siswa dalam kelas virtual. Ini

adalah proses yang rumit namun dapat memungkinkan pengalaman pendidikan yang

mendorong bagi orang-orang yang tak dapat bepergian ke kelas biasa.

Contohnya interface untuk CSCW adalah desain dalam e-learning, forum diskusi

antara pengajar dengan pendidik (baik melalui mailing list, chating, ataupun melalui email).



72

Gambar 5.1. Contoh tampilan e-learning sebagai salah bentuk CSCW

E. Langkah Praktikum



Kasus: Membuat desain tampilan untuk pembelajaran jarak jauh.

a. Tentukan materi yang akan disampaikan

b. Pilihlah symbol-simbol/ikon/gambar yang bisa memperjelas dalam penyampaian

materi

c. Tentukan efek animasi dari symbol yang anda pilih tersebut

d. Desainlah skema tampilan untuk untuk mewakili anda sebapai penyampai materi dari

topic yang anda pilih

Ingat desain yang anda buat adalah sebagai penggantian pembelajaran tatap

muka, jadi harus bisa mewakili semua aktifitas yang terjadi dalam

pembeajaran tatap muka

e. Aplikasikan pilihan materi dan symbol yang sudah anda pilih tadi dalam

desain/skema tampilan anda

3. Tugas Praktikum



73

a. Carilah contoh penerapan CSCW dalam bidang bisnis

b. Dari hasil pencarian anda, Analisislah tampilannya dan temukan point-point ini:

1) Hal-hal yang memang harus muncul dalam tampilan tersebut, dan sudah ada di

tampilan tersebut.

2) Hal-hal yang tidak seharusnya muncul dalam tampilan tersebut, tapi muncul

ditampilan tersebut

3) Hal-hal yang harus ada dalam tampilan tersebut, tapi belum ada tampilan yang anda

temukan.

F. Evaluasi

Berdasarkan pada jawaban pada point b. di tugas praktikum, buatlah desain baru untuk

CSCW bidang bisnis.

Point penilaian:



3. Pewarnaan dan pemilihan kata baik pada menu, form, maupun command button

yang dipilih.



74

BAB XII

Perancangan Antarmuka untuk Pencarian

Pertemuan ke :

Waktu :

Kompetensi Dasar : Mahasiswa Dapat membuat desain untuk pencarian

Indikator : 1. Membuat interface pencarian

Teori Pendukung

Tugas user interface pencarian untuk membantu pengguna dalam ekspresi informasi yang

dibutuhkan mereka, dalam perumusan permintaan mereka, dan melacak kemajuan upaya

pencarian informasi mereka. Namun, antarmuka pencarian hari ini adalah khas dari bentuk type

keywords-in-entry-form, view-results-in-a-vertical-list. Beberapa alasan penting untuk

kesederhanaan dari interface standar pencarian:

• Pencarian merupakan sarana menuju suatu tujuan lain, bukan tujuan itu sendiri.

Ketika seseorang mencari informasi, mereka biasanya terlibat dalam

beberapa tugas yang lebih besar, dan tidak ingin aliran pemikiran mereka terganggu oleh

antarmuka yang mengganggu.

• Terkait dengan point pertama, pencarian adalah tugas mental yang intensif. Ketika

orang membaca teks, mereka fokus pada tugas itu. Hal itu tidak mungkin untuk membaca dan

memikirkan hal lain pada waktu yang sama.

• Karena hampir semua orang yang menggunakan Web menggunakan pencarian, desain

antarmuka harus dimengerti dan menarik untuk berbagai pengguna dari segala usia, budaya

dan latar belakang, diterapkan pada berbagai variasi kebutuhan informasi.



75

Gambar Hasil pencarian dari Infoseek pada tahun 1997 (kiri) dan Google pada tahun 2007

(kanan).

Meskipun kesederhanaan daftar hasil pencarian ditunjukkan di atas, penelitian menunjukkan

bahwa hal itu masih terlalu kompleks bagi sebagian orang. Sebuah studi oleh pengguna lansia

Aula dan Kaki (2005) menemukan bahwa lebih menyederhanakan daftar hasil mengurangi

kesalahan substansial. Dan penelitian oleh Hargittai (2004) menunjukkan bahwa beberapa orang

tidak mengerti spesifikasi kata kunci.

Kualitas penting dari antarmuka pengguna (UI) adalah kegunaan, sebuah istilah yang

mengacu pada properti-properti dari interface yang menentukan bagaimana mudahnya untuk

digunakan. Shneiderman dan Plaisant (2004) mengidentifikasi lima komponen usability,

disajikan kembali oleh Nielsen (2003b) sebagai:

Learnability: Seberapa mudah bagi pengguna untuk menyelesaikan tugas-tugas dasar

pertama kalinya mereka dengan bertemu interface?

Efisiensi: Seberapa cepat pengguna menyelesaikan tugas-tugas mereka setelah mereka

belajar bagaimana menggunakan antarmuka?

Memorability: Setelah masa non-digunakan, berapa lama waktu yang diperlukan

pengguna untuk membangun kembali kemahiran?



76

Kesalahan: Berapa banyak kesalahan pengguna, seberapa parah kesalahan tersebut, dan

bagaimana mudah itu bagi pengguna untuk pulih dari kesalahan ini.

Kepuasan : Bagaimana menyenangkan atau memuaskan dengan menggunakan

antarmuka?

Sebuah makalah berpengaruh Shneiderman et al. (1997) menetapkan desain untuk user interface

pencarian umum sebagai berikut :

Tawarkan umpan balik informatif.

Dukungan kontrol pengguna.

Mengurangi beban ingatan jangka pendek.

Menyediakan cara pintas untuk pengguna terampil.

Mengurangi kesalahan; menawarkan penanganan error sederhana.

Berusaha untuk konsistensi.

Prinsip-prinsip untuk desain pencarian sebagai berikut :

Penawaran Efisien dan Informatif

Suatu prinsip desain antarmuka batuan adalah untuk menyediakan pengguna dengan

umpan balik mengenai status dari sistem dan bagaimana yang berhubungan dengan

interaksi pengguna dengan sistem. Contoh akrab umpan balik interface timer ikon jam

pasir yang biasanya ditampilkan dalam antarmuka sistem operasi grafis untuk

menunjukkan bahwa pengguna harus menunggu sementara aplikasi meluncurkan atau

menyimpan file besar.

Tampilkan hasil pencarian segera

Sejumlah penelitian menunjukkan bahwa sebuah prinsip desain antarmuka pencarian

yang penting adalah untuk menunjukkan pengguna beberapa hasil pencarian segera

setelah permintaan awal mereka (Hutchinson et al 2006;. Kaki 2005; Plaisant et al. 1997).

Menunjukan ringkasan informasi dari dokumen dan sorot persyaratan permintaan

Sebuah bentuk penting dari umpan balik dalam daftar hasil pencarian adalah untuk

mencakup persyaratan dari permintaan dalam dokumen untuk menunjukkan bagaimana

dokumen diambil berkaitan dengan konsep yang dinyatakan dalam query. Penelitian



77

menunjukkan bahwa ringkasan yang paling informatif jika berisi istilah permintaan

dalam konteks dari dokumen yang mereka inginkan (Tombros dan Sanderson 1998; Putih

et al. 2003).

Biarkan sortasi hasil oleh berbagai kriteria

Bentuk lain yang efektif dari umpan balik dalam tampilan hasil pencarian memungkinkan

untuk menyortir hasil pencarian yang dinamis sesuai dengan kriteria peringkat yang

berbeda (misalnya, kebaruan, relevansi, penulis, harga, dll). Dengan pandangan ini,

pengguna mendapatkan hasil penyortiran sesuai dengan kriteria, sedangkan secara visual

dapat membandingkan kriteria tersebut, karena perubahan secara langsung terlihat

(Cutrell et al 2006a;. Reiterer et al. 2000).

Contoh elemen khas GUI yang membiarkan pengguna mengatur tata urutan dan jumlah

maksimum hasil seperti pada Cisco Datasheet Website.

Contoh GUI untuk pencarian yang dapat menyediakan unsur GUI untuk membiarkan pengguna

mengendalikan interpretasi frase pencarian.

Tampilan visual dari suatu dialog pencarian sangat mempengaruhi kegunaan dari dialog

pencarian. Sebuah dialog pencarian statis menyediakan kolom pencarian untuk setiap bidang

usaha yang dicari. Tambahan elemen GUI memungkinkan pengguna untuk menentukan



78

pengaturan pencarian. Posisi bidang pencarian terhadap proses dialog harus diposisikan agar

pengguna dapat mengenali dan menemukan mereka dengan mudah.

Berikut ini desain untuk antar muka pencarian dengan mengaktifkan atau menonaktifkan field-

field sesuai kebutuhan pengguna. Hal ini bertujuan untuk membuat spesifikasi pencarian oleh

user.



79

Beberapa persyaratan pencarian oleh pengguna tidak berubah: Bagaimana kita bisa

menghindari bahwa pengguna harus menciptakan permintaan pencarian khas mereka lagi dan

lagi? Untuk tugas yang banyak, pengguna perlu permintaan pencarian yang khas yang jarang

berubah. Namun demikian, perlu untuk mendukung pengguna dalam menghindari penciptaan

permintaan pencarian berulang yang sering dieksekusi. Untuk itu, biarkan pengguna menyimpan

beban, mengelola, dan kembali menjalankan permintaan pencarian mereka.

Sistem harus mampu menyimpan sebuah kondisi dialog pencarian dan menyimpannya.

Pengguna kemudian dapat memilih salah satu permintaan pencarian mereka disimpan untuk

eksekusi. Jika permintaan pencarian tersimpan yang diambil, dialog pencarian harus

mengembalikan nilai-nilai disimpan dan membiarkan pengguna memodifikasi dan mengeksekusi

permintaan tersebut. Kadang-kadang, sekelompok pengguna memiliki persyaratan pencarian

yang sama. Dalam hal ini, memberikan pengguna kunci yang tepat untuk berbagi permintaan

pencarian yang disimpan mereka dengan semua anggota kelompok. Anggota kelompok mungkin

tidak memiliki izin untuk memodifikasi disimpan permintaan pencarian, hanya eksekusi mereka.

Desainer harus menyertakan fitur-fitur dalam dialog pencarian sederhana yang berguna untuk

kebanyakan pengguna. Sebuah fitur yang dibutuhkan oleh satu kelompok pengguna mungkin

tidak penting bagi kelompok lain.



80

Sebuah dialog pencarian sederhana biasanya adalah Statis Search Dialog. Sebuah dialog

pencarian untuk pakar adalah Dinamis Search Dialog yang memungkinkan untuk menambahkan

kolom pencarian ke antarmuka pencarian dinamis. Mungkin juga menyediakan Freestyle Cari,

yaitu pengguna dapat memasukkan permintaan pencarian menggunakan bahasa pencarian

khusus.


Aplikasi untuk pencarian barang, obat dsb di sistem informasi apotek



81

BAB XIII

FINAL PROJECT

Pertemuan ke :

Waktu :

Kompetensi Dasar : Mahasiswa dapat membuat suatu aplikasi yang sesuai dengan

konsep perancangan antarmuka pengguna

Indikator : 1. Membuat aplikasi

Rancanglah suatu aplikasi untuk studi kasus berikut :

1. Aplikasi Sistem Informasi Persewaan Buku (Perpustakaan)

2. Aplikasi multimedia interaktif pembelajaran matematika tingkat SD

3. Aplikasi game pembelajaran mengenal huruf untuk TK

4. Aplikasi berbasis mobile



82

Documents

Modul Pap2