Pengembangan Antarmuka Data entry Katalog di Perpustakaan IPB
PENGEMBANGAN ANTARMUKA DATA ENTRY KATALOG DI
PERPUSTAKAAN IPB
WAHYUDI KURNIAWAN SAPUTRA
G06400011
DEPARTEMEN ILMU KOMPUTER
FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
INSTITUT PERTANIAN BOGOR
2007
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
2007
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 karyakarya 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 karyaintelektual (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 langkahlangkah 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.
Kata Kunci: data entry, katalog, perancangan antarmuka.
Judul Skripsi
:
Nama
NIM
:
:
PENGEMBANGAN ANTARMUKA DATA ENTRY
KATALOG DI PERPUSTAKAAN IPB
Wahyudi Kurniawan Saputra
G06400011
Menyetujui,
Pembimbing I
Pembimbing II
Prof. Dr. Ir. Kudang B. Seminar, M.Sc.
Hari Agung A., S.Kom., M.Si.
NIP 131475575
NIP 132311918
Mengetahui,
Dekan Fakultas Matematika Dan Ilmu Pengetahuan Alam
Institut Pertanian Bogor
Prof. Dr. Ir. Yonny Koesmaryono, M.S.
NIP 131473999
Tanggal Lulus:
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.
Selama kuliah, penulis aktif mengikuti berbagai kegiatan di Persekutuan Mahasiswa
Kristen (PMK) IPB. Pada tahun 2001 dan 2003, penulis menjadi asisten dosen untuk praktikum
mata kuliah Agama Kristen. Pada Januari-Maret 2004 penulis menjalankan Praktik Lapangan (PL)
di bagian sistem informasi Pusat Data dan Informasi Departemen Pertanian Republik Indonesia
(PUSDATIN DEPTAN RI) selama 2 bulan dengan tugas mengerjakan prototipe sistem informasi
dokumen usulan pengajuan angka kredit (DUPAK). Pada Bulan Maret 2005 sampai dengan
September 2006 penulis bekerja di The British Institute Bogor sebagai student advisor yang
bertugas mengelola administrasi siswa-siswi kursus bahasa inggris dengan pengajar native
speaker.
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
Wahyudi Kurniawan Saputra
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
DAFTAR PUSTAKA ....................................................................................................................... 9
vii
DAFTAR GAMBAR
Halaman
1
2
3
4
5
6
7
8
Model spiral yang digunakan dalam perancangan antarmuka (Pressman 2005)........................3
Rancangan format formulir masukan untuk sebuah atribut dan sub-atributnya.........................5
Rancangan format tampilan isi sebuah atribut dan sub-atributnya.............................................5
Grouping dan penggunaan font arial untuk menuliskan deskripsi atribut (Deskripsi Fisik 300)
pada halaman add dan edit.........................................................................................................6
Penggunaan tabel pada halaman browse. ...................................................................................6
Command button yang diberi label teks dan simbol yang mengindikasikan aksi yang akan
dilakukan oleh command button. ...............................................................................................7
Ikon berukuran 32 x 32 piksel pada menu utama yang digunakan untuk menuju ke halaman
home...........................................................................................................................................7
Rancangan umum tata letak halaman-halaman web. .................................................................8
DAFTAR LAMPIRAN
Halaman
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Daftar kode atribut, deskripsi atribut dan kode sub-atribut katalog tesis dan disertasi ...........11
Alur navigasi ............................................................................................................................12
Rancangan tampilan layar pemilihan katalog ..........................................................................13
Rancangan tampilan layar ketika objek dengan id add di klik.................................................14
Rancangan tampilan layar ketika objek dengan id browse di klik ...........................................15
Rancangan tampilan layar ketika objek dengan id search di klik ............................................16
Rancangan tampilan layar hasil pencarian ...............................................................................17
Rancangan tampilan layar edit metadata..................................................................................18
Implementasi dari rancangan tampilan layar pemilihan katalog ..............................................19
Implementasi dari rancangan tampilan layar ketika objek dengan id add di klik ....................19
Implementasi dari rancangan tampilan layar ketika objek dengan id browse di klik...............20
Implementasi dari rancangan tampilan layar ketika objek dengan id search di klik................20
Implementasi dari rancangan tampilan layar hasil pencarian...................................................21
Implementasi dari rancangan tampilan layar edit metadata .....................................................21
Hasil pengujian black box tampilan layar pemilihan katalog...................................................22
Hasil pengujian black box tampilan layar ketika objek dengan id add diklik ..........................23
Hasil pengujian black box tampilan layar ketika objek dengan id browse diklik.....................24
Hasil pengujian black box tampilan layar ketika objek dengan id search di klik ....................24
Hasil pengujian black box tampilan layar hasil pencarian .......................................................25
Hasil pengujian black box tampilan layar edit metadata ..........................................................26
viii
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 karyakarya 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 karyakarya 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
pengembangan antarmuka data entry katalog
yang meliputi:
1 Antarmuka pemilihan katalog,
2 Antarmuka pemasukan dan pengubahan
item bahan pustaka,
3 Antarmuka penelusuran / browsing,
4 Antarmuka pencarian dan 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.
Repositori institusi biasanya menjadi
bagian dari sebuah perpustakaan digital.
Sebuah perpustakaan digital mempunyai
fungsi seperti mengumpulkan, menyimpan ke
tempat
penyimpan,
mengelompokkan,
mengkatalogkan, memelihara agar tetap awet,
dan menyediakan akses ke koleksi buku-buku
digital, seolah-olah kita melakukannya seperti
dalam perpustakaan konvensional (WIKI
2007).
1
System Perception
Model 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 hurufhuruf 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 bertypeface 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) :
1 Mengunjungi tempat kerja pengguna dan
berbincang-bincang dengan pengguna
untuk mendapatkan pemahaman tentang
tingkat pengalaman pengguna berhubungan
dengan sistem dan aplikasi, tingkat
pengalaman pengguna dengan suatu tugas,
jenis penggunaan sistem, dan pelatihan
yang diikuti
2
2 Mengumpulkan informasi melalui unitunit 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).
Validasi
antarmuka
Implementasi
Analisis
pengguna, tugas
dan lingkungan
Perancangan
antarmuka
pengguna
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
tugas-tugas yang akan dilakukan pengguna
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
10 Menyediakan fitur internasionalisasi dan
aksesabilitas.
11 Menentukan ikon
12 Menentukan warna
13 Mengatur tata letak
14 Pengujian
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
melakukan pengujian fungsi-fungsi sistem dan
lebih bersifat teknis. Pengujian yang
3
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 FUNGSI
PENGGUNA
UTAMA
Memasu memilih katalog Home
kkan
[A.1.1]
metadata memasukkan
Add
[A.1]
metadata
baru
berdasarkan
atribut dan subatribut [A.1.2]
Pemeriks memilih katalog Home
aan
[A.2.1]
metadata memeriksa item Browse
yang
metadata satu per
telah
satu[A.2.2]
dimasuk
kan
memeriksa item Search
[A.2]
metadata
berdasarkan kata
kunci[A.2.3]
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
4
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 subatribut, 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.
Deskripsi atribut
Kode atribut
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 subatribut. Objek label yang berisi nilai dari
atribut akan menampilkan nilai-nilai dari subatribut 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.
Deskripsi atribut
Kode atribut
Nomor panggil Setempat(99)[lab]=
^l T
^a 582.284
^b HASr
Nomor Panggil Setempat (99)
Nilai sub-atribut
Kode sub-atribut
Gambar 3 Rancangan format tampilan isi
sebuah atribut dan sub-atributnya.
^l
T
^a
582.284
^b
HASr
Kode Sub-atribut
Nilai sub-atribut
Gambar 2 Rancangan
format
formulir
masukan untuk 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
5
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 masingmasing. Beberapa atribut mempunyai subatribut, 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.
6
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 barisbaris 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.
7
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.
HEADER
MENU
CONTENT
FOOTER
Gambar 8 Rancangan umum tata
halaman-halaman web.
letak
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
8
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.
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].
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.
9
LAMPIRAN
Lampiran 1 Daftar kode atribut, deskripsi atribut dan kode sub-atribut katalog tesis dan
disertasi
DISERTASI
TESIS
KODE
ATRIBUT
35
41
80
99
100
245
248
260
300
500
502
504
520
DESKRIPSI
ATRIBUT
Nomor Kendali
Setempat
Kode Bahasa
Nomor Panggil
UDC
Nomor Panggil
Setempat
Penulis
Judul
Judul Lain
Penerbitan dan
Distribusi
Deskripsi Fisik
Catatan Umum
Catatan
Karya[D/T/S]
Catatan Bibliografi
KODE
SUBATRIBUT
a
KODE
ATRIBUT
ISBN
-
35
a
80
Nomor Kendali
Setempat
Nomor UDC
a
lab
99
Nomor Panggil
lab
a
abc
abc
100
245
260
300
Penulis Utama
Judul
Impresum
Deskripsi Fisik
a
abc
abc
abce
abce
ab
440
500
502
ab
a
504
-
520
-
525
axyz
550
650
Seri
Catatan Umum
Catatan Karya
[D/T/S]
Catatan
Bibliografi
Abstrak Bahasa
Indonesia
Abstrak Bahasa
Inggris
Teks Lengkap
Subyek
axyz
a
-
695
759
Kata Kunci
Pembimbing
a
a
abc
850
Badan Pemilik
ab
a
ab
950
980
Nomor CD
Tanggal
Registrasi
Jumlah
Eksemplar
Bahasa
Jenis Karya
Nomor
Registrasi
-
759
850
950
Nomor CD
-
985
980
985
990
Tanggal
Jumlah Eksemplar
Bahasa
b
-
990
998
999
998
999
Jenis Karya
Nomor Registrasi
a
a
550
650
695
700
710
KODE
SUBATRIBUT
-
20
Abstrak Bahasa
Indonesia
Abstrak Bahasa
Inggris
Teks Lengkap
Entri Tambahan
Subyek
Kata Kunci
Entri Tambahan
Nama Orang
Entri Tambahan
Badan Korporasi
Pembimbing
Badan Pemilik
525
DESKRIPSI
ATRIBUT
a
-
b
a
a
11
Lampiran 2 Alur navigasi
Mulai
Tampil halaman
pilih katalog
Pengguna
memilih katalog
katalog terpilih
Tampil
halaman
add
Pengguna
memilih menu
pilih add
pilih search
pilih browse
Tampil
halaman
browse
Pengguna
memasukkan
metadata
Tampil
halaman
search
klik
tombol
cari
cari metadata
tidak
item
terpilih
konfirm
hapus
hapus
ya
hapus metadata
Tampil
halaman
hasil cari
Edit/
hapus
edit
Tampil
halaman
edit
item
terpilih
edit metadata
Pengguna
mengedit
metadata
Simpan metadata
selesai
12
Lampiran 3 Rancangan tampilan layar pemilihan katalog
LO
GO
JUDUL
home
daftKatalog
add
Keterangan
browse
search
INFO
Spesifikasi Fungsi dan Objek pada tampilan layar pemilihan katalog
NAMA
ID
JENIS
KETERANGAN
LAYAR
OBJEK
OBJEK
Layar 2
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
dafKatalog TextLink
Menampilkan daftar katalog
keterangan Label
Menampilkan penjelasan aksi yang harus dilakukan
pengguna dan menampilka
PERPUSTAKAAN IPB
WAHYUDI KURNIAWAN SAPUTRA
G06400011
DEPARTEMEN ILMU KOMPUTER
FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
INSTITUT PERTANIAN BOGOR
2007
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
2007
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 karyakarya 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 karyaintelektual (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 langkahlangkah 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.
Kata Kunci: data entry, katalog, perancangan antarmuka.
Judul Skripsi
:
Nama
NIM
:
:
PENGEMBANGAN ANTARMUKA DATA ENTRY
KATALOG DI PERPUSTAKAAN IPB
Wahyudi Kurniawan Saputra
G06400011
Menyetujui,
Pembimbing I
Pembimbing II
Prof. Dr. Ir. Kudang B. Seminar, M.Sc.
Hari Agung A., S.Kom., M.Si.
NIP 131475575
NIP 132311918
Mengetahui,
Dekan Fakultas Matematika Dan Ilmu Pengetahuan Alam
Institut Pertanian Bogor
Prof. Dr. Ir. Yonny Koesmaryono, M.S.
NIP 131473999
Tanggal Lulus:
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.
Selama kuliah, penulis aktif mengikuti berbagai kegiatan di Persekutuan Mahasiswa
Kristen (PMK) IPB. Pada tahun 2001 dan 2003, penulis menjadi asisten dosen untuk praktikum
mata kuliah Agama Kristen. Pada Januari-Maret 2004 penulis menjalankan Praktik Lapangan (PL)
di bagian sistem informasi Pusat Data dan Informasi Departemen Pertanian Republik Indonesia
(PUSDATIN DEPTAN RI) selama 2 bulan dengan tugas mengerjakan prototipe sistem informasi
dokumen usulan pengajuan angka kredit (DUPAK). Pada Bulan Maret 2005 sampai dengan
September 2006 penulis bekerja di The British Institute Bogor sebagai student advisor yang
bertugas mengelola administrasi siswa-siswi kursus bahasa inggris dengan pengajar native
speaker.
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
Wahyudi Kurniawan Saputra
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
DAFTAR PUSTAKA ....................................................................................................................... 9
vii
DAFTAR GAMBAR
Halaman
1
2
3
4
5
6
7
8
Model spiral yang digunakan dalam perancangan antarmuka (Pressman 2005)........................3
Rancangan format formulir masukan untuk sebuah atribut dan sub-atributnya.........................5
Rancangan format tampilan isi sebuah atribut dan sub-atributnya.............................................5
Grouping dan penggunaan font arial untuk menuliskan deskripsi atribut (Deskripsi Fisik 300)
pada halaman add dan edit.........................................................................................................6
Penggunaan tabel pada halaman browse. ...................................................................................6
Command button yang diberi label teks dan simbol yang mengindikasikan aksi yang akan
dilakukan oleh command button. ...............................................................................................7
Ikon berukuran 32 x 32 piksel pada menu utama yang digunakan untuk menuju ke halaman
home...........................................................................................................................................7
Rancangan umum tata letak halaman-halaman web. .................................................................8
DAFTAR LAMPIRAN
Halaman
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Daftar kode atribut, deskripsi atribut dan kode sub-atribut katalog tesis dan disertasi ...........11
Alur navigasi ............................................................................................................................12
Rancangan tampilan layar pemilihan katalog ..........................................................................13
Rancangan tampilan layar ketika objek dengan id add di klik.................................................14
Rancangan tampilan layar ketika objek dengan id browse di klik ...........................................15
Rancangan tampilan layar ketika objek dengan id search di klik ............................................16
Rancangan tampilan layar hasil pencarian ...............................................................................17
Rancangan tampilan layar edit metadata..................................................................................18
Implementasi dari rancangan tampilan layar pemilihan katalog ..............................................19
Implementasi dari rancangan tampilan layar ketika objek dengan id add di klik ....................19
Implementasi dari rancangan tampilan layar ketika objek dengan id browse di klik...............20
Implementasi dari rancangan tampilan layar ketika objek dengan id search di klik................20
Implementasi dari rancangan tampilan layar hasil pencarian...................................................21
Implementasi dari rancangan tampilan layar edit metadata .....................................................21
Hasil pengujian black box tampilan layar pemilihan katalog...................................................22
Hasil pengujian black box tampilan layar ketika objek dengan id add diklik ..........................23
Hasil pengujian black box tampilan layar ketika objek dengan id browse diklik.....................24
Hasil pengujian black box tampilan layar ketika objek dengan id search di klik ....................24
Hasil pengujian black box tampilan layar hasil pencarian .......................................................25
Hasil pengujian black box tampilan layar edit metadata ..........................................................26
viii
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 karyakarya 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 karyakarya 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
pengembangan antarmuka data entry katalog
yang meliputi:
1 Antarmuka pemilihan katalog,
2 Antarmuka pemasukan dan pengubahan
item bahan pustaka,
3 Antarmuka penelusuran / browsing,
4 Antarmuka pencarian dan 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.
Repositori institusi biasanya menjadi
bagian dari sebuah perpustakaan digital.
Sebuah perpustakaan digital mempunyai
fungsi seperti mengumpulkan, menyimpan ke
tempat
penyimpan,
mengelompokkan,
mengkatalogkan, memelihara agar tetap awet,
dan menyediakan akses ke koleksi buku-buku
digital, seolah-olah kita melakukannya seperti
dalam perpustakaan konvensional (WIKI
2007).
1
System Perception
Model 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 hurufhuruf 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 bertypeface 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) :
1 Mengunjungi tempat kerja pengguna dan
berbincang-bincang dengan pengguna
untuk mendapatkan pemahaman tentang
tingkat pengalaman pengguna berhubungan
dengan sistem dan aplikasi, tingkat
pengalaman pengguna dengan suatu tugas,
jenis penggunaan sistem, dan pelatihan
yang diikuti
2
2 Mengumpulkan informasi melalui unitunit 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).
Validasi
antarmuka
Implementasi
Analisis
pengguna, tugas
dan lingkungan
Perancangan
antarmuka
pengguna
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
tugas-tugas yang akan dilakukan pengguna
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
10 Menyediakan fitur internasionalisasi dan
aksesabilitas.
11 Menentukan ikon
12 Menentukan warna
13 Mengatur tata letak
14 Pengujian
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
melakukan pengujian fungsi-fungsi sistem dan
lebih bersifat teknis. Pengujian yang
3
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 FUNGSI
PENGGUNA
UTAMA
Memasu memilih katalog Home
kkan
[A.1.1]
metadata memasukkan
Add
[A.1]
metadata
baru
berdasarkan
atribut dan subatribut [A.1.2]
Pemeriks memilih katalog Home
aan
[A.2.1]
metadata memeriksa item Browse
yang
metadata satu per
telah
satu[A.2.2]
dimasuk
kan
memeriksa item Search
[A.2]
metadata
berdasarkan kata
kunci[A.2.3]
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
4
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 subatribut, 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.
Deskripsi atribut
Kode atribut
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 subatribut. Objek label yang berisi nilai dari
atribut akan menampilkan nilai-nilai dari subatribut 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.
Deskripsi atribut
Kode atribut
Nomor panggil Setempat(99)[lab]=
^l T
^a 582.284
^b HASr
Nomor Panggil Setempat (99)
Nilai sub-atribut
Kode sub-atribut
Gambar 3 Rancangan format tampilan isi
sebuah atribut dan sub-atributnya.
^l
T
^a
582.284
^b
HASr
Kode Sub-atribut
Nilai sub-atribut
Gambar 2 Rancangan
format
formulir
masukan untuk 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
5
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 masingmasing. Beberapa atribut mempunyai subatribut, 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.
6
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 barisbaris 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.
7
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.
HEADER
MENU
CONTENT
FOOTER
Gambar 8 Rancangan umum tata
halaman-halaman web.
letak
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
8
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.
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].
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.
9
LAMPIRAN
Lampiran 1 Daftar kode atribut, deskripsi atribut dan kode sub-atribut katalog tesis dan
disertasi
DISERTASI
TESIS
KODE
ATRIBUT
35
41
80
99
100
245
248
260
300
500
502
504
520
DESKRIPSI
ATRIBUT
Nomor Kendali
Setempat
Kode Bahasa
Nomor Panggil
UDC
Nomor Panggil
Setempat
Penulis
Judul
Judul Lain
Penerbitan dan
Distribusi
Deskripsi Fisik
Catatan Umum
Catatan
Karya[D/T/S]
Catatan Bibliografi
KODE
SUBATRIBUT
a
KODE
ATRIBUT
ISBN
-
35
a
80
Nomor Kendali
Setempat
Nomor UDC
a
lab
99
Nomor Panggil
lab
a
abc
abc
100
245
260
300
Penulis Utama
Judul
Impresum
Deskripsi Fisik
a
abc
abc
abce
abce
ab
440
500
502
ab
a
504
-
520
-
525
axyz
550
650
Seri
Catatan Umum
Catatan Karya
[D/T/S]
Catatan
Bibliografi
Abstrak Bahasa
Indonesia
Abstrak Bahasa
Inggris
Teks Lengkap
Subyek
axyz
a
-
695
759
Kata Kunci
Pembimbing
a
a
abc
850
Badan Pemilik
ab
a
ab
950
980
Nomor CD
Tanggal
Registrasi
Jumlah
Eksemplar
Bahasa
Jenis Karya
Nomor
Registrasi
-
759
850
950
Nomor CD
-
985
980
985
990
Tanggal
Jumlah Eksemplar
Bahasa
b
-
990
998
999
998
999
Jenis Karya
Nomor Registrasi
a
a
550
650
695
700
710
KODE
SUBATRIBUT
-
20
Abstrak Bahasa
Indonesia
Abstrak Bahasa
Inggris
Teks Lengkap
Entri Tambahan
Subyek
Kata Kunci
Entri Tambahan
Nama Orang
Entri Tambahan
Badan Korporasi
Pembimbing
Badan Pemilik
525
DESKRIPSI
ATRIBUT
a
-
b
a
a
11
Lampiran 2 Alur navigasi
Mulai
Tampil halaman
pilih katalog
Pengguna
memilih katalog
katalog terpilih
Tampil
halaman
add
Pengguna
memilih menu
pilih add
pilih search
pilih browse
Tampil
halaman
browse
Pengguna
memasukkan
metadata
Tampil
halaman
search
klik
tombol
cari
cari metadata
tidak
item
terpilih
konfirm
hapus
hapus
ya
hapus metadata
Tampil
halaman
hasil cari
Edit/
hapus
edit
Tampil
halaman
edit
item
terpilih
edit metadata
Pengguna
mengedit
metadata
Simpan metadata
selesai
12
Lampiran 3 Rancangan tampilan layar pemilihan katalog
LO
GO
JUDUL
home
daftKatalog
add
Keterangan
browse
search
INFO
Spesifikasi Fungsi dan Objek pada tampilan layar pemilihan katalog
NAMA
ID
JENIS
KETERANGAN
LAYAR
OBJEK
OBJEK
Layar 2
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
dafKatalog TextLink
Menampilkan daftar katalog
keterangan Label
Menampilkan penjelasan aksi yang harus dilakukan
pengguna dan menampilka