## PERANCANGAN UI PADA STOK BARANG MAKANAN BERBASIS WEBSITE DENGAN PENDEKATAN USER CENTERED DESIGN
(STUDI KASUS : PT.XYZ)
Novanto Ramadhan, Azhari Ali Ridha, Taufik Ridwan Fakultas Ilmu Komputer Universitas Singaperbangsa Karawang Jl. H.S. Ronggowaluyo Telukjambe Timur Karawang 41361 1910631250025@student.unsika.ac.id,

## ABSTRAK
Pada PT.XYZ terdapat permasalahan tentang penyimpanan data makanan dimana data tersebut sering terjadi kehilangan  data  yang  dapat  berakibatkan  fatal.  Penelitian  ini  bertujuan  untuk  merancang  antarmuka  pengguna (UI) yang responsif dan user-friendly untuk sistem manajemen stok barang makanan berbasis website di PT.XYZ. Pendekatan User-Centered  Design (UCD)  digunakan  dalam  perancangan  UI  untuk  memastikan  kesesuaian dengan kebutuhan pengguna. Tahap pemahaman pengguna dilakukan melalui wawancara, observasi, dan survei. Analisis  kebutuhan  dilakukan  untuk  mengidentifikasi  persyaratan  sistem.  Perancangan  UI  dilakukan  dengan mempertimbangkan prinsip-prinsip desain. Prototipe UI dievaluasi melalui pengujian dengan pengguna potensial. Hasilnya adalah UI yang responsif, intuitif, dan sesuai dengan kebutuhan pengguna PT.XYZ dalam manajemen stok barang makanan. Penelitian ini diharapkan dapat meningkatkan efisiensi dan kualitas layanan PT.XYZ serta menjadi acuan bagi perusahaan lain dalam merancang UI dengan pendekatan UCD.
Kata Kunci: UCD, UI, Sistem Berbasis Website.

## 1. PENDAHULUAN
Pada  saat  ini  teknologi  informasi  mengalami perkembangan  yang  cukup  pesat.  selain  dalam perkembangan  jenis  peralatan  teknolgi  maupun software aplikasi, perkembangan ini juga berdasarkan pada  semakin meratanya pengguna teknologi informasi  ini  [1]  dan  ui  adalah  bagian  penting  dari hampir  semua  sistem  komputer.  banyak  kecelakaan dan  bencana  telah  disalahkan  pada  desain  ui.  setiap hari,  UI  yang  buruk  menghasilkan  tingkat  kesalahan yang meningkat, biaya pelatihan yang lebih tinggi, dan throughput  yang  berkurang.  ini  menghabiskan  uang bisnis  dan  menyebabkan  stres  bagi  mereka  yang berinteraksi  dengan  uis,  pengguna  [2].  Antarmuka pengguna (UI) dari program  komputer adalah bagian yang  menangani  output  ke  tampilan  dan  input  dari orang  yang  menggunakan  program.  Itu  sisa  program disebut aplikasi atau semantik aplikasi [3].
Penelitian  ini  dibuat  untuk  mengatasi  masalah kehilangan  data  yang  sebelumnya  pernah  terjadi  dan mengakibatkan  kerugian  pada  stok  barang.  Sistem penyimpanan  data  yang  saat  ini  masih  menggunakan penyimpanan  biasa,  seperti  excel,  membutuhkan solusi yang lebih aman dan fleksibel. diharapkan dapat mempermudah  pengelolaan  data  dan  memastikan keamanan  informasi  yang  penting.  Sistem  ini  juga harus mampu menangani data secara cepat dan tepat, sesuai  dengan  kebutuhan  lingkup  pekerjaan  yang memerlukan informasi yang akurat dan tepat waktu.

## 2. TINJAUAN PUSTAKA
2.1. Perancangan
Pada  awalnya  sebuah  perancangan  adalah sebagai sebuah proses langkah dalam menunjukan data dan  struktur  dalam  program,  karakteristik  antarmuka
dan rincian prosedural dari hal yang berkaitan dengan kebutuhan  [4].  Menurut  Riyanto  perancangan  adalah tahap awal yang harus dipersiapkan untuk melakukan perancangan  dan  pengimplementasi  sebuah  aplikasi. [5].

