## PERANCANGAN PROTOTIPE WEB DISEMINASI SENSUS PERTANIAN 2023 DENGAN RESPONSIVE WEB DESIGN
Faturrokhman 1 , Farid Ridho 2
1 Badan Pusat Statisik Kota Banjarmasin
2 Politeknik Statistika STIS e-mail: 1 faturrokhman@bps.go.id

## Abstrak
Setelah pelaksanaan cacah lengkap dalam kegiatan Sensus Pertanian 2023, BPS (Badan Pusat Statistik) berkewajiban untuk menyajikan data  yang telah diperoleh melalui diseminasi data, salah satunya menggunakan situs web. Namun, web diseminasi sensus sebelumnya, ST2013, hanya  mendapatkan  hasil usability  testing sebesar  66,19%  dan  pengguna  perangkat  seluler kesulitan  dalam  melihat  informasi  di  dalam  web.  Maka  dari  itu,  diperlukan  web  diseminasi ST2023  yang  memiliki  desain  responsif  di  semua  ukuran  layar.  Untuk  mengatasi  masalah tersebut,  peneliti  melakukan  penelitian  untuk  merancang  Prototipe  Web  Diseminasi  Sensus Pertanian  2023  yang  responsif  menggunakan  teknik Responsive  Web  Design .  Prototipe kemudian  dievaluasi  menggunakan usability  testing dan  mendapatkan  hasil  sebesar  81,64%. Uji  coba  responsif  dan  kompatibilitas  pada  berbagai  browser  juga  telah  dilaksanakan  dan mendapatkan hasil bahwa prototipe sudah responsif di semua ukuran layar dan tampil dengan baik di sebagian besar browser di perangkat yang berbeda.
Kata kunci : Prototipe, Diseminasi, Sensus Pertanian 2023, Responsive Web Design

## Abstract
After carrying out the complete enumeration in the 2023 Agricultural Census, BPS is obliged to  present  the data  that  has  been obtained  through data  dissemination, one of  which uses  a website. However, the previous census web dissemination, ST2013, only got usability testing results  of  66.19%  and  mobile  device  users  had  difficulty  viewing  information  on  the  web. Therefore,  we  need  a  ST2023  web  dissemination that  has  a  responsive  design  on  all  screen sizes. To overcome this problem, researchers conducted a study to design a responsive 2023 Agricultural Census Dissemination Web Prototype using Responsive Web Design techniques. The  prototype  was  then  evaluated  using  usability  testing  and  got  a  result  of  81.64%. Responsiveness and compatibility tests on various browsers have also been carried out and got the  results  that  the  prototype  is  responsive  on  all  screen  sizes  and  performs  well  in  most browsers on different devices.
Keywords: Prototype, Dissemination, 2023 Agricultural Census, Responsive Web Design

