## USER INTERFACE DAN UJI USABILITY
MENGGUNAKAN PENDEKATAN HUMAN-

## CENTERED DESIGN UNTUK SISTEM AKUNTANSI PENDATAAN KAS BERBASIS WEB
Virdyra Tasril 1 , J. Prayoga 2 , Sri Fitria Jayusman 3
Fakultas Sains dan Teknologi, Universitas Pembangunan Panca Budi, Medan, Indonesia 1 Fakultas Teknik dan Ilmu Komputer, Universitas Darmawangsa, Medan, Indonesia 2 Fakultas Ekonomi, Universitas Muslim Nusantara Al-washliyah, Medan, Indonesia 3 Email: virdyra@dosen.pancabudi.ac.id 1 , yoga@dharmawangsa.ac.id 2 , srifitriajayusman@umnaw.ac.id 3
RINGKASAN  - Uji Usability untuk  desain  aplikasi  akuntansi  pendataan  kas  ini dilakukan  pada  Perusahaan  Daerah  Pembangunan  Kota  Medan.  Sistem  keuangan dan  akuntansinya  sudah  menggunakan  sistem  terkomputerisasi,  namun  terbatas karena  menggunakan Microsoft  Excell yang  dimana  masih  menemukan  kesulitan dalam  membuat  laporan.  Penelitian  ini  membuat  sebuah  desain prototyping dan menguji usability nya yang diperoleh dengan pendekatan Human Centered Design (HCD) serta menganalisa dari sudut pandang penggunaan aplikasi yaitu user pada bagian keuangan. Tujuan dari design User Interface ini untuk mendapatkan hasil mudah  diimplementasikan  dan  mendapat  hasil  yang acceptable. Design  UI  ini menerapkan  aplikasi  berbasis  web,  oleh  karena  itu  dalam  pengisian  kuesioner menggunakan  metode  SUPR-Q.  Hasil  dari  penelitian  ini  merupakan  sebuauh solusi  dengan menggunakan pendekatan HCD yang memiliki nilai usability yang baik.  Ini  ditunjukkan  dengan  positifnya  masukan  yang  ditemukan  pada Design User Interface berbasis web.
Kata Kunci : UI Design , Uji Usability, Human-Centered Design, Web

