Team project 2017 Dony Pratidana S. Hum Bima Agus Setyawan S. IIP

         . Hak cipta dan penggunaan kembali: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat ciptaan turunan bukan untuk kepentingan komersial, selama anda mencantumkan nama penulis dan melisensikan ciptaan turunan dengan syarat yang serupa dengan ciptaan asli. Copyright and reuse: This license lets you remix, tweak, and build upon work non-commercially, as long as you credit the origin creator and license it on your new creations under the identical terms.. Team project ©2017  Dony Pratidana S. Hum | Bima Agus Setyawan S. IIP .

BAB III METODE PENELITIAN DAN PERANCANGAN SISTEM. 3.1. Metodologi Penelitian Dalam penelitian ini, metodologi penelitian yang dilakukan adalah sebagai. berikut. 1.. Studi Literatur Studi literatur merupakan tahapan mempelajari dan memahami referensireferensi yang berkaitan dengan teori-teori yang menjadi dasar perancangan dan pembangunan dalam aplikasi ini. Teori-teori tersebut meliputi metode gamifikasi, iOS, pedometer, HealthKit, Octalysis framework, HMSAM, dan skala Likert.. 2.. Perancangan Aplikasi Perancangan aplikasi kesehatan penghitung jumlah langkah kaki dengan metode gamifikasi berbasis iOS meliputi perancangan gamifikasi, perancangan aset, perancangan model aplikasi, perancangan flowchart dan perancangan desain antarmuka (user interface).. 3.. Pembuatan Aplikasi Pembuatan aplikasi menggunakan Integrated Development Environment (IDE) Xcode. Bahasa pemrograman yang digunakan adalah bahasa pemrograman Swift. Aplikasi dibuat untuk perangkat iPhone.. 4.. Pengujian Aplikasi Pengujian aplikasi dilakukan dengan menggunakan metode studi lapangan, dimana akan dipilih sampel dengan metode purposive sampling, yaitu orang. 20. Implementasi metode gamifikasi..., William Cendana Putra, FTI UMN, 2019.

yang ingin lebih peduli kesehatannya dengan menghitung jumlah langkah setiap hari dengan menggunakan aplikasi mobile. Pengujian menggunakan data langkah kaki yang tercatat pada device iPhone untuk menghitung jumlah langkah kaki pengguna setiap hari dan jumlah langkah kaki yang dicapai pengguna dalam satu minggu. Pengguna menggunakan device iPhone untuk mengetahui jumlah langkah kaki yang telah dicapai dengan menggunakan sensor pedometer pada iPhone. Pengujian ini dilakukan untuk mengetahui tingkat behavioral intention to use dan tingkat immersion dengan menggunakan Hedonic Motivation System Adoption Model (HMSAM). Data yang diperlukan dalam pengujian aplikasi didapat dari kuesioner yang diberikan kepada pengguna. 5.. Evaluasi Pada tahap evaluasi, dilakukan analisis hasil dari aplikasi yang telah diuji sebelumnya. Hasil evaluasi disimpulkan melalui penggunaan skala Likert lima tingkat agar dapat mengukur kegunaan dari penggunaan aplikasi kesehatan perhitungan jumlah langkah dengan metode gamifikasi.. 3.2. Rancangan Gamifikasi Dalam penelitian ini, perancangan gamifikasi menggunakan beberapa. element, yaitu Octalysis framework, game mechanics, dan game dynamics.. 3.2.1. Octalysis Framework Penggunaan Octalysis framework di dalam aplikasi penghitung jumlah. langkah kaki adalah sebagai berikut.. Implementasi metode gamifikasi..., William Cendana Putra, FTI UMN, 2019. 21.

1.. Epic Meaning & Calling Aplikasi dibuat dengan tujuan untuk meningkatkan keinginan pengguna untuk berjalan kaki dengan metode gamifikasi. Aplikasi menggunakan game dynamics dan game mechanics di dalam pembuatan untuk memberikan pengalaman yang baik dan manfaat yang diinginkan dari pengguna dalam menggunakan aplikasi.. 2.. Development & Accomplishment Pengguna mendapatkan sebuah hadiah berupa point dari jumlah langkah yang dicapai oleh pengguna di dalam satu hari. Semakin banyak jumlah langkah kaki yang ditempuh pengguna, maka point yang akan didapatkan oleh pengguna akan semakin banyak. Terdapat juga challenge yang akan memberikan point tambahan kepada pengguna jika berhasil menyelesaikan challenge.. 3.. Empowerment Creativity & Feedback Pengguna akan memberikan masukan dan saran pada pembuatan aplikasi pada tahap uji coba aplikasi yang dilakukan selama satu bulan. Masukan yang sama dari beberapa pengguna akan diimplementasikan pada aplikasi jika masukan dari pengguna sesuai dengan tujuan dari penelitian.. 4.. Ownership & Possession Pembuatan aplikasi dibuat dengan penggunaan aplikasi oleh pengguna yang baru menggunakan tidak merasa kesulitan di dalam menggunakan aplikasi, seperti icon-icon yang digunakan akan merepresentasikan dari fungsi icon tersebut serta fitur dan pengaturan yang disediakan dibuat sederhana dan mudah dipahami.. Implementasi metode gamifikasi..., William Cendana Putra, FTI UMN, 2019. 22.