## 2.2. User Interface
Dalam  pandangan  Wilbert  O.    Galitz, user interface merupakan  bagian  salah  satu  dari  sebuah komputer dan software yang dimana dapat dirasakan, dilihat, disentuh, diajak bicara, dan juga terakhir yang dapat dimengerti secara langsung oleh pengguna atau user .  dan  juga  desain user  interface yang  tampak secara  visual  tampak  dalam  aspek  visual  atau  yang dilihat oleh user atau pengguna dalam sebuah program atau produk yang dimana user interface tersebut juga harus  dapat  menyampaikan  fungsinya.  Dalam komponen yang menampilkan usability dalam desain yaitu mudah dipelajari, efisien, ingatan dari user dalam fungsi  aplikasi  setelah  beberapa  kali  digunakan, kesalahan dan juga kepuasan user [5].

## 2.3. Data
Definisi data adalah sebuah kumpulan huruf dan angka  dari  hasil  penelitian  yang  memiliki  sifat  atau karakteristik  yang  kita  teliti.  pada  umumnya  data memiliki  karakteristik  yang  bervariasi  seperti  (data berat  badan  dalam  suatu  kelompok  yang  memiliki berat 60 kg, 50kg, 75kg, dst) sehingga memunculkan sebuah  istilah  variabel.  variabel  juga  merupakan karakteristik yang dapat dinilai datanya bervariasi dari satu  pengukuran  ke  pengukuran  berikutnya.  Dalam pembagiannya  data  dibagi  menjadi  dua  contoh;  Data kuantitatif dan data kualitatif [6].

## 2.4. Stok Barang
Persediaan  Barang  Dagangan  adalah  elemen yang  sangat  penting  dalam  penentuan  harga  pokok perusahaan dagang partai besar. Persediaan didefinisikan sebagai aktiva berwujud yang diperoleh perusahaan  dan  yang  diperoleh  untuk  diproses  lebih dulu dan dijual [7].
2.5. Website Website atau  biasa  dikenal  dengan  WWW  atau juga dengan World Wide Web adalah sebuah layanan pengguna  komputer  untuk  dapat  terhubung  dengan internet. Website ini  dapat  menyediakan  pengguna dengan berbagai informasi lewat internet dari sekedar informasi “sampah” atau informasi yang tidak berguna sehingga  informasi  yang  serius  sekalipun. Website diartikan  dengan  kumpulan  halaman  yang  tujuannya untuk  menyampaikan  informasi  berupa  teks,  gambar diam  dan  gerak,  animasi,  suara,  atau  gabungan  dari semua  itu,  yang  membentuk  sebuah  rancangan  yang saling  terkait  dimana  masing-masing  dihubungkan dengan jaringan-jaringan halaman ( hyperlink ) [8].
2.6. Graphical user interface
Graphical  User  Interface (disingkat  sebagai GUI,  diucapkan  'gooey')  menyediakan  cara  yang mudah bagi manusia dan komputer untuk berinteraksi dan  berkomunikasi.  GUI  memanfaatkan  kemampuan grafis  komputer  untuk  membuat  komunikasi  ini menjadi lebih mudah dengan menyembunyikan detail bahasa pemrograman dari pengguna. Jenis antarmuka ini menggunakan jendela, ikon, menu, tombol, daftar drop-down,  kotak  dialog,  dan  lainnya  sebagai  sarana komunikasi  antara  manusia  dan  komputer.  Widget grafis  ini  biasanya  diaktifkan  saat  pengguna memanipulasinya  dengan  mouse  atau  perangkat penunjuk lainnya [9].
2.7. User Centered Design (UCD)
User  Centered  Design adalah  sebuah  metode desain  yang  pakai  oleh  banyak  industri  sebagai pengembangkan  produk  atau  jasa  untuk  memenuhi kebutuhan  atau  para user .      Dengan  kata  lain user centered design adalah sebuah proses pendekatan yang fokus utamanya pada pengguna dengan mempertimbangkan  dari  kebutuhan,  tujuan,  dan masukan  langsung  dari  pengguna  saat  ingin membangun sebuah program atau produk digital.
Untuk Penerapan user centered design sangatlah tidak mudah dikarenakan masih banyak yang kesulitan dalam menerapkan metode tersebut, karena kebanyakan  dari  industri  menerapkan  UCD  sebagai pengembangan  sistem  yang  digunakan  dan  sebagai pengembangan produk atau layanan di tujukan untuk digunakan  oleh  konsumen.  “ In  user  user-centered design, the users are the center focus .” arti dari kalimat
tersebut  adalah  sifat  tujuan,  konteks  dan  lingkungan produk  semua  berdasarkan  pengalaman user yang selanjutnya  dikumpulkan  untuk  model  perancangan user [10].

