Perancangan Tampilan Perancangan Aplikasi Pengajaran Berbantuan Komputer Mengenai Anatomi Dan Kerusakan Mata Manusia

Gambar 3.5 Diagram level 2 untuk proses Tombol latihan

3.3 Perancangan Tampilan

3.3.1 Menu Utama

Halaman awal dari aplikasi dibuat menu utama yang dilengkapi dengan tombol-tombol menu pilihan. Tombol tersebut terdiri dari menu profil, menu materi, menu contoh soal, menu latihan, dan tombol keluar. Rancangan untuk tampilan utama aplikasi dapat dilihat pada Gambar 3.6. Pilihan_menu nilai nama Jaw aba n S oa l Jaw aba n hasil nama Data_jawaban User Baca nama T.5.1 Periksa jawaban T.5.2 Hitung nilai T.5.3 Universitas Sumatera Utara Gambar 3.6 Rancangan Tampilan Menu Utama

3.3.2 Menu Profil

Selanjutnya tampilan untuk bagian menu profil. Pada tahap ini informasi tentang penulislah yang akan dimuat pada menu profil. Rancangan untuk menu profil dapat dilihat dari Gambar 3.7 PROFIL MATERI CONTOH SOAL LATIHAN KELUAR JUDUL APLIKASI Universitas Sumatera Utara Gambar 3.7 Rancangan Tampilan Menu Profil

3.3.3 Menu Materi

Halaman menu materi ini berfungsi untuk menampilkan isi dari materi pelajaran mengenai Anatomi dan kerusakan mata. Pada bagian kiri terdapat bagian-bagian menu materi. Apabila kursor digerakkan ke salah satu tombol bagian men materi tersebut, maka akan tampil bagian yang akan dibahas dari materi tersebut. Menu materi ini terdiri dari lima pembahasan antara lain Anatomi, kerusakan mata, lapisan retina, sirkulasi retina dan Tes mata. Rancangan untuk menu materi dapat dilihat pada Gambar 3.8. GAMBAR TENTANG PENULIS JUDUL MENU HOME Universitas Sumatera Utara Gambar 3.8 Rancangan Tampilan Menu Materi Setelah dipilih pada bagian materi apa yang ingin dilihat, maka tampilan isi dari materi akan terlihat dalam gambar dengan animasi yang telah disajikan. Rancangan untuk tampilan isi materi dapat dilihat pada Gambar 3.9 Gambar 3.9 Rancangan Tampilan isi Menu Materi 3.3.4 Menu Contoh Soal Pada tampilan menu contoh soal dirancang dengan adanya tombol button yang terdiri dari lima buah pertanyaan, dimana dari pertanyaan tersebut dilengkapi dengan jawaban yang tersedia. Rancangan tampilan menu contoh soal dapat dilihat pada Gambar 3.10 PILIHAN MATERI ANIMASI MATERI ANATOMI KERUSAKAN MATA LAPISAN RETINA SIRKULASI RETINA HOME SEKILAS PEMBAHASAN MATERI Universitas Sumatera Utara Gambar 3.10 Rancangan Tampilan Menu Contoh Soal

3.3.5 Menu Latihan

