## DESAIN USER INTERFACE WEBSITE BAAK GUNADARMA
MENGGUNAKAN USER CENTERED DESIGN , EYE TRACKING ,

## DAN SYSTEM USABILITY SCALE
1 Rizka Syifa Fadhilah, 2 Syarifuddin Nasution
1,2 Magister Teknik Industri dan Manajemen, Universitas Gunadarma Jl. Margonda Raya No.100, Depok 16424, Jawa Barat
1 rizkasyifaf7@gmail.com, 2 synasution@staff.gunadarma.ac.id

## Abstrak
Biro  Administrasi  Akademik  dan  Kemahasiswaan  (BAAK)  Gunadarma  yaitu  biro  yang menangani segala sesuatu yang berkaitan dengan penyelenggaraan kegiatan belajar mengajar dan administrasi akademik bagi seluruh mahasiswa Universitas Gunadarma. Berdasarkan hasil kuesioner  pendahuluan,  diperoleh  78%  mengatakan  bahwa  perlu  dilakukan  perbaikan  dari tampilan  desain  user interface  (UI)  website,  35%  dari  responden  yang  merupakan  mahasiswa angkatan 2023 sebagai pengguna baru merasa website tersebut membingungkan. Penelitian ini bertujuan  untuk  mengevaluasi  tingkat  usabilitas  UI  website  saat  ini  menggunakan  System Usability  Scale  (SUS)  dan  eye  tracking,  dan  membuat  perancangan  perbaikan  desain  UI website  usulan  menggunakan  pendekatan  User  Centered  Design  (UCD),  serta  mengetahui pengaruh hasil desain perbaikan yang dilakukan terhadap tingkat usabilitas website. Hasil dari penelitian  ini  yaitu  rata-rata  skor  SUS  yaitu  sebesar  50,917  menunjukkan  bahwa  tingkat usabilitas pada website saat ini berada pada grade F dan memiliki adjective rating yaitu ok dan acceptability  range  yaitu  marginal  low,  menjadi  dasar  perlu  dilakukannya  perbaikan  pada tampilan desain UI website. Rekomendasi perancangan desain perbaikan website menggunakan pendekatan  UCD  dibuat  pada  tahap  product  design  and  solutions.  Rata-rata  skor  SUS  yaitu sebesar  83,75  menunjukkan  tingkat  usabilitas  pada  website  usulan  berada  pada  grade  B  dan memiliki adjective rating yaitu good dan acceptability range yaitu acceptable.
Kata Kunci : BAAK Gunadarma, Eye Tracking, System Usability Scale, User Centered Design.

## Abstract
The  Academic  and  Student  Affairs  Administration  Bureau  (BAAK)  Gunadarma  is  the  bureau that  handles  everything  related  to  the  implementation  of  teaching  and  learning  activities,  and academic  administration  for  Gunadarma  University  students.  Based  on  the  results  of  the preliminary survey, it was found that 78% said that improvements of the UI were needed. 35% of  respondents  who  were  students  of  the  class  of  2023  as  new  users  felt  that  the  website  was confusing. The  aims of  this  research  is  to  evaluate  the  level  of  usability  of  the  current  website UI  using  System  Usability  Scale  (SUS)  and  eye  tracking,  to  design  improvements  website  UI using the User Centered Design (UCD) approach, as well as to determine the influence of the results of the improvements made on the level of website usability. The results of this research are  that  the  average  SUS  score  is  50.917,  indicating  that  the  usability  level  of  the  website  is currently at grade F, adjective rating OK and acceptability range Marginal Low,  which is the basis  for  improvements  to  the  website's  user  interface  design.  Recommendations  for  design website  improvements  using  the  UCD  approach  are made  at  the  product  design  and  solutions stage.  The  average  SUS  score  is  83.75,  indicating  that  the  usability  level  of  the  proposed website  is  grade  B  and  has  an  adjective  rating  of  GOOD  and  an  acceptability  range  is acceptable.
Keywords : BAAK Gunadarma, Eye Tracking, System Usability Scale, User Centered Design.

