Jurnal Sistem Informasi, Teknologi Informasi, dan Edukasi Sistem Informasi (JUST-SI) Vol. 4, No. 2, Desember 2023, hlm. 106-118

## EVALUASI DAN PERBAIKAN ANTARMUKA PENGGUNA SITUS WEB BERITA ONLINE SURABAYAPAGI.COM MENGGUNAKAN
METODE WEBUSE DAN HUMAN CENTERED DESIGN (HCD)
Adhinda Dinar Lestari* 1 , Yusi Tyroni Mursityo 2 , Buce Trias Hanggara
1,2,3 Universitas Brawijaya, Kota Malang Email: 1 adhindadinar@student.ub.ac.id, 2 yusi_tyro@ub.ac.id, 3 buce_trias@ub.ac.id
* Penulis Korespondensi
(Naskah masuk: 16 Agustus 2023, diterima untuk diterbitkan: 15 September 2023)

## Abstrak
Surabaya Pagi merupakan media massa yang menyajikan pemberitaan dan memiliki media online  berupa website bernama  Surabayapagi.com.  Situs  web  tersebut  memiliki  beberapa permasalahan terkait antarmuka pengguna diantaranya penataan halaman utama yang kurang baik,  ukuran  gambar  tidak  konsisten,  warna  judul  kategori  tidak  konsisten,  peletakan  iklan mengganggu,  fitur  pencarian  tidak  nyaman  digunakan  karena  berbentuk pop-up ,  beberapa berita  pada  halaman  utama  tidak  terupdate  serta  adanya  beberapa  tautan  tidak  tersedia  dan diarahkan ke halaman kosong. Penelitian ini  bertujuan meningkatkan nilai usability situs web Surabayapagi.com  menggunakan  metode  WEBUSE  yang  terdiri  dari  4  kategori  diantaranya Content,  Organisation  and  Readability,  Navigation  and  Links,  User  Interface  Design dan Performance  and  Effectiveness. Dari  hasil  evaluasi  menggunakan  kuesioner  WEBUSE tersebut, ditemukan  8  permasalahan terkait usability situs web Surabayapagi.com. Perbaikan antarmuka  pengguna  dilakukan  dengan  menerapkan  pendekatan Human  Centered  Design (HCD)  yang  terdiri  dari  4  tahapan  meliputi  menentukan  konteks  pengguna,  spesifikasi kebutuhan  pengguna,  merancang  desain  solusi,  dan  mengevaluasi  desain  solusi.  Hasil  dari penelitian ini didapatkan kesimpulan bahwa dengan melakukan perbaikan antarmuka pengguna dari  situs  web  Surabayapagi.com  dapat  meningkatkan  nilai  usability  yang  berarti  pengguna merasa lebih nyaman menggunakan desain solusi.
Kata kunci : situs web, evaluasi, usability, WEBUSE, Human Centered Design

## EVALUATION AND IMPROVEMENT OF USER INTERFACE ON ONLINE NEWS WEBSITE SURABAYAPAGI.COM USING WEBUSE AND HUMAN CENTERED DESIGN ( HCD ) METHODS

## Abstract
Surabaya  Pagi is  a  mass  media  that  provides  news  and  has  online  media  called Surabayapagi.com .  The  website  has  several  problems  related  to  the  user  interface  including poor main page layout, inconsistent image sizes, inconsistent category title colors, annoying advertisements layout, pop-up search features that makes users uncomfortable, some news on the main page is not updated and some links are not available and redirected to blank pages. This  research  discusses  how  to  increase  website  usability  using WEBUSE methods    which consists  of  4  categories  Content,  Organization  and  Readability,  Navigation  and  Links,  User Interface Design and Performance and Effectiveness. The results of the evaluation using  the
WEBUSE questionnaire,  8  problems  were  found  related  to  the  usability  of  the Surabayapagi.com  website.  Improvements  to  the  user  interface  were  made  by  applying  the Human Centered Design ( HCD ) approach which consist 4 stages Specify the Context of Use, Specify the User Requirements, Produce Design Solutions, and Evaluate the Design Solutions. The  result  of  this  study  is  that  by  making  improvements  to  the  user  interface  of  the Surabayapagi.com website, the usability value can be enhanced significantly, leading users to feel more comfortable using the design solution.
Keywords : website, evaluation, usability, WEBUSE, Human Centered Design

