MODUL1-1 V

RPL TERSTRUKTUR

DISAIN ANTARMUKA
PENGGUNA, INPUT, DAN
OUTPUT

Jurusan Teknik Informatika

Universitas Sanata Dharma

DESAIN ANTARMUKA PENGGUNA

(GRAPHICAL USER INTERFACE)

TIPE PENGGUNA (USER)

Tipe pemakai komputer:

ahli
pemula

Umumnya desain interface saat ini berasumsi

pemakai adalah pemula yang sedang dalam
proses menjadi ahli.
Desain antarmuka perlu memperhatikan:

faktor pemakai
faktor human engineering
dialog dan istilah

FAKTOR PENGGUNA

Beberapa masalah yang sering muncul dalam

desain antarmuka:
1. Penggunaan jargon atau singkatan2 komputer
yg berlebihan
2. Desain yang tidak jelas
3. Ketidakmampuan membedakan tindakantindakan alternatif yang harus dipilih pemakai
4. Pendekatan problem-solving yang tidak
konsisten
5. Desain yang tidak konsisten
Beberapa panduan untuk memecahkan masalah
di atas:
1. Pahami user dan tugas mereka

FAKTOR HUMAN
ENGINEERING

Beberapa panduan praktis:

1.
User sistem harus menyadari apa yang akan
dilakukan selanjutnya
2.
Layar harus diformat agar berbagai info, perintah,
pesan muncul di area layar yang konsisten
3.
Pesan, perintah, informasi jangan terlalu panjang
4.
Jangan terlalu sering memakai atribut display yang
mengganggu spt blinking, highlight, dsb
5.
Nilai default dibuat jelas
6.
Antisipasi error yang mungkin dibuat user
7.
Jika ada error, user mestinya tidak boleh
melanjutkan tanpa memperbaiki error tsb
8.
Jika user melakukan sesuatu yang membahayakan
sistem, keyboard harus terkunci dan pesan utk
meminta bantuan teknisi harus dimunculkan

DIALOG DAN ISTILAH

Panduan praktis dialog:

1.
Gunakan kalimat sederhana dan benar
2.
Jangan mencoba melucu
3.
Jangan menghina
Panduan praktis istilah:
1.
Jangan gunakan jargon komputer
2.
Hindari singkatan jika mungkin
3.
Konsisten dengan pemilihan istilah
4.
Pilihlah istilah yang tepat untuk perintah

Dialog Menu Klasik

Hirarkikal

Contoh Bagan Dialog

Menu Pull-Down dan Cascading

menu
bar
Cascading
menu
Ellipses indicates
dialogue box
Pull-down
menu

Kotak Dialog

Menu Pop-Up

Tool Bars

Menu Ikonik

Antarmuka Consumer-Style

Hybrid Windows/Web Interface

LANGKAH DESAIN ANTARMUKA PENGGUNA

Proses perancangan antarmuka:

1.

2.

3.
4.

Buatlah bagan dialog antarmuka (misal

memakai diagram status/state
diagram)
Buatlah prototype dialog dan
antarmuka
Carilah umpan balik dari user
Jika perlu, kembali ke langkah 1 atau 2

Pertimbangan Khusus bagi Pengguna

dalam Disain Antarmuka

Kontrol Internal Otentikasi dan Otorisasi

User ID and Password

Privileges diberikan berkaitan dengan peran/jabatan
Web certificates

Online Help

Penggunaan HTML sebagai help systems

Help authoring packages
Tool tips
Help wizards
Agents objek perangkat lunak yang dapat beroperasi
lintas aplikasi yang berbeda dan jaringan.

Layar Otentikasi Log-in dan Layar Error

Ssertifikat Keamanan
Server

Help Tool Tip, Help Agent, dan

Pemrosesan Bahasa Alami

Help Wizard

DESAIN INPUT

TIPE PROSES

Input data bisa dilakukan pada waktu yang berbeda.

Hal ini ditentukan oleh jenis pemrosesan yang
dibedakan menjadi:
1.
Batch processing:

data tidak diproses langsung ketika datang,

tetapi dikumpulkan dulu dalam satu batch
(kumpulan), baru diproses
2.
Online processing:

Data diinputkan (biasanya melalui workstation)

dan langsung diproses
3.
Remote batch:

Kombinasi batch dan online: data dimasukkan

secara online atau offline kemudian
dikumpulkan dalam batch sebelum akhirnya
diproses.

PANDUAN DESAIN INPUT

Metode input: keyboard, mouse, touch

