LAPORAN SEMENTARA

PRAKTIKUM ANALISIS DAN PERANCANGAN SISTEM INFORMASI

BAB V
DESAIN USER INTERFACE

Disusun oleh:
PLUG H

Silvia Sri Oktarini

122190005

LABORATORIUM
ANALISIS DAN PERANCANGAN SISTEM INFORMASI
PROGRAM STUDI TEKNIK INDUSTRI
JURUSAN TEKNIK INDUSTRI
FAKULTAS TEKNIK INDUSTRI
UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN”
YOGYAKARTA
2021
 LEMBAR ORSINALITAS

Saya yang bertanda tangan dibawah ini :

Nama : Silvia Sri Oktarini

NPM : 122190005

menyatakan bahwa Laporan Praktikum Analisis dan Perancangan Sistem Informasi

Bab V merupakan hasil karya saya sendiri.
Apabila pernyataan ini terbukti tidak benar, saya bersedia untuk
mempertanggungawabkan dan menerima sanksi sesuai hukum yang berlaku.

Demikian pernyataan ini saya buat dengan sebenar-benarnya dan tanpa paksaan
dari pihak manapun.

Yogyakarta, 4 Oktober 2021

Yang menyatakan

Silvia Sri Oktarini

NPM 122190005
 BAB V
DESAIN USER INTERFACE

5.1 Tujuan Praktikum

Tujuan praktikum pada Bab V diantaranya adalah:
1. Mengetahui dan memahami desain user interface dan user experience.
2. Memahami dan membedakan desain konseptual dengan desain
kontekstual.
3. Membuat desain user interface dengan menggunakan Balsamic
Mockup dan Visual Studio.

5.2 Landasan Teori

5.2.1 Desain Konseptual dan Desain Kontekstual
Desain sistem konseptual adalah “pusat”, titik tumpu, dari proses
pengaturan kelayakan yang memastikan keberhasilan penyusunan sistem
informasi.Desain konseptual menentukan arah sistem terbuka dengan lingkaran
umpan balik interaksi materi-energi-entitas informasiLangkah ini dilakukan pada
suatu platform desain tanpa mempertimbangkan coding, seperti Balsamic
Mockups. Sedangkan, desain kontekstual merupakan lanjutan dari desain
konseptual, dimana komponen-komponen yang sudah diidentifikasi di desain
dalam suatu platform program. Langkah ini dilakukan pada suatu platform program
yang sudah mempertimbangkan coding, salah satunya adalah Visual Studio.
5.2.2 User Interface dan User Experience
User Interface (UI) merupakan serangkaian tampilan grafis yang dapat
dimengerti oleh pengguna komputer dan diprogram sedemikian rupa sehingga
dapat terbaca oleh sistem operasi komputer dan beroperasi sebagaiman mestinya
(Darmawan, 2013). Pembuatan UI bertujuan untuk membuat teknologi informasi
mudah digunakan oleh pengguna atau disebut dengan istilah user friendly.
Sedangkan User Experience (UX) adalah tentang bagaimana produk atau layanan
tersebut apakah pengalaman dalam penggunaannya mudah digunakan, sederhana

Laporan Sementara Praktikum Analisis dan Perancangan Sistem Informasi 2021 V-3
dan mudah dimengerti, serta seberapa efektif dan efisien interaksi yang terjadi
dengan produk tersebut (Ahsan, Arianto, & Tri Murdani, 2020).
Menurut Larasati (2010), terdapat beberapa faktor yang dapat memengaruhi
User Experience yaitu :
1. Desain sebuah aplikasi sesuai tujuan awal.
2. Kemampuan dan keterbatasan aplikasi
3. Isi dan tampilan aplikasi
4. Fungsionalitas aplikasi
5.2.3 Desain User Interface
Desain user interface adalah merupakan suatu desain rekayasa antarmuka
yang bertujuan untuk melakukan interaksi manusia terhadap komputer, desain user
interface yang baik dapat memberikan penyelesaian pengerjaan tanpa
menggunakan tangan, dengan menggunakan desain grafis yang baik, menjadikan
sebuah aplikasi digital dapat lebih mudah digunakan oleh pengguna (Auliazmi,
Rudiyanto, & Widi Utomo, 2021). Desain User Interface berfungsi sebagai sarana
dialog antar manusia dan komputer, dengan melalui UI informasi dapat disajikan
dengan lebih mudah, menarik, dan komunikatif. Tampilan desai UI pada suatu
produk berbasis digital harus dibuat secara natural dan menarik minat untuk
mempelajari produk tersebut. Adapun prinsip umum pada desain user interface
yaitu:
1. User Compatibility
2. Product Compatibility
3. Task Compatibility
4. Work Flow Compatibility
5. Consistency
6. Familiarity
7. Simplicity
8. Direct Manipulation
9. Flexibility
10. Responsiveness
11. Protection

