PENGANTAR KARYA TUGAS AKHIR - PERANCANGAN MOBILE APP MITIGASI BENCANA GUNUNG API MERAPI BERBASIS ANDROID - UNS Institutional Repository

  PE NGANT AR K AR Y A T UGAS AK HIR

PE RANCANGAN MOBILE APP MIT IGASI BE NCANA GUNUNG API ME RAPI BE R BASIS ANDROID

  Disusun Guna Melengkapi dan Memenuhi Persyaratan Mencapai Gelar Sarjana Seni Rupa

  Program Studi Desain K omunikasi V isual Disusun oleh:

  Christina K enya P C0714007 PR OGR AM ST UDI DE SAIN K OMUNIK ASI V ISUAL FAK UL T AS SE NI R UPA DAN DE SAIN UNIV E R SIT AS SE BE L AS MAR E T SUR AK AR T A

  2018

  v PE RSE MBAHAN To Bapak, Mama, Kintan, Odele and Iesu.

  Know that you all are the strength that makes things possible. vi MOT T O

  “If opportunity doesn’t knock, build a door.”

K AT A PE NGANT AR

  Puji dan syukur penulis panjatkan kepada Tuhan Y ang Maha K uasa atas limpahan berkat-Nya, sehingga penulis dapat menyelesaikan tugas akhir ini. Tugas akhir ini disusun untuk memenuhi kewajiban akademik guna memperoleh gelar sarjana pada program studi S1 Desain K omunikasi V isual Universitas Sebelas Maret Surakarta.

  Selesainya tugas akhir ini tidak terlepas dari bimbingan, arahan, dorongan dan dukungan dari berbagai pihak. Oleh karena itu dalam kesempatan ini penulis ingin mengucapkan terima kasih kepada beberapa pihak, antara lain:

  1. Andreas Slamet Widodo, S.Sn., M.Hum., selaku K epala Program Studi S1 Desain K omunikasi V isual.

  2. Dr. Deny Tri Ardianto, S.Sn., M.A., selaku Pembimbing I Tugas Akhir yang telah memberikan bimbingan, saran, dan arahan sejak penyusunan proposal penelitian, perancangan hingga selesainya penyusunan tugas akhir ini.

  3. Anugrah Irfan Ismail, S.Sn., M.Sn., selaku Pembimbing II Tugas Akhir memberikan bimbingan, saran, dan arahan sejak penyusunan proposal penelitian, perancangan hingga selesainya penyusunan tugas akhir ini.

  4. Ercilia Rini Octavia, S.Sn., M.Sn. selaku K oordinator Tugas Akhir yang telah mendampingi dan membimbing hingga selesainya penyusunan tugas akhir ini.

  5. Seluruh dosen dan karyawan Fakultas Seni Rupa Desain Universital Sebelas Maret Surakarta, khususnya program studi S1 Desain K omunikasi V isual.

  6. Agus Budi Santoso, selaku K epala Seksi Gunung Merapi Balai Penyelidikan dan Pengembangan Teknologi K ebencanaan Geologi (BPPTK G) Y ogyakarta yang telah bersedia memberikan ijin dalam melaksanakan penelitian.

  7. Noer Cholik, selaku Staff Seksi Gunung Merapi BPPTK G yang telah bersedia membantu pengolahan data-data penelitian serta memberikan masukan dan dukungan hingga selesainya penyusunan Tugas Akhir ini.

  8. Heribertus, Geraldino, Arif dan Godeliva yang telah bersedia menjadi user persona sehingga tugas akhir ini dapat diselesaikan dengan baik. vi

  9. Sahabat dan teman-teman serta seluruh pihak yang tidak dapat disebutkan satu persatu yang telah membantu penulis dalam menyelesaikan Tugas Akhir ini.

  Penulis menyadari bahwa K onsep K arya Tugas Akhir ini masih jauh dari sempurna baik dari sisi penyusunan, bahasa, maupun penulisannya. Oleh karena itu penulis mengharapkan kritik dan saran yang sifatnya membangun, untuk menjadi acuan dan bekal penulis di masa yang akan datang.

  Surakarta, 17 J uli 2018 Christina K enya P

  ix

