## Jurnal Sistem Informasi, Teknologi Informasi, dan Edukasi Sistem Informasi (JUST-SI)
Vol. 3, No. 1, Agustus 2022, hlm. 29-44

## PERANCANGAN ANTARMUKA PENGGUNA WEBSITE BATIK TENUN VI MENGGUNAKAN PENDEKATAN HUMAN-CENTERED DESIGN
Darryl Dwi Nugroho *1 , Hanifah Muslimah Az-Zahra 2 , Yusi Tyroni Mursityo 3
1,2,3 Universitas Brawijaya Malang Email: 1 penulis.satu@xmail.ac.id, 2 penulis.tiga@xmail.ac.id, 3 penulis.tiga@xmail.ac.id * Penulis Korespondensi
(Naskah masuk: 31 Januari 2022, diterima untuk diterbitkan: 16 Februari 2022)

## Abstrak
Seiring dengan meningkatnya penggunaan internet di masyarakat, pemasaran melalui internet menjadi peluang bisnis yang menjanjikan bagi pelaku bisnis produk lokal. Hal ini juga berlaku bagi Batik Tenun Vi, yang mengalami kesulitan dalam menggapai pasar yang lebih luas. Batik Tenun Vi mengharapkan dengan adanya sebuah website perusahaan dapat membantu mereka mengatasi kesulitan tersebut dengan meningkatkan brand awareness , kredibilitas bisnis, dan memudahkan pencarian informasi mengenai Batik Tenun Vi. Namun, jika pada website tersebut pengguna tidak dapat menemukan informasi, atau membeli produk dengan mudah, pengguna akan  pergi  ke  situs  lain  dan  mungkin  memberi  tahu  teman  dan  rekan  mereka  mengenai pengalaman  buruk  tersebut.  Karenanya,  penelitian  ini  dilakukan  untuk  menghasilkan  solusi rancangan antarmuka pengguna website Batik Tenun Vi berupa high-fidelity prototype dengan menggunakan  pendekatan Human-Centered  Design, agar website yang  nantinya  akan dikembangkan  dapat  memberikan  pengalaman  yang  baik  kepada  penggunanya.  Untuk memastikan  bahwa  rancangan  solusi  desain  yang  dihasilkan  dapat  memenuhi  kebutuhan pengguna, dilakukanlah evaluasi dengan Usability Testing dan Single Ease Question (SEQ) , serta User Experience Questionnaire (UEQ) . Dari evaluasi ini, rancangan mendapatkan nilai SEQ  di  atas  5,7  pada  hampir  semua  skenario  pengujiannya.  Yang  artinya,  rancangan  solusi desain ini memiliki usability yang cukup baik. Sedangkan untuk user experience- nya, evaluasi menggunakan  UEQ  menunjukkan  bahwa  rancangan  mendapatkan  nilai  rata-rata  2,35  pada skala  Daya  Tarik,  2,29  pada  skala  Efisiensi,  2,36  pada  skala  Ketepatan,  2,08  pada  skala Stimulasi, dan 1,84 pada skala Kebaruan. Artinya, pada lima skala ini, rancangan termasuk pada kategori “ Excellence ” dan hanya satu skala saja yang termasuk kategori “Good” , yaitu pada skala Kejelasan yang mendapatkan nilai rata-rata 2,00.
Kata  kunci : antarmuka  pengguna,  pengalaman  pengguna,  situs  web,  prototype,  Human-Centered Design, UMKM

## USER INTERFACE DESIGN OF BATIK TENUN VI WEBSITE USING HUMAN-CENTERED DESIGN APPROACH

## Abstract
With the increasing use of the internet in Indonesia, marketing through the internet has become a  promising  business  opportunity  for  local  businesses.  This  also  applies  to Batik  Tenun  Vi, which has difficulty in reaching wider range of customers. Batik Tenun Vi hopes that having a
business  website  can  help  them  overcome  this  difficulty  by  increasing  brand  awareness, business credibility, and making it easier to find information about Batik Tenun Vi. However, if on the website the users cannot find information, or buy a product easily, the user will go to another site and may tell their friends and colleagues about the bad experience. Therefore, this study aims to produce the design solution for the user interface of Batik Tenun Vi’s website in the  form  of  a  high-fidelity  prototype  using  Human-Centered  Design  approach,  so  that  the website  that  will  be  developed  will  give  good  experience  for  the  users.  To  ensure  that  the resulting  design  solution  can  meet  user  needs,  an  evaluation  is  carried  out  with  Usability Testing and Single Ease Question (SEQ), as well as User Experience Questionnaire (UEQ). From this evaluation, the design obtained SEQ values above 5.7 in almost all test scenarios. Which  means  that  the  design  has  a  fairly  good  usability.  As  for  the  user  experience,  the evaluation using UEQ shows that the design has an average score of 2.35 on the Attractiveness scale, 2.29 on the Efficiency scale, 2.36 on the  Dependability scale, 2.08 on the Stimulation scale, and 1.84 on the Novelty scale. This means that on these five scales, the design is included in the "Excellence" category and only one scale is included in the "Good" category,  which is the Perspicuity scale that gets an average value of 2.00.
Keywords : user interface , user experience , website , prototype, Human-Centered Design, MSME