5.. Social Influence & Relatedness Pengguna dapat melihat status dari pengguna lain yang menggunakan aplikasi di dalam leaderboard yang disediakan di dalam aplikasi. Leaderboard akan menampilkan status dari pengguna dan beberapa info dari pengguna yang akan memberikan dorongan kepada pengguna lain supaya bisa menjadi top leader pada leaderboard.. 6.. Scarcity & Impatience Pengguna mendapatkan sebuah challenge/quest setiap satu minggu sekali dengan tantagan yang berbeda-beda. Jika pengguna telah menyelesaikan challenge/quest yang diberikan, maka pengguna harus menunggu minggu berikutnya untuk mendapatkan sebuah challenge/quest.. 7.. Unpredictability & Curiosity Pengguna. diberikan. jumlah. point. berdasarkan. tingkat. kesulitan. challenges/quest yang didapatkan oleh pengguna secara acak serta terdapat beberapa level/stage yang tersedia di dalam aplikasi. 8.. Loss & Avoidance Status yang akan didapatkan pengguna dapat menjadi lebih tinggi atau lebih rendah, tergantung pada jumlah langkah kaki yang dicapai oleh pengguna setiap hari. Semakin banyak jumlah langkah kaki yang dicapai oleh pengguna setiap hari, maka pengguna akan mendapatkan status yang lebih tinggi di dalam aplikasi.. 3.2.2. Rancangan Game Mechanics Komponen game mechanics yang digunakan pada penelitian ini adalah. sebagai berikut.. Implementasi metode gamifikasi..., William Cendana Putra, FTI UMN, 2019. 23.

1.. Points Pengguna akan mendapatkan point setelah melewati satu hari. Satu hari akan dihitung dimulai dari pukul 00.00 hingga pukul 23.59, atau waktu ketika pengguna menggunakan aplikasi pertama kali hingga pukul 23.59. Point yang didapatkan oleh pengguna akan dihitung dari jumlah langkah kaki yang dicapai pada hari tersebut.. 2.. Levels Pengguna akan mendapatkan level sesuai dengan pencapaian point yang telah dicapai. Semakin banyak jumlah point yang telah dikumpulkan oleh pengguna selama menggunakan aplikasi, maka pengguna akan mendapatkan level yang lebih tinggi.. 3.. Leaderboard Leaderboard digunakan untuk menunjukkan pengguna yang memiliki jumlah point yang paling banyak telah dicapai. Leaderboard akan dibatasi sebanyak sepuluh pengguna dengan jumlah point paling banyak yang telah dicapai yang akan masuk ke dalam leaderboard, sehingga pengguna yang memiliki jumlah points yang lebih kecil dibandingkan dengan jumlah point yang didapatkan oleh pengguna kesepuluh tidak akan ditampilkan dan pengguna yang ingin masuk ke dalam leaderboard harus berusaha untuk mendapatkan jumlah point yang lebih banyak terlebih dahulu dari pengguna kesepuluh untuk masuk ke dalam leaderboard. Jika terjadi kesamaan pada jumlah point yang didapatkan oleh lebih dari satu pengguna, maka peringkat akan ditentukan dari status pengguna.. Implementasi metode gamifikasi..., William Cendana Putra, FTI UMN, 2019. 24.

4.. Challenges/quest Pengguna akan mendapatkan point tambahan dengan menyelesaikan challenges/quests yang akan tersedia di dalam aplikasi. Challenges/quests yang tersedia akan berhubungan dengan jumlah langkah kaki seperti jumlah langkah kaki yang harus dicapai dalam satu minggu lebih banyak dari jumlah kaki yang harus didapatkan setiap hari.. 3.2.3. Rancangan Game Dynamics Komponen game dynamics yang digunakan pada penelitian ini adalah. sebagai berikut. 1.. Reward Pengguna akan mendapatkan reward berupa point yang didapatkan dari challenges/quest dan atau jumlah pencapaian jumlah langkah kaki setiap hari. Reward yang bisa didapatkan oleh pengguna tidak hanya berupa point, tetapi juga dapat berupa achievement.. 2.. Status Status yang pengguna dapatkan berasal dari jumlah langkah kaki yang sudah dicapai oleh pengguna selama menggunakan aplikasi dibagi dengan jumlah hari semenjak pengguna menggunakan aplikasi.. 3.. Achievement Achievement pada aplikasi berupa gambar yang menyerupai seperti piala/piagam yang didapatkan ketika seseorang memenangkan sebuah lomba atau pertandingan. Achievement akan didapatkan dari pencapaian yang telah dicapai oleh pengguna. Pencapaian yang dapat dicapai seperti jumlah langkah. Implementasi metode gamifikasi..., William Cendana Putra, FTI UMN, 2019. 25.