## 1. PENDAHULUAN
Media online mulai menggantikan media konvensional seperti koran dan majalah. Media online merupakan salah satu media massa yang dapat diakses dengan jaringan internet melalui perangkat  seperti  handphone  ataupun  laptop.  Kehadiran  media  online  membuat  berita  atau informasi dapat disebarkan dengan lebih cepat. Selain itu, juga dapat diakses setiap saat dan di mana  pun  melalui  berbagai  situs  web  berita  online.  Penggunaan  situs  web  mempermudah perusahaan media massa dalam menyampaikan informasi dan berita terkini kepada masyarakat.
PT. Surabaya sore merupakan perusahaan yang bergerak di bidang media. Surabaya Pagi merupakan  nama  media  dari  PT.  Surabaya  Sore yang  sudah  berdiri  selama  20  tahun.  Berita Surabaya Pagi disajikan dalam bentuk koran cetak, koran digital atau e-paper, dan secara online di  aplikasi  dan  situs  web  Surabayapagi.com.  Situs  web  berita online Surabayapagi.com menyajikan informasi dan berita dari berbagai macam kategori diantaranya peristiwa, politik, pemerintahan, ekonomi dan bisnis, investigasi, hukum dan kriminal, pendidikan dan teknologi, kesehatan sampai berita infotainment dan internasional. Situs web ini memiliki berbagai fitur seperti headline , kategori berita, pencarian berita, berita terpopuler, berita terbaru, baca berita, bagikan berita ke media sosial, dan berbagai fitur lainnya.
Penanggung Jawab Redaksi Surabaya Pagi menyampaikan bahwa pada situs web berita online Surabayapagi.com dilakukan evaluasi setahun sekali. Perbaikan terakhir pada antarmuka pengguna  dilakukan  sekitar  2  tahun  yang  lalu  diantaranya  penambahan  dan  pengurangan kategori, penambahan  fitur bagikan berita ke media sosial, dan berbagai fitur lain. Meskipun sebelumnya  telah  dilakukan  evaluasi  dan  perbaikan  pada  situs  web  Surabayapagi.com,  akan tetapi  evaluasi  dan  perbaikan  harus  terus  dilakukan  secara  berkala  demi  memenuhi  baik kebutuhan pengguna maupun kebutuhan perusahaan. Selain itu dengan banyaknya kompetitor, situs  web  berita online Surabayapagi.com  harus  mampu  bersaing  untuk  menyajikan  berita terkini yang nyaman dan mudah untuk dibaca oleh pengguna. Evaluasi sebuah situs web perlu dilakukan karena membantu organisasi untuk memantau kinerja  situs web mereka pada periode waktu tertentu, serta memungkinkan untuk melakukan perbandingan kinerja situs web mereka dengan situs web pesaing. (Morrison, 2004 disitasi dalam Suandi, 2017, p.29).
Berdasarkan  wawancara  dengan  pengguna  situs  web  berita  online  Surabayapagi.com terdapat beberapa kendala saat mengakses situs web tersebut. Kendala yang dialami pengguna diantranya penataan halaman utama yang kurang baik, ukuran gambar tidak konsisten, warna judul kategori tidak konsisten, peletakan iklan yang mengganggu, fitur pencarian tidak nyaman digunakan karena berbentuk pop-up , beberapa berita pada halaman utama tidak terupdate serta adanya beberapa tautan tidak tersedia dan diarahkan ke halaman kosong. Dari berbagai kendala yang  disebutkan  diatas,  dapat  disimpulkan  bahwa  situs  web  berita  online  Surabayapagi.com mengalami  permasalahan  terkait usability. Menurut  Parlak  (2011)  situs-situs  berita  perlu memiliki  kemudahan  penggunaan,  efektivitas,  dan  kecepatan  karena  pengguna  memiliki banyak  alternatif  yang  dapat  mengarahkan  mereka  untuk  segera  pindah  ke  situs  lain  hanya
dengan  satu  kali  klik.  Penelitian  ini  dilakukan  untuk  mengatasi  permasalahan  dengan memberikan rekomendasi perbaikan pada desain antarmuka pengguna situs web.
Pengukuran  nilai usability pada  penelitian  ini  akan  dilakukan  menggunakan  metode WEBUSE.  Menurut  Chiew  dan  Salim  (2003)  metode  WEBUSE  berfokus  pada  cara mengevaluasi usability dan penggalian masalah terkait usability sebuah situs web. Pada metode ini  pengguna  diminta  untuk  melakukan  evaluasi  menggunakan  kuesioner  yang  berisi  24 pertanyaan. Hasil  evaluasi  ini adalah  nilai usability dalam  bentuk  angka kemudian dari hasil evaluasi tersebut dapat diketahui permasalahan usability .
Pada penelitian ini perbaikan antarmuka pengguna dilakukan dengan pendekatan Human Centered  Design (HCD)  yang  merupakan  pendekatan  untuk  merancang  desain  dari  sebuah produk (ISO, 2018). HCD memiliki 4 tahapan diantaranya  menentukan konteks penggunaan, spesifikasi kebutuhan pengguna, merancangan desain solusi, dan  mengevaluasi desain solusi. Pendekatan  HCD  diterapkan  pada  penelitian  ini  karena  HCD  merupakan  sebuah  pendekatan yang  bersifat  iterasi,  sehingga  sangat  sesuai  untuk  diterapkan  pada  penelitian  ini  yang  mana akan dilakukan evaluasi desain awal situs web online Surabayapagi.com, perbaikan antarmuka pengguna untuk mencapai desain solusi, dan evaluasi terhadap desain solusi.

