Desain antarmuka dibuat untuk menggambarkan bagaimana tampilan aplikasi pada perancangan penelitian ini.
Gambar 3.20 Desain Antarmuka Login
Gambar 3.20 menunjukkan desain antarmuka halaman login. Pada halaman ini, pengguna diminta untuk melakukan login supaya bisa memasuki halaman utama yaitu pengumuman. Pengguna hanya dapat melakukan login dengan email dan password Student UMN.
Gambar 3.21 Desain Antarmuka Tutorial
Setelah pengguna melakukan login, aplikasi akan menunjukkan Tutorial seperti pada Gambar 3.21. Pada halaman tutorial, terdapat tombol Next dan Prev yang berfungsi untuk menunjukkan penjelasan berikutnya dari gambar karakter pada aplikasi. Pengguna juga bisa melewati Tutorial dengan menekan tombol Skip.
Jika pengguna tidak memilih tombol Skip, Tutorial akan muncul pada setiap menu, kecuali pada menu pengaturan. Tutorial hanya muncul satu kali pada setiap menu.
Gambar 3.22 Desain Antarmuka Detail Poster
Dari hasil aplikasi yang sudah dibuat oleh Audy, et al. (2016), pada penelitian ini terdapat fungsi tambahan di halaman detail poster dengan kategori seminar untuk melakukan pendaftaran seminar. Gambar 3.22 menunjukkan desain antarmuka halaman detail poster. Ketika poster yang dibuka adalah seminar, akan
menekan tombol Ikuti, aplikasi akan menampilkan tampilan seperti pada Gambar 3.23.
Gambar 3.23 Desain Antarmuka Misi
Gambar 3.23 menunjukkan desain antarmuka halmana misi. Pada halaman ini, akan ditampilkan apa saja seminar yang sudah didaftarkan oleh pengguna.
Setiap seminar akan berisi informasi mengenai judul seminar, deskripsi seminar, dan berapa lama lagi waktu seminar akan dimulai. Ketika seminar tersebut diklik, akan ditampilkan halaman detail misi seperti pada Gambar 3.24.
(a) (b)
(c) (d)
(e)
Gambar 3.24 Desain Antarmuka Detail Misi
Pada Gambar 3.24 bagian (a), akan ditampilkan daftar misi yang harus dikerjakan oleh pengguna untuk mendapatkan poin dari seminar yang diikuti. Di
Ketika seluruh misi sudah diselesaikan, tombol tersebut akan berfungsi untuk menyelesaikan misi, sedangkan jika ada misi yang belum diselesaikan, tombol tersebut akan berfungsi untuk membatalkan misi.
Gambar 3.24 bagian (b) menunjukkan tampilan untuk tipe misi pendaftaran dan absensi pulang. Misi pendaftaran dan absensi pulang dapat dilakukan dengan tap pada NFC atau scan QR-Code. Gambar 3.24 bagian (c) menunjukkan tampilan untuk tipe misi menjawab pertanyaan. Pada kotak dialog tersebut akan ditampilkan soal dan pilihan jawaban dari misi menjawab pertanyaan. Gambar 3.24 bagian (d) menunjukkan tampilan untuk tipe misi membuat pertanyaan. Pada kotak dialog tersebut, terdapat kolom untuk memasukkan pertanyaan yang ingin diajukan. Setiap melaksanakan misi, aplikasi akan menampilkan gambar karakter seperti pada Gambar 3.24 bagian (e).
Gambar 3.25 Desain Antarmuka Data Pengguna
Gambar 3.25 menunjukkan desain antarmuka dari halaman data pengguna.
Pada halaman ini akan ditampilkan data NIM, nama, program studi, angkatan, email, perkembangan serta poin dari seminar yang sudah diikuti, dan peringkat dari pengguna.
(a) (b)
(c)
Gambar 3.26 Desain Antarmuka Daftar Teman
Gambar 3.26 bagian (a) menunjukkan desain antarmuka halaman daftar teman. Pada halaman ini, pengguna dapat menerima tawaran pertemanan, menolak tawaran pertemanan, melihat profil teman, menghapus pertemanan, membatalkan tawaran pertemanan, atau menambah teman. Gambar 3.26 bagian (b) menunjukkan desain antarmuka halaman profil teman. Pada halaman ini, pengguna dapat melihat data NIM, nama, program studi, angkatan, email, perkembangan poin dari seminar yang sudah diikuti, dan peringkat pengguna tersebut. Gambar 3.26 bagian (c) menunjukkan desain antarmuka halaman menambah teman. Pengguna dapat mencari teman yang ingin ditambahkan dengan mengetik NIM atau nama teman yang dicari pada kolom input pencarian.
Gambar 3.27 Desain Antarmuka Peringkat
Gambar 3.27 menunjukkan desain antarmuka halaman peringkat. Pada halaman ini terdapat dua bagian yaitu peringkat secara keseluruhan dan peringkat pertemanan. Pada peringkat secara keseluruhan ditunjukkan peringkat berdasarkan seluruh pengguna yang sudah menyelesaikan seminar, sedangkan peringkat pertemanan menunjukkan peringkat berdasarkan teman yang sudah ditambahkan pada menu daftar teman. Pada halaman ini, ditampilkan data nomor peringkat, nama, NIM, program studi, angkatan, dan poin total yang didapatkan dari masing-masing pengguna. Periode dan jumlah digunakan untuk menyaring data peringkat berdasarkan periode dan jumlah data yang ditampilkan.
Gambar 3.28 Desain Antarmuka Pengaturan
Gambar 3.28 menunjukkan desain antarmuka halaman pengaturan. Pada halaman ini, pengguna dapat mengganti notifikasi pertemanan dan gamifikasi dengan menekan tombol on atau off. Ketika tombol on, aplikasi akan menerima
notifikasi apabila terdapat informasi yang dikirimkan melalui FCM, sedangkan ketika tombol off, aplikasi tidak akan menerima notifikasi.
Gambar 3.29 Desain Antarmuka Pengaturan Seminar
Gambar 3.29 menunjukkan desain antarmuka halaman pengaturan seminar.
Pada halaman ini, admin dapat menambah data seminar, mengubah data seminar, menghapus data seminar, mem-publish seminar, melihat partisipan seminar, dan membuka detail misi seminar.
Gambar 3.30 Desain Antarmuka Pengaturan Misi
Gambar 3.30 menunjukkan desain antarmuka halaman pengaturan misi.
Pada halaman ini, admin bisa menambah data misi, mengubah data misi, menghapus data misi, dan melihat partisipan yang sudah mengikuti misi. Khusus misi menjawab pertanyaan, terdapat tombol untuk mengelola pertanyaan pada misi menjawab pertanyaan.
Gambar 3.31 Desain Antarmuka Partisipan Misi Pendaftaran
Gambar 3.31 menunjukkan desain antarmuka halaman partisipan misi pendaftaran. Pada halaman ini, admin dapat melihat partisipan yang melakukan pendaftaran pada aplikasi beserta jam mendaftarnya.
Gambar 3.32 Desain Antarmuka Partisipan Misi Menjawab Pertanyaan Gambar 3.32 menunjukkan desain antarmuka halaman partisipan misi pendaftaran. Pada halaman ini, admin dapat melihat partisipan yang menjawab pertanyaan pada aplikasi beserta jawabannya.
Gambar 3.33 Desain Antarmuka Pengaturan Misi Menjawab Pertanyaan Gambar 3.33 menunjukkan desain antarmuka halaman pengaturan misi menjawab pertanyaan. Pada halaman ini, admin dapat menambah, mengubah, atau menghapus pertanyaan pada misi menjawab pertanyaan.
Gambar 3.34 Desain Antarmuka Partisipan Misi Membuat Pertanyaan Gambar 3.34 menunjukkan desain antarmuka halaman partisipan misi membuat pertanyaan. Pada halaman ini, admin dapat melihat partisipan yang sudah memasukkan pertanyaan, kemudian memilih pertanyaan yang terbaik. Pertanyaan
yang dipilih bisa lebih dari satu, dan dipilih dengan mencentang kotak Checkbox lalu menekan tombol Proses.
Gambar 3.35 Desain Antarmuka Partisipan Misi Absensi Pulang
Gambar 3.35 menunjukkan desain antarmuka halaman partisipan misi absensi pulang. Pada halaman ini, admin dapat melihat partisipan yang sudah melakukan absensi pulang, kemudian memberikan izin kepada partisipan untuk menyelesaikan seminar lebih awal dengan poin yang maksimum pada misi absensi pulang. Untuk memberikan poin tesrebut, admin harus mencentang partisipan yang sudah selesai kemudian menekan tombol Proses.
Gambar 3.36 Desain Antarmuka Partisipan Seminar
Gambar 3.36 menunjukkan desain antarmuka halaman partisipan seminar.
Pada halaman ini, admin dapat melihat data partisipan yang sudah mendaftar seminar. Admin dapat mencetak data partisipan ke dalam format Microsoft Excel dengan menekan tombol Cetak. Kotak Checkbox memiliki property read only dan berfungsi untuk memberikan informasi apakah partisipan sudah menyelesaikan seminar atau belum.
Gambar 3.37 menunjukkan desain antarmuka halaman pengaturan peringkat. Pada halaman ini, admin dapat melihat peringkat partisipan berdasarkan periode. Selain itu, admin dapat menentukan pengguna yang mendapatkan hadiah tambahan per periode dengan cara mencentang kotak Checkbox, kemudian menekan tombol Proses.
Gambar 3.38 Desain Antarmuka Pengaturan Periode
Gambar 3.38 menunjukkan desain antarmuka halaman pengaturan periode.
Pada halaman ini, admin dapat menambah, mengubah, atau menghapus data periode seminar.