3.4 Perancangan Tampilan Antarmuka
Tampilan antarmuka perlu dirancang untuk menggambar kan aplikasi yang akan dibuat dan membantu mempermudah proses pembangunan aplikasi. Rancangan
tampilan aplikasi dapat dilihat dan akan dijelaskan sebagai berikut.
3.4.1 Rancangan Halaman Utama
Tampilan halaman utama aplikasi pembelajaran pemencaran tumbuhan ini bertujuan untuk mempermudah pengguna dalam menggunakan aplikasi melalui menu yang
terlihat pada tampilan halaman utama dan disesain dengan fitur-fitur yang menarik. Secara umum menu utama terbagi menjadi empat bagian yaitu tampilan gambar
animasi, tampilan judul untuk mengetahui judul aplikasi, tampilan menu dan tampilan isi menu. Tampilan menu berisi tombol-tombol navigasi menu beranda, menu
kompetensi, menu materi, menu simulasi, menu tes dan tombol keluar. Selain itu juga terdapat tampilan animasi gambar di sebelah kiri menu aplikasi pada kolom tampilan
gambar berjalan. Rancangan tampilan halaman utama dapat dilihat pada Gambar 3.9.
Gambar 3.9 Rancangan Tampilan Halaman Utama
Universitas Sumatera Utara
Keterangan Gambar 3.9 adalah sebagai berikut: 1.
Untuk menampilkan gambar berjalan 2.
Untuk menampilkan judul aplikasi 3.
Tombol beranda untuk masuk ke menu beranda 4.
Tombol kompetensi untuk masuk ke menu kompetensi 5.
Tombol materi untuk masuk ke menu materi 6.
Tombol simulasi untuk masuk ke menu simulasi 7.
Tombol tes untuk masuk ke menu tes 8.
Tombol keluar untuk keluar dari aplikasi 9.
Untuk menampilkan tampilkan halaman utama aplikasi,
3.4.2 Rancangan Menu Beranda
Menu beranda berisi tampilan video mengenai pengantar materi aplikasi pembembalajaran pemencaran tumbuhan materi secara umum. Rancangan untuk
menu beranda dapa dilihat pada Gambar 3.10.
Gambar 3.10 Rancangan Tampilan Menu Beranda
Universitas Sumatera Utara
3.4.3 Rancangan Menu Kompetensi
Halaman menu kompetensi berisi kompetensi dasar dan standar kompetensi dari materi yang disampaikan pada aplikasi pembelajaran pemencaran tumbuhan.
Rancangan tampilan kompetensi dapat dilihat pada Gambar 3.11
Gambar 3.11 Rancangan Tampilan Menu Kompetensi
Universitas Sumatera Utara
3.4.4 Rancangan Menu Materi
Halaman menu materi berfungsi untuk menampilkan materi materi pelajaran biologi tentang pemencaran tumbuhan. Pada bagian meteri terdapat judul materi, subjudul
materi dan isi materi. Rancangan untuk menu materi dapat dilihat pada Gambar 3.12.
Gambar 3.12 Rancangan Tampilan Menu Materi
Pada menu materi terdapat tombol ke subjudul jika pengguna ingin menuju subjudul yang diinginkan dan tombol menuju ke materi selanjutnya untuk meneruskan
materi pelajaran serta tombol materi sebelumnya yang membantu pengguna untuk memudahkan pengguna jika ingin menggulang kembali materi sebelumnya. Untuk
kembali ke materi awal dapat menggunakan tombol materi pada tombol menu materi. Rancangan untuk tampilan submateri dapat dilihat pada Gambar 3.13.
Universitas Sumatera Utara
Gambar 3.13 Rancangan Tampilan Penyampaian Submateri
Universitas Sumatera Utara
3.4.5 Rancangan Menu Simulasi
Menu simulasi akan menampilkan simulasi contoh dari materi pembelajaran dalam bentuk video. Tampilan menu juga didesain dengan tampilan yang sederhana berupa
layar tampilan dengan tombol play untuk melihat simulasi. Rancangan tampilan menu simulasi dapat dilihat pada Gambar 3.14.
Gambar 3.14 Rancangan Tampilan Menu Simulasi
Universitas Sumatera Utara
3.4.6 Rancangan Menu Tes
Halaman menu tes digunakan untuk mengetahui tingkat pemahaman siswa dalam mempelajari materi yang telah diberikan. Tampilan menu tes terbagi menjadi empat
bagian yaitu bagian pertama memasukkan nama pengguna untuk memulai tes, bagian kedua yaitu tampilan soal-soal tes, bagian ketiga hasil tes yang diperoleh dan bagian
keempat menampilkan jawaban soaal-soal tes serta pembahasaan jawaban. Rancangan tampilan untuk bagian pertama memulai tes dapat dilihat pada Gambar 3.15
Gambar 3.15 Rancangan Tampilan Memulai Tes
Setelah memasukkan nama dan menekan tombol mulai, maka tampilan soal dan pilihan jawaban akan muncul seperti Gambar 3.16.
Universitas Sumatera Utara
Gambar 3.16 Rancangan Tampilan Soal Tes
Pengguna dapat melihat hasil tes setelah selesai mengerjakan semua soal yang diberikan. Tampilan hasil akan menampilkan nama pengguna yang melakukan tes,
jawaban benar, jawaban salah dan total nilai tes. Rancangan tampilan hasil tes terdapat pada Gambar 3.17.
Universitas Sumatera Utara
Gambar 3.17 Rancangan Tampilan Hasil Tes
3.5 Story Board
Kategori