PENGEMBANGAN SITUS PTN MENGGUNAKAN USABILITY ENGINEERING DAN EVALUASI USABILITY DENGAN KUESIONER SUMI
HAMIDAH
DEPARTEMEN ILMU KOMPUTER FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM INSTITUT PERTANIAN BOGOR BOGOR 2013
PENGEMBANGAN SITUS PTN MENGGUNAKAN USABILITY ENGINEERING DAN EVALUASI USABILITY DENGAN KUESIONER SUMI
HAMIDAH
Skripsi sebagai salah satu syarat memperoleh gelar Sarjana Komputer pada Departemen Ilmu Komputer
DEPARTEMEN ILMU KOMPUTER FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM INSTITUT PERTANIAN BOGOR BOGOR 2013
ABSTRAK HAMIDAH. Development State Universities Site using Usability Engineering and Usability Evaluation with SUMI Questionnaire. Supervised by ARIF IMAM SUROSO and ENDANG PURNAMA GIRI. This research presents the development of state university site by applying usability engineering. The implementation was conducted by using PHP and HTML5. This site contains video streaming to facilitate user in accessing the profile of state universities. Usability engineering design method was used to create an attractive user interface. This user interface was evaluated by using SUMI questionnaire. The results of evaluation showed that all scores of parameters such as efficiency, affect, helpfulnes, control, learnability and usability are above the average. Keywords : usability engineering, software usability measurement inventory questionnaire.
Judul Skripsi Nama NIM
: Pengembangan Situs PTN Menggunakan Usability Engineering dan Evaluasi Usability dengan Kuesioner SUMI : Hamidah : G64061534
Menyetujui:
Pembimbing I,
Pembimbing II,
Dr. Ir. Arif Imam Suroso, M.Sc. CS NIP. 19610618 198601 1 002
Endang Purnama Giri, S.Kom. M.Kom NIP. 19821010 200604 1 027
Mengetahui: Ketua Departemen Ilmu Komputer,
Dr. Ir. Agus Buono, M.Si, M.Kom NIP. 19660702 199302 1 001
Tanggal Lulus:
PRAKATA Puji syukur penulis panjatkan kepada Allah Subhanahu Wa Ta’ala karena berkat rahmat dan karunia-Nya penulis dapat menyelesaikan tugas akhir ini. Tugas akhir ini berjudul Pengembangan Situs PTN Menggunakan Usability Engineering dan Evaluasi Usability dengan Kuesioner SUMI. Penelitian ini dilaksanakan mulai Agustus 2009 sampai dengan Desember 2011, bertempat di Departemen Ilmu Komputer. Terima kasih penulis ucapkan kepada seluruh pihak yang telah terlibat dalam pembuatan tugas akhir ini. 1 Bapak Dr. Ir. Arif Imam Suroso, M.Sc. CS selaku pembimbing I dan Bapak Endang Purnama Giri, S.Kom. M.Kom selaku pembimbing II atas bimbingan dan arahannya selama mengerjakan tugas akhir ini. 2 Ibu Dr. Yani Nurhadryani S.Si, M.T selaku penguji pada sidang tugas akhir penulis. 3 Kedua orang tua dan keluarga besar Yoes yang tiada henti memberikan semangat dan doanya untuk setiap langkah yang penulis lakukan. 4 Hendro Prabowo Hadi selaku teman satu bimbingan atas saran dan semangatnya, Elvira Nurfadillah, Fanny Risnuraini, dan Dedek Apriyani yang bersedia menjadi pembahas pada seminar tugas akhir penulis serta Muhammad Irawan yang selalu membantu penulis dalam menyelesaikan revisi. 5 Teman-teman seperjuangan Ilmu Komputer 43 yang selalu menjadi inspirasi yang sangat berguna. 6 Teman-teman seperjuangan Serum-G dan para panitia Pesta Sains yang selalu mengingatkan Penulis untuk istiqomah menyelesaikan tugas akhir ini. 7 Teman-teman kosan As-sakinah yang selalu bersama-sama berjuang menyelesaikan gelar sarjana. Serta seluruh pihak yang telah membantu baik secara langsung maupun tidak langsung dalam pelaksanaan tugas akhir ini dan tidak dapat penulis tuliskan satu per satu. Semoga penelitian ini dapat bermanfaat dan dapat dikembangkan di masa yang akan datang.
Depok, Februari 2013
Hamidah
RIWAYAT HIDUP Penulis dilahirkan pada tanggal 29 Juni 1987 di kabupaten Bogor sebagai anak kedelapan dari sebelas bersaudara dari pasangan Basani Yoes dan Tasripah. Pada tahun 2006 penulis berhasil menyelesaikan pendidikan Menengah Atas di SMAN 88 Jakarta Timur. Penulis diterima di Institut Pertanian Bogor melalui jalur Undangan Seleksi Mahasiswa IPB (USMI) dengan jenjang strata 1 pada tahun yang sama. Pada tahun 2007, penulis mengambil program studi mayor Departemen Ilmu Komputer dan program studi minor Riset Operasi Departemen Matematika FMIPA IPB. Setahun kemudian, penulis menjadi pengajar les privat siswa SMA pada mata pelajaran Fisika dan Matematika. Selama menjalani masa studi, penulis aktif mengikuti berbagai kegiatan kemahasiswaan di fakultas. Sejak tahun 2007 sampai 2009, penulis menjadi pengurus tetap LDF Serum-G FMIPA IPB. Dalam menyusun tugas akhir penulis, sempat mengikuti projek lepas bersama dengan alumni Ilmu Komputer IPB dalam membuat sistem informasi kumpulan data untuk Fakultas Ilmu Pengetahuan Budaya, Universitas Indonesia selama 2 bulan sejak Agustus sampai Oktober 2010. Dalam projek itu, penulis bertugas sebagai pemrogram sekaligus desainer. Pada bulan November 2010 sampai dengan Januari 2011, penulis juga sempat kerja kontrak di Badan Akreditasi Negara Perguruan Tinggi sebagai Data Staf sekaligus menganalisis kinerja sistem informasi yang digunakan oleh instansi pemerintah tersebut.
DAFTAR ISI Halaman DAFTAR TABEL..................................................................................................................... vii DAFTAR GAMBAR ................................................................................................................ vii DAFTAR LAMPIRAN ............................................................................................................. vii PENDAHULUAN Latar Belakang ...................................................................................................................... 1 Tujuan .................................................................................................................................. 1 Ruang Lingkup ...................................................................................................................... 1 Rumusan Masalah ................................................................................................................. 1 Manfaat Penelitian ................................................................................................................. 1 TINJAUAN PUSTAKA Usability Engineering ............................................................................................................ 1 Multimedia ............................................................................................................................ 2 Perguruan Tinggi Negeri ........................................................................................................ 2 Usability................................................................................................................................ 3 Pengukuran Usability............................................................................................................. 3 Software Usability Measurement Inventory (SUMI) ............................................................... 3 METODE PENELITIAN A Analisis Kebutuhan ........................................................................................................... 4 1 Profil Pengguna ............................................................................................................. 4 2 Analisis Tugas Kontekstual ........................................................................................... 4 3 Keterbatasan Platform ................................................................................................... 4 4 Prinsip Umum Desain .................................................................................................... 4 5 Tujuan Usability ............................................................................................................ 4 B Desain, Evaluasi, dan Pengembangan ................................................................................ 5 1 Work Reengineering ...................................................................................................... 5 2 Desain Model Konseptual .............................................................................................. 5 3 Standar Desain Layar..................................................................................................... 5 4 Desain Antarmuka Detail............................................................................................... 5 5 Evaluasi Antarmuka Detail ............................................................................................ 5 Lingkungan Pengembangan Sistem ........................................................................................ 5 HASIL DAN PEMBAHASAN A Analisis Kebutuhan ........................................................................................................... 5 1 Profil Pengguna ............................................................................................................. 5 2 Analisis Tugas Kontekstual ........................................................................................... 6 3 Keterbatasan Platform ................................................................................................... 6 4 Prinsip Umum Desain .................................................................................................... 7 5 Tujuan Usability ............................................................................................................ 8 B Desain, Evaluasi, dan Pengembangan ................................................................................ 8 1 Work Reengineering ...................................................................................................... 8 2 Desain Model Konseptual .............................................................................................. 8 3 Standar Desain Layar..................................................................................................... 8 4 Desain Antarmuka Detail............................................................................................... 9 5 Evaluasi Antarmuka Detail ...........................................................................................10 KESIMPULAN DAN SARAN...................................................................................................13 Kesimpulan ..........................................................................................................................13 Saran .................................................................................................................................13
v
Halaman DAFTAR PUSTAKA ................................................................................................................13 LAMPIRAN ..............................................................................................................................15
DAFTAR TABEL Halaman 1 2 3 4 5 6 7 8
Daftar beberapa PTN di Jabodetabek ..................................................................................... 2 Data hasil analisis profil pengguna.......................................................................................... 6 Keberhasilan task pengujian 1. ..............................................................................................11 Keberhasilan task pengujian 2 ...............................................................................................11 Nilai error rate setiap pengguna ............................................................................................11 Lama waktu penyelesaian task ...............................................................................................11 Perhitungan skor SUMI .........................................................................................................12 Skor hasil evaluasi SUMI ......................................................................................................12
DAFTAR GAMBAR Halaman 1 The usability engineering lifecycle (Mayhew 1999) ................................................................. 2 2 Perspektif usability (Veenendaal 1998). .................................................................................. 3 3 Skema metode penelitian (merujuk pada usability engineering Mayhew 1999) ........................ 4 4 Sketsa pembagian ruang ......................................................................................................... 8 5 Sketsa antarmuka utama secara umum .................................................................................... 8 6 Font judul dan bodytext .......................................................................................................... 9 7 Warning message box.............................................................................................................. 9 8 Logo situs. ............................................................................................................................. 9 9 Logo pada title situs ............................................................................................................... 9 10 Error message .......................................................................................................................10 11 User berada di page News .....................................................................................................10 12 Title ketika mouse over ..........................................................................................................10 13 Hasil evaluasi usability dengan kuesioner SUMI ....................................................................12
DAFTAR LAMPIRAN Halaman 1 Informasi PTN pada website Dikti .........................................................................................14 2 Kuesioner profil pengguna.....................................................................................................15 3 Entity relational diagram (ERD) ...........................................................................................17 4 Antarmuka page Home ..........................................................................................................18 5 Penggunaan paging pada situs yang dikembangkan ...............................................................19 6 Penggunaan scrolling terpanjang. ..........................................................................................20 7 Penggunaan scrolling terpendek ............................................................................................21 8 Form pengisian komentar news dan events.............................................................................22 9 Perincian waktu penyelesaian setiap task oleh pengguna dalam detik .....................................23 10 Pernyataan kuesioner SUMI ..................................................................................................24 11 Fasilitas compare PTN .........................................................................................................26 12 Fasilitas compare Fakultas.....................................................................................................27 13 Fasilitas compare Departemen ...............................................................................................28 14 Fasilitas compare semua jenis Departemen ............................................................................29
vi
1
PENDAHULUAN Latar Belakang Setiap tahunnya, Indonesia memiliki jutaan siswa SMA kelas 3 sederajat. Tercatat pada tahun 2009 sebanyak 2.2 juta siswa SMA sederajat yang lulus dan siap memasuki dunia kerja atau melanjutkan sekolah ke perguruan tinggi (Indosiar 2009). Dari 2.2 juta lulusan SMA sederajat tersebut, hanya sekitar 420 ribu (Cardiyan 2009) yang tertarik melanjutkan ke Perguruan Tinggi Negeri (PTN) dengan mengikuti seleksi nasional masuk Perguruan Tinggi Negeri atau SNMPTN. Namun, tidak semua lulusan SMA tersebut mengetahui informasi lengkap mengenai kualitas PTN yang mereka inginkan. Informasi mengenai PTN tersebut biasa mereka peroleh hanya dari sekolah asal mereka yang mungkin disajikan kurang lengkap. Untuk melengkapi informasi yang dibutuhkan, tidak sedikit dari mereka yang mencarinya lewat internet. Tetapi, informasi mengenai PTN tersebut tidak berada dalam satu wadah yang memudahkan mereka dalam melakukan perbandingan mengenai PTN yang diinginkan. Saat ini Dikti telah membuat sistem yang sama, namun informasi yang disajikan pun hanya berupa alamat lengkap kampus, nomor telepon yang bisa dihubungi, email, dan alamat website kampus yang ditampilkan dengan sangat sederhana (Lampiran 1). Informasi mengenai PTN juga dapat diakses di situs PTN yang bersangkutan. Namun, informasi yang disajikan lebih ditujukan kepada user yang sudah menjadi mahasiswa atau pegawai yang bekerja di PTN tersebut. Pemaparan di atas itulah yang menjadi latar belakang penulis melakukan penelitian dalam pengembangan situs PTN di Jabodetabek menggunakan metode usability engineering sekaligus mengevaluasi usability dari situs tersebut. Situs ini diimplementasikan dengan menggunakan bahasa pemrograman PHP, HTML5, Javascript, CSS, dan menggunakan MySQL sebagai database. Situs ini juga menggunakan video streaming untuk memudahkan pengguna dalam mengakses informasi yang mereka butuhkan mengenai PTN tersebut. Tujuan Tujuan dari penelitian ini adalah : 1 Merancang situs PTN dengan memperhatikan usability sistem dari segi
learnability, efficiency, affect, helpfulness, dan control. 2 Mewadahi semua PTN di Jabodetabek sehingga akan lebih mudah bagi user untuk melakukan perbandingan PTN yang diminati. Ruang Lingkup Penelitian ini memiliki ruang lingkup : 1 Diimplementasikan dengan menggunakan bahasa pemrograman PHP, Javascript, CSS, dan HTML5. 2 Situs PTN ini menggunakan video streaming dan menggunakan MySQL sebagai database. 3 Pengembangan situs mengikuti metode usability engineering, tetapi tidak sampai tahap instalasi. 4 Data yang digunakan ada sebanyak 8 PTN di Jabodetabek (Tabel 1). Informasi mengenai PTN tersebut diperoleh dengan melakukan browsing yang kemudian dimasukkan dalam database. Rumusan Masalah Rumusan masalah pada penelitian ini adalah bagaimana mengintegrasikan situs PTN di Jabodetabek dengan memperhatikan usability sehingga akan lebih nyaman digunakan oleh user. Manfaat Penelitian Manfaat dari penelitian ini adalah terancangnya sebuah situs yang dapat mewadahi seluruh PTN yang ada di Jabodetabek. Situs ini nantinya dapat menjadi alternatif bagi user dalam mengakses informasi yang dibutuhkan mengenai PTN yang diminati.
TINJAUAN PUSTAKA Usability Engineering Seffah dan Metzker (2009) dalam bukunya merangkum beberapa definisi mengenai usability engineering dari para pakar. Berikut ini adalah beberapa definisi tersebut: Usability Engineering adalah suatu teknik pendekatan ke arah pengembangan perangkat lunak atau sistem yang meliputi partisipasi pengguna sejak dari permulaan hingga produk selesai dibuat (Faulkner 2000, diacu dalam Seffah dan Metzker 2009) Mayhew (1999) mendefinisikan usability engineering sebagai suatu disiplin ilmu yang
2
menyediakan metode terstruktur untuk mencapai usability pada desain antarmuka pengguna selama pengembangan produk. Gambar 1 menunjukkan siklus usability engineering. Analisis Kebutuhan Profil Pengguna
Analisis Tugas Kontekstual
Kapabilitas Platform
Prinsip Umum Desain
Style Guide
Desain, Evaluasi, dan Pengembangan Standar Desain Layar
Desain Model Konseptual
Prototipe
Desain Antarmuka Detail
Evaluasi Antarmuka Detail
Evaluasi Desain Model Mockups Tidak Evaluasi Model Mockups
Memenuhi Tujuan Usability
Memenuhi Tujuan Usability
Tidak
Ya
Tidak
Adakah Kekurangan ? Ya
Ya
Style Guide
Style Guide
Salah satu konten multimedia adalah video. Video merupakan film berdurasi penuh atau klip film. Video dapat disimpan dalam bentuk analog seperti kaset video VHS, atau dalam bentuk digital seperti WMV, AVI, MPEG, dan lain sebagainya (Answers 2006, diacu dalam Wiradarya 2006). Perguruan Tinggi Negeri
Style Guide Tidak
Fungsi Terpenuhi ? Ya
Instalasi Instalasi
Berikut ini beberapa definisi multimedia menurut beberapa ahli (Anonim 2005, diacu dalam Waterworth 1991): 1 Kombinasi dari komputer dan video. 2 Kombinasi dari paling sedikit dua media input atau output. Media ini dapat berupa audio (suara, musik), animasi, video, teks, grafik, dan gambar. 3 Alat yang dapat menciptakan presentasi yang dinamis dan interaktif yang mengkombinasikan teks, grafik, animasi, audio, dan video. 4 Multimedia dalam konteks komputer menurut adalah: pemanfaatan komputer untuk membuat dan menggabungkan teks, grafik, audio, video, dengan menggunakan tools yang memungkinkan pemakai berinteraksi, berkreasi, dan berkomunikasi.
Tujuan Usability
Work Reengeneering
yang berbeda atau untuk melihat informasi yang berbeda dalam cara yang paling cocok (video untuk direkam, gambar untuk subjek yang statik, grafik untuk subjek yang interaktif, dan lain-lain) (Waterworth 1991).
User Feedback
Masalah Terselesaikan
Ya
Selesai
Tidak
Perguruan Tinggi Negeri (PTN) merupakan satuan pendidikan tinggi milik pemerintah yang pengelolaan dan pengawasannya diatur oleh negara. Sebagai instansi pemerintah, PTN merupakan badan hukum publik secara perspektif. PTN yang digunakan dalam situs yang akan dikembangkan hanya PTN yang berada di Jabodetabek. Daftar PTN tersebut beserta lokasinya (Organisasi.org 2008) dapat dilihat pada Tabel 1.
Perbaikan
Gambar 1 The Usability Engineering Lifecycle (Mayhew 1999). Multimedia Multimedia berasal dari dua kata, yaitu multi dan media. Multi berarti beberapa dan media berarti sarana atau alat. Multimedia adalah kombinasi dari teknologi. Kombinasi ini dimaksudkan untuk menyediakan cara alternatif visualisasi dan berinteraksi dengan informasi. Prinsip ini dapat diterapkan untuk melihat bagian informasi yang sama dari perspektif
Tabel 1 Daftar beberapa PTN di Jabodetabek No Nama PTN Lokasi 1 Universitas Indonesia Depok 2 Universitas Terbuka Jakarta 3 Institut Pertanian Bogor Bogor 4 Universitas Negeri Jakarta Jakarta 5 UIN Syarif Hidayatullah Jakarta 6 Politeknik Negeri Jakarta Jakarta 7 STAN Jakarta 8 STIS Jakarta
3
Usability Usability adalah istilah yang dipakai untuk menjelaskan kemudahan yang didapat seseorang dalam menggunakan sebuah alat atau objek ciptaan manusia lainnya dalam mencapai sebuah tujuan. Usability merupakan cerminan dari kebiasan yang umumnya dilakukan pengguna situs. Nielsen dan Loranger (2006) mengemukakan bahwa memperhatikan usability merupakan hal yang penting agar sebuah situs dapat bertahan. Situs yang memiliki usability tinggi memiliki peluang untuk lebih sering dikunjungi. Secara umum, cara mengukur dan menilai usability sebuah situs bergantung pada bagaimana pengguna dapat menyelesaikan sekumpulan task. Terdapat beberapa ukuran umum yang dapat dijadikan tolak ukur usability, yakni (Nielsen & Loranger 2006): 1 Success Rate Tingkat kesuksesan pengguna dalam menyelesaikan semua task yang ada pada situs. 2 The Time a Task Requires Waktu yang dibutuhkan pengguna untuk menyelesaikan sebuah task. 3 Error Rate Tingkat kesalahan yang dilakukan pengguna saat menyelesaikan task. 4 Users' Subjective Satisfaction Tingkat kepuasan pengguna dalam menyelesaikan sebuah task.
Gambar 2 menunjukkan keterkaitan kedua perspektif tersebut. Oleh karena itu, perlu dilakukan pengukuran kualitas penggunaan untuk mengevaluasi kualitas produk perangkat lunak tersebut. Software Usability Measurement Inventory (SUMI) Software usability measurement inventory (SUMI) adalah kuesioner yang di kembangkan oleh University College Cork untuk mengukur kepuasan pengguna ketika menggunakan suatu perangkat lunak. Dari kepuasan pengguna itulah kualitas penggunaan suatu perangkat lunak dapat terukur (Bevan & Macleod 1994). SUMI adalah kuesioner yang berisi 50 pernyataan yang berstandar internasional dan tersedia dalam bahasa Inggris, Jerman, Belanda, Spanyol, dan Italia. Contoh kuesioner SUMI dapat diunduh secara gratis di alamat situsnya. Pengguna yang dilibatkan dalam pengukuran perangkat lunak dengan SUMI minimal berjumlah 10 pengguna. Setiap pernyataan dari kuesioner SUMI mempunyai tiga jenis tanggapan, yaitu setuju, tidak tahu, dan tidak setuju. Pernyataanpernyataan tersebut menggambarkan dimensi pertimbangan pengguna saat menggunakan perangkat lunak. Lima kategori pernyataan tersebut merupakan aspek usability yang terdiri atas (Veenendaal 1998): -
Efficiency: ukuran kepuasan pengguna terhadap ketersediaan informasi dalam perangkat lunak. Contoh pernyataan: Saya dapat dengan mudah membuat perangkat lunak ini melakukan apa yang saya inginkan.
-
Affect: ukuran kepuasan pengguna terhadap kenyamanan perangkat lunak. Contoh pernyataan: Perangkat lunak ini disajikan dengan menarik.
-
Helpfulnes: ukuran kepuasan pengguna terhadap kemampuan perangkat lunak dalam membantu pengguna menyelesaikan masalah dengan membaca informasi atau navigasi. Contoh pernyataan: Menurut saya, informasi help yang disediakan tidak terlalu bermanfaat.
-
Control: ukuran kepuasan pengguna di mana pengguna merasa dapat menjelajah perangkat lunak dengan mudah.
Pengukuran Usability Usability dari sebuah produk dapat diuji dari dua perspektif yang berbeda, yaitu kualitas produk dan kualitas penggunaan. Kedua perspektif tersebut saling berkaitan, artinya untuk mencapai kualitas penggunaan yang baik, kualitas dari produk juga harus baik (Veenendaal 1998). Mempengaruhi
Kualitas Produk
Kualitas penggunaan
Bergantung pada Gambar 2 Perspektif Usability (Veenendaal 1998).
4
Contoh pernyataan: Relatif mudah untuk berpindah dari satu bagian perangkat lunak ke bagian yang lain. -
Learnability: ukuran kepuasan pengguna terhadap kemudahan perangkat lunak untuk dikuasai atau seberapa mudah fasilitas baru dalam perangkat lunak dapat dipelajari. Contoh pernyataan: Sangat mudah untuk melupakan cara melakukan sesuatu dalam perangkat lunak ini.
METODE PENELITIAN Penelitian dilakukan dengan mengikuti metode usability engineering lifecycle (Mayhew 1999). Skema metode penelitian dapat dilihat pada Gambar 3. Penelitian ini sebelumnya telah dilakukan oleh Yohannes (2008) mengenai Strategi Customer Relationship Management dan Evaluasi Software Usability Measurement Inventory dalam Pembuatan Web Perusahaan (Studi Kasus : Sekolah Musik Gema Suara) dan oleh Muhammad Maulana mengenai Pengembangan Situs Faro’idh (Penghitungan Waris) Menggunakan Web Usability Engineering Life Cycle. Analisis Kebutuhan Profil Pengguna
Analisis Tugas Kontekstual
Kapabilitas Platform
Prinsip Umum Desain
Tujuan Usability
Desain, Evaluasi, dan Pengembangan
Desain Model Konseptual
Standar Desain Layar
1 Profil Pengguna Pada tahap ini dilakukan pendeskripsian karakteristik khusus dari pengguna, seperti usia, frekuensi penggunaan komputer dan internet, serta informasi yang dibutuhkan oleh pengguna mengenai situs yang ingin dirancang. Pengguna tersebut harus memenuhi beberapa persyaratan, seperti siswa SMA, sudah lulus SMA dan ingin meneruskan kuliah, serta mahasiswa. Jumlah responden yang digunakan untuk analisis profil pengguna sebanyak 15 responden. Hal ini sesuai dengan pernyataan Nielsen dan Loranger (2006), bahwa jumlah responden yang efisien untuk keperluan usability minimal 15 orang. Pengumpulan data dilakukan dengan memberikan kuesioner kepada pengguna sehingga hasilnya dapat digunakan untuk panduan perancangan antarmuka pengguna. 2 Analisis Tugas Kontekstual Pada tahap ini, dilakukan analisis mengenai kerangka kerja atau aliran kerja yang biasa dilakukan oleh pengguna ketika mengakses informasi di sebuah situs. Penentuan aliran kerja ini disesuaikan dengan hasil analisis profil pengguna dan digunakan untuk menentukan tujuan dari usability serta proses perancangan antarmuka dari sistem yang ingin dikembangkan. 3 Keterbatasan Platform
Style Guide
Work Reengeneering
A Analisis Kebutuhan
Desain Antarmuka Detail
Evaluasi Antarmuka Detail
Memenuhi Tujuan Usability
Tahap ini dilakukan untuk menentukan platform yang sesuai dengan pengembangan sistem. Keterbatasan platform seperti windowing, pewarnaan, dan lain sebagainya dianalisis kemudian digunakan sebagai acuan untuk menentukan tujuan usability dari sistem. 4 Prinsip Umum Desain
Tidak
Ya Style Guide
Gambar 3 Skema Metode Penelitian (Merujuk pada Usability Engineering Mayhew 1999).
Pada tahap ini, dilakukan studi literatur mengenai prinsip perancangan antarmuka pengguna yang baik sesuai dengan analisis pada tahap sebelumnya. Pemahaman ini dilakukan berdasarkan panduan dari buku The Essential Guide to User Interface Design (Galitz 2007) dan The Web Content Style Guide (McGovern et al. 2002). 5 Tujuan Usability Pada tahap ini, dirumuskan tujuan kualitatif dan kuantitatif yang
5
menggambarkan kebutuhan usability berdasarkan dari keempat analisis yang dilakukan sebelumnya. Hasil rumusan inilah yang akan menjadi panduan menuju tahapan selanjutnya dari usability engineering, yaitu desain, evaluasi, dan pengembangan. B Desain, Evaluasi, dan Pengembangan 1 Work Reengineering Tahapan analisis kebutuhan yang sudah dilakukan menghasilkan panduan yang digunakan untuk perancangan ulang. Pada tahap inilah perancangan ulang tugas pengguna dilakukan. Namun, perancangan hanya berupa aliran proses dan organisasi abstrak fungsionalitas sistem. 2 Desain Model Konseptual Pada tahap ini dilakukan proses sketsa desain antarmuka pengguna. Dalam sketsa desain antarmuka ini, navigasi utama dari sistem yang akan dikembangkan diidentifikasi. 3 Standar Desain Layar Pada tahap ini, dilakukan perancangan desain antarmuka dengan memperhatikan aspek-aspek standar mengenai tata letak sebuah sistem yang baik. Standar desain layar akan dipastikan berhubungan dan konsisten dengan antarmuka pengguna. 4 Desain Antarmuka Detail Pada tahap ini, dilakukan rancangan desain antarmuka secara detail untuk sistem yang dikembangkan. Desain antarmuka detail ini dirancang berdasarkan panduan yang diperoleh dari hasil tahapan analisis yang dilakukan sebelumnya. 5 Evaluasi Antarmuka Detail Pada tahap ini, dilakukan evaluasi desain antarmuka sistem yang telah dirancang sebelumnya. Evaluasi yang dilakukan ini difokuskan pada usability situs dan bertujuan memastikan rancangan ini telah sesuai dengan standar kebutuhan pengguna. Jumlah user yang dilibatkan adalah 10 orang sesuai dengan ketentuan SUMI (Veenendaal 1998). Lingkungan Pengembangan Sistem Implementasi sistem ini berbasis web dengan menggunakan bahasa pemrograman PHP dan bahasa pemrograman pendukung lainnya. Spesifikasi perangkat keras dan
perangkat lunak komputer yang digunakan dalam penelitian ini adalah sebagai berikut: Perangkat keras: Prosesor Core 2 Duo 2.00 GHz, RAM 2 GB, dan harddisk 250 GB. Perangkat lunak: Microsoft Windows 7 Ultimate 32-bit Operating System, XAMPP 1.7.1 dengan PHP 5.2.9 dan MySQL 5.0.27, Mozilla Firefox 4.0, Google Chrome 10.0, Safari 5.0.4, Adobe Dreamweaver CS3, Microsoft Silverlight 4.0, dan Notepad++ 5.7.
HASIL DAN PEMBAHASAN A Analisis Kebutuhan 1 Profil Pengguna Pada tahap ini dilakukan analisis karakteristik pengguna sebagai bahan pertimbangan perancangan antarmuka situs yang akan dikembangkan. Teknik yang digunakan dalam analisis ini adalah dengan memberikan kuesioner kepada responden yang terlibat. Jumlah responden yang dilibatkan dalam analisis ini sebanyak 15 orang. Kuesioner profil pengguna disajikan secara online dan diisi oleh responden yang diundang oleh penulis menuju link tersebut. Responden yang dilibatkan juga harus memenuhi syarat-syarat seperti siswa SMA sederajat, sudah lulus SMA sederajat dan ingin meneruskan kuliah, serta mahasiswa. Hal itu didapat berdasarkan observasi langsung terhadap responden yang dilibatkan, karena sebagian besar responden yang terlibat adalah yang dikenal penulis. Pertanyaan pada kuesioner dapat dilihat pada Lampiran 2. Hasil analisis profil pengguna berdasarkan kuesioner dapat dilihat di Tabel 2. Dari tabel tersebut, terlihat bahwa sebagian besar pengguna mulai menggunakan internet sejak 3-6 tahun lalu. Berdasarkan syarat yang harus dipenuhi responden yaitu siswa SMA sederajat, sudah lulus SMA sederajat dan ingin meneruskan kuliah, atau mahasiswa, ternyata sebagian besar responden yang terlibat adalah mahasiswa, yaitu sebesar 40 % atau 6 dari 15 responden. Usia pengguna berada di antara 15-24 tahun sesuai dengan usia pelajar tingkat atas (SMA sederajat sampai dengan mahasiswa). Rata-rata pengguna memiliki kecenderungan yang lebih tinggi dalam menggunakan internet. Hal itu terlihat dari hasil analisis
6
bahwa pengguna yang menggunakan internet setiap hari mencapai 53.3 %. Pengguna mulai mengenal dan menggunakan internet rata-rata berada diantara 3-6 tahun yaitu mencapai 46.7 %. Dari hasil analisis tersebut, diperoleh ringkasan bahwa sebagian besar pengguna adalah pengguna aktif internet dan sering mengakses situs-situs serupa dengan situs yang dikembangkan. Sebagian besar pengguna lebih menyukai desain antarmuka yang sederhana dan ringkas daripada desain antarmuka yang mewah tapi menyulitkan. Hal itu diperoleh dari lebih banyaknya pengguna yang menggunakan Google sebagai search engine dibanding Yahoo. Tabel 2 Data hasil analisis profil pengguna Pertanyaan
Mulai mengenal dan menggunakan internet Seberapa sering menggunakan internet
Untuk memperoleh tambahan informasi yang tidak disediakan oleh situs, biasanya pengguna lebih memilih mencari informasi tambahan di mesin pencarian atau bertanya pada seseorang. Untuk itulah situs yang dikembangkan juga akan menyediakan forum diskusi sehingga pengguna bisa saling bertukar informasi yang tak tersedia di situs.
%
3 Keterbatasan Platform
8
53.3
Perempuan
7
46.7
Siswa SMA sederajat
4
26.7
Sudah lulus dan ingin meneruskan kuliah
5
33.3
Mahasiswa
6
40.0
Situs ini dapat bekerja di semua sistem operasi dengan web browser yang support terhadap HTML5. Situs ini memang dikembangkan dengan HTML5 yang saat ini sedang pesat perkembangannya di kalangan web developer. HTML5 memiliki kelebihan sebagai media player di web browser untuk mengatasi kekurangan media player lain di web browser. Adapun kelebihan yang dimiliki oleh HTML5 adalah sebagai berikut:
< 3 tahun
6
40.0
-
3-6 tahun
7
46.7
> 6 tahun
2
13.3
-
Setiap hari
8
53.3
Sering (>=4 hari/minggu)
4
26.7
-
Jarang (<4 hari/minggu)
3
20.0
Jawaban
Jumlah
Laki-Laki Jenis Kelamin
Status Pelajar
mahasiswa, beasiswa, biaya kuliah, jurusan yang dimiliki, dan prestasi. 3 Pengguna mencari lingkungan kampus dengan melihat gambar / foto dan video yang terkait dengan PTN yang diminati. 4 Setelah mengumpulkan informasi yang dibutuhkan, pengguna akan menyimpan atau mencetak hasil pencarian mengenai PTN yang diminati tersebut.
2 Analisis Tugas Kontekstual Tahapan ini dilakukan untuk memperoleh informasi bagaimana cara pengguna mengakses suatu situs untuk mendapatkan berita yang dibutuhkan. Informasi mengenai analisis tugas kontekstual diperoleh berdasarkan pengamatan langsung sesuai dengan karakteristik pengguna. Task yang biasa dilakukan pengguna: 1 Pengguna mencari PTN yang diminati. 2 Setelah mendapatkan PTN yang diminati dalam sebuah situs, pengguna akan mencari informasi detail mengenai PTN tersebut, seperti alamat lengkap kampus, sejarah singkat, jalur masuk dan kapasitas
Native tanpa plugin. Jadi pengguna tidak perlu repot lagi menginstalasi plugin dan meng-update plugin tersebut. Hemat penggunaan CPU dan baterai jika menggunakan notebook. Open atau gratis. HTML5 sudah mendukung pengembangan aplikasi yang berjalan di berbagai perangkat berbasis sentuh.
Karena berbagai kelebihan yang dimiliki HTML5 itulah Apple dan Google sedang gencar mendukung perkembangan dari HTML5, begitu juga dengan Microsoft yang telah mengembangkan IE 9 yang sudah mendukung HTML5. Bahkan Youtube sudah mengaplikasikan beberapa videonya yang berbasis HTML5. Namun, kekurangannya adalah tidak semua web browser mendukung HTML5. Dari hasil analisis hanya Google Chrome yang paling support terhadap kode HTML5, mulai dari video, image video, audio, sampai dengan game. Web browser lain seperti Mozilla Firefox 4.0, Safari 5.0.4, dan IE 9 hanya mendukung kode HTML5 yang telah ada pada turunan HTML sebelumnya. Oleh karena itu, situs yang dikembangkan hanya akan berjalan dengan
7
baik pada web browser Google Chrome minimal versi 9.0. Data yang digunakan sebanyak 8 PTN di Jabodetabek (Tabel 1). Entity Relationship Diagram (ERD) dari data tersebut dapat dilihat pada Lampiran 3. Situs ini dibangun dengan tujuan memudahkan pengguna dalam mengakses informasi mengenai PTN yang diminati. Untuk memudahkannya, situs ini dirancang dengan berkonten multimedia, yaitu video. Video yang disajikan berupa informasi mengenai lingkungan kampus, departemen yang dimiliki, dan acara kampus yang sempat diselenggarakan. Jenis video yang ditampilkan berupa: -
Format video : mp4. frame rate : 25 fps. durasi : 2-5 menit. resolusi : 960x540 pixel.
Keterbatasan lainnya pada situs ini adalah komputer pengguna harus sudah terpasang Silverlight minimal versi 3.0 pada web browser yang digunakan. Piranti keras yang digunakan adalah jenis PC, notebook, dan piranti lainnya yang terpasang web browser. Resolusi layar yang digunakan adalah 1024 x 768 pixel, karena sebagian besar pengguna di Indonesia masih menggunakan piranti seperti PC atau notebook yang memiliki resolusi tersebut. 4 Prinsip Umum Desain Prinsip-prinsip perancangan umum yang digunakan dipelajari berdasarkan panduan Galitz (2007) dan McGovern et al. (2002). Beberapa prinsip desain dari kedua panduan buku tersebut adalah: 1 Website Layout Ada tiga hal yang perlu diperhatikan dalam website layout menurut McGovern et al. (2002), yaitu page layout, homepage layout, dan document layout. 2 Scrolling Untuk membuat situs yang baik, pengembang harus meminimalkan penggunaan scrolling. Scrolling horizontal sebaiknya ditiadakan dan diatasi dengan penggunaan scrolling vertikal jika memang data yang harus ditampilkan cukup besar. 3 Tipografi Tipografi meliputi pemilihan jenis huruf / font dan ukurannya. Jenis huruf yang dipilih adalah jenis huruf yang sederhana dan sering digunakan, yaitu Sans Serif
(Helvetica dan Verdana) serta Arial. Ukuran font yang ideal digunakan pada konten utama situs adalah 12 poin. 4 Message Boxes dan Pop-up Windows Message boxes digunakan untuk menampilkan pesan pada situasi atau kondisi tertentu. Misalnya setiap kali suatu proses dilakukan, berhasil atau tidaknya harus ditunjukkan dengan pesan. Pesan dapat ditampilkan dalam bentuk suatu baris pesan dan pop-up windows. Semua pesan penting ditampilkan sebagai pop-up windows karena lebih cepat dikenali. 5 Warna Untuk memperjelas teks yang dimunculkan, warna teks haruslah kontras dengan warna background. Warna putih untuk background dan hitam untuk teks merupakan pilihan yang optimal berdasarkan standar website profesional. 6 Logo Logo adalah sebuah nama, simbol, dan ciri yang didesain agar lebih mudah dikenali oleh user. Logo dari sebuah website harus mewakili konten dari isi website. Logo biasanya diletakkan di header / masthead dari website dan memiliki link ke homepage dari website tersebut. 7 Form Form biasa digunakan untuk mendapatkan informasi dari user. beberapa aturan membuat form dari panduan McGovern et al. (2002): buat form sesingkat mungkin, perintah untuk isian form dicetak tebal atau dengan huruf besar, error message jika terjadi kesalahan pengisian form, dan ukuran field untuk isian dibuat sesuai dengan kemungkinan isian user. 8 Masthead Masthead adalah area teratas dari sebuah website. Masthead berisi informasi penting mengenai website seperti nama, logo, search box, dan navigation menu utama. Ukuran optimal bagi sebuah masthead adalah 70 – 90 pixel. 9 Footer Footer mengandung link yang menginformasikan hal penting seperti contact, about, dan copyright. Footer berada di area terbawah pada setiap page website. Link pada footer hanya dipisahkan oleh spasi, garis bawah, atau garis lurus. 10 Navigasi
8
Navigasi adalah bagian dari sebuah website yang membawa user menjelajahi seluruh bagian website hanya dengan mengklik link yang dimilikinya. Berikut ini beberapa prinsip dalam mendesain navigasi: biarkan user tahu di page mana mereka berada, biarkan user tahu page mana saja yang sudah dikunjungi, biarkan user tahu apa yang akan diklik, dan konsisten. 11 Printing Membaca informasi yang cukup panjang melalui website terkadang masih terlalu sulit bagi sebagian besar user pada umumnya. Idealnya, website yang baik memiliki fungsi cetak pada beberapa page yang menampilkan informasi yang cukup panjang. 5 Tujuan Usability Berdasarkan karakteristik pengguna, terlihat bahwa pengguna merupakan pengguna aktif internet dengan pengalaman dan kemampuan yang baik dalam menggunakan situs apapun. Oleh karena itu, tujuan perancangan antarmuka situs ini adalah easy to use, yaitu antarmuka pengguna yang dirancang sedemikian rupa sehingga mudah digunakan. Tujuan kualitatifnya adalah sebagai berikut: -
Memudahkan pengguna untuk menyelesaikan task yang dikerjakan. Memudahkan aktifitas pencarian PTN yang diminati. Mempercepat alur kerja.
berbeda untuk pengujiannya dengan pengguna pada tahap profil pengguna. 2 Desain Model Konseptual Perancangan desain model konseptual dilakukan dengan gambar sketsa pada kertas. Untuk memperjelas desain model yang telah dibuat, sketsa digambar kembali dengan menggunakan aplikasi desain di komputer. Perancangan model konseptual ini meliputi pembagian ruang dan tata letak serta perancangan antarmuka utama secara umum. Konsep pembagian ruang dan tata letak dari situs yang dikembangkan dapat dilihat pada Gambar 4. Pembagian ruang tersebut diperoleh berdasarkan studi prinsip desain dan analisisnya. Perancangan antarmuka utama dilakukan berdasarkan pembagian ruang yang telah dilakukan. Perancangan antarmuka utama secara umum dapat dilihat pada Gambar 5.
Gambar 4 Sketsa pembagian ruang.
Tujuan kuantitatif diukur pada waktu uji coba pengguna (user testing). Tujuan kuantitatif yang dapat diukur pada penelitian ini adalah: -
Rata-rata waktu pengguna menyelesaikan semua task.
untuk
-
Rata-rata jumlah task yang diselesaikan dalam suatu waktu.
dapat
-
Rata-rata jumlah dilakukan pengguna.
yang
kesalahan
B Desain, Evaluasi, dan Pengembangan 1 Work Reengineering Tahap ini tidak dilakukan karena tahap ini merupakan tahap rekayasa ulang, validasi, dan perbaikan dari tahap sebelumnya, yaitu profil pengguna dan analisis tugas kontekstual. Tahap ini bekerja dengan pengguna yang
Gambar 5 Sketsa antarmuka utama secara umum. 3 Standar Desain Layar Perancangan antarmuka situs ini dilakukan dengan menggunakan standar desain layar yang jelas. Standar ini mengatur kebutuhankebutuhan khusus tentang bagaimana layar terlihat dan beroperasi. Isi dari perancangan standar adalah sebagai berikut : - Perancangan header dan footer.
9
-
Penanganan kesalahan. Label tombol. Perataan teks, label, dan kolom pengisian.
untuk bodytext. Penggunaan font tersebut dapat dilihat pada Gambar 6.
4 Desain Antarmuka Detil Desain antarmuka dikembangkan dengan menggunakan HTML5, CSS, dan Javascript. Berdasarkan tahap desain model konseptual dan standar desain layar, pada tahap ini yang dilakukan adalah menggabungkan kedua tahap tersebut dengan menerapkan prinsipprinsip perancangan umum. 1 Website Layout Beberapa hal yang perlu diperhatikan dalam website layout menurut McGovern et al. (2002) : - Page layout. Ukuran dari page layout harus disesuaikan dengan resolusi monitor yang digunakan oleh user. Situs yang dikembangkan memiliki lebar 1024 pixel. Navigasi menu utama pada setiap page harus konsiten. Dalam setiap page, harus ada masthead dan footer menu. Situs yang dikembangkan telah mengikuti aturan-aturan tersebut (Lampiran 4). - Homepage layout. Hal yang paling penting dari homepage adalah tampilan yang pertama dilihat oleh user. Pastikan bahwa navigasi menu utama terlihat di homepage dan ada bagian dari homepage yang berisi promosi mengenai website. Pada Lampiran 4, homepage dari situs yang dikembangkan dapat dilihat. - Document layout. Dalam sebuah dokumen yang panjang untuk ditampilkan, pastikan bahwa scrolling vertikal tidak berlebihan. Untuk mengatasi hal tersebut, diperlukan pembuatan paging sehingga scrolling vertikal tidak terlalu panjang. Contoh penggunaan paging dapat dilihat pada Lampiran 5. 2 Scrolling Scrolling tetap dibutuhkan pada situs yang telah dibangun. Namun hal itu cukup teratasi hanya dengan menampilkan scrolling vertikal tanpa scrolling horizontal. Penggunaan scrolling terpanjang dan terpendek dapat dilihat pada Lampiran 6 dan Lampiran 7. 3 Tipografi Huruf yang dipilih adalah jenis Verdana, Arial, Helvetica, dan Sans Serif. Ukuran huruf adalah 24 pt untuk judul dan 11 pt
Gambar 6 Font Judul dan bodytext. 4 Message Boxes dan Pop-up Windows Situs yang dikembangkan menggunakan message boxes untuk memberikan peringatan-peringatan tertentu. Salah satu contohnya dapat dilihat pada Gambar 7 ketika pengguna salah memasukkan code CAPTCHA.
Gambar 7 Warning message box. 5 Warna Dalam situs ini, warna latar adalah terang sedangkan warna teks gelap. Kombinasi pemilihan warna yang dipilih adalah putih untuk background konten utama, hitam untuk teks tanpa link, kuning tua untuk teks yang memiliki link, biru tua untuk judul utama dari setiap page, serta ungu untuk link yang sudah dikunjungi. 6 Logo Logo yang dibuat dominan berwarna biru dan bertuliskan nama website yaitu ‘university’. Simbol limas segitiga 3 dimensi dibuat untuk memudahkan mengingat bagi user. Simbol ini juga digunakan untuk logo pada title website. Logo situs yang dibuat dapat dilihat pada Gambar 8 dan Gambar 9 untuk penggunaan logo pada title situs.
Gambar 8 Logo situs.
Gambar 9 Logo pada title situs.
10
7 Form Salah satu contoh penggunaan form pada situs yang telah dibangun adalah pada form pengisian komentar news dan events. Contoh form tersebut dapat dilihat pada Lampiran 8. Form telah dibuat sesingkat mungkin dan ukuran field isian juga disesuaikan dengan kemungkinan pengisian user. Jika terjadi kesalahan pengisian form, situs memberikan peringatan error message seperti pada Gambar 10.
mana saja yang telah dikunjungi dan yang belum dikunjungi oleh user. - Biarkan user tahu apa yang akan diklik. Untuk simbol tertentu yang memiliki link, dibuat title ketika mouse mengarah pada simbol tersebut. Contoh penggunaannya dapat dilihat pada Gambar 12. - Konsisten, artinya pada setiap page navigasi harus konsiten dan sama terutama untuk navigasi menu utama. Perbandingan page navigasi utama dapat dilihat pada Lampiran 6 dan Lampiran 7.
Gambar 10 Error message. 8 Masthead Ukuran height masthead pada situs yang dikembangkan adalah 90 pixel. Masthead tersebut berisi logo situs, search box, dan navigasi menu utama. 9 Footer Footer menu yang dibuat mengandung beberapa link seperti about, contact, help, serta statement copyright. Link-link tersebut dipisahkan oleh spasi dan garis tegak di antara link. 10 Navigasi Beberapa hal yang perlu diperhatikan dalam membuat navigasi menurut McGovern et al. (2002): - Biarkan user tahu di page mana mereka berada, maka dibuat title sesuai dengan page yang bersangkutan. Misal: berada di page home, maka title dari situs adalah ‘University | Home’. Jika page berada di navigasi menu utama, menu navigasi tersebut active seperti pada Gambar 11.
Gambar 11 User berada di page News. - Biarkan user tahu page mana saja yang sudah dikunjungi, dibuat perbedaan warna pada link-link yang sudah dikunjungi oleh user. Warna teks yang memiliki link adalah kuning tua, jika link tersebut telah dikunjungi oleh user, teks tersebut berubah menjadi ungu. Hal itu dilakukan untuk membedakan page
Gambar 12 Title ketika mouse over. 11 Printing Pada situs yang dikembangkan, dibuat beberapa fasilitas print atau cetak PDF sehingga mempermudah user dalam mengakses informasi yang cukup panjang. Beberapa penggunaan fungsi cetak PDF ada di page news, events, dan profil setiap universitas. 5 Evaluasi Antarmuka Detil Evaluasi antarmuka detil dilakukan dengan dengan metode user experience measurement dan dengan menggunakan kuesioner SUMI. Kedua pengujian ini dilakukan dengan pengguna yang sama dan melibatkan sebanyak 10 pengguna sesuai dengan aturan SUMI (Veenendaal 1998). a User Experience Measurement User experience measurement dilakukan dengan memberi serangkaian task yang harus diselesaikan oleh pengguna. Dalam pengujian ini diukur beberapa hal yang menjadi tujuan kuantitatif. Pengujian dilakukan sebanyak dua kali dengan rentang waktu setiap pengujian selama satu jam. Hal ini dilakukan agar dari pengujian tersebut diperoleh learnability situs. Dalam pengujian ini, semua pengguna diberikan skenario task yang sama, namun tempat dan waktu pengujian berbeda. Hal itu dilakukan agar pengguna lebih terfokus dalam pengujian situs yang telah dibuat. Tabel 3 dan Tabel 4 menunjukkan keberhasilan pengguna dalam mengerjakan skenario task yang
11
diberikan pada pengujian 1 dan pengujian 2. Urutan skenario task berurutan seperti di bawah ini: 1 Mencari petunjuk help yang berada di footer menu. 2 Berkomentar dan cetak PDF news terbaru. 3 Berkomentar dan cetak PDF event terbaru. 4 Melihat video salah satu PTN dan dibuat fullscreen. 5 Melihat galeri foto salah satu PTN. 6 Cetak PDF informasi salah satu PTN. 7 Membuat topik baru dan me-reply di forum. 8 Mencari salah satu PTN dengan emasukkan keyword di form pencarian. Berdasarkan pengujian terhadap pengguna, dapat dilakukan perhitungan error rate atau tingkat kesalahan pengguna. Tingkat kesalahan pengguna diamati dengan cara menghitung jumlah pekerjaan yang tidak terselesaikan oleh pengguna. Perhitungan error rate dapat dilihat pada persamaan berikut:
Tabel 3 Task Ke1 2 3 4 5 6 7 8
Keberhasilan task pengujian 1 Pengguna Ke1 2 3 4 5 6 7 8 9 10 √ √ √ √ √ √ √ √ √ √ √ √ √ √ x √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ X √ √ √ √ x √ √ √ √ √ x √ √ √ √ √ x √ √ √ √ x √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √ √
Tabel 4 Keberhasilan task pengujian 2 Pengguna KeTask Ke- 1 2 3 4 5 6 7 8 9 10 √ √ √ √ √ √ √ √ √ √ 1 √ √ √ √ √ √ √ √ √ √ 2 √ √ √ √ √ √ √ √ √ √ 3 √ √ √ √ √ √ √ √ √ √ 4 √ √ √ √ √ √ √ √ √ √ 5 √ √ √ √ √ √ √ √ √ √ 6 √ √ √ √ √ √ √ √ √ √ 7 √ √ √ √ √ √ √ √ √ √ 8 Hasil dari perhitungan error rate pada pengujian 1 dan pengujian 2 dapat dilihat pada Tabel 5. Lamanya waktu penyelesaian skenario task yang dilakukan pengguna pada pengujian 1 dan pengujian 2 dapat dilihat pada
Tabel 6. Perincian waktu penyelesaian setiap task dapat dilihat pada Lampiran 11. Dari hasil dua kali pengujian kepada pengguna yang telah dilakukan, diketahui bahwa error rate dan waktu penyelesaian tugas semakin sedikit. Dapat disimpulkan bahwa pengguna dapat mempelajari situs ini dengan baik atau dengan kata lain memiliki sisi learnability yang baik. Tabel 5 Nilai error rate setiap pengguna Error rate (%) Pengguna U1 U2 P1 0.0 0.0 P2 12.5 0.0 P3 0.0 0.0 P4 12.5 0.0 P5 12.5 0.0 P6 0.0 0.0 P7 12.5 0.0 P8 12.5 0.0 P9 12.5 0.0 P10 0.0 0.0 Tabel 6 Lama waktu penyelesaian task Waktu Penyelesain Task (Menit) Pengguna U1 U2 P1 5:03 3:07 P2 3:26 2:34 P3 2:45 2:05 P4 3:40 2:44 P5 4:31 3:36 P6 3:22 2:37 P7 3:28 2:37 P8 3:17 2:28 P9 3:06 2:35 P10 3:08 2:45 b Kuesioner SUMI Dalam tahap ini, dilakukan evaluasi usability dengan menggunakan kuesioner SUMI yang terdapat di menu utama situs yang telah dibangun. Pengguna diminta untuk menjawab setiap pernyataan pada kuesioner dengan memberikan tanggapan setuju, tidak tahu, dan tidak setuju. Jumlah pernyataan yang terdapat di kuesioner SUMI sejumlah 50 yang meliputi penilaian efficiency, affect, helpfulness, control, learnability, dan penilaian usability secara global. Pernyataan kuesioner SUMI dapat dilihat di Lampiran 12. Skor dari setiap tanggapan diberi bobot yang berbeda untuk setiap pernyataan. Pernyataan yang mengarah lebih positif terhadap sistem diberi nilai 4, 2, 0 untuk tanggapan setuju, tidak tahu, dan tidak setuju.
12
Contoh pernyataan: penyusunan menu atau informasi terlihat cukup logis. Pernyataan yang mengarah lebih negatif diberi nilai sebaliknya yaitu 0, 2, 4 untuk tanggapan setuju, tidak tahu, dan tidak setuju. Contoh pernyataan: menurut saya, web ini tidak konsisten. Hasil perhitungan skor SUMI dapat dilihat pada Tabel 7. Pengukuran kuesioner SUMI berupa angka penilaian dengan skala 0-100 dan akan dibandingkan dengan rata-rata skor kepuasan pengguna dari basis data SUMI yaitu 50. Jika hasil pengukuran dari setiap kategori kurang dari 50 berarti skor tersebut masih dibawah rata-rata, sehingga perlu dilakukan perbaikan untuk meningkatkan kualitas situs yang telah dibuat. Tabel 7 Perhitungan skor SUMI Pernyataan Kategori Nomor Efficiency 1, 9, 16, 18, 29, 34, 36, 39, 41, dan 49 Affect 2, 7, 12, 17, 22, 27, 32, 37, 42, dan 47 Helpfulness 3, 8, 11, 13, 15, 23, 28, 31, 38, dan 48 Control 4, 6, 14, 19, 20, 21, 24, 33, 43, dan 46 Learnability 5, 10, 25, 26, 30, 35, 40, 44, 45, dan 50 Global -
fasilitas apa saja yang disediakan dalam situs, sehingga pengguna lebih memilih untuk menggunakan fasilitas yang diketahui saja. Tabel 8 Skor hasil evaluasi SUMI User
Eff
Aff
Hlp
Ctr
Lrn
Glb
1 2 3 4 5 6 7 8 9 10 Med
90 70 70 90 70 100 90 80 75 90 85
90 80 65 65 100 70 75 90 90 90 85
100 75 90 55 85 80 65 80 70 80 80
60 55 85 55 65 75 80 75 65 70 67.5
70 80 95 80 85 95 85 90 90 90 87.5
82 72 81 69 81 84 79 83 78 84 81
Skor Total skor * 2,5 Total skor * 2,5 Total skor * 2,5 Total skor * 2,5 Total skor * 2,5 Total Kelima kategori / 5
Setelah pengguna menyelesaikan skenario task yang diberikan pada metode user experience measurement, pengguna diminta memberikan tanggapan setiap pernyataan dari kuesioner SUMI. Skor hasil dari evaluasi usability menggunakan kuesioner SUMI dapat dilihat pada Tabel 8 dan dalam bentuk grafik pada Gambar 13. Skor akhir dari setiap kategori diperoleh dari median setiap skor terurut yang diberikan oleh pengguna. Pada Gambar 13, dapat dilihat bahwa pada semua kategori usability dan secara global skor berada diatas skor rata-rata, yaitu 50. Hal ini menunjukkan bahwa pengguna telah puas dengan situs yang telah dibuat. Namun skor dari kategori control masih berada jauh dari skor kategori lain. Hal ini berarti pengguna kurang mengerti secara keseluruhan
Gambar 13 Hasil evaluasi usability dengan kuesioner SUMI. Berdasarkan hasil evaluasi kuesioner SUMI tersebut, maka dilakukan perbaikan dengan menampilkan penjelasan fasilitas yang tersedia pada situs. Perbaikan juga dilakukan pada menu help dengan memperjelas apa saja yang bisa dilakukan pengguna dengan situs yang telah dibangun ini. Dalam masa perbaikan selama proses pengembangan, penulis juga menambahkan fasilitas compare atau perbandingan yang dapat digunakan untuk membandingkan PTN, fakultas, dan departemen yang diminati. Untuk membandingkan PTN, user hanya perlu memilih PTN yang akan dibandingkan (Lampiran 11). Fakultas yang ingin dibandingakan dipilih dengan menggunakan dropdown daftar fakultas yang tersedia di database (Lampiran 12). Proses memilih departemen yang ingin dibandingkan mirip dengan cara membandingkan fakultas yaitu dengan dropdown (Lampiran 13). Untuk membandingkan departemen yang berbeda, user harus memilih jumlah yang ingin dibandingkan dahulu kemudian memilih PTN, Fakultas, dan departemen masing-masing (Lampiran 14).
13
KESIMPULAN DAN SARAN Kesimpulan Berdasarkan penelitian yang dilakukan, dapat disimpulkan bahwa:
telah
1 Telah berhasil dibangun situs berbasis multimedia dengan menggunakan metode usability engineering. 2 Antarmuka yang dihasilkan telah memenuhi tujuan dari usability baik secara kualitatif maupun kuantitatif. 3 Dari hasil evaluasi usability dengan metode user experience measurement, error rate dan waktu penyelesaian task dari pengujian pertama ke pengujian kedua berkurang, artinya learnability dari situs sudah baik. 4 Dengan menggunakan kuesioner SUMI diperoleh skor untuk kategori efficiency, affect, helpfulness, control, learnability, dan global sebesar 85, 85, 80, 67.5, 87.5, dan 81. 5 Skor dari setiap kategori berada di atas ratarata ketentuan SUMI, artinya pengguna sudah puas dengan situs yang telah dibangun. 6 Banyak kesulitan untuk memperoleh data yang dibutuhkan sehingga informasi yang ditampilkan beberapa universitas tidak lengkap. 7 Hanya dapat berjalan di web browser tertentu yang mendukung HTML5. Saran Beberapa saran yang dapat diberikan untuk pengembangan situs berbasis multimedia berikutnya adalah: 1 Dapat dikembangkan situs sama berbasis mobile dan touch screen sehingga manfaat dari HTML5 akan sangat terlihat. 2 Membuat antarmuka yang lebih interaktif sesuai dengan keinginan karakteristik pengguna. 3 Dapat dilakukan evaluasi usability dengan metode pengujian yang lain seperti review based evaluation yang menghasilkan penilaian yang lebih baik.
DAFTAR PUSTAKA Answers. 2006 Answers.com the world's greatest encyclodictionalmanacpedia. http://www.answers.com/ [7 Jul 2006]. Bevan N, Macleod M. 1994. Usability measurement in context. Behaviour and Information Technology, 13, 132-145. Teddington: National Physical Laboratory.
Cardiyan. 2009. ITB dan UGM Tetap Nomor 1 di SNMPTN 2009. http://cardiyanhis.blogspot.com/2009/07/itbdan-ugm-tetap-nomor-1-di-snmptn.html [23 Apr 2010]. Galitz WO. 2007. The Essential Guide to User Interface Design : An Introduction to GUI Design Principle and Techniques. Ed ke-3. Canada: John Wiley & Sons Inc. Indosiar.com. 2009. Diikuti Sekitar 2,2 Juta Siswa. http://www.indosiar.com/fokus/79669/diikut i-sekitar-22-juta-siswa [23 Apr 2010]. Maulana, M. 2009. Pengembangan situs Faro’idh (Penghitungan Waris) menggunakan web usability engineering life cycle [skripsi]. Bogor: Fakultas Matematika dan Ilmu Pengetahuan Alam, Institut Pertanian Bogor. Mayhew DJ. 1999. The Usability Engineering Lyfecycle : A Practioner’s Handbook for User Interface Design. San Diego: Academic Press. McGovern G, et al. 2002. The Web Content Style Guide. London: Prentice Hall. Nielsen J, Loranger H. 2006. Prioritizing Web Usability. Berkeley: New Riders. Organisasi.org. 2009. Daftar Nama PTN/Perguruan Tinggi Negeri Di Indonesia - Universitas, Institut, Politeknik, Sekolah Tinggi. http://organisasi.org/daftar-namaptn-perguruan-tinggi-negeri-di-indonesiauniversitas-institut-politeknik-sekolah-tinggi [23 Apr 2010]. Seffah A, Metzker E. 2009. Adoption-centric Usability Engineering. London: Springer. Veenendaal E. 1998. Questionnaire Based Usability Testing. Conference Proceedings European Software Quality Week; Brussels, November 1998. Valkeenswaard: Improve Quality Services Waalreseweg. Waterworth, J A. 1991. Multimedia Technology and Applications. London: Ellis Harwood. Wiradarya, D. 2006. Integrasi Gambar, Audio, dan Video dalam Perangkat Lunak Pembelajaran [Skripsi]. Bogor: Fakultas Matematika dan Ilmu Pengetahuan Alam, Institut Pertanian Bogor Yohannes. 2008. Strategi Customer Relationship Management dan Evaluasi Software Usability Measurement Inventory dalam Pembuatan Web Perusahaan (Studi Kasus : Sekolah Musik Gema Suara) [Skripsi]. Bogor: Fakultas Matematika dan Ilmu Pengetahuan Alam, Institut Pertanian Bogor.
LAMPIRAN
14
Lampiran 1 Informasi PTN pada website Dikti
15
Lampiran 2 Kuesioner profil pengguna
Kuesioner & Bahan Diskusi Kebutuhan Informasi Pengguna dalam Mengakses Situs Perguruan Tinggi Negeri di Indonesia Untuk Keperluan Menyusun Skripsi di Bidang Ilmu Komputer Institut Pertanian Bogor Petunjuk Pengisian : 1. Lembar bahan diskusi ini berisi pertanyaan mengenai kebutuhan pengguna dalam mengakses informasi mengenai PTN di Indonesia melalui internet. 2. Pengisian lembar ini ditujukan bagi para siswa SMA atau para mahasiswa yang tertarik dengan PTN di Indonesia. 3. Mohon disesuaikan dengan kebutuhan nyata Anda dalam mengakses informasi di internet. 4. Kuesioner ini terdiri dari 2 bagian yaitu biodata pengguna dan pertanyaan seputar kebutuhan pengguna akan informasi. 5. Jawablah dengan benar setiap pertanyaan yang diberikan sesuai dengan pribadi Anda.
1.
Tanggal Pengisian
:
2.
Nama
:
3.
Tempat / Tanggal Lahir
:
4.
Jenis Kelamin : Perempuan Laki-Laki
5.
Status Pelajar : Siswa SMA sederajat Sudah Lulus SMA sederajat dan sedang mencari PTN Mahasiswa
6.
Asal Sekolah SMA
:
7.
Mulai mengenal Internet dan mulai menggunakan Internet selama ± (dalam tahun) :
8.
Seberapa sering Anda Menggunakan Internet (Menggunakan PC / Laptop. Internet dengan HP tidak masuk dalam hitungan) : Setiap Hari Sering (>= 4 hari dalam seminggu) Jarang (< 4 hari dalam seminggu) Jika ada tugas sekolah/kuliah
9.
Mana yang Anda sukai jika mencari informasi yang sulit mengenai sesuatu (jawaban boleh lebih dari 1) : Bertanya pada seseorang Mencari di media cetak (buku, koran, majalah, dll) Mencari di internet Lain-lain
16
Lampiran 2 Lanjutan
10. Situs apa yang lebih sering Anda Kunjungi (Jawaban boleh lebih dari 1) : Google Yahoo Facebook Detik.com Lain-lain 11. Pikirkan dengan baik pertanyaan ini !! Jika Anda sedang mengakses sebuah situs / website mengenai informasi Perguruan Tinggi Negeri (PTN) di Indonesia, informasi penting apa yang paling Anda butuhkan mengenai PTN yang Anda minati, misalnya : departemen / jurusan yang dimiliki, alamat lengkap lokasi kampus, dll. Sebutkan informasi lain yang Anda butuhkan tersebut :
17
Lampiran 3 Entity relationshipl diagram (ERD)
Akreditasi_fak
Id_univ nama
Id_univ
fasilitas sejarah
nama
Has_fak
Fakultas
biaya
Universitas
jalur Id_fak
Id_HF
Id_fak
alamat
telp
website
kapasitas
Akreditasi_dept
Id_dept Id_dept Has_dept
departemen
nama
id_kurikulum Id_HF
Id_HD
id_kurikulum
Kode_mk
Kurikulum
sks
memiliki
semester Mata kuliah
nama
Kode_mk
18
Lampiran 4 Antarmuka page home
19
Lampiran 5 Penggunaan paging pada situs yang dikembangkan
20
Lampiran 6 Penggunaan scrolling terpanjang
21
Lampiran 7 Penggunaan scrolling terpendek
22
Lampiran 8 Form pengisian komentar news dan events
23
Lampiran 9 Perincian waktu penyelesain setiap task oleh pengguna dalam detik
24
Lampiran 10 Pernyataan kuesioner SUMI No. Pertanyaan 1. Respon web terhadap masukan terlalu lambat. 2. Saya akan menganjurkan teman saya untuk membuka web ini. 3. Petunjuk dan pengarahan dalam web membantu saya. 4. Tanpa diharapkan, web kadang-kadang berhenti. 5. Belajar menggunakan web ini pada awalnya penuh dengan kesulitan. 6.
Dalam web ini, kadang-kadang saya tidak tahu apa yang akan saya lakukan selanjutnya.
7. Saya merasa senang membuka web ini. 8. Menurut saya, informasi help yang disediakan tidak terlalu bermanfaat. 9. Jika web ini berhenti, akan sulit untuk membukanya kembali. Diperlukan waktu yang terlalu lama untuk mempelajari perintahperintah dalam web. Kadang-kadang saya ragu apakah saya menggunakan perintah yang 11. benar. 10.
12. Web ini sangat memuaskan. Cara penyampaian informasi dalam sistem jelas dan mudah dimengerti. Saya merasa lebih aman jika hanya menggunakan sedikit perintah14. perintah yang telah saya kenal. 13.
15. Dokumentasi web sangat informatif. 16.
Web ini nampaknya mengganggu cara kerja yang biasanya saya lakukan.
17. Web ini memacu saya secara mental. 18.
Ketika saya membutuhkan, informasi yang ditampilkan tidak mencukupi.
19. Saya merasa memegang kendali atas web ini ketika saya membukanya. 20.
saya lebih memilih untuk selalu menggunakan fasilitas yang paling saya tahu.
21. Menurut saya, web ini tidak konsisten. 22. Saya tidak akan menggunakan web ini setiap hari. Saya dapat mengerti dan bertindak berdasarkan informasi yang disediakan dalam web ini. Web ini menjadi janggal ketika saya akan melakukan sesuatu yang 24. tidak baku. Terlalu banyak yang harus saya baca sebelum saya dapat 25. menggunakana web ini. 23.
26. Saya dapat memperoleh informasi yang saya harapkan dengan mudah. 27. Web ini telah membuat saya frustasi ketika menggunakannya.
Setuju
Tidak Tidak Tahu Setuju
25
Lampiran 10 Lanjutan Web ini telah membantu saya mengatasi beberapa masalah yang 28. pernah saya hadapi ketika menggunakan web tersebut. 29. Kecepatan web ini cukup tinggi. Saya harus selalu kembali melihat panduan lagi untuk menggunakan web ini. Terlihat nyata bahwa kebutuhan pengguna telah menjadi pertimbangan 31. dalam pembuatan web. Ketika menggunakan web ini, terdapat saat-saat ketika saya sudah 32. merasakan tegang (emosi terpicu). 30.
33. Penyusunan menu atau informasi terlihat cukup logis. 34. Saya tidak perlu terlalu sering menggunakan keyboard dalam web ini. Saya mengalami kesulitan dalam memperlajari fungsi baru dalm web ini. Terlalu banyak langkah yang dibutuhkan untuk melakukan/meminta 36. suatu data/informasi. 35.
37. Sepertinya web ini kadang-kadang membuat saya pusing. Pesan untuk mencegah kesalahan dalam web ini tidak tersedia secara memadai. Saya dapat dengan mudah membuat web ini melakukan apa yang saya 39. inginkan. Saya tidak akan mempelajari semua fasilitas yang ditawarkan dalam 40. web. 38.
41. Web ini tidak selalu melakukan apa yang saya harapkan. 42. Web ini disajikan dengan menarik. 43. Jumlah dan kualitas informasi help berbeda-beda pada setiap bagian. Relatif mudah untuk berpindah dari satu bagian web ke bagian yang lain. Sangat mudah untuk melupakan cara melakukan sesuatu dalam web 45. ini. 44.
46. Web ini kadang-kadang menunjukkan reaksi yang tidak saya mengerti. 47. Web ini sangat aneh. 48. Sekilas dapat terlihat pilihan-pilihan pada setiap tahap. 49.
Mendapatkan data dari web atau memasukkan data ke dalam web ini tidak mudah.
50. Saya sering harus mencari bantuan dalam menggunakan web ini. Simpan
26
Lampiran 11 Fasilitas compare PTN
27
Lampiran 12 Fasilitas compare Fakultas
28
Lampiran 13 Fasilitas compare Departemen
29
Lampiran 14 Fasilitas compare semua jenis Departemen
