## Abstrak—Seiring  berjalannya  waktu,  Institut  Teknologi
Sepuluh  Nopember  mengalami  perubahan  dalam  berbagai aspek  sebagai  bentuk  adaptasi  dari  kemajuan  ilmu  dan teknologi.  Salah  satu  aspek  tersebut  adalah  aspek  keuangan. Dalam aspek keuangan, terdapat sistem informasi yang dapat memonitor  dan  mengendalikan  proses  pengelolaan  keuangan. Akan tetapi, cakupan proses kerja pengelolaan keuangan yang semakin  meluas  dan  keterlibatan  aktor  yang  cukup  kompleks membuat SIM Keuangan ITS memiliki banyak fitur dan role, yang  dalam  penggunaannya  membuat  sistem  menjadi  rancu dan  membingungkan.  Hal  ini  dikarenakan  fitur  dan  role tersebut  tidak  dikelompokkan  secara  spesifik  sesuai  dengan fungsionalitasnya.  Padahal,  keberadaan  sistem  informasi keuangan  sangat  diperlukan  untuk  menciptakan  keteraturan dalam  manajemen  dan  pengendalian  arus  keuangan,  yang secara  masif  akan  mendorong  tercapainya  pengelolaan keuangan  yang  testruktur  dan  terkontrol.Dalam  rangka mengakomodir  kebutuhan  sistem  keuangan  IT,  sekaligus meningkatkan  efesiensi  dan  efektifitas  dari  sistem  keuangan yang  sudah  ada,  penulis  akan  mengembangkan  antarmuka pengguna  MyITS  Finance,  khususnya  Modul  Bendahara. Pengembangan sistem ini akan berpusat kepada pengguna dan kebutuhan  pengguna  dalam  penggunaan  sistem.  Untuk menampung  kebutuhan  calon  pengguna  tersebut,  penulis menggunakan metode User Centered Design yang mengedepankan  kebutuhan  serta  pengalaman  dari  calon pengguna  dalam  menggunakan  aplikasi  sehingga  bisa meningkatkan  efisiensi  dan  efektifitas  dalam  aplikasi  MyITS Finance Modul Bendahara.
Kata Kunci—Keuangan, MyITS Finance, User-Centered Design, HTML, CSS, Javascript.

## I. PENDAHULUAN
ERKEMBANGAN ilmu pengetahuan dan teknologi yang begitu  pesat  mendorong  terjadinya  berbagai  bentuk perubahan  yang  melibatkan  banyak  pihak,  salah  satunya adalah  institusi.  Untuk  bisa  bertahan  menghadapi  dinamika atau  perubahaan  yang  ada,  institusi  perlu  memaksimalkan pengelolaan  terhadap  keseluruhan  sumber  daya  yang dimilikinya, termasuk keuangan. Keuangan merupakan salah satu  kebutuhan  dasar  berupa  pendanaan  yang  menunjang segala  bentuk  pelaksanaan  kegiatan  operasional  institusi. Pengelolaan  keuangan  yang  baik,  yang  juga  diikuti  dengan pemanfaatan  teknologi  yang  memadai  akan  membantu institusi untuk meningkatkan performa dan kinerjanya secara berkelanjutan.
Dalam  menjaga  stabilitas  eksistensi  institusi  dalam melawan  arus  perubahan,  teknologi  juga  turut  berperan penting. Dengan memanfaatkan teknologi, proses pengelolaan  keuangan  dapat  dimonitor  dan  dikendalikan dengan  sedemikian  rupa.  Salah  satu  bentuk  pemanfaatan teknologi  ini  ialah  dengan  menyediakan  sistem  informasi, suatu indikator yang menjadi standar keberhasilan sekaligus media  evaluasi  proses  pengelolaan  keuangan.  Sistem
informasi  yang  baik  dan  koheren  dapat  membantu  proses integrasi dan pengelolaan data yang efektif dan efisien, baik pada masing-masing unit kerja, maupun antar unit kerja yang terdapat  pada  suatu  instansi,  serta  dapat  mendorong peningkatan  kualitas  informasi  yang  merupakan  kebutuhan utama dari setiap unit kerja dalam melaksanakan fungsinya. Keberadaan  sistem  informasi  keuangan  akan  menciptakan keteraturan  dalam  manajemen  dan  pengendalian  arus keuangan,  yang  secara  masif  akan  mendorong  tercapainya pengelolaan keuangan yang testruktur dan terkontrol.
Dalam  pelaksanaannya,  Institut  Teknologi  Sepuluh Nopember  (ITS)  telah  memiliki  sistem  informasi  khusus untuk  mengurus  masalah  keuangan.  Sistem  Informasi  ini disebut  dengan  SIM  keuangan  ITS.  SIM  Keuangan  ITS merupakan  suatu  sistem  informasi  yang  ditujukan  untuk menyajikan  berbagai  fitur  yang  berkaitan  dengan  arus keuangan  dalam  rangka  mempermudah  proses  monitoring keuangan.    Seiring  berjalannya  waktu,  cakupan  proses pengelolaan  keuangan  yang  semakin  luas  dan  keterlibatan aktor  yang  cukup  kompleks  membuat  aplikasi  ini  memiliki banyak  fitur  dan  banyak  role  yang  dalam  penggunaannya dapat  menjadi  rancu  karena  tidak  dikelompokkan  secara spesifik.  SIM  Keuangan  ITS  juga  sudah  seharusnya dikembangkan untuk meningkatkan efisiensi dalam penggunaannya, salah satunya adalah dengan mengembangkan desain antarmuka pengguna (user interface) dan  pengalaman  penguna  (user  experience),  sehingga pengguna  dapat  mengakses  fungsionalitas  aplikasi  dengan lebih mudah.
Oleh  karena  itu,  sebagai  bentuk  pembaharuan  yang  lebih efektif  dan  efisien,  maka  akan  dirancang  aplikasi  myITS Finance.  Aplikasi  ini  mengklasifikasan  fitur-fiturnya  dalam tiga  modul  sesuai  dengan  fungsionalitasnya,  salah  satunya adalah Modul Bendahara, yaitu modul yang mencakup segala proses  transaksi  keuangan  di  ITS.  Metode  yang  digunakan dalam  pengembangan  aplikasi  myITS  Finance  Modul