kaki yang didapatkan dalam satu hari lebih dari 10.000 langkah, pengguna rutin selama satu minggu hari berturut-turut mengumpulkan lebih dari 10.000 langkah setiap harinya. Achievement yang telah didapatkan, dapat dilihat secara 3D. 4.. Self-expression Pengguna dapat menggunakan point yang dimiliki untuk membeli item berupa background yang terdapat di dalam aplikasi. Pengguna bebas untuk memilih background yang ingin dibeli sesuai dengan keinginan dan disukai oleh pengguna.. 5.. Competition Kompetisi yang dibangun di dalam aplikasi terdapat di dalam leaderboard yang menunjukkan prestasi yang didapatkan oleh pengguna dengan menunjukkan jumlah total points yang telah didapatkan selama menggunakan aplikasi, status yang menunjukkan seberapa aktif pengguna berjalan dan level yang ditentukan dari jumlah point yang telah didapatkan pengguna.. 6.. Altruism Pengguna dapat memotivasi pengguna lain berjalan lebih banyak setiap hari untuk mendapatkan jumlah langkah kaki yang dapat berfungsi untuk mendapatkan peringkat yang tinggi pada leaderboard. Dengan memotivasi pengguna lain untuk mendapatkan jumlah langkah kaki yang lebih pada setiap hari, maka pengguna itu sendiri harus nendapatkan jumlah langkah kaki yang lebih banyak untuk mendapatkan peringkat yg lebih tinggi pada leaderboard dibandingkan pengguna yang dimotivasi oleh pengguna tersebut.. Implementasi metode gamifikasi..., William Cendana Putra, FTI UMN, 2019. 26.

3.3. Perancangan Model Aplikasi Perancangan. model. aplikasi. yang. digunakan. di. dalam. aplikasi. direpresentasikan pada Gambar 3.1.. Gambar 3.1 Model Aplikasi Penghitung Jumlah Langkah Kaki Aplikasi penghitung jumlah langkah kaki dengan menggunakan library Healtkit memiliki model aplikasi seperti pada Gambar 3.1. Data jumlah langkah kaki yang akan digunakan merupakan data yang berasal dari library HealthKit. Library HealthKit menggunakan sensor pedometer yang berada pada smartphone untuk menghitung steps, distance, flight climbed. Data yang didapatkan dari HealthKit, disimpan ke dalam database Firebase dengan menggunakan API yang disediakan Firebase. Data yang diolah untuk beberapa fitur di dalam aplikasi seperti data history dan data progress bar pada challenges merupakan data yang diambil dari database Firebase dengan menggunakan API.. Implementasi metode gamifikasi..., William Cendana Putra, FTI UMN, 2019. 27.

3.4. Penggunaan Aset Aset-aset yang digunakan di dalam aplikasi adalah sebagai berikut. Gambar. Tabel 3.1 Daftar Aset Penjelasan Sumber Gambar Desain 3D achievement untuk pengguna yang mencapai 3.000 langkah dalam satu hari. Aset Pribadi. Desain 3D achievement untuk pengguna yang mencapai 5.000 langkah dalam satu hari.. Aset Pribadi. Desain 3D achievement untuk pengguna yang mencapai 10.000 langkah dalam satu hari.. Aset Pribadi. Desain 3D achievement untuk pengguna yang mencapai 100.000 langkah. Aset Pribadi. Desain 3D achievement untuk pengguna yang mencapai 500.000 langkah. Aset Pribadi. Implementasi metode gamifikasi..., William Cendana Putra, FTI UMN, 2019. 28.

Gambar. Tabel 3. 1 Daftar Aset (Lanjutan) Penjelasam Desain 3D achievement untuk pengguna yang mencapai 1.000.000 langkah.. Sumber Gambar. Aset Pribadi. Desain 3D achievement untuk pengguna yang berjalan kaki setiap hari selama 3 hari berturut-turut.. Aset Pribadi. Desain 3D achievement untuk pengguna yang berjalan kaki setiap hari selama 1 minggu berturut-turut.. Aset Pribadi. Desain 3D achievement untuk pengguna yang berjalan kaki setiap hari selama 1 bulan berturut-turut.. Aset Pribadi. Desain 3D achievement untuk pengguna yang berjalan kaki setiap hari selama 3 bulan berturut-turut.. Aset Pribadi. Background dengan gambar perkotaan dengan model background dibuat secara puzzle. Aset Pribadi. Implementasi metode gamifikasi..., William Cendana Putra, FTI UMN, 2019. 29.