## PENDAHULUAN
Sensus  Pertanian  atau  ST,  yang dilakukan  oleh  BPS  setiap  sepuluh  tahun sekali,  bertujuan  untuk  mendapatkan  data pertanian yang lengkap, aktual, dan akurat. Data  pertanian  yang  dihasilkan  akan dimanfaatkan  menjadi  bahan  perencanaan dan  evaluasi  hasil  pembangunan  di  sektor pertanian  (Badan  Pusat  Statistik,  2013). Pada tahun 2023, BPS telah mencanangkan akan melaksanakan Sensus  Pertanian  yang ketujuh,  yaitu  Sensus  Pertanian  2023 (ST2023).  Sensus  Pertanian  merupakan rangkaian panjang kegiatan yang dilakukan oleh  BPS  mulai  dari  persiapan  hingga pelaksanaannya.  Puncak  kegiatan  ST2013, pencacahan  lengkap  usaha  pertanian, dilaksanakan pada bulan Mei 2013. Setelah itu,  data  yang  didapat  dari  pencacahan lengkap  akan  melalui  proses  pembersihan ( cleaning ),  kemudian  ditabulasi,  dianalisis hingga akhirnya dipublikasi melalui diseminasi data.
Diseminasi merupakan kegiatan penting  yang  dilakukan  oleh  BPS  dalam sensus atau survei yang telah diselenggarakan. Diseminasi bertujuan untuk  memberikan  informasi  hasil  sensus atau survei  ke sekelompok orang sehingga data  tersebut  dapat  dimanfaatkan  dengan maksimal (Simbolon, 2019). Hasil
diseminasi  data  dapat  berupa  berbagai bentuk,  salah  satunya  melalui  situs  web yang  dapat  diakses  oleh  semua  orang. Penggunaan  web  dalam  diseminasi  data terbukti cukup dalam menyajikan data yang diperlukan  pengguna  data.  Sebagaimana terlihat dalam hasil Survei Kebutuhan Data 2021  yang  menyatakan  bahwa  sebanyak 43,56%  konsumen  data  di  PST  BPS  Pusat mendapatkan  data  melalui  web  BPS, www.bps.go.id  (Badan  Pusat  Statistik, 2021).
Web  diseminasi  data  hasil  Sensus Pertanian  2013  dapat  dilihat  melalui  situs https://st2013.bps.go.id/ . Di halaman utama,  ditampilkan  berbagai  informasi umum  mengenai  kondisi  pertanian  di Indonesia.  Selain  itu,  terdapat  pula  fitur pencarian data yang disajikan dalam bentuk tabel,  perbandingan  antar  wilayah,  galeri, serta  publikasi  ST2013.  Web  diseminasi
ST2013  masih  memiliki  tampilan  yang tidak  responsif  dengan  ukuran  layar pengguna.  Konten  dalam  web  tidak  dapat menyesuaikan dengan ukuran layar pengguna  sehingga  pengguna  perangkat seluler  harus  memperbesar  konten  untuk dapat  melihat  lebih  jelas.  Selain  itu, beberapa  komponen  di  web  akan  tertutup dengan  komponen  lain  jika  ukuran  layar berubah.
Tampilan antarmuka web yang dapat tampil  dengan  baik  di  layar  yang  kecil merupakan sebuah keharusan di web masa kini.  StatCounter  melaporkan  bahwa  lalu lintas  web  seluler  secara  global  telah melampaui  pengguna  layar  desktop  dan menjadi  mayoritas  dengan  persentase sebesar  56,05%  pada  Februari  2022 (StatCounter, 2022). Sebagai perbandingan, pengguna  yang  menggunakan  perangkat seluler  untuk  mengakses  internet  di Indonesia mencapai  68,91% pada Februari 2022 (StatCounter, 2022). Ketika lebih dari 60% pengunjung potensial web menggunakan  perangkat  seluler  untuk menjelajahi  internet,  developer  tidak  bisa hanya  melayani  mereka  dengan  halaman yang  dirancang  untuk  layar  desktop  (Duò, 2021). Web tersebut akan sulit untuk dibaca dan  digunakan  oleh  pengguna  perangkat seluler serta akan menyebabkan pengalaman  pengguna  ( user  experience ) yang buruk.
Tujuan  dari  penelitian  ini  adalah untuk mengevaluasi web diseminasi
ST2013  untuk  menemukan  hal  yang  perlu diperbaiki dan ditingkatkan serta mengetahui  respons  pengguna  terhadap web  tersebut.  Tujuan  kedua  adalah merancang dan membangun prototipe web diseminasi ST2023 dengan antarmuka yang lebih  responsif  di  berbagai  macam  ukuran layar.  Kemudian,  tujuan  terakhir  adalah mengevaluasi  respons  pengguna  terhadap prototipe web diseminasi ST2023.
Penelitian yang telah ada sebelumnya dan  berkaitan  dengan  topik  penelitian  ini pernah dilakukan oleh Nawir dkk. Penelitian tersebut mencoba membandingkan  tingkat usability desain responsif  web  terhadap  persepsi  pengguna di  beberapa  web  perguruan  tinggi  di
Indonesia  (Nawir,  Syarief,  &  Irfansyah, 2018).  Didapatkan  hasil  bahwa  tingkat usability web memengaruhi persepsi pengguna  terhadap  tampilan  web  sebesar 67,1%.  Hasil  dari  penelitian  Nawir  ini menunjukkan  bahwa  terdapat  pengaruh yang signifikan antara tingkat usability web dengan persepsi pengguna terhadap tampilan web. Sehingga untuk meningkatkan  persepsi  pengguna  terhadap tampilan  web,  tampilan  antarmuka  web perlu  dibuat  seresponsif  mungkin  guna meningkatkan tingkat kegunaan web tersebut.
Phunkaew  dkk  membuat  sebuah penelitian yang bertujuan untuk mendesain dan mengevaluasi prototipe aplikasi mobile Interactive  Learning  Story .  Prototipe didesain  dengan  menggunakan Mobile Responsive  Design dan Flat  Design (Phunkaew,  Phandan,  &  Wongwatkit, 2019).  Setelah  prototipe  selesai  dibuat, Phunkaew  melakukan  evaluasi  dengan mengamati  langsung  beberapa  pengguna dalam  menggunakan  prototipe.  Respons dan  tanggapan  mereka  direkam  untuk dianalisis  lebih  lanjut.  Fokus  utama  dari evaluasi  tersebut  adalah  mengenai UI Design ,  transisi  di  dalam  prototipe,  warna yang  digunakan,  komponen  dan  elemen dalam  prototipe,  navigasi,  serta  interaksi yang dilakukan oleh prototipe.
Banyaknya pengguna dengan ukuran perangkat  yang  sangat  beragam  membuat web tidak lagi cukup memiliki desain web statis  yang  hanya  terlihat  bagus  di  layar desktop.  Web  harus  bisa  menampilkan antarmuka yang responsif di semua ukuran layar  pengguna.  Selain  itu,  BPS  telah mencanangkan pelaksanaan Sensus Pertanian 2023 (ST2023) dan
membutuhkan  web  diseminasi.  Dengan adanya  kedua  peluang  tersebut,  peneliti akan memberikan sebuah tampilan antarmuka  baru  untuk  web  diseminasi ST2023  dalam  bentuk  sebuah  prototipe web.  Prototipe  tersebut  diharapkan  dapat meningkatkan  tingkat  kepuasan  pengguna dan  dapat  tampil  secara  responsif  di berbagai  ukuran  layar  pengguna,  terutama untuk pengguna layar kecil.