## Desain dan Evaluasi Antarmuka Pengguna Aplikasi myITS Finance Modul Bendahara
Sabrina Lydia Simanjuntak, Hadziq Fabroyir, dan Rizky Januar Akbar Departemen Teknik Informatika, Institut Teknologi Sepuluh Nopember (ITS)
e-mail : hadziq@if.its.ac.id
P
Tabel 1. Daftar Pertanyaan Wawancara Pengguna
No Pertanyaan
1 Apa fitur/layanan yang sering Anda gunakan pada SIM
Keuangan ITS?
2 Apa saja pekerjaan atau hal yang biasanya Anda lakukan pada SIM Keuangan ITS?
3 Ketika melakukan pekerjaan pada SIM Keuangan ITS, apa saja kendala atau kesulitan yang pernah Anda temui?
4 Menurut Anda, kira-kira apa fitur atau informasi yang dibutuhkan untuk mengatasi kendala tersebut?
5 Apakah ada fitur yang Anda perlukan yang belum tersedia pada SIM Keuangan ITS saat ini? Jika ya, fitur apa itu?
6 Apa yang Anda sukai dari SIM Keuangan ITS?
7 Apa yang tidak Anda sukai dari SIM Keuangan ITS?
Bendahara adalah User-Centered Design,  yang mana metode ini  akan  melibatkan  pengguna  dalam  setiap  prosesnya, sehingga  dapat  menghasilkan  suatu  sistem  yang  memenuhi kebutuhan penggunanya.
Hasil  dari  penulisan  Tugas  Akhir  ini  diharapkan  dapat menghasilkan antarmuka dan pengalaman pengguna aplikasi myITS  Finance  Modul  Bendahara  yang  memberikan kemudahan  dan  pengalaman  pengguna  yang  baik  dalam mengakses segala fungsionalitas aplikasi.

## II. TINJAUAN PUSTAKA
A. Antarmuka dan Pengalaman Pengguna
Antarmuka  pengguna  atau user  interface didefinisikan sebagai  suatu  mekanisme  penerimaan  informasi  dari pengguna  dan  pemberian  kembali  informasi  kepada pengguna  dengan  tujuan  membantu  mengarahkan  alur penelusuran masalah hingga memperoleh penyelesaian yang sesuai. Pengalaman pengguna atau yang lebih dikenal dengan user  experience merujuk  kepada  persepsi  atau  perasaan pengguna  saat  berinteraksi  dengan  suatu  produk,  sebagai bentuk  hasil  dari  penggunaan  produk  tersebut.  Fokus  dari user  experience ini  ialah  pengguna  dan  respon  pengguna, yang  dapat  dilihat  dari  emosi,  perilaku,  serta  nilai  yang diperoleh  dari  proses  interaksi  antara  pengguna  dengan sistem  [1].  Antarmuka  dan  pengalaman  pengguna  ini
merupakan  dua  hal  yang  saling  berkaitan  dan  tidak  dapat dipisahkan satu sama lain.
B. User-Centered Design
User-Centered Design (UCD) merupakan suatu pendekatan  yang  melibatkan  pengguna  dalam  keseluruhan proses desain dan pengembangan antarmuka pengguna, yang tidak  hanya  berfokus  pada  pemahaman  pengguna  tentang sistem,  tetapi  juga  tentang  tugas-tugas  atau  kegiatan  yang akan  dilakukan  pengguna  dengan  sistem  dan  dengan lingkungan  dimana  pengguna  akan  menggunakan  sistem tersebut [2]. Proses ini dilakukan secara iteratif atau berulang- ulang  hingga  menghasilkan  suatu  sistem  yang  dapat memenuhi kebutuhan pengguna sekaligus memberi kepuasan untuk penggunanya.

## C. Persona
Persona  adalah  karakter  fiksi  yang  dilengkapi  dengan sekumpulan data relevan tentang pengguna, yang merupakan representasi  dari  target  pengguna  yang  akan  menggunakan produk.  Persona  dibuat  untuk  mengidentifikasi  kebutuhan pengguna  terhadap  produk  yang  akan  dirancang,  dimana
Gambar 3. Flow Diagram myITS Finance Modul Bendahara.
Gambar 4. Sitemap myITS Finance Modul Bendahara
Tabel 2. Contoh Daftar Kebutuhan myITS Finance Modul Bendahara Menu Fungsionalitas Ajuan Uang Kegiatan Melihat daftar ajuan uang kegiatan Melihat detail ajuan uang kegiatan Menambahkan data ajuan uang kegiatan Pengembalian Uang Kegiatan Melihat daftar pengembalian uang kegiatan Menambahkan  data  pengembalian  uang kegiatan Melihat detail pengembalian uang kegiatan Rekonsiliasi Uang Kegiatan Melihat daftar rekonsiliasi uang kegiatan Menambahkan data rekonsiliasi uang kegiatan Melihat detail rekonsiliasi uang kegiatan Transaksi Pengeluaran
Melihat daftar transaksi pengeluaran Menambahkan data transaksi pengeluaran Melihat detail transaksi pengeluaran
Gambar 1. Affinity Diagram myITS Finance Modul Bendahara.
Gambar 2. Persona myITS Finance Modul Bendahara.
persona yang terdefinisi dengan baik dapat mendorong proses indentifikasi  dan  komunikasi  kebutuhan  pengguna  yang efisien.  Memahami  kebutuhan  pengguna  dengan  tepat  akan membantu  perancang  dalam  mengambil  keputusan  desain yang tepat.

