Desain User Interface

Berikut ini diberikan gambaran bagaimana layout user interface, sehingga dapat mempermudah pemahaman mengenai sistem pada penelitian ini.Tampilan di bawah ialah tampilan awal saat aplikasi ini dijalankan. Terdiri dari dua menu utama, yakni menu aturan penyandian morse code dan penyandian. Pada halaman ini terdapat navigasi bagi user bagaimana cara penggunaan aplikasi ini. 

Gambar 3.9 Halaman Utama

Menu dari perangkat lunak ini selalu tampil dalam setiap sesi pemilihan menu.Salah satu kemudahan yang diharapkan ialah kemudahan navigasi bagi user saat menggunakan perangkat lunak yang dikembangkan.Kemudahan navigasi yang dimaksud ialah saat user ingin beralih dari tiap menu yang ada.

Gambar 3.12 Tampilan Menu Sejarah Morse

Tampilan di atas merupakan halaman dari menu sejarah morse. Halaman tersebut berisi tentang penemu morse dan kisah penemuan morse. Pilihan menu sejarah morse memiliki satu halaman tunggal dan tidak memiliki halaman lanjutan. 

Gambar 3.13 Tampilan Menu Aturan Penyandian Morse Code

Gambar di atas adalah gambaran halaman menu aturan penyandian morse code. Berisi submenu aturan penyandian morse code. Saat user memilih salah satu submenu di atas, maka akan tampil halaman detail. Dalam gambar di bawah ini ditunjukkan halaman jika user memilih submenu Alfabet.

Gambar 3.12 Tampilan Submenu Aturan Penyandian Morse Code

Gambar 3.14 Tampilan Menu Pembelajaran Penyandian

Pada menu pembelajaran penyandian, user diminta untuk mengetikkan kata di papan keyboard, oleh sistem akan ditampilkan hasil penyandian didalam layar diatas papan keyboard.

Gambar 3.15 Tampilan Menu Penyandian

Pada menu penyandian, user diminta untuk mengetikkan kata dalam kolom penyandian, kemudian menekan tombol ubah untuk dipanggil rule penyandian oleh sistem dan akan ditampilkan hasil penyandiannya pada kolom isian. Apabila user ingin melanjutkan penyandian, maka user harus membersihkan kolom penyandian dengan menekan tombol “ubah”.