Dokumen ini menjelaskan proses rancangan antarmuka untuk sistem informasi di Universitas PGRI Wiranegara melalui lima tahap iteratif, dari analisis kebutuhan pengguna hingga evaluasi interface. Proses tersebut mencakup pembuatan use scenario, desain struktur interface, pembuatan prototip, dan evaluasi agar menghasilkan interface yang efektif dan mudah digunakan. Metodologi ini diharapkan membantu pengembang dalam menciptakan antar muka yang memudahkan pengguna dalam berinteraksi dengan sistem.

1. Proses rancangan
antarmuka
UNIVERSITAS PGRI WIRANEGARA

2.  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.

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

4. 1# Pembuatan Use Scenario
 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.

5.  2 use scenario untuk use case Search and Browse Tunes:

6. 2# Interface Structure Design
 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.

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

8. 3# Rancangan Standar Interface
 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.

9.  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.

10. 4# Prototip Rancangan Interface
 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.

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

13. 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.
 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.

14. Prototip Language
 Prototip language adalah prototip rancangan interface yang dibuat
dengan menggunakan bahasa pemrograman yang 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

16. 5# Evaluasi Interface
 Tujuan dari evaluasi interface adalah untuk memahami bagaimana untuk
meningkatkan rancangan interface.
 Rancangan interface bersifat 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.

17.  Seperti halnya prototip rancangan interface, maka evaluasi interface
dapat dilakukan dengan berbagai cara
 4 pendekatan yang paling umum adalah:
1) Evaluasi heuristic,
2) Evaluasi walk-through,
3) Evaluasi interactive,
4) Pengujian usability formal.

18.  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.

19. Rancangan navigasi
•UNIVERSITAS PGRI WIRANEGARA

20.  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.

21. Prinsip dasar rancangan navigasi
 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
 Urutan grammar. Urutan grammar harus konsisten di seluruh
sistem, misalnya di bagian menu.

22. Jenis kontrol navigasi
 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.

24. Pesan (message )
 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.

26. Rancangan Input
UNIVERSITAS PGRI WIRANEGARA

27.  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.

28. Prinsip dasar rancangan input
 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.

29. Jenis2 Input
 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.

32. Rancangan output

33.  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.

34. Prinsip dasar rancangan output
 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.

35. Jenis2 Output
 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.

37. Media
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..

38. Elektronik
 Banyak organisasi pindah ke format laporan yang diproduksi secara
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.

39. Penerapan perancangan antarmuka di
organisasi
KASUS ONLINE STORE: TUNE SOURCE

40.  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.

41.  Standar interface untuk sistem, metafora interface cukup jelas dan
langsung: sebuah toko musik retil Tune Source.

43. Tugas Akhir IMK
 Tentukan Tema dari Platform Website atau Aplikasi yang akan dipakai
 Buatlah Use Scenario yang sering digunakan dari Sebuah Platform Website
atau Aplikasi
 Buatlah ISD (Interface Struktur Desain) Sebuah Platform Website atau Aplikasi
 Buatlah Prototipe Rancangan Interface sederhana dari Sebuah Platform
Website atau Aplikasi (Bisa gambar tangan, atau pakai aplikasi Cth : Figma)
 Dikumpulkan dalam bentuk hardcopy pada waktu hari H UAS

44. Terima kasih
SELAMAT BELAJAR DAN SEMOGA SUKSES