## D. Evaluasi Formatif
Evaluasi  formatif  adalah  proses  evaluasi  yang  dilakukan secara berkelanjutan selama tahap pengembangan antarmuka dan pengalaman pengguna suatu produk atau sistem. Evaluasi formatif  bertujuan  untuk  memantau,  menganalisis,  dan memperbaiki  desain  produk  secara  iteratif  berdasarkan umpan  balik  yang  diperoleh  dari  pengguna  untuk.  Dengan melakukan evaluasi formatif secara berkala, tim UI/UX dapat mengidentifikasi  permasalahan  dan  area  perbaikan  pada desain produk, memperbaiki kekurangan, dan mengoptimalkan  pengalaman  pengguna  agar  sesuai  dengan kebutuhan  dan  ekspektasi  pengguna.  Evaluasi  formatif membantu  memastikan  bahwa  produk  yang  dihasilkan memiliki  kualitas  dan  ketergunaan  yang  optimal  sebelum diluncurkan ke publik dan digunakan oleh pengguna.

## E. Evaluasi Sumatif
Evaluasi  sumatif  adalah  proses  penilaian  yang  dilakukan setelah  tahap  perancangan  selesai.  Tujuannya  adalah  untuk mengumpulkan  data  menyeluruh  tentang  kualitas  dan ketergunaan  produk  atau  antarmuka  pengguna  (UI)  dan pengalaman pengguna (UX) dalam kondisi nyata atau situasi penggunaan  yang  sebenarnya.  Evaluasi  sumatif  biasanya mencakup  pengukuran  hasil  metriks  kinerja  yang  telah ditetapkan  sebelumnya,  seperti  tingkat  keberhasilan, kecepatan, kesalahan pengguna, kepuasan pengguna, dan lain sebagainya.  Data-data  ini  memberikan  gambaran  tentang sejauh mana produk atau sistem telah mencapai tujuan yang ditetapkan, seberapa baik ketergunaannya, dan apakah sudah memenuhi kebutuhan dan ekspektasi pengguna.

## F. Heuristic Evaluation
Heuristic  evaluation atau  evaluasi  heuristik  merupakan suatu  pendekatan  atau  metode  untuk  mengukur  sekaligus menemukan  masalah usability antarmuka  pengguna  suatu produk  yang  bertujuan  untuk  meningkatkan  pengalaman pengguna. Metode ini dicetuskan oleh Jacob Nielsen dan Rolf Molich  pada  tahun  1994,  dimana  masalah  diidentifikasi
Tabel 3.
Contoh Daftar Tugas Usability Testing Pengguna
No
Tugas
1 Menambahkan ajuan uang kegiatan LS
2 Menyetujui ajuan uang kegiatan
3 Void ajuan uang kegiatan
4 Menyetujui pengembalian uang kegiatan
5 Melihat detail transaksi pengeluaran
6 Menyetujui transaksi pengeluatan 7 Merevisi transaksi pengeluaran
Gambar 5. Desain Prototipe Iterasi Pertama.
Gambar 6. Desain Prototipe Iterasi Kedua.
Tabel 4. Contoh Perbandingan Rata-Rata Waktu Penyelesaian Tugas Rata-Rata Waktu Penyelesaian Iterasi 1 (Detik) Iterasi 2  (Detik) Tugas 1 255,76 178,92 Tugas 2 526,91 84,08 Tugas 3 200,91 21,38 Tugas 4 61,14 25,77 Tugas 5 230,19 17,87 Tugas 6 57,31 55,74
Tugas
7 72,87 22,71 Tabel 5. Contoh Perbandingan Rata-Rata Tingkat Keberhasilan Tugas Rata-Rata Tingkat Keberhasilan Iterasi 1 Iterasi 2 Tugas 1 50,00% 100,00% Tugas 2 62,50% 83,33% Tugas 3 87,50% 83,33% Tugas 4 100,00% 100,00% Tugas 5 100,00% 100,00% Tugas 6 100,00% 100,00% Tugas 7 100,00% 100,00% Rata-Rata 85,71% 95,24%
Gambar 7. Emphaty Map Iterasi Pertama.
dengan  cara  membandinkan  tampilan  antarmuka  pengguna produk tersebut dengan prinsip-prinsip dasar tentang UI atau usability yang juga disebut dengan heuristic .
G. Usability Evaluation
Usability  evaluation merupakan  salah  satu  metode pengujian  untuk  mengetahui  tingkat  kepuasan  dan  kualitas pengalaman  pengguna  dengan  proses  penggunaan  produk dan menemukan wawasan baru terkait perilaku dan preferensi dari  pengguna,  yang  dapat  meningkatkan  peluang  untuk memperbaiki  sekaligus  meningkatkan  kualitas  desain.  Oleh karena  itu,  diperlukan  suatu  standar  yang  dapat  memenuhi kriteria  efektifitas,  efisiensi,  dan  kepuasan  pengguna  secara menyeluruh.  Pengujian  dilakukan  dengan  iterasi  dimana sangat  erat  hubungannya  dengan usability  testing [3]. Usability  Metrics merupakan  suatu  indikator  pengukuran efektivitas,  efisiensi  dan  kepuasan  pengguna  dalam interaksinya  dengan  suatu  produk.  Metrik  ini  digunakan untuk  mengukur  seberapa  mudah  dan  efektif  suatu  produk terhadap pengguna. Pengukuran metrik dilakukan berdasarkan  hasil  data  yang  diperoleh  selama  pengujian pengguna.

