PENGARUH DESAIN RESPONSIF TERHADAP USER EXPERIENCE PENGUNJUNG WEBSITE TAMAN REKREASI SENGKALING
PENGARUH DESAIN RESPONSIF TERHADAP USER
EXPERIENCE PENGUNJUNG WEBSITE TAMAN REKREASI
SENGKALING
Yufis Azhar
Teknik Informatika Universitas Muhammadiyah Malang / Malang
Kontak Person:
Yufis Azhar
Kantor Jurusan Teknik Informatika UMM
GKB 3 lantai 2 Raya Tlogomas 246 Malang, 65144
Telp: 085790809961, E-mail: yufis.az@gmail.com
Abstrak
Suatu website lokasi wisata harus mampu menyediakan informasi yang up to date, menarik, serta
mudah digunakan. Sayangnya, Taman Ria Sengkaling yang merupakan salah satu lokasi wisata
legendaris di kota Malang belum memiliki website yang memenuhi standar tersebut. Tampilan website
dari lokasi wisata ini masih statis dengan fitur minimum. Oleh karena itu, dalam penelitian ini,
dibangunlah website wisata yang memenuhi kriteria UX dari suatu tempat wisata dengan
menggunakan teknik desain responsive. Teknik ini dipilih karena menyuguhkan tampilan website yang
fleksibel dan memungkinkan untuk dibuka pada layar dengan ukuran yang berbeda-beda. Pengujian
dilakukan dengan testing sederhana terhadap user untuk mengoperasikan website yang lama dan
website yang baru. Hasil pengujian menunjukkan bahwa lebih dari 80% user menganggap bahwa
website yang baru lebih informatif dan mudah digunakan.Kata kunci: Desain Responsive, Website Wisata, User Experience Test
Pendahuluan
Pertumbuhan pengguna perangkat mobile seperti smartphone dan tablet semakin hari semakin meningkat. Pertumbuhan ini diikuti juga dengan perubahan kebiasaan perilaku masyarakat. Jika dahulu suatu website diakses melalui perangkat diam semacam desktop ataupun notebook, saat ini lalu lintas internet dipenuhi request dari client yang menggunakan mobile device. Pada masa ini, manusia seakan tidak bisa lepas dari gadget mereka.
Hal tersebut mendorong pelaku usaha untuk semakin kreatif dalam memasarkan produk atau jasa mereka. Tidak terkecuali mereka yang bergerak di bidang pariwisata. Para pelaku bisnis jasa pariwisata ini harus cermat dalam memanfaatkan kemajuan teknologi dalam upaya memasarkan produk ataupun jasa mereka. Hal ini jga disadari oleh pengelola lokasi wisata Taman Ria Sengkaling yang ada di kabupaten Malang, Jawa Timur. Untuk menarik perhatian masyarakat agar mau berkunjung, lokasi wisata yang memiliki luas area ± 9 hektare ini menyediakan website yang didalamnya terdapat beragam informasi tentang tempat wisata tersebut. Mulai dari wahana-wahana, paket-paket liburan yang disediakan, layanan-layanan yang bisa dinikmati oleh pengungjung, dan lain sebagainya [1].
Ramadianti mencoba membuat website taman rekreasi sengkaling dengan penekanan pada banyaknya informasi yang disajikan [2]. Akan tetapi, ketersediaan informasi yang lengkap saja tidak cukup untuk menarik perhatian pengguna jika pengguna kesulitan dalam menemukan informasi yang dia inginkan. Irwansyah kemudian menyusun ulang website ini dengan menambahkan pendekatan UX (user experience) agar informasi yang disediakan dapat dengan mudah ditemukan oleh user [3]. Metode ini dirasa cukup berhasil jika website diakses pada layar desktop. Akan tetapi jika diakses melalui layar mobile device, user experience dari user akan langsung turun dikarenakan tampilan yang terpotong atau rusak.
Oleh karena itu, dalam penelitian ini diusulkan pengimplementasian teknik desain responsive dalam merancang ulang pembuatan website Taman Ria Sengkaling. Diharapkan dengan pengaplikasian teknik tersebut, akan tercipta suatu website yang menarik serta nyaman dilihat pada
I - 240 SENTRA banyak device, tanpa bergantung pada ukuran layar dari device tersebut. Dengan suatu website yang menarik, diharapkan akan meningkatkan kuantitas pengunjung dari taman wisata tersebut.
Metode Penelitian
Website taman rekreasi Sengkaling ini dibangun dengan terlebih dahulu melakukan requirement
gathering melalui mekanisme survey dan wawancara langsung. Proses ini dilakukan untuk
mengumpulkan kebutuhan sistem dari para stakeholder. Adapun stakeholder yang dimaksud antara lain : a)
Manajemen pengelola taman rekreasi sengkaling
b) Calon pengunjung taman rekreasi Sengkaling
Dari proses requirement gathering tersebut, didapatkan kebutuhan fungsional dan kebutuhan non-fungsional dari sistem, yaitu : Kebutuhan Fungsional 1.
Website menyediakan informasi harga tiket masuk 2. Website menyediakan informasi jam buka dan tutup taman rekreasi Sengkaling 3. Website menyediakan informasi wahana-wahana yang ada di lokasi taman rekreasi Sengkaling 4. Website menyediakan informasi event ataupun promo yang sedang atau akan berlangsung di taman rekreasi sengkaling
5. Website menyediakan informasi lokasi dari taman rekreasi Sengkaling 6.
Website menyediakan informasi tentang Sengkaling Food Festifal 7. Website dapat diakses melalui computer dan smartphone
Kebutuhan Non-fungsional 1.
Dalam sekali lihat, user langsung tahu jika sedang membuka website taman rekreasi Sengkaling 2. User yang belum pernah membuka website tersebut langsung bisa menemukan informasi apapun yang dia cari tanpa perlu meminta bantuan
3. Tampilan website tidak rusak ketika diakses melalui gadget dengan ukuran layar yang kecil Dari beberapa kebutuhan tersebut, kemudian disusunlah draft layout (tampilan) website seperti ada Gambar 1 dan 2.
Dalam penelitian ini digunakan dua buah framework, yakni code igniter dan twitter bootstrap. Kedua framework ini dipilih karena gratis dan menyediakan resource library yang cukup lengkap.
Code igniter (CI) adalah sebuah framework PHP yang dikembangkan dengan model MVC (Model, View, Controller). Oleh karena itu, sangat mendukung model pengembangan RAD (Rapid Application Development). Dalam penelitian ini, framework CI dimodifikasi dengan pendekatan modular. Konsep modular diterapkan untuk membuat fitur-fitur atau menu-menu yang terdapat dalam website. Dengan konsep modular ini, fitur-fitur yang diinginkan bisa dipasang, dimodifikasi, maupun dihapus tanpa mengganggu fitur yang lain. Masing-masing modul menggunakan model MVC dalam pembuatannya.
Sedangkan twitter bootstrap adalah suatu framework CSS. Framework ini berguna untuk membuat suatu website dengan desain responsive. Sehingga, tampilan website tidak akan rusak jika diakses melalui layar mobile device yang memiliki ukuran kecil. Dengan tampilan responsive ini, UX (user experience) dari pengunjung website tidak akan mengalami perbedaan baik ketika website diakses melalui layar desktop, maupun mobile device.
Gambar 1. Desain Layout Website Pada Layar Desktop
Gambar 2. Desain Layout Website Pada Layar Mobile Dalam penelitian ini digunakan dua buah framework, yakni code igniter dan twitter bootstrap. Kedua framework ini dipilih karena gratis dan menyediakan resource library yang cukup lengkap.[4][5]
Hasil Penelitian dan Pembahasan
Dari proses pembuatan ulang website Taman Rekreasi Sengkaling menggunakan teknik desain responsive, didapatkan hasil tampilan seperti pada Gambar 3 dan 4. Pada kedua gambar tersebut, twitter bootstrap yang diimplementasikan mampu membuat tampilan website tidak mengalami perbedaan yang signifikan, baik ketika diakses melalui layar desktop maupun layar mobile device. Disini, layar desktop yang digunakan untuk mengakses berukuran 14 inch, sedangkan layar mobile device yang digunakan berukuran 5,5 inch.
Gambar 3. Tampilan Website Ketika Diakses Melalui Layar Desktop
I - 242 SENTRA
Gambar 4. Tampilan Website Ketika Diakses Melalui Layar Mobile Device Untuk menguji UX dari website Taman Rekreasi Sengkaling ini dilakukan scenario sebagai berikut:
1. Disiapkan 20 orang user yang berperan sebagai tester 2.
Tester dibagi kedalam 2 kategori, yakni 10 orang expert dan 10 orang awam. Tester expert adalah orang yang biasa mencari informasi menggunakan media internet. Sedangkan tester awam adalah orang yang bisa mengoperasikan computer, tapi tidak terbiasa mencari informasi dari internet 3. Masing-masing tester ditanya tentang informasi apa yang dia butuhkan berkaitan dengan Taman
Rekreasi Sengkaling. Kemudian menuliskannya dalam bentuk pertanyaan pada satu lembar kertas.
4. Masing-masing tester dipersilahkan untuk mencoba mengakses website yang lama dan website yang baru saja dibangun dari desktop dan dari mobile device
5. Masing-masing tester diharapkan untuk menjawab pertanyaan yang dia tulis sebelumnya dengan mencari informasinya pada website sengkaling
6. Waktu yang dibutuhkan oleh tester dalam mencari jawaban kemudian dicatat. Hasil yang didapatkan dari scenario pengujian ini dapat dilihat pada Tabel 1 dan 2.
Tabel 1. Hasil Pengujian UX Pada Tampilan Layar Desktop Tabel 2. Hasil Pengujian UX Pada Tampilan Layar Mobile Device Dari kedua table tersebut dapat dilihat bahwa pengalaman pengguna dalam menggunakan website meningkat jika dibandingkan dengan website yang lama. Di Tabel 3 juga terlihat bahwa pada tampilan mobile device, rata-rata user membutuhkan waktu 2 kali lebih lama dalam menemukan informasi yang dia cari saat menggunakan website lama. Akan tetapi saat menggunakan website yang baru, rata-rata waktunya tidak berbeda terlalu jauh baik saat diakses menggunakan layar desktop maupun mobile device.
Kesimpulan
Setelah melakukan pengujian terhadap penelitian ini, dapat disimpulkan bahwa website yang dibangun telah menmenuhi semua kebutuhan baik fungsional maupun non-fungsional dari sistem. Selain itu, website yang dibangun juga meningkatkan pengalaman dari user dalam mencari informasi yang dibutuhkan, serta mampu berjalan dengan baik di semua jenis ukuran layar baik desktop maupun mobile device.
Referensi
[1] Widayanti, Rahayu. "Pengaruh Bauran Promosi Terhadap Kunjungan Wisatawan Domestik (Studi Kasus di Taman Rekreasi Sengkaling Malang)." DINAMIKA DOTCOM 3.1, 2012.
[2] Ramadianti, Ririn. “Pembuatan Website TR Sengkaling dngan PHP dan MySQL”. Diss.
University of Muhammadiyah Malang. 2011 [3] Irwansyah, Tomi Eko. “Rancang Bangun Website Taman Ria Sengkaling Berbasis UX dan UI”.
Skripsi Universitas Islam Negeri Malang. 2012 [4] Upton, David. CodeIgniter for Rapid PHP Application Development. Packt Publishing Ltd, 2007. [5] Lerner, Reuven M. "At the forge: twitter bootstrap." Linux Journal 2012.218 (2012): 6.
I - 244 SENTRA