Gambar 8 Rancangan model antarmuka halaman penghitungan waris
faro’idh.
3. Screen Design Standards
Sebagai perancang antarmuka, tidak ada komponen kritis selain screen design
standard. Standar ini membantu pengguna yang mengunjungi situs
faro’idh merasakan seperti mereka bekerja pada halaman situs
seperti itu sebelumnya Schaffer 2004. Screen
design standard
mengatur kebutuhan-kebutuhan khusus bagaimana
layar terlihat dan beroperasi. Kunci standar ini merupakan ide tipe layar yang reusable,
pola atau template perancangan layar. Gambar 9 menunjukkan salah satu contoh
template standar perancangan layar.
Isi dari perancangan standar adalah sebagai berikut:
Perancangan header dan footer. Penanganan kesalahan.
Label tombol. Perataan teks, label, dan kolom
pengisian. Huruf.
Batasan penggunaan warna. Format data
Gambar 9 Screen design standard. Situs
faro’idh menggunakan isi dari perancangan standar tersebut. Hanya saja posisi
dari isi dari situs faro’idh berbeda karena
menyesuaikan pada content situs faro’idh.
4. Detailed User Interface Design
Situs faro’idh termasuk situs yang
menerapkan kemampuan pakar di dalamnya. Mesin inferensi yang dipakai pada sistem
adalah backward chaining, karena sistem ini dimulai dari tujuan perolehan bagian setiap ahli
waris yang selanjutnya dicari aturan yang memiliki tujuan tersebut.
Sistem ini menggunakan aturan IF-THEN dalam
mekanisme inferensianya.
Sebagai contoh, jika si mayit meninggalkan istri dan
anak laki-laki maka istri mendapat seperdelapan 18 bagian karena adanya anak dan anak laki-
laki mendapat seluruh sisanya karena anak laki- laki merupakan ashobah. Berikut tampilan
sistem
faro’idh Gambar 10.
Gambar 10 Tampilan hasil penghitungan sistem.
Berdasarkan tahap conceptual model design dan screen design standards, yang dilakukan
pada tahap ini adalah menggabungkan kedua tahap tersebut dengan menerapkan prinsip-
prinsip perancangan umum.
Ukuran Halaman Web
Halaman pada situs fa ro’idh dibuat
minimal sehingga
tidak memerlukan
scrolling yang panjang. Halaman web yang panjang menyebabkan:
Lebih banyak scrolling sehingga tidak efisien.
Isi yang ditampilkan lebih banyak sehingga pengguna mengalami kesulitan
untuk melakukan pencarian. Beberapa tombol navigasi dan link tidak
terlihat pada tampilan Gambar 11 menampilkan halaman situs
faro’idh untuk perancangan awal.
Scrolling
Pada Gambar 11 terlihat bahwa pada halaman situs
faro’idh tidak ada horizontal scrolling dan meminimalkan vertikal scrolling
dengan menghilangkan ruang kosong dan meniadakan gambar besar.
Gambar 11 Halaman situs faro’idh.
Tipografi
Pada situs faro’idh, menggunakan jenis
huruf Arial, Helvetica, Sans Serif. Ukuran huruf adalah 24 pt untuk judul, 18 pt untuk
heading, 12 pt untuk bodytext, dan 11 pt untuk link. Setiap halaman menggunakan
ukuran huruf tersebut dan tanpa adanya perubahan.
Screen Elements Control captionData field justification
Hampir semua teks diletakkan rata kiri karena pengguna cenderung
lebih cepat membaca teks yang rata kiri daripada rata kanan
atau tengah. Pada Gambar 12, dapat dilihat bahwa situs
faro’idh mengikuti aturan penulisan yang pertama yaitu rata kiri untuk caption dan
data field.
Gambar 12 Control caption dan data field
pada halaman faro’idh.
Headings
Headings pada
situs faro’idh
menggunakan jenis control sections heading Gambar 12 karena pada umumnya heading
mengikuti aturan penulisan pada control caption dan data field.
Instruksi
Pada situs faro’idh instruksi terlihat pada
Gambar 12. Instruksi diberikan di setiap langkah dan menggunakan gaya yang
berbeda untuk membedakan dari yang lain, yaitu tanpa ditebalkan.
Message Boxes dan Pop-up Windows
Situs faro’idh menggunakan message
boxes untuk
memberikan peringatan-
peringatan tertentu. Gambar 13 berikut ini menunjukkan peringatan saat field tarikah
yang belum diisi.
Gambar 13 Warning message box. Pada Gambar 14 juga terdapat pesan
konfirmasi setelah melakukan pengubahan atau penghapusan data.
Gambar 14 Confirmation message box.
Warna
Pada header dan body situs faro’idh
merupakan kombinasi foreground hitam dan background putih kehijauan. Hal ini dapat
ditunjukkan pada Gambar 11. Kombinasi warna tersebut telah sesuai dengan kombinasi warna
foreground dan background pada Tabel 4.
5. Iterative Detailed User Interface Design
Kategori