SI401 Perancangan Sistem Informasi

Pertemuan #10
Suryo Widiantoro, ST, MMSI, M.Com(IS)
Mahasiswa mampu membuat rancangan sistem informasi
menggunakan pendekatan terstruktur.
1. Prinsip rancangan antarmuka pengguna
2. Proses perancangan antarmuka
3. Rancangan navigasi
4. Rancangan input dan output
5. Penerapan rancangan antarmuka pengguna di
organisasi
 Antarmuka pengguna (user interface) adalah bagian dari
sistem yang digunakan pengguna untuk berinteraksi.

 Meliputi tampilan layar yang menyediakan navigasi di

dalam sistem, layar dan formulir untuk menangkap
(capture) data, dan laporan (report) yang dihasilkan oleh
sistem (format kertas, Web, atau media lainnya).
 Rancangan interface adalah proses menentukan bagaimana sistem
akan berinteraksi dengan entitas eksternal (misal: pelanggan,
pemasok, sistem lain).

 Rancangan user interface menentukan cara bagaimana user akan

berinteraksi dengan sistem serta input dan output yang bisa diterima
dan dihasilkan oleh sistem.

 User interface meliputi 3 bagian utama:

1) Mekanisme navigasi, yaitu cara bagaimana user memberi instruksi kepada
sistem dan memberitahu apa yang dilakukan (misal: tombol, menu).
2) Mekanisme input, yaitu cara bagaimana sistem menangkap informasi (misal:
formulir pelanggan baru).
3) Mekanisme output, yaitu cara bagaimana sistem menyediakan informasi
kepada user atau ke sistem lain (misal: laporan, Web page).
 Studi mengenai human-computer interaction (HCI) fokus
pada meningkatkan interaksi antara user dan komputer
dengan membuat komputer lebih dapat digunakan dan
menarik sesuai dengan keinginan user.

 Dalam kuliah ini fokus pada rancangan interface berbasis

web dan graphical user interface (GUI) yang menggunakan
windows, menu, icon, dan mouse.
 Rancangan user interface adalah sebuah seni (art).

 Tujuannya adalah untuk membuat interface menyenangkan bagi mata dan

mudah digunakan, selain mengurangi usaha user untuk menyelesaikan
pekerjaan mereka.

 Sistem tidak pernah berakhir di dalam dirinya; namun merupakan cara

untuk menyelesaikan bisnis organisasi.

 Masalah terbesar yang dihadapi designer berpengalaman adalah

menggunakan ruang secara efektif. Terlalu banyak informasi untuk
ditampilkan daripada ruang untuk menampilkannya.

 Analis harus menyeimbangkan keinginan untuk kesederhanaan dan

tampilan yang menarik terhadap keinginan untuk menampilkan informasi
pada beberapa halaman atau layar, yang mengurangi kesederhanaan.
 Prinsip pertama dari rancangan user interface berkaitan dengan
layout dari layar, formulir, atau laporan.

 Layout mengacu pada pengaturan area layar atau dokumen

untuk maksud tertentu serta menggunakan area tersebut
secara konsisten di seluruh user interface.

 Pendekatan ini membagi layar menjadi 3 area utama:

1) Area atas menyediakan user cara navigasi ke seluruh sistem;
2) Area tengah (yang terluas) untuk menampilkan pekerjaan user;
3) Area bawah berisi informasi status mengenai apa yang dilakukan
oleh user.
 Content awareness mengacu pada kemampuan interface untuk
membuat user waspada (aware) terhadap informasi yang
disajikan tanpa mengalami kesulitan.

 Seluruh bagian interface -navigasi, input, atau output- harus

memberikan content awareness sebanyak mungkin:
◦ Content awareness berlaku untuk interface secara umum.
◦ Content awareness juga berlaku untuk bidang (field) di setiap area. Field
adalah elemen tunggal data yang merupakan input atau output.
◦ Content awareness juga berlaku untuk informasi yang berada dalam
formulir atau laporan.
 Aesthetics mengacu pada perancangan interface yang