Gambar. Tabel 3.1 Daftar Aset (Lanjutan) Penjelasan Background dengan gambar outer space dengan model background dibuat secara puzzle.. Sumber Gambar. Aset Pribadi. Background dengan gambar earth dengan model background dibuat secara puzzle. Aset Pribadi. Icon untuk tab bar home Freeepik www.flaticon.com Icon untuk achievement. tab. bar Freeepik www.flaticon.com. Icon untuk tab bar shop Freeepik www.flaticon.com Icon untuk tab bar profile Freeepik www.flaticon.com Icon thumbnail add photo pada Shop Page dan Freeepik leaderboard pada www.flaticon.com Leaderboard Page Icon thumbnail change image pada Profile Page Freeepik www.flaticon.com. Implementasi metode gamifikasi..., William Cendana Putra, FTI UMN, 2019. 30.

Gambar. Tabel 3.1 Daftar Aset (Lanjutan) Penjelasan Icon untuk button challange. Sumber Gambar Freeepik www.flaticon.com. Icon untuk button history Freeepik www.flaticon.com Icon untuk leaderboard. button. Icon untuk button edit pada Profile Page. Icon untuk button save pada Profile Page. Icon untuk button logout pada Profile Page. Icon untuk menunjukkan status pada leaderboard Icon untuk menunjukkan total steps pada leaderboard. Freeepik www.flaticon.com. Freeepik www.flaticon.com. Freeepik www.flaticon.com. Freeepik www.flaticon.com Freeepik www.flaticon.com Freeepik www.flaticon.com. Icon untuk button close sebuah modal update Freeepik password www.flaticon.com Logo Aplikasi Aset Pribadi. Implementasi metode gamifikasi..., William Cendana Putra, FTI UMN, 2019. 31.

3.5. Perancangan Flowchart Perancangan flowchart untuk memperlihatkan alur kerja dari aplikasi, yang. merupakan dasar dari pemrograman aplikasi yang dibuat.. Gambar 3.2 Flowchart Utama. Implementasi metode gamifikasi..., William Cendana Putra, FTI UMN, 2019. 32.

Gambar 3.2 merupakan Flowchart Utama atau flowchart dari gambaran umum aplikasi yang dibuat. Saat aplikasi dimulai, maka aplikasi akan langsung menuju halaman login atau register jika pengguna sebelumnya belum melakukan login. Jika pengguna pernah melakukan login sebelumnya, maka aplikasi langsung akan menuju ke Today Page atau halaman awal dari aplikasi. Pengguna akan menemukan empat macam tab bar yang memiliki fungsi yang berbeda pada setiap tab bar. Tab bar pertama berisikan Today Page yang menampilkan jumlah langkah kaki yang telah dicapai pada hari tersebut, dan terdapat icon untuk melihat history pengguna selama menggunakan aplikasi dan icon leaderboard yang berfungsi untuk menampilkan tabel yang berisikan 10 pengguna aplikasi dengan level tertinggi. Tab bar kedua adalah Achievements Page yang merupakan halaman untuk menampilkan berbagai macam achievements yang tersedia di dalam aplikasi. Tab bar ketiga adalah Shop Page yang merupakan halaman untuk melakukan pembelian item dengan menggunakan point yang dimiliki oleh pengguna. Pada tab bar keempat, disediakan halaman profile dimana halaman tersebut menampilkan data dari pengguna yang dapat diubah. Ketika pengguna membuka aplikasi untuk pertama kali, maka pengguna akan langsung diarahkan ke halaman login. Pengguna harus mengisi alamat email dan password yang telah disediakan. Jika pengguna belum mempunyai akun pada aplikasi, maka harus membuat akun terlebih dahulu dengan cara melakukan registrasi pada halaman registrasi. Setelah mengisi alamat email dan password dan menentukan apakah menggunakan fitur “Remember Me?”, pengguna harus menekan tombol Login untuk melakukan login. Fitur “Remember Me?” yang berfungsi menyimpan alamat. Implementasi metode gamifikasi..., William Cendana Putra, FTI UMN, 2019. 33.

email dan password yang digunakan pada saat login. Aplikasi akan mengirimkan alamat email dan password yang dimasukkan oleh pengguna ke database untuk dicompare. Jika email dan password yang dimasukkan oleh pengguna benar, maka aplikasi akan ke halaman selanjutnya. Sedangkan jika email atau password yang dimasukkan salah, maka akan muncul pemberitahuan jika email atau password yang dimasukkan salah, dan pengguna harus mengoreksi email atau password yang dimasukkan. Alur penggunaan halaman login direpresentasikan pada Gambar 3.3.. Gambar 3.3 Flowchart Login Page. Implementasi metode gamifikasi..., William Cendana Putra, FTI UMN, 2019. 34.

