PERANCANGAN USER INTERFACE PADA SISTEM SELF ORDER SALADIN DENGAN METODE HUMAN CENTERED DESIGN
Lya Mulyadi1), Apriade Voutama2), Azhari Ali Ridha 3) Fakultas Ilmu Komputer, Universitas Singaperbangsa Karawang
Email: lyamulyadi05@gmail.com
Fakultas Ilmu Komputer, Universitas Singaperbangsa Karawang Email: apriade.voutama@staff.unsika.ac.id
Fakultas Ilmu Komputer, Universitas Singaperbangsa Karawang Email: Azhari.ali@staff.unsika.ac.id
z Abstrak
Saladin merupakan salah satu toko yang menjual salad buah dan sedang berada di puncaknya saat ini.
Saladin saat ini sudah memiliki beberapa cabang yang ada di beberapa kota. Dengan banyaknya konsumen dan cabang yang ada, membuat terkadang pemesanan di tempat terdapat salah satu kendala. Banyaknya pelanggan membuat penjaga gerai di sana kerap kesulitan dalam menangani pesanan yang ada. Dalam rangka membantu proses transaksi pemesanan yang ada di toko, maka dirancanglah sebuah UI untuk sebuah sistem Self Order yang membuat pelanggan dapat memesan sendiri pesanan mereka sehingga dapat mengurangi antrian di kasir. Perancangan ini menggunakan metode HCD, di mana pengguna terlibat langsung dalam proses peracangan prototype ini..
Keywords: self order, hcd, user interface.
PENDAHULUAN
Salad merupakan salah satu makanan yang bisa dibilang mudah dibuat, paktis dan mneyehatkan. Dewasa kini semakin banyak penggemar dan semakin banyak pula toko yang menjual salad sebagai menu utama mereka. Salah satu dari toko yang menjual salad ini adalah Saladin, di mana Anindia sebagai owner merintis tokonya ini dari awal dengan menjajakannya kepada teman sekelasnya hingga berkembang menjadi toko yang memiliki beberapa pelanggan di berbagai daerah.
Pada jurnal ini akan dibahas terkait rancangan UI yang akan membantu owner dalam mengatur pesanan dan mengurangi atau menghindari terjadinya masalah pada sistem antrian konvesional dan mempermudah pekerjaan pekerja di sana. Sebelumnya pada toko offline, di mana pelanggan datang untuk memesan dan harus menunggu bersama dirasa masih kurang efektif [9]. Di sana pelanggan yang terkadang tidak bisa ditangani dengan maksimal
karena masih kurangnya tenaga pekerja yang juga harus membuat salad dan beberapa pesanan lain di saat bersamaan.
Dengan melihat permasalahan yang sudah dijelaskan sebelumnya, dibuatlah sebuah rancangan UI dari produk self order yang nanti akan digunakan untuk menangani masalah antrian dalam hal pemesanan produk dengan memehatikan tampilan antarmuka pengguna yang merupakan salah satu aspek penting dalam aplikasi sebagai penghubung manusia dengan sistem [6]. Sistem ini akan diterapkan pada konsumen yang akan melakukan pemesanan sendiri langsung melalui sistem. Diharapkan nantinya sistem ini akan membantu proses pemesanan dan transaksi yang ada di Saladin dengan fitur dan tampilan yang sesuai dengan kebutuhan di sana. Penggunaan sistem ini tidak lain mengikuti perkembangan teknologi yang menawarkan berbagai inovasi yang dapat memberikan banyak kemudahan kepada pengguna [10]. Teknologi ini sangat penting bagi
perusahaan atau pengguna untuk mengelola informasi yang bisa memfasilitasi pekerjaan [8].
Berdasarkan uraian sebelumnya, peneliti ingin menjelaskan terkait bagimana pelayanan dapat berjalan lebih efektif dalam hal pemesana sehingga dapat meningkatkan tingkat pelayanan pada pelanggan? Dengan batasan di mana peneliti hanya memberikan saran sistem bukan membuat sistem.
1.2 Referensi
1.2.1 Human Centered Design
HCD atau Human Centered Design merupakan salah satu pendekatan yang digunakan perancang dalam merancang user interface sebuah sistem. Human Centered Design ini memfokuskan pada pendekatan di mana pengguna secara umum berperan langsung dalam proses peracangan. Selain Human Centered Deisgn ada juga User Centered Design di mana pendekatan UCD berfokus pada calon pengguna yang lebih spesifik, misalnya jenis kelamin ataupun rentang usia [2].
Pada perancangan interface untuk self order di Saladin ini dipilih HCD dikarenakan pada perancangan ini diperlukan pendekatan empati terhadap pengguna, sehingga diri perancang di sini ditempatkan pada posisi menjadi pengguna yang akan menggunakan sistem [6].
Pada perancangan ini yang pertama akan ditemukan masalah apa yang terjadi pada objek lalu tahap kedua akan mengelola dan mencari solusi terkait permasalahan yang sudah ditemukan sebelumnya.
Selanjutnya perancang akan mulai merancang dan membuat portotype dari rancangan yang Ia buat lalu dilakukan testing atau pengujian terhadap prototype. Terakhir,
perancang akan
mengimplementasikan
rancangannya pada objek. Akan tetapi, pada jurnal ini hanya akan mencakup sampai proses prototype
atau testing untuk
pengimplementasian akan diserahkan kepada pemilik dari Saladin
1.2.2 User Interface
Dalam pengembangan sebuah sistem, user interface merupakan salah satu faktor yang paling berpengaruh terhadap pengalaman pengguna selama menggunkaan sistem. Tampilan atau interface yang diberikan harus sesuai, menarik dan tidak mengganggu pengguna selama menggunakan sistem yang dapat berupa bentuk, warna dan juga tulisan yang dirancang semenarik mungkin bagi pengguna [7].
User interface atau yang sering disingkat dengan UI ini adalah di mana sistem dan pengguna saling berinteraksi. Saat di mana pengguna sistem bekerja sesuai dengan perintah yang diberikan oleh pengguna [3]. User interface adalah tampilan antar muka yang berbentuk virual yang diberikan oleh sebuah sistem [1].
Dalam pengembangan sebuah start up, user interface ini sangat penting, di mana Ia akan memberikan kesan awal bagi para calon pengguna. Kesan yang baik ini selain untuk memberikan kenyamanan untuk pengguna saat menggunakannya, juga bisa menjadi nilai lebih untuk daya saing sistem atau start up [2]. Tampilan dari user interface ini tersusun dari bentuk, warna dan juga tulisan yang sudah dirancang semenarik mungkin untuk menraik pengguna karena rancangan yang menarik dapat menarik minat pengguna dari user interface juga dapat dilihat nilai dari sistem yang dibuat mengenai kemudahan dalam penggunaan dan keefektifannya [1]. User interface ini juga mengalami perkembangan, di mana semua yang masih bergaya tulisan yang berubah saat ini
menjadi GUI atau Graphical User Interface dengan dukungan dari compiler, Visual Programming [4].
1.2.3 Self Order
Dewassa kini penggunaan sistem self order bukan lagi hal yang asing dikalangan gerai dan pengguna.
Terutama pada gerai-gerai yang sudah memiliki nama dan memiliki peanggan tetap. Self order atau dalam bahasa indonesia adalah pemesanan sendiri merupakan salah satu sistem yang diciptakan untuk mengurangi galat atau kesalahan yang mungkin atau tidak diharapkan terjadi selama kegiatan transaksi jual beli.
Penggunaan sistem self order ini juga tidak terlepas dari peran UI atau user interface yang membantu pengguna dalam menjalankan sistem. UI yang sesuai dapat menarik minat pengguna dan membantu pengguna dalam menyelesaikan masalahnya. Selain pengguna, adanya self order ini juga membantu pihak owner dalam menjalankan sistem transaksi jual- beli yang terjadi di gerai mereka.
Penggunaan sistem ini diharapkan dapat membantu pegawai dan owner dalam menjalankan alur kegiatan yang terjadi di gerai.
Self order sudah banyak diterapkan di beberapa restoran cepat saji yang sering kita temui.
Penggunaannya juga sudah mendapatkan feedback yang baik dari pengguna yang sudah merasakan sendiri kemudahan dan kepraktisan yang diberikan sistem self order kepada mereka.
Mengurangi antrian, memberikan urutan pesanan yang sesuai dan membantu dalam hal menyusun pesanan merupakan beberapa keuntungan yang diberikan sistem self order ini kepada kedua belah pihak yang menggunakannya.
Pada rancangan ini, peneliti akan mencoba merancang tampilan user
interface yang menarik, efektif dan sesuai dengan kebutuhan objek, di mana Saladin di sini sebagai objek yang akan mencoba untuk menggunakan rancanagan UI dari self order yang akan dirancang.
METODE PENELITIAN
Seperti yang dijelaskan sebelumnya, dalam penelitian ini, peneliti menggunakan metode HCD, di mana di dalamnya terdapat 4 (empat) langkah yang akan digunakan [2], di antaranya :
1) Tahap Analisa
Pada tahap ini peneliti akan menganalisis kebutuhan pengguna dan keinginan yang sesuai dengan harapan mereka. Pada tahapan awal ini akan dilakukan wawancara terkait kebutuhan sistem yang akan dirancang.
2) Tahap Desain
Setelah data-data yang dikumpulkan dari tahap pertama, peneliti mulai merancang prototype dari sistem self order ini. Pada perancangan ini, peneliti menggunakan Figma sebagai alat bantu perancangan. Pada proses pembuatan rancangan prototype ini perancang dapat menambang atau mengurangi rancangan sesuai dengan keinginan dan kebutuhan pengguna sehingga dapa menghemat waktu dan biaya [3].
3) Tahap Evaluasi
Pada tahapan ini, rancangan prototype tadi akan diuji coba pada pengguna, karena perancangan ini menggunakan metode HCD yang melibatkan secara langsung pengguna (umum) dalam proses perancangannya. Dalam tahapan ini akan dilakukan beberapa kali untuk mendapatkan hasil yang sesuai dan memuaskan untuk pengguna.
Nantinya, prototype ini akan diperlihatkan dan diujikan pada calon pengguna dan mereka akan memberikan feedback pada perancang sebagai masukan untuk bahan revisi nantinya.
4) Tahap Impelementasi
Pada tahap ini, rancangan yang sudah dievaluasi sudah berupa sistem berbasis web yang akan siap digunakan oleh pengguna. Akan tetapi, pada jurnal ini hanya sampai tahap evaluasi berupa rancangan prototype dari sistem yang akan dibangun nanti.
HASIL DAN PEMBAHASAN
Berikut ini adalah hasil dari rancangan prototyoe menggunakan Figma dari sistem self order Saladin :
1) Tampilan awal
Berikut ini adalah tampilan awal dari halaman pemesanan mandiri atau self order pada Saladin. Pada halaman ini adalah, halaman pertama yang berinteraksi dengan pengguna. Di dalam halaman ini terdapat 3 menu yang bisa dipilih pengguna, yaitu makanan, minuman dan paket.
Gambar 1. Halaman Awal 2) Menu kategori (makanan)
Pada halaman ini adalah halaman lanjutan dari halaman utama sebelumnya jika pengguna memilih masuk ke menu makanan.
Pada halaman menu makanan akan ditampilkan kategori dari makanan dan beberapa menu rekomendasi dari Saladin.
Gambar 2. Halaman Menu Kategori
3) Option
Halaman ini adalah menu ‘opsi’ yang bisa dipilih pengguna untuk melakukan jalan pintas ketika pengguna ingin melihat ke menu lain jika sudah memasuki salah satu menu sebelumnya. Menu ‘opsi’ berbentuk garis tiga yang terdapat di ujung kiri atas halaman.
Gambar 3 Halaman Option
4) Menu makanan
Halaman ini adalah halaman lanjutan jika pengguna telah memilih kategori pada halaman menu kategori makanan sebelumnya. Hal ini juga berlaku pada menu kategori minuman. Jika pengguna ingin melihat detail menu maka pengguna bisa menyentuh tombol ‘Detail’ dan apabila pengguna ingin langsung memesan bisa menyentuh tombol keranjang. Akan ditampilkan foto dari menu pada tiap kotak.
Gambar 4. Halaman Menu Makanan 5) Detail menu
Halaman ini adalah halaman yang menampilkan apabila pengguna menyentuk
tombol ‘Detail’ pada menu. Akan ditampilkan foto, bahan, topping dan harga dari menu.
Pengguna bisa menambahkan topping dengan menyentuh tombol ‘+’ atau langsung memesan dengan menyentuh tombol pesan.
Gambar 5. Halaman Detail Menu
6) Keranjang
Pada halaman ini menampilkan menu yang sudah dipilih dan dimasukan ke keranjang yang siap untuk dibayar. Pada halaman ini pengguna bisa melihat detail pemesanan mereka, total pesanan mereka, memilih metode pembayaran dan nanti akhirnya akan mendapatkan nomor antrian yang diakhiri dengan mencetak nota untuk pengambilan pesanan.
Gambar 6. Halaman Keranjang 7) Pembayaran
Halaman ini adalah halaman lanjutan dari halaman keranjang sbeelumnya. Pada halaman ini adalah detail pembayaran yang dipilih oleh pengguna. Terdapat beberpa pilihan yang dapat dipilih pelanggan untuk melakukan pembayaran.
Setelah memilih metode pembayaran, pengguna dapat menyentuh tombol ‘konfirmasi’ untuk mengakhiri proses pembayaran yang selanjutnya akan diarahkan untuk ke halaman detail pemesanan yang berarti proses pemesanan telah selesai.
Gambar 7. Halaman Menu Pembayaran
Gambar 8. Halaman Konfirmasi Pembayaran 8) Status pesanan
Status pemesanan ini adalah halaman yang akan tampil ketika pengguna sudah melakukan pembayaran dan mencetak nota.
Setelah itu pengguna akan diarahkan ke halaman awal yang menandakan bahwa pemesanan selesai dan pengguna tinggal menunggu pesanan siap disajikan.
Gambar 9. Halaman Antrian.
KESIMPULAN
Dalam perancangan UI pada sistem self order ini, pengguna ikut langsung dalam proses perancangan, di mana mereka membantu memberikan masukan dalam proses perancangan sehingga menjadi masukan bagi perancang untuk terus mengembangkan rancangannya sebelum menemukan hasil akhir yang sesuai dengan harapan.
Pada sistem self order ini dapat meringankan beban kerja pegawai yang harus mencatat dan menerima pesanan secara konvensional menjadi tersistem melalui sistem ini. UI yang dirancang pada sistem ini juga dimaksimalkan untuk bisa memenuhi kebutuhan dan bisa dengan mudah dipahami juga dioperasikan oleh kedua belah pihak.
REFERENSI
[1] Y. Lestari, A. Istiani, N. D. Farhanah, and M.
A. Yaqin, “Survei Metrik Kompleksitas User Interface Menggunakan Sistematic Literature Review,” Ilk. J. Comput. Sci.
Appl. Informatics, vol. 4, no. 2, pp. 146–161, 2022, doi: 10.28926/ilkomnika.v4i2.463.
[2] M. Multazam, “Perancangan User Interface dan User Experience pada Placeplus menggunakan pendekatan User Centered Design,” Univ. Islam Indones., vol. 1, p. 8, 2020, [Online]. Available:
https://journal.uii.ac.id/AUTOMATA/articl e/view/15528/10233
[3] M. S. Hartawan, “Desain User Interface Dan User Experience,” vol. 02, pp. 43–47, 2022.
[4] E. R. Subhiyakto, Y. P. Astuti, and L.
Umaroh, “KONSTELASI: Konvergensi Teknologi dan Sistem Informasi Perancangan User Interface Aplikasi Pemodelan Perangkat Lunak Menggunakan Metode User Centered Design,”
KONSTELASI Konvergensi Teknol. dan Sist. Inf., pp. 145–154, 2021.
[5] C. Lim, A. C. Sumarlie, F. Fernando, and D.
A. Haris, “Perancangan Ui/Ux Aplikasi Absensi ‘Jikan’ Dengan Metode User Centered Design,” Comput. J. Comput. Sci.
Inf. Syst., vol. 5, no. 1, p. 16, 2021, doi:
10.24912/computatio.v1i1.12992.
[6] M. F. Widiyantoro, N. Heryana, A.
Voutama, and N. Sulistiyowati,
“Perancangan UI / UX Aplikasi Toko Kue Dengan Metode Design Thinking,” vol. 7, no. 1, pp. 1–10, 2022.
[7] G. Dwi, P. Haryanto, and A. Voutama,
“PERANCANGAN UI / UX SISTEM INFORMASI PENYEWAAN MOBIL BERBASIS MOBILE DENGAN METODE DESIGN THINKING,” vol. 8, no. 1, pp. 23–
30, 2023.
[8] A. A. Yulianti, A. Solehudin, and A.
Voutama, “Perancangan Pembuatan Aplikasi Rental Kendaraan Berbasis Website,” vol. 15, no. 1, pp. 1–8, 2022.
[9] A. Voutama, A. Susilo, Y. Irawan, and E.
Novalia, “DESIGN OF E-COMMERCE DISTRO USING RAPID APPLICATION DEVELOPMENT ( RAD ) MODEL,” pp.
363–370.
[10] Z. Mubarok and A. Voutama, “Jurnal Pendidikan dan Konseling,” vol. 4, pp.
6368–6380, 2022.
