## PERANCANGAN USER INTERFACE WEBSITE “website X”

## UNTUK MENINGKATKAN USER EXPERIENCE MENGGUNAKAN METODE HUMAN CENTERED DESIGN
Rozan Fajri Irfani
Program Studi Sistem Informasi S1, Fakultas Teknologi Informatika, Institut Teknologi Telkom Purwokerto Jl. DI Panjaitan No.128, Karangreja Banyumas, Indonesia
Rozanirfani17@gmail.com

## ABSTRAK
Perkembangan teknologi informasi memberikan dampak signifikan dalam menyediakan informasi kepada pengguna.  Hal  ini  tercermin  dalam  penggunaan website sebagai  sarana  untuk  berpromosi  dan  menyampaikan informasi.  Era  digital  memanfaatkan  teknologi  dalam  hampir  semua  aspek  kehidupan,  termasuk  dalam pembangunan website yang menghadirkan inovasi kepada masyarakat. Dalam lingkungan ini, dukungan terhadap teknologi digital semakin tinggi. Namun, terdapat tantangan dalam perancangan antarmuka pengguna (UI) pada website , seperti yang dialami oleh website "Si Dimas". Beberapa masalah yang muncul antara lain tata letak yang tidak  sesuai,  konten  yang  tidak  tepat,  dan  resolusi  konten  yang  terlalu  besar.  Tujuan  dari  penelitian  ini  adalah menciptakan antarmuka pengguna yang menarik dan mudah digunakan pada website "Si Dimas", serta merancang poster  infografis  yang  lebih  mudah  dipahami.  Langkah-langkah  perancangan  dilakukan  berdasarkan  prinsip Human Centered Design (HCD), yang berfokus pada pengguna. Metode HCD membantu memahami kebutuhan dan  kebiasaan  pengguna,  serta  merancang  solusi  yang  sesuai  dengan  kebutuhan  mereka.  Hasil  analisis  dan perancangan menunjukkan adanya masalah pada tampilan UI website "Si Dimas". Setelah menerapkan metode HCD,  solusi  yang  dihasilkan  meliputi  penambahan  fitur  "kembali"  untuk  memudahkan  navigasi,  penampilan informasi kontak dan alamat kantor pada footer , penghapusan konten berita yang tidak sesuai, serta peningkatan resolusi  gambar. Selain  itu, desain baru  juga  memperhatikan elemen-elemen seperti  menu  yang  lebih  jelas dan pencarian yang lebih terintegrasi. Kesimpulannya, desain antarmuka pengguna yang baik sangat penting dalam meningkatkan pengalaman pengguna dan kepuasan. Metode Human Centered Design menjadi pendekatan yang efektif  dalam  mengatasi  masalah  perancangan  UI  dan  menciptakan  solusi  yang  sesuai  dengan  kebutuhan pengguna.
Kata kunci : DINKOMINFO, Human Centered Design, User Interface, Website

## 1. PENDAHULUAN
Perkembangan  teknologi  informasi  yang  pesat telah menghadirkan  kemungkinan luas  dalam mengakses informasi melalui website . Era digital telah mengubah  pola  kehidupan  masyarakat,  dengan teknologi  digital  menjadi  bagian  tak terpisahkan  dari berbagai  aktivitas  sehari-hari.  Di  Indonesia, website telah  menjadi  salah  satu  sarana  utama  untuk berkomunikasi  dan  menyampaikan  informasi  kepada masyarakat[1].  Namun,  dalam  proses  perancangan website seperti yang terlihat pada contoh "Si Dimas", terdapat  tantangan  dalam  hal  tata  letak,  konten  yang sesuai,  dan  resolusi  yang  memadai.  Kondisi  ini berpotensi  mempengaruhi kenyamanan dan kepuasan pengguna  ketika  mengakses website tersebut.  Oleh karena  itu,  analisis  yang  komprehensif  diperlukan untuk  menemukan  metode  perancangan  yang  paling sesuai dalam mengatasi tantangan ini.

## 2. TINJAUAN PUSTAKA
Dalam  konteks  penelitian  ini,  tinjauan  pustaka menguraikan  konsep-konsep  yang  relevan  dengan perancangan  antarmuka website dan  pengalaman pengguna.  Berikut  adalah  beberapa  konsep  yang menjadi landasan teori dalam penelitian ini:
2.1. Website Website atau  yang  dikenal website merupakan kumpulan  halaman  web  dari  topik  terkait,  biasanya dihosting  di  server  web  yang  dapat  diakses  melalui Internet atau jaringan area lokal (LAN)[2]]. sedangkan menurut  ahli  yang  lain. Website adalah  kumpulan halaman  informasi  digital  multi-halaman  yang menampilkan gambar, suara, musik, dan animasi[3].