Gambar 3.4 Flowchart Register Page Gambar 3.4 adalah flowchart dari Register Page. Register Page adalah halaman yang digunakan untuk melakukan registrasi akun ketika pengguna belum memiliki akun pada aplikasi. Terdapat data tambahan yang harus diisi oleh pengguna pada Register Page yaitu nama dari pengguna. Pengguna harus menggunakan email unik sehingga tidak sama dengan email yang digunakan oleh pengguna lain. Jika email yang didaftarkan oleh pengguna sudah digunakan oleh pengguna yang lain, maka aplikasi akan memberikan alert bahwa email telah digunakan. Pada registrasi, pengguna juga harus memasukkan password dengan minimal 6 karakter.. Implementasi metode gamifikasi..., William Cendana Putra, FTI UMN, 2019. 35.

Setelah pengguna telah berhasil melakukan login atau register, maka pengguna akan menuju ke halaman berikutnya yaitu Today Page. Flowchart Today Page direpresentasikan pada Gambar 3.5.. Gambar 3.5 Flowchart Today Page Today Page adalah halaman pertama yang akan tampil secara otomatis setelah pengguna melakukan login atau register. Today Page menampilkan datadata dari pengguna yang dicapai oleh pengguna hari tersebut seperti jumlah langkah kaki yang telah dicapai oleh pengguna. Data yang ditampilkan akan secara real time, yang diambil langsung dari library HealthKit. Data yang didapat dari library HealthKit akan disimpan ke dalam database. Terdapat tiga buah fitur yang disediakan di dalam Today Page yatu fitur challenges, history, dan leaderboard.. Implementasi metode gamifikasi..., William Cendana Putra, FTI UMN, 2019. 36.

Challenges adalah sebuah fitur yang disediakan untuk menampilkan challenges yang didapatkan oleh pengguna dan jika telah berhasil menyelesaikan challenges yang disediakan, maka pengguna akan mendapakan reward berupa point yang dapat digunakan untuk membeli items pada halaman shop. Leaderboard merupakan fitur yang disediakan untuk dapat meilhat pencapaian yang telah diraih oleh pengguna lain. Pada halaman leaderboard tersedia beberapa informasi pencapaian pengguna seperti total point yang telah didapatkan pengguna selama menggunakan aplikasi, dan status dari pengguna. Pada Today Page juga tersedia fitur history.. Gambar 3.6 Flowchart History Page Gambar 3.6 merupakan Flowchart History Page. History Page disediakan untuk pengguna untuk melihat data pencapaian di hari sebelumnya. Pada History Page terdapat segmentasi yang disediakan untuk melihat history dalam satu hari atau akumulasi selama satu bulan yang telah dicapai oleh pengguna. Pengguna akan disediakan view kalender untuk memilih tanggal secara spesifik dan setelah. Implementasi metode gamifikasi..., William Cendana Putra, FTI UMN, 2019. 37.

memilih tanggal, maka pengguna akan melihat jumlah capaian pada tanggal tersebut. Jika pengguna memilih segementasi yang kedua, maka pengguna akan melihat jumlah akumulasi yang didapat dalam satuan bulan.. Gambar 3.7 Flowchart Achievement Page Gambar 3.7 merupakan Flowchart Achievements Page. Achievements Page adalah halaman yang menampilkan achievements yang dapat diraih oleh pengguna. Achievements akan dibuat dengan menampilkan gambar-gambar piala/piagam. Gambar yang ditampilkan dapat dilihat secara 3D dengan cara meng-klik gambar achievements. Gambar yang dapat dilihat secara 3D merupakan achievements yang telah diraih oleh pengguna, sedangkan achievements yang belum didapatkan oleh pengguna tida dapat dilihat secara 3D.. Implementasi metode gamifikasi..., William Cendana Putra, FTI UMN, 2019. 38.

Gambar 3.8 Flowchart Shop Page Gambar 3.8 merupakan Flowchart Shop Page yang merupakan alur dari penggunaan halaman shop. Pada halaman shop, pengguna dapat melakukan pembelian item yang diinginkan dengan menukarkan point yang dimiliki. Pengguna juga dapat menggunakan item yang berada pada halaman shop ketika item yang ingin digunakan telah dibeli terlebih dahulu. Setiap pembelian yang dilakukan oleh pengguna akan tersimpan di dalam database, dan jika pengguna pada saat penggunaan terakhir menggunakan sebuah item yang telah dibeli, maka ketika pengguna menggunakan aplikasinya kembali secara otomatis item akan langsung digunakan pada aplikasi tanpa harus melakukan pengaturan kembali.. Implementasi metode gamifikasi..., William Cendana Putra, FTI UMN, 2019. 39.