## 2. LANDASAN KEPUSTAKAAN
Pada penelitian ini, terdapat beberapa kajian pustaka yang menjadi acuan untuk pengerjaan penelitian  seperti  penelitian  yang  dilakukan  oleh  Helen  Sastypratiwi  dan  Haried  Novrianto (2022). Penelitian ini dilakukan pada website SIPONGI dan LAPAN FIRE HOTSPOT dengan metode  WEBUSE  yang  bertujuan  mendapatkan  masukan  dari  pengguna  terkait  bagaimana efektivitas,  efisiensi,  dan  kepuasan  pengguna  saat  menggunakan website tersebut.  Hasil evaluasi  pada website SIPONGI  mendapatkan  level usability Moderate ,  sedangkan  pada LAPAN FIRE HOTSPOT  mendapatkan  level usability Good . Perancangan desain dilakukan untuk dapat dijadikan rekomendasi dan landasan perbaikan bagi kedua perusahaan maupun bagi penelitian selanjutnya (Sastypratiwi & Novrianto, 2022).
Referensi yang kedua yaitu penelitian oleh Richard Harte et al. tahun 2017. Penelitian ini dilakukan  dengan  tujuan  mengevaluasi  dan  meningkatkan  nilai usability,  human  factor ,  dan pengalaman pengguna dari  sebuah sistem kesehatan terintegrasi  yaitu  sistem Wireless Insole for Independent and Safe Elderly Living (WIISEL).  Metode yang digunakan dalam penelitian ini merupakan pendekatan Human Centered Design yang terbagi dalam 3 fase. Fase pertama fokus pada pembuatan dokumen use case yang melibatkan wawancara dengan penguna  untuk mendeskripsikan konteks penggunaan sistem dengan menggunakan storyboard, wireframe, dan mock-up . Kemudian fase kedua berfokus pada inspeksi usability oleh ahli, seperti melakukan evaluasi heuristik dan cognitive walkthroughs untuk menilai prototype yang dibuat berdasarkan hasil dari fase pertama. Terakhir, fase ketiga yaitu melakukan pengujian dengan pengguna akhir untuk  mengukur  pengalaman  pengguna.  Pelitian  ini  berhasil  mengimplementasikan  metode Human Centered Design untuk merancang dan  mengembangkan sistem deteksi dan prediksi jatuh pada lansia (Harte, et al., 2017).
User  Interface  Design atau  desain  antarmuka  pengguna  merupakan  gambaran  aspek tampilan  dari  suatu  perangkat,  seperti  komputer, handphone dan  perangkat  lainnya,  yang berhubungan secara langsung dengan pengguna (El Ghiffary, et al., 2018). Desain antarmuka pengguna yang bagus tidak hanya mempertimbangkan aspek estetika, akan tetapi sistem juga harus berfungsi  dengan  baik.  Perancangan  desain  antarmuka  pengguna harus mempertimbangkan  aspek  fungsional  dan  tidak  hanya  fokus  pada  aspek  estetika  visual. Sehingga dapat mempermudah pengguna menyelesaikan tugas dengan baik.
WEBUSE atau Web Usability Evaluation  Tool merupakan sistem evaluasi  berbasis web yang dapat mengukur nilai usability  berbagai macam situs web dan domain. Metode evaluasi usability merupakan evaluasi yang menggunakan kuesioner sehingga bisa membantu pengguna
Adhinda Dinar, dkk, Evaluasi dan Perbaikan Antarmuka Pengguna …   109
dalam memberikan penilaian terhadap aspek-aspek usability di situs web yang akan dievaluasi (Chiew & Salim, 2003).
Menurut  ISO    (2018) Human  Centered  Design (HCD)  merupakan  suatu  pendekatan  di dalam  pengembangan  sistem  interaktif.  Tujuannya  adalah  menciptakan  sistem  yang  berguna dan bermanfaat  dengan fokus  pada kebutuhan  manusia selama proses pengembangan. Selain itu,  juga  bertujuan  untuk  merancang  suatu  sistem  interaktif  yang  dapat  digunakan  dengan efektif dan efisien dengan menerapkan faktor ergonomis. Dalam pendekatan HCD, pengguna selalu  dilibatkan  pada  setiap  tahap  pengembangan,  dan  tahapan  tersebut  dilakukan  secara iteratif atau terus berulang jika kebutuhan pengguna belum terpenuhi.

## 3. METODOLOGI PENELITIAN

