Perancangan Antarmuka Layanan Informasi Wisata dan Kuliner di DIY Berbasis Web dan Mobile Web Aditya Rizki Yudiantika
Widyawan
Bimo Sunarfri Hantono
Jurusan Tek. Elektro & Tekn. Informasi Fakultas Teknik, UGM Yogyakarta, Indonesia
[email protected]
Jurusan T. Elektro & Tekn. Informasi Fakultas Teknik, UGM Yogyakarta, Indonesia
[email protected]
Jurusan T. Elektro & Tekn. Informasi Fakultas Teknik, UGM Yogyakarta, Indonesia
[email protected]
Abstrak---Layanan informasi wisata dan kuliner Daerah Istimewa Yogyakarta (DIY) dirancang untuk membantu masyarakat dalam memberi informasi awal tentang tujuan wisata. Popularitas penggunaan telepon seluler di masyarakat menjadi pertimbangan suatu layanan informasi wisata dan kuliner dikembangkan dalam bentuk mobile web. Antarmuka yang dikembangkan meliputi web, low-end mobile web, dan smartphone mobile web. Perancangan antarmuka tersebut dilakukan dengan memperhatikan aspek interoperabilitas perangkat dan usabilitas pengguna. Konsep human-computer interaction (HCI) diperlukan untuk membuat tampilan yang dapat diterima dengan baik oleh pengguna. Hadirnya standar baru HTML5 menjadi sebuah alternatif perancangan antarmuka, disamping bahasa pendukung seperti CSS dan JavaScript. Berbagai macam fitur yang ditunjukkan dalam aplikasi web ini meliputi peta lokasi objek, galeri objek, gambaran detail objek, berbagi ke jejaring sosial, pemberian rating objek, dan pemberian komentar objek. Kata kunci : wisata, mobile web, smartphone, HCI, HTML5 I.
PENDAHULUAN
Daerah Istimewa Yogyakarta (DIY) sebagai salah satu daerah tujuan wisata nasional maupun internasional mempunyai beraneka ragam potensi pariwisata. Potensi pariwisata mayoritas yang menjadi primadona di wilayah DIY adalah objek wisata alam, wisata budaya, dan kuliner. Pemanfaatan web sebagai layanan penyedia konten dapat diterapkan dalam sebuah website yang berisi informasi pariwisata daerah. Tujuannya yaitu untuk membantu pemerintah dalam mengenalkan daerahnya akan potensi wisata yang menarik untuk dikunjungi. Selain itu, layanan ini juga dapat membantu masyarakat untuk memberi informasi awal tentang tujuan wisata. Pengembangan layanan informasi wisata dan kuliner ini, menjadi sebuah alternatif di tengah layanan informasi serupa
yang sudah ada. Fokus utama pengembangan layanan ini tidak lain adalah penyediaan informasi tentang objek wisata dan kuliner di DIY. Kelengkapan informasi dan pemberian rekomendasi objek wisata dan kuliner yang sesuai dengan kebutuhan pengguna menjadi keunggulan utama layanan informasi ini. Saat ini hampir setiap orang memiliki telepon seluler (ponsel). Berbagai jenis dan spesifikasi ponsel sangat mudah ditemukan di pasaran. Kemudahan akses internet semakin ditingkatkan, sehingga menjadi semakin populer di masyarakat. Informasi penting tentang keberadaan objek wisata dan kuliner yang dapat diakses melalui ponsel ditujukan sebagai sarana untuk memudahkan pengguna dengan mobilitas tinggi dalam mengakses informasi pariwisata DIY. II.
METODE PENELITIAN
Pembuatan sistem informasi yang berkaitan dengan pariwisata Indonesia pernah dilakukan oleh A. H. Gumasjaya dengan judul “Perancangan dan Pembuatan Aplikasi Peta Wisata dan Kuliner Berbasis Google Maps”. Aplikasi peta wisata dan kuliner Yogyakarta merupakan aplikasi yang menyediakan informasi mengenai objek wisata, kuliner, dan fasilitas pendukung lainnya disertai peta yang menunjukkan lokasi wisata dan kuliner tersebut. Informasi objek wisata dan kuliner yang disediakan antara lain adalah deskripsi objek wisata dan kuliner, testimoni, event, foto dan peta [1]. Penelitian berbasis mobile web juga pernah dilakukan oleh Ruli Arma Arfian, dengan judul “Pengembangan Aplikasi Mobile Web untuk Wisata dan Kuliner Yogyakarta”. Aplikasi yang dihasilkan yaitu sebuah aplikasi berbentuk mobile web yang menyediakan akses kepada para wisatawan yang ingin mendapatkan informasi tentang wisata di DIY. Akan tetapi, aplikasi tersebut hanya dapat berjalan pada ponsel yang sudah mendukung JavaScript dan layar sentuh (smartphone). Selain itu, tidak semua browser dapat menjalankan aplikasi mobile web tersebut dengan baik [2].
Metode penelitian yang digunakan untuk melakukan pengembangan antarmuka web dan mobile web ini yaitu metode waterfall. Model ini melakukan pendekatan secara sistematis dan terurut mulai dari level kebutuhan sistem, kemudian menuju ke tahap analisis, desain, coding, testing/verification, dan maintenance [3]. III.
ANALISIS DAN PERANCANGAN
berupa sentuhan (touch screen), serta kemampuan browser yang didukung JavaScript [6]. Beberapa fitur dan interaksi yang dapat dilakukan pengguna untuk aplikasi web ini diantaranya yaitu cari objek, lihat rekomendasi objek, lihat detail objek, lihat event, lihat foto objek, lihat peta objek, beri komentar objek, beri rating objek, dan berbagi ke jejaring sosial. Gambar 1 berikut menunjukkan diagram use case aplikasi web yang dimaksud :
A. Definisi Masalah dan Kebutuhan Suatu web wisata pada dasarnya dikembangkan untuk memberikan informasi yang lengkap dan jelas mengenai keberadaan suatu objek wisata. Wisatawan tidak perlu mengunjungi satu per satu objek tersebut untuk memperoleh gambaran sesungguhnya tentang sebuah objek wisata. Informasi yang ditawarkan berupa jenis wisata, lokasi wisata, jam buka, fasilitas/wahana yang disediakan, harga tiket masuk, kuliner, serta testimoni/komentar pengunjung yang pernah mengunjungi objek tersebut.
Web Wisata dan Kuliner Jogjanan
Cari Objek
Lihat Rekomendasi Objek
Selain sebagai pemberi informasi, web wisata juga berfungsi sebagai petunjuk wisata. Wisatawan akan merasa dimudahkan ketika harus memutuskan untuk berlibur di objekobjek yang direkomendasikan. Bentuk rekomendasi yang dimaksud dapat dikelompokkan berdasarkan objek-objek yang sering dikunjungi, objek dengan rating tertinggi, serta banyaknya komentar dari pengunjung lain.
«uses»
Lihat Detail Objek
«uses»
«uses»
Lihat Event
«uses»
«uses»
Lihat Foto Objek
«uses»
B. Analisis Kebutuhan dan Spesifikasi Komputer dengan layar yang lebar membuat sebuah web dapat diisi dengan beragam informasi. Informasi yang ditampilkan pun dapat diatur sedemikian rupa, tanpa harus dibatasi oleh banyaknya informasi yang perlu ditampilkan. Web yang baik tentu juga harus mampu mengetahui kebiasaan pengguna dalam memilah informasi mana yang harus ditampilkan terlebih dahulu di halaman awal sebuah web [4]. Masalah yang dihadapi pengguna ketika telepon seluler yang dilengkapi web browser marak di masyarakat adalah kemudahan akses. Melalui telepon seluler, pengguna menginginkan segala sesuatu yang bersifat instan. Informasiinformasi penting yang dibutuhkan pengguna diharapkan agar dapat diakses dengan mudah melalui browser di perangkat mobile mereka [5]. Web wisata dan kuliner yang dikembangkan merupakan pembanding untuk versi mobile web. Untuk versi mobile web, antarmuka dibedakan menjadi dua jenis yaitu mobile web untuk perangkat low-end/midend dan mobile web untuk perangkat highend/smartphone. Hal ini dilakukan agar mobile web tersebut dapat diakses di semua perangkat mobile, serta mengatasi keterbatasan perangkat pada umumnya. Batasan minimum perangkat low-end mobile web adalah perangkat mobile dengan ukuran layar tidak lebih dari 240 piksel, navigasi berupa fokus dan kursor, serta kemampuan browser tanpa dukungan JavaScript. Sedangkan batasan minimum untuk smartphone mobile web yaitu perangkat mobile dengan ukuran layar minimal 320 piksel, navigasi
User «uses»
Lihat Peta Objek
«uses»
«uses»
Beri Komentar Objek
Beri Rating Objek
Berbagi ke Jaringan Sosial
Gambar 1 - Use case diagram perancangan web C. Perancangan Basis Data Seluruh informasi yang akan ditampilkan pada antarmuka web dan mobile web disimpan dalam sebuah basis data. Perancangan basis data merupakan proses awal yang sangat penting, karena berisi informasi yang akan disampaikan kepada pengguna. Basis data merupakan representasi dari objek-objek fisik yang terbentuk menjadi atribut-atribut untuk selanjutnya diolah dan disampaikan kepada pengguna. Pada aplikasi ini, basis data yang digunakan adalah basis data MySQL. Struktur basis data yang diperlukan untuk perancangan ketiga antarmuka web ditunjukkan oleh Gambar 2 berikut:
membaca teks dengan ukuran file yang tidak terlalu besar. Ukuran layar rata-rata untuk penggunaan jenis mobile web ini adalah kurang dari 320x480 piksel. Meskipun jenis mobile web ini juga dapat diakses dengan baik pada perangkat smartphone di atas ukuran tersebut. Perancangan tampilan untuk jenis mobile web ini menggunakan bahasa markup standar HTML 4.01, CSS 2, dan tanpa menggunakan JavaScript. Menu utama yang disajikan dalam aplikasi mobile web untuk perangkat low-end yaitu Home, Semua Objek, Wisata, Kuliner, Event, Tag Objek, Tag Lokasi, dan Cari. Bentuk desain layout (mockup) secara umum untuk penyajian konten di setiap halaman web pada jenis perangkat low-end tampak seperti pada Gambar 4 yaitu :
Gambar 2 - Struktur basis data D. Perancangan Antarmuka Web merupakan bentuk antarmuka yang lebih kompleks dibanding antarmuka mobile web. Cara penyajian konten dapat lebih leluasa dengan menempatkan berbagai macam fitur dan modul dalam satu halaman [6]. Menu yang ditampilkan untuk antarmuka web ini meliputi Home, Wisata, Kuliner, Event, Tag, dan Map. Perancangan tampilan untuk antarmuka web ini menggunakan bahasa markup standar HTML5 dan CSS 3. Layout dasar untuk antarmuka web ini terdiri dari beberapa bagian, yaitu bagian header, menu, search, breadcrumb, isi, sidebar, navigasi, dan footer. Layout tampilan web secara umum ditunjukkan pada Gambar 3 berikut ini :
Gambar 4 – Layout dasar antarmuka low-end mobile web Mobile web untuk versi smartphone adalah versi web yang dikembangkan untuk jenis perangkat smartphone. Versi ini merupakan versi mobile web dengan kemampuan yang lebih tinggi daripada versi low-end mobile web. Perancangan tampilan untuk antarmuka web ini menggunakan bahasa markup standar HTML5 dan CSS 3. Gambar 5 di bawah ini merupakan layout dasar tampilan web untuk smartphone mobile web :
Gambar 3 – Layout dasar antarmuka web Mobile web untuk perangkat low-end merupakan versi paling sederhana dari mobile web aplikasi ini. Tampilan minimalis berbasis teks digunakan agar dapat mengatasi kelemahan browser perangkat mobile yang hanya bisa
Gambar 5 – Layout dasar antarmuka smartphone mobile web
IV.
IMPLEMENTASI APLIKASI
A. Tampilan Web Warna dasar yang digunakan untuk perancangan antarmuka web yaitu cokelat, hijau, dan putih. Halaman depan menampilkan peta seluruh objek wisata dan kuliner dan beberapa modul rekomendasi yang berisi keterangan singkat suatu objek. Informasi singkat yang ditampilkan disertai dengan thumbnail objek bersangkutan. Pengujian tampilan web dilakukan pada beberapa macam browser, diantaranya Mozilla Firefox 6.0, Internet Explorer 9, Google Chrome 5.0, Opera 11.5, dan Safari 5. Secara umum pengujian tampilan untuk beberapa browser tersebut sudah baik. Namun, beberapa browser masih belum mampu membaca CSS3 dengan sempurna, yaitu pada Opera 11.5 dan Internet Explorer 9. Gambar 6 berikut merupakan contoh tampilan halaman web pada browser Mozilla Firefox 6.0 :
Pengujian antarmuka untuk tampilan low-end mobile web dilakukan pada jenis browser yang tidak mendukung JavaScript, yaitu pada browser Opera 4.2 simulator, browser Opera 6.0 simulator dan browser Opera 4.2 perangkat Sony Ericsson K310i. Secara umum pengujian tampilan untuk beberapa browser tersebut sudah sesuai dengan harapan. Gambar 7 di atas merupakan hasil pengujian pada Opera 4.2 Simulator. C. Tampilan Smartphone Mobile Web Ukuran layar smartphone yang lebih lebar dibandingkan dengan perangkat low-end membuat tampilan halaman smartphone mobile web dapat ditampilkan mirip dengan versi web. Penggunaan menu horizontal dimungkinkan pada smartphone mobile web. Form pencarian diletakkan di bawah menu horizontal untuk memudahkan pencarian objek.
Gambar 6 – Tampilan halaman depan web B. Tampilan Low-end Mobile Web Cara penampilan konten wisata dan kuliner untuk antarmuka low-end mobile web yaitu dengan memberikan lebih banyak menu berbasis teks. Penggunaan gambar yang berlebihan tidak diperlukan. Penempatan form pencarian diletakkan di bagian paling bawah agar pengguna tidak merasa terganggu oleh hal-hal yang tidak diperlukan ketika sedang membaca informasi yang tertampil.
Gambar 7 – Tampilan halaman depan low-end mobile web
Gambar 8 – Tampilan halaman depan smartphone mobile web Pengujian telah dilakukan pada beberapa jenis smartphone, meliputi browser Android OS, iOS, Blackberry 9780 OS, Symbian 3.0 OS, dan Opera Mobile Simulator. Secara umum pengujian tampilan untuk beberapa mobile browser tersebut sudah baik. Gambar 8 di atas merupakan hasil pengujian pada browser Android. D. Pengujian Waktu Akses Pengujian waktu akses digunakan untuk mengetahui perbandingan waktu akses halaman web dan mobile web. Pengujian ini dilakukan dengan bantuan web yang dapat mengukur waktu akses (loading) suatu halaman web, yaitu di alamat http://www.numion.com/Stopwatch/index.html. Pengujian dilakukan pada browser Mozilla Firefox 6.0 sebanyak lima kali untuk masing-masing halaman awal. Tabel 1 berikut menunjukkan tabel hasil pengujian waktu akses untuk setiap antarmuka :
Tabel 1. Perbandingan waktu akses halaman depan web dan mobile web Pengujian ke-
Web
Low-end Mobile Web 1 1,844 0,395 2 9,115 0,224 3 1,85 0,198 4 7,619 0,171 5 2,399 0,992 Rata-rata 4,5654 0,396 Catatan : waktu dalam satuan detik
Smartphone Mobile Web 1,317 1,261 0,651 0,601 0,403 0,8466
warna yang digunakan pada antarmuka smartphone sudah baik. Dari beberapa fitur-fitur utama yang ditunjukkan smartphone mobile web untuk layanan informasi pariwisata DIY ini, dapat diurutkan menurut pendapat yang dihimpun dari persepsi pengguna, dimulai dari yang paling diunggulkan yaitu fitur peta lokasi, foto, gambaran detail objek, berbagi ke jejaring sosial, rating, dan komentar. KESIMPULAN
Berdasarkan hasil analisis, pengujian, dan pembahasan terhadap perancangan antarmuka berbasis web dan mobile web untuk layanan informasi wisata dan kuliner di DIY, diperoleh beberapa kesimpulan sebagai berikut :
Dari tabel hasil pengujian di atas diperoleh bahwa waktu akses untuk setiap antarmuka web, dimulai dari yang paling cepat yaitu waktu akses pada low-end mobile web, smartphone mobile web, dan web. Dengan demikian, dapat dikatakan bahwa perancangan antarmuka untuk mobile web mampu mengatasi lamanya waktu akses pada versi web. Hal ini disebabkan karena konten yang ditampilkan pada versi mobile web dipilah sesuai dengan kebutuhan dan kemampuan perangkat mobile itu sendiri.
1. Pengembangan antarmuka web dan mobile web ini telah mampu menyediakan akses informasi wisata dan kuliner DIY dengan baik melalui berbagai macam perangkat dan tipe browser.
E. Pengujian Kebergunaan Pengujian usability ini dilakukan pada mobile web untuk jenis smartphone. Hal ini dilakukan karena smartphone mobile web sedang berkembang saat ini, serta mampu mewakili sisi interaktivitas antarmuka pengguna mobile web. Pengujian yang dilakukan yaitu dengan melakukan survei kepada 30 responden secara acak untuk menggunakan aplikasi tersebut, kemudian diminta untuk menjawab pertanyaan-pertanyaan yang berhubungan dengan usability aplikasi.
3. Pemanfaatan teknologi HTML5 dan CSS3 untuk pengembangan antarmuka web dan mobile web secara umum sudah berjalan baik di beberapa browser terkini. Keduanya mampu menyediakan interaktivitas yang lebih baik dari sisi tampilan dan struktur dibanding versi sebelumnya.
Dari hasil survei diperoleh sebanyak 73% pengguna menjawab bahwa secara keseluruhan tampilan mobile web tersebut sudah baik, 17% pengguna menjawab cukup baik, 10% pengguna menjawab sangat baik, serta tak satu pun pengguna yang menyatakan kurang baik. Dengan demikian, cara penyajian konten di setiap halaman web sudah baik. Hasil survei juga menunjukkan bahwa 63% pengguna tidak menemui kesulitan, 37% kadang-kadang menemui kesulitan, dan tidak satu pun pengguna yang benar-benar merasa kesulitan. Sesuai hasil tersebut, dapat dikatakan bahwa secara umum tingkat kemudahan dalam penggunaan web tersebut sudah baik, meskipun masih ada beberapa pengguna yang kadang-kadang merasa kesulitan. Selain itu sebanyak 50% pengguna menjawab bahwa pemilihan warna yang digunakan secara keseluruhan dalam web tersebut baik, 33% menjawab sangat baik, 17% menjawab cukup baik, serta tak satu pun yang menjawab kurang baik. Hal tersebut berarti secara umum pemilihan
2. Antarmuka yang dikembangkan meliputi web, low-end mobile web, dan smartphone mobile web. Masing-masing mempunyai cara penyajian konten yang berbeda sesuai dengan kemampuan browser dan perangkat yang digunakan.
4. Pengujian waktu akses halaman depan aplikasi web ini jika diurutkan dari yang paling cepat yaitu waktu akses halaman depan antarmuka low-end mobile web, smartphone mobile web, dan web. 5. Hasil pengujian usability kepada pengguna menunjukkan bahwa secara keseluruhan cara penampilan konten layanan informasi wisata dan kuliner ini dapat diterima dengan baik. REFERENSI [1]
[2]
[3] [4] [5] [6]
Gumasjaya, A. H. (2010). Perancangan dan Pembuatan Aplikasi Peta Wisata dan Kuliner Berbasis Google Maps. Yogyakarta: Jurusan Teknik Elektro dan Teknologi Informasi. Arfian, R. A. (2010). Pengembangan Aplikasi Mobile Web untuk Wisata dan Kuliner Yogyakarta. Yogyakarta: Jurusan Teknik Elektro dan Teknologi Informasi. Simarmata, J. (2010). Rekayasa Web. Medan: Penerbit Andi. Beaird, J. (2007). The Principles of Beautiful Web Design. Canada: Sitepoint Pty. Ltd. Moll, C. (2006). Mobile Web Design : A Web Standards Approach for Delivering Content to Mobile Devices. Firtman, M. (2010). Programming the Mobile Web. Canada: O'Reilly.
