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.
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 Gambar 3.10 Mockup User Interface Login Page
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
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 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 Gambar 3.12 Mockup User Interface Today Page
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
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
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
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 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
Gambar 3.16 Mockup User Interface Challenges Page
telah berhasil menyelesaikan challenges tersebut pada bagian bawah kanan dari progress bar setiap challenges
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.
Gambar 3.17 Mockup User Interface Leaderboard Page
Pada Leaderboard Page terdapat button “Close” untuk keluar dari History Page dan kembali ke Today 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.
Gambar 3.18 Mockup User Interface Achievements Page
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
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 Gambar 3.19 Mockup User Interface Detail Achiement Page
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
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.
Gambar 3.21 Mockup User Interface Deskripsi Shop 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
Gambar 3.22 Mockup User Interface Add Image Page
pengguna yakin mengunggah foto yang telah dipilih, maka pengguna harus menekan tombol pada bagian kiri atas untuk mengunggah foto ke database.
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
Gambar 3.23 Mockup User Interface with Half Puzzle Background
adalah potongan gambar secara acak. Jika pengguna telah membeli semua potongan gambar secara keseluruhan maka akan tampak seperti Gambar 3.24.
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.
Gambar 3.24 Mockup User Interface with Full Puzzle Background
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
Gambar 3.25 Mockup User Interface Profile Page
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.