## 2.8. Figma
Webassembly memungkinkan pengembang membuat  pengalaman  berkualitas  desktop  di  web tanpa  mengorbankan  kinerja.  Semua  browser  utama menambahkan  dukungan  untuk  itu  dan  mencurahkan sumber  daya  yang  signifikan  untuk  membuatnya secepat mungkin.
Manfaat  terbesar  yang  kami  lihat  dari menggunakan  WebAssembly  di  Figma  adalah  waktu muat yang lebih cepat. Ini tidak mengherankan karena salah  satu  tujuan  utama  WebAssembly  adalah mengurangi waktu muat. Saat kami mengukur waktu muat  di  Figma,  kami  menyertakan  waktu  untuk menginisialisasi aplikasi kami, mengunduh file desain, dan render seluruh desain untuk pertama kalinya [11].

## 3. METODELOGI PENELITIAN
Penelitian  ini  menggunakan  metode  Analisis Data  dan  User-Centered  Design  untuk  merancang sebuah sistem atau produk teknologi. Metode Analisis Data  terdiri  dari  empat  tahap,  yaitu  Pengumpulan Data, Analisis, Perancangan, dan Desain. Pengumpulan  data  dilakukan  dengan  mempelajari studi kasus dari peneliti sebelumnya melalui jurnal dan buku  bacaan,  serta  melakukan  wawancara  dengan pihak  terkait.  Analisis  dilakukan  untuk  menentukan kebutuhan yang akan dimasukkan dalam sistem yang akan dibuat. Perancangan dilakukan untuk merancang sistem yang mudah digunakan. Terakhir, tahap Desain dilakukan dengan membuat desain website menggunakan aplikasi FIGMA.
Selain  itu,  metode  User-Centered  Design  juga digunakan  dengan  empat  tahap,  yaitu  Identifikasi Pengguna,  Kaji  Kebutuhan  Pengguna,  Rancang Solusi,  dan  Uji  Coba  serta  Evaluasi.  Metode  ini menempatkan  pengguna  sebagai  fokus  utama  dalam proses  desain,  mengidentifikasi  kebutuhan  dan preferensi  pengguna,  dan  memastikan  produk  yang dibuat  sesuai  dengan  harapan  mereka.  Rancangan penelitian  akan  melibatkan  teknik  pengumpulan  data berupa  wawancara  semi  struktur  dengan  panduan pertanyaan yang sudah dipersiapkan, serta brainstorming  dengan  pengguna  untuk  mengetahui kebutuhan  perancangan.  Dengan  pendekatan  ini, diharapkan produk atau sistem yang dihasilkan dapat memenuhi  kebutuhan  dan  memberikan  tingkat kepuasan yang tinggi bagi pengguna.
Gambar 1. Aur Penelitian.
4. HASIL DAN PEMBAHASAN
4.1. Understand Context Of use
Dalam desain berbasis pengguna ( user-centered design atau  UCD),  " context  of  use "  tahapan  untuk menentukan pemahaman berdasarkan lingkup kerja di PT.XYZ dan hal yang biasa dilakukan oleh orang yang terkait  disana  yang  dicari  langkah  awal  untuk penentuan desainya. dan berikut adalah proses dalam tahapan understand context of use .
Dengan  melakukan  tahapan  brainstorming kepada  user  yang  bersangkutan  di  PT.XYZ  untuk mengetahui  pemahaman  user  tentang  masalah  yang dialami dalam lingkup pekerjaannya dan menjadi hal yang  diteliti.  klasifikasi  pengguna  diberi  beberapa jenis:
1. User 1 : Admin
2. User 2 : Pengguna
Tugas penggunaan dibagi berdasarkan klasifikasi user:
1. User  1  :  Mengatur  data  yang  masuk  dan  keluar menentukan  data  dan  memberikan  keterangan dari  data  tersebut.  lalu  menyampaikan  perihal data  tersebut  ke  pihak  lain  yang  bersangkutan dalam pengolahan informasi data tersebut.
2. User 2 : Sebagai orang yang menerima informasi data  tersebut  dan  orang  yang  mengolah  data tersebut dan jika ada kesalahan pada data tersebut menginformasikan kepada user 1 untuk diperbaiki.
4.2. Specify user requirements
Berdasarkan  hasil  wawancara  yang  sudah dilakukan terhadap user di PT.XYZ yang menjelaskan bahwa  diperlukannya  fitur  yang  dapat  mencatat  stok makanan dan memberikan informasinya terhadap data tersebut,  dan  diperlukannya  desain  yang  mudah dipahami  dan  mudah  dimengerti,  berdasarkan
kebutuhannya user mampu  mencari  informasi  data makanan  berdasarkan  kriteria  yang  diinginkan,  juga diperlukannya  fitur  yang  dapat  memudahkan user untuk mengorganisir sebuah data pada sistem tersebut. dan  yang  terakhir  adalah user sering  mengalami kendala  dimana  data  tersebut  hilang  atau  tertimbun.