dapat memuaskan mata yang memandangnya.

 Interface tidak harus merupakan hasil karya seni, namun

perlu agar berfungsi dan mengundang untuk digunakan.

 Dalam banyak kasus, “less is more” maksudnya rancangan

yang sederhana dan minimalis adalah yang terbaik.
 User experience mengacu pada perancangan user interface
dengan memperhatikan tingkat pengalaman user dalam
berkomputer.

 Sebuah sistem komputer akan digunakan oleh orang yang

punya pengalaman dan orang yang tidak punya pengalaman;
user interface harus dirancang untuk kedua orang tersebut:
◦ User awam biasanya dihubungkan dengan kemudahan belajar —
seberapa cepat dan mudah mereka belajar menggunakan sistem.
◦ User ahli biasanya dihubungkan dengan kemudahan penggunaan —
seberapa cepat dan mudah mereka menyelesaikan 1 tugas
menggunakan sistem setelah mempelajari cara penggunaannya.
 Konsistensi dalam design mungkin adalah faktor paling penting
dalam membuat sistem yang sederhana untuk digunakan,
karena memungkinkan user untuk memprediksi apa yang akan
terjadi.

 Bila interface konsisten, user dapat berinteraksi dengan 1

bagian dari sistem dan kemudian tahu bagaimana interaksi
dengan bagian lainnya.

 Konsistensi biasanya mengacu pada interface dalam satu

sistem komputer, sehingga semua bagian dari sistem yang
sama juga bekerja dengan cara yang sama.
 Terakhir, interface harus dirancang untuk mengurangi
usaha yang diperlukan user untuk menyelesaikan tugas.

 Artinya menggunakan sesedikit mungkin klik mouse atau

keystrokes untuk berpindah dari satu bagian sistem ke
bagian lainnya.

 Kebanyakan designer interface mengikuti three-clicks rule:

◦ User harus dapat berjalan dari awal dimulai atau menu utama
sebuah sistem sampai ke informasi atau aksi yang diinginkan tidak
lebih dari 3 mouse click atau 3keystroke.
 Rancangan user interface adalah proses 5 tahap yang
iteratif —Analis selalu bergerak maju mundur antar tahap
dan bukan jalan berurutan dari tahap 1 ke 5.
1) Analis memeriksa DFD dan use case yang dibuat saat tahapan analysis
dan mewawancara user untuk membuat use scenario yang
mendeskripsikan pola aktivitas umum user sehingga interface
memudahkan user untuk melakukan scenario secara cepat dan lancar.
2) Analis membuat interface structure diagram (ISD) yang mendefinisikan
struktur dasar interface serta memperlihatkan seluruh interfaces (layar,
formulir, dan laporan) dalam sistem dan hubungannya.
3) Analis merancang standar interface berupa elemen rancangan dasar yang
menjadi landasar interface sistem.
4) Analis membuat prototip rancangan interface untuk setiap interface dalam
sistem, seperti kontrol navigasi, layar input, layar output, formulir, dan
laporan.
5) Interfaces kemudian dievaluasi untuk menentukan apakah sudah
memuaskan dan bagaimana bisa lebih ditingkatkan.
 Use scenario adalah sebuah daftar ringkasan langkah2 yang dijalankan
user untuk menyelesaikan beberapa bagian pekerjaan.

 Use scenario adalah jalur yang umum digunakan melalui use case.

 Perhatikan bahwa dalam use case dan data flow diagram (DFD) bisa terjadi
respon terhadap event dapat diselesaikan melalui banyak jalur.

 Use scenario ditampilkan dalam bentuk narasi sederhana yang berkaitan

erat dengan DFD.

 Tujuannya adalah untuk mendeskripsikan use scenario yang paling umum

terjadi sehingga interface dapat dirancang untuk memungkinkan
penggunaan dilakukan secara sederhana dan mudah.
 2 use scenario untuk use case Search and Browse Tunes:
 Interface structure design (ISD) mendefinisikan komponen2