DAFT AR ISI

  Halaman Judul ................................................................................................................i Halaman Persetujuan .....................................................................................................ii Halaman Pengesahan................................................................................................... iii Halaman Orisinalitas TA ..............................................................................................iv Halaman Persembahan...................................................................................................v Halaman Motto.............................................................................................................vi K ata Pengantar.............................................................................................................vii Daftar Isi .......................................................................................................................ix Daftar Gambar ..............................................................................................................xi Daftar Tabel ............................................................................................................... xiii Abstrak........................................................................................................................xiv Abstract........................................................................................................................xv

  BAB I PE NDAHUL UAN.............................................................................................1 A. Latar Belakang....................................................................................................1 B. Rumusan Masalah...............................................................................................2 C. Tujuan Perancangan............................................................................................3 D. Batasan Lingkup Perancangan............................................................................3 E. Manfaat Perancangan..........................................................................................4 F. Metode Penelitian...............................................................................................5

  1. Objek dan Subjek Penelitian...........................................................................5

  2. Sasaran dan Lokasi Penelitian.........................................................................5

  3. Jenis Data dan Sumber Data ...........................................................................5

  G. Metode Analisis Data..........................................................................................7

  H. Skematika Perancangan......................................................................................8

  BAB II L ANDASAN T E OR I ....................................................................................12 A. Perancangan......................................................................................................12 B. Mobile app........................................................................................................12 C. User Interface dan User Experience.................................................................13 D. Google Material Design ...................................................................................17 E. Teori Difusi Inovasi ..........................................................................................21 F. Mitigasi Bencana ..............................................................................................23 BAB III IDE NT IFIK ASI DAN ANAL ISIS DAT A .................................................25

  x

  A. Identifikasi Objek..............................................................................................25

  B. Analisis Media yang Telah Digunakan Sebelumnya........................................35

  C. Analisis K ebutuhan Media................................................................................44

  D. Analisis K eunggulan Media yang Akan Dibuat ...............................................48

  E. K omparasi SWOT Mobile app Sejenis.............................................................49

  1. K omparasi .....................................................................................................49

  2. Analisis SWOT .............................................................................................55

  BAB IV K ONSE P PE R ANCANGAN ......................................................................60 A. Tujuan K reatif...................................................................................................60 B. Strategi K reatif..................................................................................................60

  1. Target dan User Persona...............................................................................60

  2. K onten Mobile app........................................................................................68

  3. K onsep User Interface (UI) dan User Experience (UX) ...............................75

  4. Alur Penggunaan Mobile app........................................................................81

  5. Software yang Digunakan.............................................................................83

  C. Biaya K reatif.....................................................................................................85

  BAB V PR OSE S PE R ANCANGAN.........................................................................86 A. Alur Perancangan Mobile app ..........................................................................86 B. Penjaringan Ide.................................................................................................87 C. Pengembangan Desain......................................................................................91

  1. App Branding ................................................................................................91

  2. Wireframe......................................................................................................94

  3. Prototyping..................................................................................................108

  4. Usability Test/Feedback..............................................................................109

  5. Refinement...................................................................................................121

  D. Aplikasi pada Mobile app...............................................................................127

  E. Media Pendukung ...........................................................................................132

  BAB V I PE NUT UP ..................................................................................................137 A. K esimpulan.....................................................................................................137 B. Saran ...............................................................................................................137 DAFT AR PUST AK A ...............................................................................................139 L AMPIR AN..............................................................................................................142

  xi