## 2.2. User interface
Antarmuka  pengguna  (UI)  adalah  layar  desain virtual dari sistem. Sistem tampilan dapat menghubungkan  pengguna  ke  produk.  Tampilan sistem  yang  menarik  dan  mudah  digunakan  dapat meningkatkan  kepuasan  pelanggan.  Komponen  UI sangat penting untuk mencapai website yang baik dan responsif  user-friendly ,  dan  UI  digunakan  untuk mempercantik  tampilan  dan  membuat  sistem  lebih bermanfaat [3].

## 2.3. User experience
Pengalaman  Pengguna  (UX)  adalah  kesan  dan reaksi  yang  diperoleh  melalui  atau  dihasilkan  dari penggunaan suatu produk, sistem, atau layanan (ISO, 2010).  Antarmuka  pengguna  dan  kegunaan  adalah bagian dari pengalaman pengguna[4]. faktor
pendukung  kesuksesan  dalam  pembangunan  suatu sistem mempehatikan kemudahan user dan meminimalisir  kesulitan  user.  User  Experience memberikan pengalaman yang menarik bagi user saat berinteraksi  langsung  dengan  sistem.  Komponen pengalaman  pengguna  mencakup  fungsi  sistem  dan bagaimana sistem berinteraksi dengan pengguna [3].

## 2.4. Human Centered Design
Berikut adalah  metode Human Centered Design pada Gambar 1[5] :
Gambar 1. Metode Human Centered Design
Perancangan website "Si  Dimas"  menggunakan metode Human  Centered  Design .  Metode  ini  ialah memecahkan  suatu  masalah  yang  berpusat  pada manusia  supaya  menghasilkan  solusi-solusi  inovatif yang  berpusat  pada  pengguna  agar  mendapatkan informasi  yang  sesuai. Human  Centered  Design memiliki 3 tahapan yaitu: a. Inspiration Inspiration  merupakan  hal  yang  penting  dalam metodologi  karena  dalam  inspiration  dapat  di ketahui  masalah  dan  meraih  tujuan  yang  akan  di capai  oleh  pengguna  serta  kendala  apa  yang  di hadapi.  Metode  yang  digunakan  dalam  tahapan inspiration yaitu observasi dan merancang tahapan dari masalah pengguna b. Ideation Prada bagian ideation sangat dibutuhkan kreativitas.  Prada  ideation  menggunakan  metode brainstorming  untuk  menemukan  solusi  terbaik. Designer  akan  mengimplementasikan  gagasan yang  telah  dilakukan  pada  tahap  Inspiration kemudian merancangnya.
c. Implementation Implementaion  merupakan  suatu  kegiatan  untuk mencapai tujuan tertentu. Prada tahap Implementation, Ditemukan nya data validasi dari user  untuk  tahap  akhir  guna  menghasilkan  user experience yang memuaskan serta tetap melakukan observasi demi meningkatkan kenyamanan user[6].

## 3. METODE PENELITIAN
Metode yang digunakan adalah Human Centered Design  Metode  ini  merupakan  perancangan  yang berpusat pada pengguna. Saat menerapkan desain yang
berpusat pada manusia, desainer harus memperhatikan kebutuhan  dan  kebiasaan  pengguna  yang  menjadi fokus desain produk[4].

## 4. HASIL DAN PEMBAHASAN

## 4.1. Analisis
Tahap  awal  dilakukan  dengan  menganalisis website "Si Dimas" terutama pada tampilan antarmuka pengguna  (UI)  seperti  font,  tombol,  tata  letak,  dan gambar.  Tujuan  analisis  adalah  untuk  menciptakan kenyamanan  bagi  pengguna  saat  mengakses  situs tersebut. Contohnya, pada Gambar 2, 3, dan 4 terlihat tampilan yang sedang dianalisis.
Gambar 2 Website sebelum perancangan
Gambar 3. Website sebelum perancangan
Gambar 4. Website sebelum perancangan

## 4.2. Inspiration
Pada  tahap  ini,  masalah-masalah  yang  dihadapi oleh pengguna diidentifikasi. Hasil observasi menunjukkan  beberapa  permasalahan  pada  tampilan UI website "Si  Dimas"  seperti  yang  tercantum  pada Tabel  1.  Solusi  untuk  setiap  masalah  diidentifikasi agar dapat mengatasi permasalahan yang ada.
Table 1. solusi terhadap pengamatan
No Solusi Observasi
1. Memberikan tools kembali / back , agar membantu pengguna dalam kembali ke halaman sebelumnya
2. Menampilkan alamat kantor, nomer telfon, peta, usul data dan statistik pengunjung pada bagian footer sebagai informasi kepada pengunjung.
3. Menghapus konten berita pada home page dan membuat menu baru
No Solusi Observasi 4. Memberikan underline pada menu guna memudahkan user dan menandai saat berada di menu
5. Mengecilkan resolusi image yang terlalu besar dan memakan tempat
6. Menampilkan pencarian pada home page