## 4.3. Design Solution
Pada  tahapan  desain  ini  adalah  rancangan  atau prototype desain  yang  dibuat  dalam  bentuk  langkah- langkah  mudah  dipahami  oleh user dan  untuk penyelesaian  masalah  atau  solusi  dengan  pembuatan Desain Prototype  Website  System  Inventory. pada tahapan ini dibagi menjadi beberapa bagian berikut:
a. Wireframe
Wireframe adalah  representasi  visual  sederhana dari antarmuka pengguna yang menampilkan tata letak dasar, struktur, dan elemen utama dari sebuah desain. Berikut adalah tampilan gambar dari wireframe nya:
Gambar 2. Wireframe Sistem
b. Userflow
Userflow , atau alur pengguna, adalah representasi visual dari serangkaian langkah-langkah atau interaksi yang  dijalankan  oleh  pengguna  saat  berinteraksi dengan  sebuah  situs  web.  Berikut  adalah  gambaran dari userflow- nya:
Gambar 3. Userflow login
pada  Gambar  3  menunjukan  Userflow  login dengan langkah awal memasukan data validasi ID dan Password  lalu  klik  tombol  login  dan  jika  berhasil berpindah ke halaman profile. dengan adanya userflow ini pengguna memahami cara menggunakan situs web
Pada Gambar 4 menunjukan alur userflow untuk menambahkan  data  makanan  dimana  yang  diawali dengan  pergi  ke  halaman  inventory,  lalu  klik  tombol input,  di  halaman  input  data  menampilkan  beberapa kolom  yang  perlu  diisi  untuk  dapat  memasukan datanya, lalu setelah selesai klik tombol save dan data tersimpan
Gambar 5. Userflow Mengedit data makanan
Pada  Gambar  5  merupakan  alur  userflow  untuk mengedit  data  makanan,  yang  diawali  dengan  pergi kehalaman  inventory,  lalu  klik  tombol  edit, selanjutkan muncul halaman edit dimana kita memilih field/value data yang ingin kita ubah, lalu klik tombol simpan atau save setelahnya data tersimpan
Gambar 6. Userflow Menghapus data makanan
Pada  Gambar  6  merupakan  alur  userflow  untuk menghapus data makanan, yang diawali dengan pergi ke  halaman  inventory,  lalu  klik  tombol  edit, selanjutnya  muncul  halaman  edit  dimana  kita  dapat memilih data mana saja yang ingin kita hapus, lalu klik tombol simpan atau save setelahnya data tersimpan.
Gambar 7. Userflow Mengirim Pesan
Pada Gambar 7 menunjukan alur userflow untuk mengirim  pesan  dengan  tahapan  awal  membuka halaman  inbox,  lalu  klik  menu  pesan  dan  muncul tampilan  pesan  lalu  pilih  orang  yang  ingin  dikirim pesannya. setelah itu masukan pesan ke dalam kolom chat lalu klik tombol kirim, setelahnya pesan terkirim.
Gambar 8. Userflow Mengedit pesan
Pada Gambar 8 menunjukan alur userflow untuk mengedit  pesan  dengan  tahapan  awal  membuka
halaman  inbox,  lalu  klik  menu  terkirim  dan  muncul tampilan  pesan  yang  sudah  terkirim  dan  pilih  pesan yang ingin di edit lalu klik edit dan isi pesan baru, lalu klik tombol save, dan pesan terkirim ulang.
Gambar 9. Userflow menghapus pesan
Pada Gambar 9 menunjukan alur userflow untuk menghapus  pesan  dengan  tahapan  awal  membuka halaman  inbox  lalu  pilih  menu  terkirim,  lalu  pilih pesan  yang  ingin  dihapus,  setelahnya  klik  tombol hapus lalu pesan terhapus.