DAFT AR GAMBAR

  Gambar 1. Skema Design Thinking ..............................................................................9 Gambar 2. Dimensi x, y, z dalam sebuah ruang .........................................................19 Gambar 3. Bayangan yang dihasilkan oleh key light dan ambient light .....................19 Gambar 4. Aplikasi elevasi dan bayangan Google Material Design ..........................21 Gambar 5. Bagan Struktur Organisasi BPPTK G ........................................................26 Gambar 6. Erupsi Merapi 2010 ...................................................................................27 Gambar 7. Stasiun Pemantauan Merapi ......................................................................31 Gambar 8. Jalur Pendakian Merapi .............................................................................34 Gambar 9. Wajib Latih Penanggulangan Bencana (WLPB) ......................................38 Gambar 10. Rambu Barak Pengungsian dan Bahaya Awan Panas ............................38 Gambar 11. Rambu Titik K umpul Pengungsi .............................................................39 Gambar 12. Rambu Jalur Evakuasi .............................................................................39 Gambar 13. Peta K awasan Rawan Bencana 2012 ......................................................40 Gambar 14. Website BPPTK G ....................................................................................40 Gambar 15. Laman Twitter BPPTK G .........................................................................41 Gambar 16. Laman Facebook BPPTK G ....................................................................41 Gambar 17. Laman InstagramBPPTK G ....................................................................42 Gambar 18. Youtube Channel BPPTK G .....................................................................42 Gambar 19. Mobile app Plewangan ............................................................................43 Gambar 20. K larifikasi Resmi BPTK G Menanggapi Hoax ........................................45 Gambar 21. Mobile app MAGMA Indonesia..............................................................53 Gambar 22. Mobile app Info BMK G...........................................................................54 Gambar 23. K onten Mobile app Mitigasi Bencana Merapi ........................................74 Gambar 24. Sistem ikon Google Material Design ......................................................77 Gambar 25. Grid ikon Google Material Design .........................................................78 Gambar 26. Margin dan K eyline Menu Navigasi .......................................................79 Gambar 27. Matriks Struktur App Bar ........................................................................80 Gambar 28. Pesan Error ..............................................................................................81 Gambar 29. Skema Alur Penggunaan Mobile app ......................................................82 Gambar 30. Bagan alur perancangan Mobile app .......................................................87 Gambar 31. Moodboard perancangan visual UI Mobile app .....................................88

  xii

  Gambar 32. Styleguide UI Mobile app .......................................................................89 Gambar 33. Font Circular Std ....................................................................................90 Gambar 34. Logo Mobile app “Merapi” .....................................................................92 Gambar 35. Mobile app Icon dalam Google Material Design Icon Grid ...................93 Gambar 36. Pengaplikasian Logo dalam Launch Screen Mobile app.........................94 Gambar 37. Low Fidelity Wireframe Launch Screen dan Landing Screen.................96 Gambar 38. Low Fidelity Wireframe Login Screen....................................................97 Gambar 39. Low Fidelity Wireframes Status/Home Screen .......................................97 Gambar 40. High Fidelity Wireframes Landing Screen dan Login Screen.................99 Gambar 41. High Fidelity Wireframe Status/Home Screen........................................99 Gambar 42. High Fidelity Wireframe Navigation Bar ..............................................100 Gambar 43. High Fidelity Wireframes Screen Aktivitas...........................................101 Gambar 44. High Fidelity Wireframes Screen Panduan Mitigasi User Umum.........102 Gambar 45. High Fidelity Wireframes Screen Rekomendasi ...................................103 Gambar 46. High Fidelity Wireframes Screen Peta Jalur Evakuasi ..........................104 Gambar 47. High Fidelity Wireframes Screen Lapor................................................105 Gambar 48. High Fidelity Wireframes Screen K ontak Darurat ................................106 Gambar 49. High Fidelity Wireframes Screen Chatroom.........................................107 Gambar 50. High Fidelity Wireframes Screen Tentang ............................................108 Gambar 51. Prototyping menggunakan Invision App................................................109 Gambar 52. Usability Testing terhadap User Persona Umum 1................................111 Gambar 53. Usability Testing terhadap User Persona Umum 2................................114 Gambar 54. Usability Testing terhadap User Persona Agen Mitigasi 1....................117 Gambar 55. Usability Testing terhadap User Persona Agen Mitigasi 2....................119

  xiii