## 1. PENDAHULUAN
Teknologi  internet  telah  mendominasi  berbagai  bidang  kehidupan  masyarakat  dalam kesehariannya. Tidak terkecuali, pada bidang bisnis. Seiring dengan meningkatnya penggunaan internet di masyarakat, pemasaran melalui internet menjadi peluang bisnis yang menjanjikan bagi  pelaku  bisnis  produk  lokal.  Batik  Tenun  Vi  merupakan  suatu  usaha  mikro,  kecil,  dan menengah (UMKM) di bidang retail yang menjual berbagai produk kerajinan, seperti pakaian batik,  kain  batik,  aksesoris  manik,  sarung  bantal  sulam,  dan  berbagai  hasil  kerajinan  khas Balikpapan  lainnya.  Salah  satu masalah yang  dihadapi  oleh  Batik  Tenun  Vi  adalah  sulitnya menggapai pelanggan yang lebih luas. Maka dari itu, Batik Tenun Vi mengharapkan dengan adanya sebuah website perusahaan dapat membantu menyelesaikan masalah tersebut  dengan meningkatkan brand  awareness ,  kredibilitas  bisnis,  dan  memudahkan  pencarian  informasi mengenai Batik Tenun Vi. Hal ini didukung dengan statistik yang menunjukkan bahwa 66,6% pengguna  internet  di  Indonesia  menggunakan search  engine sebagai  kanal  utama  dalam melakukan brand research dan di saat yang sama website dari suatu produk atau brand juga menjadi kanal utama bagi 41,6% pengguna internet di Indonesia (Kemp, 2021). Namun, jika pada website tersebut pengguna tidak dapat menemukan informasi, membeli produk dengan mudah, atau tidak mempercayai informasi yang diberikan, pengguna akan pergi ke situs lain dan  mungkin  memberi  tahu  teman  dan  rekan  mereka  tentang  pengalaman  buruk  tersebut. Karenanya, kualitas user experience website menjadi pembeda yang penting bagi organisasi (Sauro, 2016). Maka dari itu, Penelitian ini dilakukan untuk menghasilkan solusi rancangan antarmuka pengguna website Batik Tenun Vi berupa high-fidelity prototype agar website yang nantinya akan dikembangkan dapat memberikan user experience yang baik kepada pengguna. Pendekatan yang digunakan dalam menghasilkan  solusi rancangan antarmuka pengguna ini adalah Human-Centered Design (HCD)  yang dikemukakan oleh International Organization for Standardization . Human-Centered Design (HCD) berkaitan dengan memasukkan perspektif pengguna ke dalam proses pengembangan perangkat lunak untuk mencapai sistem yang dapat digunakan  (Maguire,  2001).  Pendektan Human-Centered  Design ini  juga  digunakan  pada penelitian  yang  dilakukan  oleh  Yatana  Saputri  pada  tahun  2017  yang  dilakukan  untuk merancang sistem e-commerce yang dapat menangani proses penjualan online di Putri Intan Shop yang  memiliki  permasalahan  dalam  menggapai  pasar  yang  lebih  luas.  Penggunaan
pendekatan Human-Centered  Design pada  penelitian  ini  membantu  peneliti  dalam mengidentifikasi stakeholder, mendapatkan  kebutuhan  pengguna,  serta  menghasilkan  solusi desain yang mudah digunakan oleh pengguna.
Dalam mengukur user experience dari sebuah produk atau sistem, salah satu metode yang dapat digunakan adalah User Experience Questionnaire (UEQ). Skala kuesioner ini dirancang untuk  mencakup  kesan  komprehensif  dari  pengalaman  pengguna  dan  format  kuesioner  ini memungkinkan  respon  pengguna  untuk  mengungkapkan  perasaan,  kesan,  dan  sikap  yang muncul  ketika  mereka  menggunakan  suatu  produk  secara  langsung  (Rauschenberger, et  al., 2013). Selain itu, diperlukan pula pengukuran terhadap usability dari solusi desain, yang dapat dilakukan dengan Usability Testing dan Single Ease Question (SEQ). Dalam usability testing, terdapat  partisipan  melakukan  tugas-tugas  atau task yang  diberikan,  dan  evaluator  yang mengamati  perilaku  mereka. Usability  testing dapat  membantu  dalam  mengidentifikasi masalah-masalah  desain  yang  ada  pada  produk,  menemukan  peluang-peluang  solusi,  dan mempelajari tingkah laku dan preferensi dari target pengguna (Moran, 2019). Sedangkan, SEQ merupakan  metode  pengukuran usability dari task yang  dilakukan  dengan  memberikan  1 pertanyaan tentang seberapa mudah task yang baru saja dilakukan pada setiap selesainya sebuah task .

## 2. METODOLOGI PENELITIAN

