perancangan ui/ux untuk game 3d edukasi aksara …
TRANSCRIPT
PERANCANGAN UI/UX UNTUK GAME 3D EDUKASI
AKSARA LAMPUNG
Laporan Tugas Akhir
Ditulis sebagai syarat untuk memperoleh gelar Sarjana Desain (S.Ds.)
Nama : Nata Widjaya
NIM : 00000015977
Program Studi : Desain Komunikasi Visual
Fakultas : Seni dan Desain
UNIVERSITAS MULTIMEDIA NUSANTARA
TANGERANG
2020
ii
LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT
Saya yang bertanda tangan di bawah ini:
Nama : Nata Widjaya
NIM : 00000015977
Program Studi : Desain Komunikasi Visual
Fakultas : Seni dan Desain
Universitas Multimedia Nusantara
Judul Tugas Akhir : Perancangan UI/UX untuk game 3D edukasi
aksara Lampung
PERANCANGAN UI/UX UNTUK GAME 3D EDUKASI AKSARA
LAMPUNG
Dengan ini menyatakan bahwa, laporan dan karya tugas akhir ini adalah asli
dan belum pernah diajukan untuk mendapatkan gelar sarjana, baik di Universitas
Multimedia Nusantara maupun di perguruan tinggi lainnya.
Karya tulis ini bukan saduran/terjemahan, murni gagasan, rumusan dan
pelaksanan penelitian/implementasi saya sendiri, tanpa bantuan pihak lain, kecuali
arahan pembimbing akademik dan narasumber.
Demikian surat Pernyataan Originalitas ini saya buat dengan sebenarnya,
apabila di kemudian hari terdapat penyimpangan serta ketidakbenaran dalam
pernyataan ini, maka saya bersedia menerima sanksi akademik berupa pencabutan
gelar (S.Ds.) yang telah diperoleh, serta sanksi lainnya sesuai dengan norma yang
berlaku di Universitas Multimedia Nusantara.
iii
Tangerang, 5 September 2019
Nata Widjaya
iv
HALAMAN PENGESAHAN TUGAS AKHIR
PERANCANGAN UI/UX UNTUK GAME 3D EDUKASI
AKSARA LAMPUNG
Oleh
Nama : Nata Widjaya
NIM : 00000015977
Program Studi : Desain Komunikasi Visual
Fakultas : Seni & Desain
Tangerang, 10 Januari 2020
.
Pembimbing
Prima Murti Rane Singgih, A.Md., S.Sn., M.Ds.
Ketua Program Studi
Mohammad Rizaldi, S.T., M.Ds.
Penguji
Mohammad Rizaldi, S.T., M.Ds.
Ketua Sidang
Tolentino, S.Ds., M.M.
v
KATA PENGANTAR
Penulis mengambil dan menjadikan tema Aksara Lampung sebagai budaya
masyarakat Lampung karena penulis menemukan bahwa bahasa dan aksara
Lampung mulai tidak digunakan lagi oleh masyarakat Lampung itu sendiri. Padahal
keunikan dari budaya Lampung adalah aksaranya, tetapi masyarakat Lampung
lebih memilih untuk menggunakan aksara dan huruf lain dibandingkan aksara
mereka sendiri.
Aksara Lampung merupakan satu identitas yang patut dibudayakan dan
dikembangkan lebih lanjut agar tidak mulai hilang apalagi tergeser dengan budaya
lain karena banyak masyarakat luar yang mendatangi Lampung. Dengan laporan
ini, penulis berharap dapat mengenalkan kembali aksara Lampung yang terancam
akan hilang dengan media baru yang saat ini sedang banyak penggemarnya agar
aksara Lampung dapat dikenal kembali, tidak hanya oleh masyarakat Lampung tapi
juga dapat dikenali dan dihargai oleh masyarakat di luar daerah Lampung.
Selama mengerjakan laporan tugas akhir yang berjudul perancangan UI/UX
3D game aksara Lampung ini, penulis berharap keanekaragaman bahasa di
Indonesia tidak berkurang dan mengecil. Harapan penulis untuk laporan ini, yaitu
agar para pembaca dapat berkontribusi dan ikut serta dalam melestarikan budaya
serta bahasa yang ada di Indonesia.
Penulis juga ingin mengucapkan terima kasih kepada pihak-pihak yang
membantu dan telah terlibat, tanpa keterlibatan dari semuanya pembuatan proposal
maupun laporan ini tidak akan selesai tepat waktu dengan target yang sudah
ditentukan. Terima kasih kepada:
vi
1. Mohammad Rizaldi, S.T., M. Ds. Selaku Ketua program studi Desain
Komunikasi Visual.
2. Prima Murti Rane Singgih, A.Md., S.Sn., M.Ds. selaku dosen
pembimbing.
3. Agatha Maisie Tjandra, S.Sn., M., Ds. Selaku ketua koordinator prodi
Interaction Design
4. Lalitya Talitha Pinasthika, M.Ds. selaku koordinator proposal tugas
akhir prodi Interaction Design
5. Alexandro Bomasati, S.P d, M. selaku narasumber wawancara tentang
aksara Lampung di Sekolah Xaverius II, Bandar Lampung.
6. Ir. Anshori Djausal, M.T., selaku narasumber dan juga tokoh Lampung
yang mengerti dan paham akan sejarah budaya dan aksara Lampung.
7. Fadlan Azhari Setianto, selaku desainer UI/UX untuk serious games dan
game edukasi dari perusahaan AGATE.
8. Teman-teman di Universitas Multimedia Nusantara yang selalu ada dan
terus membantu menyelesaikan penulisan laporan tepat waktu.
9. Kedua orang tua dan keluarga yang selalu mendukung dan menjaga
kesehatan selama masa perkuliahan.
Tangerang, 5 September 2019
Nata Widjaya
vii
ABSTRAKSI
Penyebab utama dari pemudaran penggunaan aksara lampung adalah minat
generasi muda yang berkurang dalam mempelajarinya karena kurang menarik dan
terbatasnya metode dan media pengajaran. Banyak solusi interaktif yang dapat
diaplikasikan sebagai metode pembelajaran agar lebih menarik dan menyenangkan,
salah satu contohnya adalah educational game. Dengan menggunakan educational
game, pembelajaran akan menjadi menyenangkan karena dibantu dengan berbagai
mekanisme menarik, dan berbeda dengan belajar melalui buku.
Dalam perancangan ini, penulis memakai metode penelitian kualitatif dan
kuantitatif yang mencakup aksara lampng, proses pembelajaran aksara lampung,
desain UI/UX yang disesuaikan dengan tujuan edukasi. Lalu penulis menggunakan
metode perancangan dari George Kalmpourtzis tentang educational game dan
Ashley Godbold tentang desain UI/UX, yang mencakup sketsa tombol, layout,
pewarnaan, dan tipografi.
Dengan demikian, penulis telah merancang UI/UX dari game 3D edukasi aksara
lampung untuk mempelajari penggunaan aksara lampung dengan lebih efektif
melalui mekanisme puzzle. Perancangan sudah memiliki suasana yang
menyenangkan saat dimainkan oleh para pemain dan pemain merasa lebih mengerti
tentang aksara lampung. Untuk perancangan selanjutnya, disarankan untuk
menggunakan font dengan tingkat readability yang lebih tinggi.
Kata kunci: Aksara, lampung, edukasi, UI/UX, permainan
viii
ABSTRACT
The main cause of the decreased usage of lampung script is young people’s reduced
interest in learning the script due to lack of interest and limited teaching methods
and media. There is many interactive solutions that can be used as a teaching
method to make learning become more fun and interesting, such as educational
game. Through educational game, learning will become more fun due to variety of
interesting mechanisms and different with learning from books.
Through the design process, the author used a qualitative and quantitative research
methods, which cover lampung script, learning process, and UI/UX design for
educational purposes. Then, the author used design method by George
Kalmpourtzis about educational game and by Ashley Godbold about UI/UX design,
covering button sketches, layout, coloring, dan typography.
Thus, the author has design a UI/UX for 3D educational game about lampung script
which is for learning the usage of lampung script in a more effective way through
puzzle mechanism. The game design.itself feature fun and entertaining environment
which helps the player to understand more about lampung script. For future design,
it is advised to use a higher readability font.
Keywords: Script, Lampung, Educational, UI/UX, game
ix
DAFTAR ISI
LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT .................... II
HALAMAN PENGESAHAN TUGAS AKHIR ............................................... IV
KATA PENGANTAR ......................................................................................... IV
ABSTRAKSI ...................................................................................................... VII
ABSTRACT ....................................................................................................... VIII
DAFTAR ISI ........................................................................................................ IX
DAFTAR GAMBAR ......................................................................................... XII
DAFTAR TABEL ......................................................................................... XVIII
DAFTAR LAMPIRAN .................................................................................... XIX
BAB I PENDAHULUAN ...................................................................................... 1
1.1. Latar Belakang ........................................................................................ 1
1.2. Rumusan Masalah ................................................................................... 3
1.3. Batasan Masalah...................................................................................... 3
1.3.1. Segmentation, Targeting, Positioning ................................................. 3
1.3.2. Konten ................................................................................................ 4
1.3.3. Media .................................................................................................. 6
1.4. Tujuan Tugas Akhir ................................................................................ 6
1.5.1. Manfaat Untuk Pribadi .................................................................... 7
1.5.2. Manfaat Untuk Universitas .............................................................. 7
1.5.3. Manfaat Untuk Masyarakat ............................................................ 7
x
BAB II TINJAUAN PUSTAKA ........................................................................... 8
Game ....................................................................................................... 8
2.1.1. Definisi Game ............................................................................. 8
2.1.2. Manfaat Game ............................................................................. 8
2.1.3. Genre Game ................................................................................ 9
2.1.4. Game berbasis Edukasi ............................................................. 11
2.1.5. Elemen Game berbasis Edukasi ................................................ 12
2.1.6. Game edukasi komputer ............................................................ 13
2.1.7. Purwarupa ................................................................................. 14
User Interface........................................................................................ 15
Principles of Visual Design ................................................................... 22
User Experience .................................................................................... 25
Layout .................................................................................................... 26
Typography ........................................................................................... 30
Teori Flow dan interaktivitas dalam game edukasi .............................. 33
Micro-Interactions ................................................................................ 35
Aksara Lampung ................................................................................... 38
BAB III METODOLOGI .................................................................................. 41
Metodologi Pengumpulan Data ............................................................ 41
3.1.1. Observasi non Partisipatif ............................................................ 41
3.1.2 Wawancara ..................................................................................... 43
3.1.3. Kuesioner ...................................................................................... 50
3.1.4. Studi Referensi ............................................................................. 55
xi
Metodologi Perancangan ....................................................................... 63
3.2.1 Bagan Proses Perancangan Desain .............................................. 66
BAB IV ANALISIS ............................................................................................. 98
4.1. Analisis Alpha Test ............................................................................... 98
4.1.1 Analisis User Alpha Test ............................................................... 99
4.1.2. Before After .................................................................................. 110
4.1.3. Kesimpulan Alpha Test ............................................................... 114
4.2 Beta Test .............................................................................................. 114
4.2.1. Analisis Desain ............................................................................. 115
4.2.2. Analisis Beta Test ......................................................................... 133
BAB V KESIMPULAN DAN SARAN ............................................................ 140
5.1. Kesimpulan ........................................................................................ 140
5.2. Saran .................................................................................................. 141
DAFTAR PUSTAKA ....................................................................................... XIV
xii
DAFTAR GAMBAR
Gambar 2.1. Gameplay game Life is strange .......................................................... 9
Gambar 2.2. Gameplay game puzzle 2048 ........................................................... 10
Gambar 2.3. Gameplay game strategy Starcraft ................................................... 11
Gambar 2.4. Diagram yang menjelaskan tentang 4 jenis user interface ............. 16
Gambar 2.5. Contoh non-diegetic UI dalam game Pokemon Let’s Go ................. 17
Gambar 2.6. Contoh diegetic UI dalam game Dead Space.................................. 17
Gambar 2.7. Contoh meta UI dalam game Watch Dogs ....................................... 18
Gambar 2.8. Contoh spatial UI dalam game ....................................................... 18
Gambar 2.9. Modular grid dalam merancang layout ............................................ 19
Gambar 2.10. Contoh dari Modular grid system dalam game UI ........................ 20
Gambar 2.11. Contoh kombinasi warna Analogous…………………………………20
Gambar 2.12. Contoh kombinasi warna Split-complementary…......……………...21
Gambar 2.13. Kombinasi warna Split-complementary dalam tampilan game ..... 21
Gambar 2.14. Contoh dari tombol interface metaphors ....................................... 22
Gambar 2.15. Contoh unity dalam user interface ................................................ 23
Gambar 2.16. Contoh proximity dalam user interface .......................................... 23
Gambar 2.17. Penggunaan skala dan hirarki pada elemen desain ........................ 27
Gambar 2.18. Contoh dari keseimbangan simetri ................................................. 28
Gambar 2.19. Contoh dari keseimbangan asimetri ............................................... 28
Gambar 2.20. Contoh dari penggunaan repetisi pada elemen desain ................... 29
Gambar 2.21. Contoh dari penggunaan teknik Rule of Thirds .............................. 30
Gambar 2.22. Serif Font ........................................................................................ 31
xiii
Gambar 2.23. Sans Serif Font ............................................................................... 31
Gambar 2.24. Slab Serif Font ............................................................................... 32
Gambar 2.25. Script Font ...................................................................................... 32
Gambar 2.26. Decorative Font.............................................................................. 33
Gambar 2.27. Diagram flow .................................................................................. 34
Gambar 2.28. Contoh glow effect/animasi atau micro-interactions ...................... 36
Gambar 2.29. Tahap dari micro interactions ........................................................ 36
Gambar 2.30. Induk huruf aksara Lampung ......................................................... 38
Gambar 2.31. Anak huruf aksara Lampung……………………………………...39
Gambar 2.32. Naskah manuskrip aksara KA-GA-NGA…………………………40
Gambar 3.1. Observasi Lingkungan kelas 8 di Sekolah Xaverius II .................... 42
Gambar 3.2. Wawancara dengan bapak Alexandro Bomasati selaku guru bahasa
Lampung di sekolah Xaverius II ................................................................... 45
Gambar 3.3. Wawancara dengan bapak Anshori Djausal selaku tokoh Lampung
....................................................................................................................... 47
Gambar 3.4. Wawancara dengan bapak Fadlan Azhari Setianto selaku desainer UI/UX
game edukasi dari AGATE…………………………………………………49
Gambar 3.5. Hasil kuesioner tentang preferensi suasana belajar .......................... 51
Gambar 3.6. Hasil kuesioner tentang keadaan belajar di kelas ............................. 52
Gambar 3.7. Hasil kuesioner tentang kesulitan dalam belajar aksara lampung .... 53
Gambar 3.8. Hasil kuesioner tentang preferensi media belajar alternatif ............. 53
Gambar 3.9. Hasil kuesioner tentang preferensi style user interface ................... 54
Gambar 3.10. Gampelay Pokemon Let’s Go saat bertarung ................................ 56
xiv
Gambar 3.11. UI saat bertarung dari game World of Final Fantasy .................... 58
Gambar 3.12. UI pause menu dalam game World of Final Fantasy ..................... 58
Gambar 3.13. Referensi gameplay teka-teki dari game Final Fantasy X ............. 61
Gambar 3.14. UI game Final Fantasy X saat menyelesaikan tantangan ...................... 62
Gambar 3.15. Pipeline perancangan UI/UX .......................................................... 66
Gambar 3.16. Brainstorm ...................................................................................... 67
Gambar 3.17. Persona 1........................................................................................ 68
Gambar 3.18. Empahty Map 1 .............................................................................. 68
Gambar 3.19. Persona 2 ........................................................................................ 69
Gambar 3.20. empahty Map 2 ............................................................................... 69
Gambar 3.21. Persona 3 ........................................................................................ 70
Gambar 3.22. Emapthy Map 3 .............................................................................. 71
Gambar 3.23. Mindmap......................................................................................... 72
Gambar 3.24. Moodboard ..................................................................................... 73
Gambar 3.25. Reference Board ............................................................................. 73
Gambar 3.26. Partikel saat menyelesaikan puzzle ................................................ 75
Gambar 3.27. Tampilan minimap saat eksplorasi ................................................. 75
Gambar 3.28. Induk huruf dan anak huruf aksara lampung .................................. 76
Gambar 3.29. Denah level tutorial ........................................................................ 78
Gambar 3.30. Denah level satu ............................................................................. 79
Gambar 3.31. Puzzle 1 .......................................................................................... 79
Gambar 3.32. Boss puzzle 1 .................................................................................. 80
Gambar 3.33. Denah level dua .............................................................................. 81
xv
Gambar 3.34. Puzzle 3 .......................................................................................... 82
Gambar 3.35. Boss puzzle 2 .................................................................................. 82
Gambar 3.36. Denah level tiga .............................................................................. 83
Gambar 3.37. Puzzle 5 .......................................................................................... 84
Gambar 3.38. Puzzle 6 .......................................................................................... 84
Gambar 3.39. Boss puzzle 3 .................................................................................. 85
Gambar 3.40. Sketsa button .................................................................................. 86
Gambar 3.41. Sketsa HUD battle dan exploring .................................................. 86
Gambar 3.42. Sketsa UI puzzle ............................................................................. 87
Gambar 3.43. Sketsa alternatif kotak UI ............................................................... 87
Gambar 3.44. Desain digital icon dan button ........................................................ 87
Gambar 3.45. Desain digital logo game Luwagh .................................................. 88
Gambar 3.46. Penggunaan modular grid saat menyusun UI pertarungan ............ 88
Gambar 3.47. Penggunaan Rule of Thirds pada penyusunan main menu ............. 89
Gambar 3.48. Penggunaan Rule of Thirds pada penyusunan tampilan puzzle ...... 89
Gambar 3.49. Color Scheme ................................................................................. 90
Gambar 3.50. Base color ....................................................................................... 90
Gambar 3.51. Shade color ..................................................................................... 91
Gambar 3.52. Lighting color ................................................................................. 91
Gambar 3.53. Final color ...................................................................................... 92
Gambar 3.54. Eksplorasi pilihan font pada judul .................................................. 93
Gambar 3.55. Eksplorasi pilihan font pada tulisan panjang.................................. 94
Gambar 3.56. Screenshot saat exploring ............................................................... 95
xvi
Gambar 3.57. Screenshot saat bertarung dengan monster kecil............................ 96
Gambar 3.58. Screenshot saat menyelesaikan puzzle dan timbul monster boss ... 97
Gambar 3.59. Screenshot saat melawan monster boss dan puzzle ........................ 97
Gambar 4.1. Diagram preferensi style UI ............................................................. 99
Gambar 4.2. Diagram Hasil kuesioner tentang keseluruhan visual ...................... 99
Gambar 4.3. Diagram Hasil kuesioner tentang kesesuaian style visual .............. 100
Gambar 4.4. Diagram Hasil kuesioner tentang visual UI ................................... 100
Gambar 4.5. Diagram Hasil kuesioner tentang visual UI ................................... 101
Gambar 4.6. Diagram Hasil kuesioner tentang lokasi UI ................................... 102
Gambar 4.7. Diagram Hasil kuesioner tentang health bar ................................. 102
Gambar 4.8. Diagram Hasil kuesioner tentang keterbacaan font........................ 103
Gambar 4.9. Diagram Hasil kuesioner tentang mekanisme puzzle ..................... 104
Gambar 4.10. Diagram Hasil kuesioner tentang alur permainan ........................ 105
Gambar 4.11. Hasil kuesioner tentang suasana mini game puzzle ...................... 105
Gambar 4.12. Hasil kuesioner tentang suasana mini game puzzle ................... 106
Gambar 4.13. Hasil kuesioner tentang suasana pertarungan monster biasa ....... 107
Gambar 4.14. Hasil kuesioner tentang suasana pertarungan monster boss......... 107
Gambar 4.15. Hasil kuesioner tentang fitur yang menarik ................................. 108
Gambar 4.16. Hasil kuesioner tentang kritik dan masukan pemain .................... 109
Gambar 4.17. Perbandingan tampilan button ...................................................... 110
Gambar 4.18. Perbandingan efek partikel pada bagian puzzle............................ 111
Gambar 4.19. Perbandingan instruksi saat exploring ......................................... 111
Gambar 4.20. Perbandingan battle system .......................................................... 112
xvii
Gambar 4.21. Perbandingan visualisasi kemampuan tameng ............................. 113
Gambar 4.22. Perbandingan perspektif kamera pertarungan dengan boss ......... 113
Gambar 4.23. Non-diegetic UI dalam game perancangan .................................. 115
Gambar 4.24. Diegetic UI dalam game perancangan ............................................. 116
Gambar 4.25. Spatial UI dalam game perancangan ............................................ 117
Gambar 4.26. Saat karakter melihat monument bola .......................................... 118
Gambar 4.27. Meta UI dalam game perancangan ............................................... 118
Gambar 4.28. Tampilan puzzle dalam game ....................................................... 119
Gambar 4.29. Tampilan saat pertarungan dalam game ....................................... 120
Gambar 4.30. Penggunaan modular grid pada tampilan exploring .................... 121
Gambar 4.31. Penggunaan modular grid pada tampilan pertarungan ................ 121
Gambar 4.32. Kombinasi warna analogous dan split-complementary di UI ...... 122
Gambar 4.33. Kombinasi warna split-complementary antara UI dan environment
..................................................................................................................... 123
Gambar 4.34. Contoh penggunaan metafora pada button ................................... 123
Gambar 4.35. Tampilan perancangan game saat bertarung ................................ 124
Gambar 4.36. Tampilan perancangan game saat puzzle ..................................... 125
Gambar 4.37. Keseimbangan simetri pada tampilan puzzle ............................... 126
Gambar 4.38. Keseimbangan asimetri pada tampilan pertarungan..................... 126
Gambar 4.39. Tampilan tempat puzzle ................................................................ 127
Gambar 4.40. Tampilan bagian puzzle ................................................................ 127
Gambar 4.41. Tampilan tombol dalam game ...................................................... 128
Gambar 4.42. Tampilan HUD ............................................................................. 128
xviii
Gambar 4.43. Contoh penggunaan teori rule of thirds ....................................... 129
Gambar 4.44. Tampilan dengan teori rule of thirds ............................................ 130
Gambar 4.45. Tampilan dengan teori rule of thirds ............................................ 131
Gambar 4.46. Penggunaan font sans serif pada teks dialog ................................ 131
Gambar 4.47. Efek Partikel dan animasi di UI ................................................... 132
Gambar 4.48. Diagram tentang bentuk dan warna UI ........................................ 133
Gambar 4.49. Diagram tentang kejelasan bentuk visual tombol ........................ 134
Gambar 4.50. Diagram tentang keterbacaan font atau tulisan ............................ 135
Gambar 4.51. Diagram tentang instruksi ............................................................ 135
Gambar 4.52. Diagram tentang suasana saat bermain ........................................ 136
Gambar 4.53. Diagram tentang kesulitan puzzle ................................................. 137
Gambar 4.54. Diagram tentang keefektifan mekanisme puzzle .......................... 138
DAFTAR TABEL
Tabel 3.1. Tabel analisis UI Pokemon Let’s Go................................................... 57
Tabel 3.2. Tabel analisis UI World of Final Fantasy ........................................... 60
Tabel 3.3. Tabel analisis UI Final Fantasy X ...................................................... 62
xix
DAFTAR LAMPIRAN
LAMPIRAN ....................................................................................................... xiv