dasar interface dan bagaimana mereka bekerja bersama untuk
memberikan fungsionalitas kepada user.

 ISD digunakan untuk memperlihatkan bagaimana semua layar,

formulir, dan laporan yang digunakan oleh sistem saling
berhubungan dan bagaimana user berpindah.

 Sistem memiliki banyak ISD, 1 untuk setiap bagian utama

sistem.

 ISD mirip dengan DFD karena mnggunakan kotak dan garis

untuk menggambarkan struktur, namun tidak aturan atau
standar untuk membuat ISD.
 Setiap kotak pada ISD pada
bagian bawahnya terdapat
nomor proses DFD yang
didukung oleh interface
tersebut.

 Setiap interface
dihubungkan dengan
interface lain melalui garis
yang menunjukkan
bagaimana user berpindah
dari 1 interface ke
berikutnya.

 Struktur dasar interface

mengikuti struktur dasar
proses bisnisnya sesuai
dengan yang didefinisikan
dalam model proses.
 Standar interface adalah elemen rancangan dasar yang
umum di setiap layar, formulir, dan laporan di dalam sistem.

 Analis harus membuat metafora interface dasar yang

mendefinisikan bagaimana interface akan bekerja.
◦ Metafora interface adalah konsep dari dunia nyata yang digunakan
sebagai model untuk sistem komputer.

 Template interface mendefinisikan tampilan umum pada

seluruh layar dalam sistem informasi serta formulir dan
laporan berupa kertas yang digunakan.
 Template menjelaskan nama yang digunakan interface
untuk obyek interface utama, “building block” dasar dari
sistem seperti entitas dan data store.

 Template memberi nama untuk aksi interface yang paling

sering digunakan dalam rancangan navigasi (misalnya:
“buy” atau “purchase,” “exit” atau “quit”).

 Obyek dan aksi interface serta statusnya (misalnya:

terhapus, error), dapat digambarkan melalui ikon interface.
◦ Ikon adalah gambar yang akan muncul pada tombol perintah
(command button) serta laporan dan formulir untuk menandai
informasi penting.
 Prototip rancangan interface adalah mock-up atau simulasi dari
layar, formulir, atau laporan di komputer.

 Prototip disiapkan untuk setiap interface dalam sistem untuk

menunjukkan kepada user dan programmer bagaimana sistem
akan dijalankan.

 3 pendekatan paling umum untuk prototip rancangan interface

adalah:
1) Storyboard,
2) Prototip HTML,
3) Prototip language.
Storyboard
 Adalah bentuk paling sederhana dari prototip rancangan
interface dengan menggunakan kertas.

 Storyboard menunjukkan gambar coretan tangan seperti apa

tampilan layar dan bagaimana mengalir dari 1 layar ke lainnya,
mirip seperti storyboard kartun yang menunjukkan bagaimana
gerakan mengalir dari 1 adegan ke berikutnya.

 Storyboard adalah teknik paling sederhana karena yang

dibutuhkan hanya kertas dan pena —dan seseorang yang
berbakat seni.
Prototip HTML
 Salah satu jenis prototip rancangan interface yang banyak
digunakan adalah prototip HTML.

 Prototip HTML dibuat melalui Web page dengan HTML

(hypertext mark-up language).
◦ Designer menggunakan HTML untuk membuat rangkaian Web
page yang menunjukkan bagian sistem yang penting.
◦ User dapat berinteraksi dengan Web page melalui klik tombol dan
mengisi data ke dalam formulir (namun karena belum ada sistem
lengkap di belakangnya maka data tidak diproses).
◦ Web page saling terhubung sehingga saat user melakukan klik
tombol, bagian sistem yang diminta akan tampil.
 Prototip HTML lebih unggul dibanding storyboard karena
memungkinkan user untuk berinteraksi dengan sistem dan
mendapatkan pengalaman lebih baik mengenai bagaimana
melakukan navigasi pada layar yang berbeda.

 HTML memiliki keterbatasan, yaitu layar yang ditampilkan