## Gambar 1. Metodologi Penelitian
Gambar 1 menunjukkan alur dari penelitian ini. Dimulai dengan melakukan studi literatur terhadap beberapa sumber yang berkaitan dengan penelitian dengan mempelajari penelitian- penelitian  sebelumnya,  dan  hal-hal  seperti Human-Centered  Design,  user  interface,  user experience, usability testing, User Experience Questionnaire, dan Single Ease Question. Selanjutnya, penelitian ini masuk ke dalam lingkup pendekatan Human-Centered Design. Pendekatan ini digunakan dalam mengembangkan sebuah sistem interaktif dengan tujuan untuk membangun  sistem  yang  mudah  digunakan  dan  bermanfaat  dengan  fokus  pada  pengguna, kebutuhan dan tuntutan mereka, dan dengan menerapkan faktor manusia (ergonomi), serta ilmu
32 Jurnal Sistem Informasi, Teknologi Informasi, dan Edukasi Sistem Informasi (JUST-SI) ,Vol. 3,No. 1,Agustus 2022,hlm.29-44
dan  teknik usability (ISO  9241:210,  2010) . Proses  dari  pendekatan  HCD  dapat  dilihat  pada Gambar 2.
Gambar 2. Proses Human-Centered Design
Proses Human-Centered  Design dimulai  dengan  perencanaan  proses,  yaitu  kegiatan diskusi  bersama stakeholder Batik  Tenun  Vi  untuk  membahas  dan  menyetujui  bagaimana usability dapat  berkontribusi  pada  tujuan  dibuatnya website Batik  Tenun  Vi.  Bersama stakeholder, peneliti  membahas  beberapa  hal  seperti  tujuan  sistem  dikembangkan,  siapa pengguna sistem, fungsi utama sistem, dan sasaran usability.
Informasi-informasi  yang didapatkan dari proses perencanaan HCD, kemudian, menjadi konteks penggunaan awal dari sistem. Konteks penggunaan awal ini disusun ke dalam sebuah project summary yang berisi nama sistem, tujuan dari sistem, target pasar, dan fungsi-fungsi yang direncanakan. Setelah itu, diidentifikasi kelompok-kelompok pengguna dari sistem yang perwakilannya akan diwawancarai untuk mendapatkan konteks penggunaan yang lebih dalam.
Dari wawancara yang dilakukan dengan kelompok-kelompok pengguna, dilakukan analisis terhadap  karakteristik  pengguna,  seperti tujuan menggunakan,  pengalaman  dan  pengetahuan terhadap  sistem,  usia,  dan  keterbatasan  mereka.  Selain  karakteristik  pengguna,  konteks penggunaan lainnya yang dianalisis adalah task dan lingkungan dari sistem.
Setelah mendapatkan konteks penggunaan, akan disusun kebutuhan dari pengguna, baik yang sifatnya fungsional, maupun non-fungsional. Kemudian, dilakukanlah perancangan solusi desain  terhadap  kebutuhan  pengguna.  Perancangan  solusi  ini  dimulai  dengan  merancang sitemap yang  menunjukkan  penyusunan  informasi  pada website. Berdasarkan  susunan informasi  tersebut,  dibuatlah low-fidelity  prototype berupa wireframe untuk  memberikan gambaran  terhadap  penyusunan  konten  secara  cepat  agar  dapat  dievaluasi  sebelum  nantinya menjadi high-fidelity prototype.
High-fidelity  Prototype selanjutnya  akan  dievaluasi  melalui  proses usability  testing bersama  beberapa  partisipan . Dalam  sebuah  sesi usability  testing ,  seorang  fasilitator  akan meminta partisipan untuk melakukan tugas-tugas atau task yang biasanya menggunakan satu atau  beberapa  antarmuka  spesifik.  Selama  partisipan  menyelesaikan task, fasilitator  akan mengamati  perilaku  partisipan  dan  mendengarkan  apa  yang  dikatakannya  (Moran,  2019). Untuk  menilai Usability dari  rancangan  digunakanlah Single  Ease  Question. Single  Ease Question merupakan sebuah kuesioner yang dapat digunakan untuk menilai seberapa mudah atau sulit sebuah task pada usability testing menurut partisipan (Sauro, 2018). SEQ hanya terdiri dari 1 pertanyaan yang berbentuk “Seberapa mudah atau sulit task tersebut?” dan diikuti dengan jawaban berbentuk skala likert dari 1-7 dengan label “Sangat Sulit” sampai “Sangat Mudah”. User  Experience dari  rancangan  akan  dinilai  menggunakan User  Experience Questionnaire . User  experience  questionnaire (UEQ)  merupakan  metode  pengukuran user
experience yang  terdiri  dari  26  pertanyaan  dengan  jawaban  skala likert untuk  menilai user experience pengguna pada skala Attractiveness atau Daya Tarik, Perspicuity atau Kejelasan, Efisiensi, Dependability atau  Ketepatan,  Stimulasi,  dan Novelty atau  kebaruan.  Pertanyaan- pertanyaan dari User Experience Questionnaire ini dapat dilihat pada Gambar 3.
Gambar 3. Pertanyaan User Experience Questionnaire
Rancangan dapat dianggap berhasil memenuhi kebutuhan pengguna, jika prototype telah mendapatkan  nilai  SEQ  di  atas  5.7  untuk  setiap task- nya  dan  setidaknya  mendapatkan  nilai “Good”  pada  setiap  aspek  UEQ.  Bila  rancangan  solusi  desain  dapat  memenuhi  kebutuhan pengguna, terakhir akan ditarik kesimpulan dari penelitian.

## 3. ANALISIS KEBUTUHAN PENGGUNA

## 3.1. Perencanaan Proses Human-Centered Design
Perencanaan proses Human-Centered Design merupakan proses pertama yang dilakukan pada pendekatan HCD. Pada proses ini peneliti berdiskusi dengan stakeholder Batik Tenun Vi, tepatnya  yaitu  kepala  bidang  pemasaran  dari  Batik  Tenun  Vi.  Diskusi  ini  dilakukan  untuk mengumpulkan  informasi  yang  berkaitan  dengan  konteks  penggunaan  dari  sistem,  seperti tujuan  dan  alasan  sistem  dikembangkan,  siapa  pengguna  dari  sistem  dan  apa  tugas  mereka, serta fungsi utama dan sasaran usability dari sistem.
Didapatkan  bahwa website Batik  Tenun  Vi  akan  dikembangkan  untuk  dapat memperlihatkan kerajinan-kerajinan yang dibuat oleh Batik Tenun Vi, serta memperkenalkan usaha ini dan Batik Balikpapan ke masyarakat. Produk-produk yang dijual oleh Batik Tenun Vi masih 1-of-1 dan biasanya cepat terjual ketika diunggah di akun Instagram Batik Tenun Vi. Namun, permasalahannya adalah pelanggannya masih itu-itu saja. Sehingga kalau pelanggan- pelanggan tersebut kurang tertarik dengan suatu produk, biasanya produk tersebut akan tertimpa oleh produk-produk selanjutnya yang diunggah dan tidak akan terjual. Dengan begitu, adanya website perusahaan ini diharapkan oleh pihak Batik Tenun Vi untuk dapat membantu penjualan
34 Jurnal Sistem Informasi, Teknologi Informasi, dan Edukasi Sistem Informasi (JUST-SI) ,Vol. 3,No. 1,Agustus 2022,hlm.29-44
kerajinan-kerajinan yang mereka buat dengan memperkenalkannya ke masyarakat yang lebih luas.
Pihak Batik Tenun Vi mengharapkan pengunjung dari website ini adalah target pasar dari Batik  Tenun  Vi  yaitu  kaum  wanita  yang  termasuk  ke  generasi  X,  generasi  Milenial,  dan generasi Z. Nantinya, mereka dapat melihat profil dari Batik Tenun Vi, melakukan pembelian terhadap produk Batik Tenun Vi, melihat galeri yang menunjukkan kerajinan-kerajinan yang pernah dibuat Batik Tenun Vi, dan buletin untuk membahas hal-hal menarik terkait Batik Tenun Vi, seperti keikutsertaan dalam suatu pameran, cerita dibalik kerajinan yang dibuat, dan lainnya. Website ini juga diharapkan dapat mengarahkan pengunjung ke akun WhatsApp , Instagram, dan toko Shopee Batik Tenun Vi.
Seorang administrator juga nantinya akan terlibat dalam penggunaan website Batik Tenun Vi. Administrator akan bertanggung jawab dalam menambahkan produk yang akan dijual di website Batik  Tenun  Vi,  melaporkan  pembelian  yang  dilakukan  pelanggan,  menambahkan gambar pada galeri, menambahkan artikel pada buletin, dan memperbaiki kesalahan informasi.
Stakeholder mengharapkan tampilan dari website Batik Tenun Vi modern dan mengikuti standar  industri  saat  ini,  namun  dengan  memanfaatkan  ornamen-ornamen  Batik  dan  warna hitam,  emas,  dan  cokelat  yang  merupakan  ciri  khas  dari  Batik  Tenun  Vi. Website juga diharapkan  bisa  diakses  dari  perangkat mobile dan desktop. Pada  sisi  administrator,  sistem hanya  diharapkan  untuk  mudah  digunakan  karena administrator biasanya  hanya  menangani akun media sosial dan Shopee, sehingga pengalamannya belum terlalu banyak terkait menjadi administrator sebuah website .