Laporan Sementara Praktikum Analisis dan Perancangan Sistem Informasi 2021 V-4
 12. Invisible Technology
13. What You See What You Get
14. Robustness
15. Control
16. Ease of Learning
17. Ease of Use

5.3 Prosedur Praktikum

Prosedur praktikum pada Bab V adalah:
1. Membuka aplikasi Balsamic Mockups dengan double click pada icon
atau dengan search.
2. Melihat pada Tab All cari Rectangle, kemudian drag ke workspace.
Mengatur size Rectangle menjadi 490 x 490.
3. Menggeser Rectangle ke workspace dan mengatur size sesuai selera,
mengubah warna background pada Rectangle menjadi Green 3
(93c47d).
4. Menggeser Image ke workspace dan double click untuk memasukkan
gambar, mengatur size sesuai selera. Menggeser Label untuk memberi
keterangan pada setiap gambar.
5. Memilih tanda panah ke bawah pada form 1 untuk merubah nama
dengan memilih Rename.
6. Untuk menambah form dapat dilakukan dengan memilih tanda plus
“+” di pojok kiri atas.
7. Membuat form 2 dengan nama Form Data Pemesanan.
8. Membuat form 3 dan 4 dengan nama Form Data Penjualan dan Data
Persediaan Gudang.

5.4 Perancangan Sistem

5.4.1 Studi Kasus
PT Refindo Intiselaras Indonesia merupakan salah satu perusahaan
pembuatan peralatan tambang yang ada di Jawa Timur bagian barat. Studi kasus

Laporan Sementara Praktikum Analisis dan Perancangan Sistem Informasi 2021 V-5
yang terdapat pada perusahaan tersebut berkaitan dengan adanya overload pada
gudang sehingga bahan baku seringkali mengalami keterlambatan dan mengganggu
proses produksi perusahaan. Konsumen mengalami kesulitan mengetahui apakah
produk yang dipesan telah jadi atau belum. Oleh karena itu, dengan permasalahan
diatas, perlu solusi dalam pengembangan sistem informasi pada perusahaan
tersebut. Pada studi kasus ini, ada beberapa aktor yang berperan dalam sistem
informasi yang akan dibuat. Di antaranya sebagai berikut:

1. Admin berperan sebagai pengelola ketersediaan bahan baku, mengelola data

register user dan supplier, mengelola data hasil produksi.
2. Customer atau pihak perusahaan yang berhubungan langsung dengan
suppliers. Customer berperan dalam melakukan pemesanan produk yang
habis kepada suppliers.
3. Supplier berperan sebagai pengelola pesanan customers dan melakukan
penawaran harga terhadap produk yang dipesan.

5.4.2 Mockup
Tampilan dari mocup form login Pada program sistem informasi rantai
pasok pembuatan peralatan alat tambang PT Refindo Intiselaras Indonesia dapat
dilihat pada Gambar 5.1. Penjelasan mengenai mocup dapat dilihat pada Tabel 5.1.

Laporan Sementara Praktikum Analisis dan Perancangan Sistem Informasi 2021 V-6
 Gambar 5.1 Mocup form Login
Tabel 5.1 Data Login
Data Login
Object Properties Nilai
NewMockup1 Name Form Login
Image 1 Name Icon
54 x 62
Label 1 Name Label PT REFINDO
Size INTISELARAS
INDONESIA
13pt
Label 2 Name Label
Size NO ID
Label 3 Name Label USERNAME
Size 13pt
Label 4 Name Label PASSWORD
Size 13pt
Text input 1 Name Text input
Text input 2 Name Text input
Text input 3 Name Text input
comboBox Name KATEGORI

Laporan Sementara Praktikum Analisis dan Perancangan Sistem Informasi 2021 V-7
 Button Name Button
Text LOGIN

Tampilan dari mockup form Data Pemesanan data program sistem informasi
rantai pasok pembuatan peralatan alat tambang PT Refindo Intiselaras Indonesia
dapat dilihat pada Gambar 5.2. Penjelasan mengenai mockup dapat dilihat pada
Tabel 5.2.

Gambar 5.2 Mockup form Data Pemesanan

Tabel 5.2 Data Pemesanan

Data Login
Object Properties Nilai
NewMockup1 Name Form DATA
PEMESANAN
Image 1 Name Image
Size 56 x 42
Label 1 Name PT REFINDO
Size INTISELARAS
INDONESIA
13pt
Label 2 Name NO ID
Size 13pt
Label 3 Name NO TRANSAKSI
Size 13pt
Label 4 Name NAMA BARANG
Size 13pt
Label 5 Name JUMLAH BARANG
Size 13pt
 Label 6 Nama TOTAL PEMESANAN