Gambar 3. 9 Flowchart Profile Page Gambar 3.9 adalah Flowchart Profile Page merupakan halaman yang disediakan di dalam aplikasi untuk menampilkan data diri dari pengguna. Data-data yang ditampilkan adalah alamat email full name, gender, birth date, dan total point yang telah didapatkan oleh pengguna. Data full name, gender, birth date dapat diubah sesuai keinginan pengguna, sedangkan untuk alamat email tidak dapat diubah, karena alamat email adalah objek yang unik. Terdapat fitur untuk mengganti password dengan menekan tombol di bawah textfield birth date. Akan muncul sebuah modal yang berisikan textfield new password dan re-new password. Jika pengguna yakin untuk mengganti password, maka pengguna harus memilih tombol save dan semua perubahan akan disimpan ke dalam database. Jika pengguna membatalkan untuk mengganti password, maka harus memilih tombol cancel.. Implementasi metode gamifikasi..., William Cendana Putra, FTI UMN, 2019. 40.

3.6. Perancangan User Interface Perancangan user interface dibuat untuk menjelaskan fungsionalitas pada. setiap user interface dan tata letak komponen yang terdapat di dalam aplikasi. Adapun rancangan user interface pada halaman awal (Login Page) ketika pertama kali pengguna menggunakan aplikasi seperti pada Gambar 3.10.. Gambar 3.10 Mockup User Interface Login Page Pada mockup user interfcae Login Page terdapat sebuah tab bar yang berfungsi untuk berpindah page antar Login Page dengan Register Page. Di bawah tab bar, terdapat dua buah textfield, yaitu textfield Email dan textfield Password. Pada Login Page juga tersedia fitur “Remember Me?” yang berfungsi untuk. Implementasi metode gamifikasi..., William Cendana Putra, FTI UMN, 2019. 41.

menyimpan email dan password yang digunakan pada saat login, sehingga jika suatu saat pengguna logout dari aplikasi, maka textfield Email dan Password yang terdapat pada Login Page akan secara otomatis terisi dengan email dan password yang digunakan untuk login pada terakhir kali jika pengguna men-checklist fitur “Remember Me?”.. Gambar 3.11 Mockup User Interface Register Page. Pada Register Page terdapat tab bar yang sama dengan tab bar yang berada pada Login Page yang memiliki fungsi untuk berpindah halaman antara halaman login dan halaman register. Pada halaman register terdapat tiga buah textfield, yaitu textfield Email, textfield Password, dan textfield Re-type Password dan sebuah. Implementasi metode gamifikasi..., William Cendana Putra, FTI UMN, 2019. 42.

button Register yang berfungsi untuk melakukan registrasi email dan password ke database. Mockup user interface Register Page direpresentasikan pada Gambar 3.11.. Gambar 3.12 Mockup User Interface Today Page Gambar 3.12 adalah mockup iser interface Today Page. Today Page adalah halaman utama dari aplikasi. Today Page juga merupakan halaman pertama yang akan muncul ketika pengguna telah melakukan login atau register sebelumnya. Today Page berisi informasi mengenai jumlah langkah kaki, jumlah jarak, serta jumlah ketinggian lantai yang telah diraih oleh pengguna pada hari tersebut. Terdapat sebuah ring besar pada halaman today, yang menunjukkan progress dari. Implementasi metode gamifikasi..., William Cendana Putra, FTI UMN, 2019. 43.

jumlah langkah yang telah dicapai oleh pengguna pada hari tersebut. Warna pada ring akan terisi penuh jika jumlah langkah kaki yang dicapai oleh pengguna telah mencapai 10.000 langkah. Di samping kanan dari ring progress, terdapat tiga buah icon yang memiliki fungsinya masing-maing. Icon pertama berfungsi untuk melihat challenges yang dapat dikerjakan oleh pengguna, icon kedua untuk melihat history dan icon ketiga berfungsi untuk melihat leaderboard. Di bawah ring progress, terdapat informasi mengenai jumlah langkah kaki yang telah dicapai (steps), jarak yang telah ditempuh (distance), dan jumlah ketinggian lantai yang dicapai (flight climbed). Informasi yang ditampilkan dari library akan ter-update secara real time.. Gambar 3.13 Mockup User Interface Kalender History. Implementasi metode gamifikasi..., William Cendana Putra, FTI UMN, 2019. 44.

Gambar 3.13 merupakan tampilan mockup user interface dari History Page yang menampilkan sebuah kalender yang digunakan untuk memilih tanggal spesifik untuk melihat history pada tanggal yang dipilih. Jika tanggal yang dipilih lebih awal dari tanggal pendaftaran pengguna atau lebih besar dari tanggal hari ini dikurangi satu hari, maka akan diberikan alert untuk memperingati bahwa data tidak tersedia atau history belum selesai untuk tanggal hari ini dan atau hari selanjutnya.. Gambar 3.14 Mockup User Interface History Page. Implementasi metode gamifikasi..., William Cendana Putra, FTI UMN, 2019. 45.