## H. Figma
Figma  adalah  alat  desain  yang  berupa  aplikasi  berbasis web  yang  berfungsi  untuk  mendesain  aplikasi mobile ,  web, serta  berbagai  aset user  interface lainnya.  Figma  yang memiliki  sistem  daring,  memungkinkan  pengguna  dapat mengakses  file  desain  secara  fleksibel  dari  mana  saja  dan kapan saja selama terhubung dengan internet. Figma tersedia
dan  dapat  diakses  melalui  berbagai  sistem  operasi.  Figma juga dapat meningkatkan efesiensi dan efektifitas mendesain melalui  fitur  kolaborasi  pengguna  yang  memungkinkan beberapa  pengguna  untuk  mengerjakan  rancangan  desain dalam  waktu  yang  bersamaan.  Selain  itu,  ketersediaan  fitur plugin  pada  Figma  juga  dapat  membantu  sekaligus meningkatkan kualitas desain dan produktivitas pengguna.

## I. HTML
Hypertext  Markup  Language atau  yang  biasa  disingkat dengan  HTML  merupakan  bahasa  markup  yang  digunakan untuk  membuat  struktur  halaman  website  yang  saling terhubung  satu  sama  lain  dan  dapat  ditampilkan  pada  web browser  [4].  HTML  dapat  dianalogikan  sebagai  kerangka polos  dari  halaman  website  yang  disusun  secara  terstruktur sebelum terkena sentuhan dari hal-hal yang berkaitan dengan desain visual, interaktif, dan fungsionalitas website tersebut. Istilah hypertext pada  HTML  merujuk  pada  suatu  metode yang  memungkinkan  perpindahan  antar  halaman  dengan melakukan  klik  pada  suatu  komponen  pada  halaman  web tersebut, baik itu berupa tulisan, maupun berupa simbol. Lalu,
Tabel 6. Contoh Hasil Evaluasi Formatif Iterasi Kedua Halaman Permasalahan Solusi Ajuan Uang Kegiatan Letak pilih bank seharusnya  berada  pada pengajuan Memindahkan pilih bank ke form pengajuan UK
Void Ajuan UK
Menu  void  dan  upload bukti tidak memiliki depedensi sehingga letaknya kurang tepat
Memindahkan menu void  ke  bagian  atas halaman detail Tambah Ajuan UK Pada bagian daftar kegiatan, belum ada tombol  untuk  menghapus kegiatan Menambahkan icon tempat  sampah  untuk menghapus data Tabel 7. Hasil Evaluasi Heuristik
No Prinsip Heuristik yang Belum Sesuai Catatan 1 Visibilitas status sistem Pada  saat  melakukan  persetujuan, belum ada tampilan yang menandakan bahwa persetujuan telah berhasil dilakukan 2 Visibilitas status sistem Pop-up  data  yang  memerlukan persetujuan  pada  detail  transaksi pengeluaran  masih  kurang  terlihat atau menonjol 3 Standar dan konsistensi Peletakan posisi status pada detail masih berbeda-beda 4 Pencegahan eror Saat  pernyataan  belum  di  centang pada  halaman  tambah  transaksi pengeluaran, tidak ada peringatan/pesan eror yang muncul 5 Mengenal daripada mengingat Deskripsi  pada  information  chips pada  halaman  tambah  transaksi pengeluaran masih belum sesuai. 6 Desain yang estetik dan minimalis Pada daftar kegiatan halaman tambah ajuan uang kegiatan, subjudul pada tabel terlalu repetitif dan terlihat menumpuk 7 Membantu pengguna mengenali, menganalisa, dan menangani eror Pada  saat  mengisi  form,  pengguna bisa  saja  tiba-tiba  mengklik  keluar, yang  menyebabkan  data  pengguna jadi tidak tersimpan dan hal ini akan menimbulkan frustasi pada pengguna. 8 Membantu pengguna mengenali, menganalisa, dan menangani eror
Letak  alert  untuk  UK  yang  diblokir kurang  tepat  karena  acuan  UK diblokir adalah bulan UK, sementara bulan  UK  terletak  di  card  yang berbeda dengan alert tersebut
Tabel 8. Contoh Hasil Evaluasi Formatif Iterasi Pertama Halaman Permasalahan Solusi Beranda Halaman beranda kurang informatif Mengubah halaman beranda  menjadi  lebih informatif Halaman tambah Form tiba-tiba berubah ketika jenis transaksinya diubah Memilih  dahulu  jenis transaksi, baru  formnya yang sesuai tampil Persetujuan Ajuan UK Tombol  'Release  UK' kurang merepresentasikan persetujuan
Mengubah kata 'Release  UK'  menjadi 'Setujui Ajuan'
Gambar 8. Emphaty Map Iterasi Kedua.
istilah markup merujuk  kepada  proses  yang  dilakukan  oleh tag  HTML  terhadap  teks  yang  ada  didalamnya,  yang  mana tag-tag  ini  merupakan  kode  yang  harus  diterjemahkan  web browser untuk ditampilkan pada halaman web.