size 13pt
Text input 1 Name Text input
Text input 2 Name Text input
Text input 3 Name Text input
Text input 3 Name Text input
Tabs Bar Name DATA PEMESANAN
Text 13pt
V. Scroll Bar Name V. Scroll Bar
Num Stepper Name Num Stepper
Button 1 Name INPUT
Button 2 Name HAPUS
Button 3 Name KEMBALI
Button 4 Name DATA PEMESANAN
Button 5 Name KELUAR

Tampilan dari mockup form Data Persediaan Produk data program sistem
informasi rantai pasok pembuatan peralatan alat tambang PT Refindo Intiselaras
Indonesia dapat dilihat pada Gambar 5.3. Penjelasan mengenai mockup dapat
dilihat pada Tabel 5.3.
 Gambar 5.3 Mockup form Data Persediaan Produk
Tabel 5.3 Data Pemesanan
Data Login
Object Properties Nilai
NewMockup1 Name Form DATA
PERSEDIAAN PRODUK
Image 1 Name Image
Size 56 x 42
Label 1 Name PT REFINDO
Size INTISELARAS
INDONESIA
13pt
Label 2 Name KODE PERSEDIAAN
Size 13pt
Label 3 Name NO TRANSAKSI
Size 13pt
Label 4 Name NAMA BARANG
Size 13pt
Label 5 Name JUMLAH BARANG
Size 13pt
 Tabel 5.3 Data Pemesanan (lanjutan)
Data Login
Object Properties Nilai
Label 6 Nama JENIS BARANG
Size 13pt
Text input 1 Name Text input
Text input 2 Name Text input
Text input 3 Name Text input
Text input 3 Name Text input
Tabs Bar Name DATA PEMESANAN
Text 13pt
V. Scroll Bar Name V. Scroll Bar
Num Stepper Name Num Stepper
Button 1 Name INPUT
Button 2 Name HAPUS
Button 3 Name KEMBALI
Button 4 Name DATA PERSEDIAAN
PRODUK
Button 5 Name KELUAR

Tampilan dari mockup form Admin data program sistem informasi rantai
pasok pembuatan peralatan alat tambang PT Refindo Intiselaras Indonesia dapat
dilihat pada Gambar 5.4. Penjelasan mengenai mockup dapat dilihat pada Tabel 5.4.

Gambar 5.4 Mockup form Admin

 Tabel 5.4 Admin
Data Login
Object Properties Nilai
NewMockup1 Name Form DATA
PEMESANAN
Image 1 Name Image
Size 56 x 42
Label 1 Name PT REFINDO
Size INTISELARAS
INDONESIA
13pt
Label 2 Name NO TRANSAKSI
Size 13pt
Label 3 Name NAMA BARANG
Size 13pt
Label 4 Name JUMLAH BARANG
Size 13pt
Label 5 Name TOTAL PEMESANAN
Size 13pt
Label 6 Nama KODE PERSEDIAAN
Size 13pt
Label 7 Name NO TRANSAKSI
Size 13pt
Label 8 Name NAMA BARANG
Size 13pt
Label 9 Name JUMLAH BARANG
Size 13pt
Label 10 Name JENIS BARANG
Size 13pt
Text input 1 Name Text input
Text input 2 Name Text input
Text input 3 Name Text input
Text input 4 Name Text input
Text input 5 Name Text input
Text input Name Text input
Tabs Bar Name DATA PEMESANAN
Text DATA PERSEDIAAN
PRODUK
13pt
V. Scroll Bar Name V. Scroll Bar
Num Stepper Name Num Stepper
Button 1 Name INPUT
Button 2 Name HAPUS
Button 3 Name INPUT
Button4 Name HAPUS
Button 5 Name KEMBALI
Button 6 Name DATA PEMESANAN
Button 7 Name DATA PERSEDIAAN
PRODUK
Button 8 Name KELUAR
 DAFTAR PUSTAKA

Ahsan, M., Arianto, W., & Tri Murdani, R. (2020, Desember). Desain User
Interface Dan User Experience Mobile App Kuysedekah.id. Jurnal
SMATIKA, 10, 109-114.
Auliazmi, R., Rudiyanto, G., & Widi Utomo, D. (2021). Kajian Estetika Visual
Interface Dan User Experience Pada Aplikasi Ruang Guru. Jurnal Seni dan
Reka Rancang, 4, 21-36.
Darmawan. (2013). Pengalaman, Usability, dan Antarmuka Grafis. Jornal of Visual
Art and Design, 4, 95-102.