## PENDAHULUAN
Pemanfaatan website sebagai  bagian dari  sumber  informasi  bagi  sebuah  institusi menjadi  bagian  penting  dalam  menunjang penyebaran informasi, tetapi layanan berbasis web  masih banyak  mengalami  kendala dalam pemanfaatannya  atau  tidak  dapat  menarik untuk  penggunanya,  sering  tidak  berfungsi sebagaimana  fungsi  yang  diharapkan  [1]. Kemudahan  sebuah  web  yang  merupakan bagian  dari  kemajuan  teknologi  komputer untuk dapat digunakan oleh manusia dipelajari  dalam  sebuah  disiplin  ilmu  yang dikenal  dengan  nama Human  Computer Interaction (HCI).  HCI  berfokus  pada pengembangan  kapabilitas  manusia  untuk menggunakan mesin, mendesain dan membangun interface ,  optimasi  proses  antara manusia  dan  mesin, usability  interface ,  dan komunikasi  yang  lebih  baik  antara  manusia dengan  mesin  [2].  Di  dalam  HCI  ada beberapa metode yang dapat digunakan untuk mengevaluasi desain sebuah  web berdasarkan faktor  manusia.  Metode  untuk  mengevaluasi sebuah  desain  secara  garis  besar  terbagi menjadi  dua,  yaitu  metode  yang  dilakukan dengan  mengikutsertakan  pengguna  dalam proses  evaluasi  ( Testing & Inquiry )  dan metode yang dilakukan berdasarkan penilaian ahli  tanpa  melibatkan  pengguna website dalam  proses  evaluasi  ( Model/Metric-Based and Inspection ).  Diantara  kategori  metode tersebut  yang  saat  ini  paling  banyak digunakan  untuk  menguji  sebuah website
karena  lebih  akurat  adalah  metode usability testing . Usability  testing juga  memiliki beberapa teknik evaluasi yang berbeda [3].
Saat  melakukan  evaluasi,  terdapat berbagai  metode  dan  teknik,  termasuk eye tracking , dapat digunakan  untuk memberikan pandangan  objektif  secara  kuantitatif  dari sudut  pandang  mata  penggunanya  [4]. Eye tracking adalah suatu alat untuk mengevaluasi dengan  memahami  perilaku  manusia  melalui titik  fokus  mata  dalam  menggunakan  suatu sistem,  sehingga  dapat  membantu  untuk meningkatkan  kualitas  dan  usabilitas  [5]. Metode  yang  kedua  yaitu  kuesioner  SUS untuk  mendapatkan sudut pandang  kuantitatif secara subjektif  dari pengguna [6]. Kuesioner SUS  merupakan  instrumen  yang  digunakan untuk  menilai  kenyamanan  interaksi  antara pengguna  dengan  sistem  [7].  Metode  yang bisa  digunakan  untuk  perancangan  ulang yaitu  UCD  untuk  mendapatkan  perancangan yang  tepat  dan  sesuai  kebutuhan  karena perancangannya  fokus  pada  pengguna  [8]. Penelitian  terdahulu  yang  memiliki  fokus mengukur  tingkat  kepuasan  pada  website sistem informasi kantor kecamatan. Pengukuran  dilakukan  dengan  metode  SUS dan memperoleh nilai skor 60 yang menandakan website dapat  digunakan  serta memiliki  potensi  perbaikan  secara  berkala agar  jumlah  pengguna  semakin  meningkat [9]. Penelitian terdahulu yang memiliki tujuan penelitian  melakukan  perincian  desain  dan analisis  yang  berfokus  pada  pengguna  dari sistem touchscreen elektrostatis untuk
menampilkan informasi visual berbasis grafik untuk  individu  yang  mengalami  gangguan pada  penglihatan[10]. Usability umumnya diketahui  sebagai  evaluasi  pemeriksaan  pada aplikasi agar mendapatkan status validasi dan nilai guna. Pada penelitian membahas tentang Pemasaran  Ikan  Untuk  UMKM  dan  Nelayan Batam,  perancangan  aplikasi  menggunakan UCD  yakni  melibatkan  pengguna  dalam model  bisnis  pemasarannya,  sehingga  dapat menjangkau  pasar  yang  lebih  luas  dan informasi  yang  tersedia  secara  lengkap.  Hasil penelitian  menunjukkan  skor  SUS  57,  58 yang  berarti  aplikasi  diterima  dengan  baik oleh pengguna [11].
Universitas Gunadarma memiliki website BAAK  Gunadarma,  yaitu  biro  yang menangani  segala  sesuatu  yang  berkaitan dengan  penyelenggaraan  kegiatan  belajar mengajar  dan  administrasi  akademik  bagi seluruh  mahasiswa  Universitas  Gunadarma. Melalui website tersebut,  mahasiswa  dapat mendapatkan  informasi  terkini  terkait  proses akademik  yang  sedang  berlangsung,  seperti jadwal  perkuliahan,  jadwal  ujian,  kalender akademik,  pembagian  kelas,  dan  informasi lainnya.  Pada  penelitian  ini  dilakukan kuesioner  pendahuluan  terhadap  pengguna website BAAK  Gunadarma.  Berdasarkan hasil  kuesioner  yang  dilakukan  kepada  100 responden  mahasiswa  jenjang  S1/D3  aktif yang  melakukan  kegiatan  perkuliahan  pada periode semester ganjil 2023/2024 Universitas
Gunadarma  dari  berbagai  jurusan,  diperoleh bahwa  78%  mengatakan  bahwa website BAAK Gunadarma perlu dilakukan perbaikan dari  tampilan  desain website diantaranya desain tata letak, penggunaan warna dan jenis huruf,  tampilan  menu  yang  terlalu  banyak pada halaman awal, terdapat bagian yang ber- ulang  sehingga  pengguna  merasa  kebingungan dalam menggunakan website , khususnya 35% dari  responden  yang  merupakan  mahasiswa angkatan 2023 sebagai pengguna baru merasa website tersebut membingungkan.
Berdasarkan  permasalahan  tersebut, penulis  ingin  melakukan  penelitian  terkait evaluasi usabilitas website BAAK Gunadarma menggunakan  metode eye  tracking dan  SUS serta  melakukan  perbaikan  desain website dengan  pendekatan  UCD.  Penelitian  ini memiliki  tujuan  yaitu  mengevaluasi  tingkat usabilitas  UI website saat  ini  menggunakan metode  SUS  dan eye  tracking ,  dan  membuat perancangan  perbaikan  desain  UI website usulan  menggunakan  UCD,  serta  mengetahui pengaruh  hasil  desain  perbaikan  yang dilakukan  terhadap  tingkat  usabilitas website.
Melalui  penelitian  ini,  diharapkan  dapat mengevaluasi  dan  memberikan  rekomendasi serta  hasil  pengujiannya  mampu  menjadi bahan  pertimbangan  pihak  pengelola  dan pengembang website BAAK  Gunadarma untuk  meningkatkan  kualitas website agar lebih  mudah  digunakan  oleh  mahasiswa Universitas Gunadarma.