## 4.4. Visual Design system
Pada  tahapan  Visual  Design  ini  adalah  tahapan untuk  merancang  lebih  rinci  tentang  Desain  user interface untuk proses interaksi visual antara pengguna dan sistem. dan desain tersebut di buat menggunakan aplikasi Figma sebagai Tools Design interface. Berikut adalah  gambaran  design  UI  Stok  Barang  Makanan Berbasis Website.
Gambar 10. Visual Design System

## 4.5. User Interface Design
Berdasarkan  proses  yang  sebelumnya  sudah dilakukan  untuk  design  solution  ideate,  prototyping, wireframe,  userflow,  visual  design  system,  dan  yang sekarang adalah user interface design yang  bertujuan untuk  menampilkan  hasil  UI  yang  sudah  dikembang selama  ini  dan  dengan  kerangka  yang  sebelumnya sudah  dibuat.  Berikut  adalah  beberapa  tampilan  dari user  interface  yang  dibuat  dari  penelitian  ini.

## Gambar 11. Homepage
Pada Gambar 11 merupakan gambar Home page dimana  dengan  cara  menekan  menu  “hamburger”  di sebelah kanan atas menampilkan halaman utama dari website  inventory  system  untuk  PT.XYZ  terdapat
pilihan menu Profile, Inbox, Overview, Inventory dan menampilkan nama akun yang terhubung.
Gambar 12. Halaman Login
Pada  Gambar  4.12  merupakan  gambar  halaman login  pada  website  inventory  system  dimana  untuk pengguna  dapat  menggunakan  situs  tersebut  dengan memasukan  validasi  akun  berupa  ID  dan  Password akun.
Gambar 13. Halaman Profile
Pada  Gambar  13  merupakan  gambar  dari halaman  profile  dimana  halaman  tersebut  dapat digunakan  oleh  pengguna  untuk  mengisi  informasi data pribadinya dan mengeluarkan akun atau logout.
Gambar 14. Halaman Inventory
Pada  Gambar  14  merupakan  gambar  dari halaman inventory dimana halaman tersebut merupakan  Halaman  CRUD  (Create,  Read,  Delete, Update)  dimana  halaman  untuk  pengguna  dapat menambahkan,  menghapus,  atau  memperbarui  data makanan yang ada di halaman Inventory
Gambar 15. Halaman Inventory (Memasukan Data)
Pada  Gambar  15  menjelaskan  tentang  tahapan untuk  memasukan  data  kedalam  inventory  system dimana dengan pertama user mengklik tombol “input” lalu berpindah ke halaman input setelah itu cantumkan data yang ingin dimasukan dengan keterangannya lalu klik tombol “save” dan data berhasil tersimpan.
Gambar 16. Halaman Inventory (Mengupdate & Menghapus data)
Pada  Gambar  16  menjelaskan  tentang  tahapan untuk  menghapus  atau  mengedit  data  ke  dalam inventory  system  dimana  dengan  pertama  user mengklik tombol “edit” lalu berpindah ke halaman edit setelah itu pilih data yang ingin di ganti atau di hapus lalu  klik  tombol  “save”  dan  data  berhasil  tersimpan atau terhapus.
Pada  Gambar  17  merupakan  gambar  dari halaman Overview dimana halaman tersebut digunakan  untuk  menampilkan  beberapa  rangkuman detail data yang diperlukan saja, data item terbanyak, item  yang  sering  digunakan,  dan  item  secara keseluruhan.