## 3.2. Deskripsi Sistem
Deskripsi dari website Batik Tenun Vi didapatkan dari hasil diskusi perencanaan proses Human-Centered Design yang dilakukan dengan kepala bidang pemasaran dari Batik Tenun Vi, yang kemudian disusun ke dalam sebuah project summary yang dapat dilihat pada Tabel 1 .
Tabel 1. Project Summary Nama Sistem Website Batik Tenun Vi Tujuan dari Sistem 1. Untuk meningkatkan penjualan produk Batik Tenun Vi 2. Untuk  memperlihatkan  kerajinan-kerajinan  yang  dibuat  Batik Tenun Vi 3. Untuk memperkenalkan Batik Tenun Vi dan Batik Balikpapan ke masyarakat 4. Untuk mengarahkan pengunjung ke kanal-kanal lain yang dimiliki Batik Tenun Vi Alasan dikembangkannya sistem 1. Untuk membantu proses penjualan daring Batik Tenun Vi 2. Untuk memperluas jangkauan pelanggan Batik Tenun Vi Target Pasar Wanita yang termasuk ke generasi X, generasi Milenial dan generasi Z. Fungsi yang direncanakan Pada sisi pelanggan: 1. Memungkinkan pengguna untuk membeli produk Batik Tenun Vi 2. Halaman yang memberikan informasi tentang Batik Tenun Vi 3. Galeri  yang  menunjukkan  kerajinan-kerajinan  yang  dibuat  Batik Tenun Vi 4. Buletin  untuk  membahas  hal-hal  terkait  Batik  Tenun  Vi,  seperti keikutsertaan dalam suatu pameran, cerita dibalik kerajinan yang dibuat, dan lainnya
5. Tautan  yang  mengarahkan  ke  akun  Instagram , WhatsApp , dan Shopee Batik Tenun Vi
6. Dapat diakses melalui perangkat desktop maupun mobile
Pada sisi administrator:
Nama Sistem Website Batik Tenun Vi 1. Memberikan  informasi  perihal  pembelian  yang  dilakukan pengguna 2. Halaman untuk menambahkan produk yang dijual 3. Halaman untuk menambahkan gambar pada galeri 4. Halaman untuk menambahkan artikel pada buletin

## 3.2. Identifikasi Kelompok Pengguna
Selanjutnya  diidentifikasi  kelompok  pengguna  dari  sistem  dan  tujuan  mereka menggunakan  sistem.  Dari  diskusi  yang  dilakukan  dengan stakeholder Batik  Tenun  Vi, diidentifikasi terdapat dua kelompok pengguna dari sistem, yaitu pelanggan Batik Tenun Vi dan administrator. Tujuan dari tiap kelompok pengguna ini dapat dilihat pada Tabel 2.
Tabel 2. Kelompok Pengguna Kelompok Pengguna Tujuan Penggunaan Pelanggan Batik Tenun Vi 1. Untuk mendapatkan informasi terkait usaha Batik Tenun Vi 2. Untuk melihat kerajinan-kerajinan yang dijual Batik Tenun Vi 3. Untuk membeli kerajinan yang dijual Batik Tenun Vi 4. Untuk  mendapatkan  informasi  terkait  kanal-kanal  lain  dari  Batik Tenun Vi Administrator Bertanggung jawab dengan pemeliharaan sehari-hari, seperti melaporkan pembelian,  memverifikasi  pembayaran,  menambahkan  produk, menambahkan  gambar  pada  galeri,  menambahkan  artikel,  memperbaiki kesalahan informasi, dan melaporkan kesalahan sistem.