## METODE PENELITIAN
Dalam  melakukan  penelitian  pengujian usability maka  prosedur  penelitian  dilakukan sesuai  dengan  teori  yang  ada  pada usability yaitu  merencanakan  uji  usabilitas,  memilih sampel  yang  representatif,  mempersiapkan materi uji dan lingkungan uji yang sebenarnya, melakukan uji usabilitas, menganalisis  data  uji  usabilitas,  melaporkan hasilnya  dan  membuat  rekomendasi  untuk meningkatkan  desain  dan  keefektifan  produk [12].  Pengujian usability pada website menggunakan  metode UCD, eye tracking dan SUS  yang  dalam  penelitian  ini  juga digunakan aplikasi RealEye. RealEye merupakan  salah  satu  aplikasi  dalam  studi atau  metode eye  tracking .  RealEye  dapat menganalisis  data  dari  browser  web.  Hasil dari pengujian menggunakan aplikasi RealEye  di  antaranya  terdapat heatmap dan gaze  plot . Heatmap merupakan  visualisasi atau  peta  yang  menunjukkan  data  yang diwakili  oleh  warna  yang  berbeda.  Biasanya pada  peta  panas,  semakin  banyak  kumpulan data,  semakin  gelap  warnanya,  biasanya diwakili  oleh  warna  merah.  Sedangkan gaze plot adalah  representasi  grafis  lain  dari temuan  penelitian  pelacakan  mata  [13]. Konsep  dari  UCD  adalah  pengguna  berperan sebagai  pusat  dari  proses  pengembangan sistem,  sifat  dan  tujuan  yang  didasarkan  dari pengalaman  pengguna.  Kunci  utama  dari keberhasilan  metode  ini  adalah  membangun sebuah  kedekatan  antara  pengembang  sistem
atau programmer yang sesuai dengan keinginan pengguna [14].
Tahapan  penelitian  ini  digambarkan dengan diagram alir pada Gambar 1. Diagram Alir Penelitian.
Objek  pada  penelitian  ini  yaitu website BAAK  Gunadarma.  Selanjutnya,  penulis melakukan  kuesioner  pendahuluan  kepada 100  responden  untuk  menentukan  mayoritas permasalahan  utama.  Lalu  mengidentifikasi masalah dilakukan untuk menentukan permasalahan  yang  akan  dipecahkan  dalam penelitian  ini.  Kemudian,  penulis  melakukan studi  literatur  yang merupakan  proses pengkajian  dan  pemanfaatan  berbagai  buku, jurnal,  dan  literatur  relevan  yang  mendukung penelitian ini.
Langkah berikutnya yaitu proses  UCD. Tahapan  pertama  yang  dilakukan  yaitu specify  context  of  use .  Pada  tahapan  awal  ini dilakukan identifikasi awal untuk  mengetahui informasi  kebutuhan,  keluhan,  hambatan,  dan tantangan yang dihadapi pada website BAAK Gunadarma  berdasarkan  hasil  kuesioner pendahuluan.
Tahap  kedua  yaitu specify  user  and organizational requirements dilakukan identifikasi mendalam terhadap tantangan atau kendala  yang  dihadapi.  Pada  tahap  ini  diuji tahap  awal usability  testing dengan  metode eye  tracking serta  kuesioner  SUS  dengan  30 partisipan.  Pengambilan  data eye  tracking menggunakan RealEye.io platform dan webcam dari PC/Laptop, kemudian dilanjutkan dengan pengisian kuesioner SUS dengan Google Form.
Gambar 1. Diagram Alir Penelitian
Proses  mekanisme  pengambilan  data eye tracking diberikan  pada  Tabel  1.  Instrumen pengujian  untuk  SUS  terdapat  sepuluh pernyataan yang menjadi tolak ukur pengujian  dan  dapat  digunakan  untuk
pengujian  bermacam  jenis  pengujian  mulai dari website , sistem informasi dan perangkat  lunak  [15].  Daftar  pernyataan yang diajukan pada kuesioner SUS
diberikan pada Tabel 2.
Tabel 1 Proses Eksperimen Eye Tracking Tahap Instruksi 1 Akses  tautan  studi  RealEye.Io  dan  izinkan  penggunaan  kamera/WebCam  pada perangkat Laptop/PC.
2 Melakukan  proses  kalibrasi  pada  RealEye.Io  dan  ikuti  instruksinya  hingga  proses kalibrasi selesai.
3 Masuk  ke  halaman website BAAK  Gunadarma  dan  mulai  mengerjakan task sesuai dengan waktu yang diberikan.
4 Setelah task dikerjakan  dan  waktu  habis,  partisipan  diarahkan  untuk  mengisi  data  dan kuesioner SUS.
Tabel 2 Pernyataan Kuesioner SUS No Item Pernyataan 1 Saya merasa akan sering menggunakan website BAAK Gunadarma.
2 Saya merasa website BAAK Gunadarma terlalu rumit untuk digunakan.
3 Saya menilai website BAAK Gunadarma mudah untuk gunakan.
4 Saya membutuhkan bantuan dari orang lain atau teknisi dalam menggunakan website BAAK Gunadarma.
5 Saya menilai fitur yang ada pada website BAAK Gunadarma sudah dirancang dan berfungsi dengan baik.
6 Saya merasa terdapat ketidak konsistenan pada website BAAK Gunadarma (fitur/tata bahasa yang digunakan).
7 Saya merasa orang lain akan memahami cara menggunakan website BAAK Gunadarma dengan cepat
8 Saya merasa website BAAK Gunadarma membingungkan.
9 Saya merasa tidak ada hambatan dalam menggunakan website BAAK Gunadarma.
10 Saya perlu membiasakan diri terlebih dahulu sebelum menggunakan website BAAK Gunadarma.
Kuesioner  SUS  terdiri  dari  10 pernyataan,  yaitu  5  pernyataan  positif  dan  5 pernyataan negatif, dengan tanggapan responden  berbentuk  skala  Likert  1–5.  Skala tersebut  menunjukkan  tingkat  persetujuan responden  terhadap  tiap  butir  pernyataan dengan  angka  1  menyatakan  Sangat  Tidak Setuju,  angka  2  menyatakan  Tidak  Setuju, angka  3  menyatakan  Netral,  angka  4 menyatakan  Setuju  dan  angka  5  menyatakan Sangat  Setuju.  Setelah  mengambil  data, dilakukan  uji  validitas  dan  reliabilitas  dari data  kuesioner  SUS  menggunakan software SPSS  versi  22,  jika  data  dari  kuesioner  SUS tersebut  dinyatakan  valid  dan  reliabel  maka
dapat dilakukan proses pengolahan skor SUS. Pengolahan  kuesioner  SUS  dilakukan  untuk mengetahui  tingkat  usabilitas  awal  pada website  BAAK  Gunadarma. Gaze  on  screen dan heatmaps dihasilkan  saat  eksperimen eye tracking berlangsung.  Hasil  pada  tahap  ini akan  dijadikan  acuan  untuk  melakukan perbaikan pada tahap berikutnya.
Tahap  ketiga  yaitu product  design solution dilakukan  berdasarkan  identifikasi pada  tahap  pertama  dan  kedua.  Perancangan desain  UI  dalam  bentuk prototype meng- gunakan  Figma  ( https://www.figma.com/ ) tanpa melalui proses coding dan pemanggilan data melalui database pada UI website BAAK
Gunadarma.  Figma  adalah  salah  satu design tool yang biasanya digunakan untuk membuat tampilan  aplikasi mobile,  desktop,  website dan lain-lain. Figma bisa digunakan di sistem operasi  windows,  linux  ataupun  mac  dengan terhubung ke internet [16].
Tahap  keempat  yaitu evaluate untuk melakukan validasi melalui pengujian terhadap  desain  usulan  perbaikan website BAAK  Gunadarma  yang  telah  dilakukan.
Pada  tahap  ini  proses  pengambilan  data  dan pengolahan data sama seperti pada tahap ke-2 ( Specify  user  and  organizational  requirements ) untuk menguji usabilitas hasil desain perbaikannya.
Berikutnya  yaitu  analisis  hasil  dari hasil  pengolahan  data  pengujian eye-tracking serta  hasil  pengolahan  data  dari  kuesioner SUS  untuk  mengukur  kepuasan  pengguna website serta  analisis  dari  desain  UI website
saat  ini  dan  hasil  perbaikan  yang  telah dilakukan.
Langkah  terakhir  yaitu  kesimpulan  dan saran.  Kesimpulan  akan  memuat  jawaban terhadap  tujuan  penelitian  yang  didapatkan dari  analisis  hasil.  Saran  yang  diberikan merupakan masukan dan pertimbangan developer  website BAAK  serta  penelitian selanjutnya.

## HASIL DAN PEMBAHASAN

## Specify Context of Use
Proses  identifikasi  dimulai  dengan melakukan  observasi  terhadap  desain website BAAK  Gunadarma  saat  ini,  kemudian melakukan  analisis  dari  kuesioner  pendahuluan guna  mengidentifikasi  dan  mendapatkan informasi  mengenai  pendapat  pengguna terhadap website BAAK Gunadarma.
Berikutnya  membuat user  persona yaitu pendekatan yang dapat digunakan untuk memahami  pengguna  dan  merepresentasikan tujuan  dan  kebutuhan  pengguna  dalam menggunakan  suatu  produk  ataupun website.
User persona digunakan
untuk merepresentasikan  karakteristik  pengguna aplikasi  atau website guna  menganalisis tujuan,  kebutuhan,  perilaku,  dan  keresahan yang dialami pengguna. Pada pembuatan user persona ini  adalah  data  deskriptif  tentang pengguna  yang  didapatkan  dengan  kuesioner pendahuluan terhadap 100 responden
mengenai kebutuhan, keluhan, hambatan, dan tantangan yang dihadapi dalam  menggunakan website BAAK Gunadarma. Berikut merupakan rangkuman user persona pengguna website disajikan  dalam  Tabel  3 User Persona.
Specify User and Organizational

## Requirements
Melakukan  identifikasi  lebih  lanjut mengenai  kendala  yang  dihadapi  oleh  peng- guna pada tahapan ini untuk  dapat membantu dalam rekomendasi modifikasi desain.
Tabel 3 User Persona User Persona Demographic Berjenis kelamin perempuan dan laki-laki
Mahasiswa Aktif Universitas Gunadarma jenjang S1 dan D3 Pengguna website BAAK Gunadarma Struggle
1. Tata  letak  atau layout terlalu  padat  sehingga  sulit  untuk  mencari  informasi yang dituju, dan terdapat bagian yang kosong pada layout
2. Menu pada navigasi terlalu banyak
3. Terdapat  bagian  yang  berulang  atau  yang  sama  pada  bagian  menu  navigasi dan side bar sehingga membingungkan
4. Tulisan berjalan mengganggu
5. Bagian kotak pencarian jadwal kelas pada header mengganggu estetika
6. Tidak terdapat fitur pencarian pada website
7. Warna  keseluruhan  pada website terlalu  polos  dan  berbeda  dengan  tema warna website Gunadarma lainnya.
8. Penggunaan jenis huruf yang tidak menarik
9. Penggunaan bahasa yang tidak konsisten (Bahasa Indonesia dan Inggris)
10. Tidak terdapat alamat atau lokasi Loket BAAK.
Needs &
Expectations 1. Tata letak atau layout yang sederhana dan ringkas
2. Menu navigasi tidak terlalu banyak
3. Menghilangkan bagian yang berulang/sama
4. Menghilangkan bagian tulisan berjalan
5. Menghilangkan kotak pencarian jadwal kelas pada header
6. Menambahkan fitur pencarian pada website
7. Mengganti  warna  tema  pada website dengan  warna  yang  selaras  dengan tema Universitas Gunadarma
8. Mengganti jenis huruf
9. Menggunakan  bahasa  Indonesia  pada  semua  bagian  kecuali  yang menggunakan istilah Bahasa Inggris
10. Menambahkan Lokasi BAAK
Proses  yang  dilakukan  pada  tahap  ini  yaitu pengujian  usabilitas  tahap  awal  pada website BAAK Gunadarma saat ini.
Hasil  eksperimen eye  tracking akan dianalisis secara visual menggunakan heatmaps from fixations dan heatmaps from gazes yang merupakan  output  pada platform RealEye.Io.
Heatmaps from fixations dan from gazes yang disajikan  terdiri  dari  hasil  eksperimen eye tracking gabungan heatmaps dari 30 partisipan. Berikut  ini  merupakan  Gambar  3 Heatmaps from  Fixations dan from  Gazes pada  Desain Website BAAK Gunadarma saat ini.
Berdasarkan  gambar  3, heatmaps  from fixations dan from  gazes pada  desain website BAAK  Gunadarma  saat  ini,  menunjukkan titik  fiksasi  dan saccade pandangan  mata
partisipan.  Gambar  3  mewakili  konsentrasi fiksasi  pada  pengamatan  halaman  beranda. Area  panas  yang  ditandai  warna  merah menunjukkan  area  yang  paling  lama  ditatap oleh  partisipan.  Sehingga  area  tersebut memiliki  konsentrasi  fiksasi  paling  tinggi diikuti  oleh  kuning,  hijau,  dan  biru.  Area panas  pada  bagian  halaman  beranda website BAAK  Gunadarma  saat  ini  terdiri  dari  kotak pencarian jadwal perkuliahan, gambar background pada header , kalender akademik, side  bar  jadwal  akademik  ganjil,  pelayanan loket,  info  pembagian  kelas,  dan  berita. Terdapat    komponen  atau  bagian  yang  tidak menjadi  perhatian  partisipan  yaitu  isi  menu navigasi,  tabel  kalender  akademik, side  bar bagian  bawah,  berita,  dan live  chat .
Gambar 3 Heatmaps from Fixations (kiri) dan from Gazes (Kanan) pada Desain Website BAAK Gunadarma Saat Ini
Gambar 4 Output AOI Metrics dari Heatmaps Desain Website BAAK Gunadarma saat ini
Berdasarkan  gambar  4,  pada  halaman beranda website BAAK  Gunadarma  saat  ini, waktu  fiksasi  pertama  atau time  to  first fixation (TTFF) yaitu 0,51 detik, first fixation duration (FFD) 0,39 detik, time spent sebesar 14,37  detik,  terdapat  50  titik  fiksasi,  durasi fiksasi atau Duration of Fixation (DOF) rata- rata 0,29 detik. Waktu gazes pertama (TTFG) yaitu  0,52  detik, time  spent sebesar  16,88 detik,  terdapat  780 gazes dan  jumlah kunjungan  kembali  atau revisits sebanyak  5 kali.  Urutan pandangan partisipan pada website RealEye.Io diekstraksi dalam bentuk video.
Pada  analisis  visual eye  tracking ,
terdapat data berupa grafik yang menunjukkan rangkuman atensi visual gabungan  semua  partisipan.  Grafik  tersebut menunjukkan  data  fiksasi, saccade ,  dan perubahan  emosi  gabungan  30  partisipan selama  melakukan  simulasi.  Grafik  tersebut dapat dilihat pada Gambar 5.
Gambar  5  menunjukkan  rangkuman data  fiksasi  dan  saccade  30  partisipan  selama masing-masing 20 detik. Titik fiksasi ditunjukkan dalam bentuk koordinat X dan Y
pada  layar  komputer.  Data saccade disajikan sebagai  kecepatan  dalam  persen  secara diagonal  per  detik.  Kecepatan  akan  berubah jika  koordinat  X  dan  Y  berubah.  Selain  itu, terdapat  grafik  yang  mewakili  perubahan atensi  visual  dan  emosi  partisipan  selama simulasi yang diberikan pada Gambar 6.
Berdasarkan  gambar  6,  grafik  atensi dan  emosi  dideteksi  dengan  3  aspek  yaitu happy berdasarkan  gerakan  mengangkat  pipi dan  menarik  sudut  bibir  (senyum), surprise berdasarkan  gerakan  mengangkat  alis,  sedikit menaikkan kelopak atas, dan menganga, serta emosi  netral,  berdasarkan  kurangnya  gerakan menarik  bibir,  kurangnya  gerakan  alis,  dan kurangnya  pembukaan  mulut.  Selain  itu, terdapat  parameter Attention yang  menunjuk- kan  tingkat  perhatian.    Jika attention >  0 berarti  fiksasi  yang  relatif  panjang  yang diikuti  oleh  amplitudo saccade yang  pendek dan  jika attention <  0  berarti  fiksasi  yang relatif  singkat  yang  diikuti  oleh  amplitudo saccade yang  relatif  panjang.  Pada  grafik  di Gambar  6,  parameter attention dinormalisasi, sehingga  rentangnya  dari  -1  hingga  1.
Gambar 5 Grafik Fiksasi dan Saccade pada Desain Website BAAK Gunadarma Saat Ini
Gambar 6 Grafik Atensi dan Emosi pada Desain Website BAAK Gunadarma saat ini
Rata-rata  tingkat  perhatian  dari  30  partisipan pada bagian beranda website BAAK Gunadarma adalah 0,3.
Hasil  pengolahan  data  (SUS)  uji usabilitas  tahap  awal  pada  Tabel  4,  rata-rata skor  SUS  yaitu  sebesar  50,917  menunjukkan bahwa  tingkat  usabilitas  pada website BAAK Gunadarma  saat  memiliki grade F  dan range rata-rata skor SUS 0 – 60,1 serta adjective rating yaitu OK dengan acceptability range (jangkauan penerimaan) yaitu marginal low (batas terendah) sehingga  perlu  dilakukan  perbaikan  pada tampilan desain UI website BAAK Gunadarma.

## Product Design and Solutions
Di  tahap  ini  dilakukan  perancangan perbaikan dari website berdasarkan hasil yang didapatkan  melalui  tahapan  sebelumnya sebagai  solusi  dari  permasalahan  yang  telah diidentifikasi  pada  tahap  sebelumnya.  Proses ini dilakukan  dengan  perancangan  desain usulan  halaman  beranda website BAAK Gunadarma.
Berikut  ini  merupakan  hasil prototype pada  halaman  beranda website BAAK
Gunadarma  berdasarkan  hasil  dari  tahapan sebelumnya, disajikan pada Gambar 7. Tabel 4 Pengolahan Data Nilai SUS Awal Responden Ke- Pernyataan Total perhitungan SUS Nilai SUS P1 P2  P3 P4 P5 P6  P7 P8 P9 P10 1 4 5 2 5 3 1 4 2 3 1 22 55 2 5 4 3 2 3 1 3 3 2 4 22 55 3 4 5 4 5 2 4 3 2 3 1 19 47,5 … 30 3 4 5 3 1 5 1 1 1 1 19 47,5 Total 1527,5 Rata-rata 50,917
Gambar 7 Tampilan Halaman Beranda Website BAAK Gunadarma Usulan
Evaluate
Tahap evaluate ini  dilakukan  validasi dengan  uji  usabilitas  tahap  akhir  terhadap hasil  perbaikan website ,  sehingga  dapat mengetahui signifikansi perubahan dari sebelum dan sesudah dilakukannya product design and solutions berdasarkan  permasalahan  yang telah diidentifikasi.
Setelah  membuat prototype pada  tahap product design and solutions terhadap website BAAK  Gunadarma,  dilakukan  pengujian usabilitas tahap akhir untuk mengevaluasi dan memvalidasi  hasil  dari  desain  perbaikan tersebut. Langkah pada proses ini sama dengan pada tahap kedua uji usabilitas tahap awal.
Hasil  eksperimen eye  tracking akan dianalisis secara visual menggunakan heatmaps from fixations dan heatmaps from gazes yang merupakan  output  pada platform RealEye.Io.
Heatmaps from fixations dan from gazes yang disajikan  terdiri  dari  hasil  eksperimen eye tracking gabungan heatmaps dari 30 partisipan. Berikut  ini  merupakan  Gambar  8 Heatmaps from  Fixations dan from  Gazes pada  Desain Website BAAK Gunadarma Usulan.
Berdasarkan  gambar  8, heatmaps  from fixations atau  peta  panas  dari  fikasi  pada desain website BAAK  Gunadarma  saat  ini, menunjukkan  titik  fiksasi  dan saccade pandangan mata partisipan.
Gambar  8  mewakili  konsentrasi  fiksasi pada  pengamatan  halaman  beranda.  Area panas yang ditandai warna merah menunjukkan  area  yang  paling  lama  ditatap oleh  partisipan.  Sehingga  area  tersebut memiliki  konsentrasi  fiksasi  paling  tinggi diikuti  oleh  kuning,  hijau,  dan  biru.  Area panas  pada  bagian  halaman  beranda website BAAK  Gunadarma  usulan  hampir  seluruh bagian  menjadi  arena  panas  Logo,  Menu Navigasi,  Kotak  pencarian,  Penjelasan  BAAK, FAQ,  Gambar  gedung  kampus  Universitas Gunadarma, judul Kalender Akademik (beserta tombol unduh), header berita, Jadwal Akademik,  Informasi  Mahasiswa,  Jadwal Pelayanan Loket, Footer ( All rights reserved ).
Terdapat    komponen  atau  bagian  yang  tidak menjadi  perhatian  partisipan  yaitu live  chat , isi  tabel  kalender  akademik,  judul  berita,  dan logo alamat pada footer .
Gambar 8 Heatmaps from Fixations (kiri) dan from Gazes (Kanan) pada Desain Website BAAK Gunadarma Usulan
Gambar 9 Output AOI Metrics dari Heatmaps Desain Website BAAK Gunadarma Usulan
Gambar 10 Grafik Fiksasi dan Saccade pada Desain Website BAAK Gunadarma Usulan
Gambar 11 Grafik Atensi dan Emosi pada Desain Website BAAK Gunadarma Usulan
Berdasarkan  gambar  9,  pada  halaman beranda website BAAK  Gunadarma  usulan, waktu  fiksasi  pertama  atau time  to  first fixation (TTFF) yaitu 0,89 detik, first fixation duration (FFD) 0,26 detik, time spent sebesar 15,64  detik,  terdapat  55  titik  fiksasi,  durasi fiksasi atau Duration of Fixation (DOF) rata- rata 0,28 detik. Waktu gazes pertama (TTFG) yaitu  0,95  detik, time  spent sebesar  18,89 detik,  terdapat  809 gazes dan  jumlah kunjungan  kembali  atau revisits sebanyak  2 kali.  Urutan  pandangan  partisipan  pada website RealEye.Io  diekstraksi  dalam  bentuk video.
Pada  analisis  visual eye  tracking , menunjukkan rangkuman atensi visual menunjukkan  data  fiksasi, saccade ,  dan perubahan  emosi  gabungan  30  partisipan
selama  melakukan  simulasi.  Grafik  tersebut dapat dilihat pada Gambar 10.
Gambar  10  menunjukkan  rangkuman data fiksasi dan saccade 30 partisipan selama masing-masing 20 detik. Titik fiksasi ditunjukkan dalam bentuk koordinat X dan Y pada  layar  komputer.  Data saccade disajikan sebagai  kecepatan  dalam  persen  secara diagonal  per  detik.  Kecepatan  akan  berubah jika  koordinat  X  dan  Y  berubah.  Grafik  yang mewakili  perubahan  atensi  visual  dan  emosi partisipan  selama  simulasi  diberikan  pada Gambar 11.
Plot  pada  Gambar  11,  parameter attention dinormalisasi,  sehingga  rentangnya dari  -1  sampai  1.  Rata-rata  tingkat  perhatian dari  30  partisipan  pada  bagian  beranda website adalah 0,11.
Tabel 5 Pengolahan Data Nilai SUS Akhir Responden Ke- Pernyataan Total perhitungan SUS Nilai SUS P1  P2  P3 P4  P5  P6  P7  P8  P9  P10 1 5 1 4 2 3 3 4 4 5 4 27 67,5 2 5 3 5 3 5 3 5 4 5 4 28 70 3 5 1 4 2 5 2 5 1 5 1 37 92,5 … 30 5 3 5 1 5 2 5 3 5 5 31 77,5 Total 2512,5 Rata-rata 83,75
Hasil  pengolahan  data  SUS  disajikan pada  Tabel  5.  Berdasarkan  Tabel  5,  rata-rata skor  SUS  yaitu  sebesar  83,75  menunjukkan tingkat  usabilitas  pada website BAAK Gunadarma usulan  yaitu  dengan grade B  dan range rata-rata  skor  SUS  80  –  85,1  serta adjective rating yaitu GOOD dan acceptability  range yaitu acceptable atau dapat  diterima.  Sehingga  nilai  SUS  hasil  dari perbaikan  pada  tampilan  desain  UI website BAAK  Gunadarma  meningkat  dan  lebih  baik dari nilai usabilitas desain saat ini.

## KESIMPULAN DAN SARAN
Berdasarkan  hasil  pengolahan  data, tingkat  usabilitas  UI website saat  ini  BAAK Gunadarma  menggunakan eye  tracking dan SUS, diperoleh analisis eye tracking dari hasil heatmaps from fixations dan from gazes pada desain  halaman  beranda website BAAK Gunadarma  saat  ini,  menunjukkan  area  yang paling  lama  ditatap  oleh  partisipan  pada bagian  terdiri  dari  kotak  pencarian  jadwal perkuliahan, gambar background pada header ,  kalender  akademik, sidebar jadwal akademik  ganjil,  pelayanan  loket,  info
pembagian  kelas,  dan  berita.  Terdapat komponen  atau  bagian  yang  tidak  menjadi perhatian  partisipan  yaitu  isi  menu  navigasi, tabel  kalender  akademik,  side  bar  bagian bawah,  berita,  dan live  chat .  Berdasarkan hasil  pengolahan  data  SUS,  rata-rata  skor SUS  yaitu  sebesar  50,917  menunjukkan bahwa  tingkat  usabilitas  pada website BAAK Gunadarma  saat  ini  memiliki grade F  dan range rata-rata  skor  SUS  0  –  60,1  serta memiliki adjective  rating yaitu  OK  dan acceptability  range (jangkauan  penerimaan) yaitu marginal  low (batas  bawah)  menjadi dasar  perlu  dilakukannya  perbaikan  pada tampilan desain UI website BAAK Gunadarma. Rekomendasi perancangan desain
perbaikan website BAAK Gunadarma menggunakan  pendekatan  UCD  dibuat  pada tahap product design and solutions berdasarkan  hasil user  persona dan eye tracking . Prototype perbaikan  desain UI halaman  beranda website BAAK  Gunadarma usulan  hasil  dari  penelitian  ini  dapat  diakses melalui link berikut  ini:  Usulan  Desain Perbaikan UI BAAK Gunadarma.
Hasil  desain  perbaikan  yang  dilakukan terhadap website BAAK  Gunadarma,  tingkat
usabilitasnya  mengalami  peningkatan  skor SUS  yang  menandakan  bahwa  perbaikan yang  dilakukan  memberikan  hasil  yang  baik untuk  pengguna,  berdasarkan  rata-rata  skor SUS yaitu sebesar 83,75 menunjukkan tingkat usabilitas website BAAK  Gunadarma  usulan memiliki grade B  dan range rata-rata  skor SUS  80  –  85,1  serta adjective  rating GOOD
dan acceptability range (jangkauan
penerimaan) yaitu acceptable atau  dapat diterima.  Sehingga  nilai  SUS  hasil  dari perbaikan  pada  tampilan  desain  UI website BAAK  Gunadarma  meningkat  dan  lebih  baik dari nilai usabilitas desain saat ini.
Saran untuk penelitian selanjutnya terkait evaluasi website BAAK  Gunadarma  dapat dikembangkan  dengan  menggunakan  metode atau  teknik  lain  yang  mempertimbangkan faktor  selain  mata,  misalnya mouse  click dan mengintegrasikan  dengan  metode usability testing yang lain seperti Think-Aloud
Evaluation (TA), Cognitive  Walkthrough (CW),  dan Heuristic  Evaluation (HE)  serta peninjauan  terkait aspek accessibility .  Usulan perbaikan  yang  diperoleh  setelah  melakukan pengujian  pada  desain  perbaikan website BAAK  Gunadarma  dapat  dipertimbangkan untuk  diterapkan  pada  masa  mendatang  oleh pihak pengembang website BAAK Gunadarma.

## DAFTAR PUSTAKA
[1] E.  Saputra,  et  al.,  “ Usability  Testing untuk Mengukur Penggunaan Website ,”
Jurnal Teknik Informatika , 2014.
[2] D.  S.  Carstens,  dan  P.  Patterson,
“ Usability  study  of  travel  websites,”
Journal of Usability Studies pp. 47–61,
2005.
[3] P.  Zaphiris  dan  S.  Kurniawan, Human Computer  Interaction  Research  in Web Design  and  Evaluation .  Pennsylvania:
Idea Group Publishing, 2007.
[4] R.  Karnita,  dan  D.  Meiralarasari, ”Metode  Visual  Interpretatif  Terhadap Tampilan  Visual  Iklan  Media  Cetak Sebagai Alternatif Analisis dari Metode Eye  Tracking ,” J@Ti  Undip:  Jurnal Teknik Industri , vol. 5 no.1, hal. 33–40,
2010.
[5] R. Oyekunle, et  al.,  “ Usability Evaluation  Using  Eye-Tracking  on  E- Commerce  and  Education  Domains,” Journal of Information Technology and Computing ,"  vol.1,  no.  1,  hal.  1–13,
2020.
[6] J. Brooke, “ SUS: A “Quick and Dirty” Usability  Scale.”  Usability  Evaluation in Industry, hal. 207–212, 2020.
[7] A.  Sidik,  “Penggunaan System  Usability
Sca le  (SUS)  Sebagai  Evaluasi Website Berita Mobile ” Technologia  Jurnal Ilmiah , vol. 9, no. 2, hal. 83–88, 2018.
[8] P.  Prihati,  et  al.,  “Penerapan  Model
Human  Computer  Interaction (HCI) dalam  Analisis  Sistem  Informasi,” Jurnal  Sistem  Informasi  Bisnis ,  vol.  1, no. 1, hal. 01–08, 2011.
[9] B.  Pamungkas,  D.  Supriyadi,  dan  S.
Astiti,  “ Website  Satisfaction  Analysis
[10] Using  Usability  Scale  System  in Cilongok  District  Office ,” Journal  of
JUPITER , vol. 13, hal. 39–46, 2021.
[11] A.  Bateman,  dkk,  ” A  User-Centered
Design And Analysis Of An Electrostatic Haptic Touchscreen System For Students With  Visual  Impairments ,” International Journal  Of  Human  Computer  Studies , vol. 109, hal. 102–111, 2018.
[12] A.  Novriansyah,  dan  D.  E.  Kurniawan,
” Pengembangan  Aplikasi  Pemasaran
Ikan Untuk UMKM dan Nelayan Batam dengan  Pendekatan  User  Centered Design  (UCD)  dan  Usability  Testing,” Journal  of  Applied  Computer  Science and Technology , vol. 3, no. 1, hal. 163– 168, 2022.
[13] S.  D.  Purnamasari,  dan  F.  Syakti,
” Implementasi  Usability Testing  dalam Evaluasi  Website  Sekolah, ” Jurnal
SISFOKOM , vol. 9, hal. 420–426, 2020.
[14] F.  Zein,  D.  R.  Ningtyas,  ” Evaluasi Usability pada Website Universitas
Pancasila  Menggunakan  Metode  Eye Tracking  dan  System  Usability  Scale ,”
Jurnal  Media  Teknik  dan  Sistem Industri ,  vol.  7,  no.2,  hal.  122-129,
2023.
[15] M. Iqbal, G. I. Marthasari, I. Nuryasin, ”Penerapan  Metode  UCD  (User Centered  Design)  pada  Perancangan aplikasi  Darurat  Berbasis  Android”
Jurnal  Repositor  UMM,  vol.2,  no.2, hal. 201-214, 2020.
[16] U.  Ependi,  T.  B.  Kurniawan,  and  F. Panjaitan,  “ System  Usability  Scale  Vs Heuristic  Evaluation:  A  Review, ” Simetris  J.  Tek.  Mesin,  Elektro  dan Ilmu Komputer , vol. 10, no. 1, hal. 65– 74, 2019.
[17] M. A. Muhyidin, M. A. Sulhan, dan A.
Sevtiana, “ Perancangan UI/UX
Aplikasi  My  Cic  Layanan  Informasi Akademik  Mahasiswa  Menggunakan Aplikasi  Figma ,” Jurnal  Digit ,  vol.
10(2), hal. 208-219, 2020.