## Gambar 18. Halaman Inbox
Pada  Gambar  18  merupakan  gambar  halaman Inbox  yang  digunakan  untuk  pengguna  dapat mengirim  pesan  atau  perintah  dari  1  pengguna  dan pengguna  lainnya  untuk  menambahkan,  menghapus, atau mengedit data di halaman inventory.
Gambar 19. Rancangan Prototype Inventory System
Pada  Gambar  19  merupakan  gambar  rancangan prototype inventory system yang dibuat menggunakan aplikasi  Figma.  dan  berdasarkan  gambar  tersebut menampilkan gambaran alur sistem pada perancangan inventory system tersebut.

## 4.6. Evaluate Against Requirements
Evaluasi  terhadap  persyaratan  (evaluate  against requirements)  adalah  tahapan  dalam  penelitian  untuk mengetahui  proses  pengerjaan  prototype  tersebut terjadi kendala atau tidak. Penerapanya menggunakan metode  Moderated  Usability  Testing.  Berikut  adalah tahapan  proses  untuk  Moderated  Usability  Testing.
Gambar 20. Alur Usability Testing
4.7. Ask Question Ask Question adalah sebuah pertanyaan yang di tanyakan kepada user di PT.XYZ saat melakukan test prototype yang  diarahkan  oleh  moderator  untuk mengetahui  bagaimana  tanggapan  dari  pengguna secara langsung.