## 3.3. Analisis Karakteristik Pengguna
Sebelum dapat menganalisis karakteristik pengguna, dilakukanlah wawancara bersama 5 partisipan pelanggan dan 1 partisipan administrator untuk menggali informasi-informasi yang dapat  membantu  proses  analisis.  Dari  wawancara  tersebut,  didapatkanlah  bahwa  setiap partisipan  pelanggan  memiliki  pemahaman  bahwa task utama  dalam  menggunakan website Batik  Tenun  Vi  adalah  membeli  produk  Batik  Tenun  Vi,  namun  tidak  semua  partisipan memahami bagaimana proses pembelian produk secara daring. Maka dari itu, dibutuhkanlah proses  pemesanan  produk  yang  mudah  untuk  dilakukan  dan  dipahami  pengguna.  Bagi partisipan  yang  telah  terbiasa  menggunakan  sistem  yang  serupa,  yaitu  sistem e-commerce, proses  pembelian  produk  ini  biasanya  dilakukan  dengan  melalui  beberapa  proses  seperti, membuat  akun,  melihat  produk-produk  yang  dijual,  menambahkan  produk  ke  keranjang, membuat  pesanan  dan  menambahkan  alamat  pengiriman,  serta  membayar  pesanan  tersebut. Selain itu, karena target pasar dari Batik Tenun Vi adalah generasi X, generasi Milenial, dan generasi  Z  yang  artinya  saat  ini  berada  pada  rentang  18-56  tahun.  Faktor  usia  dapat mempengaruhi usability pada usia lanjut yang mana memiliki kemungkinan untuk kurang fasih terhadap teknologi atau memiliki keterbatasan pengelihatan, maka diperlukan halaman bantuan penggunaan website , serta pentingnya untuk membuat teks yang ditampilkan mudah dibaca. Untuk  administrator,  partisipan  memiliki  pengalaman  dalam  menangani  akun  penjual layanan e-commerce Shopee sehingga familier dengan proses manajemen produk dan pesanan, serta menambahkan gambar-gambar, maka diperlukan peletakan yang mendekati pemahaman partisipan  administrator  selama  ini.  Namun  terdapat  pula task yang  kurang  dipahami  oleh partisipan, yaitu mengenai penambahan artikel, sehingga diperlukan agar task ini mudah untuk dipahami dan dilakukan.

## 3.4. Analisis Task
Komponen  selanjutnya  yang  dianalisis adalah task.  Task merupakan  aktivitas-aktivitas yang  dilakukan  untuk  mencapai  suatu  tujuan  dari  sistem.  Dalam  mencapai  tujuan dikembangkannya website Batik Tenun Vi, terdapat beberapa task dari tiap kelompok pengguna yang dapat dilihat pada Tabel 3.
Tabel 3. Daftar Task Pengguna Kelompok Pengguna Task Pelanggan Batik Tenun Vi 1. Melihat informasi tentang Batik Tenun Vi. 2. Melihat produk-produk Batik Tenun Vi
3. Menambahkan produk ke Keranjang 4. Melakukan pendaftaran akun pelanggan 5. Melakukan log in 6. Memesan produk Batik Tenun Vi 7. Melihat pesanan yang telah dibuat 8. Mengonfirmasi pembayaran terhadap pesanan 9. Membaca artikel buletin Batik Tenun Vi 10. Melihat galeri Batik Tenun Vi 11. Melihat kanal lain dari Batik Tenun Vi Administrator 1. Melakukan log in sebagai administrator 2. Menambahkan produk 3. Melihat pesanan yang dibuat pelanggan 4. Memverifikasi pembayaran yang dilakukan pelanggan 5. Mengubah status pesanan 6. Menambahkan gambar pada galeri
7. Menambahkan artikel pada buletin

## 3.7. Analisis Kebutuhan
Berdasarkan  hasil  analisis  konteks  penggunaan  disusunlah  kebutuhan  tiap  kelompok pengguna  dari website Batik  Tenun  Vi.  Kebutuhan  fungsional  merupakan  pernyataan  yang menyatakan layanan yang harus disediakan sistem, bagaimana sistem harus bereaksi terhadap masukan tertentu dan bagaimana sistem harus berperilaku dalam situasi tertentu (Sommerville, 2015). Beberapa kebutuhan fungsional dari website Batik Tenun Vi dapat dilihat pada Tabel 4.
Tabel 4. Beberapa Kebutuhan Fungsional Website Batik Tenun Vi Kode Kebutuhan UR-01 Sistem memiliki fitur daftar akun untuk pelanggan. UR-02 Sistem memiliki fitur log in untuk pelanggan. UR-03 Sistem memiliki halaman beranda. UR-04 Sistem menampilkan informasi profil Batik Tenun Vi pada halaman “Tentang Kami”. UR-05 Sistem menampilkan produk-produk yang dijual Batik Tenun Vi pada halaman “Produk Kami”. UR-06 Sistem memiliki fitur untuk memesan produk UR-07 Sistem memiliki fitur untuk menerima bukti pembayaran pengguna. UR-08 Sistem menampilkan artikel pada halaman “ Blog ”. UR-09 Sistem menampilkan gambar-gambar pada halaman “Galeri” UR-10 Sistem  menampilkan  informasi  kanal-kanal  lain  dari  Batik  Tenun  Vi  pada halaman “Hubungi Kami”. UR-11 Sistem menampilkan panduan penggunaan website pada halaman “Bantuan”.
Sedangkan,  kebutuhan  non-fungsional  berisi  batasan  dari  layanan  atau  fungsi  yang disediakan oleh sistem seperti batasan waktu, batasan pada proses pengembangan, standar, dan lainnya  (Sommerville,  2015).  Kebutuhan  non-fungsional  dari website Batik Tenun  Vi  dapat ditunjukkan pada Tabel 5.
Tabel 5. Kebutuhan Non-Fungsional Website Batik Tenun Vi Parameter Kebutuhan Usability Memiliki nilai Single Ease Question setidaknya 5.7 pada setiap task- nya
Accessibility 1. Teks biasa setidaknya memiliki rasio kontras 4.5:1 dengan latarnya 2. Teks dengan ukuran besar (di atas 14pt atau 18.66px) dan teks bold setidaknya memiliki rasio kontras 3:1 dengan latarnya

## 4. MERANCANG SOLUSI DESAIN

