Perancangan User Interface
4.4 Perancangan User Interface
Perancangan ini dibuat berdasarkan requirement user interface pada SRS. Berikut merupakan perancangan user interface untuk aplikasi pemeriksa ejaan:
4.4.1 Halaman Utama Aplikasi Pemeriksa Ejaan No.
UI-01
Nama
Halaman utama aplikasi pemeriksa ejaan
Deskripsi
Halaman utama yang ditampilkan pada saat pengguna mengakses aplikasi yang menyediakan form untuk input teks (typing) yang dilengkap dengan daftar kata yang salah dari hasil pemeriksaan ejaan.
Asumsi Keterangan
Halaman utama dari aplikasi pemeriksa ejaan ini terdiri atas: 1. Button Open Document Button ini berfungsi untuk mencari file yang di dibaca ke dalam aplikasi. 2. Text area Text area ini berfungsi sebagai tempat untuk menampung teks yang diperiksa oleh aplikasi. 3. Button check Button ini berfungsi untuk melakukan pemeriksaan teks yang ada pada text area. Ketika button ini diklik maka aplikasi melakukan pemeriksaan, kemudian menampilkan hasil pemeriksaan pada daftar kata salah. 4. Daftar kata salah Pada bagian kanan halaman utama aplikasi terdapat daftar kata salah yang menampilkan hasil dari pemeriksaan kata yang sudah dimasukkan pada text area. Pada bagian paling atas dari daftar kata salah ini terdapat keterangan jumlah kata salah yang terdeteksi salah oleh aplikasi. Daftar kata salah ini berbentuk tabel dengan dua kolom, yaitu kolom word dan kolom error. Pada kolom word berisi kata yang salah, sedangkan dalam kolom error berisi jenis kesalahan dari kata tersebut (misalnya: kesalahan tipografi). Tampilan utama daftar kata salah ini kosong, namun setelah pengguna mengklik button check, dan kemudian aplikasi menemukan kesalahan ejaan pada teks yang diperiksa, maka daftar kata salah ditampilkan. Pengguna dapat melihat semua daftar kata salah dengan melakukan scroll-down atau scroll-up.
Gambar
Gambar 21 Tampilan halaman utama aplikasi
Perilaku UI
Gambar 22 Perilaku UI halaman utama aplikasi pemeriksa ejaan
4.4.2 Halaman File Chooser No.
UI-02
Nama
Halaman File Chooser
Deskripsi
Halaman yang ditampilkan pada saat pengguna mengklik Button Open Document . Halaman ini digunakan untuk mencari dan memilih file yang dibaca oleh aplikasi.
Asumsi Keterangan
Halaman utama dari aplikasi pemeriksa ejaan ini terdiri atas:
1. Button Open Document Button ini berfungsi untuk mencari file yang di upload ke dalam aplikasi.
2. File Chooser File Chooser ini muncul ketika pengguna mengklik button Open Document . File Chooser ini digunakan untuk mencari dan 2. File Chooser File Chooser ini muncul ketika pengguna mengklik button Open Document . File Chooser ini digunakan untuk mencari dan
Text area ini berfungsi sebagai tempat untuk menampilkan isi file berupa teks yang berhasil dibaca aplikasi.
4. Button Check Button ini berfungsi untuk melakukan pemeriksaan teks yang ada pada text area. Ketika button ini diklik maka aplikasi melakukan pemeriksaan, kemudian menampilkan hasil pemeriksaan pada daftar kata salah. 5. Daftar kata salah Pada bagian kanan halaman utama aplikasi terdapat daftar kata salah yang menampilkan hasil dari pemeriksaan kata yang sudah dimasukkan pada text area. Pada bagian paling atas dari daftar kata salah ini terdapat keterangan jumlah kata salah yang terdeteksi salah oleh aplikasi. Daftar kata salah ini berbentuk tabel dengan dua kolom, yaitu kolom word dan kolom error. Pada kolom word berisi kata yang salah, sedangkan dalam kolom error berisi jenis kesalahan dari kata tersebut (misalnya : kesalahan tipografi). Tampilan utama daftar kata salah ini kosong, namun setelah pengguna mengklik button check, dan kemudian aplikasi menemukan kesalahan ejaan pada teks yang diperiksa, maka daftar kata salah ditampilkan. Pengguna dapat melihat semua daftar kata salah dengan melakukan scroll-down atau scroll-up.
Gambar
Gambar 23 Tampilan halaman file chooser
Perilaku UI
Gambar 24 Perilaku UI Halaman File Chooser