## 4.8. Moderated Usability Testing
Moderated  Usability  Testing ini  dilaksanakan secara  langsung  dengan user yang  bersangkutan  dari PT.XYZ  dimana  pelaksanaan  testing  tersebut  di arahkan  oleh  moderator  agar  testing  prototype  nya berjalan lancar.
Tabel 1. Pertanyaan dan jawaban No Pertanyaan Jawaban 1 Apakah antarmuka pengguna (UI) sistem inventaris makanan ini mudah dipahami dan intuitif bagi pengguna yang baru? sangat mudah untuk digunakan walau diawal masih mencoba untuk mengenal penggunaan atau sistemnya. 2 Apakah pengguna dapat dengan mudah menemukan dan mengakses fitur-fitur penting dalam sistem inventaris makanan ini? sangat mudah dengan sekali klik bisa langsung berpindah ke halaman yang diinginkan dan setiap fitur mudah untuk dipahami. 3 Bagaimana tingkat kejelasan informasi yang ditampilkan dalam UI sistem inventaris makanan ini? Apakah pengguna dapat dengan cepat memahami dan menafsirkannya? sangat mudah dikarenakan saat ingin mencari data makanan tersedia fitur“search” untuk mencari data makanan yang di inginkan seperti data jenis dan jumlahnya. 4 Bagaimana tingkat kejelasan informasi yang ditampilkan dalam UI sistem inventaris makanan ini? Apakah pengguna dapat dengan cepat memahami dan menafsirkannya? cukup jelas dan langsung tanpa banyak informasi yang tidak diperlukan dan mudah untuk menafsirkan 5 Apakah pengguna merasa bahwa sistem inventaris makanan ini memiliki tata letak yang terorganisir dengan baik? Apakah informasi yang ditampilkan dalam UI mudah dikelompokkan dan diakses dengan nyaman? pada penggunaan website ini tata letaknya ada sedikit kekurangan dan tak mudah terlihat namun sudah bagus di bagian pilihan menu, namun informasinya mudah diakses dan sudah terkelompok
6 Bagaimana pengguna menilai kegunaan fitur pencarian dalam sistem inventaris makanan ini?
untuk penilaian fitur sangat baik dan bagus karena untuk pencarian data sangat mudah dan efisien.
No Pertanyaan Jawaban Apakah mereka dapat dengan mudah menemukan item makanan tertentu dengan menggunakan fitur pencarian? 7 Apakah ada fitur atau fungsi dalam UI sistem inventaris makanan ini yang dianggap pengguna tidak perlu atau tidak berguna? pada bagian inbox mungkin kurang berguna di karena masih bisa penggunaan sosial media lain, dan jika di kembangkan lebih lagi bisa dapat lebih baik . 8 Bagaimana pengguna menilai konsistensi desain antarmuka pengguna (UI) dalam sistem inventaris makanan ini? Apakah elemen-elemen desain dan pola-pola yang digunakan secara konsisten di seluruhnya? untuk warna dan desain sangat menarik dan enak dilihat dan konsistensinya cukup tidak terlalu mencolok. 9 apakah ada kesulitan khusus yang ditemui pengguna saat menggunakan UI sistem inventaris makanan ini? Jika ada, apa penyebabnya dan bagaimana hal tersebut dapat
diperbaiki? dibagian pilihan menu yang ada di atas mungkin kurang terlihat dan tertutup. untuk perbaikannya mungkin dibuat tertampil langsung saja tanpa harus ada menu “Hamburger” nya.
Tabel 2. Urutan Pengujian Severity Ratings No Pengujian Severity Ratings 0 1 2 3 4 1 Melakukan Login dan Logout   2 Melakukan Input data makanan   3 Melakukan Edit data makanan   4 Melakukan Hapus data makanan   5 Melakukan Pencarian data makanan   6 Melakukan Kirim Pesan   7 Melakukan Edit pesan   8 Melakukan Hapus Pesan  

## 4.9. Pembahasan
Berdasarkan  Penelitian  ini  yang  telah  dilakukan berhasil  merancang  sistem User  Interface atau  (UI) pada sistem stok barang makanan PT.XYZ menggunakan  pendekatan User-Centered  Design (UCD). Dengan evaluasi menggunakan cara moderated usability  testing menunjukkan  bahwa  sistem  UI  yang dirancang memberikan kemudahan penggunaan, efisiensi,  dan  kepuasan  pengguna  yang  positif  secara umum.
Dengan metode pengujian menggunakan severity ranting dimana  hasil  pengujian  dibagi  menjadi  4 kategori  dimana  kategori  pertama  ditampilkan  dengan angka 1 dengan penjelasan tidak ada masalah, program dapat berjalan dengan baik dan nyaman digunakan, dan kategori  terakhir  adalah  angka  4  dengan  penjelasan memiliki kesalahan fatal yang membuat pengguna tidak dapat  menggunakan  programnya.  Dan  rekomendasi perbaikan  dan  pengembangan  yang  dihasilkan  dari penelitian ini dapat membantu PT.XYZ meningkatkan kualitas UI dan pengalaman pengguna dalam mengelola stok barang makanan secara efektif.