## Gambar 1. Tahapan Penelitian
Tahapan  pertama  pada  penelitian  ini  adalah  melakukan  studi  literatur  dengan  tujuan mencari  referensi  terkait  teori  yang  relevan  melalui  buku,  skripsi,  jurnal,  dan  situs  resmi. Analisis  konteks  awal  yaitu  melakukan  wawancara  terhadap stakeholder dengan  tujuan mengumpulkan  data  dan  informasi  lebih  rinci  tentang  situs  web  untuk  mengidentifikasi kelompok  pengguna,  karakteristik  pengguna,  karakteristik  lingkungan  sistem.  Evaluasi  awal situs web dilakukan menggunakan kuesioner WEBUSE yang berisi 24 pertanyaan. Penyebaran kuesioner dilakukan secara online melaui berbagai media sosial dengan memanfaatkan Google
Form  mulai  tanggal  16  April  2022  –  24  April  2022  kepada  30  responden  yang  memenuhi persyaratan  dan  karakteristik  pengguna.  Data  dari  kuesioner  selanjutnya  akan  diolah  guna mendapatkan nilai usability dan mengidentifikasi permasalahan usability. Permasalahan yang dievaluasi yaitu pernyataan WEBUSE yang memiliki nilai usability poor dan moderate . Perancangan desain solusi dilakukan  menggunakan pendekatan HCD  yang terdiri dari 4 tahapan. Pada tahap analisis konteks penggunan dilakukan wawancara terhadap 8 responden yang  sebelumnya  mengikuti  evaluasi  awal.  Wawancara  dilakukan  dengan  2  tahap  yaitu wawancara untuk mengidentifikasi konteks pengguna sebagai dasar pembuatan persona untuk mengetahui  demografi,  tujuan,  dan  kendala  pengguna.  Kemudian  wawancara  identifikasi kebutuhan  pengguna  dilakukan  dengan  memberikan  pertanyaan  untuk  menggali  lebih  dalam terkait kebutuhan pengguna di tiap kategori WEBUSE. Tahap spesifikasi kebutuhan pengguna dilakukan  dengan  melakukan  pemetaan  kebutuhan  pengguna  terhadap  responden  dengan kebutuhan  yang  sama.  Perancangan  desain  solusi  dilakukan  dengan  merancang low-fidelity wireframe dan high-fidelity  prototype menggunakan  aplikasi  Figma.  Evaluasi  pada  desain solusi  kembali  dilakukan  menggunakan  kuesioner  WEBUSE  pada  responden  untuk  menilai usability desain solusi tersebut.
Setelah  tahapan  HCD  selesai,  dilakukan  analisis  dengan  melakukan  perbandingan  pada nilai usability desain awal dan desain solusi. Perbandingan dilakukan untuk mengetahui apakah perancangan desain solusi dapat meningkatkan nilai usability dari situs web Surabayapagi.com. Tahap terakhir adalah kesimpulan yang dibuat untuk menjawab tujuan dan rumusan masalah. Kemudian  saran  bagi  penelitian-penelitian  selanjutnya  yang  dapat  digunakan  sebagai pertimbangan jika melakukan pengembangan sistem.

## 4. ANALISIS DAN EVALUASI DESAIN AWAL
Identifikasi  kelompok  pengguna  dan stakeholder situs web Surabayapagi.com dilakukan dengan  wawancara  kepada  Penanggung  Jawab  Redaksi  Harian  Surabaya  Pagi.  Dari  hasil wawancara  dapat  diketahui  bahwa  pengguna  dari  situs  web  Surabayapagi.com  semua  orang yang  mengakses  dan  mengunjungi  di  situs  web  ini  dan  tidak  ada  persyaratan  khusus. Lingkungan  sistem  yang  diperlukan  untuk  menunjang  evaluasi  yaitu  perangkat  keras  seperti komputer atau laptop, perangkat lunak meliputi browser seperti Google Chrome atau Microsoft Edge,  serta  kelengkapan  lainnya  yaitu  koneksi  internet  yang  stabil.  Kemudian  dilakukan penyebaran kuesioner yang dilakukan secara online melalui sosisal media dengan Google Form pada 30 responden yang sesuai dengan persyaratan pengguna. Responden mengisikan data diri dan memberikan penilaian dengan skala 1-5 pada setiap pernyataan dengan total 24 pernyataan yang terbagi menjadi 4 kategori pada kuesioner WEBUSE. Evaluasi dilakukan setelah semua data  terkumpul  yaitu  dengan  mengkonversikan  jawaban  responden  dari  skala  menjadi  nilai usability tertera pada Tabel 1.
Tabel 1. Skala Penilaian Skala Keterangan Nilai 1 Sangat Tidak Setuju 0,00 2 Tidak Setuju 0,25 3 Kurang Setuju 0,50 4 Setuju 0,75 5 Sangat Setuju 1,00
Setiap pernyataan akan dihitung nilai rata-ratanya berdasarkan jawaban dari 30 responden. Nilai  rata-rata  tersebut  yang  menjadi  nilai  usability  dari  tiap  pernyataan  dan  kemudian dikonversikan menjadi level usability tertera pada Tabel 2.
Adhinda Dinar, dkk, Evaluasi dan Perbaikan Antarmuka Pengguna …   111
Tabel 2. Level Usability Skala Poin Level Usability 0<=x<=0,20 Bad 0,20<x<=0,40 Poor 0,40<x<=0,60 Moderate 0,60<x<=0,80 Good 0,80<x<=1,00 Excellent
Hasil evaluasi WEBUSE pada desain awal situs web secara keseluruhan tiap kategori dapat dilihat pada Tabel 3.
Tabel 3. Nilai Seluruh Kategori Evaluasi Desain Awal No Kategori Nilai Level Usability 1 Content, Organization and Readability 0,70 Good 2 Navigation and Links 0,57 Moderate 3 User Interface Design 0,58 Moderate 4 Performance and Effectiveness 0,62 Good
Dari  hasil  jawaban  yang  telah  diberikan  oleh  responden  maka  diperoleh  beberapa permasalahan yang paling banyak dialami oleh pengguna yaitu setiap pernyataan dengan level usability rendah  yaitu poor dan moderate .  Permasalahan  yang  ditemukan  dari  hasil  evaluasi WEBUSE tertera pada Tabel 4.
Tabel 4. Permasalahan Desain Awal Evaluasi WEBUSE Kategori Kode Permasalahan Level Usability Content, Organization, and Readability MA_1_2  Pengguna sulit menemukan apa yang mereka butuhkan saat menjelajah situs web Moderate MA_1_3  Konten tidak terorganisir dengan baik. Moderate Navigation and Links MA_2_1  Pengguna selalu dapat mengetahui posisi atau keberadaannya Moderate MA_2_4  Tautan tidak dipelihara dan diperbarui dengan baik. Moderate User Interface Design MA_3_1  Desain antarmuka pengguna tidak atraktif atau menarik. Moderate MA_3_6  Situs web menampilkan iklan yang terlalu berlebihan. Poor Performance and Effectiveness MA_4_2  Pengguna sulit membedakan antara tautan yang telah dikunjungi dengan tautan yang belum dikunjungi Moderate MA_4_6  Situs web tidak memberikan pesan error yang jelas dan berguna Moderate

