HASIL DAN PEMBAHASAN
3. Usability Goal Settings
Pada persona dapat dilihat bahwa pengguna merupakan pengguna baru atau pengguna dengan frekuensi penggunaan kurang dari lima kali dengan tugas utama adalah menghitung bagian dari setiap ahli waris. Oleh karena itu, tujuan utama yang dipilih adalah easy to learn, yaitu antarmuka pengguna dibuat sehingga mudah untuk dipelajari dan seharusnya tidak membuat pengguna mengingat urutan-urutan yang benar untuk menyelesaikan tugasnya.
Tujuan kualitatif yang didapat adalah sebagai berikut.
pengguna mampu mendefinisikan dan tetap fokus pada tugasnya
dapat memandu pengguna untuk menyelesaikan tugasnya secara benar dan lengkap
menyediakan banyak dukungan untuk pengguna untuk mengingat dan mengikuti prosedur kebutuhan
menyediakan kemudahan dalam bernavigasi dan memelihara alur kerja Tujuan kualitatif tersebut tercapai jika pengguna dapat menyelesaikan tugas yang diberikan. Adapun tujuan kuantitatif yang dapat diukur adalah sebagai berikut.
Rata-rata waktu pengguna baru untuk menyelesaikan tugas
Rata-rata jumlah kesalahan pengguna baru untuk menyelesaikan tugas
Rata-rata waktu pengguna baru untuk belajar
Rata-rata waktu pengguna baru untuk mencoba
Rata-rata tingkat kepuasan pengguna baru untuk kemudahan dalam belajar
Tabel 2 Koleksi data pengamatan tugas pada situs faro’idh Actor
(Pengguna)
Trigger Use Case
(Tugas)
Urutan Skenario Tugas Kesalahan, Masalah, komentar Mahasiswa Menghitung bagian warisan Mengisi isian Tarikah
- mengisi isian pada kolom Tarikah -salah / tidak memasukkan angka Mengisi isian Hak-hak yang harus dipenuhi
- mengisi isian pada kolom pertama
- mengisi isian pada kolom kedua
- mengisi isian pada kolom ketiga
- mengisi isian pada kolom keempat -salah memasukkan angka Mengisi nama dan kedudukan ahli waris
- mengisi isian pada kolom nama
- memilih kedudukan ahli waris
- menekan tombol
“Masukkan”
- mengulangi 3 poin di atas
- Salah / tidak memasukkan nama - Salah /tidak memilih kedudukan - pengerjaan tugas di bawah tergantung masukan yang diberikan Mengubah nama dan kedudukan ahli waris
- menekan tombol ubah pada baris yang ingin diubah nama dan kedudukan ahli waris
- tidak melihat tombol tersebut - salah menekan tombol Menghapus nama dan kedudukan ahli waris
- menekan tombol hapus pada baris yang ingin dihapus nama dan kedudukan ahli waris
- tidak melihat tombol tersebut - salah menekan tombol Melihat hasil pembagian warisan
- menekan tombol hitung
- melihat hasil perhitungan
- salah menekan tombol
- salah / atau tidak melihat hasil Untuk tujuan kuantitatif ini akan diuji
pada tahap iterative detailed user interface design.
4. Platform Capabilities and Constraints Adapun kemampuan dan batasan yang didefinisikan untuk setiap platform adalah sebagai berikut.
Ukuran dan resolusi layar
Pada umumnya, komputer pengguna memiliki resolusi layar 800x600 pixels atau 1024x768 pixels. Ukuran layar yang lebih besar adalah yang paling populer dan trend menunjukkan bahwa ukuran 1024x768 pixels akan menjadi ukuran umum layar terkecil di masa depan (Nielsen&Hoa Loranger 2006).
Kecepatan modem
Pengguna menggunakan modem dengan kecepatan 28,8kbps atau 56kpbs.
Kemampuan browser tergantung dari vendor dan versi
Browser yang digunakan sudah atau belum terdapat plug-in. Tabel 3 memperlihatkan kemampuan dari tiap browser yang diuji. Kemampuan tiap browser untuk control available (seperti tabbing) dan interpreters (seperti javascript) berjalan baik. Namun pada Opera 9.6.3 kemampuan tersebut berjalan tidak baik.
Tabel 3 Kemampuan yang dimiliki tiap browser Control available Interpreters Firefox 3.05 IE 8 Flock 2.0.2 Netscape 9 Opera 9.6.3 - -
Division: Department: Title: Division: Department: Title:
5. General Design Principles
Prinsip-prinsip perancangan umum yang digunakan berdasarkan pada Galitz (2002).
Ukuran halaman web
Ukuran halaman web dibuat agar meminimalkan panjang halaman web. Scrolling
Scrolling mungkin penting untuk menampilkan seluruh isi data. Cara meminimalkan vertikal scrolling adalah dengan meniadakan gambar yang berukuran besar dan mengurangi kelebihan ruang kosong.
Selain itu, scrolling dibuat untuk meniadakan horizontal scrolling. Halaman yang berukuran besar dapat menyebabkan banyak scrolling, sehingga tidak praktis dan tidak efisien.
Tipografi
Tipografi meliputi pemilihan jenis huruf dan penentuan ukuran huruf. Jenis huruf yang digunakan adalah jenis huruf yang sederhana dan sering digunakan, seperti Sans Serif (Helvetica atau Verdana) dan Arial.
Screen Elements
Control Caption/Data Field Justification Data fields yang digunakan dapat berupa line box untuk menampilkan dan modifikasi data. Cara penulisan data field yang benar adalah sebagai berikut:
1. Rata kiri untuk caption dan data field dan terdapat satu spasi antara caption terpanjang dan kolom data field (Gambar 2).
Gambar 2 Aturan pertama caption dan data field justification.
2. Rata kanan untuk caption dan rata kiri untuk data field serta terdapat satu spasi di tiap-tiap caption dan kolom data field (Gambar 3).
Gambar 3 Aturan kedua caption dan data
field justification. Headings
Headings digunakan untuk membagi blok teks yang besar. Headings memberikan gambaran dari isi suatu halaman web dengan jelas. Tiga jenis headings adalah sebagai berikut:
1. Control sections headings
Heading diletakkan di atas control caption dan dipisahkan dengan satu spasi baris (Gambar 4).
Gambar 4 Control sections headings. 2. Control subsection / Row headings
Heading menggunakan simbol yang unik, seperti panah dan diletakkan di samping kiri control caption dan dipisahkan dengan tiga spasi (Gambar 5).
Gambar 5 Control subsection / Row headings. 3. Field group headings
Heading diletakkan di tengah control caption yang dikelilingi dengan garis (Gambar 6).
Gambar 6 Field group headings. Division:
Department: Title:
AUTO > Make: Model: Year:
License Number: Driver:
Instruksi
Instruksi diperlukan untuk pengguna baru yang tidak berpengalaman dan berisi tentang apa yang harus dilakukan dan bagaimana melakukannya.
Aturan instruksi adalah seperti terlihat pada Gambar 7. Untuk membedakan intruksi dengan yang lainnya, tampilan instruksi harus unik, berbeda warna, dan menggunakan jenis huruf yang berbeda.
Gambar 7 Aturan instruksi. Message Boxes dan Pop-up Windows
Message boxes digunakan untuk menampilkan pesan pada situasi atau kondisi tertentu, misalnya setiap kali suatu proses dilakukan, berhasil atau tidaknya harus ditunjukkan dengan sebuah pesan.
Hal ini berlaku untuk operasi-operasi yang menyangkut manipulasi data, seperti penambahan, pengubahan, dan penghapusan data. Warning message ditandai dengan icon
“!”. Message boxes bisasanya dilengkapi dengan command button seperti OK dan Cancel.
Pesan dapat ditampilkan dalam bentuk suatu baris pesan dan pop-up windows. Semua pesan penting ditampilkan sebagai pop-up windows karena pop-up windows lebih cepat dikenali.
Warna
Warna memiliki tujuan tertentu. Warna foreground harus berbeda dengan warna background. Foreground menggunakan warna hitam untuk teks sedangkan background menggunakan warna yang kontras dengan foreground seperti putih atau abu-abu muda.
Warna yang ditampilkan dibuat minimal karena dengan menggunakan banyak warna, pengguna sulit untuk memperhatikan sesuatu yang mungkin paling penting. Pemilihan warna foreground dan background yang sesuai dapat dilihat pada Tabel 4 berikut ini.
Tabel 4 Kombinasi warna foreground dan background yang sesuai
Background Foreground
Hitam Cyan tua, hijau muda, kuning tua, cyan mda, putih tua, magenta muda, kuning muda, putih muda. Biru Hijau tua, hijau muda,
kuning tua, cyan muda, putih tua, kuning muda, putih muda
Hijau Hitam, kuning muda, biru tua, putih muda
Cyan Hitam, kuning, muda, biru tua, putih muda
Merah Hijau muda, cyan muda, kuning muda, putih tua Magenta Hitam, cyan muda, kuning
muda, putih tua
Kuning Hitam, biru tua, merah muda
Putih Hitam, biru tua
B. Design/Testing/Development
1. Work Reengineering
Tahap ini tidak dilakukan karena tahap ini merupakan tahap rekayasa ulang, validasi, dan perbaikan dari tahap user profile dan contextual task analysis yang sudah dilakukan oleh teknik persona. Tahap ini bekerja dengan pengguna yang berbeda untuk pengujiannya sedangkan persona hanya menggunakan pengguna tetap yang telah ditentukan berdasarkan karakteristik pada Lampiran 2.
2. Conceptual Model Design
Berdasarkan analisis kebutuhan, kemudian akan dirancang antarmuka yang sesuai dengan tujuan pengguna. Situs penghitungan waris ini berbasis web yang kebanyakan berorientasi proses sehingga antarmuka yang akan dibuat harus dapat membantu pengguna untuk menyederhanakan proses yang akan dilakukannya.
Pada tahap ini akan ditentukan nama situs, logo dan posisinya, link versus aksi (contoh:
“Submit”), dan petunjuk visual yang
menandakan di mana posisi pengguna.
Adapun rancangan model pada tahap ini dapat dilihat pada Gambar 8.
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 (1/8) 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 faro’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 caption/Data 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