## J. CSS
CSS  atau Cascading  Style  Sheets adalah  bahasa stylesheet yang dapat memberikan sentuhan style visual pada emelen HTML. CSS juga memungkinkan untuk melakukan pengontrolan  tata  letak  atau  layout  pada  halaman  web. Komponen pada halaman web yang tampilan visualnya dapat diatur  dengan  menggunakan  CSS  meliputi  warna,  font, kolom,  spasi,  animasi  dan  komponen-komponen  lain  yang dibutuhkan  oleh  pengguna.  Selain  dapat  memperindah  dan membuat  tampilan  depan  halaman  web  menjadi  lebih menarik,  CSS  juga  mampu  meningkatkan  efektifitas  dan efisiensi  dalam  proses  mendesain  halaman  website,  dimana untuk  suatu style ,  hanya  diperlukan  untuk  membuat  satu aturan  atau  fungsi,  yang  mana  fungsi  ini  dapat  di  gunakan kembali  dengan  cara  memanggilnya,  tanpa  perlu  untuk membuat kembali fungsi tersebut.

## K. Javascript
JavaScript  merupakan  bahasa  pemrograman  berorientasi objek untuk membuat halaman web yang bersifat dinamis dan interaktif, yang memungkinkan isi konten pada halaman web dapat  bergerak  dan  berubah-ubah  secara  otomatis,  tanpa harus dimuat ulang secara manual [5]. Elemen-elemen yang dapat  dibuat  dengan  JavaScript,  seperti  animasi  grafis, slideshow  gambar,  formulir  yang  interaktif,  dan  lain-lain dapat meningkatkan pengalaman pengguna saat menggunakan web.

## III. DESAIN DAN PERANCANGAN SISTEM

## A. Survei Pengguna
Survei  dilakukan  terhadap  partisipan  target  pengguna myITS  Finance  Modul  Bendahara  melalui Google  Form . Survei  berisi  pertanyaan-pertanyaan  mengenai  data  diri, kebiasaan,  dan  juga  penilaian  serta  pandangan  pengguna terhadap fitur dan tampilan SIM Keuangan ITS. Survei yang disebarkan diisi oleh 12 orang responden, yang terdiri dari 2 pimpinan unit, 3 PPK, 3 BPP pusat, dan 4 BPP unit dengan rentang usia 29 - 55 tahun.
Dari  hasil  survei,  penulis  menemukan  bahwa  dari  segi pengoperasian  fitur,  para  partisipan  merasa  SIM  Keuangan ITS  sudah  bisa  mengakomodir  kebutuhan  pekerjaan  para pengguna dan cukup mudah untuk dioperasikan. Akan tetapi, menurut para partisipan pada SIM Keuangan ITS masih ada beberapa  fitur  yang  belum user  friendly dan  masih  ada kendala  yang  masih  perlu  diperbaiki.  Kemudian  dari  segi tampilan,  menurut  partisipan  meskipun  tampilan  SIM Keuangan  ITS  sudah  cukup  komunikatif  dan  tidak  begitu menyulitkan  dari  segi  penggunaannya,  akan  tetapi  tampilan SIM Keuangan ITS masih belum user friendly , terlihat kuno, dan  masih  perlu  ditingkatkan  lagi  untuk  pengalaman pengguna yang lebih baik.

## B. Wawancara Pengguna
Untuk  mengetahui  lebih  dalam  terkait  kebiasaan, pengalaman,  kebutuhan,  dan  kesulitan  pengguna  pada  SIM Keuangan  ITS,  maka  dilakukan  wawancara  terhadap  tujuh orang  partisipan  yang  mewakili  target  pengguna  myITS
Finance Modul Bendahara. Wawancara ini dilakukan secara langsung dengan partisipan pada lokasi kerja masing-masing partisipan.  Tabel  1  menampilkan  daftar  pertanyaan wawancara kepada para partisipan.

## C. Affinity Diagram
Pada affinity  diagram ,  jawaban-jawaban  dari  partisipan dianalisis dan dikelompokkan ke dalam beberapa aspek. Hal ini  dilakukan  untuk  mengetahui  segala  kebutuhan  dan permasalahan yang dialami pengguna secara lebih jelas dan detail,  sehingga  penulis  dapat  merancang  solusi  antarmuka yang  sesuai  kebutuhan  pengguna  dan  diharapkan  dapat mengatasi permasalahan yang dialami oleh pengguna, seperti pada Gambar 1.

## D. Persona
Setelah  menyusun affinity  diagram dan  mengetahui permasalahan dan kebutuhan pengguna secara jelas, penulis dapat  mengidentifikasikan  empat  persona  yang  mewakili target  pengguna  myITS  Finance  Modul  Bendahara.  Data persona yang berisi data diri, latar belakang, keinginan, dan keresahan yang dialami oleh setiap persona ditampilkan pada Gambar 2.

## E. Flow Diagram
Berdasarkan  persona  yang  telah  dibuat,  penulis  dapat membuat flow  diagram untuk  myITS  Finance  Modul Bendahara dengan mempertimbangkan kebutuhan dan empat persona pengguna myITS Finance Modul Bendahara seperti pada Gambar 3 .

