Jurnal Teknik Informatika dan Sistem Informasi ISSN 2407-4322
Vol. 10, No. 3, September 2023, Hal. 291-303 E- ISSN 2503-2933 291
Perancangan Front And Aplikasi Penjualan Berbasis Web Menggunakan Metode HCD
Indah Rafiqa Zulva*1, Edi Susilo2, Muhammad Fazlie3
1,2,3
Program Studi Teknik Informatika, Fakultas Teknik, Universitas Riau, Pekanbaru e-mail: *1[email protected], 2[email protected], 3[email protected]
Abstrak
Koperasi Unit Desa (KUD) Jaya Makmur merupakan koperasi yang terletak di Kampung Kumbara Utama. Bidang usahanya yaitu warung serba ada (Waserda), sarana produksi (Saprodi), dan Unit Simpan Pinjam (USP). Bidang usaha waserda mencatat transaksi penjualan menggunakan aplikasi iPos versi 4.0.5.3. yang dibuat dengan Visual Basic .NET.
Aplikasi iPos versi 4.0.5.3 yang digunakan pada KUD Jaya Makmur ditemukan beberapa permasalahan. Waserda memiliki server dan 3 kasir, namun aplikasi tersebut baru digunakan pada server dan 1 kasir, sehingga kasir yang lain menuliskan penjualan barang secara manual.
Pada aplikasi tersebut juga terdapat kendala pada fitur jumlah stok. Angka berapapun yang ditulis pada tabel stok tersebut akan tetap ditampilkan jumlahnya nol. Hal tersebut menyebabkan selisih antara barang masuk dan barang keluar tidak sesuai. Penelitian ini dilaksanakan untuk merancang front end aplikasi penjualan berbasis web menggunakan metode Human Centered Design (HCD). Pengujian front end dilakukan menggunakan Standard ISO 25010 aspek UX. Dibandingkan dengan aplikasi sebelumnya, aplikasi penjualan KUD Jaya Makmur terbukti lebih baik. Melalui pengujian UX yang dilakukan terhadap aplikasi penjualan KUD Jaya Makmur maupun aplikasi iPos versi 4.0.5.3 dengan cara yang sama, didapatkan hasil bahwa aplikasi penjualan KUD Jaya Makmur lebih baik dalam segala aspek.
Kata kunci—front end, UI, aplikasi, HCD
Abstract
Village Unit Cooperatives (KUD) Jaya Makmur is a cooperative located in Kampung Kumbara Utama. The line of business are convenience stores (Waserda), production facilities (Saprodi), and Savings and Loan Units (USP). The waserda business sector records sales transactions using the iPos application version 4.0.5.3. created with Visual Basic .NET. The iPos application version 4.0.5.3 used in KUD Jaya Makmur found several problems. Waserda has a server and 3 cashiers, but the application is only used on the server and 1 cashier, so the other cashiers manually write down goods sales. There are also problems with the stock count feature. Any number written in the stock table will still be displayed as zero. Some of these problems have become obstacles faced so far. This research was conducted to design a web- based sales application front end using the Human Centered Design (HCD) method. Front end testing was carried out using Standard ISO 25010 in terms of UX. Through UX testing conducted on the KUD Jaya Makmur sales application and the iPos version 4.0.5.3 application in the same way, it was found that the sales application for KUD Jaya Makmur was better in all aspects.
Keywords—front end, UI, application, HCD
292 Jatisi ISSN 2407-4322 Vol. 10, No. 3, September 2023, Hal. 291-303 E-ISSN 2503-2933
1. PENDAHULUAN
1.1 Latar Belakang
Koperasi Unit Desa (KUD) merupakan badan usaha yang anggotanya merupakan masyarakat desa. KUD berdiri di kawasan desa yang fungsinya menyediakan keperluan masyarakat (Ichsan et al., 2021). KUD Jaya Makmur merupakan koperasi yang terletak di Kampung Kumbara Utama Kecamatan Kerinci Kanan Kabupaten Siak. Para anggotanya merupakan petani kelapa sawit. Bidang usaha pada KUD ini yaitu warung serba ada (Waserda), sarana produksi (Saprodi), dan Unit Simpan Pinjam (USP).
Bidang usaha waserda mencatat transaksi penjualan menggunakan aplikasi iPos versi 4.0.5.3. yang dibuat dengan Visual Basic .NET. Fitur pada aplikasi tersebut antara lain pembuatan database, daftar item, daftar supplier, daftar pelanggan, dan laporan. Aplikasi iPos versi 4.0.5.3 yang digunakan pada KUD Jaya Makmur ditemukan beberapa permasalahan.
Waserda memiliki server dan 3 kasir, namun aplikasi tersebut baru digunakan pada server dan 1 kasir, sehingga kasir yang lain menuliskan penjualan barang secara manual. Pada aplikasi tersebut juga terdapat kendala pada fitur jumlah stok. Tabel stok tidak berfungsi dengan baik.
Angka berapapun yang ditulis pada tabel stok tersebut akan tetap ditampilkan jumlahnya nol.
Hal tersebut menyebabkan selisih antara barang masuk dan barang keluar tidak sesuai.
Permasalahan tersebut menjadi kendala yang dihadapi selama ini.
Untuk memudahkan penggunaan aplikasi penjualan pada KUD Jaya Makmur, peneliti membuat aplikasi penjualan berbasis web. Aplikasi berbasis web memungkinkan pengguna dapat mengakses aplikasi tersebut kapanpun dan dimanapun asalkan terkoneksi dengan internet.
Dalam pengembangan aplikasi, terdapat istilah client side (front end) dan server side (back end). Front end berfokus pada user interface dan user experience. Sedangkan back end berfokus pada penanganan logika serta aliran kerja aplikasi [1]. UI memperhatikan kemudahan penggunaan aplikasi [2]. Sedangkan UX merupakan hasil korelasi dari aplikasi, pengguna, dan konteksnya [3]. Dalam rangka penyelesaian masalah yang telah dipaparkan, peneliti fokus pada perancangan dan pengujian front end. Pembuatan front end dipilih agar data yang terdapat dalam database dapat ditampilkan dan bisa dilihat oleh pengguna.
Penggunaan metode Human Centered Design (HCD). HCD merupakan metode perancangan aplikasi yang berfokus pada pengguna [4]. Metode HCD dapat meningkatkan keefektifan, efisiensi, kepuasan, dan kenyamanan pengguna [5]. Diharapkan aplikasi yang dirancang dapat membantu pihak KUD Jaya Makmur untuk mencatat transaksi penjualan dengan efektif dan efisien.
1.2 Penelitian Terdahulu
Penelitian pertama dilakukan oleh Muhammad Galang Ramadhan, Lela Nurpulaela, dan Ulinnuha Latifa pada Tahun 2020. Penelitian ini berjudul Perancangan Sistem Informasi POS (Point Of Sales) Berbasis Web dengan menggunakan Framework Codeigniter pada Pasar Swalayan Muhammad. Masalah yang ada pada penelitian ini adalah proses transaksi lambat karena penelitian transaksi dan pembuatan nota masih dilakukan manual. Pengolahan data pun masih manual sehingga menyebabkan besarnya peluang kesalahan input data. Dari permasalahan tersebut, peneliti membangun sebuah sistem informasi POS berbasis web menggunakan metode waterfall untuk pembuatan sistemnya. Penelitian ini berhasil memudahkan kasir dalam penelitian transaksi dan pembuatan nota [6].
Penelitian kedua dilakukan oleh Rizka Novelianti pada Tahun 2022. Penelitian ini berjudul Sistem Informasi Akuntansi Penjualan Warung Serba Ada (Waserda) pada KUD Mina Jaya. Masalah yang ada pada penelitian ini adalah Penjualan waserda pada KUD Mina Jaya masih dicatat manual pada kertas memo. Hal tersebut beresiko rusak ataupun hilang. Selain itu,
Jatisi ISSN 2407-4322
Vol. 10, No. 3, September 2023, Hal. 291-303 E- ISSN 2503-2933 293
kasir pun kesulitan dalam pembuatan laporan piutang dan laporan penjualan. Dari permasalahan tersebut, peneliti membangun sebuah sistem informasi akuntansi penjualan waserda menggunakan metode waterfall. Penelitian ini berhasil menyediakan sistem yang dapat dapat mempersingkat waktu dalam pemrosesan transaksi dan menghilangkan kemungkinan duplikasi data [7].
Penelitian ketiga dilakukan oleh Alam Syaputra dan Novri Hadinata pada Tahun 2022.
Penelitian ini berjudul Pengembangan Sistem Informasi Penjualan pada Koperasi SMA Negeri 1 Rambang Kuang dengan Menerapkan Metode Prototype. Masalah yang ada pada penelitian ini adalah pegawai koperasi kesulitan dalam membuat laporan transaksi dalam periode tertentu karena proses perhitungan masih dilakukan secara manual. Hal tersebut menyebabkan keterlambatan dalam pelaporan. Dari permasalahan tersebut, peneliti membangun sebuah sistem informasi penjualan. Penelitian ini berhasil membangun sistem yang dapat mengolah data transaksi dan meminimalkan masalah yang sebelumnya dihadapi [8].
2. METODE PENELITIAN
Pada pembuatan aplikasi penjualan berbasis web, sebelumnya diperlukan rancangan alur penelitian guna memudahkan pembuatan aplikasi. Flowchart alur penelitian tergambar pada gambar 1 dibawah ini.
294 Jatisi ISSN 2407-4322 Vol. 10, No. 3, September 2023, Hal. 291-303 E-ISSN 2503-2933
Gambar 1. Flowchart Alur Penelitian
Jatisi ISSN 2407-4322
Vol. 10, No. 3, September 2023, Hal. 291-303 E- ISSN 2503-2933 295
Tahapan yang digunakan pada penelitian ini mengacu pada metode Human Centered Design (HCD). Metode tersebut memiliki tahapan yaitu:
1. Perencanaan desain
Tahap ini diawali dengan proses wawancara dan observasi aplikasi yang masih digunakan.
Wawancara dilakukan antara peneliti dengan pengguna aplikasi terkait dengan requirements UI yang dibutuhkan.
2. Pemahaman dan penentuan konteks penggunaan
Informasi yang didapat sebelumnya kemudian dirumuskan masalahya dan ditentukan apakah UI perlu ditingkatkan atau harus dirubah.
3. Spesifikasi kebutuhan pengguna
Pada tahap spesifikasi kebutuhan pengguna dilakukan analisis kebutuhan fungsional dan non fungsional
4. Pembuatan desain
Desain yang dibuat pada tahap ini yaitu prototype front end. Desain aplikasi kemudian diimplementasikan menjadi UI aplikasi.
5. Evaluasi desain
Desain yang telah dibuat kemudian dikomunikasikan bersama pengguna aplikasi untuk dievaluasi bersama. Evaluasi dilakukan menggunakan pengujian International Organization for Standarization (ISO) 25010 aspek User Experience (UX). Pengujian tersebut dipilih karena ISO 25010 merupakan standar internasional dalam pengujian kualitas software [9].
3. HASIL DAN PEMBAHASAN
3.1 Perencanaan Desain
Sebelum perancangan front end aplikasi penjualan, dirumuskan dahulu konsep aplikasi sebagai berikut
1. Aplikasi yang dibuat memiliki 4 kategori pengguna, yaitu admin, ketua, bendahara, dan kasir 2. Aplikasi dapat digunakan oleh semua kasir
3. Aplikasi dibuat berbasis website
4. Aplikasi memiliki fitur laporan penjualan
3.2 Pemahaman dan Penentuan Konteks Penggunaan
Dari beberapa permasalahan yang ditemukan pada aplikasi iPos versi 4.0.5.3, maka ditentukan bahwa UI harus dirubah. Dalam rangka perubahan UI, peneliti menganalisis informasi yang telah didapatkan dari hasil wawancara dan observasi, diantaranya:
1. Aplikasi iPos versi 4.0.5.3 hanya memiliki 1 kategori pengguna yaitu admin. Untuk memfokuskan kinerja, maka dibuatlah aplikasi yang mencakup 4 kategori pengguna yaitu admin, ketua, bendahara, dan kasir
2. Aplikasi iPos versi 4.0.5.3 hanya dapat dioperasikan menggunakan PC client karena database tersimpan pada server, sehingga kesulitan memantau transaksi penjualan jika tidak sedang berada di KUD Jaya Makmur. Maka dari itu dibuatlah aplikasi penjualan berbasis web agar ketua dapat memantau transaksi penjualan kapanpun dan dimanapun asalkan terkoneksi dengan jaringan internet.
3.3 Spesifikasi Kebutuhan Penggunaan
Aplikasi akan dirancang sesuai kebutuhan pengguna, maka dirumuskanlah spesifikasi kebutuhan pengguna sebagai berikut:
296 Jatisi ISSN 2407-4322 Vol. 10, No. 3, September 2023, Hal. 291-303 E-ISSN 2503-2933
1. Kebutuhan fungsional
- Aplikasi ini memungkinkan pengguna untuk login dan logout
- Aplikasi ini memungkinkan pengguna untuk melihat dan men-download laporan penjualan
- Aplikasi ini memungkinkan pengguna untuk melakukan transaksi penjualan dan melihat riwayat serta detail penjualan
- Aplikasi ini memungkinkan pengguna untuk menambah, mengedit, dan menghapus detail penjualan
- Aplikasi ini memungkinkan pengguna untuk menambah, melihat, mengedit, dan menghapus kategori
- Aplikasi ini memungkinkan pengguna untuk menambah, melihat, mengedit, dan menghapus data supplier
- Aplikasi ini memungkinkan pengguna untuk menambah, melihat, mengedit, dan menghapus data barang
- Aplikasi ini memungkinkan pengguna untuk menambah, melihat, mengedit, dan menghapus data pembelian
- Aplikasi ini memungkinkan pengguna untuk menambah, melihat, mengedit, dan menghapus data anggota
- Aplikasi ini memungkinkan pengguna untuk menambah, melihat, mengedit, dan menghapus data kelompok
- Aplikasi ini memungkinkan pengguna untuk menambah, melihat, mengedit, dan menghapus data pengguna
2. Kebutuhan non fungsional
- Aplikasi harus dapat dioperasikan apabila terhubung ke jaringan internet - Aplikasi dapat dioperasikan pada semua jenis web browser
- Aplikasi dapat dioperasikan melalUI PC ataupun smartphone
- Pengguna diharuskan login terlebih dahulu agar dapat mengakses fitur yang tersedia pada aplikasi
- Aplikasi dapat loading dengan cepat
3.4 Pembuatan Desain
Tahapan pembuatan desain merupakan implementasi dari tahapan sebelumnya. Prototype front end aplikasi penjualan dapat dilihat pada gambar 2-12.
Gambar 2. Tampilan Halaman Login
Jatisi ISSN 2407-4322
Vol. 10, No. 3, September 2023, Hal. 291-303 E- ISSN 2503-2933 297
Gambar 3. Tampilan Halaman Dashboard
Gambar 4. Tampilan Halaman Kasir
298 Jatisi ISSN 2407-4322 Vol. 10, No. 3, September 2023, Hal. 291-303 E-ISSN 2503-2933
Gambar 5. Tampilan Halaman Kategori
Gambar 6. Tampilan Halaman Supplier
Jatisi ISSN 2407-4322
Vol. 10, No. 3, September 2023, Hal. 291-303 E- ISSN 2503-2933 299
Gambar 7. Tampilan Halaman Barang
Gambar 8. Tampilan Halaman Penjualan
300 Jatisi ISSN 2407-4322 Vol. 10, No. 3, September 2023, Hal. 291-303 E-ISSN 2503-2933
Gambar 9. Tampilan Halaman Pembelian
Gambar 10. Tampilan Halaman Anggota
Jatisi ISSN 2407-4322
Vol. 10, No. 3, September 2023, Hal. 291-303 E- ISSN 2503-2933 301
Gambar 11. Tampilan Halaman Kelompok
Gambar 12. Tampilan Halaman Pengguna
3.5 Evaluasi Desain
Pengujian UX dilaksanakan dengan memakai kuesioner User Experience Questionnare (UEQ) [10]. Kuesioner tersebut diberikan kepada 5 responden yang terdiri dari ketua, bendahara, dan 3 orang kasir. Pengujian ini dilakukan sebanyak dua kali agar dapat menjadi perbandingan antara aplikasi iPos Versi 4.0.5.3 dan aplikasi penjualan KUD Jaya Makmur.
Perbandingan skor kedua aplikasi tersebut terpadat pada gambar 13 dan 14.
302 Jatisi ISSN 2407-4322 Vol. 10, No. 3, September 2023, Hal. 291-303 E-ISSN 2503-2933
Gambar 13. Hasil Pengujian UX Aplikasi iPos versi 4.0.5.3
Gambar 14. Hasil Pengujian UX Aplikasi Penjualan Berbasis Web
4. KESIMPULAN
Pada penelitian ini, perancangan front end aplikasi penjualan KUD Jaya Makmur dibuat menggunakan metode Human Centered Design (HCD). Sedangkan pengujiannya menggunakan Standard ISO 25010 aspek User Experience (UX). Dibandingkan dengan aplikasi sebelumnya, aplikasi penjualan KUD Jaya Makmur terbukti lebih baik. MelalUI pengujian UX yang dilakukan terhadap aplikasi penjualan KUD Jaya Makmur maupun aplikasi iPos versi 4.0.5.3 dengan cara yang sama, didapatkan hasil bahwa aplikasi penjualan KUD Jaya Makmur lebih baik dalam segala aspek, baik aspek attractiveness (daya tarik), perspicUIty (kejelasan), efficiency (efisiensi), dependability (ketepatan), stimulation (stimulasi), maupun dalam aspek novelty (kebaruan). Hasil pengujian menunjukkan bahwa perancangan front end menggunakan metode HCD bisa menghasilkan desain yang bagus sesuai hasil pengujian UX yang telah dilaksanakan.
5. SARAN
Berdasarkan hasil implementasi aplikasi penjualan KUD Jaya Makmur, peneliti memberikan saran guna pengembangan aplikasi selanjutnya, diantaranya:
1. Aplikasi ini bisa dikembangkan dengan menambah fitur notifikasi kepada anggota KUD berupa sms ataupun email setelah transaksi pembelian dilakukan.
2. Aplikasi ini dapat dikembangkan dengan menambahkan fitur notifikasi per bulan berupa jumlah transaksi anggota kepada setiap ketua kelompok
UCAPAN TERIMA KASIH
Penulis mengucapkan terima kasih kepada prodi Teknik Informatika Universitas Riau dan pihak KUD Jaya Makmur yang telah menjembatani penulis dalam menyelesaikan penelitian ini.
Jatisi ISSN 2407-4322
Vol. 10, No. 3, September 2023, Hal. 291-303 E- ISSN 2503-2933 303
DAFTAR PUSTAKA[1] P. P. Arhandi, “Pengembangan Sistem Informasi Perijinan Tenaga Kesehatan Dengan Menggunakan Metode Back End dan Front End,” Teknol. Inf., Vol. 7, No. 1, pp. 39–48, 2016.
[2] I. Rochmawati, “Analisis User Interface Situs Web iwearup.com,” Visualita, Vol. 7, No.
2, pp. 31–44, 2019.
[3] Y. Firantoko, H. Tolle, and H. M. Az-zahra, “Perancangan User Experience Dengan Menggunakan Metode Human Centered Design Untuk Aplikasi Info Calon Anggota Legislatif 2019,” J. Pengemb. Teknol. Inf. dan Ilmu Komput., Vol. 3, No. 3, pp. 2798–
2806, 2019.
[4] M. D. Ariawan, A. Triayudi, and I. D. Sholihati, “Perancangan User Interface Design dan User Experience Mobile Responsive pada Website Perusahaan,” J. Media Inform.
Budidarma, Vol. 4, No. 1, p. 161, 2020.
[5] S. Saito and K. Ogawa, “International Standard ISO 9241-210,” Japanese J. Ergon., Vol. 30, No. 1, pp. 1–32, 1994.
.
[6] Muhammad Galang Ramadhan, “Perancangan Sistem Informasi Pos (Point of Sales) Berbasis Web Dengan Menggunakan Framework Codeigniter pada Pasar Swalayan,”
Electrician, Vol. 14, No. 3, pp. 76–83, 2020, doi: 10.23960/elc.v14n3.2155.
[7] R. Novelianti, “Sistem Informasi Akuntansi Penjualan Warung Serba Ada (Waserda) pada KUD Mina Jaya,” Ilmudata, Vol. 2, No. 2, pp. 1–12, 2022.
[8] A. Syaputra and N. Hadinata, “Pengembangan Sistem Informasi Penjualan pada Koperasi SMA Negeri 1 Rambang Kuang Dengan Menerapkan Metode Prototype,” J.
Inform., Vol. 08, No. 02, pp. 32–37, 2022.
[9] D. Lesmideyarti, S. Rochimah, and U. L. Yuhana, “Penyusunan dan Pengujian Metrik Operabilitas Untuk Sistem Informasi Akademik Berdasarkan ISO 25010,” J. Inspir., Vol.
7, No. 2, pp. 92–100, 2017.
[10] H. B. Santoso, M. Schrepp, R. Yugo Kartono Isal, A. Y. Utomo, and B. Priyogi,
“Measuring User Experience of The Student-Centered E-Learning Environment,” J.
Educ. Online, Vol. 13, No. 1, pp. 1–79, 2016.