## METODE PENELITIAN
1. Design Thinking
Metode yang  digunakan  dalam analisis  hingga  perancangan  dan  evaluasi sistem  pada  penelitian  ini  adalah Design Thinking . Design  Thinking berfokus  pada inovasi  dan  penciptaan  yang  merupakan cara berpikir untuk dapat mengembangkan produk dan solusi baru untuk suatu masalah (Razi, Mutiaz, & Setiawan, 2018). Gambar 1  menunjukkan  tahapan  metode design thinking .
Metode Design  Thinking memiliki lima tahapan, yaitu :
a. Tahap pertama adalah tahapan emphatize (empati). Tahap ini berupaya dalam  memahami  kebutuhan  pengguna melalui  pengumpulan  data  yang  dibagi menjadi tiga, wawancara, observasi, dan kuesioner.  Wawancara  dilakukan  untuk mendapatkan  saran  terkait  perancangan prototipe  web  kepada  Tim  Web Diseminasi  BPS  dan  Tim  AGRO ST2023.  Observasi  berupa  pengamatan terhadap aplikasi yang telah dikembangkan  sebelumnya  yaitu  web diseminasi  Sensus  Pertanian  2013 dengan  tujuan  menemukan  peluang dalam  pengembangan  web  dan  melihat struktur  dasar  dari  web.  Kemudian, kuesioner usability  testing diberikan kepada pengguna web untuk mengetahui tingkat kegunaan antarmuka web berjalan. b. Define atau mendefinisikan
permasalahan yang muncul dari pengumpulan  data  di  tahap  empati sehingga  dapat  menjadi input dalam menentukan strategi di tahap selanjutnya.
c. Ideate merupakan  tahap  menentukan solusi  dari  permasalahan  yang  sudah dianalisis  sebelumnya.  Tahapan  ini berfungsi  menghasilkan  gagasan  yang akan  digunakan  sebagai  dasar  dalam pengembangan web selanjutnya. Strategi yang digunakan dalam mengembangkan prototipe adalah Responsive Web
Design ,  yaitu  strategi  untuk  menangani ukuran  layar  yang  tidak  diketahui sehingga konten atau isi di halaman web
dapat  menyesuaikan  dengan  ukuran perangkat  yang  mengaksesnya  (Shandi,
2017). d. Tahapan prototype
menghasilkan
rancangan web dalam bentuk wireframe , dan  akhirnya  diimplementasikan  ke dalam  bentuk  prototipe  web  sehingga dapat  diakses  oleh  pengguna.  Desain yang dikembangkan menerapkan konsep responsive  web  design dan mobile-first design sehingga pembuatan desain akan dimulai dari rancangan untuk perangkat seluler,  kemudian  perangkat  tablet,  dan terakhir  perangkat  desktop.  Data  yang digunakan dalam prototipe yang dirancang  berasal  dari  Web  Diseminasi
ST2013  dan  Tim  AGRO  ( Agriculture Room ) ST2023.
e. Tahap test atau  uji  coba,  yaitu  untuk menguji coba dan mengevaluasi prototipe yang telah dibuat. Testing yang dilakukan  pada  tahap  ini  adalah pengujian pada beberapa browser melalui perangkat yang sering digunakan  oleh  pengguna.  Kemudian peneliti  melakukan usability  testing untuk  mengukur  tingkat  kegunaan prototipe  web  dan  membandingkannya dengan  hasil usability  testing web diseminasi  ST2013.  Testing  terakhir yaitu melakukan pengujian QUIS
( Questionnaire  for User Interface Satisfaction )  untuk  mengukur  kepuasan pengguna  terhadap  prototipe.  (Razi, Mutiaz, & Setiawan, 2018)
Gambar 5. Tahapan Metode Design Thinking
2. Usability Testing
Usability testing atau tingkat kegunaan  merupakan  pengujian  yang dilakukan  untuk  mengevaluasi  proses pengembangan  suatu  sistem.  Salah  satu metode usability adalah evaluasi  heuristik yang  digunakan  untuk  mengevaluasi desain  antar  muka  pengguna  ( user interface ).  Heuristik  merupakan  aturan yang  menguraikan  prinsip-prinsip  dalam user  interface yang  efektif.  Terdapat banyak guideline yang  digunakan  dalam evaluasi heuristik, salah satunya adalah 10 prinsip  heuristik  menurut  Jacob  Nielsen. Nielsen  (1994)  menyebutkan  bahwa evaluasi ini membutuhkan tiga hingga lima evaluator  untuk  mendapatkan  kualitas terbaik.
Turner  (2011)  mendefinisikan  10 prinsip  heuristik  Nielsen  menjadi  lebih transparan dan disesuaikan dengan penerapan  dalam  aplikasi  menjadi  10 parameter dengan 45 poin atau pertanyaan. Setiap pertanyaan memiliki tingkat kepentingan  yang  akan  digunakan  untuk menghitung  skor  total  evaluasi  heuristik. Tiap  parameter  memiliki  bobot  yang
digunakan  untuk  mengetahui  kategori desain  antarmuka  pengguna  yang  dinilai. Pertanyaan  menggunakan severity  rating (tingkat  keparahan)  dari  1  (sangat  buruk) sampai  5  (sangat  baik).  Rating  tersebut kemudian  dikali  dengan  persentase  bobot dari pertanyaan menghasilkan total rating. Kemudian  skor  rating  dihitung  dengan mengalikan total rating dengan total bobot dibagi  jumlah  evaluator  dan  dikali  100%. Skor  rating  kemudian  diinterpretasikan menjadi  beberapa  kategori  mulai  dari Sangat  Buruk  (Skor  <    29)  hingga  Luar Biasa (Skor > 89) (Turner, 2011).

## HASIL DAN PEMBAHASAN

## 1. Analisis Permasalahan Sistem Berjalan
Berdasarkan hasil observasi terhadap web  diseminasi  Sensus  Pertanian  2013, dapat ditemukan beberapa hal yang masih dapat diperbaiki, yaitu sebagai berikut :
a. Tampilan web diseminasi tidak responsif dengan ukuran layar.
Tampilan antarmuka dalam web
diseminasi  hanya  ditujukan  untuk pengguna layar besar, mulai dari laptop
hingga desktop. Ketika dibuka menggunakan perangkat dengan ukuran layar  yang  kecil  hingga  sedang, pengguna  perlu  memperkecil  dan memperbesar  konten,  serta  menggeser ke  kanan  dan  kiri  untuk  melihat  lebih jelas (Gambar 2(a)). Tim Web Diseminasi  BPS  menjelaskan  bahwa web  diseminasi  ST2013  dibangun dalam  era  yang  belum  mengandalkan tampilan  antarmuka  yang  responsif. Sehingga dalam pembangunannya pun, web  diseminasi  hanya  menggunakan satu  tampilan  untuk  semua  perangkat, atau  bisa  dibilang  tampilannya  masih bersifat statis.
b. Terdapat banyak ruang kosong di kanan kiri  web,  namun  tulisan  di  dalamnya masih terlalu mepet dan kecil (Gambar 2(b)).
c. Fitur  subsektor  yang  merupakan  salah satu data utama dalam Sensus Pertanian hanya  ditampilkan  kecil  di  atas  yang menunjukkan bahwa hierarki informasi dalam web kurang jelas.
d. Menu  navigasi  masih  dapat  diperbaiki dengan  mengelompokkannya  sesuai fungsinya.
e. Tampilan dalam satu halaman web bisa digabungkan  dengan  halaman  lain sehingga dapat memudahkan pengguna dalam mengeksplorasi dan menemukan bagian yang dicari.
Gambar  6.  Tampilan  Web  ST2013  ketika diakses  melalui  (a)  perangkat  seluler  dan (b) laptop
2. Hasil Usability Testing Web

