IMPLEMENTASI TEKNIK IMAGE VAMP UP PADA WEBSITE E-COMMERCE TOKO PERNIK DIGITAL YOGYAKARTA
NASKAH PUBLIKASI
diajukan oleh Muhammad Iqbal Anugerah Thang 08.11.2380
kepada SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER AMIKOM YOGYAKARTA YOGYAKARTA 2015
IMPLEMENTASI TEKNIK IMAGE VAMP UP PADA WEBSITE E-COMMERCE TOKO PERNIK DIGITAL YOGYAKARTA Muhammad Iqbal Anugerah Thang 1), Dhani Ariatmanto2), 1)
Teknik Informatika STMIK AMIKOM Yogyakarta Teknik Informatika STMIK AMIKOM Yogyakarta Jl Ringroad Utara, Condongcatur, Depok, Sleman, Yogyakarta Indonesia 55283 2)
Email :
[email protected]),
[email protected])
javascript fabric.js. Untuk mengetahui tingkat daya guna penggunaan aplikasi penulis menggunakan kajian usability pada faktor efektivitas, efisiensi, dan kepuasan.
Abstract – The electronic transaction or the popular term is e-commerce growth rapidly today. Pernik Digital’s Shop want to try a new opportunity in the use of e-commerce. The processes of creating a customer’s design are takes a long time, so the necessary tools in the form of ordering customer’s design website to help expedite the performance of this company. The solution of the above problem is solved by making a website features image vamp up. The research purposes making an image vamp up web that utilizes HTML5 canvas and the fabric.js library. To get the user’s perception, usability testing tools are used. The testing result is representing the success rate of usability 79.29%. The implementation of image vamp up technique on the e-commerce website of Pernik Digital Yogyakarta’s Shop required more improvement to satisfied the users.
2. LANDASAN TEORI 2.1 Tinjauan Pustaka Penelitian yang dilakukan oleh Sahputra,dkk. (2012) yakni membuat aplikasi image editor berbasis web sebagai alternatif aplikasi berbasis desktop. Sahputra, dkk. mengembangkan aplikasi image editor dengan metode pengembangan SDLC model waterfall. Pemrograman menggunakan PHP sebagai image processing di sisi server, sedangkan sisi client menggunakan bantuan jquery dan jqueryUI untuk memudahkan interaktivitas objek [3]. Setia (2012) meneliti tentang evaluasi usability pada aplikasi berbasis web. Tujuan dari penelitian ini yaitu untuk menganalisis akseptabilitas pada aplikasi SIMZAKI. Dari penelitian tersebut diperoleh hasil bahwa faktor error mempengaruhi usability aplikasi SIMZAKI [4].
Keywords - image vamp up, canvas, HTML5, fabric.js, usability. 1. PENDAHULUAN Aplikasi e-commerce meliputi bidang saham, pekerjaan, pelayanan keuangan, asuransi, mall, pemasaran dan periklanan online, pelayanan pelanggan, lelang, travel, hardware dan software PC, hiburan, buku dan musik, pakaian, ritel dan publikasi online [1]. Hingga hari ini penggunaan aplikasi e-commerce sudah kian populer. Toko Pernik Digital Yogyakarta yang merupakan unit usaha dalam bidang pencetakan foto pada bantal ingin mengikuti trend e-commerce untuk meningkatkan produktivitas dan efisiensi kerja desainer grafis perusahaan ini.
Penelitian mengenai usability yang lain dilakukan oleh Nurhadryani, dkk. (2013) dengan tema mobile application pembelajaran sarapan bagi anak-anak. Hasil penelitian adalah peningkatan usability aplikasi mempengaruhi kemanfaatan aplikasi tersebut kepada pengguna, sehingga pengujian usability sangat diperlukan dalam mengembangkan suatu aplikasi [5]. Penelitian yang penulis lakukan bertujuan mengembangkan aplikasi dengan bantuan pustaka javascript fabric.js dan menitikberatkan pada sisi usability dari implementasi teknik image vamp up pada website e-commerce Toko Pernik Digital Yogyakarta.
Selama ini perusahaan mengandalkan desainer grafis untuk mengolah foto yang ingin dicetak pada bantal. Tentu saja hal ini kurang efisien. Dengan adanya media pembuatan desain secara online, pelanggan dapat mengkreasikan desainnya secara mudah dan cepat. Image vamp up adalah sebuah pengolah gambar berbasis jquery dan jqueryUI dimana pengguna dapat memindah dan mengubah ukuran objek stiker untuk kemudian menggabungkannya menjadi satu file gambar dengan pustaka PHP [2]. Untuk inilah maka penulis mencoba bermaksud mengimplementasikan teknik image vamp up pada website e-commerce Toko Pernik Digital Yogyakarta.
2.2 Image Vamp Up Istilah image vamp up dikenalkan oleh Lou (2010) untuk menamai aplikasi buatannya yang interaktif berbantukan jquery dan jqueryUI untuk melakukan dragging, dropping, dan resizing objek, serta PHP untuk menggabungkan beberapa objek menjadi satu file gambar. 2.3 Usability Faktor Daya Guna (usability) menurut Nielsen (2012) yaitu suatu atribut kualitas yang menentukan seberapa mudahkah antarmuka pengguna digunakan.
Dalam penelitian ini, penulis menggunakan prototipe aplikasi image vamp up dengan bantuan pustaka 1
Dalam ISO 9241, Koivunen & May (2002) mengemukan usability terdiri dari 3 komponen yakni efektivitas, efisiensi, dan kepuasan pengguna yang mengukur pengguna sistem untuk memperoleh tujuan tertentu di lingkungan tertentu.
aspek efektivitas, efisiensi, dan kepuasan pengguna. Data pengujian menggunakan kuesioner dengan 10 pertanyaan pada Skala Likert dan terdapat 28 responden yang berpartisipasi dalam pengujian usability. Tabel 1 menyajikan daftar pertanyaan pengujian usability implementasi teknik image vamp up pada website e-commerce Toko Pernik Digital Yogyakarta.
2.3.1 Definisi Efektivitas Efektivitas berhubungan dengan keberhasilan pengguna dalam menjalankan suatu tugas tertentu dari suatu sistem yang digunakannya.
Tabel 1. Daftar Pertanyaan
2.3.2 Definisi Efisiensi Efisiensi berkenaan dengan kelancaran pengguna melakukan tugas dalam sistem yang sedang digunakannya. Efisiensi berkaitan dengan kebutuhan sumber daya seperti usaha, waktu, biaya, dan sumberdaya lain sehingga dapat mencapai tujuan penggunaannya. Efisisensi diukur dalam kecepatan penyajian informasi yang tepat dan lengkap.
No
Pernyataan
1.
Saya mengetahui aplikasi image vamp up. Setiap menu dalam aplikasi image vamp up dapat saya temukan dengan cepat. Sistem dapat memudahkan pembuatan desain. Saya mampu mengoperasikan aplikasi tanpa ada masalah. Setiap fungsi dalam aplikasi bisa saya gunakan dengan mudah. Semua fitur dalam aplikasi image vamp up berjalan sesuai dengan fungsinya. Hasil pengolahan gambar dapat disimpan ke komputer. Hasil unggahan foto atau gambar dapat dilihat dengan cepat pada web ini. Tampilan aplikasi image vamp up menyenangkan. Secara keseluruhan sistem sudah memfasilitasi saya untuk mendesain gambar yang saya inginkan.
2.
3. 4.
2.3.3 Definisi Kepuasan
5.
Kepuasan berkaitan dengan sikap penerimaan pengguna terhadap penggunaan sistem. Kepuasan pengguna mengindikasikan bahwa sistem layak pakai.
6.
2.4 Fabric.js Fabric.js adalah sebuah library javascript yang khusus menangani canvas HTML5. Fabric menyediakan kekurangan model obyek dari suatu canvas seperti penanganan SVG parser, interaktivitas layer, dan seluruh komponen yang mungkin belum terorganisasi dengan rapi. Dengan Fabric, pengguna tidak memerlukan lagi berbagai apps yang berbasis Flash [6].
7. 8.
9. 10.
2.5 HTML5 HTML5 diperkenalkan oleh Web Hypertext Application Technology Working Group (WHATWG). Beberapa browser terbaru seperti Chrome (mulai versi 1.0) dan Firefox (mulai versi 1.5) sudah mendukung fitur yang disediakan HTML5. Dengan fitur HTML5, menjalankan file audio, video, dan animasi interaktif tidak memerlukan plugin tambahan lagi.
Aspek Penilaian Efektivitas Efektivitas
Efektivitas Efisiensi Efisiensi
Efektivitas
Efisiensi Efisiensi
Kepuasan Kepuasan
3.2 Rancangan Layout Berikut konsep antarmuka halaman utama image vamp up.
2.6 Canvas Canvas adalah salah satu fitur HTML5 yang dapat membuat bidang datar seperti gambar persegi panjang, kotak, lingkaran, atau untuk menambahkan gambar dan video pada browser. 3. METODE PENELITIAN 3.1 Teknik Pengumpulan Data Penulis melakukan pengumpulan data awal dengan melakukan wawancara langsung kepada pemilik toko. Daftar pertanyaan berkenaan dengan kebutuhan penelitian dan pengembangan sistem. Untuk menguji kebergunaan sistem, dilakukan pengujian usability pada
Gambar 1. Konsep Antarmuka Halaman Utama
2
Penjelasan dari konsep tersebut adalah berikut ini: 1. Tab Menu terdiri dari: a. Background: pengguna dapat memilih warna latarbelakang canvas yang diinginkan, tersedia 21 pilihan warna. b. Custom Text/Image: pengguna dapat menambahkan text pada canvas dan juga gambar (bertipe png, gif, jpg, bmp). c. Export: pengguna dapat menyimpan gambar pesanannya ke server. d. Simpan Gambar: pengguna dapat menyimpan hasil gambar yang dibuatnya ke komputer. 2. Canvas berukuran 800x600 pixel. Hal ini bertujuan agar resolusi hasil gambar yang diolah tetap proporsional dan tidak rusak, seperti blur atau pecah-pecah, ketika dicetak/print.
4. IMPLEMENTASI DAN PEMBAHASAN 4.1 Implementasi Rancangan Layout Screenshot halaman utama image vamp up ditampilkan pada Gambar 4.
Gambar 4. Screenshot Halaman Utama 4.2 Pengujian Alpha
3.3 Use Case Diagram
Penulis melakukan pengujian pada fungsi image editor seperti custom background, insert text, insert image, tambah sticker, resize, rotate, delete, wrap position (send to back/bring to front), font family, font weight, font underline, font color, dan font border color. Gambar 5 menunjukkan ujicoba sistem pada browser Firefox.
Berikut use case diagram dari aplikasi image vamp up.
Gambar 2. Use Case Diagram Gambar 5. Pengujian Alpha pada browser Firefox
3.4 Sequence Diagram Berikut sequence diagram dari image vamp up ini.
Dari gambar 5 diketahui bahwa pengujian pada browser Firefox tidak menemukan masalah pada sistem. Dengan demikian aplikasi ini dapat dijalankan pada browser Firefox, karena browser ini sudah mendukung canvas.
SequenceDiagram_FileUpload
canvas
fileInput
reader
user request file
4.3 Pengujian BlackBox
btn-image.click() fileInput.click()
Skenario pengujian blackbox dalam tabel 2.
change() baca imageType
Tabel 2. Skenario Pengujian BlackBox fileOK
No canvas.add(image)
1
readAsDataURL
tampilkan file
Gambar 3. Sequence Diagram Upload Gambar
3
Test Case
User klik tab menu Background
Hasil yang Diharapkan
Benar/Salah (/×)
Muncul pilihan warna background sejumlah 21 pilihan warna dan 1 warna transparan
Tabel 2. (Lanjutan) No
Test Case
2 User mengklik salah satu warna background
3 User mengklik tab menu Custom Text/Image 4 User mengetikkan text pada textarea dan klik icon panah 5 User mengklik text pada canvas
6 User mengklik tombol Insert Image
7 User mengklik salah satu gambar pada canvas
Hasil yang Diharapkan
Warna background pada canvas berubah seketika menyesuaikan warna yang dipilih oleh user Muncul form input text, tombol insert image, pilihan gambar sticker Muncul text yang diinputkan user pada canvas sesuai dengan ketikan pada textarea Muncul menu editor seperti font family, font color, font weight, border color, resize, rotate, delete, send to back, bring to front File bertipe .gif, .png., .jpg, .bmp dapat diunggah dan tampil pada canvas Muncul editor Send to Back, Bring to Front, dan Delete di menu editor canvas dan pada sekeliling gambar muncul garis bantu berbentuk kotak sehingga gambar dapat diubah bentuknya (resize) dan diputar (rotate)
4.4 Pengujian Usability Benar/Salah (/×)
Pada pengujian usability, aspek yang diuji adalah efektivitas, efisiensi, dan kepuasan pengguna. Untuk menghitung success rate faktor usability berdasarkan hasil rekapitulasi jawaban kuesioner responden menggunakan rumus sebagai berikut:
(1) Dengan Xi adalah nilai keberhasilan responden ke-i, Xi = {1,2,3,4,5}. n adalah jumlah seluruh responden yakni 28. Rumus penghitungan usability dihitung sebagai berikut:
(2) Skenario dari pengujian usability aplikasi image vamp up yaitu dengan membagikan kuesioner kepada responden terpilih acak. Sampel terdiri dari 28 responden dengan waktu pengambilan data berlangsung 5 hari. Penulis menunjukkan sistem yang telah dibuat lalu responden mengujicoba sistem kemudian mengisi kuesionernya. Tabel 3 menyajikan data jawaban responden, sebagai berikut.
Tabel 3. Rekapitulasi Jawaban Responden No
Pernyataan
1.
Saya mengetahui aplikasi image vamp up. Setiap menu dalam aplikasi image vamp up dapat saya temukan dengan cepat. Sistem dapat memudahkan pembuatan desain. Saya mampu mengoperasikan aplikasi tanpa ada masalah. Setiap fungsi dalam aplikasi bisa saya gunakan dengan mudah. Semua fitur dalam aplikasi image vamp up berjalan sesuai dengan fungsinya.
2.
3. 4.
5.
6.
4
SS
Jumlah Responden S N TS STS
11
13
1
2
1
6
18
3
1
0
4
21
3
0
0
5
18
5
0
0
6
12
9
1
0
6
20
1
0
1
Tabel 3. (Lanjutan) No
Pernyataan
7.
Hasil pengolahan gambar dapat disimpan ke komputer. Hasil unggahan foto atau gambar dapat dilihat dengan cepat pada web ini. Tampilan aplikasi image vamp up menyenangkan. Secara keseluruhan sistem sudah memfasilitasi saya untuk mendesain gambar yang saya inginkan.
8.
9.
10.
SS
Tabel 5. Hasil Pengujian Aspek Efisiensi
Jumlah Responden S N TS STS
No 4.
16
11
1
0
0
13
10
4
1
0
5.
7.
2.
3. 6.
Saya mampu mengoperasikan aplikasi tanpa ada masalah. Setiap fungsi dalam aplikasi bisa saya gunakan dengan mudah. Hasil pengolahan gambar dapat disimpan ke komputer. Hasil unggahan foto atau gambar dapat dilihat dengan cepat pada web ini.
80
76,43
90,71
15
9
3
0
8.
2
20
6
0
0
Berikutnya menghitung success rate pada aspek efisiensi dari hasil pengujian aspek efisiensi tersebut.
Pernyataan
Efektivitas (%)
Saya mengetahui aplikasi image vamp up. Setiap menu dalam aplikasi image vamp up dapat saya temukan dengan cepat. Sistem dapat memudahkan pembuatan desain. Semua fitur dalam aplikasi image vamp up berjalan sesuai dengan fungsinya.
82,14
85
Dari pengujian kepuasan pengguna dapat dihitung success rate yang disajikan dalam tabel 6.
Tabel 4. Hasil Pengujian Aspek Efektivitas
1.
Efisiensi (%)
1
Dari data jawaban responden, diperoleh tingkat efektivitas dari masing-masing pernyataan pada aspek penilaian efektivitas dan disajikan dalam tabel 4.
No
Pernyataan
Tabel 6. Hasil Pengujian Aspek Kepuasan Pengguna Kepuasan No Pernyataan Pengguna (%) 4. Saya mampu 70 mengoperasikan aplikasi tanpa ada masalah. 5. Setiap fungsi dalam aplikasi 77,14 bisa saya gunakan dengan mudah.
80,71
80,71 81,43
Berikutya menghitung success rate aspek kepuasan pengguna sebagai berikut.
Berikutnya menghitung success rate pada aspek efektivitas dari hasil pengujian aspek efektivitas tersebut.
Sehingga diperoleh success rate pengujian usability yang dihitung menggunakan rumus (1) sebagai berikut:
Dari pengujian efisiensi dapat dihitung success rate yang disajikan dalam tabel 5.
5
2. Hasil pengujian usability ditunjukkan dalam grafik.
3.
4.
Tampilan antarmuka perlu dibuat lebih menarik, sehingga kepuasan pengguna lebih meningkat. Sistem image vamp up ini hanya optimal pada desktop berukuran lebih besar atau sama dengan 800x600 pixel, untuk layar beresolusi kurang dari ukuran tersebut perlu dibuat sistem yang lain. Pengguna lebih menyukai mengolah gambar dari smartphone, untuk pengembangan lanjutan dari sistem ini perlu lebih diarahkan pada pengembangan aplikasi mobile.
Daftar Pustaka [1] M. Suyanto, Strategi Periklanan pada e-Commerce Perusahaan Top Dunia, Yogyakarta: Andi Offset, 2003. [2] M. Lou, “Interactive Image Vamp up with jQuery, CSS3 and PHP,” 22 Maret 2010. [Online]. Dari: http://tympanus.net/codrops/2010/03/22/interactiveimage-vamp-up-with-jquery-css3-and-php/. [Diakses 04 April 2015]. [3] A. O. Sahputra, A. Susilo dan T. Nurhastuti, “Aplikasi Photo Editor Berbasis Web (PicFiix) sebagai Alternatif Aplikasi Berbasis Desktop,” dalam Seminar Nasional Aplikasi Sains & Teknologi (SNAST) Periode III, Yogyakarta, 2012. [4] L. D. Setia, “Evaluasi Usability untuk Mengetahui Akseptabilitas Aplikasi Berbasis Web,” 2012. [Online]. [5] Y. Nurhadryani, S. K. Sianturi, I. Hermadi dan H. Khotimah, “Pengujian Usability untuk Meningkatkan Antarmuka Aplikasi Mobile,” Jurnal Ilmu Komputer Agri-Informatika, vol. 2, no. 2, pp. 83 - 93, 2013. [6] Anonim, “Introduction to Fabric.js,” 2014. [Online]. Dari: http://fabricjs.com/fabric-intro-part-1/. [Diakses 9 April 2015].
Gambar 6. Grafik Hasil Pengujian Usability Dari pengujian usability dapat diketahui tingkat success rate yang paling rendah yaitu aspek kepuasan pengguna.
5. KESIMPULAN DAN SARAN 5.1 Kesimpulan Berdasarkan penelitian yang sudah penulis lakukan, diambil beberapa kesimpulan diantaranya: 1. Sistem berjalan dengan baik pada browser Chrome dan Firefox. 2. Pengujian usability pada implementasi teknik image vamp up menunjukkan success rate masing-masing faktor yaitu efektivitas 81,25%, efisiensi 83,04%, dan kepuasan pengguna 73,57%. 3. Tingkat kepuasan pengguna menunjukkan success rate paling rendah dibandingkan 2 aspek usability lainnya. Kepuasan pengguna dapat berpengaruh pada kebermanfaatan penggunaan aplikasi ini. 4. Web image vamp up ini sudah memfasilitasi pengguna dalam pengolahan gambar. Fabric.js merupakan javascript library yang dapat membantu pengembangan aplikasi ini secara cepat dan mudah. 5. Web ini merupakan prototipe yang masih memerlukan banyak penyempurnaan, sehingga pengguna bisa mendapatkan kepuasan yang lebih baik.
Biodata Penulis Muhammad Iqbal Anugerah Thang, memperoleh gelar Sarjana Komputer (S.Kom.), Jurusan Teknik Informatika STMIK AMIKOM Yogyakarta, lulus tahun 2015. Saat ini menjadi Staf Bagian Akademik di Fakultas Sains dan Teknologi UIN Sunan Kalijaga Yogyakarta. Dhani Ariatmanto, memperoleh gelar Sarjana Komputer (S.Kom.), Jurusan Teknik Informatika STMIK AMIKOM Yogyakarta. Memperoleh gelar Magister Komputer (M.Kom.) Jurusan Teknik Informatika STMIK AMIKOM Yogyakarta. Saat ini mengajar di STMIK AMIKOM Yogyakarta.
5.2 Saran Supaya penelitian ini lebih bermanfaat dan lebih baik lagi, maka untuk penelitian selanjutnya perlu memperhatikan hal-hal berikut ini: 1. Konstruk pertanyaan pada kuesioner perlu dilakukan uji validitas dan reliabilitas.
6
