Perancangan Tampilan Perancangan Aplikasi Pengajaran Berbantu Komputer Untuk Mempelajari Bahasa Jepang

3.2 Perancangan Tampilan

Rancangan tampilan layar menunjukkan interface antarmuka dari program aplikasi perangkat ajar ini. Perancangan tampilan layar untuk program aplikasi ini adalah sebagai berikut: 1. Menu Utama Menu utama merupakan modul yang berisi menu-menu yang ada pada program aplikasi perangkat ajar ini. Menu yang terdapat pada menu utama berupa tombol yang dapat dipilih. Rancangan tampilan menu utama dapat dilihat pada Gambar 3.17. Gambar 3.17 Rancangan tampilan menu utama 2. Menu pengenalan huruf Jepang Menu pengenalan huruf Jepang terdiri dari dua bagian, yaitu mengenal huruf hiragana, dan mengenal huruf katakana yang ditampilkan dalam bentuk tombol. Rancangan tampilan menu pengenalan huruf Jepang dapat dilihat pada Gambar 3.18. Universitas Sumatera utara Gambar 3.18 Rancangan tampilan menu pengenalah huruf Jepang Rancangan tampilan di dalam submenu huruf hiragana sama dengan rancangan tampilan di dalam submenu huruf katakana. Pada halaman pertama bagian dalam submenu huruf hiragana dan katakana, terdapat kata pengantar yang akan mempermudah user dalam mempelajari huruf-huruf tersebut. Rancangan tampilan halaman pertama dalam submenu huruf hiragana ataupun huruf katakana dapat dilihat pada Gambar 3.19. Gambar 3.19 Rancangan tampilan halaman pertama pada submenu Apabila user ingin melanjutkan pelajaran, maka user dapat maju ke halaman selanjutnya yang berisi daftar seluruh huruf hiragana ataupun katakana yang Universitas Sumatera utara kemudian dapat di-klik dan akan menampilkan cara penulisan dari karakter huruf yang dipilih oleh user. Rancangan tampilan halaman kedua dari submenu huruf hiragana maupun huruf katakana, dapat dilihat pada Gambar 3.20. Rancangan tampilan halaman cara penulisan karakter huruf dapat dilihat pada Gambar 3.21. Gambar 3.20 Rancangan tampilan daftar huruf hiragana maupun katakana Gambar 3.21 Rancangan tampilan cara penulisan huruf hiragana maupun katakana 3. Menu Percakapan sederhana Menu percakapan sederhana menyediakan beberapa macam pilihan, yaitu: Salam perkenalan, di kantor pos, di rumah makan, menanyakan arah, dan percakapan telepon. Menu ini disajikan dalam bentuk tulisan yang dapat di-klik atau yang sering Universitas Sumatera utara disebut dengan link. Rancangan tampilan Menu percakapan sederhana dapat dilihat pada Gambar 3.22. Gambar 3.22 Rancangan tampilan menu percakapan sederhana Apabila salah satu dari submenu tersebut di atas dipilih, maka user akan masuk ke dalam suatu halaman yang berisi sebuah percakapan sesuai dengan tema yang dipilih. Kata-kata dari percakapan tersebut dapat di-roll over, akan mengeluarkan keterangan yang muncul secara pop up dan apabila kata-kata tersebut di-klik, maka akan terdengar cara pelafalan yang baik dan benar dari kata tersebut. Rancangan tampilan halaman percakapan ini dapat dilihat pada Gambar 3.23. Gambar 3.23 Rancangan tampilan halaman percakapan Universitas Sumatera utara 4. Menu Kosa kata Dalam menu kosa kata, terdapat beberapa pilihan kelompok kata yang disajikan dalam bentuk tombol yang dapat di-klik. Rancangan tampilan menu kosa kata dapat dilihat pada Gambar 3.24. Gambar 3.24 Rancangan tampilan menu kosa kata Apabila salah satu dari tombol pilihan itu di-klik, maka user akan masuk ke dalam halaman daftar kosa kata sesuai dengan kategori pilihan user. Daftar kata- kata tersebut apabila di-roll over akan menampilkan keterangan pop-up seperti Gambar 3.25. Apabila di-klik, maka akan terdengar cara pelafalan dari kata tersebut. Universitas Sumatera utara Gambar 3.25 Rancangan tampilan bagian dalam menu kosa kata 5. Menu Latihan Menu Latihan mempunyai empat macam pilihan, yaitu: Mengenal huruf hiragana, Mengenal huruf katakana, Melatih kosakata, dan Melatih pendengaran. Rancangan tampilan pada menu latihan dapat dilihat pada Gambar 3.26. Gambar 3.26 Rancangan Tampilan Menu Latihan Agar tidak membosankan, gambar pada latar halaman latihan dibuat berbeda. Latihan dalam halaman ini berupa latihan pilihan berganda. Rancangan tampilan soal latihan dapat dilihat pada Gambar 3.27. Universitas Sumatera utara Gambar 3.27 Rancangan Tampilan Soal Latihan Rancangan tampilan untuk pilihan melatih kosakata berbeda, karena dalam latihan ini, user memilih jawaban berdasarkan gambar yang ditampilkan dalam aplikasi. Rancangan tampilan melatih kosakata dapat dilihat pada Gambar 3.28. Gambar 3.28 Rancangan Tampilan Melatih Kosakata Setelah user menyelesaikan latihan, maka akan muncul tampilan berupa nilaiscore dari latihan yang telah dibuat oleh user. Rancangan tampilan nilai dapat dilihat pada Gambar 3.29. Gambar 3.29 Rancangan tampilan nilai Universitas Sumatera utara

3.3 Perancangan Aplikasi