## F. Daftar Kebutuhan
Daftar  kebutuhan  myITS  Finance  Modul  Bendahara disusun  sesuai  kebutuhan  masing-masing  peran  pengguna yang terdapat pada myITS Finance Modul Bendahara. Daftar kebutuhan ini dibuat dengan tujuan agar rancangan menu dan fitur  pada  myITS  Finance  Modul  Bendahara  sesuai  dengan fungsionalitasnya,  sehingga  dapat  memenuhi  kebutuhan masing-masing  peran  pengguna.  Adapun  daftar  kebutuhan para pengguna myITS Finance Modul Bendahara ditampilkan pada  Tabel 2.

## G. Desain Sistem
Komponen-komponen yang digunakan dalam perancangan antarmuka  pengguna  myITS  Finance  Modul  Bendahara mengacu pada template desain myITS yang telah disepakati. Hal ini bertujuan untuk menyelaraskan tema dan konsistensi tampilan antar produk-produk myITS untuk mempertahankan kesatuan identitas sebagai produk myITS.

## H. Perancangan Arsitektur Navigasi Antarmuka Pengguna
Setelah  menentukan  kebutuhan  pengguna,  penulis merancang arsitektur navigasi antarmuka pengguna atau yang lebih  dikenal    dengan sitemap.  Sitemap adalah  bentuk gambaran  visual  dari  urutan  atau  alur,  yang  juga menunjukkan  struktur  halaman-halaman  dalam  sebuah  web atau  aplikasi.  Berikut  merupakan sitemap untuk website myITS Finance Modul Bendahara. Sistemap myITS finance modul bendahara dapat dilihat pada Gambar 4.
I. Pilot Testing
Pilot  testing dilakukan  sebelum  melakukan  usability
testing dengan pengguna target. Tujuan dari pilot testing ini adalah untuk memeriksa pemahaman terhadap kalimat tugas atau  instruksi  serta  melihat  keberhasilan  eksekusi  prototipe melalui aplikasi Maze.

## J. Evaluasi Formatif
Evaluasi  formatif  melibatkan  pengujian  ketergunaan desain menggunakan metode usability testing yang dilakukan dalam  dua  kali  iterasi  dan  metode heuristic  evaluation . Pengujian iterasi pertama dilakukan untuk mengetahui lebih dalam  terkait  kebutuhan  dan  hal-hal  yang  perlu  dievaluasi lebih  lanjut  pada  fitur-fitur  yang  diuji  cobakan.  Sedangkan pengujian  iterasi  kedua  dilakukan  untuk  mengetahui  dan memastikan apakah desain yang telah dirancang sudah cukup mudah  untuk  digunakan  dan  dapat  menyelesaikan  masalah yang  telah  diidentifikasi  pada  iterasi  pertama. Usability testing ini dilakukan terhadap empat peran pengguna dalam myITS Finance Modul Bendahara, yaitu BPP pusat, BPP unit, pimpinan  unit,  dan  PPK.  Berikut  merupakan  contoh  daftar tugas yang diujikan kepada pengguna myITS Finance Modul Bendahara  pada usability  testing .  Contoh  daftar  tugas usability testing pengguna dapat dilihat pada Tabel 3.
Sedangkan  heuristic  evaluation  dilakukan  oleh  para  ahli yang memiliki pengetahuan dalam bidang UI/UX design dan prinsip-prinsip ketergunaan (heuristik). Para ahli melakukan inspeksi  terhadap  desain  dengan  menggunakan  10  prinsip heuristik sebagai panduan dalam menilai desain.

## K. Evaluasi Sumatif
Evaluasi  sumatif  merupakan  proses  untuk  mendapatkan hasil penilaian yang menyeluruh terhadap desain yang telah dibuat. Evaluasi ini menghasilkan beberapa metriks penilaian pada masing-masing tugas yang diberikan, diantaranya durasi penyelesaian tugas, informasi salah klik, tingkat penyelesaian tugas, Single  Ease  Question  (SEQ), dan System  Usability Scale (SUS) .
Penilaian  untuk  pertanyaan  yang  diajukan  pada Single Ease  Question  (SEQ) menggunakan  skala  angka  dari  1 (sangat sulit) hingga 6 (sangat mudah) untuk menilai tingkat kesulitan  atau  kemudahan  tugas  yang  telah  dilakukan. Rentang  angka  tersebut  dipilih  agar  partisipan  tidak memberikan penilaian netral. Sementara itu, untuk penilaian System Usability Scale (SUS) dilakukan melalui penyebaran kuesioner  setelah evaluasi  desain  iterasi  kedua., yang berisi 10  pertanyaan  dengan  menggunakan  skala  1  (sangat  tidak setuju) hingga 5 (sangat setuju) untuk mengukur ketergunaan sistem,  dengan    pertanyaan  yang  berselang-seling  konotasi positif  dan  negatif  untuk  menghindari  bias  atau  pengisian otomatis dari pengguna.

## IV. IMPLEMENTASI SISTEM

## A. Desain Prototipe Iterasi Pertama
Desain  prototipe  iterasi  pertama  antarmuka  pengguna myITS  Finance  Modul  Bendahara  adalah  berupa  prototipe kejituan  menengah  yang  berfokus  pada  perancangan  dan penataan  komponen-komponen.  Prototipe  menengah  ini dibuat untuk  menjadi dasar sekaligus mempermudah proses perancangan myITS Finance Modul  Bendahara selanjutnya. Gambar 5 menampilkan beberapa contoh halaman fitur yang digunakan untuk evaluasi iterasi pertama.