di HTML tidak akan muncul seperti layar sistem yang
sesungguhnya (kecuali sistem yang sesungguhnya adalah
sistem Web dengan HTML).
Prototip Language
 Prototip language adalah prototip rancangan interface yang
dibuat dengan menggunakan bahasa pemrograman yang
sebenarnya atau dengan tool yang sebenarnya akan
digunakan untuk membuat sistem sesungguhnya.

 Prototip language dirancang dengan cara yang sama

seperti prototip HTML, yaitu memungkinkan user untuk
bergerak dari layar ke layar lain namun tidak melakukan
pemrosesan yang sesungguhnya.
 Contohnya dalam Visual Basic dimungkinkan untuk
membuat dan melihat tampilan layar tanpa benar2
menyertakan kode program pada layar tersebut.

 Prototip language butuh waktu lebih lama untuk dibuat

dibandingkan storyboards atau prototip HTML, namun
sama2 memiliki keunggulan untuk menampilkan seperti
layar yang nanti akan ditampilkan.
 Tujuan dari evaluasi interface adalah untuk memahami
bagaimana untuk meningkatkan rancangan interface.

 Rancangan interface itu subyektif; tidak ada rumus yang benar2

menjamin user interface yang baik.

 Kebanyakan designer interface –sengaja atau tidak– akan

merancang interface yang memenuhi keinginan personal yang
mungkin bisa sesuai atau tidak sesuai dengan kemauan user.

 Solusinya adalah melibatkan sebanyak mungkin orang untuk

mengevaluasi interface —lebih banyak user akan semakin lebih
baik.
 Seperti halnya prototip rancangan interface, maka evaluasi
interface dapat dilakukan dengan berbagai cara, masing2
dengan level detil yang berbeda.

 4 pendekatan yang paling umum adalah:

1) Evaluasi heuristic,
2) Evaluasi walk-through,
3) Evaluasi interactive,
4) Pengujian usability formal.
 Evalusi heuristic memeriksa interface dengan membandingkan
dengan kumpulan rancangan interface yang heuristic atau
prinsip.

 Evaluasi walk-through adalah meeting yang dilakukan

bersama user yang akan mengoperasikan sistem. Tim project
mempresentasikan prototip kepada user dan memandu mereka
ke beberapa bagian dari interface.

 Evaluasi interactive meminta user untuk benar2 mengerjakan

prototip HTML atau language dalam sesi 1-on-1 dengan
anggota tim project.

 Pengujian usability formal dilakukan menggunakan produk

software komersil dan produk yang dibuat oleh organisasi besar
yang akan digunakan di seluruh organisasi.
 Komponen navigasi dari interface memungkinkan user
untuk memasukkan perintah (command) untuk menavigasi
seluruh sistem dan melakukan aksi untuk memasukkan
dan meninjau informasi didalamnya.

 Komponen navigasi juga menampilkan pesan kepada user

mengenai aksi yang sukses atau gagal.

 Tujuan dari sistem navigasi adalah untuk membuat sistem

sesederhana mungkin untuk digunakan.
 Mencegah user membuat kesalahan. Sebuah kesalahan
membuang waktu dan membuat putus asa.
◦ Kesalahan terus menerus dapat membuat user meninggalkan sistem.

 Memperbaiki error dengan mudah. Idealnya sistem memiliki

tombol “undo” untuk mengatasi kesalahan; namun membuat
software dengan tombol tersebut menyulitkan.

 Urutan grammar. Banyak perintah (command) meminta user

menjelaskan object (misal: file, record, word) dan aksi yang
dilakukan terhadap object tersebut.
◦ Urutan grammar harus konsisten di seluruh sistem, misalnya di bagian
menu.
 Ada 2 perangkat hardware tradisional yang dapat digunakan
untuk mengontrol user interface:
1) Keyboard
2) Pointing device, seperti mouse, trackball, atau touch screen.

 Akhir2 ini, sistem voice recognition telah muncul walaupun