## 4.1. Merancang Sitemap
Sitemap adalah diagram  yang menunjukkan struktur suatu situs. Diagram ini digunakan terutama  untuk  mencerminkan  pemahaman  tentang  struktur  informasi  dan  struktur  navigasi situs saat sedang dibangun (Newman, et al , 2000). Sitemap website Batik Tenun Vi dapat dilihat pada Gambar 4. Pada tingkat yang paling atas dari website Batik Tenun Vi, terdapat halaman Beranda yang merupakan halaman yang ditampilkan pada root url dari website Batik Tenun Vi. Satu tingkat di bawahnya, terdapat halaman-halaman utama yang diharapkan oleh pihak Batik Tenun Vi, yaitu“Tentang Kami”, “Produk Kami”, “ Blog ”, dan “Galeri” yang dapat diakses pada navigasi utama website. Kemudian, terdapat pula halaman dan fungsi-fungsi yang mendukung proses  pembelian  produk,  yaitu  fungsi  keranjang,  halaman  “Pesanan  Saya”,  halaman pengaturan akun, serta halaman log in dan daftar akun yang juga dapat diakses melalui menu navigasi.  Selanjutnya,  terdapat  halaman-halaman  yang  dapat  diakses  melalui footer yaitu halaman bantuan penggunaan dan halaman “Hubungi Kami” yang menunjukkan kanal-kanal lain dari Batik Tenun Vi. Pada footer, terdapat pula menu-menu yang nantinya mungkin akan dibutuhkan pada website Batik Tenun Vi, namun belum menjadi pembahasan dalam penelitian ini, yaitu mengenai kebijakan privasi, serta syarat dan ketentuan.
Gambar 4. Sitemap Website Batik Tenun Vi Sitemap panel  administrator  dari website Batik  Tenun  Vi  pada  Gambar  5.  Pada  tingkat paling atasnya, terdapat halaman Log in karena fungsi-fungsi pada panel administrator hanya dapat diakses oleh pengguna yang telah diberikan hak akses oleh sistem. Di bawahnya, terdapat halaman dashboard yang memberikan informasi-informasi singkat seperti jumlah pengunjung, jumlah  pesanan,  dan  jumlah  pemasukan dalam  sebulan,  pesanan-pesanan  yang  terbaru  yang dibuat  pelanggan,  dan  tren  pesanan.  Di  tingkat  yang  sama,  terdapat  pula  halaman-halaman untuk mengelola pesanan pelanggan, produk-produk yang dijual, artikel-artikel pada Blog , dan gambar-gambar pada galeri. Kemudian terdapat halaman yang menunjukkan statistik website ,
38 Jurnal Sistem Informasi, Teknologi Informasi, dan Edukasi Sistem Informasi (JUST-SI) ,Vol. 3,No. 1,Agustus 2022,hlm.29-44
dan daftar pelanggan, serta fungsi notifikasi yang menunjukkan pembayaran pelanggan agar dapat direspon sesegera mungkin, dan halaman pengaturan akun.
Gambar 5. Sitemap Panel Administrator

## 4.2. Merancang Wireframe
Wireframe dirancang dengan tujuan untuk memberikan pemahaman visual sebuah halaman lebih  awal  sebelum  memasuki  tahap  kreatif. Wireframe juga  digunakan  untuk  membuat navigasi global dan sekunder untuk memastikan terminologi dan struktur yang digunakan pada website memenuhi  harapan  pengguna.  Gambar  6  menunjukkan wireframe halaman  beranda yang merupakan salah satu halaman pada website Batik Tenun Vi dan Gambar 7 menunjukkan halaman Dashboard yang merupakan salah satu halaman pada panel administrator.
Gambar 6. Wireframe Halaman Beranda
Gambar 7. Wireframe Halaman Dashboard
Wireframe yang telah dirancang selanjutnya dievaluasi untuk menemukan permasalahan awal  dari  rancangan.  Evaluasi  ini  dilakukan  dengan usability  testing bersama  partisipan wawancara  sebelumnya  dengan  beberapa  skenario  penggunaan.  Dari  evaluasi  tersebut didapatkanlah beberapa perbaikan yang dapat dilihat pada Tabel 6.
Tabel 6. Hasil Evaluasi Wireframe No.  Perbaikan
1 Adanya penjelasan penggunaan hamburger button pada website versi mobile
2 Menu-menu pada footer dibuat agar ditampilkan pada navigasi utama
3 Indikasi bahwa pesanan berhasil dibuat
4 Adanya bentuk promosi dari Batik Tenun Vi
5 Adanya fungsi pengelolaan promosi pada panel administrator
6 Informasi yang lebih sederhana pada halaman dashboard panel administrator
7 Adanya fungsi pengelolaan “Produk Pilihan” pada panel administrator
8 Adanya fungsi pengelolaan banner pada panel administrator
4.3. Merancang High-fidelity Prototype
Pada  tahap  ini  dirancang high-fidelity  prototype dengan  tujuan  untuk  membuat  solusi desain  yang  paling  mendekati  sistem  yang  sebenarnya.  Fidelitas  tinggi  ini  berkaitan  dengan adanya  penggunaan  warna,  mengisi placeholder gambar  dengan  gambar  sebenarnya, meminimalkan adanya teks generik, respon elemen-elemen terhadap input pengguna, animasi, serta  menghubungkan  halaman-halaman  yang  ada  sehingga  partisipan  dapat  menggunakan prototype dengan sendirinya. Gambar 8 menunjukkan prototype halaman beranda website Batik Tenun Vi dan Gambar 9 menunjukkan halaman dashboard panel administrator.
Gambar 8. Prototype Halaman Beranda
Gambar 9. Prototype Halaman Dashboard
Pada prototype juga dimanfaatkan ornamen-ornamen Batik sesuai dengan yang diharapkan oleh pihak Batik Tenun Vi. Contohnya ada pada latar beberapa halaman seperti pada Gambar 9  dan  pada  animasi  saat website menjalankan  fungsi lazy  loading yang  dapat  dilihat  pada Gambar 10 .
Gambar 9. Prototype Halaman Daftar
Gambar 10. Animasi Berjalannya Proses Lazy Loading