## 4.3. Ideation
Dalam  tahap  ini,  dimulai  dengan  merancang kerangka  kerja  yang  sederhana  dan  melakukan brainstorming  untuk  memvalidasi  ide.  Solusi-solusi yang  dihasilkan  akan  membantu  mengatasi  masalah yang  diidentifikasi  sebelumnya.  Hasil  dari  analisis permasalahan akan membantu merancang solusi yang tepat. Contohnya, pada Gambar 4.3, 4.5, 4.6, dan 4.7 terlihat hasil desain yang telah dibuat untuk mengatasi permasalahan pada UI website .
Gambar 5. Website Si Dimas Gambar 6. Website Si Dimas
Gambar 7. Website Si Dimas

## Gambar 8. Website Si Dimas

## 4.4. Implementation
Setelah  tahap  Inspiration  dan  Ideation,  tahap terakhir adalah Implementasi. Ini melibatkan penerapan  solusi  yang  telah  dirancang  sebelumnya. Hasil evaluasi dari tahapan sebelumnya diimplementasikan  pada  halaman  home  page. Beberapa  solusi  yang  diimplementasikan  antara  lain memberikan tombol kembali, menampilkan informasi kontak  dan  statistik  pengunjung  pada  bagian  footer, menyederhanakan tampilan berita, dan lainnya.
Dengan  mengikuti  langkah-langkah  di  atas, perancangan  dan  pembahasan  pada website "Si Dimas"  berhasil  mengatasi  permasalahan  pada tampilan  antarmuka  pengguna  dan  meningkatkan pengalaman pengguna secara keseluruhan.
Pengujian  dilakukan  dengan  cara observasi langsung  kepada  Masyarakat  pengguna website “Si Dimas”. Berdasarkan observasi yang dilakukan dapat di  katakana  bahwa  pengguna  lebih  puas  dengan tampilan website yang baru.

## 5. KESIMPULAN DAN SARAN
Desain  User  Interface  sangat  penting  untuk meningkatkan  jumlah  pengguna,  Poster  infografis memudahkan  informasi  lebih  singkat  dan  mudah dipahami  dan  kepuasan user experience menentukan menarik  tidaknya website .  sedangkan  saran  Kepada mahasiswa  yang  tengah  menjalani  Praktik  Kerja Lapangan  di  DINKOMINFO  Kabupaten  Banyumas, dianjurkan  untuk  mempersiapkan  diri  dengan mengasah  keterampilan  yang  telah  dipelajari  dan DINKOMINFO  disarankan  untuk  menyusun  Standar Operasional  Prosedur  (SOP)  yang  rinci  mengenai tugas  dan  tanggung  jawab  mahasiswa,  seperti deskripsi  pekerjaan.  Langkah  ini  akan  membantu mahasiswa  memulai  PKL  dengan  lebih  lancar  dan terarah.

## DAFTAR PUSTAKA
[1]  D.  N.  Heny,  “Analisis  User  Interface  dan  User Experience  pada  Website  Sekolah  Tinggi Teknologi Adisutjipto Yogyakarta,” Conf. Senat. STT Adisutjipto Yogyakarta , vol. 2, p. 183, 2016, doi: 10.28989/senatik.v2i0.77.
[2]  Yeni  Susilowati,  “Pengertian  Website  Menurut Para  AhliNo  Title,” www.cnbcindonesia.com , 2022.
https://www.cnbcindonesia.com/tech/20220618 152119-37-348229/7-pengertian-website- menurut-ahli-lengkap-jenis-fungsinya  (accessed Jun. 22, 2022).
[3]  Abdullah  (2015),  “Pengertian  Website  Menurut Para Ahli,” [Online].
Available:
https://www.cnbcindonesia.com/tech/20220618 152119-37-348229/7-pengertian-website- menurut-ahli-lengkap-jenis-fungsinya.
[4]  M. D. Ariawan, A. Triayudi, and I. D. Sholihati, “Perancangan  User  Interface  Design  dan  User Experience  Mobile  Responsive  Pada  Website Perusahaan,” J.  Media  Inform.  Budidarma ,  vol.
4, no. 1, p. 161, 2020, doi:
10.30865/mib.v4i1.1896. [5]  Y.  Firantoko,  H.  Tolle,  and  H.  M.  Az-zahra, “Perancangan User Experience Dengan
Menggunakan  Metode  Human  Centered  Design Untuk  Aplikasi  Info  Calon  Anggota  Legislatif 2019,” J.  Pengemb.  Teknol.  Inf.  dan  Ilmu Komput. ,  vol.  3,  no.  3,  pp.  2798–2806,  2019, [Online].
Available: https://j- ptiik.ub.ac.id/index.php/j- ptiik/article/view/4795.
[6]  A. R. Setiadi and H. Setiaji, “Perancangan UI/UX menggunakan pendekatan HCD (Human- Centered  design)  pada  website  Thriftdoor,” Automata , vol. 1, no. 2, pp. 228–233, 2020.