Perancangan Prototipe Web Diseminasi Sensus Pertanian 2023 dengan Responsive Web Design 
Makalah Sidang Skripsi – Program Studi D-IV Komputasi Statistik Perancangan Prototipe Web Diseminasi Sensus Pertanian 2023 dengan Responsive Web Design Faturrokhman ( 221810300 , 4SI1 ) Dosen Pembimbing : Farid Ridho , SST. , M.T. Ringkasan— Setelah pelaksanaan cacah lengkap dalam kegiatan Sensus Pertanian 2023 ( ST2023 ) , BPS ( Badan Pusat Statistik ) berkewajiban untuk menyajikan data yang telah diperoleh melalui diseminasi data , salah satunya dengan situs web. Maka dari itu , diperlukan web diseminasi ST2023 yang memiliki desain modern dan responsif di semua ukuran layar. 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. Untuk mengatasi masalah tersebut , peneliti melakukan penelitian untuk merancang prototipe web diseminasi ST2023 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 , Mobile-First Design I. LATAR BELAKANG BPS atau Badan Pusat Statistik merupakan salah satu Lembaga Pemerintah Non Kementerian di Indonesia yang bertanggung jawab secara langsung kepada Presiden. BPS berperan dalam menyediakan data bagi pemerintah , akademisi , dan masyarakat umum. Data tersebut diperoleh dari sensus dan survei yang diselenggarakan oleh BPS. Terdapat tiga macam sensus yang diselenggarakan BPS , yaitu Sensus Penduduk , Sensus Pertanian , dan Sensus Ekonomi. Sensus Pertanian atau ST 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 [ 1 ] . Tahun 2023 nanti , 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. Pada ST2013 , persiapan sensus sudah dilaksanakan pada tahun 2010. Pelaksanaannya sendiri dimulai pada tahun 2012 dengan melakukan pemutakhiran Direktori Perusahaan Pertanian [ 1 ] . Puncak kegiatan ST2013 , pencacahan lengkap usaha pertanian , dilaksanakan pada bulan Mei 2013. Setelah itu , data yang didapat dari pencacahan ( cleaning ) , lengkap akan melalui proses pembersihan 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. 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 , bps.go.id [ 2 ] . 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 tabel , pencarian data yang disajikan dalam bentuk 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 [ 3 ] . Sebagai perbandingan , pengguna yang menggunakan perangkat seluler untuk mengakses internet di Indonesia mencapai 68,91 % pada Februari 2022 [ 4 ] . Ketika sudah 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 [ 5 ] . Web tersebut akan sulit untuk dibaca dan digunakan oleh pengguna perangkat seluler serta akan menyebabkan pengalaman pengguna ( user experience ) yang buruk. itu , BPS 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 telah mencanangkan layar pengguna. Selain pelaksanaan Sensus Pertanian dan ( ST2023 ) 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. 2023 1 / 8 II. TUJUAN PENELITIAN Berdasarkan latar belakang , tujuan penelitian ini adalah sebagai berikut. 1. Mengevaluasi web diseminasi ST2013 untuk menemukan hal yang perlu diperbaiki dan ditingkatkan serta mengetahui respons pengguna terhadap web tersebut. 2. Merancang dan membangun prototipe web diseminasi ST2023 dengan antarmuka yang lebih responsif di berbagai macam ukuran layar. 3. Mengevaluasi respons pengguna terhadap prototipe web diseminasi ST2023. III. PENELITIAN TERKAIT Penelitian yang telah ada sebelumnya dan berkaitan dengan topik penelitian ini pernah dilakukan oleh Vilda Tri Lestari Simbolon dalam Skripsi Politeknik Statistika STIS tahun 2019. Penelitian tersebut bertujuan untuk membangun prototipe diseminasi Sensus Penduduk 2020 berbasis web yang menampilkan visualisasi data yang interaktif , tabel dinamis , dan fitur untuk menampilkan visualisasi data panel sensus penduduk 2020 [ 6 ] . Metode analisis yang digunakan adalah SDLC model agile. Hasil akhir dari penelitian tersebut berupa prototipe sistem yang kemudian diuji secara langsung oleh pengguna menggunakan Uji SUS ( System Usability Scale ) . Nawir dkk dalam penelitiannya mencoba membandingkan tingkat usability desain responsif web terhadap persepsi pengguna di beberapa web perguruan tinggi di Indonesia [ 7 ] . 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. Gambar 1. Peta Literatur 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 [ 8 ] . Setelah prototipe selesai dibuat , Phunkaew melakukan evaluasi langsung beberapa pengguna dalam dengan mengamati Makalah Sidang Skripsi – Program Studi D-IV Komputasi Statistik 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. Penelitian terkait lainnya yang sudah pernah dilakukan sebelumnya ditampilkan pada Gambar 1 tentang peta literatur. IV. METODE PENELITIAN Dalam mencapai tujuan penelitian ini , diperlukan sebuah metode penelitian dari awal hingga akhir penelitian. Alur penelitian tersebut dapat dilihat pada Gambar 2. Gambar 2. Alur Penelitian Berdasarkan Gambar 2 , studi literatur merupakan langkah pertama dalam penelitian ini. Studi literatur dilakukan untuk memahami dan menemukan permasalahan , serta teori yang berkaitan dengan permasalahan yang akan diselesaikan. Langkah selanjutnya , peneliti menggunakan metode Design Thinking dalam mengembangkan prototipe pada penelitian ini. Metode Design Thinking memiliki lima tahapan , yaitu : 1. 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 tujuan diseminasi Sensus Pertanian 2013 dengan 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. 2. Define atau mendefinisikan permasalahan yang muncul dari pengumpulan data di tahap empati sehingga dapat menjadi input dalam menentukan strategi di tahap selanjutnya. 2 / 8 3. 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 [ 9 ] . 4. 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. 5. 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 Interface Satisfaction ) untuk mengukur kepuasan pengguna terhadap prototipe. [ 10 ] ( Questionnaire for User V. KERANGKA PIKIR Penelitian ini berawal dari adanya masalah pada web diseminasi sensus pertanian 2013 yang tidak responsif untuk perangkat seluler. Akibatnya pengguna perangkat seluler kesulitan untuk melihat konten dalam web diseminasi ST2013 dan tingkat kegunaan dari web diseminasi ST2013 berada dalam kategori Sedang. Pada lain sisi , tahun 2023 nanti Sensus Pertanian akan diadakan kembali. Tentunya ST2023 tidak bisa menggunakan web diseminasi yang sama dengan web diseminasi ST2013 yang sudah ada. Dari permasalahan tersebut , diambil pendekatan penelitian berupa perancangan prototipe web diseminasi Sensus Pertanian 2023 dengan responsive web design serta menerapkan prinsip mobile-first design. RWD dipilih karena semakin banyaknya lalu lintas web seluler sehingga web diseminasi harus bisa mengakomodasi pengguna perangkat seluler. Metode pengembangan yang digunakan adalah metode Design Thinking. Hasil yang diharapkan dari penelitian ini adalah sebuah prototipe yang mampu menampilkan diseminasi Sensus Pertanian 2023 dengan antar muka yang lebih responsif dengan beragam ukuran layar , terutama pada perangkat seluler. Evaluasi yang digunakan menggunakan usability testing berdasarkan 10 prinsip heuristik Nielson sehingga bisa dibandingkan dengan tingkat kegunaan web diseminasi ST2013. Selain itu , peneliti melakukan pengujian QUIS pada pengguna untuk mengukur tingkat kepuasan pengguna terhadap prototipe web. Kerangka pikir yang digunakan dalam penelitian ini disajikan pada Gambar 3. Makalah Sidang Skripsi – Program Studi D-IV Komputasi Statistik Gambar 3. Kerangka Pikir VI. 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. Pertama , 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 di buka 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 4 ( 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. Kedua , di kanan kiri web terdapat banyak ruang kosong , namun tulisan di dalamnya masih terlalu mepet dan kecil ( Gambar 4 ( b ) ) . Ketiga , 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. Keempat , menu navigasi masih dapat diperbaiki dengan mengelompokkannya fungsinya. Kelima , tampilan dalam satu halaman web bisa digabungkan dengan halaman lain sehingga dapat memudahkan pengguna dalam mengekplorasi dan menemukan yang mereka butuhkan. sesuai Gambar 4. Tampilan Web ST2013 ketika diakses melalui ( a ) perangkat seluler dan ( b ) laptop 3 / 8 2. Hasil Usability Testing Web Diseminasi ST2013 3. Rancangan Peta Situs Makalah Sidang Skripsi – Program Studi D-IV Komputasi Statistik Untuk mengetahui tingkat kegunaan dari web diseminasi testing antarmuka ST2013 , peneliti melakukan usability pengguna web diseminasi ST2013. Kuesioner yang digunakan berisi sepuluh parameter yang merupakan pendekatan dari sepuluh prinsip heuristik menurut Jacob Nielsen. Kuesioner terdiri dari 45 pertanyaan dengan nilainya masing-masing. 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. Metode pengisian evaluasi ini bersifat self enumeration ( mengisi sendiri secara mandiri ) . Jumlah evaluator yang disarankan oleh Jacob Nielsen adalah tiga sampai lima orang evaluator [ 11 ] . Pada penelitian ini , peneliti melibatkan lima orang evaluator untuk mengevaluasi web diseminasi Sensus Pertanian 2013. Hasil dari evaluasi ini adalah tingkat kegunaan antarmuka web diseminasi ST2013 memiliki persentase sebesar 66,19 % yang tergolong dalam kategori Sedang. Skor tersebut menunjukkan bahwa pengguna masih dapat menggunakan sistem , tetapi pengalaman pengguna harus ditingktkan lagi secara signifikan. Tabel hasil evaluasi heuristik per parameter dapat dilihat pada Tabel 1 berikut. TABEL I HASIL EVALUASI HEURISTIK WEB ST2013 Parameter Fitur dan Fungsionalitas Beranda Navigasi Pencarian Kontrol dan Umpan Balik Formulir Kesalahan Konten dan Teks Bantuan Performa Total Skor Kategori 80,40 Bagus 71,20 Bagus 71,38 Bagus 51,43 Sedang 66,50 Sedang 58,15 Sedang 67,08 Sedang 67,29 Sedang 57,00 Sedang 58,91 Sedang 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. Komentar yang diutarakan dari 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. 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. Tahap Ideate pada penelitian ini adalah dengan mengumpulkan ide sebanyak mungkin mengenai tampilan dalam web yang responsif. 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 5. Rancangan tersebut menunjukkan bahwa terdapat enam halaman utama pada prototipe yang akan dibangun , yaitu halaman Beranda , Subsektor Pertanian , Metadata , Galeri , Dokumen , dan Publikasi. Gambar 5. Rancangan Peta Situs Prototipe Web Diseminasi 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 lebih besar. Dengan layar yang 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 4 / 8 Makalah Sidang Skripsi – Program Studi D-IV Komputasi Statistik 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 6 ( b ) ) diletakkan di bawah sedangkan pada ukuran layar besar diletakkan di atas ( Gambar 6 ( c ) ) . 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 guideline dari microsoft. 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 7. 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. Gambar 6. Wireframe Halaman Beranda Prototipe Web ST2023 di ( a ) layar kecil , ( b ) layar sedang , dan ( c ) layar besar Hasil perancangan wireframe untuk halaman Beranda dapat dilihat di Gambar 6. Perbedaan paling mendasar dari desain di ukuran layar kecil ( Gambar 6 ( a ) ) dengan ukuran layar di atasnya Gambar 7. 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. 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 telah ditetapkan sebelumnya dapat berfungsi seperti seharusnya. sehingga breakpoint yang Pendekatan mobile-first design yang digunakan adalah dengan menerapkan satu kolom dan ukuran font yang lebih kecil 5 / 8 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 8 ( a ) menunjukkan halaman tampilan prototipe web diseminasi ST2023 dibuka ketika beranda menggunakan perangkat seluler atau layar kecil. Jika dibuka melalui perangkat tablet , maka halaman beranda akan tampak seperti Gambar 8 ( b ) . Kemudian Gambar8 ( c ) menampilkan halaman beranda prototipe web diseminasi ST2023 di perangkat laptop atau desktop. Gambar 8. Hasil Prototipe Halaman Beranda di perangkat ( a ) Smartphone , ( b ) Tablet , dan ( c ) Laptop Makalah Sidang Skripsi – Program Studi D-IV Komputasi Statistik 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. Skor tersebut menunjukkan bahwa pengguna dapat menggunakan prototipe web dengan relatif mudah dan dapat menyelesaikan sebagian besar tugas penting. TABEL II PERBANDINGAN HASIL EVALUASI WEB ST2013 DAN PROTOTIPE WEB ST2023 Hasil Prototipe Web ST2023 Hasil Web ST2013 Parameter No 1 2 3 4 5 6 7 8 9 10 Total 80,40 Fitur dan Fungsionalitas 71,20 Beranda 71,38 Navigasi PencarianS 51,43 Kontrol dan Umpan Balik 66,50 58,15 Formulir 67,08 Kesalahan 67,29 Konten dan Teks 57,00 Bantuan 58,91 Performa 66,19 87,60 89,20 84,92 73,14 75,00 79,38 72,00 88,47 74,67 82,91 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 tetap mempertahankan fitur-fitur yang sudah ada di web sebelumnya dan menambah beberapa fitur lain yang masih belum ada. itu , peneliti Selain hasil evaluasi pada Tabel 2 , terdapat beberapa pertanyaan mengenai perangkat yang digunakan evaluator evaluator untuk mengakses prototipe. Sebanyak menggunakan perangkat Laptop dan Smartphone untuk mengakses prototipe , satu evaluator hanya menggunakan perangkat Smartphone , dan satu evaluator lagi menggunakan tiga 6 / 8 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. Perbedaan skor evaluasi heuristik dari Web Diseminasi ST2013 dan Prototipe Web Diseminasi ST2023 tergolong cukup jauh. Beberapa faktor yang menyebabkan tersebut antara lain adalah perbedaan server , kompleksitas web , dan penggunaan database. Web ST2013 menggunakan server dari BPS , sedangkan Prototipe Web ST2023 menggunakan server dari Github yang hanya menampilkan halaman statis. Web ST2013 lebih kompleks karena terdapat bagian back-end yang dapat menjalankan semua fitur dan fungsionalitas di dalam web. Hal ini tentunya membuat pemuatan dan performa halaman menjadi lebih cepat dibandingkan jika sudah terdapat bagian back-end. Penggunaan database yang sudah lengkap di web ST2013 juga bisa menambah waktu pemuatan halaman web tersebut. Perbandingan evaluasi ini belum mempresentasikan hasil yang sebenarnya karena tidak dijalankan menggunakan kekompleksitasan dan lingkungan yang sama. 8. Hasil QUIS Prototipe Web Diseminasi ST2023 Evaluasi kedua adalah menggunakan kuesioner QUIS yang bertujuan untuk mengukur tingkat kepuasan pengguna terhadap prototipe. 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. Sebanyak 70,5 % responden berstatus mahasiswa , sedangkan sisanya sudah bekerja. 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 9. Hasil Skor Indikator QUIS Makalah Sidang Skripsi – Program Studi D-IV Komputasi Statistik Skor untuk setiap indikator QUIS ditampilkan dalam Gambar 9. 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. 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 III KOMPATIBILITAS PROTOTIPE WEB ST2023 Chrome Versi terbaru Versi terbaru Versi 90 ke atas Versi 90 ke atas Safari Tidak Tersedia Versi terbaru Tidak Tersedia Versi 12.1 ke atas Firefox Versi terbaru Versi terbaru Versi 88 ke atas Versi 88 ke atas Edge Versi terbaru Versi terbaru Versi 87 ke atas Versi 87 ke atas Opera Versi terbaru Versi terbaru Versi 70 ke atas Versi 70 ke atas Android iOS Windows macOS 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 , 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. 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 responsivitas dari situs web. PSI melaporkan kinerja dari halaman web pada perangkat seluler tingkat 7 / 8 dan desktop , serta memberikan saran peningkatan untuk halaman web tersebut. ukuran layar dan perangkat , terutama di perangkat seluler atau layar kecil. Makalah Sidang Skripsi – Program Studi D-IV Komputasi Statistik Gambar 10. Tangkapan Layar Hasil PSI Halaman Beranda di ( a ) Mobile dan ( b ) Desktop Berdasarkan Gambar 10 , 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. VII. PENUTUP Penelitian ini sudah mencapai tahap akhir dan telah dapat ditarik kesimpulan dari hasil penelitian dengan menjawab tujuan penelitian sebagai berikut. 1. Evaluasi heuristik telah dilakukan untuk mengevaluasi tingkat kegunaan dari web diseminasi ST2013 dan didapatkan hasil sebesar 66,19 % yang tergolong dalam kategori Sedang. Berdasarkan komentar dari evaluator , web diseminasi ST2013 belum responsif ketika diakses melalui perangkat seluler ; terdapat beberapa masalah dalam antarmuka web seperti pemilihan warna , ukuran huruf , tertutup dengan ruang kosong , dan komponen yang komponen lainnya ; serta kotak pencarian yang belum ada. 2. 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. Prototipe menampilkan semua fungsi yang sudah tersedia dalam sistem sebelumnya dan menambahkan beberapa lainnya yang dapat meningkatkan kepuasan pengguna. Data yang ditampilkan dalam prototipe bersumber dari web diseminasi ST2013 dan dari Tim AGRO ST2023. Pengujian responsivitas menggunakan dua tools dari Google dan mendapatkan hasil bahwa prototipe web sudah responsif di berbagai macam fungsi 3. 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 sebagai berikut. 1. Performa prototipe web ST2023 menurut PSI di perangkat mobile masih dalam kategori warna oranye , yang artinya masih bisa ditingkatkan lagi. 2. Membangun back-end dan memasukkan database ke bagian front-end yang sudah dibuat. DAFTAR PUSTAKA [ 1 ] “ ” [ ] . : https : / / st2013.bps.go.id / dev2 / index.php / metadata / index. [ Diakses 4 November 2021 ] . [ 2 ] “ D ” BPS RI , Jakarta , 2021. [ 3 ] C “D - F ” . [ ] . : https : / / gs.statcounter.com / platform-market-share / desktop-mobile- tablet / worldwide / # monthly-201112-202002. [ 4 ] C “D - F ” . [ ] . : https : / / gs.statcounter.com / platform-market-share / desktop-mobile- tablet / indonesia / # monthly-201112-202112. [ 5 ] . D ò “ ’ G D C x ” . [ ] . : https : / / kinsta.com / blog / responsive-web-design / . [ Diakses 25 Januari 2022 ] . [ 6 ] V. T. L. Simbolon , Prototipe Aplikasi Diseminasi Sensus Penduduk 2020 Berbasis Web , Jakarta : Skripsi Politeknik Statistika STIS , 2019. [ 7 ] F. . “ kat Usability Desain Responsif Web Mobile Perguruan Tinggi Terhadap Persepsi ” Jurnal Visualita , vol. 7 , no. 1 , pp. 1-10 , 2018. [ 8 ] . C. C. “D of Interactive Learning Story and User Interface Prototyping for ” 4th International Conference on Information Technology ( InCIT ) , pp. 132-137 , 2019. [ 9 ] . . “ D ” Media Informatika , vol. 16 , no. 1 , pp. 41-46 , 2017. [ 10 ] . . . . . “ D Thinking Pada Model Perancangan UI / UX Aplikasi Penanganan ” Demandia , vol. 3 , no. 2 , pp. 75-93 , 2018. [ 11 ] . “ ” [ ] . : https : / / riyanthisianturi.com / heuristic-evaluation / . [ Diakses 2022 ] . 8 / 8
O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O B-TUJUAN I-TUJUAN I-TUJUAN I-TUJUAN I-TUJUAN I-TUJUAN I-TUJUAN I-TUJUAN I-TUJUAN I-TUJUAN I-TUJUAN I-TUJUAN I-TUJUAN I-TUJUAN I-TUJUAN O O O O B-METODE I-METODE O O O O O O O B-METODE I-METODE I-METODE I-METODE I-METODE O O O O O O O O O O B-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O B-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O
Makalah Sidang Skripsi – Program Studi D-IV Komputasi Statistik Perancangan Prototipe Web Diseminasi Sensus Pertanian 2023 dengan Responsive Web Design Faturrokhman ( 221810300 , 4SI1 ) Dosen Pembimbing : Farid Ridho , SST. , M.T. Ringkasan— Setelah pelaksanaan cacah lengkap dalam kegiatan Sensus Pertanian 2023 ( ST2023 ) , BPS ( Badan Pusat Statistik ) berkewajiban untuk menyajikan data yang telah diperoleh melalui diseminasi data , salah satunya dengan situs web. Maka dari itu , diperlukan web diseminasi ST2023 yang memiliki desain modern dan responsif di semua ukuran layar. 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. Untuk mengatasi masalah tersebut , peneliti melakukan penelitian untuk merancang prototipe web diseminasi ST2023 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 , Mobile-First Design
VII. PENUTUP Penelitian ini sudah mencapai tahap akhir dan telah dapat ditarik kesimpulan dari hasil penelitian dengan menjawab tujuan penelitian sebagai berikut. 1. Evaluasi heuristik telah dilakukan untuk mengevaluasi tingkat kegunaan dari web diseminasi ST2013 dan didapatkan hasil sebesar 66,19 % yang tergolong dalam kategori Sedang. Berdasarkan komentar dari evaluator , web diseminasi ST2013 belum responsif ketika diakses melalui perangkat seluler ; terdapat beberapa masalah dalam antarmuka web seperti pemilihan warna , ukuran huruf , tertutup dengan ruang kosong , dan komponen yang komponen lainnya ; serta kotak pencarian yang belum ada. 2. 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. Prototipe menampilkan semua fungsi yang sudah tersedia dalam sistem sebelumnya dan menambahkan beberapa lainnya yang dapat meningkatkan kepuasan pengguna. Data yang ditampilkan dalam prototipe bersumber dari web diseminasi ST2013 dan dari Tim AGRO ST2023. Pengujian responsivitas menggunakan dua tools dari Google dan mendapatkan hasil bahwa prototipe web sudah responsif di berbagai macam fungsi 3. 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 sebagai berikut. 1. Performa prototipe web ST2023 menurut PSI di perangkat mobile masih dalam kategori warna oranye , yang artinya masih bisa ditingkatkan lagi. 2. Membangun back-end dan memasukkan database ke bagian front-end yang sudah dibuat.
hanya mendapatkan hasil usability testing sebesar 66,19 % dan pengguna perangkat seluler kesulitan dalam melihat informasi di dalam web. Untuk mengatasi masalah tersebut , peneliti melakukan penelitian untuk merancang prototipe web diseminasi ST2023 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 , Mobile-First Design VII. PENUTUP Penelitian ini sudah mencapai tahap akhir dan telah dapat ditarik kesimpulan dari hasil penelitian dengan menjawab tujuan penelitian sebagai berikut. 1. Evaluasi heuristik telah dilakukan untuk mengevaluasi tingkat kegunaan dari web diseminasi ST2013 dan didapatkan hasil sebesar 66,19 % yang tergolong dalam kategori Sedang. Berdasarkan komentar dari evaluator , web diseminasi ST2013 belum responsif ketika diakses melalui perangkat seluler ; terdapat beberapa masalah dalam antarmuka web seperti pemilihan warna , ukuran huruf , tertutup dengan ruang kosong , dan komponen yang komponen lainnya ; serta kotak pencarian yang belum ada. 2. Telah dirancang dan dibangun sebuah Prototipe Web Diseminasi ST2023 dengan tampilan antarmuka yang lebih modern dan responsif , tanpa membangun back-end dan database. Pembangunan
O O O O O O O O O O O O O O O O O O O O O O O O O B-TUJUAN I-TUJUAN I-TUJUAN I-TUJUAN I-TUJUAN I-TUJUAN I-TUJUAN I-TUJUAN I-TUJUAN I-TUJUAN I-TUJUAN I-TUJUAN I-TUJUAN I-TUJUAN I-TUJUAN O O O O B-METODE I-METODE O O O O O O O B-METODE I-METODE I-METODE I-METODE I-METODE O O O O O O O O O O B-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O O B-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN I-TEMUAN O O O O O O O O O O O O O O O O O O O O O O O O O