Jurnal Teknologi Informasi dan Ilmu Komputer (JTIIK) Vol.
No.
April 2025, hlm.
Akreditasi KEMENRISTEKDIKTI.
No.
36/E/KPT/2019
DOI: 10.
25126/jtiik.
p-ISSN: 2355-7699
e-ISSN: 2528-6579
FITUR 3D SEMU UNTUK VISUALISASI PRODUK PADA APLIKASI PENJUALAN
ONLINE UMKM
Mursid W.
Hananto*1.
Tia Agustina2 Universitas Ahmad Dahlan.
Yogyakarta Email: mursid@is.
id, 2tia1800016104@webmail.
Penulis Korespondensi (Naskah masuk: 25 September 2024, diterima untuk diterbitkan: 14 April 2.
Abstrak Visualisasi produk menggunakan grafika 3D merupakan salah satu cara yang efektif untuk menampilkan suatu produk, namun penyiapan aset maupun perawatan media online yang memanfaatkan metode tersebut memerlukan banyak hal yang tidak semua UMKM mampu atau siap melakukannya.
Keterbatasan sumber daya manusia (SDM) menyulitkan alokasi tenaga khusus penyediaan dan pengelolaan aset grafika 3D agar secara kontinu dapat memasok data ke media penjualan online yang dimiliki UMKM.
Dibutuhkan solusi yang mudah digunakan oleh kalangan UMKM dengan SDM terbatas, memerlukan biaya rendah dan dapat memanfaatkan berbagai alat bantu yang tersedia luas, serta dapat disiapkan dengan cepat.
Teknik visualisasi 3D semu diadaptasi dalam solusi yang dikembangkan dengan tujuan menghasilkan fitur visualisasi yang mampu memperlihatkan tampilan fisik produk lebih detail dari berbagai sudut pandang layaknya saat ditampilkan di tempat penjualan secara fisik, namun tanpa menyertakan kesulitan untuk membuat representasi digital 3D sepenuhnya.
Realisasi solusi dilakukan dengan metode evolusioner incremental yang memungkinkan untuk menghasilkan solusi secara bertahap sehingga pengguna dapat segera memanfaatkannya.
Penelitian telah menghasilkan solusi berupa fitur 3D semu untuk menampilkan produk-produk UMKM dalam aplikasi berbasis web.
Fitur 3D semu yang menggunakan rangkaian citra 2D dapat memenuhi kebutuhan visualisasi layaknya 3D yang dapat diputar 360 derajat sehingga UMKM dapat segera menawarkan produknya secara online sekaligus memvisualisasikannya dengan lebih baik dibandingkan hanya menampilkan beberapa foto produk.
Kemudahan menyiapkan konten untuk fitur 3D semu menjadi nilai tambah yang membantu operasional pihak UMKM.
Integrasi pada media penjualan konvensional mudah dilakukan, dan dapat bekerja dengan baik sesuai rancangan.
Kata kunci: visualisasi, 3D, semu, 360 derajat.
UMKM
PSEUDO-3D FEATURES FOR PRODUCT VISUALIZATION
ON THE MSME ONLINE SALES APPLICATION
Abstract Product visualization using 3D graphics is an effective way to display a product, but preparing assets and maintaining online media that utilizes this method requires many things that not all MSMEs are able or ready to Limited human resources (HR) make it difficult to allocate specific personnel to provide and manage 3D graphic assets so that they can continuously supply data to online sales media owned by MSMEs.
A solution is needed that is easy to use by MSMEs with limited human resources, requires low costs and can utilize various tools that are widely available, and can be prepared in a short time.
The pseudo 3D visualization technique was adapted in the solution developed with the aim of producing a visualization feature that is able to show the physical appearance of the product in more detail from various points of view as if it were displayed at a physical point of sale, but without including the difficulty of creating a fully 3D digital representation.
Solution realization is carried out using an incremental evolutionary method which makes it possible to produce solutions in stages so that users can immediately take advantage of them.
The research has produced a solution in the form of a pseudo 3D feature to display MSME products in a web-based application.
The pseudo 3D feature that uses a series of 2D images can fulfill 3D-like visualization needs which can be rotated 360 degrees so that MSMEs can immediately offer their products online while visualizing them better than just displaying a few product photos.
The ease of preparing content for the pseudo 3D feature is an added value that helps MSMEs' daily operations.
Integration with conventional sales media is easy to do, and can work well as designed.
Keywords: visualization, 3D, pseudo, 360 degree.
MSME 448 Jurnal Teknologi Informasi dan Ilmu Komputer (JTIIK).
Vol.
No.
April 2025, hlm.
PENDAHULUAN
UMKM (Usaha Mikro.
Kecil, dan Menenga.
merupakan salah satu bidang yang terdampak Pandemi Covid-19 beberapa waktu lalu (Hasanudin.
Kebanyakan berusaha mengatasi masalah dengan menggunakan media online internet (Zagoto.
Yuliati.
Pambudi.
Cikdan, & Mukadi, 2.
dalam berbagai bentuk, umumnya media sosial, blog, dan marketplace (Sholihin & Mukhlis, 2.
Sekalipun pandemi telah berakhir, kunjungan tidak kembali normal seperti sebelumnya, sehingga media online tetap digunakan.
Namun transaksi secara online tidak sebanyak ketika pengunjung datang langsung ke lokasi penjualan.
Beberapa UMKM mengungkapkan masalah kurangnya detail visual pada produk yang ditawarkan, sehingga pengunjung merasa kurang Cara menampilkan representasi produk yang umum dengan foto dan video tidak cukup memunculkan ketertarikan kepada calon pembeli.
UMKM tidak dapat menambahkan atau mengubah cara visualisasi yang ada dalam beragam media Oleh karena itu beberapa UMKM mencoba alternatif lain yaitu menggunakan situs web agar dapat memunculkan cara menampilkan produk sesuai yang diinginkan.
Beragam teknologi yang telah populer dan banyak digunakan terutama yang berbasis server-side scripting (Odeh, 2.
semisal PHP dan MySQL (Nasution & Hanum, 2.
menjadi pilihan utama UMKM.
Dari beragam pilihan visualisasi, menampilkan representasi produk secara 3D menjadi sebuah pilihan yang menarik.
Karena akan digunakan dalam situs web, maka diperlukan teknologi yang sesuai, yaitu Web3D (Geng.
Chang.
Ting.
Jinyuan.
Enming.
Yiqiang.
Siyuan.
Long.
Lei, & Qingyu, 2.
dengan berbagai implementasinya, semisal yang telah distandardisasi seperti VRML (Shirbate & Ingole, 2.
dan X3D (Brutzman & FlotyEski, 2.
, maupun non standar seperti WebGL (Zheng & Ding.
Hanya saja, kebanyakan UMKM belum siap untuk menggunakan teknologi ini karena diperlukan kemampuan untuk melakukan adaptasi ke situs web yang telah ada.
Selain itu diketahui bahwa sumber daya spesifik teknologi informasi yang kurang memenuhi, dan ketiadaan tenaga, waktu, serta biaya untuk mempelajari & menguasai teknologi menjadi kendala besar bagi UMKM (Sucipto, 2.
Diperlukan pilihan lain yang lebih sederhana untuk dapat memanfaatkan gaya visualisasi 3D namun meminimalkan kesulitan pihak UMKM untuk mengimplementasikan ke situs webnya.
Salah satu pilihan teknik visualisasi yang menarik dalam situs web adalah animasi (Elling & de Vries, 2.
Animasi menggunakan banyak gambar yang ditampilkan secara cepat dan berurutan sehingga memunculkan efek gerakan (Hasebrink, 2.
, sama dengan seperti memutar reel film di Dunia komputer multimedia mengadaptasi hal ini sehingga video maupun animasi yang disebut sebagai gambar bergerak terdiri atas banyak gambar diam yang ditampilkan dalam suatu urutan (Zeng, 2.
dalam satuan fps atau frame per second (Debattista.
Bugeja.
Spina.
Bashford-Rogers, & Hulusic, 2.
Dengan demikian bilamana pengguna dapat mengatur pemunculan rangkaian gambar, sedangkan gambar hanya berisi sebuah objek namun ditangkap dari berbagai sisi, maka dapat memanipulasi pengguna yang akan berpikir bahwa dia sedang melihat objek dari berbagai sisi dengan cara diputar layaknya menggunakan grafika 3D.
Beberapa penelitian terkait penyediaan media penjualan daring bagi UMKM telah dilakukan sebelumnya, diantaranya penelitian oleh (Widiantoro, 2.
yang menggunakan metode User Centered Design (UCD), lalu (Imameza.
Junaedi, & Adrian, 2.
dan (Husodo.
Agitha.
Bimantoro.
Irmawati.
Dwiyansaputra, & Najah, 2.
yang menggunakan metode Design Thinking, juga (Kondoj.
Langi, & Putung, 2.
yang menggunakan metode Agile.
Akan tetapi, penelitian-penelitian tersebut lebih berfokus pada penerapan metode dan bukan menghadirkan inovasi bagaimana cara menampilkan produk agar lebih menarik perhatian konsumen.
Selain itu, terdapat penelitian yang dilakukan oleh (Prasetyo.
Firdausi.
Sabilirrasyad, & Hermansyah, 2.
, (Puspita.
Yulastri, & Yuliana, 2.
, (Cakranegara.
Zuana.
Sestri.
Surahman, & Kurniawansyah, 2.
, dan (Wahyuni & Ayuningsih.
Penelitian-penelitian tersebut menggunakan display konvensional berupa pemanfaatan elemen gambar individual untuk menampilkan gambar produk UMKM pada media daring yang disediakan.
Tidak ditemukan penggunaan teknik atau mekanisme tertentu yang berbeda dengan metode konvensional dalam menampilkan representasi digital produk UMKM.
Dalam rangka memanfaatkan teknologi konvensional yang berbasis HTML agar dapat memunculkan visualisasi representasi produk dengan gaya seolah 3D, maka dipilih teknik berupa penggunaan rangkaian citra 2D dalam suatu urutan agar dapat menampilkan efek seperti 3D.
Teknik ini memiliki potensi untuk meningkatkan keinginan membeli produk (Kim.
Baek, & Yoon, 2.
Studi serupa lainnya juga melaporkan bahwa niat pembelian peserta penelitian lebih tinggi sebagai respon terhadap gambar yang dapat diputar 360 derajat dibandingkan gambar statis dua dimensi (Chavan.
Deshmukh.
Ingle, & Chavan, 2.
Namun, studi-studi ini dilakukan pada bisnis-bisnis besar yang memiliki modal TI dan sumber daya manusia yang cukup.
Selain itu, cara ini memungkinkan pengunjung situs web UMKM untuk melihat representasi produk yang unik dan khas dari berbagai sisi sehingga mengungkap lebih banyak detail dan nampak lebih meyakinkan dibandingkan menggunakan foto-foto individual maupun video.
Hananto, dkk.
Fitur 3D Semu untuk Visualisasi A 449 Gambar 1.
Metode Pengembangan Teknik ini meniru gaya tampilan 3D namun sepenuhnya menggunakan grafika 2D, oleh karena itu di sini disebut sebagai 3D semu, meskipun beberapa orang menyebutnya representasi produk 360 derajat (Palacios-Ibyyez.
Marty.
Camba, & Contero, 2.
Karena hanya menggunakan citra 2D, maka akan lebih mudah bagi UMKM untuk menggunakannya demi menghasilkan visualisasi produk yang lebih baik dan menarik menggunakan gaya tampilan seperti Selain itu, mudah pula bagi mereka membangun konten untuk fitur dengan berbagai perangkat pendukung yang mudah diperoleh tanpa harus mempelajari teknologi baru.
Teknik ini disebut sebagai fitur karena memang tidak dapat langsung digunakan dalam semua situs web begitu saja, harus dilakukan modifikasi agar dapat menampilkan rangkaian citra menjadi seolah objek 3D dimana pengguna dapat seolah mengitarinya.
Makalah ini menyajikan penerapan fitur 3D semu yang didasarkan atas prinsip rangkaian gambar 2D agar situs web UMKM memiliki kemampuan visualisasi yang inovatif seperti yang terkadang ditemukan di situs web bisnis besar dan bereputasi.
Dengan demikian situs web UMKM dapat memiliki potensi
membangkitkan ketertarikan pengunjung situs pada produk yang dicermatinya agar berujung ke transaksi
METODE PENGEMBANGAN
Sebagai sebuah penelitian pengembangan, diperlukan sebuah basis metode pengembangan yang sesuai untuk mewujudkan solusi yang dituju.
Dalam penelitian ini, fitur 3D semu sebenarnya merupakan salah satu dari fitur-fitur yang dibangun dalam sebuah solusi lengkap berupa situs web penjualan produk.
Pengembangan secara keseluruhan dilakukan oleh beberapa kelompok kerja menggunakan metode incremental (Pressman & Maxim, 2.
Dalam penelitian ini setiap increment merupakan adaptasi dari metode sekuensial linier yang dijalankan dalam jalur waktu spesifik, seperti diperlihatkan dalam Gambar 1.
Metode ini dipilih karena terdapat beberapa fitur utama yang hendak dikembangkan, bilamana semuanya dibangun dalam satu rangkaian panjang maka akan memerlukan waktu lama sampai diperoleh sebuah produk.
Metode incremental memungkinkan pengembangan sistem basis terlebih dahulu agar dapat segera digunakan, dan tanpa menunggu pengembangan sistem basis selesai dapat diikuti pengembangan fitur dalam increment selanjutnya yang nantinya melengkapi sistem basis.
Selain fitur visualisasi inovatif produk berupa kemampuan menggunakan tampilan 3D semu, juga dibangun fitur basis data terintegrasi.
fitur transaksi.
fitur pengelolaan data yang ringkas dan sederhana sehingga mudah digunakan pihak UMKM.
pemesanan karena modal yang kecil membuat UMKM tidak membuat banyak stok barang.
implementasi Search Engine Optimization (SEO) (Lewandowski.
Synkler, & Yagci, 2.
agar situs dapat ditemukenali dengan lebih baik di internet sehingga dapat muncul di mesin pencari calon Karena paper ini secara khusus hanya membicarakan bagian 3D semu, maka yang disampaikan di sini adalah salah satu increment saja yaitu bagian pengembangan fitur 3D semu.
Fitur 3D semu dikembangkan dalam increment ke-4, dimana dilakukan langkah-langkah seperti dalam waterfall mulai dari analisis, perancangan, pengkodean, dan pengujian.
Analisis dilakukan spesifik untuk kebutuhan 3D semu, meliputi pengumpulan informasi sampel produk yang akan fitur-fitur sebelumnya yang mendukung penggunaan 3D semu, serta model interaksi pengunjung ke situs web yang Dilakukan pengumpulan data baik dari studi literatur, wawancara ke calon pengguna di lokasi mitra UMKM, dokumentasi produk, dan survei online pada prasyarat pemenuhan kebutuhan visualisasi yang inovatif ke calon pengunjung situs.
Langkah perancangan menyiapkan arsitektur sistem agar fitur 3D semu menjadi subsistem dari situs web yang dihasilkan dari increment pertama, kemudian memodifikasi struktur situs yang hendak 450 Jurnal Teknologi Informasi dan Ilmu Komputer (JTIIK).
Vol.
No.
April 2025, hlm.
disisipi fitur 3D semu, merancang antarmuka fitur dan interaksi ke pengguna, dan merancang update pada basis data dari increment sebelumnya guna menampung dan menggunakan data yang diperlukan untuk fitur spesifik ini.
Seperti halnya dalam langkah analisis, semua yang dijalankan dalam langkah perancangan didasarkan pada hasil yang didapat dari langkah serupa dalam semua increment sebelumnya agar fitur 3D semu dapat terintegrasi dengan baik ke situs web induk.
Pengkodean selanjutnya untuk mendapatkan realisasi dari fitur 3D semu sebagai salah satu fungsi dalam situs web.
Karena sejak increment pertama menggunakan PHP untuk skrip web server dan MySQL untuk basis data, maka pengkodean fitur 3D semu juga menggunakan teknologi yang sama dan dalam hal ini menggunakan kerangka kerja CodeIgniter yang memudahkan pengembangan menggunakan PHP (Purbo, 2.
Pengkodean juga menyisipkan penampil 3D semu dalam laman detail produk dan mempersiapkan fungsi pengelolaan data citra fitur 3D semu pada panel kelola admin yang dibangun dalam increment berikutnya yang telah mulai berjalan.
Kemudian dilakukan modifikasi pada basis data utama agar dapat menampung data berupa rangkaian citra yang akan ditampilkan dalam laman detail produk.
Di bagian akhir dijalankan pengujian UAT (User Acceptance Tes.
yang terdiri atas uji Alpha dan Beta (Pillai & Hemamalini, 2.
Penguji eksternal yang dilibatkan adalah calon pengguna dari mitra UMKM serta calon pengunjung.
Skenario utama dalam uji Alpha adalah pemasukan data terkait fitur 3D semu dan menampilkan visualisasi produk dalam bentuk 3D semu.
Keduanya dijabarkan dalam pertanyaan-pertanyaan menyangkut detail teknis Sedangkan fokus pada uji Beta adalah penerimaan pengguna dari sisi pengunjung maupun pengelola pada fitur 3D semu yang disisipkan dalam situs web basis hasil dari increment sebelumnya.
C Tidak akan memunculkan penambahan yang kompleks pada bagian panel pengelolaan data Fitur 3D semu menampilkan citra secara berurutan sesuai masukan pengguna.
Citra dalam urutan sebelum dan sesudah yang sedang ditampilkan akan dimunculkan tergantung masukan pengguna.
Bila citra sebelum atau sesudahnya berisi tampilan dari sisi berbeda, maka akan nampak efek seolah berputar yang mengesankan tampilan 3D.
Konsep dasar fitur ini diperlihatkan dalam Gambar 2.
Gambar 2.
Konsep dasar 3D semu Penggambaran urutan langkah menampilkan rangkaian citra pada fitur ini ditunjukkan pada Gambar 3.
Proses pada fitur ini diawali dengan menerima masukan dari pengguna, dapat berupa informasi arah usap saat menggunakan perangkat layar sentuh, informasi arah seret saat menggunakan perangkat penunjuk misalnya tetikus, atau informasi serupa lainnya.
Masukan ini diterjemahkan menjadi instruksi untuk menentukan apa yang harus dilakukan Instruksi akan diberikan pada fitur dalam bentuk perintah untuk memeriksa nomor urut berkas yang statusnya sedang ditampilkan.
Kemudian, berdasarkan data masukan dari instruksi tersebut, fitur menentukan apakah akan memilih nomor urut berikutnya atau sebelumnya.
Berkas citra aktual yang sesuai nomor urut yang dipilih dalam instruksi kemudian ditampilkan pada fungsi penampil.
HASIL DAN PEMBAHASAN
Analisis kebutuhan untuk fitur 3D semu .
i luar hasil analisis dari increment sebelumny.
memunculkan ringkasan kebutuhan utama berikut C Fitur 3D semu mudah diakses pengunjung.
C Penampil 3D semu mudah digunakan dan dapat ditampilkan dalam semua platform.
C Fitur dapat menampilkan gambaran produk yang lebih lengkap secara visual dibanding foto.
C Memiliki alur proses yang mudah bagi pengelola untuk mempersiapkan dan memasukkan material guna divisualisasikan.
C Masukan rangkaian citra dapat ditampilkan sebagai 3D semu tanpa proses lebih lanjut oleh Gambar 3.
Urutan Langkah Menampilkan Rangkaian Gambar Fitur menerapkan preloading rangkaian citra yang hendak ditampilkan.
Preloading memunculkan overhead waktu untuk menampilkan laman detail dengan durasi tergantung sistem pengunjung dan Hananto, dkk.
Fitur 3D Semu untuk Visualisasi A 451 koneksi jaringan, namun akan membuat pemuatan citra pada penampil 3D semu menjadi instan dan tidak ada pemuatan lagi yang dapat mengganggu atau menimbulkan tundaan tampilan saat rangkaian citra dimunculkan secara bergantian.
Proses preloading rangkaian citra untuk ditampilkan dalam fitur 3D semu diperlihatkan dalam Gambar 4.
Gambar 4.
Proses Preloading Rangkaian Gambar Tampilan 3D semu bersifat spesifik untuk sebuah produk, oleh karena itu fitur ini diletakkan di dalam laman yang menyajikan detail sebuah produk.
Situs web induk menyediakan semua data yang ditampilkan dalam laman detail produk, termasuk informasi himpunan data citra yang terkait dengan produk yang sedang ditampilkan.
Himpunan data citra ini yang nantinya ditampilkan bilamana pengguna memilih untuk menggunakan fitur 3D semu guna mengamati produk ini lebih lanjut.
Saat pengunjung mengakses fitur 3D semu, sebuah layer yang dibuat dengan DOM JavaScript akan ditampilkan di atas laman detail untuk menampilkan citra yang dapat dimanipulasi secara terbatas oleh Berdasarkan uraian proses sebelumnya, maka pemodelan proses untuk menampilkan 3D semu yang lebih lengkap ditunjukkan pada Gambar 5.
Fitur 3D semu mengambil respon pengguna yang memberikan masukan berupa event drag pada penampil 3D semu sebagai instruksi untuk menampilkan sejumlah citra berikutnya atau sebelumnya sesuai urutan rangkaiannya dan mengikuti arah gerakan drag.
Citra yang hendak diperlihatkan pada penampil telah di-preload oleh laman detail produk yang merupakan bagian dari situs web basis setelah data diambil dari basis data dan repository berkas.
Proses pemasukan berkas citra dan data terkait fitur ini dimodelkan seperti dalam Gambar 6.
Agar proses pengelolaan data berkas citra menjadi terpusat dan tidak mengurangi kesederhanaan dalam pengelolaan data situs secara keseluruhan, maka fungsi-fungsi tersebut disisipkan ke dalam subsistem pengelolaan data berupa laman konsol admin.
Desain pengelolaan data fitur 3D semu dalam increment ini dijadikan dasar dalam analisis increment selanjutnya untuk mempersiapkan dan membangun subsistem pengelolaan tersebut.
Gambar 5.
Proses Menampilkan Data 3D Semu Keterkaitan antara setiap bagian dari keseluruhan situs termasuk fitur 3D semu diperlihatkan dalam Gambar 7.
Fitur 3D semu tidak terhubung langsung ke basis data karena proses untuk mengalirkan data berupa rangkaian citra yang dibutuhkan fitur 3D semu dari basis data dilakukan oleh situs web induk.
Fitur 3D semu menggunakan informasi rangkaian citra yang telah diproses oleh situs web induk untuk digunakan dalam bagian Fitur 3D semu tidak pula terhubung langsung ke fitur pengelolaan data yaitu panel kelola admin karena data yang ditambahkan atau diubah dari fitur pengelolaan data akan digunakan fitur 3D semu setelah disediakan oleh situs web induk yang dimodifikasi agar integrasi dapat terlaksana.
Hasil pengembangan fitur 3D semu dalam increment ke-4 dari keseluruhan pengembangan pada penelitian ini diperlihatkan pada Gambar 8.
Fitur disisipkan langsung ke dalam laman detail produk dalam situs web UMKM untuk meminimalkan perubahan pada struktur laman situs web.
Fitur akan ditampilkan pada layer yang muncul di atas laman detail setelah pengunjung memberikan klik pada 452 Jurnal Teknologi Informasi dan Ilmu Komputer (JTIIK).
Vol.
No.
April 2025, hlm.
kotak tombol bertuliskan 360A yang ada di bawah foto preview produk.
Gambar 8.
Tampilan Fitur 3D Semu Gambar 6.
Proses Memasukkan Data 3D Semu Gambar 9.
Bagian Pemasukan Data Gambar 7.
Arsitektur Sistem Keseluruhan Pengisian data citra dimasukkan lewat laman pengelolaan data admin situs web hasil increment Tampilan laman pengelolaan dari increment pertama tidak banyak berubah dari desain awal karena hanya menyisipkan bagian pemasukan data seperti diperlihatkan pada Gambar 9.
Berkas citra yang menjadi material untuk fitur 3D semu dibuat dengan mengambil gambar produk menggunakan konfigurasi seperti dalam Gambar 10.
Konfigurasi, alat, dan berbagai hal lain terkait pengambilan gambar untuk membuat berkas citra 3D semu dalam penelitian ini telah dipublikasikan dalam sebuah paten sederhana (Hananto.
Salsabila.
Agustina.
Maulidiyah.
Syarif.
Fadly, & Agustin.
Pihak mitra UMKM dapat menggunakan beragam alat yang mudah diperoleh sehingga biaya penyediaan material untuk fitur dapat diminimalkan.
Gambar 10.
Konfigurasi Pengambilan Gambar Berkas-berkas citra tidak dikirimkan satu demi satu karena akan menyulitkan pengelola.
Setelah semua citra diedit, dinamai sesuai urutan, dan dibersihkan dari hal-hal yang tidak diperlukan termasuk latar belakang, maka rangkaian citra dikompres menjadi sebuah berkas dengan format .
Berkas ini bertindak sebagai kontainer untuk himpunan berkas citra yang akan dijadikan masukan ke server.
Dengan demikan pengguna hanya perlu mengirimkan sebuah berkas saja ke server.
Skrip dalam server akan melakukan dekompresi saat berkas ini dipilih lewat query untuk ditampilkan oleh fitur 3D semu.
Semua citra hasil dekompresi diletakkan dalam folder sementara dalam server, yang akan dimuat oleh skrip ke memori saat laman detail Hananto, dkk.
Fitur 3D Semu untuk Visualisasi A 453 ditampilkan di browser agar dapat digunakan oleh bagian penampil fitur 3D semu.
Fitur yang telah disisipkan ke dalam situs induk dievaluasi dengan metode User Acceptance Test (UAT) menggunakan uji Alpha dan Beta.
Uji Alpha dilaksanakan dalam lingkungan pengembang oleh para tester kalangan akademik dan wakil dari mitra Skenario utama pada uji Alpha adalah pengelolaan data dan akses ke penampil 3D semu.
Semua skenario dapat terselesaikan oleh semua tester, yang menunjukkan bahwa secara teknis semua bagian fitur 3D semu bekerja sesuai rancangannya.
Tabel 1 menampilkan daftar cek pada aspek teknis fitur 3D semu untuk uji Alpha.
Tabel 1.
Daftar Cek Aspek Teknis Laman penambahan data dapat menampilkan tombol pemilihan berkas kumpulan citra Tombol pemilihan berkas kumpulan citra dapat diakses pengguna Tombol pemilihan berkas kumpulan citra dapat memunculkan window pemilihan berkas kumpulan citra Nama berkas kumpulan citra yang dipilih dapat ditampilkan di laman penambahan data Berkas kumpulan citra yang dipilih dapat diunggah ke server Berkas kumpulan citra yang diunggah dapat tersimpan di server Laman detail produk menampilkan tombol 360A Tombol 360A dapat diakses oleh pengguna Tombol 360A dapat memunculkan layer penampil 3D semu di atas laman detail produk Layer penampil 3D semu memunculkan gambar yang sesuai produk Drag ke sisi kiri dan kanan pada layer dapat mengubah tampilan citra pada penampil 3D semu Perubahan citra pada penampil 3D semu sesuai arah gerakan drag Tidak ada error dalam memunculkan rangkaian citra pada penampil 3D semu Layer penampil 3D semu dapat ditutup dan laman detail produk tetap berfungsi normal Oo Oo Oo Oo Oo Oo Oo Oo Oo Oo Oo Oo Oo Oo Setelah semua bagian teknis diketahui dapat bekerja dengan baik sesuai rancangannya, maka fitur siap untuk dilakukan uji Beta.
Poin-poin uji Beta yang memerlukan respon subjektif penguji adalah tentang:
C kecepatan pemuatan.
C kelengkapan informasi.
C kehalusan dan kelancaran tampilan.
C penggambaran produk yang inovatif.
C kesan yang baik pada produk dan cara C ketertarikan pada produk.
C keinginan mencermati tampilan produk secara mendalam.
C pendeknya waktu mempelajari fitur.
C kemudahan memahami informasi.
C kejelasan dan detail tampilan dan informasi.
C kemudahan dan kesederhanaan akses.
C kemudahan interaksi ke fitur.
C kinerja fitur yang tetap tinggi untuk menampilkan berbagai representasi digital dari produk.
C kemudahan terkait perangkat, browser, dan platform pengguna.
C transparansi integrasi ke situs web induk.
Setiap poin uji didetailkan menjadi satu atau lebih pernyataan yang memiliki pilihan respon yaitu sangat tidak setuju, tidak setuju, tidak tahu, setuju, dan sangat setuju.
Penguji memilih responnya secara subjektif setelah mencoba fitur.
Skor untuk tiap respon mulai dari 1 s.
d 5 dan akan dihitung menggunakan skala penerimaan Likert berdasarkan respon semua penguji yang berjumlah 40 orang.
Untuk keperluan uji Beta, maka fitur disisipkan ke dalam versi produksi situs web induk kemudian diletakkan dalam sebuah server pemberi layanan hosting web agar dapat dilakukan pengujian secara Hal ini sesuai dengan definisi uji Beta yang diacu, yaitu pengujian oleh calon pengguna dalam lingkungan penggunaan sebenarnya yang tidak dikendalikan oleh pengembang.
Penguji dapat menggunakan perangkat apapun dengan platform, sistem operasi, dan browser apapun yang biasa mereka gunakan sehari-hari.
Tidak dipersyaratkan browser setidaknya harus sesuai standar HTML5 karena perangkat modern umumnya telah menggunakan browser yang kompatibel standar Penguji kemudian memberikan respon lewat form online sehingga hasilnya dapat langsung digunakan oleh tim pengembang.
Terdapat keseluruhan 30 pernyataan yang harus direspon penguji.
Total skor yang didapat adalah Kemudian dilakukan penghitungan skala nilai untuk mengetahui bagaimana sikap pengguna secara umum berdasarkan skor total tersebut.
Menetapkan mengalikan skor respon maksimal dengan jumlah penguji dan jumlah pernyataan.
Nilai maksimal = 5 x 30 x 40 = 6000 Menetapkan mengalikan skor respon minimal dengan jumlah penguji dan jumlah pernyataan.
Nilai minimal = 2 x 30 x 40 = 2400 Menetapkan nilai median, yaitu jumlah nilai maksimal dan minimal dibagi dua.
Nilai median = .
/ 2 = 4200 Menetapkan nilai kuartil 1, yaitu jumlah nilai minimal dan median dibagi dua.
Nilai kuartil 1 = .
/ 2 = 3300 Menetapkan nilai kuartil 3, yaitu jumlah nilai maksimal dan median dibagi dua.
Nilai kuartil 3 = .
/ 2 = 5100 Skala nilai dibuat berdasar perhitungan di atas untuk menyusun kategori sikap.
Skala nilai dan kategori sikap terkait diperlihatkan dalam Tabel 2.
Terdapat empat tingkat kategori sikap yang disusun berdasarkan skala nilai, yaitu sangat tidak setuju (STS).
tidak setuju (TS), setuju 454 Jurnal Teknologi Informasi dan Ilmu Komputer (JTIIK).
Vol.
No.
April 2025, hlm.
(S).
dan sangat setuju (SS).
Kategori sikap tidak menyertakan sikap netral, sehingga tidak dimunculkan dalam skala nilai.
Tabel 2.
Penyusunan Skala Nilai batas skor
Kuartil 3 O n O Skor Maksimal 5100 - 6000
Median O n < Kuartil 3
4200 - 5099
Kuartil 1 O n < Median 3300 - 4199
STS
Skor minimal O n < Kuartil 1
2400 - 3299
Kategori keseluruhan ditetapkan berdasar kategori sikap.
Dengan demikian terdapat empat kategori penerimaan sesuai kategori sikap, yaitu sangat negatif, negatif, positif, dan sangat positif.
Gambar 11 menunjukkan posisi skor hasil pengujian dalam skala nilai yang berada pada kategori sangat positif, yang menunjukkan bahwa para penguji menyatakan sangat menerima fitur 3D semu ini sebagai bagian dari situs web keseluruhan.
Gambar 11.
Hasil Uji oleh Kelompok Pengguna Berdasarkan hasil UAT di atas, secara umum para pengguna kelompok pengunjung menyatakan penerimaannya kepada fitur 3D semu yang diintegrasikan dalam situs yang menjadi media penjualan online UMKM.
Pengguna kelompok pengelola juga menjalankan uji Beta seperti di atas, dengan tambahan fokus uji yaitu:
C kesederhanaan dalam proses pengelolaan C kemudahan penyiapan data.
C kemudahan untuk mengelola data.
C integrasi dengan situs secara keseluruhan.
C kesesuaian hasil visualisasi dengan produk.
Penguji kelompok pengelola hanya satu karena dari UMKM mitra penelitian yang ditugaskan untuk mengelola hal terkait TI hanya seorang.
Pernyataan yang direspon sejumlah 40.
Menggunakan cara perhitungan sebelumnya, skala nilai secara singkat disampaikan yaitu nilai maksimal = 200, nilai minimal = 40, median = 120, kuartil 1 = 80, dan kuartil 3 = 160.
Hasil skor uji Beta bagian ini adalah Posisi skor tersebut pada skala nilai diperlihatkan dalam Gambar 12 yang termasuk dalam kategori sangat positif.
Gambar 12.
Hasil Uji oleh Kelompok Pengelola Meskipun belum secara khusus dirancang untuk memiliki kemampuan responsif, tampilan fitur dapat menyesuaikan dengan modus tampilan pada perangkat pengguna.
Eksperimen penggunaan secara khusus pada perangkat bergerak berupa ponsel dan tablet memunculkan komentar yaitu tampilan keseluruhan dapat tetap mudah dilihat dan dicermati.
ukuran teks masih memungkinkan untuk membuat tulisan dapat terbaca.
dan model 3D dapat diakses baik dalam laman kategori maupun dalam laman Tampilan masih nampak proporsional, namun karena belum secara khusus dikonfigurasi untuk layar kecil maka penyesuaian ukuran termasuk teks penyerta masih diperlukan.
Beberapa catatan diperoleh selama eksperimen Fitur 3D semu dalam penelitian ini dibatasi untuk dapat menampilkan sampai 60 citra untuk setiap putaran.
Semakin banyak citra akan membuat pergantian gambar nampak semakin halus.
Namun berdasarkan eksperimen, bila menggunakan lebih dari 60 citra maka muncul permasalahan dalam proses preloading yang mengakibatkan fitur ini tidak selalu berhasil menampilkan semua citra yang telah diunggah ke server.
Karena fitur menggunakan metode preload citra sebelum dimunculkan dalam layer penampil, bila citra menggunakan resolusi dan kualitas tinggi maka efek pembebanan seperti saat jumlah citra melewati 60 dapat terjadi bahkan sebelum jumlah maksimal 60 citra tercapai.
Resolusi dan kualitas tinggi membuat ukuran berkas menjadi lebih besar.
Diperlukan penurunan resolusi hingga maksimal 600x600 dan faktor kompresi citra dalam format .
JPG setidaknya 30 agar ukuran kumpulan berkas keseluruhan menjadi lebih kecil namun tampilan produk tidak banyak mengalami perubahan dibandingkan berkas Penurunan ukuran berkas yang signifikan mempermudah pengunggahan ke server dan mempercepat preload, sekaligus meminimalkan kemungkinan terjadinya error.
Emulasi 3D sepenuhnya tidak dilakukan dalam fitur karena imersi gerakan yang diperlihatkan hanya secara horisontal dari satu sisi saja, yaitu dari kanan ke kiri atau sebaliknya.
Bila hendak mengemulasi gerakan vertikal, maka diperlukan skrip tambahan untuk mendeteksi input pengguna yang berbeda pola, sekaligus mengecek pada citra ke berapa perintah tersebut muncul.
Selain itu, bila pada putaran horisontal terdapat 60 gambar, maka diperlukan 60x60=3600 citra secara keseluruhan.
Bila sebelum selesai melakukan putaran vertikal pengunjung membuat putaran horisontal lagi, maka diperlukan 60 gambar lagi untuk setiap posisi vertikal yang 60x60x60=216.
000 citra.
Pembuatan citra sebanyak ini akan sangat menyulitkan pemilik UMKM, dan memori perangkat pengguna yang dipakai untuk menampilkan fitur akan sangat terbebani.
Penggunaan 3D penuh akan lebih sesuai daripada menggunakan 3D semu, namun akan menjadikan target kesederhanaan dan kemudahan bagi kalangan UMKM tidak dapat terpenuhi.
Untuk mengatasi hal ini maka arah dan sudut kamera saat pengambilan Hananto, dkk.
Fitur 3D Semu untuk Visualisasi A 455 citra diposisikan mencakup area yang dapat mengungkap beberapa sisi sekaligus sehingga pengunjung tidak perlu harus melakukan putaran vertikal untuk melihat sisi tertentu pada produk yang mereka cermati.
Karena bukan merupakan grafika 3D sepenuhnya, modus-modus interaksi yang ada dalam navigasi 3D tidak dapat dilakukan dalam tampilan fitur 3D semu.
Pengunjung hanya dapat melihat tampilan yang menyerupai rotasi tanpa dapat melakukan zoom, pan, shift, dan sebagainya.
Fungsi zoom hanya dapat dilakukan pada foto-foto produk selain yang ditampilkan dalam fitur 3D semu.
Meskipun demikian, secara umum visualisasi yang dihasilkan dapat memunculkan gambaran produk yang lebih lengkap dan terlihat lebih menyeluruh bila dibandingkan hanya menggunakan sejumlah foto dan Interaktivitas ke representasi digital dari produk untuk melakukan pencermatan juga dapat menjadi nilai tambah dalam visualisasi menggunakan fitur 3D semu, sehingga dapat meningkatkan kualitas cara penyajian informasi secara keseluruhan yang meningkatkan kesan pengguna pada produk, dan meningkatkan peluang terjadinya transaksi.
KESIMPULAN
Penelitian telah menghasilkan sebuah solusi berupa fitur visualisasi inovatif yang dapat memperlihatkan tampilan fisik produk dari berbagai sudut layaknya grafika 3D.
Solusi berupa fitur 3D semu yang diintegrasikan dalam situs web mudah digunakan oleh kalangan UMKM dengan SDM terbatas untuk mengelola data terkait, dan dapat diakses pengunjung dengan mudah.
Fitur dapat memperlihatkan representasi digital dari produk dengan lebih baik dibandingkan penggunaan beberapa foto seperti umumnya digunakan situs lain sejenis, sehingga dapat memberikan pemahaman dan kesan yang lebih baik pada produk yang ditawarkan UMKM kepada pengunjung situs.
Produk dapat memiliki kelebihan tertentu yang perlu mendapat fokus melalui visualisasi yang Penelitian selanjutnya yang direncanakan adalah upaya mengemulasi tampilan navigasi gaya 3D yang lebih luas dibandingkan sekedar nampak memutar objek.
Dengan demikian visualisasi akan mengungkap lebih banyak hal kepada pengunjung agar menjadi semakin tertarik pada produk tersebut.
DAFTAR PUSTAKA