screen, point of sale, sound and speech,
penanda optis, tinta magnetis, transmisi
elektromagnetik, smart card, biometric
Beberapa panduan praktis desain input:
1.
2.
3.

Yang diinputkan hanya data-data variabel (bukan

konstanta)
Tidak perlu menginputkan data yang dapat
dihitung atau disimpan dalam program
Gunakan kode untuk atribut-atribut yang sesuai

PANDUAN DESAIN INPUT

Jika suatu dokumen dirancang untuk

mengumpulkan data, gunakan panduan
berikut:
1.
2.
3.
4.

cantumkan instruksi pengisian form (dokumen)

minimalkan jumlah tulisan tangan
urutkan data yang harus diisi seperti urutan
membaca buku (kirikanan, atas bawah)
Jika mungkin, gunakan rancangan berdasar pada
metafor (misal desain layar input penarikan
rekening berdasar desain form standar penarikan
rekening)

PANDUAN DESAIN INPUT

Kontrol internal dalam desain input:

1.
2.

Jumlah input harus dimonitor, jangan sampai ada

yang terlewat
Pastikan bahwa data yang diinputkan valid :

eksistensi (harus ada/tidak)

tipe data
domain
nilai-nilai kombinasi
self-checking digits
format

Alur yang baik dalam Form

Alur yang buruk dalam form

Disain Layar Metaforik

Kontrol GUI yang Umum

(Windows dan Web)

Text boxes
Radio
buttons
Check
boxes
List boxes
Drop down
lists
Combinatio
n boxes
Spin boxes
Buttons

Penggunaan Kontrol GUI

Text boxes

Radio buttons

Jika data memiliki sejumlah kemungkinan nilai dan ruang

pada layar memiliki keterbatasan untuk dibuat sebagai list
box

Combination boxes

Jika data memiliki sejumlah kemungkinan nilai

Drop down lists

Jika data bernilai YA atau TIDAK (biner)

List boxes

Jika data memiliki SATU nilai yang berasal dari himpunan

tertentu

Check boxes

Jika nilai data input tidak terbatas ruang lingkupnya

Jika perlu menyediakan pilihan bagi pengguna untuk

memilih suatu nilai atau mengetikkan sebuah nilai yang bisa
ada atau tidak ada dalam daftar

Spin boxes

Jika perlu untuk memberikan navigasi spanjang kumpulan

Kontrol Lanjut

Drop down
calendars
Slider edit
controls
Masked edit
controls
Ellipsis
controls
Alternate
numerical
spinners
Check list
boxes
Check tree
boxes

Kontrol Lanjut

Alat bantu otomatis untuk disain input

dan prototyping

Alat bantu kuno

Record Layout Charts

Display Layout Charts

Alat bantu baru

Microsoft Access
CASE Tools
Visual Basic
Excel
Visio

LANGKAH DESAIN INPUT

Langkah-langkah desain input:

1.
Identifikasi input sistem dan review kebutuhan pemakai
2.
Pilih kontrol GUI yang sesuai:

3.
4.

text box
radio button
check box
list box
drop-down list
combination box (combo box)
spin box
buttons

Desain, validasi, dan test input menggunakan beberapa

kombinasi alat bantu layout dan prototyping
Jika perlu, buat pula desain dokumen sumber (formulir
yang dipakai untuk menyimpan data transaksi)

DESAIN OUTPUT

JENIS OUTPUT & METODE

Jenis-jenis output:
1. Output internal: output bagi pemilik dan pemakai
sistem dalam organisasi
Laporan rinci (contoh?)
Laporan rangkuman (contoh?)
Laporan pengecualian (contoh?)
2. Output eksternal: output bagi pihak-pihak di luar
organisasi

Metode implementasi output: printer, layar, terminal

point-of sale (spt di kasir), multimedia, e-mail, hyperlink,
microfilm

Laporan rinci

Laporan Ringkasan

Laporan Pengecualian

Output Eksternal
Output Eksternaloutput yang dikirim
keluar dari organisasi

Biasanya dikirim untuk pelanggan, supplier,

rekanan, atau agen reguler

Turnaround documents output

eksternal yang dapat masuk kembali ke
dalam sistem sebagai input.

Sebagian besar tagihan dan invoice kembali

masuk ke sistem disertai pembayarannya

Dokumen Eksternal

Turnaround Document

Metode Implementasi Output

Output tercetak

Output di layar

Tabular output menyajikan informasi dalam bentuk

