Rancangan Halaman Splash Screen Rancangan Navigation Drawer Rancangan Halaman Home

masukan, keluaran, komponen penyimpanan, dan kalkulasi lanjutan. Kamus data pada sistem dapat dilihat pada Tabel 3.5 berikut. Tabel 3.5 Kamus Data Data Kolom Tipe Deskripsi Data Id Integer Identifier Istilah Text Teks berisi Istilah Psikologi Arti Text Teks berisi Definisi dari Istilah Psikologi

3.4 Perancangan Antarmuka Sistem Interface

Perancangan antarmuka bertujuan untuk memudahkan pengguna dalam menggunakan atau berinteraksi dengan sistem. Sebuah antarmuka harus dirancang dengan memperhatikan faktor pengguna sehingga sistem yang dibangun dapat memberikan kenyamanan dan kemudahan untuk digunakan oleh pengguna. Antarnuka yang dirancang diharapkan dapat menghasilkan aplikasi yang ramah pengguna user friendly.

3.4.1 Rancangan Halaman Splash Screen

Halaman Splash Screen merupakan halaman yang pertama kali muncul pada saat sistem dibuka. Rancangan Tampilan Splash Screen dapat dilihat pada Gambar 3.9 Universitas Sumatera Utara Gambar 3.9 Rancangan Tampilan Splash Screen Keterangan : 1. Splash Screen untuk menampilkan logo saat pertama kali membuka aplikasi.

3.4.2 Rancangan Navigation Drawer

Navigation Drawer terdiri dari Header, Beranda, Pencarian, Fitur, Bantuan, Tentang, dan Keluar. Rancangan Tampilan Navigation Drawer dapat dilihat pada Gambar 3.10 Universitas Sumatera Utara Gambar 3.10 Rancangan Tampilan Navigation Drawer Keterangan : 1. Menu Home berisi halaman utama dari program Kamus Istilah Psikolog. 2. Menu About berisi judul dan pembuat aplikasi. 3. Menu Help untuk panduan user menggunakan aplikasi. 4. Menu Exit untuk mengeluarkan user dari aplikasi.

3.4.3 Rancangan Halaman Home

Halaman Home terdapat Tab Swipe Gesture, Radio Button, Text Box, Button dan List View. Rancangan Tampilan Home dapat dilihat pada Gambar 3.11 Universitas Sumatera Utara Gambar 3.11 Rancangan Tampilan Home Keterangan : 1. Navigation Drawer 2. Tab Swipe Gesture untuk memilih mode penerjemahan, apakah Istilah Psikologi – Definisi atau Definisi – Istilah Psikologi 3. Radio Button untuk memilih algoritma yang akan digunakan 4. Text Box sebagai tempat untuk menampung kata yang ingin dicari 5. Button untuk memulai pencarian 6. List View untuk menampilkan seluruh kata yang ada di dalam database dan hasil pencarian Universitas Sumatera Utara Gambar 3.12 Rancangan Intent dari List View Mode Istilah Psikologi – Definisi Gambar 3.12 merupakan hasil dari aksi user jika memilih salah satu item dari list view. Yang dimana, sistem akan menampilkan halaman baru dengan nomor 1 merupakan Istilah Psikologi dan nomor 2 Definisi dari item yang dipilih. Demikian juga untuk halaman mode Definisi - Istilah Psikologi. Sistem akan menampilkan halaman yang sama dengan nomor 1 merupakan Definisi dari item yang dipilih dan nomor 2 merupakan Istilah Psikologinya. Universitas Sumatera Utara

3.4.4 Rancangan Halaman About