Gambar 3.14 merupakan mockup user interface History Page. History Page merupakan halaman yang disediakan untuk melihat riwayat informasi mengenai jumlah langkah kaki, jarak yang ditempuh dan ketinggian yang dicapai dalam satu hari. Pengguna dapat melihat riwayat informasi dengan tanggal yang diinginkan dengan cara menekan pada bagian bagian tanggal, maka akan keluar drop down tanggal yang diinginkan. Pada History Page terdapat button X untuk keluar dari History Page dan kembali ke Today Page.. Gambar 3.15 Mockup User Interface Akumulasi Data Setiap Bulan. Implementasi metode gamifikasi..., William Cendana Putra, FTI UMN, 2019. 46.

Gambar 3.15 merupakan tampilan mockup user interface dari Akumulasi Data Setiap Bulan. Halaman ini menampilkan jumlah akumulasi data pengguna pada setiap per satu bulan. Data yang ditampilkan adalah jumlah rata-rata dari total step dari pengguna, jumlah rata-rata dari total distance dari pengguna, dan jumlah rata-rata dari total flight climbed dari pengguna.. Gambar 3.16 Mockup User Interface Challenges Page Gambar 3.16 adalah mockup user interface Challenges Page. Pada halaman challenges, pengguna dapat melihat, challenges yang dapat dikerjakan dan serta progress dari challenges yang sedang dikerjakan melalui progress bar. Terdapat info mengenai jumlah point yang akan didapatkan oleh pengguna jika perngguna. Implementasi metode gamifikasi..., William Cendana Putra, FTI UMN, 2019. 47.

telah berhasil menyelesaikan challenges tersebut pada bagian bawah kanan dari progress bar setiap challenges. Gambar 3.17 Mockup User Interface Leaderboard Page Gambar 3.17 merupakan tampilan mockup user interface Leaderboard Page. Pada Leaderboard Page pengguna dapat melihat daftar peringkat dari pengguna yang menggunakan aplikasi. Peringkat akan ditentukan dari perolehan total points yang paling banyak. Jika terjadi kesamaan antara total points yang diperoleh, maka peringkat akan ditentukan dari status yang dimiliki oleh pengguna. Leaderboard hanya akan menampilkan sepuluh pengguna yang memiliki peringkat paling tinggi.. Implementasi metode gamifikasi..., William Cendana Putra, FTI UMN, 2019. 48.

Pada Leaderboard Page terdapat button “Close” untuk keluar dari History Page dan kembali ke Today Page.. Gambar 3.18 Mockup User Interface Achievements Page Gambar 3.18 merupakan mockup user interface Achievements Page. Pada Achievements Page pengguna akan melihat semua a chievement yang dapat diraih dengan menyelesaikan tantangan yang ada pada setiap achievement. Jika pengguna telah mendapatkan sebuah achievement, maka achievement yang sudah diraih dapat diklik dan pengguna dapat melihat achievement tersebut secara 3D. Pengguna tidak dapat melihat achievement secara 3D jika achievement tersebut belum didapatkan.. Implementasi metode gamifikasi..., William Cendana Putra, FTI UMN, 2019. 49.

Achievement yang sudah didapatkan oleh pengguna dapat dilihat secara 3D pada Detail Achievement Page. Detail Achievement Page menampilkan objek 3D yang dapat diputar dan di perbesar maupun dikecilkan. Tampilan Detail Achievement Page direpresentasikan pada Gambar 3.19. Shop Page merupakan halaman yang disediakan untuk pengguna membeli item dengan menukarkan point yang telah didapatkan. Terdapat dua buah macam. Gambar 3.19 Mockup User Interface Detail Achiement Page. item yang dapat dibeli oleh pengguna. Kedua item yang dibeli untuk mengganti background dari halaman utama aplikasi tetapi dengan perubahan yang berbeda. Model background yang pertama adalah model yang meruba background halaman. Implementasi metode gamifikasi..., William Cendana Putra, FTI UMN, 2019. 50.

utama aplikasi secara puzzle. Puzzle yang dimaksud adalah pengguna akan membeli beberapa kali di dalam satu background untuk membuat gambar background yang dibeli tampak utuh. Jika pengguna telah membeli satu buah potongan puzzle yang terdapat di dalam satu background, pengguna sudah dapat menggunakan background tersebut. Model background yang kedua adalah memungkinkan pengguna untuk mengunggah foto dari device yang digunakan, baik menunggah dari library device maupun hasil dari kamera langsung. Tampilan mockup user interface Shop Page direpresentasikan pada Gambar 3.20.. Gambar 3.20 Mockup User Interface Shop Page. Implementasi metode gamifikasi..., William Cendana Putra, FTI UMN, 2019. 51.

