dilakukan menggunakan metode black-box. Validasi prototipe antarmuka oleh pengguna dilakukan dengan mengujikan prototipe ke dua orang pegawai perpustakaan bagian pengolahan item bahan pustaka. Satu orang pegawai yang sering menggunakan WINISIS dan satu orang pegawai yang pernah menggunakan WINISIS. WINISIS adalah sistem yang biasanya dipakai sehari-hari untuk pemasukan metadata. Kedua pegawai diminta untuk menginputkan metadata dari satu item pustaka ke dalam WINISIS, setelah selesai kemudian kedua pegawai diminta untuk menginputkan metadata dari satu item pustaka ke dalam data entry katalog. Selama berlangsungnya kedua tugas tersebut, system perception dari pengguna diamati dan dianalisis.
HASIL DAN PEMBAHASAN
Analisis PenggunaAntarmuka data entry katalog dirancang untuk digunakan oleh pegawai internal perpustakaan pusat IPB bagian pengolahan dan pembinaan item bahan pustaka. Pegawai di bagian pengolahan dan pembinaan item bahan pustaka sudah terbiasa bekerja dengan sistem sebelumnya yaitu WINISIS.
Analisis Tugas Pengguna
Pegawai bagian pengolahan dan pembinaan item bahan pustaka memerlukan antarmuka untuk memasukkan metadata baru[A.1] ke dalam repositori katalog dan melakukan pemeriksaan terhadap metadata yang telah dimasukkan[A.2].
Setelah dianalisis tugas untuk memasukkan metadata[A.1] menghasilkan dua buah subtugas meliputi memilih katalog yang akan diinput metadata baru[A.1.1], serta memasukkan metadata baru berdasarkan atribut dan sub-atribut[A.1.2].
Hasil analisis tugas untuk melakukan pemeriksaan terhadap metadata yang telah dimasukkan[A.2] menghasilkan dua buah subtugas yaitu memilih katalog yang akan diinput metadata baru[A.2.1], memeriksa item metadata satu per satu[A.2.2] dan memeriksa item metadata berdasarkan kata kunci[A.2.3]. Analisis Isi Tampilan (content object)
Berdasarkan tugas-tugas pengguna dan hasil diskusi dengan calon pengguna, maka dilakukan analisis isi tampilan. Tugas pengguna memasukkan metadata[A.1], memerlukan antarmuka dengan isi tampilan antarmuka berupa formulir masukan (form
input) yang menampilkan atribut-atribut yang tersedia untuk katalog terpilih. Calon pengguna meminta supaya ketika pengguna memasukkan data, pengguna tidak perlu memasukkan lagi penanda ‘^kode_subatribut’ (tudung). Sebelumnya, penanda ‘^kode_subatribut’ perlu dimasukkan untuk suatu atribut yang mempunyai sub-atribut. Daftar atribut dan sub-atribut untuk tiap katalog dapat dilihat pada Lampiran 1.
Tugas pengguna pemeriksaan metadata yang telah dimasukkan[A.2] memerlukan antarmuka dengan isi tampilan antarmuka berupa tampilan atribut-atribut metadata yang telah diinput ke dalam basis data. Atribut kosong tidak ditampilkan, dan hanya atribut yang mempunyai nilai yang ditampilkan. Format isi tampilan adalah nama atribut diikuti dengan isi atribut. Atribut yang mempunyai sub-atribut akan ditampilkan sebagai satu kesatuan data dengan menggunakan penanda ‘^kode_subatribut’ (tudung) untuk memisahkan antar sub-atribut. Fungsi Utama
Hasil analisis tugas pengguna digunakan untuk menentukan fungsi utama. Tabel keterunutan fungsi aplikasi dari hasil analisis tugas pengguna dapat dilihat pada Tabel 1. Tabel 1 Keterunutan fungsi utama aplikasi
TUGAS SUB TUGAS PENGGUNA FUNGSI UTAMA memilih katalog [A.1.1] Home Memasu kkan metadata [A.1] memasukkan metadata baru berdasarkan atribut dan sub-atribut [A.1.2] Add memilih katalog [A.2.1] Home memeriksa item
metadata satu per satu[A.2.2] Browse Pemeriks aan metadata yang telah dimasuk kan [A.2] memeriksa item metadata berdasarkan kata kunci[A.2.3] Search
Tugas pengguna memasukkan metadata[A.1] dan pemeriksaan metadata yang telah dimasukkan[A.2] mempunyai subtugas yang sama yaitu memilih katalog[A.1.1][A.2.1], maka halaman pemilihan katalog akan menjadi halaman awal aplikasi. Subtugas memilih katalog[A.1.1][A.2.1] akan menjadi salah satu
fungsi utama aplikasi pada tiap rancangan tampilan layar dengan id home. Rancangan tampilan layar pemilihan katalog ditunjukkan seperti pada Lampiran 3.
Subtugas memasukkan metadata baru berdasarkan atribut dan sub-atribut[A.1.2] akan menjadi salah satu fungsi utama aplikasi pada tiap rancangan tampilan layar dengan id add. Subtugas memeriksa item metadata satu per satu[A.2.2] akan menjadi salah satu fungsi utama aplikasi pada tiap rancangan tampilan layar dengan id browse. Subtugas memeriksa item metadata berdasarkan kata kunci[A.2.3] akan menjadi salah satu fungsi utama aplikasi pada tiap rancangan tampilan layar dengan id search.
Rancangan Tampilan
Berdasarkan hasil analisis isi tampilan (display content), tampilan layar ketika objek dengan id add dikenakan aksi klik /di-klik akan berisi kotak-kotak masukan tiap atribut katalog. Tiap kotak masukan atribut katalog akan dinamai dengan objek berjenis label yang berisi deskripsi atribut disertai kode atribut. Isi dari kotak masukan atribut katalog berupa objek berjenis input box. Jika kotak masukan atribut katalog mempunyai sub-atribut, maka kotak masukan atribut katalog akan berisi objek berjenis input box untuk sub-atribut dan objek berjenis label yang berisi kode sub-atribut. Rancangan format formulir masukan untuk sebuah atribut dan sub-atributnya dapat dilihat pada Gambar 2. Rancangan tampilan layar ketika objek dengan id add di klik ditunjukkan seperti pada Lampiran 4.
Gambar 2 Rancangan format formulir masukan untuk sebuah atribut dan sub-atributnya.
Rancangan tampilan layar ketika id browse di klik ditunjukkan seperti pada Lampiran 5. Berdasarkan hasil analisis isi tampilan, maka content object yang ditampilkan ketika id browse di-klik berupa objek label deskripsi atribut yang nilainya tidak kosong dan objek label yang berisi nilai dari atribut. Objek label deskripsi atribut berisi deskripsi atribut, kode atribut, kode sub-atribut. Objek label yang berisi nilai dari atribut akan menampilkan nilai-nilai dari sub-atribut dengan tanda ‘^kode_subatribut’ sebagai pemisah antar sub-atribut. Atribut yang tidak mempunyai sub-atribut akan ditampilkan tanpa tanda ‘^kode_subatribut’. Rancangan format tampilan isi sebuah atribut dan sub-atributnya dapat dilihat pada Gambar 3. Layar akan berisi tombol-tombol perintah (command button) navigasi agar pengguna dapat memeriksa content object sebelumnya dan sesudahnya serta tombol perintah navigasi untuk menuju ke content object paling awal dan paling akhir. Content object yang ditemukan kesalahan (kesalahan penulisan/kurang lengkap) akan di-edit atau dihapus jika dinginkan, oleh karena itu layar akan berisi tombol perintah edit dan hapus.
Gambar 3 Rancangan format tampilan isi sebuah atribut dan sub-atributnya. Rancangan tampilan layar ketika id search di klik ditunjukkan seperti pada Lampiran 6. Layar akan menampilkan satu objek text box dan satu objek tombol perintah pencarian. Jika objek tombol perintah pencarian diklik, layar akan menampilkan hasil pencarian. Content object dari layar hasil pencarian akan menampilkan lima item teratas dari hasil pencarian. Jika hasil pencarian lebih dari lima item, layar akan menampilkan objek tombol
Deskripsi atribut Kode atribut
Kode sub-atribut Nilai sub-atribut
Nomor panggil Setempat(99)[lab]=
^l T ^a 582.284 ^b HASr
Nomor Panggil Setempat (99)
Kode Sub-atribut ^l ^a ^b T 582.284 HASr Nilai sub-atribut Deskripsi atribut Kode atribut
perintah yang berfungsi untuk menampilkan lima item hasil pencarian berikutnya. Rancangan tampilan layar hasil pencarian ditunjukkan seperti pada Lampiran 7.
Font
Dalam merancang antarmuka web, Galitz (2002) menyarankan untuk menggunakan tidak lebih dari 2 typeface dengan salah satu typeface mendominasi.
Aplikasi menggunakan 2 jenis typeface yaitu serif (font times new roman) yang digunakan di halaman-halaman web yang mengandung informasi-informasi yang membutuhkan ketelitian dalam membaca seperti halaman browse, halaman hasil pencarian, halaman pemilihan katalog. Halaman add dan edit menggunakan typeface sans-serif (font arial) untuk menuliskan deskripsi tiap atribut.
Grouping
Halaman add dan edit menampilkan seluruh atribut yang dipunyai katalog terpilih. Katalog disertasi mempunyai 27 atribut dan katalog tesis mempunyai 25 atribut. Tiap atribut akan mempunyai data-field masing-masing. Beberapa atribut mempunyai sub-atribut, tiap sub-atribut juga akan mempunyai data-field masing-masing. Sebagai akibatnya, halaman add dan edit akan kelihatan penuh sesak.
Untuk mengorganisir tampilan agar lebih mudah dibaca, maka tiap atribut dikelompokkan ke dalam fieldset-fieldset. Deskripsi atribut dan kode atribut diletakkan sebagai judul fieldset. Kode sub-atribut dan data-field diletakkan di dalam fieldset. Pengorganisasian tampilan seperti yang dijelaskan diatas mengikuti pengorganisasian tampilan berjenis field group (Galitz 2002). Untuk lebih jelasnya dapat dilihat pada Gambar 4.
Gambar 4 Grouping dan penggunaan font arial untuk menuliskan deskripsi atribut (Deskripsi Fisik 300) pada halaman add dan edit.
Tabel
Tabel digunakan untuk menampilkan data/informasi berukuran besar. Beberapa panduan dari Galitz (2002) dalam menggunakan tabel untuk menampilkan data berukuran besar adalah sebagai berikut: 1 Tabel harus mempunyai heading.
2 Data yang berupa teks ditampilkan rata kiri 3 Memberikan warna latar belakang yang
terang, agar memudahkan keterbacaan data/informasi
4 Data/informasi ditampilkan dalam susunan kronologis dan terurut
5 Data/informasi yang memiliki kemiripan ditampilkan bersama.
Panduan tersebut di atas diterapkan pada halaman browse dan halaman hasil pencarian. Gambar 5 adalah penggunaan tabel pada halaman browse dengan menerapkan panduan seperti disebutkan di atas.
Gambar 5 Penggunaan tabel pada halaman browse.
Iconic Menu
Aplikasi menggunakan menu grafik berjenis iconic menu. Iconic menu berguna dalam membantu pengguna mengingat fungsi dan perintah aplikasi (Galitz 2002). Iconic menu diletakkan secara vertikal dalam satu kolom. Pencarian menu berupa kolom lebih cepat daripada horizontal menu (Galitz 2002). Menu menggunakan ikon berukuran 32 x 32 pixels yang merepresentasikan fungsi-fungsi yang diwakilinya antara lain menu home, menu add, menu browse dan menu search. Menu diletakkan di sebelah kiri layar, karena pengguna sudah terbiasa dengan tampilan menu di sebelah kiri layar pada sistem operasi (Windows XP) yang digunakan.
Alur Navigasi
Alur navigasi aplikasi dapat dilihat pada Lampiran 2.
Ukuran Halaman Web
Berdasarkan pemantauan di tempat kerja pengguna, rata-rata resolusi monitor calon pengguna adalah 1024 x 768 piksel dan 800 x 600 piksel. Secara default, lebar halaman web akan berubah mengikuti resolusi monitor. Halaman web yang terlalu lebar akan menyulitkan pengguna dalam membaca teks yang panjang. Pengguna membutuhkan konsentrasi yang tinggi untuk membaca baris-baris kalimat yang memanjang. Akibatnya mata akan cepat lelah. Sering pula terjadi bahwa pengguna salah membaca ketika tulisan yang dibaca harus beralih ke baris berikutnya. Agar pengguna dengan kedua resolusi yang berbeda tersebut tetap nyaman dalam membaca teks halaman web, maka lebar halaman web harus dibatasi. Oleh karena itu lebar halaman web dibuat statis dengan ukuran sebesar 760 piksel.
Command Button
Command button adalah kontrol pada layar tampilan berbentuk empat persegi panjang dengan teks yang mengindikasikan aksi yang dilakukan ketika command button ditekan (Galitz 2002). Command button pada halaman web data entry digunakan pada halaman browse, untuk melakukan aksi navigasi item data, aksi edit item metadata, dan aksi hapus item metadata.
Aksi navigasi item data terdiri dari 4 buah command button. Seperti yang ditunjukkan pada Gambar 6, tiap command button mempunyai label teks dan simbol yang mengindikasikan aksi yang akan dilakukan oleh command button tersebut.
Gambar 6 Command button yang diberi label teks dan simbol yang mengindikasikan aksi yang akan dilakukan oleh command button.
Text Box
Kegunaan text box sebagai kontrol pada layar adalah sebagai suatu tempat dimana teks diketikkan ke dalamnya, atau teks yang akan diedit ditampilkan di dalamnya (Galitz 2002). Text box terdiri dari 2 jenis yaitu single line dan multiple line. Kedua jenis text box tersebut digunakan pada halaman data entry yaitu halaman add. Multiple line text box digunakan untuk memasukkan, mengedit teks yang panjang, sedangkan single line text box digunakan untuk memasukkan, mengedit teks yang tidak terlalu panjang.
Static Text Field
Static text field adalah kontrol pada layar yang digunakan untuk menampilkan informasi deskriptif dan untuk menampilkan informasi instruksional (Galitz 2002). Static text field pada aplikasi data entry katalog digunakan untuk menampilkan instruksi – instruksi, pesan-pesan kesalahan, dan heading.
Warna
Hal pertama yang dilakukan adalah menentukan warna mayoritas yang akan digunakan di halaman web. Untuk menentukan warna mayoritas, dapat mengacu ke warna logo yang akan dipasang di halaman web. Warna mayoritas bisa mengambil warna sama dengan warna logo atau padanan warna yang ada pada logo (Purnama, 2004).
Halaman web memiliki logo IPB dengan logo berwarna mayoritas biru. Warna mayoritas halaman web yang diambil adalah padanan warna mayoritas logo IPB yaitu warna biru muda dan variasinya. Warna biru muda dan variasinya digunakan sebagai warna latar belakang tabel pada halaman browse, warna latar belakang tabel pada halaman hasil pencarian, warna border menu, warna border fieldset pada halaman add dan edit, warna latar belakang text box pada halaman halaman add dan edit, warna teks footer. Di lain pihak, warna biru digunakan sebagai warna latar belakang header.
Ikon
Ikon yang baik adalah ikon yang merepresentasikan dengan jelas sesuatu yang diwakilinya, ikon dapat dibedakan jelas dengan yang lain dan masih dapat dikenali fungsinya walaupun ukurannya kurang dari 16 piksel. Standar ukuran ikon adalah 16 x 16 piksel, 32 x 32 piksel, dan 48 x 48 piksel (Galitz, 2002). Halaman web data entry menggunakan ikon berukuran 32 x 32 piksel pada menu utama dan ukuran 48 x 48 piksel pada halaman pemilihan katalog. Gambar 7 menunjukkan ikon berukuran 32 x 32 piksel pada menu utama yang digunakan untuk menuju ke halaman home.
Gambar 7 Ikon berukuran 32 x 32 piksel pada menu utama yang digunakan untuk menuju ke halaman home.
Tata Letak Halaman
Rancangan umum tata letak tiap layar dari aplikasi, seperti yang diilustrasikan pada Gambar 8, dibagi menjadi empat bagian utama:
1 Header
Header diletakkan di halaman bagian paling atas. Header berisi Logo IPB dan nama aplikasi
2 Menu
Menu diletakkan di halaman bagian kiri, di bawah header dan diatas footer.
3 Content
Content diletakkan di halaman bagian kanan, bersebelahan dengan menu, di bawah header dan di atas footer.
4 Footer
Footer diletakkan di halaman bagian paling bawah. Footer berisi keterangan hak cipta aplikasi /copyright.
Gambar 8 Rancangan umum tata letak halaman-halaman web.
Implementasi
Teknologi smarty digunakan untuk memisahkan tampilan dengan logika aplikasi. Tampilan data entry dirancang dengan menggunakan smarty, CSS, HTML dan JavaScript.
Implementasi dari rancangan tampilan layar pemilihan katalog dapat dilihat pada Lampiran 9. Implementasi dari rancangan tampilan layar ketika objek dengan id add di klik dapat dilihat pada Lampiran 10. Implementasi dari rancangan tampilan layar ketika objek dengan id browse di klik dapat dilihat pada Lampiran 11. Implementasi dari rancangan tampilan layar ketika objek dengan id search diklik dapat dilihat pada Lampiran 12. Implementasi dari rancangan tampilan layar hasil pencarian dapat dilihat pada
Lampiran 13. Implementasi dari rancangan tampilan layar edit metadata dapat dilihat pada Lampiran 14.
Validasi Antarmuka oleh Pengembang Pengembang memvalidasi antarmuka dengan melakukan pengujian fungsi sistem menggunakan metode black-box. Hasil pengujian black box tampilan layar pemilihan katalog dapat dilihat pada Lampiran 15. Hasil pengujian black box tampilan layar ketika objek dengan id add diklik dapat dilihat pada Lampiran 16. Hasil pengujian black box tampilan layar ketika objek dengan id browse diklik dapat dilihat pada Lampiran 17. Hasil pengujian black box tampilan layar ketika objek dengan id search di klik dapat dilihat pada Lampiran 18. Hasil pengujian black box tampilan layar hasil pencarian dapat dilihat pada Lampiran 19. Hasil pengujian black box tampilan layar edit metadata dapat dilihat pada Lampiran 20.
Validasi Antarmuka oleh Pengguna
Validasi antarmuka oleh pengguna dilakukan dengan mengujikannya kepada dua orang pegawai yang mempunyai tingkat penggunaan WINISIS berbeda. Pegawai yang sering menggunakan WINISIS mengalami kesulitan yang sama dengan pegawai yang jarang menggunakan WINISIS. Keduanya kesulitan menemukan elemen layar yang berfungsi untuk menambah text box baru untuk metadata tambahan. Pada layar tulisan “tambah data” text box diletakkan di atas text box yang ingin ditambah, berupa sebuah link dengan ukuran huruf yang lebih kecil.
Dari pengamatan yang dilakukan ketika kedua orang pengawai diminta untuk memasukkan metadata ke dalam WINISIS dan aplikasi data entry katalog, diketahui bahwa scrolling yang terlalu panjang pada aplikasi data entry katalog menyebabkan mereka harus mencari-cari elemen pada layar mana yang harus dipilih. Hal tersebut berbeda dengan WINISIS. Pada WINISIS, form pemasukan metadata ditampilkan pada satu layar tanpa kebutuhan untuk melakukan scrolling.
Pengawai juga sering menekan tombol enter untuk berpindah dari satu text box ke text box berikutnya. Pada WINISIS penekanan tombol enter berguna untuk berpindah dari satu text box ke text box berikutnya, sedangkan pada aplikasi data entry katalog memerlukan penekanan tombol tab.
Kedua pegawai tidak mengalami kesulitan dalam hal keterbacaan tulisan pada layar. Hal HEADER
MENU CONTENT
tersebut dikarenakan pemilihan warna yang tepat untuk teks pada layar. Kedua pegawai juga tidak kesulitan dalam membaca teks di layar monitor dengan resolusi 1024 x 768 piksel. Hal tersebut dikarenakan lebar layar dibuat tetap pada ukuran 760 piksel. Kombinasi pemilihan ikon dan pemilihan warna menjadi daya tarik ketika pegawai menggunakan aplikasi data entry.
KESIMPULAN DAN SARAN
KesimpulanAplikasi data entry katalog masih kalah dibandingkan dengan WINISIS dalam hal kemudahan penggunaan (user friendliness). Pengguna mengalami kesulitan ketika harus menambah text box baru. Selain itu scrolling yang terlalu panjang membuat pengguna memerlukan waktu yang lama untuk mencari dan memastikan text box yang benar untuk memasukkan metadata. Pengguna juga kesulitan ketika harus berpindah dari satu text box ke text box yang lain. Penggunaan perintah dari keyboard yang berbeda pada WINISIS dan aplikasi data entry katalog untuk berpindah dari satu text box ke texbox lainnya menjadi penyebabnya.
Kelebihan aplikasi data entry katalog terletak pada kemudahan keterbacaan teks. Hal tersebut dikarenakan pemilihan warna yang digunakan pada layar sudah tepat. Pemilihan warna juga menjadi daya tarik pengguna ketika menggunakan aplikasi data entry katalog. Selain itu keterbacaan teks pada layar juga dikarenakan pemilihan ukuran yang tetap untuk lebar layar yaitu 760 piksel. Saran
Aplikasi data entry katalog perlu beberapa perbaikan. Perbaikan bisa dilakukan dengan merubah teks berupa link untuk menambah text box dengan tombol di sisi kanan text box. Perbaikan lain yaitu dengan membuat form pemasukan tidak membutuhkan scrolling. Hal tersebut dapat dicapai dengan menggantikan penggunaan elemen fieldset dengan elemen static text field sebagai caption text box. Diperlukan juga pemberian informasi yang jelas kepada pengguna agar menekan tombol tab jika ingin berpindah text box dan jangan menekan tombol enter. Pemberian informasi dapat ditaruh di atas form masukan dengan warna yang mencolok, sehingga langsung dapat perhatian ketika pengguna mengunjungi halaman tersebut.
DAFTAR PUSTAKA
Andrew R. 2004. The CSS Anthology: 101 Essential Tips, Tricks & Hacks. Ed ke-1. USA: SitePoint Pty. Ltd.
Galitz WO. 2002. The Essential Guide To User Inteface Design: An Introduction TO GUI Design Principles and Techniques. Ed ke-2. Canada: John Wiley & Sons, Inc. Pressman RS. 2005. Software Engineering: A
Practitioner’s Approach. Ed ke-6. New York:McGraw-Hill Companies,Inc. Purnama PB. 2004. Kiat Praktis Menjadi
Desainer Web Profesional. Jakarta: PT Elex Media Komputindo.
[WIKI] Wikipedia contributors. Wikipedia, The Free Encyclopedia. 2007. Institutional repository. [terhubung berkala]. http://en.wikipedia.org/w/index.php?title=I nstitutional_repository&oldid=138539205. [19 jun 2007].
