37
3.5 Perancangan Antarmuka Sistem Interface Proses perancangan antarmuka interface sebuah sistem adalah proses yang cukup
penting dalam perancangan sebuah sistem. Merancang antarmuka merupakan bagian yang paling penting dari merancang sebuah sistem. Sebuah antarmuka harus
dirancang dengan memperhatikan faktor pengguna sehingga sistem yang dibangun dapat memberikan kenyamanan dan kemudahan untuk digunakan oleh pengguna.
3.5.1 Rancangan Halaman Splash Screen
Halaman Splash Screen merupakan halaman yang pertama kali muncul pada saat
sistem dibuka. Rancangan Splash Screen dapat dilihat pada Gambar 3.8
Gambar 3.8 Rancangan Splash Screen
Keterangan : 1.
Splash Screen untuk menampilkan loading progress saat pertama kali membuka aplikasi.
38
3.5.2 Rancangan Navigation Drawer
Navigation Drawer terdiri dari Header, Beranda, Pencarian, Fitur, Bantuan,
Tentang, dan Keluar. Rancangan Navigation Drawer dapat dilihat pada Gambar 3.9
Gambar 3.9 Rancangan Navigation Drawer
Keterangan : 1.
Header berisi Logo Kamus. 2.
Menu Beranda berisi pembelajaran dasar huruf hangul. 3.
Menu Pencarian untuk melakukan pencarian kata. 4.
Menu Fitur berisi menu-menu untuk bahasa korea seperti alat makan,angka, buah, elektronik, hari, hewan, keluarga, profesi, dan sayuran.
5. Menu Bantuan untuk panduan user menggunakan aplikasi beserta
penjelasan Algoritma. 6.
Menu Tentang berisi judul Aplikasi dan pembuat aplikasi. 7.
Menu Keluar untuk mengeluarkan user dari aplikasi.
39
3.5.3 Rancangan Halaman Beranda
Halaman Beranda terdapat beberapa button yang akan menampilkan pembelajaran dasar huruf hangul seperti cara penulisan dan pelafalan huruf hangul. Rancangan
Beranda dapat dilihat pada Gambar 3.10
Gambar 3.10 Rancangan Beranda
Keterangan : 1.
Navigation Drawer 2.
Button untuk menampilkan huruf-huruf hangul beserta pelafalannya.
3.5.4 Rancangan Halaman Pencarian
Halaman pencarian berfungsi melakukan pencarian kata pada kamus sesuai dengan
algoritma yang dipilih. Rancangan Pencarian dapat dilihat pada Gambar 3.11
40
Gambar 3.11 Rancangan Pencarian
Keterangan : 1.
Navigation Drawer. 2.
textView untuk menampilkan teks. 3.
Floating action button sebagai shortcut dari menu yang digunakan untuk
mengganti bahasa. 4.
textView untuk menampilkan teks. 5.
editText untuk menangkap input yang diketik user. 6.
button untuk melakukan pencarian kata menggunakan Algoritma Knuth
Morris Pratt. Rancangan setelah diklik Button dapat dilihat pada Gambar 3.12
7. button untuk melakukan pencarian kata menggunakan Algoritma Boyer
Moore. Rancangan setelah diklik Button dapat dilihat pada Gambar 3.12
41
Gambar 3.12 Rancangan Hasil Pencarian
Keterangan : 1.
back untuk kembali ke halaman sebelumnya. 2.
textView untuk menampilkan teks. 3.
textView untuk menampilkan teks. 4.
imageView untuk menampilkan gambar berupa huruf hangul. Rancangan setelah diklik imageView akan muncul Alert dialog dapat dilihat pada
Gambar 3.13
5. textView untuk menampilkan teks.
6. textView untuk menampilkan teks.
7.
Floating action button sebagai shortcut dari menu yang digunakan untuk
melihat hasil Running Time. Rancangan setelah diklik Floating action
button akan muncul Alert dialog dapat dilihat pada Gambar 3.14
42
Gambar 3.13 Rancangan Alert Dialog Terjemahan
Keterangan : 1.
textView untuk menampilkan teks. 2.
textView untuk menampilkan teks. 3.
textView untuk menampilkan teks. 4.
imageView untuk menampilkan gambar berupa huruf hangul. 5.
button untuk menutup Alert dialog.
Gambar 3.14 Rancangan Alert Dialog Hasil
Keterangan : 1.
textView untuk menampilkan teks. 2.
textView untuk menampilkan waktu pencarian. 3.
textView untuk menampilkan jumlah teks yang ditemukan. 4.
button untuk menutup Alert dialog.
43
3.5.5 Rancangan Halaman Fitur
