Perancangan Tampilan Perancangan Pengajaran Berbantuan Komputer Mata Pelajaran Bahasa Inggris Studi Kasus Tenses

3.5 Perancangan Tampilan

3.5.1 Tampilan Intro

Tampilan intro adalah tampilan awal sebelum masuk ke menu utama dari aplikasi ini. Tampilan intro pada aplikasi ini berupa teks yang muncul dalam keadaan berputar dari ukuran kecil ke ukuran besar hingga berhenti kemudian akan masuk ke menu utama program. PENGAJARAN BERBANTUAN KOMPUTER TENSES Gambar 3.32 Rancangan Tampilan Intro Universitas Sumatera Utara

3.5.2 Menu Home

Menu home merupakan modul yang berisi menu-menu yang ada pada program aplikasi perangkat ajar ini. Menu yang terdapat pada menu home berupa tombol yang dapat dipilih. Rancangan tampilan menu utama dapat dilihat pada Gambar 3.33 di bawah ini. 1 2 1. Isi menu home 2. Tombol menu home 3. Tombol menu materi 4. Tombol menu latihan 5. Tombol menu tentang saya 6. Gambar buku 7. Tombol navigasi next 8. Tombol close 8 7 3 4 5 6 Gambar 3.33 Rancangan Tampilan Menu Home Universitas Sumatera Utara

3.5.3 Menu Materi

Tampilan menu materi juga dirancang tidak jauh beda dengan menu home hanya saja di menu materi tombol navigasi next dan back sudah ditambah di bagian sebelah bawahnya. Rancangan tampilan menu materi dapat dilihat pada Gambar 3.34 – 3.38 di bawah ini. 1 2 1. Gambar 2. Tombol menu present tense 3. Tombol menu past tense 4. Tombol menu future tense 5. Tombol menu past future 6. Gambar Pensil 7. Gambar Buku 8. Tombol kembali ke home 9. Tombol sound 10. Tombol close 10 9 8 3 4 5 7 6 Gambar 3.34 Rancangan Tampilan Pilihan Menu Materi Universitas Sumatera Utara 1 2 1. Halaman isi simple present tense 2. Tombol menu simple present tense 3. Tombol menu present continuous tense 4. Tombol menu present perfect tense 5. Tombol menu present perfect continuous tense 6. Gambar pensil 7. Tombol kembali ke pilihan materi 8. Tombol navigasi next 9. Tombol navigasi back 10. Tombol sound 11. Tombol close 11 9 8 3 4 5 10 6 7 Gambar 3.35 Rancangan Tampilan Isi Present Tense 1 2 1. Halaman isi past tense 2. Tombol menu simple past tense 3. Tombol menu past continuous tense 4. Tombol menu past perfect tense 5. Tombol menu past perfect continuous tense 6. Gambar pensil 7. Tombol kembali ke pilihan materi 8. Tombol navigasi next 9. Tombol navigasi back 10. Tombol sound 11. Tombol close 11 9 8 3 4 5 10 7 6 Gambar 3.36 Rancangan Tampilan Isi Past Tense Universitas Sumatera Utara 1 2 1. Halaman isi simple future tense 2. Tombol menu simple future tense 3. Tombol menu future continuous tense 4. Tombol menu future perfect tense 5. Tombol menu future perfect continuous tense 6. Gambar pensil 7. Tombol kembali ke pilihan materi 8. Tombol navigasi next 9. Tombol navigasi back 10. Tombol sound 11. Tombol close 11 9 8 3 4 5 10 6 7 Gambar 3.37 Rancangan Tampilan Isi Future Tense Universitas Sumatera Utara 1 2 1. Halaman isi simple past future tense 2. Tombol menu simple past future tense 3. Tombol menu past future continuous tense 4. Tombol menu past future perfect tense 5. Tombol menu past future perfect continuous tense 6. Gambar pensil 7. Tombol kembali ke pilihan materi 8. Tombol navigasi next 9. Tombol navigasi back 10. Tombol sound 11. Tombol close 11 9 8 3 4 5 10 6 7 Gambar 3.38 Rancangan Tampilan Isi Past Future Tense

3.5.4 Menu Latihan

Tampilan menu latihan 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 tiga bagian menu latihan dapat dilihat pada Gambar 3.39 – 3.41. di bawah ini. Universitas Sumatera Utara 1. Teks 2. Kotak isi teks 3. Tombol kembali ke home 4. Tombol sound 5. Gambar pensil 6. Tombol close 6 4 3 1 2 5 Gambar 3.39 Rancangan Tampilan Awal Mulai Latihan 1. Pertanyaan 2. Pilihan jawaban a 3. Pilihan jawaban b 4. Pilihan jawaban c 5 Pilihan jawaban d 6. Tombol kembali ke home 7. Tombol sound 8. Gambar pensil 9. Tombol close 9 1 2 3 4 5 6 7 8 Universitas Sumatera Utara Gambar 3.40 Rancangan Tampilan Saat Mengerjakan Soal Latihan 1. Hasil jumlah benar 2. Hasil jumlah salah 3. Hasil nilai latihan 4. Pesan hasil latihan 5. Tombol kembali ke home 6. Tombol sound 7. Gambar pensil 8. Tombol close 8 6 5 1 2 3 4 7 Gambar 3.41 Rancangan Tampilan Hasil Latihan

3.5.5 Menu Tentang Saya

Menu tentang saya tidak jauh beda dengan menu home, hanya saja di menu Tentang Saya animasinya sudah dikurangi. Pada kotak isi tersebut akan dimuat profil dari penulis. Rancangan tampilan menu tentang saya dapat dilihat pada Gambar 3.42 di bawah ini. Universitas Sumatera Utara 1 1. Tampilan isi tentang saya 2. Gambar buku 3. Tombol kembali ke home 4. Tombol sound 5. Tombol close 5 4 3 2 Gambar 3.42 Rancangan Tampilan Menu Tentang Saya Universitas Sumatera Utara BAB 4 IMPLEMENTASI SISTEM

4.1 Implementasi