## Diseminasi ST2013
Pada penelitian ini, peneliti melibatkan lima orang evaluator, yaitu mahasiswa dan pegawai  BPS,  untuk  mengevaluasi  web diseminasi Sensus Pertanian 2013. Evaluator yang dilibatkan pada evaluasi ini
merupakan  calon  pengguna  web  dan subject  matter dari  web  itu  sendiri, sehingga  diharapkan  hasilnya  dapat  valid. Hasil  dari  evaluasi  ini  adalah  tingkat kegunaan  antarmuka  web  diseminasi ST2013 memiliki persentase sebesar 66,19%  yang  tergolong  dalam  kategori Sedang  (49  ≤  Skor  <  69).  Skor  tersebut menunjukkan bahwa pengguna masih dapat menggunakan  sistem,  tetapi  pengalaman pengguna  harus  ditingkatkan  lagi  secara signifikan.  Tabel  hasil  evaluasi  heuristik per  parameter  dapat  dilihat  pada  Tabel  1 berikut.

## Tabel 1. Hasil Evaluasi Heuristik Web
ST2013 Parameter Skor Kategori Fitur dan Fungsionalitas 80,40% Bagus Beranda 71,20% Bagus Navigasi 71,38% Bagus Pencarian 51,43% Sedang Kontrol dan Umpan Balik 66,50% Sedang Formulir 58,15% Sedang Kesalahan 67,08% Sedang Konten dan Teks 67,29% Sedang Bantuan 57,00% Sedang Performa 58,91% Sedang Total 66,19% Sedang
Dari  10  parameter  dalam  evaluasi heuristik,  hanya  parameter  Fitur  dan Fungsionalitas, Beranda, dan Navigasi yang termasuk dalam kategori Bagus, sedangkan parameter  lainnya  masih  dalam  kategori Sedang.  Selain  hasil  evaluasi  di  atas, terdapat beberapa komentar dan saran dari evaluator mengenai web diseminasi ST2013, antara lain adalah :
a. Segi pemilihan warna, ukuran font , serta warna highlight web ST2013 yang masih dapat  dieksplorasi  lebih  baik  lagi.  Web belum terlihat clean dan masih terkesan kaku  serta  kurang  responsif  ketika diakses melalui perangkat seluler.
b. Saran  yang  diajukan  antara  lain  adalah agar  web  diseminasi  lebih  responsif ketika diakses melalui perangkat seluler.
Berfokus  kepada  keterbacaan  informasi dan  kemudahan  fungsi  bagi  pengguna seperti  menampilkan  kotak  pencarian. Kemudian hierarki informasi, alur, serta bahasa  yang  digunakan  dapat  dipahami oleh masyarakat pada umumnya.
Berdasarkan  tahap  empati  ini,  dapat didefinisikan  bahwa  masalah  yang  terjadi adalah  tingkat  kegunaan  web  dalam kategori  biasa  dan  pengguna  perangkat seluler mengalami kesulitan dalam melihat konten dalam web.

## 3. Rancangan Peta Situs
Tahap Ideate pada  penelitian  ini adalah dengan mengumpulkan ide sebanyak  mungkin  mengenai  tampilan dalam web yang responsif. Ide dikumpulkan dari berbagai sumber
penelitian,  panduan  membuat  aplikasi, hingga kumpulan desain UI/UX pada web. Solusi
yang didapatkan adalah menggunakan responsive  web  design dan memakai  teknik mobile-first  design . Sebagai  bentuk  dari  solusi  ini,  peneliti merancang  peta  situs yang  berupa arsitektur  informasi  yang  akan  digunakan dalam  web  diseminasi  ST2023  dan ditampilkan  di  Gambar  3.  Rancangan  ini dibuat  tidak  berdasarkan user  persona (karena  penelitian  ini  tidak  berfokus  pada pengguna), melainkan hasil dari observasi web  diseminasi  ST2013  dan  wawancara dengan subject matter . Tim Web Diseminasi  BPS  selaku subject  matter menyebutkan  bahwa  walaupun  tampilan web  ST2013  belum  responsif,  tetapi  fitur dan  fungsi  yang  terdapat  di  dalam  web sudah dapat memenuhi kebutuhan pengguna dari segi data dan informasi.
Gambar 3. Rancangan Peta Situs Prototipe Web Diseminasi ST2023 Sehingga, rancangan ini dibuat
berpedoman  pada  web  tersebut,  dengan tujuan  tidak  menghilangkan  fungsi  dan fitur utama dari web diseminasi. Beberapa informasi  lain  seperti  latar  belakang, tujuan, data hasil, dan daftar FAQ ST2023 merupakan konten baru yang ditambahkan sesuai dengan permintaan dari Tim AGRO ST2023, sekretariat ST2023.

