commit to user 1
BAB IV
KONSEP PERANCANGAN
A. Konsep Kreatif Aplikasi 1. Tujuan Kreatif
Perancangan aplikasi Wisata Dieng ini memiliki beberapa tujuan kreatif :
a. Mobile app Wisata Dieng ini diharapkan dapat memudahkan wisatawan mendapat informasi destinasi apa saja yang ada di Dataran Tinggi Dieng.
b. Mobile app ini diharapkan dapat membantu mempromosikan wisata yang ada di Dataran Tinggi Dieng.
2. Strategi Kreatif
a. Target dan User Persona
Target dalam perancangan aplikasi Wisata Dieng ini adalah para wisatawan yang berkunjung ke Dataran Tinggi Dieng. User persona adalah salah satu tools yang berharga dalam pengerjaan proyek User Experience. Persona memungkinkan seluruh design dan development team untuk menjaga user story yang simpel. User Persona dalam perancangan aplikasi Wisata Dieng ini berisi tentang cerita singkat dari user’s goals, behaviours, dan pain points.
commit to user 1) User persona 1
Gambar 1. User Persona1
2) User Persona 2
Gambar 2. User Persona 2
commit to user b. Diagram Flow
Berikut adalah Diagram Flow dari aplikasi ini.
Gambar 3 Gambar diagram flow aplikasi Wisata Dieng
c. Konten dan Fitur Mobile Apps
Dalam perancangan UI dan UX aplikasi Wisata Dieng ini memiliki konten yang disesuaikan dengan kebutuhan user berdasarkan user persona.
Berikut adalah konten˗konten yang dibagi kedalam beberapa menu utama dibawah ini:
1) Home
Page home adalah menu paling utama yang akan muncul ketika membuka aplikasi. Pada page ini, memiliki konten yang bisa diakses oleh seluruh user. Berikut adalah konten˗konten yang ada pada menu home :
a) Pencarian/explore, menampilkan sebuah icon yang digunakan user untuk mencari destinasi yang diinginkan.
b) Destination highlights/wisata pilihan, menampilkan beberapa wisata yang sering dikunjungi atau wisata baru.
c) Kategori, kategori menampilkan beberapa sub˗menu kategori yang di kelompokkan seperti kategori wisata alam, budaya, kuliner, dan lain sebagainya.
d) Berita dan info, menampilkan beberapa artikel berita mengenai event atau wisata yang akan ada.
2) Kategori
Pada page ini menampilkan informasi sub˗menu kategori secara keseluruhan yang berisi destinasi yang bisa dikunjungi di Dataran Tinggi Dieng. Berikut adalah sub˗menu dari menu kategori :
a) Kategori Wisata terfavorit b) Kategori Wisata Alam c) Kategori Wisata Budaya d) Kategori Wisata Sejarah e) Kategori Wisata Air f) Kategori Wisata edukasi g) Kategori Oleh˗oleh h) Kategori Layanan Publik i) Kategori Kuliner
j) Kategori Penginapan
commit to user 3) Info dan Berita
Page ini menampilkan artikel mengenai informasi terbaru objek wisata maupun artikel tentang suatu event yang akan ada.
d. Konsep UI dan UX
Aplikasi wisata Dieng ini dirancang untuk memudahkan user melakukan kegiatan mencari dan mendapatkan informasi mengenai wisata Dataran Tinggi Dieng. Oleh karena itu, dibutuhkan UI dan UX yang baik agar fitur yang ada di dalam aplikasi ini bisa berjalan dengan baik dan nyaman untuk pengguna.
1) User Experience / UX
Wisata Dieng ini akan menggunakan prinsip UX yang dituliskan oleh Abu Experience dalam artikel di UXBERT LABS berjudul10 Mobile UX Design Principles You Should Know. (http://uxbert.com/10- mobile-ux-designprinciples/#.XqxGvplS9PY) Berikut prinsip mobile UX yang diterapkan pada aplikasi Wisata Dieng ini:
a) Content Prioritization
Perhatian pengguna adalah hal yang terpenting dalam perancangan mobile app ini dan harus dialokasikan dengan tepat.
Antarmuka yang memiliki terlalu banyak informasi dapat membingungkan pengguna karena terlalu banyak informasi.
Dengan demikian mobile app ini akan menggunakan antarmuka yang simpel.
b) Make Navigation Intuitive
Aplikasi yang baik adalah ketika pengguna secara intuisi bisa menavigasi aplikasi tanpa memerlukan penjelasan terlebih dahulu. Aplikasi Wista Dieng akan dibuat sederhana mungkin sehingga bisa dipahami oleh pengguna dengan mudah.
c) Touchscreen Target Sizes
Saat merancang antarmuka aplikasi, sebaiknya buat target sentuh cukup besar sehingga mudah bagi pengguna untuk mengetuk atau menyentuhnya karena engguna biasanya mengoperasikan ponselnya dengan jempol dibanding dengan jari yang lain sehingga membutuhkan tombol yang besar untuk meningkatkan akurasi sentuhan. Target sentuh atau tombol sebaiknya memiliki ukuran minimal 7mm/26px. Tidak hanya ukuran tetapi sepasi antar target sentuh juga mempengaruhi akurasi sentuhan, semakin rapat jarak antar target makan akan semakin besar tingkat kesalahan dalam meyentuh target.
d) Legible Text Content
Jika dibandingkan dengan desktop, smartphone memiliki layar yang relatif lebih kecil, jadi salah satu tantangan desainer aplikasi mobile adalah menyesuaikan banyak informasi pada UI yang kecil. Dengan itu teks atau tulisan yang ditampilkan di dalam
commit to user
sebuah aplikasi mobile dituntut untuk bisa terbaca dengan jelas.
Teks setidaknya memiliki ukuran 11 poin/16 px sehingga dapat dibaca pada jarak pandang biasa tanpa harus melakukan zoom.
e) Make Interface Elements Clearly Visible
Desain User Interface yang nyaman perlu dirancang dengan memperhatikan kontras warna yang baik, pastikan kontras warna yang cukup di antara elemen UI sehingga pengguna dengan penglihatan rendah masih dapat melihat dan menggunakan aplikasi dengan mudah.
f) Design Controls Based on Hand Position
Dalam penelitian yang dilakukan oleh Steven Hoober tentang penggunaan perangkat mobile, menemukan bahwa 49% orang bergantung pada satu jempol untuk menyelesaikan sesuatu di smartphone mereka.
Gambar 4. keterjangkauan penggunaan satu tangan.
(https://i2.wp.com/www.ux-republic.com)
Warna hijau menunjukkan area yang dapat dijangkau pengguna dengan mudah; warna kuning, area yang membutuhkan sedikit peregangan; dan merah, area yang mengharuskan pengguna menggeser cara mereka memegang perangkat. Jadi, agar nyaman navigasi atau tombol pada aplikasi mobile akan dirancang menyesuaikan dengan keterjangkauan jari.
g) Minimize Need For Typing
Mengetik dengan smartphone adalah proses yang lambat dan rawan kesalahan. Karena itu, sebaiknya minimalkan jumlah pengetikan yang diperlukan untuk penggunaan dalam aplikasi mobile.
2) User Interface / UI
Selain memperhatikan kenyamanan dari segi User Experience / UX, dalam perancangan Wisata Dieng ini juga memperhatikan tentang segi User Interface, karena selain kenyamanan pengoperasian, sebuah aplikasi juga membutuhkan kenyamanan dari sisi desain visual.
Dalam merancang user interface menggunakan pedoman dari google material design dan disesuaikan dengan tren desain visual yang modern namun nyaman secara visual.
Berikut adalah beberapa pedoman Google Material Design yang digunakan dalam aplikasi ini, antara lain :
a) Tata Letak
commit to user
Tata letak semuanya sudah diatur dalam google material design dengan rinci seperti kolom, margins, sepasi. Dalam merancang UI aplikasi Wisata Dieng ini menggunakan unit pengukuran yang biasa digunakan dalam google material design yaitu DP atau density independent pixels.
(1) Columns, Kolom adalah area dimana ditempatkannya konten.
Pada ponsel biasanya terdapat 4 kolom untuk rentang ukuran layar 360dp
Gambar 5. Kolom
(https://lh3.googleusercontent.com/ )
(2) Gutter, adalah jarak antar kolom. Seamkin besar ukuran layar maka semakin lebar gutter dan semakin lebar juga ruang kosong antar jarak. Pada ponsel beresolusi 360dp biasanya menggunakan jarak sebesar 16dp.
commit to user
Gambar 6. Gutter
(https://material.io/design/)
(3) Margin, adalah jarak antara kolom konten dan tepi kanan dan kiri layar ponsel. Pada ponsel beresolusi 360dp biasanya menggunakan jarak sebesar 16dp.
Gambar 7. Margin
(https://material.io/design/)
3) Style a) Icon
Dalam merancang aplikasi Wisata Dieng menggunakan icon yang
commit to user
namun tetap konsisten dan berpedoman dari google material design.
gambar 8. Icon grid and keyline
(https://material.io/design/iconography/system- icons.html#grid-and-keyline-shapes)
b) Typography
Dalam merancang aplikasi Wisata Dieng ini menggunakan font yang familiar bagi pengguna aplikasi dan ukuran menyesuaikan pedoman google material design. Perancangan aplikasi Wisata Dieng ini menggunakan font lato. Lato dipilih karena keter- mudahan dalam keterbacaan dan familiar di mata pengguna, dan lato meruakan font dari keluarga sans sherif yang legal dan bebas digunakan baik untuk penggunaan pribadi atau untuk komersial.
Lisensi font lato dibawah SIL Open Font License 1.1.
Gambar 9. Font Lato
(https://www.solopress.com/blog/wp- content/uploads/2013/11/Lato1.jpg)
c) Warna
Pemilihan warna dalam merancang aplikasi Wisata Dieng ini menggunakan warna primer hijau, berpedoman dari psikologi warna, hijau melambangkan warna alami, relax dan damai, sehingga cocok untuk digunakan sebagai warna aplikasi wisata Dieng. Kemudian ditambahkan dengan warna baru yang mudah diterima dan disesuaikan dengan user persona.
commit to user 1) Komponen
a) Apps Bar: top
Apps bar/bilah aplikasi menampilkan informasi dan tindakan yang berkaitan dengan layar saat ini. Apps bar pada aplikasi Wisata Dieng Ini digunakan untuk branding, judul layar, navigasi menu, dan tindakan.
Gambar 10. Apps bar: top
(https://lh3.googleusercontent.com)
b) Navigation Drawer
navigation drawer/ laci navigasi pada perancangan aplikasi ini juga bisa disebut menu yang berisi beberapa kategori. Navigation drawer bisa diakses dengan mengetuk navigation menu.
commit to user
Gambar 11.Navigation drawer
(https://lh3.googleusercontent.com/ )
e. Software yang Digunakan
Perancangan UI dan UX Aplikasi Wisata Dieng ini menggunakan beberapa software untuk mengeksekusi desain visual, layout, ilustrasi, hingga prototype yang bisa dicoba. Berikut penjelasan beberapa software tersebut:
1) Adobe XD (Adobe Experience Design)
Adobe XD merupakan software dari keluarga Adobe yang seringkali digunakan untuk men˗desain UI dan bisa juga digunakan untuk mengerjakan ilustrasi. Software ini dapat memudahkan desainer UI dalam membuat sebuah rancangan desain UI karena memiliki berbagai macam fitur yang mendukung perancangan UI seperti grid point, metrik dimensi dari gadget, ataupun symbol. Penulis
commit to user
utama UI dan UX Aplikasi Wisata Dieng. Selain itu, penulis juga menggunakan software ini untuk mengerjakan desain komponen UI lainnya seperti icon, tombol, bar, dan lain sebagainya.
2) Adobe Photoshop
Adobe Photoshop atau Ps merupakan software berbasis bitmap dari keluarga Adobe, software ini sering digunakan untuk membuat ilustrasi, mengedit foto, atau membuat layout. Penulis akan menggunakan software ini untuk mengedit gambar di aplikasi ini.
3) Adobe illustration
Adobe llustration adalah aplikasi berbasis vektor dari keluarga Adobe.
dalam perancangan ini digunakan untuk membuat icon.
Prediksi Biaya Produksi Aplikasi
1) Riset Rp. 750.000
2) Desain UI dan UX Rp. 5.500.000
Subtotal Rp. 6.250.000
Bagan 1. Prediksi biaya produksi aplikasi
Sumber : Behance.net
B. Konsep Kreatif Media Pendukung 1. Konsep Kreatif
a. USP
USP atau Unique Selling Proportion merupakan sesuatu yang mem- bedakan antara produk yang dimiliki dengan kompetitor. Hal yang menjadi unique selling proportion aplikasi Wisata Dieng ini adalah wisata yang hanya ada di Dataran Tinggi Dieng.
b. Positioning
Aplikasi Wisata Dieng ini memposisikan produknya sebagai aplikasi yang membantu wisatawan yang akan berlibur ke Dataran Tinggi Dieng menentukan destinasi yang akan dikunjungi, maka aplikasi ini dirancang user interface dan user experience yang baik agar user dapat meng- operasikan fitur dengan mudah, dan wisatawan dapat menentukan destinasi yang akan dikunjunginya.
2. Standar Visual a. Pesan Verbal
Pesan verbal merupakan pesan yang penyampaiannya menggunakan kata˗kata dan dapat dipahami isinya oleh target. Hal tersebut dapat dibagi menjadi :
1) Headline, merupakan unsur terpenting dalam penyampaian pesan, karena posisinya merupakan yang pertama kali dibaca dan digunakan sebagai penarik pehatian utama. Headline yang digunakan pada media pendukung aplikasi Wisata Dieng ini adalah “Jelajah Negri di Atas
commit to user
Awan” yang menyesuaikan dengan headline yang yang biasa digunakan pariwisata Dieng.
2) Body Copy, Merupakan pesan yang memperjelas headline. Body copy yang digunakan dalam media pendukung aplikasi Wisata Dieng ini adalah kelebihan dari aplikasi dalam kemudahan dalam mendapatkan informasi serta kerelevanan data yang disajikan dalam aplikasi Wisata Dieng.
b. Pesan Non˗Verbal 1) Ilustrasi
Illustrasi adalah gambar yang difungsikan sebagai penarik pandang, menjelaskan sesuatu dan merangsang khalayak untuk membaca keseluruhan pesan. Ilustrasi harus relevan dengan produk yang ditawarkan dan mampu terbaca sekilas pandang. Ilustrasi yang digunakan untuk media pendukung aplikasi Wisata Dieng ini adalah foto objek wisata dan pendukungnya.
2) Tipografi
Pemilihan huruf yang sesuai dapat mempengaruhi target dalam menangkap informasi yang disampaikan. Untuk pemilihan huruf yang digunakan dalam media pendukung ini akan disesuaikan dengan pemilihan huruf yang digunakan media utama.
3) Layout
Penempatan gambar dan tulisan baik tipografi, ilustrasi, sifat yang akan digunakan dalam media pendukung ini berdasarkan prinsip-
prinsip penyusunan layout agar mudah dipahami dan bisa menarik perhatian calon pengguna.
4) Warna
Secara visual, warna memiliki kekuatan yang mampu mempengaruhi citra orang yang melihatnya. Warna yang akan digunakan dalam media pendukung ini akan menyesuaikan dengan warna media utama.
3. Pemilihan Jenis Media Pendukung
Media pendukung dipilih karena mempertimbangkan media utama dan target user. Media ini diharapkan mampu memperkuat media utama berupa aplikasi Wisata Dieng, Oleh karena itu, dipilih media pendukung sebagai berikut :
a. Poster dan Flyer
Poster dan flyer ini dipilih karena dianggap mampu menjangkau target user secara offline. Kedua media ini berisi informasi yang mengajak target user untuk mengunduh mobile app ini, disertai dengan keterangan singkat mengenai fiturnya. Poster dan flyer dari aplikasi Wisata Dieng ini memiliki konsep visual yang sama dengan media utama. Poster dan flyer ini akan diletakan di tempat loket masuk wisata dan pusat informasi. Hal ini dimaksudkan agar wisatawan dapat dengan mudah menjumpai media ini dan tertarik untuk mengunduh aplikasi ini.
b. Media Sosial Facebook dan Instagram
Media Sosial dipilih karena dianggap mampu menjangkau target user yang kebanyakan menggunakan media sosial dalam kegiatan sehari – harinya, Media sosial yang dipilih disini adalah Facebook dan Instagram, selain
commit to user
karena media sosial ini memiliki banyak pengguna aktif. Pemilihan media ini dimaksudkan agar target user dapat selalu update dan familiar dengan aplikasi wisata Dieng ini.
c. Online Banner
Online Banner merupakan jenis iklan atau alat promosi yang di- distribusikan di media digital. Media ini dipilih karena dapat mendukung media utama yang juga memanfaatkan media digital. Online ads berupa banner ini akan ditempatkan di website dan situs online yang menyediakan online ads seperti google adwords. Pemilihan dan penempatan media ini dianggap dapat tepat sasaran karena mampu menjangkau target user yang cukup spesifik yaitu mereka yang aktif menggunakan internet.
Prediksi Biaya Media Pendukung
a. Poster A3 x 500 lembar Rp. 2.400/ lembar Rp. 1.200.000 b. Flyer A3 x 500 buah Rp. 2.400/ buah Rp. 1.200.000 c. Facebook + Instagram Ads x
1 bulan
Rp. 75.000/ hari Rp. 2.250.000
d. Desain Banner untuk promosi sosial media
Rp. 1.000.000
Subtotal Rp. 5.650.000 Total Rp. 11.900.000
Bagan 2. Prediksi biaya media pendukung
