Perancangan Perancangan Arsitektur Navigasi Perancangan Diagram Transisi

Gambar 4.17 Flowchart Halaman Menu Utama Keterangan : 1.Halaman Menu Utama Main 2.Halaman Home 3.Halaman Petunjuk 4.Halaman Profile Pada flowchart Gambar 4.17 digambarkan user dapat memilih 4 menu yang tersedia, jika user memilih salah satu dari keempat menu yang ada maka user akan masuk ke halaman 1,2,3 dan 4, jika tidak user kembali ke menu latar dan memilih kembali menu yang diinginkan. Gambar 4.18 Flowchart Halaman Home Flowchart Gambar 4.18 menjelaskan user dapat mulai berinteraksi dengan materi yaitu dengan memilih 3 menu materi pembelajaran yang tersedia, yaitu menu ”kuliah”, ”konvolusi”, dan ”Quiz”. User dapat berpindah dari satu materi ke materi lainnya dengan memilih tombol navigasi menu yang tersedia. Gambar 4.19 Flowchart Halaman Petunjuk Pada flowchart Gambar 4.19 halaman petunjuk ini user dapat melihat informasi yang diperlukan sebelum menjalankan aplikasi ini. Terdapat 6 halaman yang masing-masing menjelaskan informasi penggunaan dari aplikasi pembelajaran multimedia pengolahan citra. Gambar 4.20 Flowchart Halaman Profile Pada flowchart Gambar 4.20 ini user dapat melihat informasi tentang profile peneliti berisi biografi singkat dan juga informasi authoring tools software yang dipakai. Disediakan pula tombol navigasi ”back” untuk kembali ke menu latar. Gambar 4.21 Flowchart Halaman Quiz Flowchart Gambar 4.21 menggambarkan halaman Quiz yang dapat dipergunakan user untuk melakukan evaluasi hasil belajar materi teknik konvolusi pada pengolahan citra.

C. Perancangan Arsitektur Navigasi

Gambar 4.22 Desain Arsitektur Navigasi

D. Perancangan Diagram Transisi

State Transition Diagram Gambar 4.23 Rancangan STD Menu Utama Gambar 4.24 Rancangan STD Menu Home Gambar 4.25 Rancangan STD Menu Kuliah Gambar 4.26 Rancangan STD Menu Konvolusi Gambar 4.27 Rancangan STD Menu Quiz Gambar 4.28 Rancangan STD Menu Petunjuk

E. Perancangan Antar Muka

User Interface Perancangan user interface dibuat dan disesuaikan dengan kebutuhan pengguna yang mengacu pada hasil penelitian dengan menggunakan kuesioner penelitian. Secara rinci design user interface dari aplikasi ini dirancang menjadi 9 bagian yaitu: 1. Rancangan Layar Intro Dirancang sebagai tampilan pembuka aplikasi sebelum masuk menuju menu utama dengan konsep seperti sebuah layar televisi hitam putih disertai dengan animasi teks dan gambar di dalamnya. Dalam layar intro user diberi kemudahan dengan adanya tombol navigasi ”skip” yang berfungsi untuk menuju ke layar selanjutnya. Gambar 4.29 Rancangan Layar Intro 2. Rancangan Layar Halaman Menu Utama Halaman latar ini dirancang sebagai navigasi awal untuk user berinteraksi dengan aplikasi. Terdapat 4 tombol navigasi yaitu: ”home” untuk menuju ke halaman menu utama, ”petunjuk” untuk masuk ke halaman petunjuk penggunaan aplikasi, ”profile” untuk masuk ke halaman profil pembuat dan tombol ”exit” untuk keluar dari aplikasi. Gambar 4.30 Rancangan Layar Halaman Menu Utama