## 4. Wireframe
Dalam responsive web design , terdapat beberapa  teknik  yang  dapat  digunakan untuk  merancang  web.  Salah  satunya adalah mobile-first  design ,  yaitu  dengan memfokuskan  desain  untuk  layar  kecil terlebih  dahulu,  baru  kemudian  beralih secara berangsur-angsur ke layar yang lebih besar (Phunkaew, Phandan, & Wongwatkit, 2019).  Dengan  menggunakan mobile-first design ,  peneliti  dapat  menerapkan content first ,  yaitu  cara  memprioritaskan  konten dan informasi yang penting untuk ditampilkan pada layar yang terbatas. Salah satu  dampaknya  adalah  beberapa  konten dihapus  dari  desain  seluler,  tetapi  tetap ditampilkan  dalam  desain  desktop  untuk memenuhi ruang yang lebih lebar. Perancangan wireframe bertujuan  untuk menggambarkan  tata  letak  konten  dan navigasi halaman.
Wireframe halaman Beranda berisikan beberapa fitur dan fungsi unggulan di dalam web diseminasi ST2023. Konten yang akan menarik  pengguna  pertama  kali  adalah jumbotron yang  menampilkan  data  hasil sensus  pertanian.  Di  bawah  judul  terdapat tagline dari  Sensus  Pertanian  2023,  yaitu Mencatat  Pertanian  Indonesia.  Data  hasil sensus pertanian yang ditampilkan merupakan persentase perubahan (dibandingkan dengan data sensus pertanian  sebelumnya)  dari  data  Sensus Pertanian,  yaitu  Jumlah  Rumah  Tangga
Usaha  Pertanian  dan  Jumlah  Perusahaan Pertanian. Kemudian di samping data hasil sensus  pertanian  terdapat  ornamen  yang hanya muncul di ukuran layar besar.
Bagian  kedua  dari  halaman  beranda berisi  informasi  umum  Sensus  Pertanian 2023  yang  terdiri  dari  Latar  Belakang, Tujuan,  dan  Data  Hasil  ST2023.  Di bawahnya  terdapat  daftar  subsektor  yang terdiri dari Tanaman Pangan, Hortikultura, Perkebunan, Peternakan, Perikanan,
Kehutanan,  dan  Jasa  Pertanian.  Jika  kotak subsektor  diklik,  maka  pengguna  akan diarahkan  ke  halaman  subsektor  dan menampilkan  tab  subsektor  yang  sesuai. Bagian  keempat  dari  halaman  ini  adalah kartu-kartu  layanan  data.  Terdapat  tiga layanan data yang menjadi fitur dalam web diseminasi,  yaitu  layanan dataset ,  layanan perbandingan  antar  wilayah,  dan  layanan perbandingan antar tahun.
Selanjutnya merupakan grafik perbandingan antar sensus pertanian. Data didapatkan  dari  Badan  Pusat  Statistik melalui  web  diseminasi  ST2013.  Di bawahnya terdapat peta persebaran rumah tangga usaha pertanian. Kemudian, bagian terakhir  di  halaman  beranda  adalah  daftar publikasi  dan  tombol  Lihat  Publikasi Lainnya yang akan membawa pengguna ke halaman  publikasi.  Hasil  perancangan wireframe untuk  halaman  Beranda  dapat dilihat  di  Gambar  4.  Perbedaan  paling mendasar dari desain di ukuran layar kecil (Gambar  4(a))  dengan  ukuran  layar  di atasnya  adalah  tidak  ada  logo  ST2023  di atas halaman dan ukuran beberapa elemen yang  menyesuaikan  dengan  lebar  layar. Menu navigasi pada ukuran layar kecil dan sedang (Gambar 4(b)) diletakkan di bawah sedangkan  pada  ukuran  layar  besar diletakkan di atas (Gambar 4(c)).
Gambar  7. Wireframe Halaman  Beranda Prototipe  Web  ST2023  di  (a)  layar  kecil, (b) layar sedang, dan (c) layar besar
5. Sistem Desain
Dalam mengembangkan sebuah aplikasi,  diperlukan  sebuah  sistem  desain yang  akan  digunakan  sebagai  patokan dalam  membuat  aplikasi  tersebut.  Pada penelitian  ini,  peneliti  juga  menerapkan sistem  desain  dengan  berpanduan  pada prinsip-prinsip desain dari guideline Microsoft.  Panduan  tersebut  berisikan bagaimana  cara  menggunakan  komponen web dalam desain web yang baik (Hartmut Hoehle,  2016).  Komponen  web  yang ditampilkan  sudah  lengkap  beserta  contoh dalam  bentuk  desain  yang  dapat  diedit secara  langsung.  Komponen  yang  akan digunakan  dalam  prototipe  ini  antara  lain adalah font , color , button , modal , spacing , input text , tabel, icon , logo, dropdown , dan label.  Sistem desain yang digunakan dalam web diseminasi ST2023 ditampilkan dalam Gambar 5.
Gambar  8.  Sistem  Desain  Prototipe  Web Diseminasi ST2023
6. Hasil Prototipe Web Diseminasi
ST2023
Dengan  menggunakan  sistem  desain yang  telah  dibuat  sebelumnya,  maka rancangan wireframe dapat  diubah  ke bentuk mockup aplikasi kemudian
mengubahnya ke bentuk prototipe halaman web.  Rancangan wireframe langsung  bisa diubah  ke  dalam  bentuk mockup tanpa pengujian  terhadap  pengguna  terlebih dahulu.  Hal  ini  dikarenakan  perancangan desain tampilan antarmuka pada penelitian ini tidak berpusat pada pengguna. Pengguna hanya  perlu  menguji  prototipe  yang  sudah selesai dan telah diuji oleh evaluator.
Dalam  merancang  halaman  web, penelitian ini menggunakan breakpoint dari framework Tailwind  CSS  sebagai  dasar dalam  menerapkan responsive  design . Adapun viewport meta tag digunakan untuk memberi tahu browser bahwa mereka harus menyetel  lebar  area  web  ke  lebar sebenarnya dari perangkat sehingga breakpoint
yang telah ditetapkan sebelumnya dapat berfungsi seperti
seharusnya.
Pendekatan mobile-first  design yang digunakan adalah dengan menerapkan satu kolom  dan  ukuran font yang  lebih  kecil sebagai bentuk default dari web. Beberapa komponen  dalam  web  menerapkan  aksi sentuh ke samping ( horizontal scroll ) pada perangkat  seluler  hingga  tablet  karena keterbatasan ukuran layar. Setiap komponen dalam prototipe ini menggunakan  ukuran  relatif  yang  dapat menyesuaikan dengan ukuran layar dengan ukuran default kecil.
Layout yang digunakan adalah flexbox dan grid ,  yang  berfungsi  untuk  mengatur posisi  dan  ukuran  elemen  secara  efisien dalam  halaman  web. Flexbox dapat memperluas  elemen  di  dalamnya  untuk mengisi  ruang  kosong  yang  tersedia  atau mengecilkannya untuk  mencegah melebihi ruang  tersebut.  Sedangkan Grid dapat mengatur  lebih  banyak  elemen  sekaligus dan  lebih  fleksibel  penggunaannya  jika dibandingkan dengan flexbox .
Gambar  6(a)  menunjukkan  tampilan prototipe web diseminasi ST2023 halaman beranda  ketika  dibuka  menggunakan perangkat  seluler  atau  layar  kecil.  Jika dibuka  melalui  perangkat  tablet,  maka
halaman  beranda  akan  tampak  seperti Gambar  6(b).  Kemudian  Gambar  6(c) menampilkan  halaman  beranda  prototipe web diseminasi ST2023 di perangkat laptop atau desktop.
Gambar  9.  Hasil  Prototipe  Halaman Beranda di  perangkat  (a) Smartphone , (b) Tablet, dan (c) Laptop
7. Hasil Usability Testing Prototipe Web
Diseminasi ST2023
Evaluasi  pertama  terhadap  prototipe adalah usability  testing dengan  heuristik yang  bertujuan  untuk  mengetahui  tingkat kegunaan prototipe dan membandingkannya  dengan  hasil  dari evaluasi  heuristik  pada  sistem  berjalan. Hasilnya adalah tingkat kegunaan antarmuka prototipe mengalami peningkatan menjadi 81,64% yang tergolong dalam kategori Bagus (69 ≤ Skor <  89).  Skor  tersebut  menunjukkan  bahwa pengguna  dapat  menggunakan  prototipe web  dengan  relatif  mudah  dan  dapat menyelesaikan sebagian besar tugas penting.