## 5. EVALUASI RANCANGAN
Tahap evaluasi rancangan solusi desain dari website Batik Tenun Vi menggunakan metode usability testing bersama dengan 20 orang partisipan pengujian. Partisipan pengguna website Batik Tenun Vi akan secara langsung berinteraksi dengan high-fidelity prototype yang telah dibuat. Agar interaksi partisipan dengan prototype dapat terarah, pada tahap ini diperlukan pula skenario-skenario penggunaan yang dapat dilihat pada Tabel 7.
Tabel 7. Skenario Pengujian Prototype
No. Skenario
1 Temukanlah  halaman  yang  dapat  memberikan  anda  informasi  mengenai  usaha Batik Tenun Vi.
2 Temukanlah halaman yang dapat memberikan anda bacaan-bacaan atau artikel- artikel terkait Batik Tenun Vi dan buka bacaan terbaru.
3 Temukanlah  halaman  yang  dapat  menunjukkan  gambar-gambar  terkait  Batik Tenun Vi.
4 Temukanlah  halaman  yang  dapat  memberikan  anda  informasi  mengenai  cara berbelanja di website Batik Tenun Vi.
5 Bukalah  halaman  yang  dapat  menampilkan  produk-produk  yang  dijual  Batik Tenun Vi
6 Lihatlah salah satu produk sarung bantal sulam, masukkan produk ke keranjang, dan lihat keranjang anda.
7 Buatlah akun pelanggan Batik Tenun Vi.
8 Masuklah ke akun pelanggan anda.
9 Buatlah pesanan terhadap produk yang ada di keranjang
10 Bukalah halaman pesanan, dan lihat detail pesanan yang telah anda buat.
11 Konfirmasilah pembayaran yang telah anda lakukan .
12 Temukanlah  halaman  yang  dapat  membantu  anda  dalam  menghubungi  Batik Tenun Vi.
42 Jurnal Sistem Informasi, Teknologi Informasi, dan Edukasi Sistem Informasi (JUST-SI) ,Vol. 3,No. 1,Agustus 2022,hlm.29-44
Untuk  setiap  Skenario responden  akan  ditanyakan  kemudahan  atau  kesulitan task pada skenario tersebut menggunakan Single Ease Question (SEQ). Jika nilai SEQ sebuah task kurang dari 5, maka akan ditanyakan mengapa responden merasa bahwa task tersebut sulit. Setelah seluruh  skenario  selesai  dilakukan,  maka  responden  akan  diminta  untuk  mengisi User Experience Questionnaire (UEQ) untuk menilai user experience prototype yang dibuat. Dari hasil usability testing yang dilakukan dengan partisipan, hanya terdapat satu skenario yang memiliki nilai SEQ kurang dari 5,7, yaitu pada skenario 9 yang mendapat nilai 5,2 pada prototype versi mobile. Pada skenario ini, partisipan menyimulasikan proses membuat pesanan. Masalah ini ada pada saat partisipan telah menambahkan alamat baru. Karena setelah partisipan menambahkan alamat, akan kembali ditampilkan halaman Pilih Alamat, dan partisipan perlu menekan  tombol  “Gunakan”  untuk  memilih  alamat  yang  baru  ditambahkan  seperti  pada Gambar 11.

## Gambar 11. Proses Menambahkan Alamat
Partisipan  yang  memberikan  nilai  kurang  dari  5  pada  skenario  ini  menyatakan  bahwa mereka  berekspektasi  alamat  yang  telah  ditambahkan  akan  otomatis  dipilih  sebagai  alamat pesanan. Meskipun hanya 4 partisipan yang memberikan nilai kurang dari 5 pada skenario ini, hampir  seluruh  partisipan mengalami  jeda  sebelum  menekan tombol “Gunakan”. Untuk  itu, perbaikan  dari  masalah  ini  adalah  dengan  membuat  agar  alamat  yang  telah  ditambahkan langsung dipilih secara otomatis sehingga sesuai dengan ekspektasi pengguna.
Respon partisipan pada kuesioner UEQ kemudian diinterpretasikan dengan bantuan tool Excel yang disediakan oleh ueq-online.org.  Dari hasil penghitungan tool tersebut, prototype website Batik Tenun Vi memiliki nilai rata-rata pengalaman pengguna sebesar 2,35 pada skala attractiveness, 2,00  pada  skala perspicuity, 2,29  pada  skala efficiency, 2,36  pada  skala dependability, 2,08 pada skala stimulation, dan 1,84 pada novelty. Dari hasil benchmark yang dapat  dilihat  pada  Gambar  12,  hampir  pada  semua  skala  ini prototype mendapatkan  nilai “ Excellence”, kecuali pada skala perspicuity yang hanya mendapatkan nilai “Good”.

## 5.2 Evaluasi Panel Administrator
Berbeda dengan evaluasi website Batik Tenun Vi yang masih menggunakan skenario dan SEQ, evaluasi prototype panel Administrator dilakukan dengan mencoba fungsi-fungsi dari panel  administrator.  Kemudian,  akan  diminta  persetujuan  administrator  terhadap  rancangan yang dibuat dan menanyakan komentar terhadap tiap fungsinya. Metode ini dirasa lebih efisien mengingat evaluasi ini juga hanya dilakukan dengan calon administrator yang telah mencoba wireframe.
Terdapat  fungsi  yang  belum  disetujui  oleh  administrator,  yaitu  pada  menu  navigasi. Administrator mengatakan bahwa dirinya tidak dapat langsung mengingat tab-tab apa saja yang ada pada halaman yang memiliki tab . Administrator meminta untuk menambahkan dropdown pada sidebar untuk  halaman-halaman  yang  memiliki tab agar  dapat  lebih  cepat  mengakses informasi pada tab-tab yang tidak langsung dibuka. Rancangan solusi desain untuk perbaikan fungsi ini dapat dilihat pada Gambar 13.
Gambar 13. Perbaikan Menu Navigasi Panel Administrator