## 5. PERANCANGAN DESAIN SOLUSI
Tahapan  selanjutnya  adalah  merancang  desain  solusi  yang  dilakukan  menggunakan pendekatan  HCD  yang  terbagi  dalam  4  tahapan.  Tahap  pertama  yaitu  menentukan  konteks pengguna,  dimana  akan  dibuat  persona  didasarkan  dari  pengguna  nyata  yang  merupakan representasi  karakter  fiktif.  Persona  menggambarkan  kelompok  pengguna  yang  memiliki berbagai  tujuan  dan  kendala  yang  mereka  alami.  Pembuatan  persona  dilakukan  melalui wawancara yang dilakukan secara tatap muka dengan 8 responden, yaitu 4 respoden perempuan dan  4  responden  laki-laki,  serta  telah  berpartisipasi  pada  evaluasi  desain  awal.  Responden
merupakan penguna yang sering mengakses situs web minimal 3 kali dalam seminggu melalui perangkat komputer atau laptop.
Tabel 5. Hasil Wawancara Identifikasi Konteks Pengguna Responden Demografi Pengguna Tujuan Kendala R_1 Nama : Mariana Usia : 24 Tahun Jenis kelamin: Perempuan Pekerjaan : Editor Mencari berita yang terjadi pada hari ini - Banyak iklan menganggu - Fitur pencarian terlalu seperti membuka jendela baru - Link tautan ada yang tidak bisa berfungsi R_2 Nama: Wahyu Wicaksono Usia : 24 Tahun Jenis kelamin : Laki-Laki Pekerjaan : Staff Exim Ingin mencari berita terupdate - Sub menu / tautan yang tidak bisa dibuka - Penempatan iklan mengganggu R_3 Nama : Meloval Usia : 17 Tahun Jenis Kelamin: Perempuan Pekerjaan : Pelajar Mencari referensi untuk tugas sekolah - Tidak ada kolom komentar - Link untuk share ke sosial media diletakkan di atas isi berita. R_4 Nama : Wisnu Agam Umur: 25 Tahun Jenis Kelamin : Laki-laki Pekerjaan : Freelancer Mencari berita dengan mudah - Iklan video yang mengganggu saat membaca berita R_5 Nama: Merry Andani Umur : 21 Tahun Jenis Kelamin: Perempuan Pekerjaan : Mahasiswa Membaca berita terkini dengan cepat Mencari berita lewat kolom pencarian dengan mudah - Tidak nyaman dengan tampilan pencarian - Kesulitan dalam mencari berita yang sesuai melalui kolom pencarian R_6 Nama : Reyna Hartati Umur : 29 Tahun Jenis Kelamin: Perempuan Pekerjaan : Ibu Rumah Tangga Mencari berita pada kategori pendidikan Mencari info iklan - Tampilan kurang menarik - Tidak dapat menemukan halaman info iklan dan kontak pasang iklan R_7 Nama : Bayu Pradana Umur : 35 Tahun Jenis Kelamin: Laki-laki Pekerjaan : SPV Mencari berita terkini di Surabaya dan sekitarnya Mencari berita dalam bentuk video - Kategori Surabaya Pagi TV  menampilkan halaman kosong - Penempatan iklan mengganggu R_8 Nama : M. Fajar Umur : 25 Tahun Jenis Kelamin: Laki-laki Pekerjaan : Pedagang Membaca berita dengan nyaman Mencari berita olahraga terkini - Terganggu dengan iklan - Kesulitan mencari berita
Setiap  persona  mencakup  beberapa  komponen,  diantaranya  foto,  nama,  demografi (termasuk  usia,  jenis  kelamin,  pekerjaan,  dan  tempat  tinggal),  tujuan,  dan  kendala  yang dihadapi. Persona yang dibuat adalah 3 persona yang merepresentasikan kelompok pengguna yang berbeda-beda. Salah satu persona tertera pada Gambar 2.
Gambar 2. Persona
Dari  wawancara  identifikasi  kebutuhan  pengguna  didapatkan  spesifikasi  terhadap kebutuhan pengguna. Setiap kebutuhan pengguna dipetakan pada responden dengan kebutuhan yang sama. Daftar kebutuhan pengguna tertera pada Tabel 5.
Tabel 6. Kebutuhan Pengguna Kode Kebutuhan Pengguna Responden KP_01 Pengguna ingin tata letak konten halaman utama diperbaiki 1, 2, 3, 4, 6, 7 KP_02 Pengguna ingin tampilan fitur pencarian terlihat jelas dan tidak dalam bentuk pop-up 1, 5 KP_03 Pengguna ingin fitur bagikan berita berada dibagian bawah setelah bacaan berita 3 KP_04 Pengguna ingin ada fitur komentar pada situs web 3, 5 KP_05 Pengguna ingin semua tautan berfungsi dan diarahkan pada halaman yang sesuai 1, 2, 3, 7 KP_06 Pengguna ingin ada halaman Surabaya Pagi TV 4, 7 KP_07 Pengguna ingin mudah dalam menemukan kontak Surabaya Pagi 4, 6 KP_08 Pengguna ingin iklan dikurangi dan penempatan iklan diperbaiki 1, 2, 4, 7, 8
Perancangan desain solusi pada situs web Surabayapagi.com didasarkan pada HCI Design Principle .  Selain  itu  juga  digunakan  aturan  desain  dari Research-Based  Web  Design  & Usability Guidelines dan Google Material Design sebagai pedoman yang lebih mendetail.
Tabel 7. Aturan Desain ID Aturan Desain Aturan Desain Sumber G_01 Mengandung konten yang bermanfaat Research-Based Web Design & Usability Guidelines (Leavitt & Shneiderman, 2003) G_02 Membuat kesan yang baik saat pengguna berada pada halaman utama situs web G_03 Memperhatikan agar tampilan halaman utama terlihat umum dan familiar. G_04 Memastikan visual yang konsisten G_05 Membatasi gambar besar di bagian atas
ID Aturan Desain Aturan Desain Sumber G_06 Penggunaan teks berwarna hitam pada latar belakang terang dan teks berwarna putih pada latar belakang gelap. Google Material Design (2023) G_07 Ikon didesain sederhana bertujuan untuk merepresentasikan hal penting. Bentuk ikon harus memiliki garis tebal, simetris geometris, konsisten, dan bisa dilihat dengan jelas G_08 Penggunaan tipografi yang disesuaikan mulai dari pemilihan font , ukuran, skala pada header, body, button dan caption
Perancangan  desain  solusi  menggunakan  hasil  yang  diperoleh  pada  evaluasi  awal  dan kebutuhan  pengguna  situs  web  Surabayapagi.com.  Pada  penelitian  ini  akan  dilakukan perancangan  disini  akan  dilakukan  perancangan  desain  solusi  berbentuk low-fidelity dengan menggunakan wireframe dan high-fidelity prototype . Wireframe dibuat dengan mengkombinasikan  garis  dan  teks. Wireframe hanya  akan  menggunakan  kombinasi  warna hitam dan putih agar pengguna dapat lebih fokus kepada fungsional dari prototype . Perbaikan tampilan  situs  web  menerapkan  prinsip  desain  HCI oleh  Galitz  (2007  disitasi  dalam  Yatam, 2021) yang meliputi prinsip aesthetically pleasing, availability, clarity, consistency, directness, familiarity, forgiveness, dan simplicity.
Desain  awal  Surabayapagi.com  sudah  mulai  menerapkan  prinsip Aesthetically  Pleasing akan  tetapi  masih  ditemukan  permasalahan  yang  berkaitan  dengan  tampilan  antarmuka penggunanya yang kurang atraktif dan menarik. Komposisi elemen pada halaman utama tidak merata,  terlalu  penuh  dibagian  atas  sampai  tengah  tetapi  pada  bagian  bawah  masih  banyak terdapat blank space . Pada bagian headline dan  berita populer  memiliki tampilan  yang sama dengan  gambar-gambar  berukuran  besar.  Selain  itu,  terlalu  banyaknya  iklan  dan penempatannya yang kurang tepat seperti pada header situs web bisa saja menjadikannya nilai minus pada situs web. Beberapa permasalahan yang telah diuraikan di atas dapat mengurangi nilai estetik situs web yang membuat pengguna memilih untuk tidak menggunakan situs web ini lagi. Desain awal halaman utama situs web Surabayapagi.com bisa dilihat pada Gambar 3.
Gambar 3. Desain Awal Halaman Utama
Perancangan  desain  solusi  yang  menerapkan  prinsip  desain aesthetically  pleasing dilakukan dengan melakukan perbaikan pada tampilan halaman utama dilakukan menggunakan aturan  desain  dengan  kode  G_01,  G_02,  dan  G_03  sebagai  dasar  utama  pembuatan  desain.