Gambar 3.21 Mockup User Interface Deskripsi Shop Page. Gambar 3.21 adalah tampilan mockup user interface dari Deskripsi Shop Page. Deskripsi Shop page merupakan halaman yang menampilkan deskripsi dari gambar background yang ditampilkan pada Shop Page. Pengguna dapat membeli potongan puzzle pada halaman ini, dan jika pengguna telah membeli semua potongan puzzle yang terdapat di dalam satu gambar background, maka tombol buy akan dibuat menjadi disable dan terdapat alert yang memberi informasi bahwa pengguna telah membeli semua potongan puzzle pada background tersebut.. Implementasi metode gamifikasi..., William Cendana Putra, FTI UMN, 2019. 52.

Gambar 3.22 Mockup User Interface Add Image Page Gambar 3.22 merupakan tampilan mockup user interface dari Add Image Page. Tampilan ini merupakan tampilan ketika pengguna memilih baris bagian paling bawah dari Shop Page yang digunakan untuk menambahkan foto atau gambar dari device pengguna yang akan digunakan sebagai background pada aplikasi. Sebelum menuju ke halaman ini, aplikasi akan mengecek apakah point yang dimiliki pengguna cukup untuk melakukan penambahan foto. Pengguna akan memilih foto yang akan diunggah ke database dengan cara mengambil langsung dari hasil kamera device maupun dari gallery device. Setelah memilih foto, pengguna harus menambahkan title dari foto yang akan diunggah, dan jika. Implementasi metode gamifikasi..., William Cendana Putra, FTI UMN, 2019. 53.

pengguna yakin mengunggah foto yang telah dipilih, maka pengguna harus menekan tombol pada bagian kiri atas untuk mengunggah foto ke database.. Gambar 3.23 Mockup User Interface with Half Puzzle Background Gambar 3.23 merupakan mockup user interface dari Today Page yang menggunakan background dengan model puzzle. Gambar yang digunakan merupakan gambar yang telah dibeli dan dipilih oleh pengguna untuk digunakan pada halaman shop. Gambar akan dibuat menjadi beberapa potongan, sehingga jika pengguna ingin melihat gambar secara utuh, maka pengguna harus membeli setiap potongan dari gambar. Potongam gambar yang akan didapatkan oleh pengguna. Implementasi metode gamifikasi..., William Cendana Putra, FTI UMN, 2019. 54.

adalah potongan gambar secara acak. Jika pengguna telah membeli semua potongan gambar secara keseluruhan maka akan tampak seperti Gambar 3.24.. Gambar 3.24 Mockup User Interface with Full Puzzle Background. Pada tab bar keempat pada aplikasi, terdapat fitur untuk menampilkan informasi dari pengguna seperti email yang digunakan untuk mendaftar pada aplikasi, nama pengguna, dan jenis kelamin. Halaman yang menampilkan informasi pengguna serta pengguna dapat mengganti informasi dirinya merupakan halaman profile.. Implementasi metode gamifikasi..., William Cendana Putra, FTI UMN, 2019. 55.

Gambar 3.25 Mockup User Interface Profile Page. Gambar 3.25 adalah mockup user interface Profile Page. Pada Profile Page terdapat informasi mengenai data pribadi dari pengguna yaitu email, full name, birth date, dan sex. Pada bagian kiri atas dari halaman profile, terdapat sebuah image view yang digunakan untuk mengganti profile picture, terdapat juga informasi mengenai point yang dimiliki oleh pengguna pada sisi sebelah kanan profile view dan juga tanggal pengguna mendaftar untuk menggunakan aplikasi. Terdapat button edit yang berfungsi untuk mengaktifkan fitur supaya pengguna dapat mengganti data pribadi pada textfield yang tersedia. Data pribadi yang dapat diganti meliputi full name, birth date, dan sex, sedangkan untuk email tidak dapat. Implementasi metode gamifikasi..., William Cendana Putra, FTI UMN, 2019. 56.

diganti karena setiap email hanya bisa digunakan satu kali untuk mendaftar. Pada saat mode edit, maka button Edit akan berubah menjadi button Save yang digunakan untuk menyimpan perubahan pada data pribadi pengguna. Di bawah textfield Sex, terdapat button Change Password yang berfungsi untuk mengganti password dari pengguna. Akan muncul pop up untuk mengisi password baru yang diinginkan, dan setelah mengisi password baru yang diinginkan, maka pengguna harus menekan button Save untuk mengganti password, tetapi jika pengguna ingin membatalkan untuk mengganti password, maka pengguna harus menekan button Cancel. Tombol untuk mengganti password akan baru akan ketika pengguna di dalam mode edit dengan menekan tombol edit. Pada bagian atas kanan halaman profile terdapat button Logout yang berfungsi untuk logout atau keluar dengan akun yang digunakan dari aplikasi.. Implementasi metode gamifikasi..., William Cendana Putra, FTI UMN, 2019. 57.