masih belum umum.

 Ada 3 pendekatan software untuk mendefinisikan perintah user:

1) language,
2) menu,
3) direct manipulation.
 Bahasa perintah (command language), dimana user
memasukkan perintah dalam bahasa khusus untuk sistem
komputer (misal: UNIX dan SQL).

 Sistem navigasi yang paling umum adalah menu, yang

menampilkan daftar pilihan kepada user yang dapat dipilih.
Menu lebih mudah untuk dipelajari daripada language karena
user melihat pilihan yang teratur namun terbatas.

 Melalui manipulasi langsung (direct manipulation), user

memasukkan perintah dengan bekerja langsung pada object
interface. Contohnya user dapat mengubah ukuran object pada
Microsoft PowerPoint dengan klik pada object dan
menggerakkan ke samping.
 Pesan adalah cara sistem untuk merespon kepada user dan
memberitahukan status interaksi.

 Ada beberapa jenis pesan seperti:

◦ Pesan error,
◦ Pesan confirmation,
◦ Pesan acknowledgment,
◦ Pesan delay,
◦ Pesan help.

 Pesan akan meminta user untuk mengkonfirmasi (misalnya:

dengan klik), bukan menampilkannya selama beberapa detik
dan kemudian menghilang sendiri.
 Mekanisme input memungkinkan dimasukkannya data ke
dalam sistem informasi, baik untuk data terstruktur seperti
informasi pemesanan (jumlah item, kuantiti, harga) maupun
informasi tidak terstruktur (komentar).

 Rancangan input berarti merancang layar yang digunakan

untuk memasukkan informasi, seperti formulir yang
digunakan user mengetik informasi.

 Tujuan dari rancangan input adalah untuk menangkap

informasi akurat bagi sistem secara mudah dan sederhana.
 Ada 2 pendekatan umum untuk memasukkan input ke dalam
sistem komputer:
1) Dengan pemrosesan online (transaction processing), setiap item input
(order customer, purchase order) dimasukkan ke dalam sistem satu
persatu pada saat bersamaan dengan kejadian transaksi meminta
input.
2) Dengan pemrosesan batch, semua input dikumpulkan selama waktu
tertentu dan dimasukkan ke dalam sistem sekaligus dalam batch.

 Prinsip paling penting dalam rancangan input adalah untuk

menangkap data dalam format elektronik langsung pada
sumber aslinya atau sedekat mungkin dengan sumber aslinya.
 Kebanyakan sistem pemrosesan transaksi dirancang untuk
menangkap data pada sumbernya.
◦ Otomasi sumber data (source data automation) adalah penggunaan
perangkat hardware khusus untuk secara otomatis menangkap data
tanpa ada orang yang mengetiknya.
◦ Toko2 biasanya menggunakan bar code reader yang otomatis menscan
produk dan memasukkan data langsung ke sistem komputer.

 Dengan penggunaan Web yang semakin luas, banyak data

ditangkap langsung dari customer.
◦ Dampaknya formulir untuk menangkap informasi pada layar harus
memberikan alur yang logis dan memungkinkan user untuk mengisi
formulir dan memeriksanya dengan mudah sebelum disubmit.
◦ Karena data yang dimasukkan user bisa terjadi kesalahan, maka cek
validasi harus dilakukan bila memungkinkan.
 Prinsip penting lainnya adalah untuk mengurangi keystroke.

 Keystroke membuang-buang waktu dan uang bagi customer,

user, atau operator data-entry.

 Sebaiknya sistem tidak menanyakan informasi yang dapat

diperoleh dengan cara lain (misal: menarik data dari database
atau melakukan perhitungan).

 Sebaliknya, sistem tidak mengharuskan user untuk mengetik

informasi yang dapat dipilih dari daftar; memilih daftar lebih
cepat dan mengurangi error.
 Setiap item data yang menjadi input dihubungkan ke field pada
formulir yang valuenya diketikkan.

 Setiap field memiliki label field yang ada disamping, diatas atau