## Adhinda Dinar, dkk, Evaluasi dan Perbaikan Antarmuka Pengguna …   115
Kemudian aturan desain dengan kode G_04 dan G_05 digunakan untuk memastikan visual situs web konsisten dan  membatasi gambar  besar di  bagian atas.  Menurut Galitz (2007), halaman depan surat kabar tidak akan terlihat menarik untuk digunakan jika jenis ukuran dan gaya yang sama  digunakan  untuk  semua  komponen  dan  posisinya  berubah  dari  hari  ke  hari.  Untuk  itu kategori  berita  terpopuler  dihapuskan  karena  memiliki  tampilan  yang  hampir  sama  dengan bagian headline selain itu juga untuk menghindari terlalu banyaknya gambar besar di bagian atas halaman. Penggunaan warna juga diperbaiki yaitu warna putih untuk background halaman, warna biru muda dengan kode #3B7FC1 untuk judul kategori, button dan untuk meng- highlight link ,  serta  warna  hitam  untuk  judul  dan body  teks sesuai  dengan  aturan  desain  G_06.  Untuk typography dilakukan  perbaikan  menggunakan Google  Material  Design 3  yaitu  pada  aturan desain  G_07.  Ukuran font untuk  judul  kategori  di  halaman  utama  diperbesar  supaya  terlihat lebih  menonjol.  Penggunaan  simbol  menggunakan  aturan  desain  G_08  untuk tanggal  dibuat lebih konsisten dengan  mengganti simbol  jam dengan simbol kalender, sehingga simbol  jam hanya digunakan untuk merepresentasikan waktu.  Hal-hal tersebut untuk menambahkan kesan estetik dan  meningkatkan pengalaman pengguna supaya  mereka kembali  menggunakan situs web ini. Perancangan desain solusi pada halaman utama untuk memenuhi prinsip aesthetically pleasing terdapat pada Tabel 8.
Tabel 8. Desain Solusi Halaman Utama
Low-Fidelity Wireframe
High-Fidelity Prototype
Setelah  desain  solusi  dibuat  maka  tahap  berikutnya  yaitu  melakukan  evaluasi  pada prototype desain solusi. Evaluasi pada desain solusi menggunakan kuesioner WEBUSE seperti pada  evaluasi  awal  agar  nantinya  bisa  didapatkan  perbandingan  nilai  antara  desan  awal  dan desain solusi. Evaluasi dilakukan pada 30 responden  yang  memenuhi kriteria.  Hasil evaluasi pada desain solusi setiap kategori terdapat pada Tabel 9.
Tabel 9. Nilai Seluruh Kategori Evaluasi Desain Solusi
No Kategori Nilai Level Usability 1 Content, Organization and Readability 0,77 Good 2 Navigation and Links 0,69 Good 3 User Interface Design 0,71 Good 4 Performance and Effectiveness 0,73 Good