DAFT AR T ABE L

  Tabel 1. Analisis SWOT .............................................................................................55 Tabel 2. Persona Umum 1 ...........................................................................................63 Tabel 3. Persona Umum 2 ...........................................................................................64 Tabel 4. Persona Agen Mitigasi 1 ...............................................................................65 Tabel 5. Persona Agen Mitigasi 2 ...............................................................................67 Tabel 6. Hasil Usability Test Wireframe User Persona Umum 1 .............................111 Tabel 7. Hasil Usability Test Wireframe User Persona Umum 2 .............................114 Tabel 8. Hasil Usability Test Wireframe User Persona Agen Mitigasi 1 .................117 Tabel 9. Hasil Usability Test Wireframe User Persona Agen Mitigasi 2 .................119 Tabel 10. Hasil Usability Test Desain V isual UI 1 ...................................................121 Tabel 11. Hasil Usability Test Desain V isual UI 2 ...................................................125

  Perancangan Mobile App Mitigasi Bencana Gunung Api Merapi berbasis Android

• ---------------------------------------------------------------------------------------------- 1

  Christina K enya P

  

2

  3 Dr. Deny Tri Ardianto, M.A Anugrah Irfan Ismail, S.Sn, M.Sn.

  ABST R AK SI 2018. Christina K enya P. Mitigasi bencana sebagai upaya untuk mengurangi resiko bencana melalui pembangunan fisik maupun psikis yang terpadu sangatlah dibutuhkan dalam daerah rawan bencana seperti di pemukiman sekitar lereng Gunung Merapi di Pulau Jawa. Padatnya penduduk di sekitar lereng Gunung Merapi sangat mengkhawatirkan jika dibandingkan dengan besarnya potensi resiko bencana yang dimilikinya. Sementara itu, pengembangan upaya mitigasi yang dilakukan pemerintah kiranya masih memiliki kekurangan khususnya dalam hal penyampaian informasi mitigasi kepada warga masyarakat. Informasi mitigasi yang disampaikan melalui media cetak, berbagai sosial media hingga pelatihan nampaknya belum bisa diterima dengan baik. Bersamaan dengan itu, perkembangan ekonomi masyarakat lereng Merapi yang meningkat membuka jalan bagi media baru untuk semakin merambah dalam kehidupan masyarakat. K esempatan ini dianggap sebagai peluang untuk adanya sebuah media komunikasi informasi mitigasi yang lebih baru dan efektif. Dengan menggunakan metode kualitatif deskriptif, dilakukan penelitian untuk menentukan bentuk media komunikasi yang tepat bagi masyarakat. Berdasarkan penelitian tersebut dibuatlah perancangan sebuah prototype user-oriented mobile app yang mampu menghimpun informasi secara terpadu, dan dapat diakses dengan cepat dan akurat sebagai panduan dan sumber informasi mitigasi bencana Gunung Merapi bagi masyarakat.

  K ata kunci: Mitigasi Bencana, Gunung Merapi, Desain UI & UX, Mobile App Android

  1 ₂ Mahasiswa Prodi S1 Desain K omunikasi V isual FSRD UNS ₃ Dosen Pembimbing I Dosen Pembimbing II

  Design of Merapi V olcano Disaster Mitigation Manual Android Mobile Application

• ---------------------------------------------------------------------------------------------- 1

  Christina K enya P

  

2

  3 Dr. Deny Tri Ardianto, M.A Anugrah Irfan Ismail, S.Sn, M.Sn.

  ABST R ACT 2018. Christina K enya P. An effective disaster mitigation measures to reduce the impacts and risks of hazards through proactive procedures are severely needed in disaster-prone areas such as villages that surround Merapi Mountain in J ava. The populous suburb settled around the active volcano is very alarming considering how huge the danger Mount Merapi holds when it erupts. Meanwhile, an efficient disaster mitigation strategies has yet to be developed by the government. Educational strategies such as training, disaster mitigation coaching and information spreading through multiple media are still insufficient. For the society, information regarding disaster mitigations are still uneasy to grasp. Simultaneously, the increasing economic growth in the community allows a fresh space for new media to develop well. This is seen as an opportunity to build a new communication line that grants access to a brand new and useful information resource. Using qualitative research methods, this research aims to determine an accurate media for such community. The final result of this project is an user-oriented mobile app prototype that is adequate to provide numerous Merapi V olcano disaster mitigation information and strategies in a practical and sufficient manner.

  K eywords: Mitigation Disaster, Merapi V olcano, UI & UX Design, ₁ Android Mobile App

  The student of V isual Communication Design Faculty of Fine Art and Design ₂ Sebelas Maret University Guide Lecturer I