## Tabel 2. Perbandingan Hasil Evaluasi Web ST2013 dan Prototipe Web ST2023
N o Parameter Hasil Web ST2013 Hasil Prototipe Web ST2023 1 Fitur dan Fungsionalitas 80,40% 87,60% 2 Beranda 71,20% 89,20% 3 Navigasi 71,38% 84,92% 4 Pencarian 51,43% 73,14% 5 Kontrol dan Umpan Balik 66,50% 75,00% 6 Formulir 58,15% 79,38% 7 Kesalahan 67,08% 72,00% 8 Konten dan Teks 67,29% 88,47% 9 Bantuan 57,00% 74,67% 10  Performa 58,91% 82,91% Total 66,19% 81,64% Berdasarkan Tabel 2, parameter dengan  kenaikan  skor  hingga  21%  adalah parameter Pencarian, Formulir, dan Konten dan  Teks.  Ketiga  parameter  tersebut mengalami  kenaikan  yang  cukup  tinggi karena masih berhubungan dengan antarmuka  pengguna.  Fitur  pencarian  di Web  ST2013  tidak  terlihat  dengan  jelas, sedangkan di Prototipe Web ST2023 sudah terlihat  dengan  jelas  dan  dapat  diakses dengan  mudah  oleh  pengguna.  Antarmuka formulir  juga  terlihat  lebih  rapi  jika dibandingkan  dengan  web  sebelumnya. Kemudian, konten dan teks dalam Prototipe Web  ST2023  sudah  mempertimbangkan masukan  dari  para  evaluator  sehingga hasilnya sudah dapat memenuhi ekspektasi dari evaluator.
Parameter  dengan  kenaikan  skor  di bawah  10%  adalah  parameter Error ,  Fitur dan  Fungsionalitas,  serta  Kontrol  dan Umpan  Balik.  Pertanyaan  dari  ketiga parameter  tersebut  melibatkan  banyak fungsi dari Back-End , yang dalam penelitian ini tidak tercakup. Seperti pesan kesalahan  ketika  pengguna  melakukan kesalahan, fitur jalan pintas untuk pengguna ahli,  dan  umpan  balik  untuk  membatalkan aksi atau tindakan dari pengguna. Tim Web Diseminasi  BPS  juga  telah  mengatakan bahwa  meskipun  tampilan  dari  web
diseminasi ST2013 belum responsif, tetapi fitur  yang  tersedia  sudah  dapat  memenuhi kebutuhan  pengguna.  Oleh  karena  itu, peneliti  tetap  mempertahankan  fitur-fitur yang  sudah  ada  di  web  sebelumnya  dan menambah  beberapa  fitur  lain  yang  masih belum ada.
Selain  hasil  evaluasi  pada  Tabel  2, terdapat  beberapa  pertanyaan  mengenai perangkat  yang digunakan evaluator untuk mengakses  prototipe.  Dari  total  lima evaluator, sebanyak tiga evaluator menggunakan perangkat Laptop dan Smartphone untuk  mengakses  prototipe, satu evaluator hanya menggunakan perangkat Smartphone ,  dan  satu  evaluator lagi  menggunakan  perangkat  Laptop  saja. Ketika  evaluator  membuka  prototipe  di perangkat tersebut, 100% evaluator menjawab bahwa tampilan prototipe sudah responsif  dan  menampilkan  antarmuka yang  sesuai  dengan  perangkat  yang digunakan.

## 8. Hasil QUIS Prototipe Web Diseminasi ST2023
Evaluasi  kedua  adalah  menggunakan kuesioner  QUIS  yang  bertujuan  untuk mengukur  tingkat  kepuasan  pengguna terhadap prototipe. Kuesioner ini ditujukan kepada  calon  pengguna  web  diseminasi untuk  mengetahui  penilaian  dan  pendapat calon  pengguna  mengenai  antarmuka prototipe  yang  selesai  dikembangkan (Chin, Diehl, & Norman, 1988). Kuesioner QUIS yang dipakai merupakan QUIS versi 7.0  yang  terdiri  dari  enam  kategori  atau aspek  antarmuka  dengan  total  pertanyaan mencapai 32 pertanyaan. Setiap pertanyaan berkaitan  dengan  antarmuka  pengguna yang memiliki skala dari 0 (buruk) hingga 9 (sangat baik sekali).
Responden  QUIS  berjumlah  44  orang dengan  rentang  usia  dari  18  hingga  30 tahun. Persebaran responden QUIS bervariasi  dari  DKI  Jakarta  hingga  Bali. Perangkat  yang  paling  banyak  digunakan untuk mengakses prototipe adalah Android sebanyak 56%. Kemudian, 36% responden
menggunakan Laptop, dan sisanya sebanyak 8% responden mengakses melalui iPhone.  Di  perangkat  yang  mereka gunakan,  100%  responden  menjawab bahwa tampilan antarmuka prototipe sudah responsif dengan ukuran layar mereka.
Gambar  10.  Hasil  Skor  Indikator QUIS
Skor  untuk  setiap  indikator  QUIS ditampilkan  dalam  Gambar  7.  indikator dengan  skor  rata-rata  tertinggi  adalah indikator  ketujuh,  yaitu  Tulisan  atau Karakter Pada Layar dengan skor mencapai 8,52.  Skor  tersebut  menunjukkan  bahwa Tulisan atau Karakter pada Layar cenderung  Mudah  Dibaca.  Kemudian disusul  oleh  indikator  ke-28  (Penggunaan Warna)  dengan  skor  8,23,  yang  artinya penggunaan warna pada prototipe cenderung Bagus.
9. Uji Coba Kompatibilitas Browser dan