## 6. KESIMPULAN DAN SARAN
Proses  perancangan  antarmuka  pengguna website Batik  Tenun  Vi  dengan  pendekatan Human-Centered Design (HCD) menghasilkan tiga jenis keluaran, yaitu sitemap, low-fidelity prototype berupa wireframe, dan high-fidelity prototype. Untuk setiap keluarannya terdapat dua jenis sistem, yaitu website Batik Tenun Vi dan panel Administrator website Batik Tenun Vi. Website Batik Tenun Vi ini dirancang sebagai sebuah website perusahaan yang memungkinkan penggunanya  untuk  membeli  produk  yang  dijual  Batik  Tenun  Vi.  Maka,  sebagai website perusahaan, website Batik  Tenun  Vi  perlu  untuk  memenuhi  kebutuhan  pengguna  terhadap informasi  mengenai  usaha  Batik  Tenun  Vi,  dan  sebagai website yang  memungkinkan penggunanya  untuk  membeli  produk, website Batik  Tenun  Vi  perlu  memenuhi  kebutuhan penggunanya dengan menunjukkan produk-produk yang dijual, fungsi untuk memesan produk, panduan dalam membayar pesanan, dan sebagainya. Sedangkan panel administrator dirancang untuk  mendukung  aktivitas  pengguna website Batik  Tenun  Vi,  dengan  adanya  kemampuan, seperti menambahkan produk, mengganti status pesanan, menambahkan artikel dan gambar, dan lainnya.
Dari  evaluasi  yang  dilakukan  terhadap  rancangan high-fidelity  prototype  website Batik Tenun Vi, hanya terdapat sedikit perbaikan yang dibutuhkan pada rancangan dengan nilai rata- rata yang cukup baik pada lima skala UEQ, yaitu termasuk pada kategori “ Excellent ” pada skala attractiveness, efficiency, dependability, stimulation, dan novelty, dengan hanya satu skala saja
44 Jurnal Sistem Informasi, Teknologi Informasi, dan Edukasi Sistem Informasi (JUST-SI) ,Vol. 3,No. 1,Agustus 2022,hlm.29-44
yang mendapatkan nilai yang sedikit kurang dari kategori “ Excellent ”, yaitu skala perspicuity yang termasuk pada kategori “ Good ”.
Saran yang dapat diberikan pada penelitian selanjutnya adalah adanya rancangan website Batik  Tenun  Vi  untuk  ukuran  layar tablet dan  ponsel  dengan  layar  besar,  agar  dapat memberikan usability dan user  experience yang  sebaik  mungkin  pada  berbagai  perangkat. Selain itu, dapat pula dilakukan evaluasi lebih lanjut terhadap solusi desain, misalnya seperti evaluasi  yang  melibatkan  ahli  di  bidang  perancangan  atau  evaluasi  dengan  lebih  banyak partisipan  agar  dapat  menemukan  permasalahan  yang  mungkin  belum  dapat  diidentifikasi dengan partisipan penelitian ini.

## DAFTAR PUSTAKA
International  Organization  for  Standardization.  2010.  ISO  9241-110:2010 Ergonomics  of human-system interaction — Part 210: Dialogue principles . Geneva: ISO. Kemp, S., 2021. Digital in Indonesia: All the Statistics You Need in 2021  — Datareportal – Global Digital Insights . [daring] DataReportal – Global Digital Insights. Tersedia di: <https://datareportal.com/reports/digital-2021-indonesia> [Diakses 25 Juli 2021].
Newman, M.W. & Landay, J.A., 2000. Sitemaps, storyboards, and specifications. Proceedings of the conference on Designing interactive systems processes, practices, methods, and techniques - DIS '00 , p.5.
Maguire,  M.,  2001.  Methods  to  support  human-centred  design. International  Journal  of Human-Computer Studies , 55(4), pp.587-634. http://doi.org/10.1006/ijhc.2001.0503 Moran,  K.,  2019. Usability  Testing  101 .  [daring]  Nielsen  Norman  Group.  Tersedia  di: <https://www.nngroup.com/articles/usability-testing-101/> [2 Februari 2021].
Rauschenberger, M., Perez-Cota, M. and Thomaschewski, J., 2013. Efficient Measurement of the  User  Experience  of  Interactive  Products.  How  to  use  the  User  Experience Questionnaire  (UEQ).Example:  Spanish  Language  Version. International  Journal  of Interactive Multimedia and Artificial Intelligence , 2(1), pp.39-45. http://doi.org/10.9781/ijimai.2013.215.
Santoso, H. & Schrepp, M. & Isal, Y & Utomo, A.Y. & Priyogi, B., 2016. Measuring User Experience  of  the  Student-Centered  e-Learning  Environment .  Journal  of  Educators Online , 13(1), p.1-79. http://doi.org/10.9743/JEO.2016.1.5 Sauro, J., 2016. Measuring the Quality of the Website User Experience . Ph.D. University of Denver.
Sauro, J., 2018. MeasuringU: Using Task Ease (SEQ) to Predict Completion Rates and Times . [daring]  Measuringu.com.  Tersedia  di:  <https://measuringu.com/seq-prediction/> [Diakses 2 Februari 2021].
Sommerville, I., 2015. Software Engineering . 10th ed. London: Pearson, p. 106-107.
Yatana Saputri, I. S., Fadhli, M., & Surya, I. (2017). Penerapan Metode UCD (User Centered Design) Pada E-Commerce Putri Intan Shop Berbasis Web. Jurnal Nasional Teknologi Dan Sistem Informasi, 3(2), 269–278. https://doi.org/10.25077/teknosi.v3i2.2017.269-
27.