modul komsi kl.pengantar antarmuka pengguna
TRANSCRIPT
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
1/75
D3 Komputer dan Sistem Informasi
Daftar Isi
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
2/75
D3 Komputer dan Sistem Informasi
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)
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
3/75
D3 Komputer dan Sistem Informasi
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.
Gambar 1.1
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
4/75
D3 Komputer dan Sistem Informasi
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)
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.
2. Visibilitas
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
5/75
D3 Komputer dan Sistem Informasi
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
Konsistensi internal :Penggunaan konvensi dan aturan yang sama untuk semua
aspek sebuah antarmuka, meliputi :
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
6/75
D3 Komputer dan Sistem Informasi
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.
Sistem menyediakan pemberitahuan segera (secara visual, tekstual ataupun
auditori) atas segala tindakan pengguna.
9. Penanganan kesalahan
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
7/75
D3 Komputer dan Sistem Informasi
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, kenapamelakukannya, bagaimana melakukannya.
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
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
8/75
D3 Komputer dan Sistem Informasi
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 aksidan hasilyang 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
g. Kemampuan penggunaan (Usability).
Perancangan Antarmuka Pengguna yang baik diharapkan dapat dijadikan user
interface/penghubung yang baik antara manusia dengan mesin. Dalam analisis sistem
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
9/75
D3 Komputer dan Sistem Informasi
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
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
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
10/75
D3 Komputer dan Sistem Informasi
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
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
11/75
D3 Komputer dan Sistem Informasi
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 :
Gambar 2.1 Contoh tampilan penggunaanLinguistic Styles
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
12/75
D3 Komputer dan Sistem Informasi
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? ),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 penggunaanDirect 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 :
Mudah lupa dalam waktu 20detik
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
13/75
D3 Komputer dan Sistem Informasi
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 penggunaanLong-Term-Memory :
Files: sistem file dan penamaan file.
Procedure:password, logging ondan 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 iconharus 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
Informasi kesalahan harus secara detail dan terperinci
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
14/75
D3 Komputer dan Sistem Informasi
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 helpdan 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 mebutuhkanfeedback
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
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
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
15/75
D3 Komputer dan Sistem Informasi
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 :
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)
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
16/75
D3 Komputer dan Sistem Informasi
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.
Gambar. 1. Tampilan OpenOffice.org Impress
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
17/75
D3 Komputer dan Sistem Informasi
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
Step 2 :
a. Taskyang akan diidentifikasi
ada tiga taskyang akan diidentifikasi berdasarkan kinerja yang paling baik, kinerja rata-
rata dan kinerja yang paling buruk :
(1)Taskdengan 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).
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
18/75
D3 Komputer dan Sistem Informasi
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)Taskdengan kinerja rata-rata :
Task kedua, yaitu task yang memiliki kemampuan rata-rata adalah untukmemberikan warna pada backgroundslide.
Untuk memberikan warna pada background slide, secara umum langkah-langkahnya
sebagai berikut,
Pilih Format(menggunakan mouse).
Klik pilihan Page.
Klik Background.
Pada bagianFill, klikColor.
Pilih Warna yang diinginkan.
Klik OK. (dapat dilihat pada gambar 3)
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
19/75
D3 Komputer dan Sistem Informasi
Gambar.3. Taskmemberi warna pada background slide
(3)Taskdengan kinerja buruk :
Setelah melihat task yang terdapat pada OpenOffice.org Impress ini, task yang
memiliki kinerja buruk adalah taskuntuk 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 filedan scan.
Pada pilihan Scan, terdapat pilihan lagi yaitu select sourcedan request.
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. TaskMenyisipkan gambar
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
20/75
D3 Komputer dan Sistem Informasi
a. Taskyang 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 taskyang sama yang telah diidentifikasi pada
aplikasi OpenOffice.org Impress:
(4)Taskdengan kinerja baik :
Seperti taskpada aplikasi sebelumnya, maka taskyang 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)
Gambar.6. Taskmenampilkan slide
atau
Dapat menggunakan pilihan untuk menampilkan sllide yang ada pada bagian slide
pane. Letak pilihan ini berbeda dibandingkan pada aplikasi sebelumnya
(menggunakan mouse).
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
21/75
D3 Komputer dan Sistem Informasi
(5)Taskdengan kinerja rata-rata :
Task kedua, yaitu task yang memiliki kemampuan rata-rata adalah untuk
memberikan warna pada backgroundslide.
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 atauApply, dapat dilihat pada gambar 7.
Gambar.7. TaskMemberi warna pada background slide
(6)Taskdengan kinerja buruk :
Taskketiga 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)
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
22/75
D3 Komputer dan Sistem Informasi
Gambar.8. Task Menyisipkan gambar pada slide
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
Deskripsi/langkah melakukan Task Operasi Waktu (detik)
Mengawali Task (inisialisasi) M 1.2
Home hand to mouse H 0.4
Berpikir untuk memilih jenis tampilan padaworkspace
M 1.2
Klik jenis tampilan B 0.1
Total Waktu 2.9
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
23/75
D3 Komputer dan Sistem Informasi
b. Task 2 pada OpenOffice.org Impress : Memberi warna pada background slide
Deskripsi/langkah melakukan Task Operasi Waktu (detik)
Mengawali Task (inisialisasi) M 1.2
Home hand to mouse H 0.4
Klik Format B 0.1Berpikir 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
Deskripsi/langkah melakukan Task Operasi Waktu (detik)
Mengawali Task (inisialisasi) M 1.2
Home hand to mouse H 0.4
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.1Total Waktu 6.6
d. Task 1 pada Microsoft Office PowerPoint : 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.1Berpikir untuk memilih jenis tampilan M 1.2
Klik jenis tampilan B 0.1
Total Waktu 3.0
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
24/75
D3 Komputer dan Sistem Informasi
Alternatif 2 : Menggunakan pilihan untuk menampilkan pada slidepane
Deskripsi/langkah melakukan Task Operasi Waktu (detik)
Mengawali Task (inisialisasi) M 1.2
Home hand to mouse H 0.4
Berpikir untuk memilih jenis tampilan pada
slidepane
M 1.2
Klik jenis tampilan B 0.1
Total Waktu 2.9
e. Task 2 pada Microsoft Office PowerPoint : Memberi warna pada background
slide
Deskripsi/langkah melakukan Task Operasi Waktu (detik)
Mengawali Task (inisialisasi) M 1.2
Home hand to mouse H 0.4Klik 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
Deskripsi/langkah melakukan Task Operasi Waktu (detik)
Mengawali Task (inisialisasi) M 1.2
Home hand to mouse H 0.4
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.2Klik Open B 0.1
Total Waktu 6.6
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
25/75
D3 Komputer dan Sistem Informasi
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 taskyang 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 Keysdan 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.
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
26/75
D3 Komputer dan Sistem Informasi
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
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
27/75
D3 Komputer dan Sistem Informasi
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
scrollinglistbox choice : dengan menggunakan bentuk listbox
scrollingcombobox 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).
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
28/75
D3 Komputer dan Sistem Informasi
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 pertamaIV. Tata Letak Menu
a. Judul
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.
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
29/75
D3 Komputer dan Sistem Informasi
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 * atauuntuk membuat separator atau outlines
Penanda posisi
Cascading / walking menus
Magic lens
C. Langkah Praktikum
Skenario 1 :
Step 1 : Carilah software
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 :
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
30/75
D3 Komputer dan Sistem Informasi
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.
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
31/75
D3 Komputer dan Sistem Informasi
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.
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
32/75
D3 Komputer dan Sistem Informasi
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.
Gambar 3.1. Tampilan utama S. I. Perpustakaan dengan teknik dialog menu datar
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
33/75
D3 Komputer dan Sistem Informasi
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 fasilitassearchingbuku yang ada didalam perpustakaan
3. Kepala Perpustakaan, yang hanya bisa mengakses pada fasilitas laporan.
Setiap userdiberikan 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, searchingbuku 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. 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!
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
34/75
D3 Komputer dan Sistem Informasi
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.
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
35/75
D3 Komputer dan Sistem Informasi
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 3 sudah dipelajari tentang teknik dialog menu datar, maka
pada praktikum 4 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
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.
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
36/75
D3 Komputer dan Sistem Informasi
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.
Skenario:
Akan dibangun sistem informasi perpustakaan, dimana user yang akan melakukan akses
pada system ini ada 3 kelompok pengguna utama, yaitu:
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
37/75
D3 Komputer dan Sistem Informasi
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 fasilitassearchingbuku yang ada didalam perpustakaan
6. Kepala Perpustakaan, yang hanya bisa mengakses pada fasilitas laporan.
7. Setiap userdiberikan 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: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.
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
38/75
D3 Komputer dan Sistem Informasi
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.
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-
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
39/75
D3 Komputer dan Sistem Informasi
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.
IV. Warna
Mata manusia mengandung banyak syaraf-syaraf penerima yang terdiri dari sel-sel
berbentuk batang tongkat yang disebut roddan sel-sel berbentuk corong yang disebut cone. Sel
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
40/75
D3 Komputer dan Sistem Informasi
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.
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.
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
41/75
D3 Komputer dan Sistem Informasi
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, satuangka 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
menggunakan angka-angka dengan cakupan 0..100 untuk menandakan persentase dari intensitas
(0%= off ; 100% = max).
c. Warna abu-abu (gray)
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
42/75
D3 Komputer dan Sistem Informasi
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
f. Warna-warna lainnya
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
43/75
D3 Komputer dan Sistem Informasi
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.
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
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
44/75
D3 Komputer dan Sistem Informasi
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
RGB(192,96,0) = Orange 75% luminosity
RGB(128,64,0) = Orange 50% 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(192,128,64) = Light Orange 50% saturation
RGB(160,128,96) = Light Orange 25% saturation
RGB(144,128,112) = Light Orange 12,5% saturation
RGB(128,128,128) = Kelabu sedang / Medium Gray
Kejenuhan (Saturation) dapat dihitung dengan rumusan berikut :
Kejenuhan= (( maximum-medium)+ ( medium-minimum)) / 255* 100%
Sebagai contoh:
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
45/75
D3 Komputer dan Sistem Informasi
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
aplikasi kamus remaja. Buatlah perancangan antar muka untuk aplikasi kamus tersebut dengan
memanfaatkan fungsi penggunaan warna.
Skenario 3
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
46/75
D3 Komputer dan Sistem Informasi
Akan dibuat aplikasi games mengenal benda-benda sekitar untuk anak-anak usia 1-3 tahun.
Buatlah perancangan antarmuka penggunanya. Manfaatkan fungsi penggunaan warna
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
47/75
D3 Komputer dan Sistem Informasi
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 online yang efektif
d. Struktur menu yang rapi
e. Konsistensi
f. Kejelasan antarmuka
2. Gunakan 8 aturan emas perancangan
a. Berusaha untuk konsisten
b. Memungkianfrequent usersmenggunanaknshortcut
c. Memberikan umpan balik yang informative
d.
Merancang dialog yang memberikan penutupan (keadaan akhir)
e. Memberikan pencegahan kesalahan dan penanganan kesalahan yang sederhana
f. Memungkinkan pembalikan aksi yang mudah
g. Mendukung pusat kendali internal
h. Mengurangi beban ingatan jangka pendek
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
48/75
D3 Komputer dan Sistem Informasi
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
B. Langkah Praktikum
1. Mengadakan Pretest (15 Menit)
2.
Tahapan Praktikum
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:
Gambar 2.2. Formsearchingdengan menggunakan 1 keyword
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
49/75
D3 Komputer dan Sistem Informasi
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. Formsearchingdengan keywordlebih 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:
3. Tugas Praktikum
Skenario 1 :
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
50/75
D3 Komputer dan Sistem Informasi
Buatlah Form untuk InputData Anggota, searching dan reportpada 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
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:
1.
Kesesuaian desain dengan scenario
2. Pewarnaan
3. Konten/esensi/usebality yang muncul dari masing-masing form yang didesain
4. Kemudahan dalam pengoperasian
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
51/75
D3 Komputer dan Sistem Informasi
TEKNIK DIALOG BERBASIS PENGISIAN BORANG
(FORM F I LL ING 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 optionjelas ditandai, atau sebaliknya field wajib yang ditandai
7. Hindari penyelesaian otomatis.
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
52/75
D3 Komputer dan Sistem Informasi
Gambar 5.1. Tampilan teknik dialog berbasis pengisian borang
B. Langkah Praktikum
1. Mengadakan Pretes (15 Menit)
2. Tahapan Praktikum
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:
a. Buatlah desain form input data anggota perpustakaan. Dengan ketentuan:
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
53/75
D3 Komputer dan Sistem Informasi
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 erroryang 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 disesuakan dengan environment dari tipe data yang
dimasukkan.
Skenario :
Buatlah form fill in jika diketahui formulir pendaftaran seperti gambar berikut :
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
54/75
D3 Komputer dan Sistem Informasi
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
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
55/75
D3 Komputer dan Sistem Informasi
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:
1. Representasikan objek atau aksi dengan cara yang dikenal.
2. Batasi jumlah ikon yang tampil
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
56/75
D3 Komputer dan Sistem Informasi
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.
B. Langkah Praktikum
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
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.
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
57/75
D3 Komputer dan Sistem Informasi
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
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
58/75
D3 Komputer dan Sistem Informasi
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
Multiple window perlu dilengkapi dengan hal-hal berikut,
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
59/75
D3 Komputer dan Sistem Informasi
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
e. Move action
f. Forward atau aktivasi
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
60/75
D3 Komputer dan Sistem Informasi
Gambar 7.1. Tampilan teknik dialog contoh system penjendelaan
B. Langkah Praktikum
1. Mengadakan Pre test ( waktu 15 menit)
2. Tahapan Praktikum
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/PostestBerdasarkan pada skenario yang ada dibawah ini desainlah form-form yang digunakan
pada aplikasi tersebut!
Skenario:
Sistem Informasi Perpustakaan
Tugas :
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
61/75
D3 Komputer dan Sistem Informasi
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.
3. Desain yang sesuai dengan teknik dialog yang ditentukan
4. Kemampuan analisa dari praktikan
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
62/75
D3 Komputer dan Sistem Informasi
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:
1. Command line, adalah bahasa perintah yang berorientasi baris, sehingga untuk mengedit
teks menjadi sangat sulit, muncul pada tahun 1980-an
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
63/75
D3 Komputer dan Sistem Informasi
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).
B. Langkah Praktikum
1. Mengadakan Pretes (15 Menit)
2. Tahapan Praktikum
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
64/75
D3 Komputer dan Sistem Informasi
a. Bukalahwww.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
3. Desain yang sesuai dengan teknik dialog yang ditentukan
4. Kemampuan analisa dari praktikan
http://www.games.co.id/http://www.games.co.id/http://www.games.co.id/http://www.games.co.id/ -
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
65/75
D3 Komputer dan Sistem Informasi
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).
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
66/75
D3 Komputer dan Sistem Informasi
Gambar 5.1. Contoh tampilan e-learning sebagai salah bentuk CSCW
E. Langkah Praktikum
1. Mengadakan Pretes (15 Menit)
2. Tahapan 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
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
67/75
D3 Komputer dan Sistem Informasi
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:
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.
-
7/24/2019 Modul KOMSI KL.pengantar Antarmuka Pengguna
68/75
D3 Komputer dan Sistem Informasi
BAB XII
Perancangan Antarmuka untuk Pencarian
Pertemuan ke :
Waktu :
Kompetensi Dasar : Mahasiswa Dapat membuat desain untuk penc