## 1) Desain Prototipe Iterasi Kedua
Desain prototipe iterasi kedua merupakan hasil perubahan tampilan antarmuka pengguna setelah dilakukannya evaluasi pada  iterasi  pertama.  Perubahan  tampilan  ini  mencakup perbaikan  dan  solusi  dari  permasalahan  yang  ditemukaan pada saat  evaluasi  dengan pengguna myITS Finance Modul Bendahara.  Gambar  6  menampilkan  beberapa  contoh halaman fitur yang digunakan untuk evaluasi iterasi kedua.

## V. PENGUJIAN DAN EVALUASI

## A. Evaluasi Sumatif
Penulis  melakukan  dua  iterasi  evaluasi  sumatif  untuk keempat peran pengguna myITS Finance Modul Bendahara. Dalam  evaluasi  ini,  penulis  mengumpulkan  data  metriks seperti  waktu  penyelesaian,  jumlah missclick ,  tingkat penyelesaian, catatan atau komentar dari partisipan, SEQ, dan SUS.
Pada iterasi pertama, untuk pengguna BPP pusat, dari total 28  tugas  yang  dikerjakan,  terdapat  8  tugas  yang  berhasil dengan  catatan,  dengan  rata-rata  tingkat  penyelesaian  tugas untuk pengguna BPP pusat adalah 85,71%. Untuk pengguna BPP unit, dari total 18 tugas yang dikerjakan, terdapat 7 tugas yang  berhasil  dengan  catatan,  dan  1  tugas  tidak  berhasil, dengan rata-rata tingkat  penyelesaian tugas untuk user BPP unit  adalah  75%,  dengan  catatan  pengguna  yang  tidak berhasil menyelesaikan tugas disebabkan oleh jaringan yang tidak stabil. Untuk pengguna pimpinan unit, dari total 8 tugas yang dikerjakan, 2 tugas yang berhasil dengan catatan, dan 1 tugas  yang  tidak  berhasil  dengan  rata-rata  tingkat penyelesaian  tugas  untuk  user  pimpinan  unit  adalah  75%, dengan catatan pengguna yang tidak berhasil menyelesaikan tugas  disebabkan  oleh  jaringan  yang  tidak  stabil.  Untuk pengguna PPK, dari total 12 tugas yang dikerjakan, terdapat 4 tugas yang berhasil dengan catatan, dengan rata-rata tingkat penyelesaian untuk user PPK adalah 83,34%.
Secara  umum,  hasil  evaluasi  formatif  iterasi  pertama menunjukkan  bahwa  antarmuka  pengguna  iterasi  pertama sudah  cukup  bagus,  tetapi  masih  memerlukan  perbaikan. Selain itu, rata-rata nilai System Usability Scale (SUS) myITS ITS Finance Modul Bendahara pada iterasi pertama berada di angka 82,33, yang berarti aplikasi sudah dianggap baik atau mudah digunakan karena sudah diatas nilai minimal yaitu 68.
Pada iterasi kedua, untuk pengguna BPP pusat, pengguna sudah  dapat  menyelesaikan  tugas  dengan  baik,  dimana  dari total  21  tugas  yang  dikerjakan,  terdapat  2  tugas  berhasil dengan  catatan  dan  tidak  ada  tugas  yang  gagal  dikerjakan, dengann  rata-rata  tingkat  penyelesaian  partisipan  adalah sebesar 95,24%. Untuk pengguna BPP unit, pengguna sudah dapat menyelesaikan tugas dengan baik, dimana dari total 21 tugas  yang  dikerjakan,  terdapat  2  tugas  berhasil  dengan catatan dan tidak ada tugas yang gagal  dikerjakan, dengann rata-rata  tingkat  penyelesaian  partisipan  adalah  sebesar 95,24%.Untuk  pengguna  pimpinan  unit,  pengguna  sudah dapat menyelesaikan tugas dengan baik, dimana dari total 4 tugas yang dikerjakan, hanya terdapat 1 tugas berhasil dengan catatan,  dengan  rata-rata  tingkat  penyelesaian  partisipan adalah  sebesar  87,5%.  Untuk  pengguna  PPK,  pengguna sudah dapat menyelesaikan tugas dengan sangat baik, dimana dari total 12 tugas, semuanya sudah berhasil dikerjakan
dengan  rata-rata  tingkat  penyelesaian  partisipan  adalah sebesar 100%.
Secara  umum,  hasil  evaluasi  formatif  iterasi  kedua menunjukkan  bahwa  antarmuka  pengguna  iterasi  kedua mengalami  peningkatan  dibandingkan  dengan  iterasi pertama. Selain itu,  rata-rata nilai  SUS  myITS  ITS Finance Modul  Bendahara  pada  iterasi  kedua  juga  mengalami peningkatan yaitu berada di angka 88,6, yang berarti aplikasi dianggap semakin baik atau semakin mudah untuk digunakan dibanding  dengan  iterasi  pertama.  Hal  ini  juga  ditunjukkan dari  hasil  perbandingan  antara  evaluasi  sumatif  iterasi pertama  dan  iterasi  kedua,  dimana  perbandingan  dilakukan berdasarkan  rata-rata  waktu  penyelesaian  dan  rata-rata persentase  tingkat  keberhasilan,  seperti  pada  contoh  yang ditampilkan pada Tabel 4 dan Tabel 5.