## Validasi Halaman
Dalam  mencapai  desain  web  yang responsif  untuk  semua  perangkat,  masalah kompatibilitas  dengan  HTML5  dan  CSS3 tidak  dapat  dihindari  (Jiang,  Zhang,  Zhou, Jiang,  &  Zhang,  2014).  Setiap browser dapat  menafsirkan  kode-kode  HTML  dan CSS  dengan  cara  yang  sedikit  berbeda. Dengan  kata  lain,  tampilan  halaman  web bisa  saja  berbeda  bagi  pengguna  yang mengakses  web  menggunakan browser yang berbeda. Uji coba ini berfokus dalam melihat  kompatibilitas  pada  sejumlah browser di beberapa perangkat yang sering digunakan oleh pengguna.
Tabel 3. Kompatibilitas Prototipe Web ST2023
Chrome Safari Firefox Edge Opera Android Versi terbaru Tidak Tersedia Versi terbaru Versi terbaru Versi terbaru iOS Versi terbaru Versi terbaru Versi terbaru Versi terbaru Versi terbaru
Windows Versi 90 ke atas Tidak Tersedia Versi 88 ke atas Versi 87 ke atas Versi 70 ke atas macOS Versi 90 ke atas Versi 12.1 ke atas Versi 88 ke atas Versi 87 ke atas Versi 70 ke atas Aplikasi browser di perangkat Android dan  iOS  umumnya  adalah  versi  terbaru, karena pengguna selalu memperbarui versi aplikasi  mereka  secara  berkala.  Untuk browser di  Windows  dan  macOS  terdapat beberapa  versi  berbeda  yang  masih digunakan oleh pengguna hingga sekarang. Secara  keseluruhan  berdasarkan  Tabel  3, prototipe web diseminasi dapat ditampilkan dengan jelas dan berfungsi  dengan normal di  sebagian  besar browser yang  dapat diakses  melalui  perangkat  Android,  iOS, Windows maupun macOS.
Prototipe kemudian divalidasi menggunakan validator dari W3C.
Validator ini memungkinkan untuk memverifikasi  setiap  halaman  dokumen web telah mengikuti aturan bahasa HTML. Berdasarkan  hasil  validator  pada  setiap halaman prototipe web menyatakan bahwa tidak  menunjukkan  adanya error atau warning di  semua  halaman  tersebut. Artinya,  prototipe  web  ST2023  telah mengikuti aturan bahasa HTML.

## 10. Uji Responsif Prototipe Web Diseminasi ST2023
Untuk menguji responsivitas prototipe web ST2023, prototipe diuji menggunakan tools Mobile-Friendly Test dan PageSpeed Index  (PSI)  dari  Google. Tool tersebut bertujuan untuk menguji web sudah ramah terhadap pengguna mobile dan mengetahui kinerja  web  tersebut  di  perangkat  seluler maupun  desktop.  Dari  pengujian  pertama menggunakan Mobile-Friendly Test, didapatkan  hasil  bahwa  prototipe  web ST2023 sudah Mobile-Friendly atau
responsif  di  perangkat  seluler.  Pengujian kedua  menggunakan  PSI,  yaitu  salah  satu alat  bantuan  dari  Google  yang  ditujukan untuk mengetahui tingkat responsivitas dari situs  web.  PSI  melaporkan  kinerja  dari halaman  web  pada  perangkat  seluler  dan desktop, serta memberikan saran peningkatan untuk halaman web tersebut.
Gambar  11.  Tangkapan  Layar  Hasil  PSI Halaman Beranda di perangkat (a) Mobile dan (b) Desktop
Berdasarkan  Gambar  8,  didapatkan hasil  skor  performa  halaman  Beranda Prototipe  Web  ST2023  untuk  perangkat mobile adalah  68,  sedangkan  untuk perangkat  desktop  adalah  97.  Skor  78 masuk  ke  dalam  rentang  warna  oranye yang artinya masih bisa ditingkatkan lagi. Skor 97 sudah termasuk ke dalam rentang warna  hijau  yang  berarti  sudah  baik. Performa di perangkat mobile lebih rendah dibandingkan dengan performa di perangkat desktop. Hal ini dikarenakan di perangkat mobile ,  komponen  web  tetap dimuat  semuanya  walaupun  beberapa komponen  tidak  ditampilkan.  Hal  ini memang  menjadi  salah  satu  kekurangan dalam menerapkan Responsive Web Design .