dibawahnya, yang memberitahukan user jenis informasi apa
untuk field tersebut.

 Ada beberapa jenis input dan field yang berbeda:

◦ text box digunakan untuk memasukkan teks.
◦ number box digunakan untuk memasukkan angka.
◦ selection box memungkinkan user untuk memilih value dari daftar.
 Semua data yang dimasukkan ke sistem harus divalidasi untuk
memastikan akurasi.

 Validasi input dapat dilakukan dengan berbagai cara.

 Idealnya untuk mencegah informasi invalid masuk ke dalam

sistem, seharusnya komputer tidak menerima data yang tidak
lolos validasi.

 Namun hal itu sulit dilakukan karena data invalid seringkali lolos
dari operator data-entry dan user yang memberikan informasi.
 Output laporan yang dihasilkan oleh sistem, baik pada
layar, pada kertas, atau media lain seperti Web.

 Output mengkin adalah bagian yang paling nampak dari

sebuah sistem, karena alasan utama menggunakan sistem
informasi adalah untuk mengakses informasi yang
dihasilkan.

 Tujuan dari mekanisme output adalah untuk menyajikan

informasi kepada user sehingga dapat memahaminya
secara akurat tanpa mengalami kesusahan.
 Prinsip dasar untuk rancangan output menggambarkan
bagaimana output digunakan dan cara untuk membuatnya
sederhana untuk dipahami user.

 Prinsip pertama adalah untuk memahami bagaimana laporan

digunakan. Laporan dapat digunakan untuk banyak keperluan.

 Tujuan dari laporan yang baik rancangannya adalah untuk

menyediakan seluruh informasi yang dibutuhkan untuk
mendukung tugas user.

 Analis tidak boleh merancang laporan yang tidak jelas.

Masalah ini dapat terjadi karena Analis yang tidak sengaja
melakukannya.
 Ada beberapa jenis laporan yang berbeda seperti:
◦ Laporan detail,
◦ Laporan summary,
◦ Laporan exception,
◦ Dokumen turnaround,
◦ Grafik.

 Membedakan laporan sulit karena beberapa laporan

memiliki karakteristik beberapa jenis yang berbeda.
Ada beberapa jenis media berbeda yang digunakan untuk
menghasilkan laporan. 2 media yang dominan saat ini adalah:
◦ kertas
◦ elektronik.

Kertas (paper)
 Kelebihan:
◦ Media tradisional, cukup tahan lama, mudah digunakan, dan dapat diakses di
banyak situasi, sangat portabel terutama untuk laporan singkat.

 Kekurangan:
◦ Tidak fleksibel, setelah dicetak sulit diformat ulang dengan tampilan berbeda.
Laporan kertas mahal dan sulit digandakan, serta butuh bahan (kertas, tinta)
dan tempat penyimpanan. Laporan kertas sulit dipindahkan jarak jauh..
Elektronik
 Banyak organisasi pindah ke format laporan yang diproduksi
secara elektronik, dimana laporan “dicetak,” namun disimpan
dalam format elektronik pada server file atau server Web
sehingga user dapat dengan mudah mengaksesnya.

 Kelebihannya:
◦ Laporan tersedia dalam format yang telah dirancang.
◦ Laporan elektronik juga dapat diproduksi berdasarkan permintaan yang
diperlukan.
◦ Laporan elektronik menyediakan dukungan untuk laporan ad hoc.
◦ Mengurangi biaya pengiriman laporan jarak jauh dan meningkatkan
akses user terhadap laporan.
Kasus Online Store: Tune Source
 Proses 1, bagian Web
digunakan oleh
customer untuk
menemukan tunes
yang diinginkan.

 Gunakan DFD untuk

memastikan bahwa
seluruh fungsionalitas
untuk sistem telah
disertakan dalam ISD.
 Standar interface untuk sistem, metafora interface cukup jelas
dan langsung: sebuah toko musik retil Tune Source.
Selamat belajar dan semoga sukses