kolom
Zoned output menempatkan teks dan bilangan dalam
area tertentu
Graphic output adalah penggunaan gambar grafik untuk
menyajikan informasi dan menunjukkan tren serta
hubungan yang sulit dilihat dalam bentuk tabel

Point-of-sale terminals (misal kasir)

Multimedia
E-mail
Hyperlink
Microfilm or microfiche

Tipe-tipe Grafik
Grafik garis (Line charts) menunjukkan bagaimana satu atau
lebih rangkaian data sepanjang periode waktu tertentu. Berguna
untuk merangkum dan menunjukkan data dalam interval reguler.
Setiap garis merepresentasikan satu rangkaian atau kategori data.
Grafik area (Area charts) serupa dengan grafik garis kecuali
bahwa fokusnya adalah area di bawah garis. Area beguna untuk
merangkum dan menunjukkan perubahan data sepanjang waktu
tergtentu. Setiap garis merepresentasikan satu rangkaian atau
kategori data.
Grafik batang (Bar charts) berguna untuk membandingkan
beberapa rangkaian atau kategori data. Tiap batang
merepresentasikan serangkaian atau kategori data
Grafik kolum (Column charts) serupa dengan grafik batang
kecuali bahwa bentuk batang adalah vertikal. Serangkaian grafik
kolom mungkin digunakan untuk membandingkan kategori yang
sama pada waktu atau interval yang berbeda. Setiap batang
merepresentasikan satu seri atau kategori data.

Tipe-tipe Grafik
Grafik pie (Pie charts) menunjukkan bagaimana hubungan antar bagian
terhadap keseluruhan. Berguna untuk merangkum persentase
sekumpulan data terhadap keseluruhan. Tiap potongan
merepresentasikan sekumpulan data.
Grafik donat (Donut charts) serupa dengan grafik pie kecuali bahwa
mereka dapat menunjukkan banyak kumpulan atau kategori data,
masing-masing sebagai cincin konsentris. Dalam tiap cincin, sepotong
cincin merepresentasikan satu item dari kumpulan data tsb.
Grafik radar (Radar charts) berguna untuk membandingkan aspek-aspek
yang berbeda dari beberapa kumpulan atau kategori data. Tiap kumpulan
data direpresentasikan menggunakan bidang geometris yang mengelilingi
titik pusat. Kumpulan data saling tumpang tindih sehingga dapat
dibandingkan.
Grafik sebaran (Scatter charts) berguna untuk menunjukkan hubungan
antara 2 atau lebih kumpulan atau kategori data yang diukur pada
beberapa interval waktu. Tiap kumpulan data direpresentasikan dengan
titik menggunakan warna atau yang berbeda.

Disain Output dengan Cara Kuno

Disain dengan CASE Tool Modern

Disain Output dengan Report Writer

Tool

Disain Output dengan Report Writer

Tool

PANDUAN DESAIN OUTPUT

Panduan praktiks desain output:

1.
Output harus mudah dibaca dan diinterpretasikan
ada judul
ada tanggal & waktu output dihasilkan
dalam output berbentuk form: seluruh item harus ada
labelnya
tabel: tiap kolom harus ada labelnya
singkatan-singkatan ada keterangannya (legenda)
format seimbang (tidak terlalu padat atau kosong)
pemakai dapat menemukan dengan mudah
pemakai tidak harus mengedit manual agar output
dapat bermanfaat bagi mereka
istilah teknis komputer sebaiknya dihindari dalam
output maupun dalam pesan2 kesalahan

PANDUAN DESAIN OUTPUT

Panduan praktis desain output (lanjutan):

2. Output harus sampai pada pemakai tepat waktu
3. Distribusi atau akses ke output harus memadai bagi
pemakai
4. Output harus dapat diterima (acceptable) oleh
pemakai, artinya sesuai dengan apa yang mereka
butuhkan dan sesuai dengan rencana mereka untuk
memanfaatkan output tersebut

LANGKAH DESAIN OUTPUT

Langkah-langkah desain output:

1. Identifikasi output sistem dan review kebutuhan
pemakai
2. Buatlah spesifikasi kebutuhan fisik output
3. Desain, validasi, dan test output menggunakan
beberapa kombinasi alat bantu layout, prototyping,
dan generator program

Penyesuaian Laporan
(Report Customization)

Prototipe Laporan Tabular

Prototipe Laporan Grafik

Prototipe Output per Record

(Record-at-a-Time Output)

Prototipe Output Web

Database

Prototipe Output
Windows/Web Media Player