## B. Evaluasi Formatif
Berdasarkan hasil evaluasi desain iterasi pertama, penulis membuat emphaty map untuk memvisualisasikan pengalaman,  kebutuhan,  emosi,  dan  pandangan  pengguna. Emphaty  map iterasi  pertama  myITS  Finance  Modul Bendahara ditampilkan pada Gambar 7.
Setelah  melakukan  evaluasi  iterasi  pertama  serta mengetahui  berbagai  permasalahan  dan  memperoleh berbagai  masukan  terkait  desain  dan  alur  penggunaan  dari partisipan, penulis mengumpulkan semua permasalahan dan saran serta melampirkan solusi rancangan desain yang sesuai, seperti contoh yang ditampilkan pada Tabel 6 . Emphaty map iterasi kedua myITS Finance Modul Bendahara ditunjukkan pada  Gambar  8.  Setelah  melakukan  evaluasi  iterasi  kedu,a penulis  kembali  mengumpulkan  semua  permasalahan  dan saran serta melampirkan solusi rancangan desain yang sesuai, seperti contoh hasil evaluasi formatif iterasi kedua pada Tabel 6.

## C. Evaluasi Heuristik
Penulis  melakukan  evaluasi  heuristik  dengan  menganalisis antarmuka  pengguna  aplikasi  myITS  Finance  Modul Bendahara berdasarkan 10 prinsip evaluasi heuristik. Adapun evaluasi ini dilakukan oleh lima orang ahli di bidang desain antarmuka  pengguna  dan  desain  pengalaman  pengguna. Tabel 7 menunjukkan hasil pengujian evaluasi heuristik yang berisikan  prinsip  heuristic  yang  masih  belum  terpenuhi, beserta catatan sebagai penjelasan mengenai mengapa prinsip tersebut belum terpenuhi.

## VI. KESIMPULAN DAN SARAN
Adapun  kesimpulan  yang  didapatkan  adalah  sebagai berikut:(1)Penerapan  metode  User-centered  Design  pada pengembangan  antarmuka  dan  pengalaman  pengguna aplikasi myITS Finance Modul Bendahara dilakukan dengan
memahami  konteks  penggunaan  sistem,  yang  dilakukan dengan  survei  pengguna  dan  wawancara.  Selanjutnya, menganalisis kebutuhan pengguna dengan membuat affinity diagram,  menentukan  persona  pengguna  yang  terdiri  atas empat  persona,  membuat  flow  diagram  dan  menentukan daftar kebutuhan pengguna. Kemudian dihasilkan rancangan prototipe  kejituan  menengah  sebagai  bentuk  solusi  desain myITS  Finance  Modul  Bendahara;(2)Rancangan  dan implementasi  antarmuka  pengguna  aplikasi  myITS  Finance Modul Bendahara dibuat dengan menggunakan aturan desain yang  digunakan  pada  seluruh  aplikasi  myITS.  Bahasa pemrograman yang digunakan pada implementasi antarmuka desain  ini  adalah  HTML,  CSS,  dan  JavaScript;(3)Evaluasi antarmuka  dan  pengalaman  pengguna  aplikasi  myITS Finance Modul Bendahara  dilakukan dengan dua kali iterasi usability  testing  untuk  menguji  ketergunaan  aplikasi  dan evaluasi  heuristik  untuk  menganalisis  kesesuaian  desain dengan  10  prinsip  heuristik.  Setelah  dilakukan  usability testing,  dapat  disimpulkan  bahwa  terjadi  peningkatan  pada aplikasi  secara  keseluruhan.  Dari  sisi  SEQ,  rata-rata  SEQ BPP pusat meningkat dari 5,21 menjadi 5,33, rata-rata SEQ BPP  unit  meningkat  dari  4,72  menjadi  5,44,  rata-rata  SEQ pimpinan  unit  meningkat  dari  5,5  menjadi  6,  dan  rata-rata SEQ PPK meningkat dari 5 menjadi 5,67. Kemudian dari sisi SUS, rata-ratanya meningkat dari 82,33 menjadi 88,6. Hal ini berarti  desain  antarmuka  sudah  dianggap  baik  dan  mudah digunakan.
Saran  yang  dapat  penulis  sampaikan  adalah  sebagai berikut;(1)Dalam  pengembangan  aplikasi  myITS  Finance selanjutnya, disarankan untuk melibatkan akuntan atau ahli di bidang  keuangan  dalam  merancang  proses  bisnisnya, sehingga deliverable yang  dihasilkan  bisa  lebih  optimal sesuai dengan prinsip dasar keuangan atau akuntansi;(2)Dalam riset pengguna pada sistem selanjutnya, disarankan  untuk  dapat  melibatkan  lebih  banyak  partisipan sehingga dapat  memperoleh pandangan yang lebih luas dan beragam.

## DAFTAR PUSTAKA
[1] B.  A.  Mustikaningtyas,  M.  C.  Saputra,  and  A.  Pinandito,  “Analisis usability  pada  website  universitas  brawijaya  dengan  heuristic evaluation,” Jurnal  Teknologi  Informasi  Dan  Ilmu  Komputer ,  vol.  3, no. 3, 2016, doi: https://doi.org/10.25126/jtiik.201633194.
[2] D. , M. S. Stone, M. Woodroffe, and C. Jarret, User Interface Design and Evaluation . San Fransisco: Elsevier, 2005.
[3] A. , I. E. , & A. S. Fernandez, “Usability evaluation methods for the web: A systematic mapping study,” Inf Softw Technol , vol. 53, no. 8, pp. 789–817, 2011, doi: https://doi.org/10.1016/j.infsof.2011.02.007.
[4] D. R. Brooks, An Introduction to HTML and JavaScript (For Scientists and Engineers . London: Springer Science & Business Media, 2007.
[5] K.  ,  &  R.  S.  Sun,  “Analysis  of  javascript  programs,” ACM  Comput Surv , vol. 50, no. 4, pp. 1–34, 2018, doi: https://doi.org/10.1145/3106741.