## PENDAHULUAN
Perkembangan  teknologi  informasi  menjadi  sangat  penting  bagi  kehidupan manusia, karena kebutuhan untuk mendapatkan data dan informasi dituntut harus cepat  dan  akurat.  Dengan  adanya  bantuan  teknologi  informasi,  maka  dapat memudahkan  para  pekerja  dalam  memperoleh  data  dan  informasi  secara  cepat. Selain  itu  manfaat  bagi  individu,  teknologi  informasi  memberikan  keuntungan bagi  sebuah  perusahaan.  Penerapan  teknologi  informasi  pada  perusahaan  dapat menjadikan  sebuah  perusahaan  lebih  produktif  dan  meningkatkan  profit  dari perusahaan tersebut.
Perusahaan  Daerah  Pembangunan  Kota  Medan  merupakan  salah  satu perusahaan  yang  dikelola  oleh  Pemerintah  Kota  Medan  dan  bergerak  dalam bidang  pengelolaan  sarana  umum,  dan  hiburan.  Kegiayan  usaha  Perusahaan Daerah Pembangunan Kota Medan mencakup sewa rumah susun, hiburan, kolam renang,  dan  kebun  binatang.  Seiring  berjalannya  waktu  dan  perkembangan kebutuhan  akan  penggunaan  teknologi,  Perusahaan  Daerah  Pembangunan  Kota Medan  melakukan  inovasi  dalam  tata  kelola  pada  bidang  tersebut.  Misalnya melakukan  renovasi  kolam  renang  Deli  dan  membuat  taman  selfie.  Namun berkembangnya  usaha  Perusahaan  Daerah  Pembangunan  Kota  Medan  tidak sejalan dengan berkembangnya penggunaan teknologi di era ini. Untuk itu peneliti merancang sebuah prototype dan menguji usability dengan pendekakatan HCD.
Prototype merupakan  sebuah  desain user  interface dimana  tampilannya menggunakan  visual  yang  nyata  seperti  pengguna  menggunakan  aplikasi  yang sesungguhnya. Design  prototyping sistem  informasi  pendataan  kas  ini  dirancang dalam  tapilan  antarmuka  yang  sederhana  agar  pengguna  bisa  merasakan kenyamanan dan kemudahan saat menggunakan aplikasi. Dan juga kegunaan dari aplikasi ini nantinya bisa dimanfaatkan dengan baik oleh user.
Dalam  proses  penggalian  kebutuhan,  prototype  membantu  dalam memvalidasi  kebutuhan  sistem,  sedangkan  dalam  tahapan  perancangan  sistem prototype dapat membantu untuk mengeksplorasi solusi dari antarmuka yang akan dirancang.(Siregar et al., 2019)
Aplikasi  biasanya  memiliki  tampilan  antar  muka  yang  dinamakan User Interface  (UI). UI  ini  akan  menjadi  penghubung  yang  menjembatani  hubungan antara aplikasi dengan pengguna untuk dapat berinteraksi dengan mudah. Design UI bisa mempengaruhi minat pengguna terhadap penggunaan aplikasi. Rancangan tampilan  UI  harus  menyesuaikan  dengan  kebutuhan user ,  karna  setiap  user memiliki kebutuhan yang berbeda-beda.
UI dapat  dilakukan melalui sentuhan, penglihatan, pendengaran, komunikasi dua  arah,  dan  memahami  secara  langsung  (Priyono  et  al.,  2020).  Sebuah User Interface yang  baik  harus easy  of  learning dan easy  of  use. Desain  antar  muka yang  terlalu  kompleks  akan  membuat  pengguna  menemukan  kesulitan  dalam
mengoperasikan  aplikasi  dan  mengakibatkan  sering  terjadi  kesalahan  dalam menggunakan sistem.
Utamanya dalam mengelola sistem informasi sudah banyak perusahaan yang memanfaatkan  teknologi  informasi  dalam  membantu  pekerjaan  pada  suatu organisasi  atau  instansi.  Setelah  ditelusuri  tidak  semua  perusahaan  melakukan pengujian usability terhadap sistem yang dibuat tersebut.
Tahapan  tahapan  yang  dapat  dilakukan  dalam  pengukuran  dengan menggunakan usability sistem mencakup empat (4) tahapan yaitu (Sahfitri & Ulfa, n.d.) :
1. Pemilihan  Kuisioner  :  Tahapan  ini  meliputi  proses  pemilihan  paket kuisioner  yang  akan  digunakan  dalam  pengukuran usability. Setiap  paket kuisioner  yang  dapat  digunakan  dalam  pengukuran usablity ini  memiliki asumsi dasar tertentu, kerangka pemikiran dan pendekatan yang berbeda.
2. Memilih  Populasi  Atau  Partisipan  :  Populasi  atau  partisipan  adalah individu  yang  dapat  dijadikan  objek  atau  sample  dalam  pengukuran usability. Populasi atau partisipan yang dipilih haruslah representatif, serta tentukan  pula  karakteristik  dari  populasi  atau  partisipan  tersebut  yang antara lain dapat meliputi  kelompok umur, jenis  kelamin  dan  hal  hal  lain yang berhubungan dengan pengukuran usability.
3. Menentukan  ukuran  sample  :  Berdasarkan  karakteristik  yang  telah  dibuat pada  penentuan  populasi  (Partisipan)  maka  dapat  ditentukan  ukuran partisipan  yang  lebih  kecil  dan  representatif  untk  dijadikan  objek  dalam pengumpulan data.
4. Melakukan  pengolahan  dan  penginterprestasian  data  sesuai  dengan  hasil penelitian

## METODE PENELITIAN
Penelitian ini menggunakan metode prototyping dengan pendekatan Human- Centered  Design, dimana  dalam  jurnalnya  (Putu  et  al.,  2021),  Metode Human Centered Design (HCD) merupakan paradigma baru dalam pengembangan sistem berbasis  web. Human  Centered  Design adalah  sebuah  proses  desain interface
yang  terfokus  terhadap  tujuan  kegunaan,  lingkungan,  tugas,  karakteristik pengguna dan alur kerja di dalam desainnya.
Teknik pengumpulan data pada penelitian ini melakukan pengisian kuesioner terhadap  responden  yang  telah  ditentukan.  Sampelnya  adalah  petugas  yang bekerja di bagian keuangan.
Pengujian usability digunakan  untuk  menguji  sebuah  aplikasi  atau  produk secara  langsung  dengan  user.  Dalam  melakukan  pengujian  banyak  metode  yang bisa  digunakan  misalnya  observasi,  wawancara  dan  isian  kuesioner.  Pada penelitian  pengisian  kuesioner.  Karena  design  sistem  berbasis  web,  maka kuesioner yang digunakan dalam pengujian usablity ini adalah SUPR-Q. Dimana jumlah  tugas  akan  digantikan  dengan  jumlah  nilai  yang  diperoleh,  dan  jumlah tugas total digantikan dengan jumlah nilai maksimal dari hasil kuesioner.
Dengan rumus:

## Gambar 1. Metodologi penelitian
Pada  tahapan  pembuatan  desain  solusi  mengacu  pada  implementasi menggunakan high-fidelity  prototype menggunakan  aplikasi Figma. Kemudian hasil prototype akan  dikofirmasikan  kepada  user  atau  kepada stakeholder untuk melihat kesesuain masalah dan solusi yang diinginkan secara berkala.
Analisis  kebutuhan  dari  penelitian  ini  yaitu  menggunakan usecase diagram.
User Login Logout Beranda Laporan Kas Masuk Laporan Kas Keluar Laporan Rekapitulasi Lihat Cetak <<include>> <<include>> <<include>> <<include>> <<extend>> <<extend>> <<extend>> <<extend>>
Gambar 2. Usecase Diagram User
Admin Login Logout Beranda Kas Masuk Kas Keluar Laporan Kas Masuk Laporan Kas Keluar Laporan Rekapitulasi Data Administrator Backup CRUD Lihat Lihat Cetak Lihat Cetak CRUD Backup Database <<include>> <<include>> <<include>> <<include>> <<include>> <<include>> <<include>> <<include>> <<extend>> <<extend>> <<extend>> <<extend>> <<extend>> <<extend>> <<extend>> <<extend>> <<extend>> Edit dan Hapus Edit dan Hapus <<extend>> <<extend>> <<extend>> Cetak <<extend>> <<extend>> <<extend>> Gambar 3. Usecase Diagram Admin : Adm Keuangan
Login Kas Masuk Kas Keluar Laporan Kas Masuk Laporan Kas Keluar Laporan Rekapitulasi Beranda Data Administrator Backup Logout
1 : INPUT USERNAME DAN PASSWORD() 2 : VERIFIKASI() 3 : GAGAL() 4 : BERHASIL() 5 : CRUD() 6 : CRUD() 7 : LIHAT DAN CETAK() 8 : LIHAT DAN CETAK() 9 : LIHAT DAN CETAK() 10 : CRUD() 11 : BACKUP DATABASE() 12 : KEMBALI MENAMPILKAN()
Gambar 4. Sequence Diagram Admin
: User Login Beranda Laporan Kas Masuk Laporan Kas Keluar Laporan Administrator Logout
1 : MASUKKAN USERNAME DAN PASSWORD() 2 : VERIFIKASI() 3 : GAGAL() 4 : BERHASIL() 5 : LIHAT DAN CETAK() 6 : LIHAT DAN CETAK() 7 : LIHAT DAN CETAK() 8 : KEMBALI MENAMPILKAN()
Gambar 5. Sequence Diagram User
Hasil  dari  analisa  kebutuhan  dengan  melakukan  proses brainstorming oleh stakholder dan kemudian di buat dalam bentuk prototype.

## HASIL DAN PEMBAHASAN
Hasil dan pembahasan akan menjelaskan hasil dari penelitian Desain User Interface Dan  Uji Usability Menggunakan Pendekatan Human-  Centered  Design Untuk  Sistem  Akuntansi  Pendataan  Kas  Berbasis  Web.  Hasil  dan  pembahasan meliputi tahapan perancangan dan hasil Desain User Interface dan Uji Usability.
a. Spesifikasi dari segi pengguna
Tahapan  ini  merupakan  tahap  pertama  dari  pendekatan Human  Centered Design .  Tahap  ini  merupakan  tahap  dalam  memahami  dan  menentukan  dari sisi pengguna yang nantinya akan menggunakan desain yang dirancang. Pada tahapan  ini  melakukan  wawancara  kepada stakeholder pada  Perusahaan Pembangunan Kota Medan.
b. Spesifikasi kebutuhan pengguna
Tahapan  ini  merupakan  tahapan  kedua,  pada  tahapan  ini  menentukan kebutuhan  pengguna  atau  kebutuhan  yang  diinginkan  perusahaan.  Pada tahapan  ini  dilakukan  dengan  menyebarkan  kuesioner  kepada  15  pengguna
yang  ada  pada  bagian  keuangan.  Penyebaran  kuesioner  ini  menggunaka google form.
Tampilan seperti apa yang diharapkan pada website pendataan kas?
Gambar 6. Jawaban kuesioner pengguna
Pada  gambar  6,  merupakan  salah  satu  jawaban  kuesioner  kebutuhan  user yang  sudah  disebarkan  melalui google  form. Sebanyak  20%  jawaban pengguna  memilih  tampilan  colorful  dan  80%  pengguna  memilih  jawaban minimalis,  sehingga  dapat  disimpulkan  bahwa  pengguna  atau  user  lebih memilih  tampilan  desain user  interface dari  web  yang  minimalis.  Hasil kuesioner  inilah  yang  nantinya  akan  dijadikan  sebagai  bahan  acuan  untuk pembuatan desain user interfce.
c. Perancangan Desain User Interface
Tahapan ini merupakan tahapan ketiga, yang mana pada tahap ini merancang solusi  dari  tampilan  desain  UI  yang  sesuai  dengan  kebutuhan  user.  Desain dibuat  dalam  bentuk  tampilan mockup .  Berikut  tampilannya  disesuaikan dengan rangkuman kuesioner pengguna.
Mockup Admin Mockup User
Halaman login
Halaman login
Halaman Home
Halaman Beranda Halaman Laporan Kas Masuk Halaman Laporan Kas Keluar Halaman Data Administrator
Halaman Home Halaman Laporan Kas Masuk
Halaman Laporan Kas Keluar
Halaman Rekapitulasi
Pada  penelitian  menggunakan  karakteristik  responden  berdasarkan  jenis kelamin  dan  berdasarkan  umur  responden.  Pembagian  karakteristik  responden berdasarkan jenis kelamin sebagai berikut:
Tabel 1. Tabel Jenis Kelamin responden Jenis Kelamin Jumlah Laki-Laki 9 Perempuan 6 Total 15
Sedangkan  berdasarkan  umur,  responden  rentang  umur  25  –  30  ada sebanyak 2 orang, responden rentang umur 31 – 35 ada 6 orang, responden rentang umur 35  –  40 ada sebanyak 4 orang,  sementara responden rentang umur  41  – 45 ada sebanyak 3 orang.
Kuesioner  yang  digunakan  pada  penelitian  ini  yaitu  kuesioner SUPR-Q. Kuesioner SUPR-Q terdiri  dari  8  pertanyaan,  dimana  untuk  pertanyaan  1-7 menggunakan  5  poin  skala likert .  Berupa  sangat  tidak  setuju,  tidak  setuju,  biasa saja, setuju, dan sangat setuju. Sedangkan untuk pertanyaan terakhir menggunakan 10 poin skala likert

