Perancangan Antarmuka User Interface

Belajar Membaca Klik ΍Belajar Membaca΍ Tampilkan Belajar Membaca Menu Evaluasi Pilihan Ganda Klik ΍Pilihan Ganda΍ Tampilkan Pilihan Ganda Klik ΍Menu Utama΍ Tampilkan Menu Utama Klik ΍Menu Evaluasi΍ Tampilkan Menu Evaluasi Menu Utama Gambar 3.11. Diagram Transisi Menu Evaluasi

3.2.2.4. Perancangan Antarmuka User Interface

1. Rancangan Layar Opening Rancangan ini merupakan tampilan awal sebelum masuk ke tampilan Menu Utama. Pada tampilan layar Opening terdapat dua tombol untuk menentukan halaman selanjutnya, yaitu : • Tombol Menu Utama untuk masuk ke halaman Menu Utama. • Tombol keluar untuk keluar dari aplikasi. 63 Judul Aplikasi Animasi Huruf Hijaiyah Tombol Menu Utama Tombol Keluar Gambar Gambar 3.12. Rancangan Tampilan halaman Opening 2. Rancangan Layar Menu Utama Rancangan ini merupakan tampilan halaman Menu Utama dari aplikasi Makharijul Huruf Hijaiyah berbasis Multimedia. Dalam layar Menu Utama ini terdiri dari 6 tombol yaitu : • Tombol Pengantar, untuk masuk ke halaman Pengantar. • Tombol Sifat Huruf Hijaiyah, untuk masuk ke halaman Sifat Huruf Hijaiyah. • Tombol Makharijul Huruf, untuk masuk ke halaman Makharijul Huruf. • Tombol Evaluasi, untuk masuk ke halaman Evaluasi. 64 • Tombol Tentang Penulis, untuk masuk ke halaman Tentang Penulis. • Tombol Keluar, untuk keluar dari program aplikasi. Gambar 3.13. Rancangan Tampilan Menu Utama 3. Rancangan Layar Pengantar Rancangan layar ini berisi materi tentang pengertian dari makharijul huruf, jenis-jenis huruf hijaiyah dan tempat-tempat makharijul huruf. 65 Gambar 3.14. Rancangan Tampilan Menu Pengantar 4. Rancangan Layar Menu Makharijul Huruf Rancangan layar ini berisi tentang pembagian tempat keluar huruf hijaiyah. Di dalam layar ini, terdapat animasi mulut, bibir ,suara huruf hijaiyah apabila tombol huruf hijaiyah tersebut ditekan, dan video yang berfungsi untuk memberikan penjelasan dari masing-masing huruf hijaiyah, rancangan layar ini menggambarkan bagaimana cara mengucapkan huruf hijaiyah yang benar dalam membaca Al- Qur’an. Layar ini terdapat 6 tombol, 5 tombol untuk pembagian makharijul huruf dan 1 tombol untuk kembali ke Menu Utama yaitu : • Tombol Al-Jauf untuk masuk ke halaman Al-Jauf . 66 • Tombol Al-Halqu untuk masuk ke halaman Al-Halqu yang digambarkan dengan animasi huruf Al-Halqu yang keluar dari kerongkongan dan hurufnya berjumlah 6. • Tombol Al-Lisan untuk masuk ke halaman Al-Lisan yang digambarkan dengan animasi lidah dan hurufnya berjumlah 18. • Tombol Asy-Syafatain untuk masuk ke halaman Asy-Syafatain yang digambarkan dengan animasi bibir dan hurufnya berjumlah 4. • Tombol Al-Khoisyum untuk masuk ke halaman Al-Khoisyum . • Tombol Menu Utama untuk kembali ke halaman Menu Utama. Gambar Animasi Makharijul Huruf Gambar 3.15. Rancangan Tampilan Menu Makharijul Huruf 67 5. Rancangan Layar Evaluasi Rancangan layar ini berisi materi latihan, latihan yang diberikan ada 2 macam, yaitu latihan Belajar Membaca berisi materi tentang mengikuti suara yang ada di dalam aplikasi dengan cara merekam suara pengguna dan Pilihan Ganda berisi materi tentang mengenali suara yang dicocokkan dengan teks. Gambar Animasi Menu Pilihan Ganda Gambar 3.16. Rancangan Tampilan Menu Evaluasi 6. Rancangan Layar Tentang Penulis Rancangan layar ini berisi informasi mengenai identitas pembuat aplikasi Makharijul Huruf dan software yang digunakan dalam pembuatnya. 68 Judul Aplikasi Logo UIN Foto Pembuat Identitas Pembuat Aplikasi dan Aplikasi Software yang Digunakan dalam Aplikasi Gambar 3.17. Rancangan Tampilan Menu Tentang Penulis

3.2.3. Pengumpulan Bahan material collecting