## 6. ANALISIS DAN PEMBAHASAN
Pada tahapan ini dilakukan perbandingan antara nilai usability desain awal dengan desain solusi  yang  bertujuan  untuk  mengetahui  apakah  nilai  usability  mengalami  peningkatan  dan sudah memenuhi kebutuhan pengguna seperti pada Tabel 8.
Tabel 10. Perbandingan Niai Seluruh Kategori Antara Tampilan Desain Awal dan Desain Solusi No Kategori Nilai usability desain awal Nilai usability desain solusi 1. Content, Organization and Readability 0,70 0,77 2. Navigation and Links 0,57 0,69 3. User Interface Desain 0,58 0,71 4. Performance and Effectiveness 0,62 0,73
Hasil perbandingan nilai usability antara desain awal dan desain solusi didapatkan bahwa kategori yang mengalami perubahan signifikan adalah Navigation and Link s dan User Interface Design . Kategori Navigation and Links nilai usability naik sebanyak 0,12 poin yang membuat level usability kategori Navigation and Link yang awalnya memiliki level usability moderate naik  menjadi good .  Kategori User  Interface  Design naik  sebanyak  0,13  poin  membuat level usability kategori ini mengalami peningkatan yang awalnya memiliki level usability moderate menjadi good . Peningkatan dari level usability moderate menjadi good berarti dengan adanya perbaikan  pada  desain  antarmuka  pengguna  membuat  nilai usability situs  web  meningkat. Pengguna atau pembaca  merasakan kemudahan dalam  menjelajahi dan  mengakses  informasi yang ada pada desain solusi. Kemudahan dalam menemukan informasi pada situs web media online sangat berpengaruh karena pengguna akan dengan  mudah  beralih pada situs web  lain jika  kesulitan  dalam  menemukan  informasi  atau  berita  yang  mereka  inginkan.  Dengan perbaikan antarmuka pengguna pada situs web Surabayapagi.com, pengguna lebih efektif dan efisien dalam mencari berita. Diagram perbandingan dari hasil evaluasi WEBUSE antara desain awal dengan desain solusi ditampilkan pada Gambar 4.

## Gambar 4. Diagram Perbandingan Hasil Evalasi WEBUSE antara Tampilan Desain Awal Dengan Desain Solusi

## 7. PENUTUP
Hasil  evaluasi tampilan desain awal  situ web  menggunaan  metode WEBUSE pada situs web Surabayapagi.com yaitu terdapat beberapa permasalahan utama yaitu terkait dengan desain antarmuka  pengguna  yang  kurang  menarik,  tata  letak  konten tidak  terorganisir  dengan  baik, tautan  tidak  terpelihara  dengan  baik,  dan  tidak  adanya  pesan  saat  pengguna  melakukan kesalahan.  Permasalahan  tersebut  membuat  pembaca  kesulitan  menemukan  informasi  yang
0.70 0.57 0.58 0.62 0.77 0.69 0.71 0.73 0.00 0.20 0.40 0.60 0.80 1.00 Content, Organization and Readability Navigation and Links User Interface Design Performance and Effectiveness Perbandingan Hasil Evaluasi WEBUSE Desain Awal Desain Solusi

