3.5. Ideation Generate Ideas
3.7.1. Design Principal
Berdasarkan dari hasil penyusunan moodboard, penulis menerapkan prinsip membaca buku pada tutorial dan buku catatan. Tombol-tombol menyerupai sticky notes yang berhubungan dengan aktivitas menulis di buku. Lalu pemilihan ikon dan simbol pada UI menyerupai bentuk nyata yang didesain dalam bentuk sederhana, kecuali dengan tombol menu opsi yang mengikuti dari hasil pembelajaran analisis referensi. Berikut merupakan design principal user interface yang diterapkan pada “PrAbu” :
166 1. Naturalness :
a. Pada informasi mengenai misi yang harus dilakukan pada “PrAbu”
menggunakan map lokasi yang terletak pada menu opsi dan menggunakan trigger yang dibentuk dengan menggunakan simbol.
b. Navigasi karakter yang menunjukkan arah lokasi karakter bergerak ke arah yang dituju dibentuk menyerupai simbol navigasi.
c. Navigasi tempat dengan tujuan menunjukkan pemain perpindahan lokasi dibentuk menyerupai simbol navigasi panah disertai nama tempat.
d. Fitur buku catatan dibentuk menyerupai simbol buku.
e. Fitur inventory dibentuk menyerupai simbol tas.
f. Menu opsi dibuat menyerupai simbol hamburger.
g. Penggunaan simbol tangan yang bertujuan untuk menunjukka area yang dapat disentuh.
h. Penggunaan simbol benar dan salah dalam pernyataan kartu solusi.
Simbol benar menyerupai centang. Simbol salah menyerupai silang.
i. Batas waktu menyelesaikan kasus perundungan menyerupai hitungan mundur.
j. Batas kesempatan menyelesaikan kasus perundungan menyerupai kartu solusi yang digunakan dengan trigger.
2. Consistency :
Konsistensi pada UI dilihat dari elemen desain yang digunakan yang terdiri dari :
167 a. Jenis tipografi dan style ikon simbol yang digunakan disesuaikan dengan
target pasar anak usia 9-12 tahun yaitu rounded.
b. Ikon dan simbol yang dirancang mempunyai ciri khas yang sama, yaitu rounded. Perancangan ikon dan simbol ini menggunakan golden ratio atau fibonacci sequence untuk menyelaraskan ketebalan garis, style dan besar ukuran ikon dan simbol.
c. Jenis font yang digunakan pada “PrAbu” ada 2 jenis untuk in game dan fitur buku catatan. Pada in game jenis font yang digunakan adalah jenis font yang rounded. Sedangkan buku catatan jenis font yang digunakan adalah kaku untuk menggambarkan tulisan nyata di buku tulis.
d. Penggunaan teks narator dan dialog percakapan terdapat opacity untuk tetap menunjukkan dan tidak menganggu kerja environment dan karakter.
3. Friendliness :
a. Pemberitahuan sebelum masuk ke quick time answer bahwa terdapat batas waktu dan batas kesempatan dalam mencocokkan kartu solusi dengan kasus perundungan.
b. Pemberitahuan berupa tutorial atau cara bermain pada “PrAbu”.
c. Pemberitahuan bahwa pemilihan kartu solusi dengan kasus perundungan salah dan benar.
d. Pemberitahuan bahwa ada barang atau objek yang tidak berfungsi pada jalur cerita game “PrAbu”.
168 4. Clarity :
a. Terdapat pemberitahuan bahwa banyak objek yang mempunyai fungsi utama dan tidak ada fungsinya dengan cara menambahkan shadow atau glow. Jika objek yang mempunyai fungsinya, maka akan langsung berhadapan dengan cerita selanjutnya atau achievement selanjutnya. Jika objek yang tidak memiliki fungsinya, maka karakter utama akan bereaksi bahwa objek ini bukan untuk menyelesaikan kasus perundungan.
b. Pemain dapat mengerti dengan cara permainan dengan tutorial, map perjalanan tempuh, dan achievement yang harus dilakukan oleh pemain.
5. Interaction :
a. Untuk fungsi yang dapat disentuh atau diinteraksikan, menggunakan ikon dan simbol. Terdapat 3 ikon utama pada in game yaitu buku catatan, inventory, dan menu opsi. Selain itu terdapat tombol berupa tulisan yang dapat diinteraksikan pada menu utama dan menu opsi.
Beberapa tombol pada menu utama dan menu opsi sama agar fleksibel dan tidak statik yaitu pengaturan, dan lanjut penyimpanan data.
b. Pada area yang dapat disentuh maupun digeser diberi simbol tangan dengan pointer. Lalu simbol tangan tersebut diberi micro interaction berupa animasi. Animasi pada simbol tangan ini bermacam-macam sesuai dengan fungsinya. Animasi simbol tangan pada tutorial dibuat bergerak ke kiri dan kanan looping untuk menandakan gestur interaksi pada tutorial adalah swipe. Sedangkan simbol tangan pada percakapan
169 teks dialog menggunakan animasi membesar dan mengecil looping untuk menandakan gestur interaksi pada dialog percakapan dan hal lainnya yang berupa membesar dan mengecil adalah tap.
6. Transparency :
a. Terdapat navigasi tempat dan karakter yang tidak dapat dilihat langsung oleh pemain. Navigasi tempat muncul ketika pemain mendekati ruangan. Sedangkan navigasi karakter muncul ketika pemain tap lantai untuk mengarahkan karakter utama ke tempat yang dituju. Pemain mempunya gerak kontrol pada navigasi karakter.
7. Visual Hiearchy :
a. Informasi yang padat disusun dengan visual hirarki z pattern.
b. Tombol-tombol pada game disusun dengan daya raih tangan pemain terhadap layar mobile.
c. Informasi-informasi yang mempunyai fungsi disusun dan dipadatkan ke dalam ikon sesuai dengan fungsinya. Fitur buku catatan disamarkan dengan bentuk ikon buku catatan. Fitur inventory disamarkan dengan bentuk ikon tas sekolah. Menu opsi disamarkan dengan ikon hamburger.
d. Membedakan judul dan isi teks dengan jenis font pada tutorial dan buku catatan.
e. Pada dialog percakapan, informasi penting berupa kartu solusi, tempat lokasi penting, objek penting yang mempunyai nilai fungsi pada cerita diberi warna yang berbeda dari teks lainnya agar pemain tahu infomasi-informasi penting tersebut mempunyai objektivitas pada alur cerita.
170 8. Step by step Information Flow :
a. Informasi pada tutorial disusun secara bertahap dari informasi primer hingga sekunder.
b. Urutan event berupa pencarian kartu solusi, informasi pendukung menyelesaikan kartu solusi, konflik kasus perundungan, pencocokkan masalah kasus perundungan dengan kartu solusi bertahap (dapat dilihat dari flowchart).
9. Invisibility :
a. Kotak dialog percakapan antar dialog dengan karakter dibuat tembus pandang sehingga pemain dapat melihat gestur dan ekspresi karakter serta environment.
b. Background teks narator dibuat tembus pandang agar dapat melihat situasi seting tempat yang sesuai dengan teks narator.
3.7.2. Moodboard
Pada tahapan ini, penulis menyusun moodboard untuk menentukan jenis style yang akan dirancang pada user interface. Dari hasil wawancara dengan Dio, penulis memilih warna yang tidak agresif dan bentuk-bentuk yang mudah dikenali anak-anak dari bentuk nyata yang disederhanakan. Penulis menyesuaikan teori warna menurut Adams dan Terry (2017) untuk mengetahui warna tidak agresif, elemen desain shape abstraction, dan mencari kecocokan dari kedua hal tersebut.
Pada moodboard yang disusun, penulis banyak menggunakan warna biru karena biru bersifat tidak agresif yang bertolak belakang dengan warna merah.
Selain itu, penulis menggunakan warna yang transparan untuk mendukung
171 interaksi karakter dan environment. Percakapan dialog hirarki berupa highlight informasi penting, style ikon, peta navigasi terinspirasi dari game “Jenny Leclue”
karena memakai elemen desain shape abstraction. Bentuk shape tombol mengikuti Berikut merupakan hasil moodboard user interface dari berbagai game :
Gambar 3.60. Moodboard 3.7.3. Eksplorasi
Pada tahapan ini, penulis eksplorasi terhadap visualisasi pada bentuk dan feel yang sesuai dengan target anak usia 9-12 tahun. Eksplorasi pada “PrAbu” terdiri dari warna, tipografi, shape tombol, dan shape ikon.
1. Warna
172 Dari hasil moodboard dan design principal, dan jenis warna yang digunakan dalam perancangan “PrAbu” adalah ramah karena tidak agresif sesuai dengan prinsip desain dan teori warna menurut Adams dan Terry (2017).
Kesan yang ditunjukkan tidak kuat dan mementingkan level game, environment dan karakter. Penulis menyambungkan kata ramah dengan teori psikologi warna menurut Adams dan Terry (2017) dalam penentuan warna.
Jenis penentuan warna yang dipakai adalah tetrad atau double split complementary.
Gambar 3.61. Tetrad Color Scheme 2. Tipografi
Jenis tipografi yang digunakan oleh penulis untuk in game bersifat rounded. Berikut merupakan kandidat jenis tipografi yang bersifat rounded.
173 Gambar 3.62. Eksplorasi Tipografi Rounded
Jenis tipografi yang digunakan oleh penulis untuk fitur buku catatan bersifat kaku. Berikut merupakan kandidat jenis tipografi yang bersifat kaku.
Gambar 3.63. Eksplorasi Tipografi Kaku
Dari hasil analisis lebih dalam mengenai tipografi, penulis memilih tipografi Katahdin Round, Robaga, dan Cherish Today. Katahdin Round digunakan pada in game judul. Robaga digunakan pada in game dan buku catatan body text. Cherish Today digunakan pada achievement buku catatan. Berikut merupakan hasil analisis ketiga tipografi tersebut :
a. Katahdin Round
Katahdin Round dapat dilihat sebagai tipografi yang mempunyai sifat kekanakan dan ceria dilihat dari bentuk lingkarannya. Jenis tipografi yang bulat ini memiliki kecocokan terhadap majalah musik, dan majalah sekolah. Akan tetapi penggunaan tipografi ini digunakan sedikit pada game karena dapat menimbulkan kesan terlalu kekanakan.
174 Selain itu penggunaan tipografi ini hanya digunakan pada judul tutorial dan tulisan pada button karena ketebalan dan uppercase yang menonjol. Berikut merupakan penerapan tipografi Katahdin Round pada judul tutorial dan button:
Gambar 3.64. Main Menu
Gambar 3.65. Tutorial I b. Robaga
Robaga dapat dilihat sebagai tipografi yang mempunyai ciri khas yang mirip dengan Katahdin Round. Penggunaan tipografi Robaga ini terdapat pada dialog percakapan antar karakter, isi teks buku catatan
175 dan body text tutorial karena mempunyai keterbacaan yang cepat.
Berikut merupakan penerapan tipografi Robaga pada dialog percakapan, buku catatan, dan body text pada tutorial :
Gambar 3.66. Dialog Percakapan
Gambar 3.67. Buku Catatan - Karakter c. Cherish Today
Cherish Today dapat dilihat sebagai tipografi yang mempunyai ciri khas yang kaku dan menyerupai tulisan asli pada dunia nyata.
Penggunaan tipografi ini terdapat pada judul achievement buku catatan. Penggunaan tipografi ini bertujuan untuk memberikan kontras dan hirarki antara judul dan isi teks buku catatan. Berikut merupakan
176 penerapan tipografi Cherish Today pada judul achievement buku catatan :
Gambar 3.68. Achievement Buku Catatan 3. Shape Tombol
Bentuk-bentuk tombol pada “PrAbu” menggunakan bentuk dasar persegi.
Perancangan pada bentuk tombol menggunakan golden ratio agar lengkungan pada sudut persegi sama. Selain itu untuk membuat tombol tersebut terlihat sebagai tombol yang dapat ditekan untuk adanya suatu aktivitas, ada penambahan highlight dan drop shadow atau bayangan pada bagian bawah dan kanan tombol. Setelah penambahan drop shadow, penulis menambahkan hirarki pada tombol-tombol berupa warna tombol dan peletakan. Berikut merupakan salah satu eksplorasi tombol
Gambar 3.69. Eksplorasi Tombol
177 4. Shape ikon
Bentuk-bentuk ikon pada “PrAbu” menggunakan bentuk dasar pada dunia nyata sesuai dengan teori shape abstraction menurut Hashimoto dan Clayton (2009). Namun pada bagian perancangan ikon opsi dari studi referensi game pada “Jenny LeClue”. Bentuk-bentuk shape ikon didasarkan pada graphical user interface berupa metaphorical user interface dan golden ratio. Berikut merupakan eksplorasi bentuk ikon utama inventory, buku catatan, menu opsi, dan ikon hold :
Gambar 3.70. Bentuk Shape Ikon Buku Catatan
Gambar 3.71. Bentuk Shape Ikon Menu Opsi
178 Gambar 3.72. Bentuk Shape Ikon Inventory
Gambar 3.73. Bentuk Shape Ikon Hold
Gambar 3.74. Bentuk Shape Ikon Kanan
Gambar 3.75. Bentuk Shape Ikon Pointer
179 3.7.4. Visualisasi User Interface
Pada visualisasi User Interface, terbagi menjadi dua hal utama yaitu berdasarkan gameplay utama dan menu. User Interface yang berhubungan dengan gameplay utama antara lain dialog percakapan antar karakter, inventory, buku catatan, konfrontasi, dan akhir konfrontasi. Sedangkan user interface pada menu terdiri dari menu utama, dan menu opsi.
1. User Interface Gameplay Utama
User interface gameplay utama dirancang berdasarkan keyword game utama yaitu heroic, tension, dan curious. Heroic yang ditampilkan pada user interface berupa dialog percakapan yang berfokuskan pada karakter. Tension yang ditampilkan pada user interface berupa konfrontasi kasus perundungan dengan kartu solusi yang disertai batas waktu dan kesempatan. Curious yang ditampilkan pada user interface berupa pencarian kartu solusi yang disertai buku catatan dan inventory.
a. Dialog percakapan
Dialog percakapan dirancang berdasarkan referensi game “Jenny LeClue”
dan natural user interface berupa direct interaction yaitu zooming in dan pergeseran kamera antar dialog dengan karakter bersangkutan. Fungsi zooming in dan dialog percakapan per karakter dengan pergeseran kamera dapat menimbulkan empati yang lebih dalam dibanding dialog percakapan standar antara lain dua karakter dalam satu user interface.
180 Gambar 3.76 . Dialog Percakapan
Percakapan antar dialog memuat dua baris berdasarkan target audiens dan persona dengan tingkat pengetahuan dan berbahasa, maka dialog disusun dalam dua baris dan dilanjutkan kembali dua baris selanjutnya berdasarkan isi percakapan. Lalu, isi dialog percakapan memiliki hirarki berupa informasi-informasi penting yang bersangkutan dalam gameplay diberi highlight berwarna merah. Tujuan pemberian hirarki ini adalah memberitahu pemain misi selanjutnya. Hirarki-hirarki yang disusun berupa kartu solusi, lokasi, dan informasi pentingnya untuk melanjutkan cerita.
Gambar 3.77. Hirarki Dialog dan Dua Baris Dialog Percakapan
181 b. Pencarian kartu solusi
Pada pencarian kartu solusi ini, pemain memiliki resource berupa inventory dan buku catatan. Peletakan kedua fitur ini disusun berdasarkan hirarki z pattern dan menerapkan graphical user interface berupa metaphorical user interface. Inventory dirancang menyerupai tas sekolah anak-anak yang disesuaikan kembali dengan hasil riset. Sedangkan buku catatan dirancang menyerupai buku catatan asli. Selain fitur utama yang disebutkan, terdapat fitur pendukung yang dapat membantu pemain menyelesaikan lebih cepat yaitu peta navigasi yang terdapat di menu opsi.
Peta navigasi yang disebutkan bertujuan untuk memberitahu pemain, lokasinya sedang berada dan misi yang harus dilakukan per tahapan.
Gambar 3.78. In Game Permainan (Inventory, Buku Catatan, dan Menu Opsi)
Gambar 3.79. Inventory
182 Gambar 3.80. Peta Navigasi dalam Menu Opsi 1
Pada pencarian kartu solusi, pemain dihadapkan dengan natural user interface berupa zooming in kepada properti barang utama untuk mencari kartu solusi. Fungsi zooming in bertujuan untuk memberikan kesan penasaran lebih dalam untuk mencari kartu solusi.
Gambar 3.81. Zoom In Properties Gudang c. Konfrontasi
1
2
183 Pada konfrontasi, pemain memiliki resource berupa batas waktu, batas kesempatan, dan kartu solusi. Kartu solusi yang disebutkan berfungsi sebagai jawaban dari konfrontasi perundungan. Batas waktu berfungsi sebagai batas pemain dalam melakukan konfrontasi dalam waktu sepuluh detik. Batas waktu sepuluh detik diberikan berdasarkan target audiens dan referensi game “Jenny LeClue”. Referensi game lain memberikan waktu lima sampai tujuh detik dalam menjawab pertanyaan namun dengan target lebih tua yaitu dua belas tahun ke atas. Bentuk dari batas waktu adalah batang yang mundur sampai habis waktunya. Batas kesempatan berfungsi sebagai kesempatan kesalahan yang diberikan kepada pemain sebanyak tiga dalam konfrontasi perundungan. Bentuk kesempatan kesalahan menyerupai tanda seru yang menandakan pemain harus waspada kepada kesempatannya. Penentuan batas kesempatan dirancang berdasarkan game “Ace Attorney”.
Gambar 3.82. Konfrontasi I
Apabila pemain dapat menjawab benar dan cepat, pemain dihadapkan ke user interface “Chapter Complete”. Sedangkan apabila pemain tidak berhasil menjawab benar dan cepat, pemain dihadapkan ke
184 user interface “Chapter Fail” disertai tombol mengulang. Pada “Chapter Complete”, background ceria dengan karakter utama yang senang. Pada
“Chapter Fail”, background sedih dengan karakter utama yang sedih.
Gambar 3.83. Chapter Complete, Chapter Fail 2. User Interface Menu
User interface pada bagian menu dibentuk sesuai dengan referensi game
“Jenny Leclue”, “Oxenfree”, dan “She and The Light Bearer”. User interface menu terdiri dari menu utama dan menu opsi.
a. Menu utama
Menu utama terdiri dari logo game, tombol mulai, lanjut, pengaturan, dan keluar dari permainan. Pada tombol mulai memiliki fungsi memulai gameplay utama. Pada lanjut memiliki fungsi melanjutkan kembali save data terakhir permainan. Pada pengaturan memiliki fungsi mematikan, menyalakan suara, dan kredit pembuatan game.
Peletakan informasi tombol menyerupai horizontal disesuaikan dengan kapasitas batas raih two hand landscape target audien sehingga hirarki dapat terlihat.
185 Gambar 3.84. Menu Utama
Ketika pemain berinteraksi dengan tombol lanjut, pemain dapat melihat user interface berupa daftar save data sejumlah tiga. Informasi pada save data bergantung pada save data terakhir pemain. Informasi pada save data meliputi waktu terakhir bermain, informasi pada gameplay yang sudah terkumpul dan lokasi terakhir pemain berada.
Gambar 3.85. Menu Utama - Lanjut Data
Ketika pemain berinteraksi dengan tombol pengaturan, pemain dapat melihat user interface berupa tombol mati pada musik berupa kosong. Ketika pemain memutuskan untuk menyalakannya, maka tombol tersebut berubah menjadi ada ikon centang yang menandakan musik nyala.
186 Gambar 3.86. Menu Utama - Pengaturan
3. Logo Game
Pada tahapan ini, penulis merancang logo game “PrAbu” dengan menggunakan keywords yaitu heroic, tension, dan curious. Perancangan logo game bertujuan untuk sebagai identitas game “PrAbu” dan didasari teori perancangan logo menurut Geek (2015) yaitu SMART (simple, memorable, appropriate, resizeable, dan timeless). Perancangan logo game diawali dari sketsa, digitalisasi, dan finalisasi.
Pada proses sketsa, penulis menggambarnya dengan tulisan lengkap
“PrAbu” dengan penekanan “A” berupa anti untuk mendorong pembelaan korban perundungan. Setelah itu ada penambahan topi berupa topi sekolah dasar yang menunjukkan anak-anak sekolah dasar. Namun pada proses sketsa ada perubahan pada elemen topi menjadi jubah superhero yang menekankan hero berupa upstander yang menolong korban perundungan.
187 Gambar 3.87. Sketsa Awal Logo Game “PrAbu”
Setelah melalui tahap sketsa, penulis melakukan tahap digitalisasi.
Pada proses digitalisasi, penulis menggunakan teori warna menurut Adams dan Terry (2017) dan hirarki. Warna yang ditekankan pada logo game adalah warna kuning pada A yang mempunyai arti bijaksana dan jubah berwarna merah yang mempunyai arti antusias. Lalu huruf lain P, r, b, u dihilangkan karena tidak menonjol dibanding huruf A.
Gambar 3.88. Digitalisasi Logo Game “PrAbu”
Setelah digitalisasi, penulis melanjutkan tahap finalisasi. Pada tahap finalisasi, penulis melakukan perbaikan terhadap jubah karena terlalu bulat dan penambahan hirarki berupa “PrAbu”. Perbaikan pada jubah bertujuan untuk menambahkan kesan hero. Penambahan hirarki
188 berupa “PrAbu” adalah untuk memberitahu pemain huruf A berasal dari kata “Anti”.
Gambar 3.89. Finalisasi Logo Game “PrAbu”