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