PENGEMBANGAN ANTARMUKA DATA ENTRY KATALOG DI
PERPUSTAKAAN IPB
WAHYUDI KURNIAWAN SAPUTRA
G06400011
DEPARTEMEN ILMU KOMPUTER
PENGEMBANGAN ANTARMUKA DATA ENTRY KATALOG DI
PERPUSTAKAAN IPB
Skripsi
sebagai salah satu syarat untuk memperoleh gelar Sarjana Komputer
pada Fakultas Matematika dan Ilmu Pengetahuan Alam
Institut Pertanian Bogor
Oleh:
WAHYUDI KURNIAWAN SAPUTRA
G06400011
DEPARTEMEN ILMU KOMPUTER
FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
INSTITUT PERTANIAN BOGOR
ABSTRAK
WAHYUDI KURNIAWAN SAPUTRA. Pengembangan Antarmuka Data entry Katalog di Perpustakaan IPB. Dibimbing oleh KUDANG BORO SEMINAR dan HARI AGUNG ADRIANTO.
Kekayaan intelektual yang dihasilkan oleh civitas akademik IPB terejawantahkan dalam karya-karya nyata di masyarakat ataupun tertuang dalam tulisan-tulisan berupa disertasi, tesis, dan artikel. Karya intelektual yang berupa disertasi, tesis, dan artikel akan disimpan sebagai koleksi pustaka di perpustakaan IPB. Karya-karya intelektual berformat digital disimpan ke dalam penyimpanan digital / repositori dan diakses melalui infrastruktur internet. Metadata dari karya- intelektual (disertasi, tesis, dan artikel) dimasukkan ke dalam basis data dengan mengikuti format INDOMARC. Metadata dimasukkan ke dalam basis data melalui sebuah antarmuka. Antarmuka yang dirancang agar mudah dipelajari dan mudah digunakan oleh pegawai perpustakaan dalam memasukkan metadata.
Dalam membuat antarmuka pemasukan metadata (data entry), penulis mengikuti langkah-langkah perancangan antarmuka yang dijabarkan dalam Galitz (2002) antara lain: menganalisis profil pengguna, menganalisis tugas pengguna dan menentukan fungsi utama sistem, memahami prinsip perancangan antarmuka seperti penggunaan font, penerapan grouping, penggunaan tabel, membangun menu sistem dan alur navigasi, menentukan ukuran halaman web, memilih kontrol perangkat keras, memilih kontrol pada layar seperti command button, text box, static text field,
menuliskan pesan dan teks yang jelas, menyediakan umpanbalik, menentukan ikon, menentukan warna, mengatur tata letak, pengujian.
Aplikasi 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 text box 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.
Judul Skripsi
:
PENGEMBANGAN ANTARMUKA DATA ENTRY
KATALOG DI PERPUSTAKAAN IPB
Nama
:
Wahyudi Kurniawan Saputra
NIM
:
G06400011
Menyetujui,
Pembimbing I
Prof. Dr. Ir. Kudang B. Seminar, M.Sc.
NIP 131475575
Pembimbing II
Hari Agung A., S.Kom., M.Si.
NIP 132311918
Mengetahui,
Dekan Fakultas Matematika Dan Ilmu Pengetahuan Alam
Institut Pertanian Bogor
Prof. Dr. Ir. Yonny Koesmaryono, M.S.
NIP 131473999
RIWAYAT HIDUP
Penulis dilahirkan di Magetan pada tanggal 23 Januari 1982 dari ayah Yohanes Sujud dan ibu Elizabeth Suparti. Penulis merupakan anak pertama dari tiga bersaudara. Tahun 2000 penulis lulus dari SMU Negeri 1 Magetan dan pada tahun yang sama lulus seleksi masuk IPB melalui jalur Undangan Seleksi Masuk IPB (USMI). Penulis diterima di Program Studi Ilmu Komputer, Departemen Ilmu Komputer, Fakultas Matematika dan Ilmu Pengetahuan Alam.
KATA PENGANTAR
Puji syukur penulis panjatkan ke hadirat Tuhan Yang Maha Esa karena hanya dengan izin dan kehendak-Nya penulis dapat menyelesaikan skripsi yang berjudul Pengembangan Antarmuka Data entry katalog Perpustakaan Pusat IPB.
Penulis menyadari bahwa selesainya tugas akhir ini tidak terlepas dari pihak-pihak yang telah banyak membantu. Oleh karena itu penulis ingin mengucapkan terima kasih kepada :
1. Bapak Prof. Dr. Ir. Kudang Boro Seminar, M.Sc., Bapak Hari Agung Adrianto S.Kom., M.Si. sebagai dosen pembimbing yang telah memberikan bimbingan, motivasi dan saran dalam pengerjaan tugas akhir ini.
2. Bapak, Ibu dan adik-adikku tercinta di Magetan yang terus mendukung dalam doa.
3. Mas Jiwo yang telah membantu dukungan backend-nya, Tari untuk kasih sayang yang tulus, Tebe sahabat pendengar yang baik.
4. Seluruh staf perpustakaan pusat IPB khususnya staf pengolahan item bahan pustaka dan Drs. B. Mustafa, M.Lib atas segala masukannya serta Pak Wahyu yang telah memercayakan kunci. 5. Sobat-sobat eks asrama Ekalokasari (sadat, yusuf, nandar, adi, edwin, edo, toib, kang dimas),
al-khairi, iwan39,zaki39, risa40, bagus38, sobat-sobat jauh (sigit, samuel, dame, cuyong, dhyana, ing-ing), sobat-sobat komsel (yoni ‘ase’, anthony, ani, echa, andi, billy, pri, febi, imel), sobat-sobat juang (yanti, dini, yuyun, adit, restu, darmawan, asep dan keluarga besar ilkomerz37), sobat-sobat diaspora (santi, royan, okta, dan keluarga besar diaspora-pmk-ipb), sobat-sobat staf dan eks-staff TBI Bogor (mbak popi, mbak dian, fera tan, tesya), sobat-sobat IMPATA (amalia, koekoen, syah, widi).
6. Seluruh dosen dan staf Departemen Ilmu Komputer FMIPA IPB yang telah banyak membantu penulis pada masa perkuliahan dan penelitian.
Semoga tugas akhir ini dapat bermanfaat dan semoga Tuhan Yang Maha Esa membalas budi baik semua pihak yang telah membantu penulis. Amin.
Bogor, Oktober 2007
DAFTAR ISI
Halaman
DAFTAR GAMBAR ...viii
DAFTAR LAMPIRAN ...viii
PENDAHULUAN Tujuan ... 1
Ruang Lingkup... 1
Manfaat ... 1
TINJAUAN PUSTAKA System Perception... 2
Perancangan Antarmuka ... 2
Halaman Web Statis dan Dinamis... 2
Font dan Typeface... 2
Model Spiral... 2
Analisis Pengguna, Tugas, dan Lingkungan ... 2
Antarmuka yang Baik ... 3
METODE PENELITIAN Perancangan Antarmuka Pengguna... 3
Implementasi... 3
Validasi Antarmuka ... 3
HASIL DAN PEMBAHASAN Analisis Tugas Pengguna ... 4
Analisis Isi Tampilan (content object)... 4
Fungsi Utama ... 4
Rancangan Tampilan... 5
Font... 6
Grouping... 6
Tabel ... 6
Iconic Menu... 6
Alur Navigasi ... 6
Ukuran Halaman Web... 7
Command Button... 7
Text Box... 7
Static Text Field... 7
Warna... 7
Ikon ... 7
Tata Letak Halaman ... 8
Implementasi... 8
Validasi Antarmuka oleh Pengembang ... 8
Validasi Antarmuka oleh Pengguna... 8
KESIMPULAN DAN SARAN Kesimpulan ... 9
Saran ... 9
viii
DAFTAR GAMBAR
Halaman
1 Model spiral yang digunakan dalam perancangan antarmuka (Pressman 2005)...3
2 Rancangan format formulir masukan untuk sebuah atribut dan sub-atributnya. ...5
3 Rancangan format tampilan isi sebuah atribut dan sub-atributnya...5
4 Grouping dan penggunaan font arial untuk menuliskan deskripsi atribut (Deskripsi Fisik 300) pada halaman add dan edit...6
5 Penggunaan tabel pada halaman browse....6
6 Command button yang diberi label teks dan simbol yang mengindikasikan aksi yang akan dilakukan oleh command button....7
7 Ikon berukuran32 x 32 piksel pada menu utama yang digunakan untuk menuju ke halaman home....7
8 Rancangan umum tata letak halaman-halaman web. ...8
DAFTAR LAMPIRAN
Halaman 1 Daftar kode atribut, deskripsi atribut dan kode sub-atribut katalog tesis dan disertasi ...112 Alur navigasi ...12
3 Rancangan tampilan layar pemilihan katalog ...13
4 Rancangan tampilan layar ketika objek dengan id add di klik...14
5 Rancangan tampilan layar ketika objek dengan id browse di klik ...15
6 Rancangan tampilan layar ketika objek dengan id search di klik ...16
7 Rancangan tampilan layar hasil pencarian ...17
8 Rancangan tampilan layar edit metadata...18
9 Implementasi dari rancangan tampilan layar pemilihan katalog ...19
10 Implementasi dari rancangan tampilan layar ketika objek dengan id add di klik ...19
11 Implementasi dari rancangan tampilan layar ketika objek dengan id browse di klik...20
12 Implementasi dari rancangan tampilan layar ketika objek dengan id search di klik...20
13 Implementasi dari rancangan tampilan layar hasil pencarian...21
14 Implementasi dari rancangan tampilan layar edit metadata ...21
15 Hasil pengujian black box tampilan layar pemilihan katalog...22
16 Hasil pengujian black box tampilan layar ketika objek dengan id add diklik ...23
17 Hasil pengujian black box tampilan layar ketika objek dengan id browse diklik...24
18 Hasil pengujian black box tampilan layar ketika objek dengan id search di klik ...24
19 Hasil pengujian black box tampilan layar hasil pencarian ...25
PENDAHULUAN
Latar Belakang
Institut Pertanian Bogor (IPB) dalam upayanya menjadi salah satu institusi pendidikan tinggi berbasis riset yang bertaraf internasional terus berbenah diri. Salah satu pembenahan yang dilakukan adalah pembenahan manajemen kekayaan intelektual. Kekayaan intelektual yang dimiliki oleh IPB merupakan salah satu sumber daya untuk mendorong IPB ke arah institusi tinggi berbasis riset. Manajemen kekayaan intelektual mutlak diperlukan agar karya-karya dari hasil berpikir intelek dapat digunakan untuk menghasilkan karya lain yang bermanfaat bagi kesejahteraan umat manusia.
Kekayaan intelektual yang dihasilkan oleh civitas akademik IPB terejawantahkan dalam karya-karya nyata di masyarakat ataupun tertuang dalam tulisan-tulisan berupa disertasi, tesis, dan artikel. Karya intelektual yang berupa disertasi, tesis, dan artikel akan disimpan sebagai koleksi pustaka di perpustakaan IPB. Karya-karya intelektual disimpan dalam lembaran-lembaran kertas tercetak yang terjilid dengan mengikuti format yang telah ditentukan. Penyimpanan dalam bentuk lembaran-lembaran kertas yang terjilid membutuhkan tempat penyimpanan yang luas, selain itu lembaran-lembaran kertas rentan terhadap kerusakan seperti tinta luntur, sobek dan gangguan serangga. Oleh karena itu perpustakaan IPB mulai menyimpan karya-karya intelektual ke dalam format digital.
Agar karya-karya intelektual dapat diakses tanpa menyebabkan seseorang harus datang ke gedung perpustakaan, maka karya intelektual dalam format digital disimpan ke dalam penyimpanan digital / repositori dan diakses melalui infrastruktur internet. Metadata dari karya intelektual (disertasi, tesis, dan artikel) dimasukkan ke dalam basis data dengan mengikuti format INDOMARC.
Tujuan
Tujuan penelitian adalah mengembangkan antarmuka data entry katalog perpustakaan pusat IPB agar lebih user friendly dengan mengikuti langkah-langkah perancangan antarmuka seperti yang dijabarkan oleh Galitz (2002).
Ruang Lingkup
Lingkup penelitian ini adalah
yang meliputi:
1 Antarmuka pemilihan katalog,
2 Antarmuka pemasukan dan pengubahan item bahan pustaka,
3 Antarmuka penelusuran / browsing, 4 Antarmuka pencariandan hasil pencarian. Manfaat
Hasil pengembangan berupa terbentuknya antarmuka data entry katalog perpustakaan IPB yang lebih user friendly. Dengan antarmuka tersebut maka pegawai bagian pengolahan item bahan pustaka di perpustakaan IPB akan lebih nyaman dalam melakukan pemasukan, pengubahan, penelusuran, dan pencarian item bahan pustaka. Selain itu kesalahan dalam pemasukan data dan kebutuhan untuk melakukan training terhadap penggunaan antarmuka dapat diminimalisir.
TINJAUAN PUSTAKA
Repositori Institusi
Sebuah repositori institusi adalah sebuah wadah online untuk mengumpulkan, menyimpan dan menyebarkan hasil intelektual dari sebuah institusi dalam bentuk digital. Hasil intelektual dari sebuah institusi seperti universitas, dapat berupa artikel jurnal penelitian (artikel yang belum ditinjau maupun artikel yang sudah ditinjau), versi digital dari tesis dan disertasi, dan bisa juga aset digital yang tercipta lewat kehidupan akademik sehari-hari seperti dokumen administrasi dan catatan kuliah (WIKI 2007).
Dua tujuan utama pembuatan sebuah repositori institusi adalah:
1 Menyediakan akses terbuka ke hasil-hasil penelitian institusi dengan memberkas hasil-hasil penelitian tersebut ke dalam bentuk digital,
2 Menyimpan dan merawat aset-aset digital lain dari sebuah institusi termasuk yang tidak dipublikasikan atau literatur-literatur yang cepat hilang/rusak seperti tesis atau laporan teknis agar tetap awet.
2
System PerceptionModel mental pengguna / system perception adalah gambaran sistem yang ada di benak pengguna (Pressman 2005). Gambaran sistem yang ada di benak pengembang dengan yang ada di benak pengguna tidak sama. Oleh karena itu pengembang harus mengetahui profil pengguna dengan baik. Profil pengguna bisa meliputi tingkat pengalaman berhubungan dengan sistem dan aplikasi, tingkat pengalaman dengan suatu tugas, jenis penggunaan sistem, dan pelatihan yang diikuti (Galitz 2002).
Perancangan Antarmuka
Perancangan antarmuka adalah kegiatan membuat sebuah media komunikasi yang efektif antara manusia dengan komputer (Pressman 2005). Kegiatan perancangan antarmuka dimulai dengan mengindentifikasi pengguna, tugas dan lingkungan pengguna. Hasil identifikasi tugas pengguna digunakan untuk membuat skenario pengguna. Kemudian skenario pengguna dianalisis. Hasil analisis dari skenario pengguna digunakan untuk mendefinisikan objek dan aksi di antarmuka. Objek dan aksi yang telah didefinisikan menjadi dasar dalam pembuatan tata letak antarmuka yang menggambarkan rancangan grafis dan penempatan ikon-ikon, definisi dari teks penjelas di layar, spesifikasi dan pemberian judul window, dan spesifikasi dari item – item menu.
Halaman Web Statis dan Dinamis
Halaman web statis akan membatasi ukuran lebar halaman web sesuai dengan yang dispesifikasikan oleh perancang. Berbeda dengan halaman web statis, lebar halaman web dinamis akan menyesuaikan dengan resolusi monitor, dimana halaman web ditampilkan. (Andrew 2004)
Font dan Typeface
Font adalah kumpulan lengkap dari karakter/huruf dalam satu bentuk desain, ukuran dan gaya (Purnama 2004). Contoh font
yang lazim dikenal antara lain Times New Roman, Times, Arial, Helvetica, Kauffman, Webdings. Typeface/type adalah desain dari karakter berbentuk alphabet dan nomor yang memiliki kesatuan berdasarkan properti visual yang konsisten. Berdasarkan bentuknya,
typeface dibagi menjadi 4 jenis yaitu serif, sans-serif, script dan dekoratif (Purnama 2004).
Serif adalah jenis huruf yang memiliki kait
atau tangkai pada ujung-ujungnya, contoh font
ber-typeface serif adalah Times New Roman
dan Times. Serif memiliki tangkai atau kait yang berfungsi untuk membentuk garis tak tampak dan memandu pembaca untuk mengikuti baris teks. Oleh karena fungsi tersebut, pembaca akan memiliki ketahanan membaca lebih lama ketika membaca huruf-huruf kecil dengan tipe serif. Sans-serif adalah jenis huruf yang tidak memiliki kait, contoh
font ber-typeface sans-serif adalah Arial, Helvetica. Tipe sans-serif lebih sering digunakan untuk menulis judul dari sebuah teks atau artikel.
Script adalah jenis huruf yang bentuknya lebih mirip dengan tulisan tangan, biasanya seperti huruf bersambung, contoh font
ber-typeface scipt adalah Kauffman. Tipe script memiliki kesan anggun dan indah. Tipe script sering digunakan untuk melukiskan hal-hal yang berkaitan dengan perasaan cinta dan keindahan. Typeface dekoratif adalah jenis huruf yang lebih bebas dan yang tidak termasuk ke dalam 3 kategori sebelumnya, contoh font ber-typeface dekoratif adalah
Webdings. Model Spiral
Proses perancangan antarmuka bersifat iteratif. Terdapat empat aktivitas utama perancangan antarmuka dalam model spiral yaitu (lihat Gambar 1):
1 Analisis pengguna, tugas, dan lingkungan 2 Perancangan antarmuka
3 Implementasi 4 Validasi antarmuka
Empat aktivitas tersebut akan dilaksanakan dalam tiap iterasi perancangan antarmuka. Analisis Pengguna, Tugas, dan Lingkungan
Hal pertama yang harus dilakukan sebelum merancang antarmuka adalah dengan memahami profil pengguna antarmuka, kemudian tugas-tugas yang akan dilakukan pengguna untuk menyelesaikan pekerjaannya melalui antarmuka yang dibuat, lingkungan kerja pengguna.
Beberapa metode untuk mengetahui profil pengguna, tugas dan lingkungan kerja pengguna antara lain (Galitz 2002) :
2 Mengumpulkan informasi melalui unit-unit yang tiap hari membantu kesulitan pengguna (customer support, technical support dan help desk).
3 Mengumpulkan informasi melalui papan buletin eletronik (electronic bulletin board), milis (mailing list), dan dari surat elektronik (electronic mail) yang dikirim oleh pengguna.
Antarmuka yang Baik
Tata letak antarmuka mempengaruhi orang dalam berbagai cara. Jika orang menjadi bingung dan tidak efisien, orang akan mengalami lebih banyak kesulitan dalam mengerjakan pekerjaan dan akan membuat banyak kesalahan. Antarmuka yang kurang baik akan meningkatkan kadar stres bagi pengguna.
Antarmuka yang baik adalah antarmuka yang membuat pengguna berkonsentrasi pada informasi dan tugas yang akan dilaksanakan, dan bukan berkonsentrasi pada mekanisme yang digunakan untuk menampilkan informasi dan melaksanakan tugas (Galitz 2002).
METODE PENELITIAN
Proses pengembangan antarmuka data entry katalog pada penelitian ini mengacu pada model spiral (lihat Gambar 1).
Gambar 1 Model spiral yang digunakan dalam perancangan antarmuka (Pressman 2005).
Analisis Pengguna, Tugas Pengguna dan Lingkungan Kerja Pengguna
Pada proses pengembangan antarmuka
data entry katalog, profil calon pengguna dan
didapatkan dengan berkunjung ke lingkungan kerja pengguna dan melakukan wawancara dengan calon pengguna.
Perancangan Antarmuka Pengguna Tahap perancangan antarmuka mengikuti prinsip-prinsip perancangan yang dijabarkan dalam Galitz (2002) yang termuat dalam 14 langkah perancangan antarmuka, yaitu: 1 menganalisis profil pengguna
2 menganalisis tugas pengguna dan menenutkan fungsi utama sistem.
3 memahami prinsip perancangan antarmuka seperti penggunaan font, penerapan
grouping, penggunaan tabel.
4 Membangun menu sistem dan alur navigasi.
5 Menentukan ukuran halaman web. 6 Memilih kontrol perangkat keras
7 Memilih kontrol pada layar seperti command button, text box, static text field.
8 Menuliskan pesan dan teks yang jelas 9 Menyediakan umpanbalik
10Menyediakan fitur internasionalisasi dan aksesabilitas.
11Menentukan ikon 12Menentukan warna 13Mengatur tata letak 14Pengujian
Implementasi
Poin nomor 1 dan poin 2 pada 14 langkah perancangan antarmuka yang dijabarkan Galitz (2002) dilakukan pada tahap analisis pengguna, tugas pengguna dan lingkungan kerja pengguna pada model spiral seperti yang dijabarkan oleh Pressman (2005). Khusus untuk poin nomor 10, tidak diimplementasikan pada aplikasi data entry
katalog dikarenakan calon pengguna tidak memerlukan fitur seperti yang dijabarkan pada poin nomor 10 dari 14 langkah perancangan antarmuka.
Aplikasi dikembangkan pada platform
windows XP dengan menggunakan Apache 2.2.4 sebagai web server dan Postgresql 8.2.3 sebagai database server serta PHP 5.2.1 sebagai bahasa pemrograman web. Di sisi lain, CSS, Java Script dan Smarty template engine digunakan untuk merancang tampilan antarmuka.
Validasi Antarmuka
Validasi terhadap prototipe antarmuka dilakukan oleh pengembang dan pengguna. Validasi yang dilakukan oleh pengembang adalah validasi yang ditujukan untuk Implementasi Perancangan
4
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 Pengguna
Antarmuka 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
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
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 tombolperintah 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
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
6
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
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, lebarhalaman 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
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.
8
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
Kesimpulan
Aplikasi 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.
Lampiran 1 Daftar kode atribut, deskripsi atribut dan kode sub-atribut katalog tesis dan disertasi
DISERTASI TESIS
KODE ATRIBUT
DESKRIPSI ATRIBUT
KODE SUB-ATRIBUT
KODE ATRIBUT
DESKRIPSI ATRIBUT
KODE SUB-ATRIBUT 35 Nomor Kendali
Setempat
a 20 ISBN -
41 Kode Bahasa - 35 Nomor Kendali
Setempat
a
80 Nomor Panggil UDC
a 80 Nomor UDC a
99 Nomor Panggil Setempat
lab 99 Nomor Panggil lab
100 Penulis a 100 Penulis Utama a
245 Judul abc 245 Judul abc
248 Judul Lain - 260 Impresum abc
260 Penerbitan dan Distribusi
abc 300 Deskripsi Fisik abce
300 Deskripsi Fisik abce 440 Seri -
500 Catatan Umum - 500 Catatan Umum -
502 Catatan Karya[D/T/S]
ab 502 Catatan Karya
[D/T/S]
ab
504 Catatan Bibliografi a 504 Catatan
Bibliografi
-
520 Abstrak Bahasa Indonesia
- 520 Abstrak Bahasa
Indonesia
-
525 Abstrak Bahasa Inggris
- 525 Abstrak Bahasa
Inggris
-
550 Teks Lengkap - 550 Teks Lengkap -
650 Entri Tambahan Subyek
axyz 650 Subyek axyz
695 Kata Kunci a 695 Kata Kunci a
700 Entri Tambahan Nama Orang
- 759 Pembimbing a
710 Entri Tambahan Badan Korporasi
abc 850 Badan Pemilik ab
759 Pembimbing a 950 Nomor CD -
850 Badan Pemilik ab 980 Tanggal
Registrasi
-
950 Nomor CD - 985 Jumlah
Eksemplar
b
980 Tanggal - 990 Bahasa -
985 Jumlah Eksemplar b 998 Jenis Karya a
990 Bahasa - 999 Nomor
Registrasi
a
998 Jenis Karya a
12
Lampiran 2 Alur navigasi
Mulai
Pengguna memilih katalog Tampil halaman
pilih katalog
selesai Edit/ hapus
item terpilih
Tampil halaman
edit edit hapus
katalog terpilih
Pengguna memilih menu
Tampil halaman
browse
pilih browse
pilih search
Tampil halaman
search
Pengguna mengedit metadata konfirm
hapus
ya tidak
klik tombol
cari
Tampil halaman hasil cari
Simpan metadata hapus metadata
Tampil halaman
add
Pengguna memasukkan
metadata
pilih add
cari metadata
item terpilih
Lampiran 3 Rancangan tampilan layar pemilihan katalog
Spesifikasi Fungsi dan Objek pada tampilan layar pemilihan katalog NAMA
LAYAR
ID OBJEK
JENIS
OBJEK KETERANGAN
home TextLink Jika diklik akan menuju ke layar 1
add TextLink Jika diklik akan menuju ke layar 2
browse TextLink Jika diklik akan menuju ke layar 3
search TextLink Jika diklik akan menuju ke layar 4 Layar 2
dafKatalog TextLink Menampilkan daftar katalog
keterangan Label Menampilkan penjelasan aksi yang harus dilakukan pengguna dan menampilkan hasil dari aksi yang dilakukan oleh pengguna.
INFO
JUDUL
LO GO
daftKatalog
Keterangan
search home
add
14
Lampiran 4 Rancangan tampilan layar ketika objek dengan id add di klik
Spesifikasi Fungsi dan Objek pada tampilan layar ketika objek dengan id add di klik NAMA
LAYAR ID OBJEK
JENIS
OBJEK KETERANGAN
home TextLink Jika diklik akan menuju ke layar 1
add TextLink Jika diklik akan menuju ke layar 2
browse TextLink Jika diklik akan menuju ke layar 3
search TextLink Jika diklik akan menuju ke layar 4 deskAtrib Fieldset
Legend
Deskripsi atribut beserta kode atribut. Jika atribut mempunyai opsi mandatory maka teks
MANDATORY akan tampil. Jika atribut tidak mempunyai opsi mandatory maka teks MANDATORY tidak akan tampil.
Tambah_atrib TextLink Jika atribut mempunyai opsi multivalue, maka objek tambah_atrib akan tampil. Jika atribut tidak
mempunyai opsi multivalue, maka objek tambah_atrib tidak akan tampil.
sub Label Jika atribut mempunyai sub-atribut, maka objek sub akan tampil. Jika atribut tidak mempunyai sub-atribut , maka objek sub tidak akan tampil.
metadata Input Box Tempat untuk memasukkan nilai atribut atau subatribut
Layar 2
save Command Button
Jika diklik, maka metadata baru akan disimpan.
JUDUL
LOGO
search home
add
browse Sub metadata tambah_Atrib
deskAtrib
Sub metadata
tambah_Atrib deskAtrib
Lampiran 5 Rancangan tampilan layar ketika objek dengan id browse di klik
Spesifikasi Fungsi dan Objek pada tampilan layar ketika objek dengan id browse di klik NAMA
LAYAR
ID
OBJEK JENIS OBJEK KETERANGAN
home TextLink Jika diklik akan menuju ke layar 1
add TextLink Jika diklik akan menuju ke layar 2
browse TextLink Jika diklik akan menuju ke layar 3
search TextLink Jika diklik akan menuju ke layar 4
first Command Button
Jika diklik akan menuju item paling awal
previous Command Button
Jika diklik akan menuju item sebelumnya
next Command Buttonl
Jika diklik akan menuju item sesudahnya
last Command Button
Jika diklik akan menuju item paling akhir
delete Command Button
Jika diklik, akan menampilkan konfirmasi hapus
edit Command Button
Jika diklik, akan menampilkan proses edit
desk Label Berisi deskripsi atribut, kode atribut dan kode sub-atribut.
Layar 2
metadata Label Berisi nilai atribut.
JUDUL
LOGO
search home
add
browse
first previous next last
INFO
edit delete
desk metadata
desk metadata
desk metadata
desk metadata
16
Lampiran 6 Rancangan tampilan layar ketika objek dengan id search di klik
Spesifikasi Fungsi dan Objek pada tampilan layar ketika objek dengan id search di klik NAMA
LAYAR
ID OBJEK
JENIS
OBJEK KETERANGAN
home TextLink Jika diklik akan menuju ke layar 1
add TextLink Jika diklik akan menuju ke layar 2
browse TextLink Jika diklik akan menuju ke layar 3
search TextLink Jika diklik akan menuju ke layar 4 teks_cari Text box Teks yang dicari
cari Command
Button
Tombol pencarian. Jika diklik akan menuju ke layar 5
Layar 2
hasil_cari Frame Tempat untuk menampilkan hasil pencarian
INFO
JUDUL
LO GO
search home
add
browse
Lampiran 7 Rancangan tampilan layar hasil pencarian
Spesifikasi Fungsi dan Objek pada tampilan layar hasil pencarian NAMA
LAYAR
ID OBJEK
JENIS
OBJEK KETERANGAN
home TextLink Jika diklik akan menuju ke layar 1
add TextLink Jika diklik akan menuju ke layar 2
browse TextLink Jika diklik akan menuju ke layar 3
search TextLink Jika diklik akan menuju ke layar 4 teks_cari Text box Teks yang dicari
cari Command
Button
Tombol pencarian. Jika diklik akan menuju ke layar 5
desk Label Berisi deskripsi atribut, kode atribut dan kode sub-atribut.
metadata Label Berisi nilai atribut. Layar 2
edit Command Button
Jika diklik, akan menampilkan proses edit.
INFO
JUDUL
LOGO
search home
add
browse
teks_cari cari
edit
desk metadata
desk metadata
desk metadata
desk metadata
18
Lampiran 8 Rancangan tampilan layar edit metadata
Spesifikasi Fungsi dan Objek pada tampilan layar edit metadata NAMA
LAYAR ID OBJEK
JENIS
OBJEK KETERANGAN
home TextLink Jika diklik akan menuju ke layar 1
add TextLink Jika diklik akan menuju ke layar 2
browse TextLink Jika diklik akan menuju ke layar 3
search TextLink Jika diklik akan menuju ke layar 4 deskAtrib Fieldset
Legend
Deskripsi atribut beserta kode atribut. Jika atribut mempunyai opsi mandatory maka teks
MANDATORY akan tampil. Jika atribut tidak mempunyai opsi mandatory maka teks MANDATORY tidak akan tampil.
Tambah_atrib TextLink Jika atribut mempunyai opsi multivalue, maka objek tambah_atrib akan tampil. Jika atribut tidak
mempunyai opsi multivalue, maka objek tambah_atrib tidak akan tampil.
sub Label Jika atribut mempunyai sub-atribut, maka objek sub akan tampil. Jika atribut tidak mempunyai sub-atribut , maka objek sub tidak akan tampil.
metadata Input Box Jika atribut tidak mempunyai sub-atribut, maka objek metadata adalah nilai dari atribut. Jika aribut
mempunyai sub-atribut maka objek metadata adalah nilai dari sub-atribut.
save Command Button
Jika diklik, maka metadata yang telah di-edit akan disimpan.
Layar 2
reset Command Button
Jika diklik, maka text box yang telah berisi metadata akan dihapus.
INFO
JUDUL
LO GO
search home
add
browse Sub metadata tambah_Atrib
deskAtrib
Sub metadata
tambah_Atrib deskAtrib
Lampiran 9 Implementasi dari rancangan tampilan layar pemilihan katalog
20
Lampiran 11 Implementasi dari rancangan tampilan layar ketika objek dengan id browse di klik
Lampiran 13 Implementasi dari rancangan tampilan layar hasil pencarian
22
Lampiran 15 Hasil pengujian black box tampilan layar pemilihan katalog No. Deskripsi
Uji
Kondisi Awal Skenario Uji Hasil yang diharapkan Hasil Uji Tampil Daftar katalog sukses 1 Menguji
fungsi untuk menampilkan daftar katalog web browser baru dibuka Ketikkan alamat URL data entry katalog di address bar
suatu web browser
Tampil penjelasan aksi yang harus dilakukan pengguna
sukses
Katalog yang terpilih akan ditandai berbeda dari yang lain
sukses
Tampil nama katalog terpilih sukses 2 Menguji
respon aksi pemilihan katalog Belum ada katalog yang dipilih
Klik salah satu katalog
Tampil penjelasan aksi yang harus dilakukan pengguna
sukses Belum ada katalog yang dipilih Klik menu browse
Tampil penjelasan bahwa katalog harus dipilih terlebih dahulu
sukses 3 Menguji
respon aksi pemilihan
menu browse Sudah ada katalog yang dipilih
Klik menu
browse
Tampil halaman browse
katalog sukses Belum ada katalog yang dipilih Klik menu search
Tampil penjelasan bahwa katalog harus dipilih terlebih dahulu
sukses 4 Menguji
respon aksi pemilihan
menu search Sudah ada katalog yang dipilih
Klik menu
search
Tampil halaman search
katalog
sukses
Belum ada katalog yang dipilih
Klik menu add Tampil penjelasan bahwa katalog harus dipilih terlebih dahulu
sukses 5 Menguji
respon aksi pemilihan
menu add Sudah ada katalog yang dipilih
Lampiran 16 Hasil pengujian black box tampilan layar ketika objek dengan id add diklik
No. Deskripsi Uji Kondisi Awal Skenario Uji Hasil yang diharapkan Hasil Uji atribut
mempunyai opsi
mandatory
teks MANDATORY akan tampil disamping kode atribut sukses atribut tidak mempunyai opsi mandatory
teks MANDATORY tidak akan tampil disamping kode atribut sukses atribut mempunyai opsi multivalue
Link tambah data akan tampil sukses atribut tidak mempunyai opsi multivalue
Link tambah data tidak akan tampil.
sukses
atribut mempunyai sub-atribut
Teks ^subatribut akan tampil.
sukses 1 Menguji proses
menampilkan seluruh atribut dan formulir masukan
Klik menu Add
atribut tidak mempunyai sub-atribut
Teks ^subatribut tidak akan tampil.
sukses
2 Menguji proses tambah atribut
Halaman add
sudah ditampilkan seluruhnya
Klik link tambah data
Fieldset baru dari atribut yang ditambahkan diletakkan dibawah
fieldset sebelumnya
sukses
Semua field
masukan dalam keadaan belum terisi
Muncul pesan bahwa semua field dalam keadaan tidak terisi
sukses
Field
masukan dengan opsi
mandatory
tidak diisi
Muncul pesan bahwa field
dengan opsi mandatory
belum terisi sukses Field masukan dengan opsi mandatory sudah diisi
Muncul pesan bahwa metadata sukses disimpan
sukses 3 Menguji proses
simpan metadata
Semua field
masukan dalam keadaan belum terisi
Field diisi dengan karakter ‘^’ (tudung)
Karakter ‘^’akan disimpan dan diganti dengan kata ‘ TUDUNG ’
24
Lampiran 17 Hasil pengujian black box tampilan layar ketika objek dengan id browse diklik No. Deskripsi Uji Kondisi Awal Skenario
Uji
Hasil yang diharapkan Hasil Uji Klik tombol
First
Item pertama akan ditampilkan
sukses
Klik tombol
Previous
Item sebelumnya akan ditampilkan
sukses
Klik tombol
Next
Item sesudahnya akan ditampilkan
sukses 1 Menguji
tombol-tombol navigasi
Halaman browse
telah ditampilkan
Klik tombol
Last
Item terakhir akan ditampilkan
sukses
Halaman browse
telah ditampilkan
Tombol
delete diklik
Akan muncul konfirmasi penghapusan
sukses
Item setuju dihapus
Tampil halaman yang menerangkan bahwa item berhasil dihapus
Sukses 2 Menguji fungsi
hapus item
Tombol delete
diklik
Item batal dihapus
Item yang batal dihapus ditampilkan
sukses
3 Menguji fungsi edit
Halaman browse
telah ditampilkan
Tombol edit
diklik
Tampil halaman edit item sukses
Lampiran 18 Hasil pengujian black box tampilan layar ketika objek dengan id search di klik No. Deskripsi
Uji
Kondisi Awal
Skenario Uji
Hasil yang diharapkan Hasil Uji Jika string yang dicari ditemukan,
item metadata yang mengandung string pencarian ditampilkan dan akan tampil infromasi jumlah item metadata yang ditemukan untuk string yang dicari.
sukses 1 Menguji
tombol pencarian
Halaman
search
ditampilkan
Ketikkan string pencarian
Jika string yang dicari tidak ditemukan, tidak ada item metadata yang ditampilkan, dan tampil informasi bahwa string pencarian tidak ditemukan.
Lampiran 19 Hasil pengujian black box tampilan layar hasil pencarian No. Deskripsi
Uji
Kondisi Awal Skenario Uji Hasil yang diharapkan
Hasil Uji jumlah item metadata
yang ditemukan untuk suatu string pencarian lebih dari lima
Tombol navigasi
next akan ditamplkan
sukses Tombol pencarian
di-klik untuk mencari string pencarian yang diketikkan di kotak pencarian
jumlah item metadata yang ditemukan untuk suatu string pencarian kurang dari atau sama dengan lima
Tombol navigasi
next tidak akan ditamplkan
sukses
item metadata ke 6 sampai dengan ke 10 ditampilkan
sukses Klik tombol next untuk
pertama kali
Tombol prev dan tombol next
ditampilkan
sukses
item metadata ke11 sampai dengan item metadata terakhir ditampilkan
sukses 1 Menguji
kemunculan tombol navigasi hasil pencarian
Jumlah item metadata yang ditemukan 11 sampai dengan 15
Klik tombol next untuk yang kedua kali
Tombol next tidak ditampilkan, tombol prev
ditampilkan
sukses
2 Menguji tombol edit
Halaman hasil pencarian ditampilkan
Klik tombol edit untuk suatu item metadata yang ditemukan.
Halaman edit item metadata akan ditampilkan
26
Lampiran 20 Hasil pengujian black box tampilan layar edit metadata No. Deskripsi Uji Kondisi
Awal
Skenario Uji Hasil yang diharapkan Hasil Uji atribut mempunyai
opsi mandatory
teks MANDATORY akan tampil disamping kode atribut
sukses
atribut tidak mempunyai opsi
mandatory
teks MANDATORY tidak akan tampil disamping kode atribut
sukses
atribut mempunyai opsi multivalue
Link tambah data akan tampil
sukses
atribut tidak mempunyai opsi
multivalue
Link tambah data tidak akan tampil.
sukses
atribut mempunyai sub-atribut
Teks ^subatribut akan tampil.
sukses 1 Menguji proses
menampilkan seluruh atribut dan formulir masukan
Klik menu
Add
atribut tidak mempunyai sub-atribut
Teks ^subatribut tidak akan tampil.
sukses
2 Menguji proses tambah atribut
Halaman
add sudah ditampilkan seluruhnya
Klik link tambah data
Fieldset baru dari atribut yang ditambahkan diletakkan dibawah fieldset
sebelumnya
sukses
Field masukan dengan opsi
mandatory tidak diisi
Muncul pesan bahwa field
dengan opsi mandatory
belum terisi
sukses
Field masukan dengan opsi
mandatory sudah diisi
Muncul pesan bahwa metadata sukses disimpan
sukses 3 Menguji proses
simpan metadata
Data atribut yang
di-edit sudah diberikan nilai yang baru.
Field diisidengan karakter ‘^’ (tudung)
Karakter ‘^’akan disimpan dan diganti dengan kata ‘ TUDUNG ’
PENGEMBANGAN ANTARMUKA DATA ENTRY KATALOG DI
PERPUSTAKAAN IPB
WAHYUDI KURNIAWAN SAPUTRA
G06400011
DEPARTEMEN ILMU KOMPUTER
ABSTRAK
WAHYUDI KURNIAWAN SAPUTRA. Pengembangan Antarmuka Data entry Katalog di Perpustakaan IPB. Dibimbing oleh KUDANG BORO SEMINAR dan HARI AGUNG ADRIANTO.
Kekayaan intelektual yang dihasilkan oleh civitas akademik IPB terejawantahkan dalam karya-karya nyata di masyarakat ataupun tertuang dalam tulisan-tulisan berupa disertasi, tesis, dan artikel. Karya intelektual yang berupa disertasi, tesis, dan artikel akan disimpan sebagai koleksi pustaka di perpustakaan IPB. Karya-karya intelektual berformat digital disimpan ke dalam penyimpanan digital / repositori dan diakses melalui infrastruktur internet. Metadata dari karya- intelektual (disertasi, tesis, dan artikel) dimasukkan ke dalam basis data dengan mengikuti format INDOMARC. Metadata dimasukkan ke dalam basis data melalui sebuah antarmuka. Antarmuka yang dirancang agar mudah dipelajari dan mudah digunakan oleh pegawai perpustakaan dalam memasukkan metadata.
Dalam membuat antarmuka pemasukan metadata (data entry), penulis mengikuti langkah-langkah perancangan antarmuka yang dijabarkan dalam Galitz (2002) antara lain: menganalisis profil pengguna, menganalisis tugas pengguna dan menentukan fungsi utama sistem, memahami prinsip perancangan antarmuka seperti penggunaan font, penerapan grouping, penggunaan tabel, membangun menu sistem dan alur navigasi, menentukan ukuran halaman web, memilih kontrol perangkat keras, memilih kontrol pada layar seperti command button, text box, static text field,
menuliskan pesan dan teks yang jelas, menyediakan umpanbalik, menentukan ikon, menentukan warna, mengatur tata letak, pengujian.
Aplikasi 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 text box 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.
PENDAHULUAN
Latar Belakang
Institut Pertanian Bogor (IPB) dalam upayanya menjadi salah satu institusi pendidikan tinggi berbasis riset yang bertaraf internasional terus berbenah diri. Salah satu pembenahan yang dilakukan adalah pembenahan manajemen kekayaan intelektual. Kekayaan intelektual yang dimiliki oleh IPB merupakan salah satu sumber daya untuk mendorong IPB ke arah institusi tinggi berbasis riset. Manajemen kekayaan intelektual mutlak diperlukan agar karya-karya dari hasil berpikir intelek dapat digunakan untuk menghasilkan karya lain yang bermanfaat bagi kesejahteraan umat manusia.
Kekayaan intelektual yang dihasilkan oleh civitas akademik IPB terejawantahkan dalam karya-karya nyata di masyarakat ataupun tertuang dalam tulisan-tulisan berupa disertasi, tesis, dan artikel. Karya intelektual yang berupa disertasi, tesis, dan artikel akan disimpan sebagai koleksi pustaka di perpustakaan IPB. Karya-karya intelektual disimpan dalam lembaran-lembaran kertas tercetak yang terjilid dengan mengikuti format yang telah ditentukan. Penyimpanan dalam bentuk lembaran-lembaran kertas yang terjilid membutuhkan tempat penyimpanan yang luas, selain itu lembaran-lembaran kertas rentan terhadap kerusakan seperti tinta luntur, sobek dan gangguan serangga. Oleh karena itu perpustakaan IPB mulai menyimpan karya-karya intelektual ke dalam format digital.
Agar karya-karya intelektual dapat diakses tanpa menyebabkan seseorang harus datang ke gedung perpustakaan, maka karya intelektual dalam format digital disimpan ke dalam penyimpanan digital / repositori dan diakses melalui infrastruktur internet. Metadata dari karya intelektual (disertasi, tesis, dan artikel) dimasukkan ke dalam basis data dengan mengikuti format INDOMARC.
Tujuan
Tujuan penelitian adalah mengembangkan antarmuka data entry katalog perpustakaan pusat IPB agar lebih user friendly dengan mengikuti langkah-langkah perancangan antarmuka seperti yang dijabarkan oleh Galitz (2002).
Ruang Lingkup
Lingkup penelitian ini adalah
yang meliputi:
1 Antarmuka pemilihan katalog,
2 Antarmuka pemasukan dan pengubahan item bahan pustaka,
3 Antarmuka penelusuran / browsing, 4 Antarmuka pencariandan hasil pencarian. Manfaat
Hasil pengembangan berupa terbentuknya antarmuka data entry katalog perpustakaan IPB yang lebih user friendly. Dengan antarmuka tersebut maka pegawai bagian pengolahan item bahan pustaka di perpustakaan IPB akan lebih nyaman dalam melakukan pemasukan, pengubahan, penelusuran, dan pencarian item bahan pustaka. Selain itu kesalahan dalam pemasukan data dan kebutuhan untuk melakukan training terhadap penggunaan antarmuka dapat diminimalisir.