PERANCANGAN UI/UX 2D MOBILE GAME SEBAGAI
SARANA INFORMASI CARA MENGHADAPI
PENDERITA ALZHEIMER
Laporan Tugas Akhir
Ditulis sebagai syarat untuk memperoleh gelar Sarjana Desain (S.Ds.)
Nama : Melissa Hamzah
NIM : 00000014165
Program Studi : Desain Komunikasi Visual Fakultas : Seni dan Desain
UNIVERSITAS MULTIMEDIA NUSANTARA
TANGERANG
iv
KATA PENGANTAR
Penulis panjatkan puji syukur kepada Tuhan yang Maha Esa, karena-Nya penulis dapat menyelesaikan proposal Tugas Akhir dengan judul “Perancangan UI/UX 2D Mobile Game Sebagai Sarana Informasi Cara Menghadapi Penderita Alzheimer”.
Laporan ini disusun untuk sidang kedua tugas akhir 2019/2020, serta meraih gelar Sarjana Desain di Universitas Multimedia Nusantara.
Hal utama yang penulis pelajari selama menyusun proposal ini adalah persiapan waktu dan mental. Selain itu, penulis juga mempelajari lebih dalam mengenai topik perancangan yang penulis ajukan, yaitu penyakit Alzheimer.
Proposal ini tentunya didukung oleh pihak-pihak lainnya yang sudah sangat membantu. Penulis ingin mengucapkan terima kasih kepada :
1. Mohammad Rizaldi, S.T., M.Ds. selaku Ketua Program Studi
2. Lalitya Talitha Pinasthika, M.Ds.selaku Dosen Pembimbing
3. Prima Murti Rane Singgih, S.Sn., M.Ds. selaku Dosen Pembimbing rekan kelompok Tugas Akhir
4. Dr. Maria Irene Hendrata, S.Ked, dr. , Sp.KI. selaku Narasumber Ahli Psikiater.
vi
ABSTRAKSI
Perkembangan penyakit Alzheimer meningkat dengan cepat setiap tahunnya. Alzheimer menyerang bagian otak pada kepala. Dampak dari penyakit Alzheimer adalah penurunan daya ingat dan fungsi otak yang akan sangat membuat penderita merasa kesusahan untuk melakukan aktifitas-aktifitas sehari-harinya. Penderita tidak bisa hidup mandiri dan sifat mereka menjadi sangat berubah. Keluarga bisa menjadi kesal dan stress karena menghadapi orang tua yang mengidap Alzheimer. Padahal, ada penanganan khusus. Maka dari itu, ada baiknya kesadaran tentang penyakit Alzheimer atau cara menghadapi penderita Alzheimer disebarluaskan sejak dini. Maka dibuat perancangan 2D mobile game, sebuah media interaktif sebagai sarana informasi cara menghadapi penderita Alzheimer.
Kata kunci : Alzheimer, 2D mobile game, informasi, komunikasi, user interface, user experience
vii
ABSTRACT
The development of Alzheimer's disease is increasing rapidly every year. Alzheimer's disease attacks brain cells. The impact of Alzheimer's disease is a decrease in the brain function that causes sufferers to experience difficulties while carrying out daily activities. Sufferers cannot live independently and their nature changes greatly. Families can get stressed out while facing parents with Alzheimer’s disease. In fact, there is a special handling information. Therefore, awareness about Alzheimer's disease or how to face Alzheimer's sufferers are better to be told early on. Therefore, creating a 2D mobile game design, interactive media as a means of giving information on how to face Alzheimer's sufferers.
Keywords: Alzheimer's, 2D mobile game, information, communication, user interface, user experience
viii
DAFTAR ISI
LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT ... II HALAMAN PENGESAHAN TUGAS AKHIR ... III KATA PENGANTAR ... IV ABSTRAKSI ... VI
ABSTRACT ... VII
DAFTAR ISI ... VIII DAFTAR GAMBAR ... XI DAFTAR LAMPIRAN ... XV BAB I PENDAHULUAN ... 1 1.1. Latar Belakang ... 1 1.2. Rumusan Masalah ... 3 1.3. Batasan Masalah ... 3
1.4. Tujuan Tugas Akhir ... 4
1.5. Manfaat Tugas Akhir ... 4
BAB II TINJAUAN PUSTAKA ... 6
2.1. Digital Game ... 6
2.1.1. Game Elements ... 6
2.1.2. Mobile Game ... 9
2.1.3. Casual Games ... 9
2.2. Interaktivitas ... 10
2.3. User Interface dan User Experience ... 12
ix 2.3.3. Iconography ... 18 2.3.2. Information Architecture ... 19 2.3.4. Level Design ... 20 2.4. Elemen Desain ... 21 2.4.1. Bentuk ... 21 2.4.2. Warna ... 22 2.5. Prinsip Desain ... 24 2.5.1. Keseimbangan ... 25 2.5.2. Kesatuan ... 25
2.5.3. Repetisi dan Irama ... 25
2.5.4. Grid ... 25 2.5.5. Tipografi ... 28 2.6. Gaya Grafis ... 30 2.6.1 Flat Design ... 32 2.7. Alzheimer ... 33 2.6.1. Gejala Alzheimer ... 33
2.6.2. Faktor Risiko Alzheimer ... 35
2.6.3. Dampak Alzheimer ... 35
2.6.4. Penanganan Alzheimer ... 36
BAB III METODOLOGI ... 37
3.1. Metodologi Pengumpulan Data ... 37
3.1.1. Wawancara ... 37
x 3.1.3. Kuesioner ... 45 3.1.4. Studi Referensi ... 48 3.2. Metodologi Perancangan ... 51 3.2.1. Empathize ... 53 3.2.2. Define ... 53 3.2.3. Ideate ... 55 3.2.4. Prototype ... 63 3.2.5. Test ... 64 BAB IV ANALISIS ... 65 4.1. Analisis Alpha-Test ... 65 4.2. Analisis Beta-Test ... 71 4.2.1. Analisis Desain ... 71 4.2.2. Analisis User ... 85 BAB V PENUTUP ... 92 5.1. Kesimpulan ... 92 5.2. Saran ... 93
xi
DAFTAR GAMBAR
Gambar 2. 1 Elemen Game ... 7
Gambar 2. 2 Nodal Plot ... 11
Gambar 2. 3 Modulated Plot ... 12
Gambar 2. 4 Open Plot ... 12
Gambar 2. 5 Checkboxes ... 14
Gambar 2. 6 Radio Buttons ... 14
Gambar 2. 7 Buttons ... 15
Gambar 2. 8 Dropdown Buttons ... 15
Gambar 2. 9 Toggles ... 15
Gambar 2. 10 Text Field ... 15
Gambar 2. 11 Search Field ... 16
Gambar 2. 12 Sliders ... 16
Gambar 2. 13 Icons ... 16
Gambar 2. 14 Pagination ... 16
Gambar 2. 15 Notifications ... 17
Gambar 2. 16 Progress Bars ... 17
Gambar 2. 17 Tool Tips ... 17
Gambar 2. 18 Message Boxes ... 18
Gambar 2. 19 Pop Up Window ... 18
Gambar 2. 20 Flowchart ... 20
Gambar 2. 21 Teori Warna ... 23
xii
Gambar 2. 23 Single-Column Grid ... 26
Gambar 2. 24 Two-Column Grid ... 27
Gambar 2. 25 Multi-Column Grid ... 27
Gambar 2. 26 Modular Grid ... 28
Gambar 2. 27 Hierarchical Grid ... 28
Gambar 3. 1 Penulis Bersama Dr. Maria Irene Hendrata ... 38
Gambar 3. 2 Penulis Bersama Lingsih, Rico, dan Lasma ... 39
Gambar 3. 3 Penulis Bersama Ibu Yangling dan Bapak Robert ... 41
Gambar 3. 4 Daycare Olahraga Ringan ... 43
Gambar 3. 5 Daycare Menyusun Kata ... 44
Gambar 3. 6 Pasien Mamih ... 45
Gambar 3. 7 Diagram Ciri-Ciri Pikun ... 46
Gambar 3. 8 Diagram Faktor Pemicu Alzheimer ... 47
Gambar 3. 9 My Tom 2 ... 49
Gambar 3. 10 Bubbu ... 51
Gambar 3. 11 Design Thinking ... 51
Gambar 3. 12 Persona Mainstream ... 54
Gambar 3. 13 Persona Anti-Mainstream ... 54
Gambar 3. 14 Mind map ... 56
Gambar 3. 15 Mood Board Kelompok dan UI ... 57
Gambar 3. 16 Flowchart ... 58
Gambar 3. 18 Sketsa Bentuk Ikon dan Logo ... 59
xiii
Gambar 3. 20 Digitalisasi 3 Gaya Visual UI ... 60
Gambar 3. 21 Digitalisasi Bentuk Ikon ... 60
Gambar 3. 22 Digitalisasi Logo ... 61
Gambar 3. 23 Perbaikan Bentuk Ikon ... 61
Gambar 3. 24 Digitalisasi Perbaikan UI ... 62
Gambar 3. 25 Typeface Harabara Mais Pada Logo Alzicare ... 62
Gambar 3. 26 Tutorial Alzicare ... 63
Gambar 3. 27 Halaman Alzicare ... 64
Gambar 4. 1 Sketsa Dan Digitalisasi Akhir Perubahan Tombol Profil dan Home 65 Gambar 4. 2 Sketsa Dan Digitalisasi Progress Bar ... 66
Gambar 4. 3 Perubahan Deskripsi Mood Karakter ... 66
Gambar 4. 4 Diagram Informasi Alzheimer Yang Kurang ... 67
Gambar 4. 5 Sketsa dan Digitalisasi Ilustrasi Cutscene ... 68
Gambar 4. 6 Sketsa dan Digitalisasi Tombol Hint Dan Quiz ... 68
Gambar 4. 7 Digitalisasi Akhir Tampilan Hint, Quiz Dan Pop-Up Penjelasan .... 69
Gambar 4. 8 Sugesti Pengguna ... 69
Gambar 4. 10 Halaman Menggunakan Modular Grid ... 73
Gambar 4. 11 Halaman Menu Utama ... 73
Gambar 4. 12 Halaman Menu Utama 2 ... 74
Gambar 4. 13 Halaman Cutscene Cerita ... 75
Gambar 4. 14 Halaman Tutorial ... 76
Gambar 4. 15 Halaman Lobi ... 77
xiv
Gambar 4. 17 UI Bagian Kanan ... 79
Gambar 4. 18 UI Bagian Kiri ... 80
Gambar 4. 19 Tampilan Profil ... 81
Gambar 4. 20 Flow Interaktif ... 81
Gambar 4. 21 Flow Properti Interaktif ... 82
Gambar 4. 23 Halaman Mini Game 1 ... 84
Gambar 4. 24 Halaman Mini Game 2 ... 84
Gambar 4. 25 Diagram Kemudahan Penggunaan UI ... 87
Gambar 4. 26 Diagram Kekontrasan UI ... 87
Gambar 4. 27 Diagram Kejelasan UI ... 88
Gambar 4. 28 Diagram Seberapa Terinformasi Pengguna Memperoleh Poin ... 88
Gambar 4. 29 Diagram Tingkat Pemahaman Pengguna Mengenai Tujuan ... 89
Gambar 4. 30 Diagram Tingkat Pemahaman Pengguna Mengenai Gameplay ... 89
xv
DAFTAR LAMPIRAN
LAMPIRAN A: KUESIONER ... C LAMPIRAN B: TRANSKRIP WAWANCARA ... CXII LAMPIRAN C: LEMBAR BIMBINGAN ... CXXIII LAMPIRAN D: GAME DESIGN DOCUMENT ... CXXVII