## Gambar 7. Contoh tampilan kuesioner yang disebarkan
Dari isi kuesioner yang disebar ke pengguna, selanjutnya dihitung seberapa besar  nilai SUPR-Q nya.  Kemudian  dianalisis  apakah  design  mockup  memenuhi
uji usability atau  belum.  Dari  analaisis  itulah  didapat  hasil  apa  saja  yang  peru dirubah.
Setelah dijumlahkan selanjutnya bisa menhitung nilai SUS . Yang kemudian jumlah semua skor SUS didapat dari setiap responden dan dihitung nilai rata rata.
Kemudian  dibandingkan  nilai  rata  rata  dengan  parameter  yang  dibuat  (Sauro,
2018) seperti gambar dibawah ini:

## Gambar 8. Rating dan Skala Konvrensi Skor Rerata SUS

## SIMPULAN
Berdasarkan  tahapan  yang  sudah  dilakukan  pada  penelitian  ini  diperoleh kesimpulan sebagai berikut:
1. Proses  design  aplikasi  dibuat  menggunakan  metode prototyping yang berguna untuk merancang sistem sesuai dengan kebutuhan pengguna. Hasil dari prototype diuji  kepada  calon  user  secara  bertahap  sehingga  bisa menghasilkan rancangan aplikasi yang baik.
2. Hasil  dari  uji usability diperoleh  bahwa  aplikasi  mendapat  point  kategori B, yang berarti bisa diterima baik bagi calon user di lingkungan perusaahan pembangunan daerah kota medan.
3. Implementasi  dari  aplikasi  ini  di  uji  dengan  pengujian blackbox dan berfungsi dengan baik.

## DAFTAR PUSTAKA
Priyono,  D.,  Ramdhani,  A.,  &  Hardian,  R.  (2020). DESAIN  USER  INTERFACE INFORMASI  PRODI  DESAIN  KOMUNIKASI  VISUAL  MELALUI  MEDIA DIGITAL WEBSITE Pendahuluan . 7 (3), 223–242.
Putu,  I.  G.,  Pradyani,  A.,  Kadek,  N.,  Wirdiani,  A.,  &  Buana,  P.  W.  (2021). Penerapan  Metode  Human  Centered  Design  Dalam  Perancangan  User
Interface ( Studi Kasus : PT . X ) . 2 (3).
Sahfitri,  V.,  &  Ulfa,  M.  (n.d.). PENDUKUNG  PROSES  PEMBELAJARAN  DI PERGURUAN TINGGI MENGGUNAKAN USE QUESTIONNAIRE . 53–66. Sauro, J. (2018). 5 Ways to Interpret a SUS Score . Sauro, Jeff.
Siregar,  S.  S.,  Kharisma,  A.  P.,  &  Az-zahra,  H.  M.  (2019). Pengembangan  Dan Uji  Usability  Aplikasi  Pemilu  Legislatif  2019  Kota  Tangerang  Selatan Menggunakan Metode Prototyping Berbasis Android . 3 (2), 1939–1945.