## Adhinda Dinar, dkk, Evaluasi dan Perbaikan Antarmuka Pengguna …   117
mereka  inginkan.  Untuk  itu,  perancangan  desain  solusi  dilakukan  untuk  memberikan rekomendasi yang dapat digunakan untuk perbaikan situs web kedepannya. Desain perbaikan yang  diusulkan  adalah  dengan  menempatkan  informasi  penting  pada  bagian  yang  mudah terlihat, merapikan tata letak konten, membuat semua tautan dapat dengan mudah diakses, dan beberapa perbaikan lain agar tampilan situs web terlihat lebih menarik.
Evaluasi  juga  dilakukan  pada  desain  solusi  menggunakan  metode  WEBUSE  untuk mengetahui perbandingan nilai usability antara desain awal dan desain solusi. Setelah dilakukan perbandingan  diperoleh  hasil  bahwa  seluruh  kategori  WEBUSE  mengalami  kenaikan  nilai usability  setelah  dilakukan  perbaikan  pada  antarmuka  penggunanya.  Pengguna  merasa  lebih nyaman menjelajahi situs web dan lebih mudah dalam menemukan informasi yang mereka cari.
Saran yang bisa digunakan untuk penelitian selanjutnya yaitu diharapkan evaluasi terhadap situs  web  Surabayapagi.com  bisa  dilakukan  dengan  metode  lain  dan  diharapkan  mendapat temuan lebih banyak terkait permasalahan dan kebutuhan pengguna. Evaluasi bisa dilakukan dengan jumlah responden yang lebih banyak untuk menghasilkan data yang lebih akurat.

## DAFTAR PUSTAKA
Adobe,  2017. Prototyping  101:  The  Difference  between  LowFidelity  and  High-Fidelity Prototypes and When to Use
Each. [Online] Tersedia di:
<https://theblog.adobe.com/prototyping-difference-low-fidelity-highfidelity-prototypes- use/> [Diakses 15 February 2022].
Chiew & Salim, 2003. WEBUSE: Website Usability Evaluation Tool.
El Ghiffary, M. N., Susanto, T. D. & Prabowo, A. H., 2018. Analisis Komponen Desain Layout,
Warna,  dan  Kontrol  pada  Antarmuka  Pengguna  Aplikasi  Mobile  Berdasarkan Kemudahan Penggunaan (Studi Kasus: Aplikasi Olride). Jurnal Teknik ITS, Volume 7, p. A143–A148.
Galitz, W. O., 2007. The Essential Guide to User Interface Design. 3rd penyunt. Indianapolis:
Wiley Publishing.
Google Material Design., 2023. Typography . [Online] Tersedia di: https://m3.material.io/styles/typography/ [Diakses 25 Juni 2023].
Harte,  R.  et  al.,  2017.  A  Human-Centered  Design  Methodology  to  Enhance  the  Usability, Human  Factors,  and  User  Experience  of  Connected  Health  Systems:  A  Three-Phase Methodology. JMIR Human Factors , IV(1), pp. 1-21.
ISO, 2010. Ergonomics of Human System Interaction Part 210. Dalam: Human Centered Design For Interactive. 1 penyunt. Switzerland: International Organization for Standardzation.
ISO, 2018. Ergonomics of Human System Interaction Part 11. Dalam:  Usability:  Definitions and Concepts. 2 penyunt. Switzerland: International Organization for Standardzation.
Leavitt, M. & Shneiderman, B., 2003. Research-Based Web Design & Usability Guidelines. Madsen,  Z.  &  Talstoi,  A.,  2018. The  User  Interfase  and  User  Experience  of  Web  Design.
[Online] Tersedia di: <https://www.diva-portal.org/smash/get/ diva2:1217480/FULLTEXT01.pdf> [Diakses 15 Juli 2023].
Nielsen,  J.  &  Norman,  2012. Usability  101:  Introduction  to  Usability. [Online] Tersedia di: <https://www.nngroup.com/articles/usability-101-introduction-tousability/> [Diakses 10 Februari 2022].
Parlak,  E.,  2011.  Redesigning  The  Hürriyet  Newspaper  Website:  A  Case  Study.  [Online] Tersedia  di:  https://research.sabanciuniv.edu/id/eprint/21464/1/EmreParlak_394575. pdf [Diakses 15 Juli 2023].
Pramudhita,  A.  N.,  Arhandi,  P.  P.  &  Sukmadewi,  F.  B.,  2022.  Perancangan  User  Interface Sistem  Informasi  Alumni  Menggunakan  Metode  Webuse  dan  User  Centered  Design. Jurnal Teknologi dan Terapan (J-TIT), 9(1), pp. 29-36.
Sastypratiwi, H. & Novrianto, H., 2022. Evaluasi Usability Pada Website Monitoring
Kebakaran Hutan Menggunakan Metode WEBUSE. Jurnal Teknologi Informasi dan Ilmu Komputer (JTIIK), 9(5), pp. 961-968.
Suandi,  F  &  Winarno,  W.,  2017.  Pengembangan  Model  Evaluasi  Situs  Web  Destination Marketing  Organization  Dari  Perspektif  Efektifitas  dan  Desain  Antarmuka  Perangkat Seluler. Jurnal Ilmiah Ilmu Komputer , 3(1), pp. 28-37. Yatam,  S.  P.,  2021. Evaluation  and  Redesign  of  an  Interactive  System  by  Applying  HCI Principles. [Online]  Tersedia  di:  https://www.diva-portal.org/smash/get/diva2: 1606734/FULLTEXT02.pdf [Diakses 10 Juli 2023].