Pada tampilan menu latihan akan dibedakan menjadi tiga bagian, yakni bagian pertama meminta pengguna untuk mengisikan nama sebelum memulai latihan, bagian kedua menampilkan soal-soal latihan dan bagian terakhir yang menampilkan nilai hasil dari latihan. Rancangan tampilan untuk ke empat bagian menu latihan dapat dilihat pada Gambar 3.11 – 3.13 Gambar 3.11 Rancangan Tampilan mengisi nama untuk melanjutkan latihan 1 2 3 4 5 CONTOH SOAL HOME SOAL DAN JAWABAN ISIKAN NAMA ANDA TIDAK YA Universitas Sumatera Utara Gambar 3.12 Rancangan Tampilan pertanyaan menu latihan Gambar 3.13 Rancangan Tampilan nilai dari menu latihan LATIHAN PERTANYAAN DAN PILIHAN JAWABAN LATIHAN HASIL LATIHAN NILAI BENAR SALAH HOME Universitas Sumatera Utara 3.4 Story Board Story Board adalah suatu bentuk penjelasan tentang susunan materi yang disampaikan pada detik demi detik beserta suara, gambar, dan animasi yang dibutuhkan. Adapun Story Board yang dibuat adalah sebagai berikut: Universitas Sumatera Utara Scene Sequence Board Durasi Naskah 1 2 3 1 1 1 2 00:00:11 00:00:06 00:00:05 00:03:29 Layer menu utama dimana mempunyai 5 button yaitu : profil, materi, cth soal, dan latihan serta keluar. Logo dan text berisi animasi tampilan yang bergerak melingkar berulang-ulang dan dilengkapi dengan musik. Menu profil berisi gambar dan data diri pendesain. Serta button home. Pada gambar terdapat animasi pergerakan sinar dari ujung kiri ke kanan dan dilengkapi dengan musik. Menu materi terdapat 6 button: anatomi, kerusakan, lapisan, sirkulasi, tes mata dan home. Serta gambar animasi yang berubah- ubah dengan gambar beberapa orang yang dijuluki dengan mata terindah dan dilengkapi dengan musik. Layer anatomi dan fungsi dilengkapi dengan button materi yang berfungsi kembali ke menu materi. Layer ini terdapat gambar animasi anatomi mata yang ditunjuk satu persatu dengan suara. Latihan Keluar Profil Materi Cth soal Logo usu Text Profil Gambar Profil Text Home Materi Anatomi Kerusakan lapisan Sirkulasi Tes mata Gambar Animasi Home Anatomi Dan Fungsi Gambar Animasi mata Materi Universitas Sumatera Utara 3 4 5 6 00:01:35 00:01:39 00:00:38 00:00:15 Layer kerusakan mata terdapat button materi yang berfungsi kembali ke menu materi. Layer ini terdapat gambar animasi kerusakan mata antara lain ablasi retina, retina tears, dan buta warna yang ditunjuk satu persatu dengan suara dan musik. Layer lapisan retina terdapat button materi yang berfungsi kembali ke menu materi. Layer ini terdapat gambar animasi lapisan retina yang ditunjuk satu persatu dengan suara dan musik. Layer Sirkulasi retina terdapat button materi yang berfungsi kembali ke menu materi. Layer ini terdapat gambar animasi sirkulasi retina yang ditunjuk satu persatu dengan suara dan musik. Layer Tes mata terdapat button materi yang berfungsi kembali ke menu materi. Serta button cek dan coba lagi yang berfungsi mencek kesalahan dan mencoba lagi. Layer ini terdapat 4 gambar lingkaran yang berisi angka dan tempat pengisian angka tersebut dan terdapat musik yang mengiringinya. Kerusakan Mata Gambar Animasi Kerusakan mata Materi Lapisan Retina Gambar Animasi Lapisan Retina Materi Sirkulasi Retina Gambar Animasi Sirkulasi Retina Materi Tes Mata Materi cek 4 2 8 1 Universitas Sumatera Utara 4 5 1 1 2 3 00:00:17 00:00:05 00:00:16 00:00:03 Layer Contoh soal terdapat 6 button: 1, 2, 3, 4, 5 dan home. Apabila angka pada button dipilih maka akan tampil soal dengan jawabannya. Layer ini juga terdapat musik. Layer latihan terdapat 2 text yang tertera yaitu masukan nama dan lanjutkan. Dimana di bawah dari itu terdapat link untuk menyimpan nama. Layer ini terdapat 2 button: ya dan tidak. Apabila ya, maka sistem akan melanjutkan jika tidak sistem akan kembali ke home. Layer latihan ini terdapat nama dan soal yang berbentuk pilihan berganda. User diminta memilih salah satu dari 4 jawaban. Layer ini juga terdapat musik. Layer latihan ini terdapat hasil latihan, nilai, benar dan salah dari user. Layer ini terdapat juga button home dan coba lagi serta musik, dimana coba lagi berarti mengulang soal dari awal. Gambar 3.14 Story Board 1 Contoh Soal 2 3 4 5 Soal dan Jawaban Home Latihan Input Nama Ya Tidak Masukan Nama Anda Lanjutkan Latihan Nama Peserta Soal 110 Pilihan berganda a. c. b. d. Latihan Hasil Latihan : Nilai : Benar : Salah : Home Coba Lagi Universitas Sumatera Utara BAB 4 IMPLEMENTASI 4.1 Implementasi 4.1.1 Tampilan Menu Utama