## 5. KESIMPULAN
Penelitian berjudul "Perancangan UI pada Stok Barang Makanan Berbasis Website dengan Pendekatan  User-Centered  Design"  menghasilkan kesimpulan  bahwa  untuk  menjaga  pengelolaan  data barang  di  PT.XYZ  agar  terorganisir  dengan  baik, diperlukan  antarmuka  pengguna  yang  mudah dipahami  dan  intuitif.  Fitur  pencarian  yang  efektif juga menjadi perhatian penting agar pengguna dapat dengan  mudah  menemukan  item  yang  mereka  cari. Konsistensi  desain  antarmuka  pengguna  juga menjadi  faktor  kunci  agar  pengguna  dapat  dengan cepat beradaptasi. Informasi yang ditampilkan dalam UI  harus  jelas  dan  mudah  dipahami  untuk memudahkan  pengguna  dalam  mengelola  data makanan.
Dengan  menggunakan  metode  user-centered design,  perancangan  UI  yang  baik  dapat  memenuhi kebutuhan pengguna dengan menyediakan fitur-fitur yang  mudah  diakses  serta  tata  letak  yang  intuitif. Hasilnya,  pengguna  dapat  dengan  cepat  dan  efisien mengelola  data  barang,  melakukan  pencarian informasi,  serta  menjalankan  tugas-tugas  terkait pengelolaan  inventaris.  Keseluruhan  sistem  UI  ini telah  memenuhi  kriteria  dan  keinginan  pengguna, dengan  sistem.  Hery  Nuryanto,  S.Kom. Sejarah Perkembangan  Teknologi  Dan  Komunikasi .  PT. Balau Pustaka (Persero)

## DAFTAR PUSTAKA
[1] Debbie Stone, Caroline Jarrett, Mark Woodroffe, Shailey Minocha. (n.d). User Interface Design and Evaluation. (p. xxiii)
[2] Myers, B. A. (n.d.). User Interface Software Tools . www.cs.cmu.edu:
[3] Tania,  V.  R.  (2020).  Perancangan  Sistem Informasi  Penggajian  Karyawan    Pada  Cv.  Tri
Multi  Jaya  Yogyakarta.  Jurnal  Sistem  Informasi Dan Sains Teknologi, 2(1). https://doi.org/10.31326/sistek.v2i1.669
[4] Rahmasari, T., Studi, P., Akuntansi, K., Kunci, K., & Abstrak, : (n.d.). Perancangan Sistem Informasi Akuntansi  Persediaan  Barang  Dagang  Pada Toserba Selamat Menggunakan Php Dan Mysql .
[5] Sutanto Priyo Hastono. (2006). Analisis Data . (p. 3–5)
[6] Amelia, E., Safitri, D., Akuntansi, S. I., & Sipil, T. (n.d.).  Sistem  Laporan  Stock  Barang  Material
Pada  PT  Lionel  Arikanami  Konstruksi.  In Ilmudata.org (Vol. 1, Issue 3).
[7] Ali,  S.,  &  Ambarita,  A.  (2016).  Sistem Informasi Data Barang Inventaris Berbasis Web Pada  Kejaksaan  Negeri  Ternate.  Ijis  - Indonesian  Journal  On  Information  System, 1(1), 31. https://doi.org/10.36549/ijis.v1i1.5
[8] Kaligis,  D.  L.,  &  Fatri,  R.  R.  (2020). Pengembangan  Tampilan  Antarmuka  Aplikasi Survei  Berbasis  Web  Dengan  Metode  User Centered  Design. Just  It :  Jurnal  Sistem Informasi, Teknologi Informasi Dan Komputer ,
10 (2),
106.
https://doi.org/10.24853/justit.10.2.106-114
[9] Mukti,  Y.  (2018).  Rancang  Bangun  website Sekolah  Dengan  metode  user  centered  design (UCD).  Jurnal  Ilmiah  Betrik,  9(02),  84–95. https://doi.org/10.36050/betrik.v9i02.3
[10] https://www.figma.com/blog/