## KESIMPULAN DAN SARAN
Penelitian ini sudah mencapai  tahap akhir  dan  telah  dapat  ditarik  kesimpulan dari  hasil  penelitian  dengan  menjawab tujuan penelitian di awal. Pertama, evaluasi heuristik telah dilakukan untuk mengevaluasi  tingkat  kegunaan  dari  web diseminasi  ST2013  dan  didapatkan  hasil sebesar  66,19%  yang  tergolong  dalam kategori  Sedang.  Kedua,  telah  dirancang dan  dibangun  sebuah  Prototipe  Web Diseminasi  ST2023  dengan  tampilan
antarmuka  yang  lebih  modern  dan responsif, tanpa membangun back-end dan database .
Pembangunan prototipe menggunakan  teknik Responsive  Web
Design dan Mobile  First  Design untuk memastikan prototipe dapat diakses dengan  nyaman  oleh  pengguna  perangkat seluler.  Untuk  menguji  responsivitas  dari prototipe web, dilakukan dua uji menggunakan tools dari  Google  dan mendapatkan  hasil  bahwa  prototipe  web sudah responsif di berbagai macam ukuran layar dan perangkat, terutama di perangkat seluler atau layar kecil.
Ketiga, Prototipe Web ST2023 telah melalui serangkaian evaluasi dan uji coba. Evaluasi  heuristik  untuk  mengetahui tingkat  kegunaan  prototipe  mendapatkan hasil sebesar 81,64% dan tergolong dalam kategori Bagus, meningkat jika dibandingkan  dengan  hasil  evaluasi  web ST2013.  QUIS  untuk  mengetahui  tingkat kepuasan  pengguna  terhadap  prototipe mendapatkan  hasil  sebesar  8,03  atau pengguna  merasa  sudah  cukup  puas dengan tampilan  antarmuka prototipe. Uji coba kompatibilitas browser menunjukkan bahwa Prototipe Web ST2023 dapat tampil dengan sesuai pada sebagian besar browser di perangkat yang berbeda.
Saran  yang  dapat  diberikan  untuk penelitian  selanjutnya  adalah  performa prototipe  web  ST2023  menurut  PSI  di perangkat mobile masih  dalam  kategori warna  oranye,  yang  artinya  masih  bisa ditingkatkan lagi. Kemudian, saran selanjutnya  adalah  membangun back-end dan  memasukkan database ke  bagian front-end yang sudah dibuat.

## DAFTAR PUSTAKA
Badan  Pusat  Statistik.  (2013). Sensus
Pertanian  2013 .  Dipetik  November 4, 2021, dari https://st2013.bps.go.id/dev2/index. php/metadata/index
Badan  Pusat  Statistik.  (2021). Analisis Hasil  Survei  Kebutuhan  Data  2021.
Jakarta: BPS RI.
Chin, J. P., Diehl, V. A., & Norman, K. L.
(1988). Development of an instrument measuring user
satisfaction  of  the  human-computer interface. Proceedings of the SIGCHI  Conference  on  Human Factors in Computing Systems (CHI '88) , 213-218. doi:https://doi.org/10.1145/57167.57 203 Duò,  M.  (2021,  Agustus  30). The
Beginner’s Guide to Responsive Web
Design  (Code  Samples  &  Layout
Examples) . Dipetik Januari 25, 2022, dari Kinsta: https://kinsta.com/blog/responsive- web-design/ Hartmut Hoehle, R. A. (2016). Leveraging Microsoft׳s mobile usability guidelines: Conceptualizing and developing scales for mobile application  usability. International Journal of Human-Computer Studies , 35-53.
Jiang, W., Zhang, M., Zhou, B., Jiang, Y., &  Zhang,  Y.  (2014).  Responsive Web Design Mode and Application.
IEEE Workshop on Advanced Research and Technology in Industry Applications (WARTIA) , 1303-1306. doi:10.1109/WARTIA.2014.697652 2 Nawir, F., Syarief, A., & Irfansyah. (2018).
Pengaruh  Tingkat  Usability  Desain Responsif  Web  Mobile  Perguruan Tinggi Terhadap Persepsi Pengguna. Jurnal Visualita, 7 (1), 1-10.
Nielsen,  J.  (1994,  April  24). 10  Usability
Heuristics for User Interface Design . Diambil kembali dari Nielsen Norman Group: https://www.nngroup.com/articles/te n-usability-heuristics/ Othman, A., & Gloaguen, R. (2013). River
Courses Affected by Landslides and Implications for Hazard Assessment: A  High  Resolution  Remote  Sensing Case  Study  in  NE  Iraq–W  Iran. Remote Sensing, 5 (3), 1024–1044. Phunkaew,
T., Phandan, C., & Wongwatkit,  C.  (2019).  Design  and Evaluation  of  Interactive  Learning Story and User Interface Prototyping for  Mobile  Responsive  Learning Application.
4th International
Conference on Information Technology (InCIT) , 132-137. doi:10.1109/INCIT.2019.8912103 Razi, A. A., Mutiaz, I. R., & Setiawan, P. (2018).  Penerapan  Metode  Design Thinking  Pada  Model  Perancangan UI/UX Aplikasi Penanganan Laporan  Kehilangan  dan  Temuan Barang  Tercecer. Demandia,  3 (2),
75-93.
Shandi,  Y.  J.  (2017).  Menentukan  Desain Antarmuka yang Tepat Untuk Sebuah  Website  yang  Modern. Media Informatika, 16 (1), 41-46. Sianturi,  R.  (t.thn.). Riyanthi  Sianturi . Dipetik 2022, dari https://riyanthisianturi.com/heuristic -evaluation/ Simbolon, V. T. (2019). Prototipe Aplikasi Diseminasi  Sensus  Penduduk  2020 Berbasis  Web. Jakarta:  Skripsi Politeknik Statistika STIS. StatCounter. (2022). Desktop vs Mobile vs Tablet  Market  Share  in  Indonesia  - February  2022 .  Diambil  kembali dari  StatCounter  -  GlobalStats: https://gs.statcounter.com/platform- market-share/desktop-mobile- tablet/indonesia/#monthly-201112- 202112 StatCounter. (2022). Desktop vs Mobile vs Tablet  Market  Share  Worldwide  - February  2022 .  Diambil  kembali dari  StatCounter  -  GlobalStats: https://gs.statcounter.com/platform- market-share/desktop-mobile- tablet/worldwide/#monthly-201112- 202002 Turner, N. (2011, Februari 11). A guide to carrying  out  usability  reviews . Diambil kembali dari UXM: https://www.uxforthemasses.com/us ability-reviews/