rekayasa kebergunaan pada sistem informasi … · dengan adanya aplikasi ini diharapkan pengguna...
Post on 23-Mar-2019
226 Views
Preview:
TRANSCRIPT
REKAYASA KEBERGUNAAN
PADA SISTEM INFORMASI KEHUMASAN IPB
HENDRO PRABOWO HADI
DEPARTEMEN ILMU KOMPUTER
FAKULTAS MATEMATIKA DAN ILMU PENGETHAUAN ALAM
INSTITUT PERTANIAN BOGOR
BOGOR
2010
REKAYASA KEBERGUNAAN
PADA SISTEM INFORMASI KEHUMASAN IPB
HENDRO PRABOWO HADI
Skripsi
Skripsi sebagai salah satu syarat untuk memperoleh gelar
Sarjana Komputer pada
Departemen Ilmu Komputer
DEPARTEMEN ILMU KOMPUTER
FAKULTAS MATEMATIKA DAN ILMU PENGETHAUAN ALAM
INSTITUT PERTANIAN BOGOR
BOGOR
2010
ABSTRACT
PRABOWO HADI, HENDRO. Usability Engineering on IPB Public Relationship Information
System. Supervised by ARIF IMAM SUROSO and HENDRA RAHMAWAN.
This research proposes the dissemination of information about IPB to users who are on campus
location. It also aims to build an information system that applies usability methods during system
development so it can build a user-friendly and also easy–to-learn system. This information system
will be installed into touch screen that will make users able to interact with system directly. Today‟s
touch screens are often durable and robust and work well in environments where it will be exposed to
wear. Another advantage is that touch screens are intuitive to use. However, good and rich content is
not enough to make users explore it. The content has to be easily accessible and presented in a usable
and experiential way. Based on the analysis of Computer System Usability Questionnaire (CSUQ), the
development of Sistem Informasi Kehumasan IPB managed to perform a well usability. This is shown
by the value of overall satisfaction (OVERALL) = 5.48, and obtained a value for each attribute, the
system usefullness (SYSUSE) = 5.69, information quality (INFOQUAL) = 5.39, and interface quality
(INTQUAL) = 5.20 on a 7 point-scale.
Keywords: usability engineering, information system, computer system usability questionnaire.
Judul : Rekayasa Kebergunaan pada Sistem Informasi Kehumasan IPB
Nama : Hendro Prabowo Hadi
NRP : G64063497
Menyetujui:
Pembimbing I,
Dr. Ir. Arif Imam Suroso, M.Sc, CS
NIP 19610618 198601 1 002
Pembimbing II,
Hendra Rahmawan, S.Kom, MT
NIP 19820501 200912 1 004
Mengetahui:
Ketua Departeman Ilmu Komputer
Institut Pertanian Bogor
Dr. Ir. Sri Nurdiati, M.Sc.
NIP 19601126 198601 2 001
PRAKATA
Alhamdulillahi Rabbil ’Alamin, segala puji dan syukur penulis panjatkan kepada Allah SWT atas
limpahan rahmat dan hidayah-Nya, sehingga penulis dapat menyelesaikan tugas akhir yang berjudul
Rekayasa Kebergunaan pada Sistem Informasi Kehumasan IPB dengan baik dan lancar.
Penulis juga menyampaikan ucapan terima kasih kepada:
1. Bapak Dr. Ir. Arif Imam Suroso, M.Sc, CS serta Bapak Hendra Rahmawan, S.Kom, M.T. selaku
dosen pembimbing yang telah memberikan arahan dan bimbingan dengan sabar kepada penulis
dalam menyelesaikan skripsi ini.
2. Bapak Firman Ardiansyah, S.Kom, M.Si. selaku dosen penguji yang juga telah banyak
memberikan masukan kepada penulis dalam menyelesaikan skripsi ini.
3. Ayah, Ibu, Kakak, dan Adik tercinta, yang tidak henti-hentinya memberikan doa, kasih sayang,
dan dukungan kepada penulis.
4. Lies Umi Kulsum yang selalu menemani serta senantiasa memberikan motivasi dan kasih sayang
kepada penulis.
5. Hamidah sebagai teman satu bimbingan yang selalu memberikan masukan, saran, dan semangat
kepada penulis serta Wildan Rahman, Syamsul Bachri, dan Moh. Farhad Idris yang banyak
membantu dalam penyelesaian skripsi ini.
6. Staf sekretariat Wakil Rektor Bidang Bisnis dan Komunikasi, pihak Humas IPB, serta Bapak Agus
Winarno yang membantu dalam instalasi sistem pada media touch screen.
7. Staf pengajar dan TU Ilmu Komputer yang telah banyak membantu.
8. Cemara Family, rekan-rekan ilkomerz 43, dan Pondok Sahabat atas segala kebersamaan, bantuan,
dan motivasi yang telah diberikan kepada penulis.
9. Responden yang telah meluangkan waktunya untuk mengisi kuisioner.
Penulis menyadari bahwa masih terdapat kekurangan dalam penulisan skripsi ini. Semoga skripsi
ini bermanfaat.
Bogor, Desember 2010
Hendro Prabowo Hadi
RIWAYAT HIDUP
Hendro Prabowo Hadi dilahirkan di Pamekasan, Madura, Jawa Timur pada tanggal 23 Juni 1987.
Penulis adalah anak kedua dari tiga bersaudara dari pasangan Bapak Mashudi dan Ibu Sri Ernawati.
Pada tahun 2006, penulis lulus dari Sekolah Menengah Atas (SMA) Negeri 1 Pamekasan dan diterima
menjadi mahasiswa Departemen Ilmu Komputer Institut Pertanian Bogor melalui jalur Undangan
Seleksi Masuk IPB (USMI).
Pada tahun 2008, penulis terpilih menjadi koordinator komunitas FOKERZ (Film Community of
Ilkomerz) Himpunan Mahasiswa Ilmu Komputer dan berhasil menjadi pemenang Film Terbaik pada
kompetisi G-Action 2008 yang diselenggarakan oleh Badan Eksekutif Mahasiswa FMIPA. Pada tahun
yang sama, penulis juga terpilih menjadi Ketua organisasi mahasiswa daerah, Keluarga Mahasiswa
Madura (GASISMA). Pada tahun 2009, penulis melaksanakan kegiatan praktik kerja lapangan di PT.
PLN DJBB Area Pelayanan dan Jaringan (APJ) Bekasi selama 35 hari. Selama mengikuti perkuliahan,
penulis pernah menjadi asisten praktikum untuk mata kuliah Penerapan Komputer di Departemen
Ilmu Komputer, IPB.
iv
DAFTAR ISI
Halaman
DAFTAR GAMBAR ..................................................................................................................... vi
DAFTAR TABEL ......................................................................................................................... vi
DAFTAR LAMPIRAN .................................................................................................................. vi
PENDAHULUAN
Latar Belakang ......................................................................................................................... 1
Rumusan Masalah .................................................................................................................... 1
Tujuan Penelitian ..................................................................................................................... 1
Ruang Lingkup Penelitian ........................................................................................................ 1
Manfaat Penelitian ................................................................................................................... 1
TINJAUAN PUSTAKA
Sistem Informasi ...................................................................................................................... 1
Usability Engineering .............................................................................................................. 2
Touch Screen ............................................................................................................................ 2
Jenis-Jenis Touch Screen .......................................................................................................... 2
Touch Screen Design Guideline ............................................................................................... 3
Komponen User Interface ........................................................................................................ 4
Heuristic Evaluation ................................................................................................................ 5
METODE PENELITIAN
A. Analisis Kebutuhan ........................................................................................................... 5
1. Profil Pengguna.......................................................................................................... 5
2. Analisis Tugas Kontekstual ....................................................................................... 5
3. Tujuan Usability ........................................................................................................ 5
4. Kapabilitas Platform .................................................................................................. 5
5. Prinsip Perancangan Umum ....................................................................................... 6
B. Perancangan, Pengujian, dan Pengembangan ................................................................... 6
1. Perancangan Ulang .................................................................................................... 6
2. Desain Model Konseptual .......................................................................................... 6
3. Screen Design Standards ........................................................................................... 6
4. Detailed User Interface Design ................................................................................. 6
5. Iterative Detailed User Interface Design ................................................................... 6
C. Instalasi ............................................................................................................................. 6
User Feedback .................................................................................................................. 6
HASIL DAN PEMBAHASAN
A. Analisis Kebutuhan ........................................................................................................... 6
1. Profil Pengguna.......................................................................................................... 6
2. Analisis Tugas Kontekstual ....................................................................................... 7
3. Tujuan Usability ........................................................................................................ 9
4. Kapabilitas Platform .................................................................................................. 9
5. Prinsip Perancangan Umum ....................................................................................... 9
B. Perancangan, Pengujian, dan Pengembangan ................................................................... 9
1. Perancangan Ulang .................................................................................................... 9
2. Desain Model Konseptual .......................................................................................... 9
3. Screen Design Standards ........................................................................................... 10
4. Desain Antarmuka Detail ........................................................................................... 10
5. Evaluasi Antarmuka Detail ........................................................................................ 12
C. Instalasi ............................................................................................................................ 13
User Feedback .................................................................................................................. 13
v
KESIMPULAN DAN SARAN
Kesimpulan .............................................................................................................................. 14
Saran ........................................................................................................................................ 14
DAFTAR PUSTAKA .................................................................................................................... 15
LAMPIRAN .................................................................................................................................. 16
vi
DAFTAR GAMBAR
Halaman
1 Usability Engineering Lifecycle ............................................................................................... 5
2 Konsep pembagian ruang untuk halaman utama ...................................................................... 10
3 Konsep pembagian ruang untuk halaman lainnya (halaman isi) .............................................. 10
4 Topologi instalasi sistem .......................................................................................................... 13
5 Instalasi Sistem Informasi Kehumasan IPB ............................................................................. 13
DAFTAR TABEL
Halaman
1 Data dan analisis profil pengguna ............................................................................................ 7
2 Karakteristik fisik pengguna .................................................................................................... 7
3 Koleksi data pengamatan tugas ................................................................................................ 8
4 Screen design standard ............................................................................................................ 10
5 Tingkat kemampuan baca dengan kombinasi warna berbeda .................................................. 11
6 Jenis-jenis tombol .................................................................................................................... 11
7 Jenis-jenis thumbnail button..................................................................................................... 12
8 Navigasi ................................................................................................................................... 12
9 Jenis-jenis scroll button ............................................................................................................ 12
10 Hasil perhitungan heuristic evaluation ..................................................................................... 13
DAFTAR LAMPIRAN
Halaman
1 Kuisioner (profil pengguna) ..................................................................................................... 17
2 Tampilan Sistem Informasi Kehumasan IPB ........................................................................... 18
3 Heuristic evaluation checklist .................................................................................................. 20
4 Rekapitulasi hasil perhitungan heuristic evaluation ................................................................. 25
5 Tampilan halaman administrasi Sistem Informasi Kehumasan IPB ........................................ 28
6 Kuisioner CSUQ (Computer System Usability Questionnaire) ............................................... 29
7 Penilaian pengguna terhadap sistem secara keseluruhan menggunakan kuisioner CSUQ ....... 30
8 Tabel deskripsi dan hasil uji sistem (panel administrasi) ......................................................... 32
9 Tabel deskripsi dan hasil uji sistem (touch screen client) ........................................................ 36
1
PENDAHULUAN
Latar Belakang
Institut Pertanian Bogor (IPB) merupakan
salah satu perguruan tinggi terkemuka di
Indonesia. Hal tersebut dapat dibuktikan dengan
masuknya IPB ke dalam 10 besar universitas
terbaik di Indonesia. IPB memiliki berbagai
informasi yang dibutuhkan oleh masyarakat luas
baik berupa agenda kegiatan IPB, informasi
mengenai pendidikan maupun informasi seputar
kampus.
Saat ini, masyarakat luas dapat melihat
informasi seputar IPB melalui website. Namun,
hal itu tidak sepenuhnya dapat memenuhi
kebutuhan akan informasi tersebut. Pada
website IPB masih terdapat beberapa fitur yang
belum terintegrasi seperti foto-foto kegiatan,
dan video-video seputar IPB. Bagi masyarakat
umum yang sedang berada di lokasi kampus dan
ingin mengakses informasi tersebut, maka
mereka harus terhubung ke jaringan IPB
terlebih dahulu. Selain itu, sistem yang
konvensional mengharuskan pengguna untuk
mengetikkan alamat serta mengakses menu-
menu yang tersedia meggunakan mouse atau
keyboard yang memungkinkan terjadinya
kesalahan.
Untuk mengatasi kebutuhan akan informasi
tersebut, salah satu solusi yang dapat dilakukan
adalah dengan mengembangkan sebuah sistem
yang dapat memberikan semua informasi yang
diperlukan seputar IPB, baik berupa berita,
agenda, produk IPB maupun foto dan video
kegiatan yang diselenggarakan oleh IPB. Sistem
ini ditujukan bagi para pengguna yang
berkunjung ke IPB. Dengan adanya aplikasi ini
diharapkan pengguna dapat memperoleh
informasi yang diperlukan seputar IPB dengan
mudah. Untuk mengganti penggunaan sistem
yang masih konvensional, maka sistem ini akan
diimplementasikan pada media touch screen
agar pengguna dapat berinteraksi langsung
dengan aplikasi tanpa harus menggunakan alat
input mouse atau keyboard.
Pengembangan sistem informasi ini
tentunya akan membantu pihak terkait dalam
penyebarluasan informasi. Sistem informasi ini
juga dapat dijadikan sebagai media untuk
mempromosikan produk.
Sistem yang akan dikembangkan ini akan
ditujukan bagi pengguna baru. Oleh karena itu,
sistem dirancang agar pengguna mudah
mengoperasikan aplikasi tersebut. Kemudahan
penggunaan suatu sistem dinilai dari antarmuka
aplikasi tersebut. Antarmuka yang buruk dapat
menyulitkan pengguna untuk menyelesaikan
suatu tugas tertentu. Hal ini mendorong
pengguna untuk tidak melanjutkan
menggunakan aplikasi tersebut.
Rumusan Masalah
Rumusan masalah pada penelitian ini adalah
membangun sistem informasi dengan
memperhatikan usability pada perancangan
antarmuka selama pengembangan sistem.
Tujuan Penelitian
Tujuan dari penelitian ini adalah:
1 Membangun sebuah sistem informasi
seputar IPB.
2 Merancang sebuah sistem yang user friendly
dengan memperhatikan usability pada
perancangan antarmuka selama
pengembangan sistem.
Ruang Lingkup Penelitian
Ruang lingkup penelitian ini adalah :
1 Data yang digunakan meliputi agenda IPB,
informasi IPB, foto-foto kegiatan dan video-
video seputar IPB.
2 Pengembangan sistem ini menggunakan php
sebagai bahasa pemrograman server side
serta menggabungkan JavaScript, CSS dan
HTML untuk perancangan GUI.
3 Sistem yang dikembangkan dipasang pada
touch screen beresolusi 1280 x 960 pixel
(memiliki perbandingan 4:3).
Manfaat Penelitian
Manfaat dari Sistem Informasi Kehumasan
IPB yang dihasilkan dari penelitian ini dapat
membantu memberikan informasi seputar IPB
bagi para pengguna dengan memberikan
kemudahan dalam mengakses menu yang
tersedia.
TINJAUAN PUSTAKA
Sistem Informasi
Informasi merupakan data yang telah diolah
menjadi bentuk yang memiliki makna dan dapat
digunakan oleh manusia. Sedangkan sistem
informasi merupakan komponen yang saling
terkait yang bertujuan untuk mengumpulkan,
mengolah, menyimpan, dan menyebarkan
informasi untuk mendukung pengambilan
keputusan, koordinasi, dan pengendalian
(Laudon 2006).
2
Usability Engineering
Usability merupakan faktor penting dalam
mengembangkan sebuah aplikasi. Pengembang
harus memahami prinsip-prinsip usability
sebelum mengimplementasikannya pada sebuah
aplikasi. Berdasarkan standar ISO/IEC 9126
(2001), usability didefinisikan sebagai
sekumpulan atribut kualitas yang menunjang
usaha yang diperlukan dalam penggunaan serta
peningkatan dugaan individu terhadap aplikasi
tersebut melalui penilaian sekumpulan
pengguna (Seffah 2009).
Usability engineering sendiri merupakan
sebuah aturan yang menyediakan metode-
metode terstruktur untuk menerapkan usability
pada perancangan antarmuka pengguna selama
pengembangan produk (Mayhew 1999). Secara
umum usability didefinisikan melalui hubungan
antara beberapa faktor antara lain:
Efficiency
Kemampuan aplikasi dalam memberikan
hasil yang diinginkan pengguna sesuai
dengan jumlah sumber daya yang
dikeluarkan.
Effectiveness
Kemampuan aplikasi yang membantu
pengguna untuk memperoleh tujuan tertentu
dengan akurasi sesuai konteks yang
diberikan.
Satisfaction
Satisfaction menjelaskan tingkat kepuasan
pengguna secara subjektif dalam
menggunakan aplikasi.
Learnability
Kemudahan pengguna untuk menguasai
feature yang diperlukan dalam mencapai
tujuan tertentu dalam konteks penggunaan
tertentu.
Touch Screen
Touch screen merupakan layar yang yang
terbuat dari permukaan khusus yang sensitif
terhadap sentuhan jari ataupun stylus. Untuk
berinteraksi dengan aplikasi cukup menyentuh
objek secara langsung yang tampil pada layar
(Galitz 2007).
Nordgren (2007) menyebutkan bahwa saat
ini touch screen sering dioperasikan pada
lingkungan yang terbuka seperti bandara. Touch
screen menggunakan interaksi secara langsung
tanpa bantuan alat fisik lainnya seperti mouse.
Oleh karena itu, touch screen umum digunakan
pada tempat-tempat umum dengan maksud dan
tujuan yang berbeda-beda seperti:
Pemberitahuan informasi publik. Antarmuka
yang user friendly sangat diperlukan karena
pengguna biasanya merupakan orang baru
dan memiliki sedikit pengalaman
menggunakan komputer, sehingga touch
screen dapat memberi kemudahan dalam
mengakses informasi yang diperlukan.
Sistem penjualan dan restauran. Touch
screen dapat membuat input data menjadi
lebih cepat dan mudah, serta bisa
menghemat tempat yang biasanya
dialokasikan untuk mouse dan keyboard.
Customer self-service. Contohnya pada
ATM serta e-ticket pada terminal-terminal
untuk mengurangi antrian.
Sistem kontrol dan automatisasi. Pada
proses industri, touch screen diperlukan
untuk menghemat ruang serta dengan
antarmuka grafis, operator dapat mengawasi
dan mengendalikan operasi cukup dengan
menyentuh layar.
Komputer untuk pelatihan. Touch screen
dapat membantu membuat proses
pembelajaran menjadi lebih menyenangkan
dan interaktif serta mengurangi waktu
pelatihan bagi pengguna komputer baru.
Teknologi bantu. Beberapa orang memiliki
masalah dalam menggunakan mouse,
keyboard, serta peralatan lainnya. Pada
kasus tertentu, touch screen dapat menjadi
salah satu solusinya.
Jenis-Jenis Touch Screen
Teknologi touch screen terus berkembang
dari waktu ke waktu. Teknologi ini cukup
banyak berkembang untuk memenuhi berbagai
kebutuhan. Saat ini touch screen tidak hanya
digunakan pada perangkat komputer saja. Mobil,
motor, telepon genggam, PDA, konsol game,
mesin-mesin berat, pesawat terbang, dan banyak
lagi perangkat yang telah dilengkapi touch
screen (Bjornskiold 2008).
Berikut ini adalah beberapa teknologi touch
screen yang masing-masing memiliki fungsi
dan kegunaannya tersendiri.
1. Resistive touch screen
Resistive touch screen merupakan layar
yang cara kerjanya harus ditekan, dapat
menggunakan jari atau benda apapun yg
ditekankan di layar. Kelemahan untuk layar ini
adalah jika diletakkan di kantong (terutama
kantong celana), bisa tertekan-tekan dan
mengakibatkan layar jadi gampang rusak karena
sering tertekan.
3
Layar dengan teknologi ini memiliki tingkat
kejernihan gambar sebesar 75% saja, sehingga
monitor akan tampak kurang jernih. Touch
sensor jenis ini sangat rentan dan lemah
terhadap sentuhan benda-benda yang agak tajam.
Teknologi ini tidak akan terpengaruh oleh
elemen-elemen lain di luar seperti misalnya
debu atau air, namun akan merespon semua
sentuhan yang mengenainya, baik itu
menggunakan jari tangan langsung maupun
menggunakan benda lain seperti stylus. Sangat
cocok digunakan untuk keperluan di dalam
dunia industri seperti di pabrik, laboratorium,
dan banyak lagi.
2. Capacitive touch screen
Cara penggunaan capacitive touch screen
harus dengan sentuhan jari, tidak dapat
menggunakan benda lain (kuku, stylus, dsb).
Karena layar ini bekerja dengan memanfaatkan
muatan listrik yang ada di tubuh kita. Layar
sentuh model kapasitif ini hampir tidak
memiliki kelemahan yang berarti, karena layar
ini adalah pengembangan terbaru untuk
menggantikan layar resistif.
Capacitive touch screen baru dapat bekerja
jika sentuhan-sentuhan yang ditujukan
kepadanya berasal dari benda yang bersifat
konduktif seperti misalnya jari. Tampilan
layarnya memiliki kejernihan hingga sekitar
90%, sehingga cocok untuk digunakan dalam
berbagai keperluan interaksi publik seperti
misalnya di restoran, kios elektronik, lokasi
point of sales, dan lain-lain.
3. Surface acoustic wave system
Teknologi ini tidak menggunakan bahan
pelapis metalik melainkan sebuah lapisan kaca,
maka tampilan dari layar touch screen jenis ini
mampu meneruskan cahaya hingga 90%,
sehingga lebih jernih dan terang dibandingkan
dengan resistive touch screen. Tanpa adanya
lapisan sensor juga membuat touch screen jenis
ini menjadi lebih kuat dan tahan lama karena
tidak akan ada lapisan yang dapat rusak ketika
disentuh, ketika terkena air, minyak, debu, dan
banyak lagi.
Kelemahan dari touch screen jenis ini adalah
kinerjanya dapat diganggu oleh elemen-elemen
seperti debu, air, dan benda-benda padat lainnya.
Sedikit saja terdapat debu atau benda lain yang
menempel di atasnya maka touch sreen dapat
mendeteksinya sebagai suatu sentuhan. Touch
screen jenis ini cocok digunakan pada ruangan
training komputer, keperluan dalam ruangan
untuk menampilkan informasi dengan sangat
jernih dan tajam dan saat presentasi dalam
ruangan.
4. Multi touch screen
Multi touch screen merupakan pengem-
bangan dari teknologi layar sentuh yang sudah
ada. Dari arti kata “multi” yang berarti banyak,
sudah terlihat bahwa keunggulan layar sentuh
ini dapat disentuh oleh lebih dari satu jari. Multi
touch screen ini mampu disentuh oleh puluhan
jari dari orang yang berbeda-beda secara
bersamaan.
Jenis touch screen ini dapat digunakan
untuk membesarkan, mengecilkan, mengubah
posisi, dan memindahkan posisi objek pada
layar monitor seperti foto atau games. Layar
multi touch screen ini biasa digunakan pada
handphone, komputer, MP3 player, dan
sebagainya.
Touch Screen Design Guideline
Nordgren (2007) meyebutkan dalam
mendesain antarmuka aplikasi touch screen
tentunya berbeda dengan aplikasi desktop.
Perusahaan touch screen, Touch Screen Inc
memberikan 10 tips untuk pengembangan
aplikasi touch screen, antara lain:
1 Selalu dijalankan pada full screen mode atau
menggunakan keseluruhan screen area.
2 Menggunakan warna background yang
cerah untuk mengurangi pantulan cahaya
serta untuk menyembunyikan sidik jari.
3 Dragging, double-clicks, scroll bars, drop-
down menus, multiple windows, dapat
membingungkan pengguna baru. Oleh
karena itu sebaiknya menggunakan
antarmuka point-click yang sederhana dan
tombol yang besar.
4 Pengguna akan lebih fokus pada layar jika
cursor dinon-aktifkan.
5 Feedback diberikan pada pengguna segera
setelah layar disentuh. Hal tersebut akan
meyakinkan pengguna bahwa aksi mereka
telah diproses. Tombol 3-D effects cocok
untuk tujuan tersebut.
6 Aplikasi yang dibuat cepat dan
menyenangkan. Pengguna tidak menyukai
sistem yang lambat.
7 Aplikasi touch screen yang dibuat intuitif,
serta pengguna diberi panduan sebanyak
mungkin.
8 Membatasi pilihan.
9 Animasi dan font berukuran besar dapat
menarik pengguna.
10 Menguji aplikasi yang telah dibuat. Jika
pengguna berhenti walaupun hanya sesaat,
4
itu pertanda masalah timbul dan harus
segera dibenahi.
Komponen User Interface
Pada perancangan sebuah aplikasi, perlu
diperhatikan beberapa komponen user interface
yang dapat mempengaruhi kinerja aplikasi
secara langsung. Komponen-komponen tersebut
antara lain:
Teks
Tipografi meliputi pemilihan jenis huruf dan
penentuan ukuran huruf. Dalam merancang
antarmuka, Galitz (2002) menyarankan untuk
menggunakan tidak lebih dari dua typeface
dengan salah satu typeface mendominasi. Jenis
huruf yang digunakan biasanya adalah yang
sederhana dan sering digunakan, seperti Arial
dan Times New Roman.
Kelebihan dari teks adalah tidak ambigu jika
dibandingkan dengan komponen GUI lainnya.
Tetapi teks juga memerlukan tempat ekstra serta
waktu pemrosesan lebih lama dan pengguna
yang berpengalaman kemungkinan lebih
memilih icon. Jika teks digunakan untuk tujuan
navigasi, sangatlah penting untuk menggunakan
kata seringkas mungkin (tapi hindari singkatan),
mudah dikenali serta mudah diingat.
Penggunaan tipe font dalam teks sangat
berpengaruh kepada kemudahan dalam
membaca informasi yang akan diberikan.
Apabila kita bertujuan untuk mencetaknya,
maka pergunakanlah tipe font serif, sedangkan
apabila menggunakan teks dalam GUI, font sans
serif dianjurkan untuk digunakan karena
memiliki resolusi yang lebih rendah daripada
font serif. Hal penting lainnya untuk diingat
adalah gunakan bahasa atau terminologi yang
umum. Pengguna seharusnya tidak mempelajari
istilah-istilah sulit.
Warna
Menurut Nielsen (2006), untuk memperjelas
teks digunakan warna teks yang kontras dengan
warna latar yaitu teks berwarna gelap dengan
latar belakang berwarna terang (positive text)
atau teks berwarna terang dengan latar berwarna
gelap (negative text).
Baik di alam maupun di layar, benda-benda
berwarna memiliki daya tarik yang lebih kuat.
Penerapan strategi pewarnaan ini dapat
membedakan hal penting dengan yang tidak
penting, menandakan suatu tugas tertentu,
membuat tampilan lebih atraktif, mewakili
status tertentu, menarik perhatian, menunjukkan
hubungan, dan sebagainya.
Suara
Suara merupakan cara yang baik untuk
memberitahukan informasi. Stone et al. (2005)
menyebutkan tiga fungsi penggunaan suara,
yaitu:
Memperkuat komponen visual GUI.
Menunjukkan operasi berhasil dilakukan.
Menarik perhatian.
Tombol
Karena touch screen digunakan pada
aplikasi point-and-click, maka sebagian besar
touch screen dipenuhi dengan button serta
ruang untuk menampilkan data. Oleh karena itu,
tombol memegang peranan penting pada desain
touch screen (Stone et al. 2005).
Pemilihan icon juga perlu diperhatikan.
Beberapa property yang harus dimiliki icon
antara lain:
Dapat dibedakan dengan mudah dari yang
lainnya, untuk menghindari kesalahan.
Mudah dikenali dan dipahami sehingga
pengguna dapat mengerti fungsi icon
tersebut.
Sederhana, tanpa detail yang tidak perlu.
Hindari kompleksitas seperti penggunaan
banyak warna.
Navigasi
Berdasarkan panduan Galitz (2002), setiap
aplikasi seharusnya dilengkapi dengan navigasi.
Navigasi bertujuan untuk memudahkan
pengguna mengetahui posisi dan keberadaan
mereka dalam aplikasi tersebut pada saat itu.
Selain itu, navigasi bertujuan untuk menentukan
pilihan.
Navigasi mengacu pada metode yang
digunakan seseorang untuk menemukan apa
yang mereka inginkan. Sebuah struktur navigasi
yang efisien merupakan elemen terpenting
dalam usability sebuah sistem. Struktur navigasi
yang sederhana dan jelas merupakan cara yang
dianjurkan untuk menampilkan informasi.
Scrolling
Scrolling terkadang diperlukan untuk
melihat seluruh isi halaman. Halaman yang
berukuran besar dapat menyebabkan terjadinya
banyak scrolling, sehingga tidak praktis dan
tidak efisien (Galitz 2002).
Ketika informasi yang disajikan tidak dapat
ditampilkan dalam sebuah window, informasi
tambahannya haruslah visible. Hal ini dapat diatasi
dengan membuat scrolling untuk menampilkan
data.
5
Heuristic Evaluation
Heuristic evaluation merupakan sebuah
evaluasi rinci terhadap sebuah sistem yang
dilakukan oleh ahli desain antarmuka untuk
mengidentifikasi permasalahan (Galitz 2007).
Pada heuristic evaluation, antarmuka diberikan
penilaian dengan beberapa prinsip usability
yang dikenali.
METODE PENELITIAN
Metode yang digunakan dalam penelitian
ini merujuk pada usability engineering lifecycle
(Mayhew 1999) untuk aplikasi sederhana yang
dapat dilihat pada Gambar 1. Secara garis besar,
metode ini meliputi dua kegiatan utama yaitu
analisis dan perancangan. Berikut penjelasan
tiap tahap dari metode yang digunakan.
Gambar 1 Usability Engineering Lifecycle
(Mayhew 1999).
A. Analisis Kebutuhan
1. Profil Pengguna
Profil pengguna adalah sebuah dokumen
yang digunakan untuk mengidentifikasi
kebutuhan dan tujuan dari sasaran kelompok
pengguna. Pada tahap ini ditentukan pengguna
sistem yang dibuat. Pengguna tersebut
ditentukan berdasarkan persyaratan dan kriteria
tertentu. Pengguna yang telah ditentukan
tersebut diberikan kuisioner untuk mendukung
analisis profil pengguna.
Terdapat dua cara utama untuk memperoleh
profil pengguna. Cara yang pertama adalah
melakukan wawancara dengan orang yang
berpengetahuan tentang calon pengguna. Dalam
hal ini adalah pihak Humas IPB. Cara yang
kedua adalah dengan melakukan penyebaran
kuisioner.
Hal yang perlu diperhatikan dalam
penyusunan kuisioner adalah bagaimana
menentukan kelompok pengguna secara jelas
serta menyusun pertanyaan yang bisa menggali
informasi seputar pengguna dan harapan
pengguna terhadap aplikasi yang
dikembangkan. Pada penelitian ini responden
dibatasi pada mahasiswa S1 dan S2.
2. Tugas Kontekstual
Pada tahap ini dilakukan analisis mengenai
tugas pengguna yang berkaitan dengan aliran
proses dan kerangka kerja. Analisis ini
digunakan sebagai dasar untuk menentukan dan
mengatur tujuan usability serta reorganisasi
perancangan antarmuka. Penentuan aliran
proses kerja disesuaikan dengan profil
pengguna.
3. Tujuan Usability
Pada tahap ini dirumuskan tujuan-tujuan
kualitatif dan kuantitatif khusus yang
menggambarkan kebutuhan usability.
Perumusan dilakukan berdasarkan hasil analisis
dari profil pengguna dan analisis tugas
kontekstual. Tujuan usability ini lebih fokus
terhadap kegiatan perancangan bentuk dasar
untuk evaluasi. Mengingat sistem ini ditujukan
bagi pengguna baru, maka tujuan utamanya
yaitu easy-to-learn.
4. Kapabilitas Platform
Tahapan ini dilakukan untuk menentukan
platform yang sesuai dalam pengembangan
Sistem Informasi Kehumasan IPB untuk
memenuhi kebutuhan pengguna. Pada tahap ini
juga dilakukan studi mengenai antarmuka
6
pengguna terhadap platform teknologi yang
digunakan untuk produk.
5. Prinsip Perancangan Umum
Pada tahap ini, yang dilakukan adalah
meninjau dan memahami kembali prinsip-
prinsip desain antarmuka yang baik sesuai
dengan analisis pada tahap-tahap sebelumnya.
Selain itu, dilakukan evaluasi terhadap
kelemahan-kelemahan yang berkaitan dengan
navigasinya.
B. Perancangan, Pengujian, dan Pengem-
bangan
1. Perancangan Ulang
Tahap ini adalah tahap perancangan ulang
tugas pengguna pada tingkat organisasi dan
aliran proses. Perancangan ulang ini
berdasarkan semua data pada tahap analisis
kebutuhan beserta tujuan usability-nya. Pada
tahap ini tidak dilakukan perancangan
antarmuka pengguna, hanya organisasi abstrak
fungsionalitas dan perancangan aliran proses.
2. Desain Model Konseptual
Pada tahap ini dilakukan proses sketsa
desain. Aturan-aturan mengenai konsistensi
kerja produk, proses, dan aksinya dibangun
pada tahap ini. Selain itu, juga dilakukan
identifikasi navigasi dan tampilan. Desain
antarmuka layar secara rinci belum dilakukan di
sini.
3. Screen Design Standards
Pada tahap ini dilakukan proses desain
antarmuka sistem berdasarkan evaluasi pada
langkah sebelumnya. Antarmuka yang dibangun
adalah antarmuka berdasarkan kebutuhan
pengguna.
4. Desain Antarmuka Detail
Pada tahapan ini didefinisikan serta
dilakukan pula proses dokumentasi perancangan
berdasarkan pada desain model konseptual serta
screen design standard yang dibangun pada
tugas sebelumnya sehingga alur, tampilan, serta
interaksi yang dirancang mengikuti standard
antarmuka pengguna yang telah dibuat pada
tugas sebelumnya.
5. Evaluasi Antarmuka Detail
Tahap ini adalah langkah untuk melakukan
evaluasi terhadap rancangan antarmuka yang
telah dibuat. Evaluasi ini digunakan untuk
menentukan keberhasilan tujuan usability yang
telah ditentukan sebelumnya. Evaluasi pada
tahapan ini dapat dilakukan dengan
menggunakan heuristic evaluation atau
dievaluasi langsung oleh seorang ahli desain
antamuka.
C. Instalasi
User Feedback
Tujuan dari tahap ini adalah memperoleh
data usability setelah produk selesai terpasang
(installed) dan digunakan serta untuk
memperoleh informasi mengenai desain
antarmuka pengembangan produk lebih lanjut.
User feedback dapat diperoleh dengan
menerapkan salah satu teknik evaluasi dari
pengguna ahli seperti formal usability testing,
kuisioner, wawancara, fokus grup, serta usage
studies.
HASIL DAN PEMBAHASAN
A. Analisis Kebutuhan
1. Profil Pengguna
Sebagaimana yang telah dijelaskan bahwa
terdapat dua cara untuk memperoleh profil
pegguna, yaitu dengan metode wawancara serta
penyebaran kuisioner. Kedua cara tersebut telah
ditempuh dalam penelitian ini. Tahap pertama
yang dilakukan adalah teknik wawancara.
Wawancara singkat telah dilakukan dengan
Kepala Bidang Humas dan Protokoler IPB, Ibu
Ir. Henny Windarti, M.Si. Pada wawancara
tersebut, diperoleh hasil bahwa target pengguna
merupakan masyarakat luas yang berkujung ke
IPB. Pada wawancara tersebut juga diperoleh
beberapa fasilitas yang seharusnya terdapat
pada aplikasi touch screen tersebut, seperti
galeri foto, video, agenda kegiatan IPB, profil
IPB, organisasi IPB, unit administrasi IPB,
informasi seputar fakultas, serta beberapa
produk unggulan IPB.
Sedangkan teknik yang kedua yaitu
penyebaran kuisioner juga telah dilakukan.
Kuisioner tersebut bertujuan untuk menggali
informasi yang diperlukan. Contoh kuisioner
tersebut dapat dilihat pada Lampiran 1. Setelah
kuisioner dibagikan, kemudian dianalisis untuk
memperoleh profil pengguna. Hasil analisis
profil pengguna berdasarkan kuisioner dapat
dilihat pada Tabel 1.
Dari Tabel 1 terlihat bahwa responden
mengunjungi rektorat untuk keperluan
administrasi serta untuk memperoleh informasi
seputar kampus. Selain itu, dari kuisioner yang
dibagikan diperoleh data bahwa informasi yang
diharapkan berupa agenda kegiatan IPB, agenda
pimpinan, serta informasi umum seputar IPB.
7
Tabel 1 Data dan analisis profil pengguna
No Pertanyaan Jawaban Jmlh %
1 Jenis kelamin? Laki-laki 10 50
Perempuan 10 50
2 Pekerjaan? Mahasiswa S1 14 70
Mahasiswa S2 6 30
3 Penguasaan
Komputer?
Kurang 0 0
Cukup 12 60
Baik 8 40
4
Alasan
mendatangi
rektorat?
Administrasi 12 43
Cari Informasi 9 32
Lain-lain 7 25
5 Kidal? Ya 0 0
Tidak 20 100
6
Pernah
menggunakan
touch screen?
Ya 18 90
Tidak 2 10
7
Informasi yang
dibutuhkan
seputar IPB?
Agenda pimpinan 4 12,5
Kegiatan-kegiatan
IPB 5 15,6
Organigram pejabat
IPB 3 9,4
Profil IPB 7 21,9
Alamat / kontak 8 25
Lain-lain 5 15,6
Pengguna pada sistem ini merupakan
masyarakat umum, namun pada perancangan
sistem ini responden hanya dibatasi pada
mahasiswa S1 dan mahasiswa S2. Selain itu,
dari kusioner yang dibagikan diperoleh data
bahwa pengguna memiliki kemampuan
penguasaan komputer yang bisa dikategorikan
cukup, serta rata-rata dari mereka menjawab
pernah menggunakan aplikasi touch screen.
Dari kuisioner tersebut juga diperoleh data
bahwa pengguna tidak bertangan kidal,
sehingga perlu diperhatikan navigasi yang
sesuai. Dengan beberapa pertimbangan, sistem
ini dibangun untuk mengakomodasi baik
pengguna kidal ataupun tidak. Mengingat
bahwa pengguna sistem ini merupakan
pengguna baru, maka perlu diperhatikan tujuan
dari pembangunan sistem ini yang menekankan
pada pembangunan antarmuka yang easy-to-
learn serta easy-to-remember. Dari kuisioner
yang dibagikan diperoleh data karakteristik fisik
pengguna yang dapat dilihat pada Tabel 2.
Tabel 2 Karakteristik fisik pengguna
Karakteristik fisik Tingkat
Usia 19-40 tahun
Jenis Kelamin Pria dan wanita
Penggunaan tangan Tangan kanan
2. Analisis Tugas Kontekstual
Berdasarkan profil pengguna, diperoleh
rancangan alur kerja tugas dan koleksi data
pengamatan tugas yang dapat dilihat pada Tabel
3. Dari data tersebut dapat diamati perilaku
pengguna dalam memperoleh informasi yang
diperlukan. Adapun alur kerja tugas yang
dilakukan untuk keperluan navigasi adalah
sebagai berikut:
a. Melihat agenda IPB serta pimpinan IPB.
Kegiatan ini bertujuan untuk mengamati
kemudahan navigasi pengguna dalam
memperoleh informasi agenda di IPB
maupun agenda para pimpinan. Untuk
mengurangi tahapan yang harus dilakukan
pengguna, maka cara mengakses agenda
adalah dengan memilih menu „Agenda‟,
menentukan pilihan agenda, kemudian pilih
tanggal tertentu untuk melihat agenda pada
tanggal tersebut.
b. Melihat dokumentasi seputar IPB berupa
video-video serta foto-foto seputar IPB.
Kegiatan ini bertujuan untuk mengamati
apakah pengguna dapat memutar video
(play) serta melihat foto-foto kegiatan.
Untuk mengakses menu ini, pilih menu
„Galeri‟ pada halaman beranda. Untuk
masuk ke menu video, pilih menu „Video‟.
Kemudian pilih video yang akan diputar dari
playlist yang tersedia. Untuk masuk ke
menu gambar, pilih menu „Gambar‟,
kemudian sentuh thumbnail untuk melihat
foto dengan ukuran lebih besar.
c. Melihat informasi seputar fakultas serta
produk unggulan IPB. Menu ini dapat
diakses dengan memilih menu „Fakultas dan
Produk‟. Untuk melihat informasi fakultas,
pilih menu „Fakultas‟, kemudian pilih
fakultas yang dituju. Untuk melihat
informasi mengenai produk unggulan IPB,
pilih menu „Produk‟, kemudian sentuh
thumbnail untuk melihat informasi produk
lebih detail.
d. Melihat struktur organisasi IPB yang
dibatasi hanya pada alamat, nomor telepon,
serta alamat e-mail direktorat dan kantor di
bawah rektor, wakil rektor bidang akademik
dan kemahasiswaan, wakil rektor bidang
sumberdaya dan pengembangan, wakil
rektor bidang riset dan kerjasama, serta
wakil rektor bidang bisnis dan komunikasi.
Menu ini dapat diakses dengan memilih
menu „Tentang‟, kemudian pilih menu
„Organisasi‟. Sentuh thumbnail untuk
melihat informasi kontak yang dapat
dihubungi.
8
Tabel 3 Koleksi data pengamatan tugas
Aktor
(pengguna) Trigger
Use case
(tugas) Urutan skenario tugas
Kesalahan, masalah, dan
komentar
Umum Melihat
agenda
pimpinan
Bertanya ke
sekretariat
pimpinan
1. Pergi ke sekretariat
pimpinan
2. Melihat papan agenda
pimpinan
3. Bertanya pada sekretaris
pimpinan
Tidak mengetahui ruang
sekretariat pimpinan
Mengunjungi
situs IPB
1. Mengetikkan alamat situs
IPB (http://smap.ipb.ac.id/)
2. Memilih menu pencarian
agenda
3. Mengisi form pencarian
Banyak masyarakat luas
yang tidak mengetahui
mengenai situs tersebut
Pengguna bingung
memilih menu
Pengguna bingung
mengisi form
Agenda tidak update
Salah mengetikkan
alamat
Melihat
informasi
fakultas
Mengunjungi
situs IPB
1. Mengetikkan alamat situs
IPB (http://ipb.ac.id/)
2. Memilih menu
“Education”
3. Memilih informasi yang
diinginkan
Pengguna bingung
memilih menu
Salah mengetikkan
alamat
Melihat
informasi
produk
unggulan
IPB
Mengunjungi
situs IPB
1. Mengetikkan alamat situs
IPB (http://ipb.ac.id)
2. Memilih menu “Database
penelitian”
3. Mengisi form
4. Memilih menu “Produk
Unggulan”
Pengguna bingung
memilih menu
Salah mengetikkan
alamat
Melihat
struktur
organisasi
IPB
Mengunjungi
situs IPB
1. Mengetikkan alamat situs
IPB (http://ipb.ac.id)
2. Memilih menu “About
IPB”
3. Memilih menu
“Organizational Structure”
Pengguna bingung
memilih menu
Salah mengetikkan
alamat
Melihat
profil IPB
Mengunjungi
situs IPB
1. Mengetikkan alamat situs
IPB (http://ipb.ac.id)
2. Memilih menu “About
IPB”
Pengguna bingung
memilih menu
Salah mengetikkan
alamat
9
e. Melihat profil IPB yang dibatasi pada visi
dan misi, tujuan dan motto, serta lambang
dan bendera IPB. Untuk mengakses menu
ini, pilih menu „Tentang‟, kemudian pilih
menu „Profil‟. Sentuh tab yang tersedia
untuk melihat informasi tertentu seputar
IPB.
3. Tujuan Usability
Tujuan utama pembangunan sistem
informasi ini adalah easy to learn, yaitu
antarmuka penguna dibuat mudah untuk
dipelajari dan tidak membuat pengguna
mengingat urutan-urutan yang benar untuk
menyelesaikan tugasnya. Adapun tujuan
kualitatif yang diperoleh adalah sebagai berikut:
Memudahkan navigasi.
Memberikan user experience yang
menyenangkan bagi pengguna.
Mempercepat alur kerja.
4. Kapabilitas platform
Perancangan dan pembangunan sistem
informasi ini menggunakan sistem operasi
Microsoft Windows dengan pertimbangan
bahwa sistem ini akan dipasang pada sistem
operasi tersebut. Adapun kemampuan dan
batasan yang didefinisikan adalah sebagai
berikut:
Ukuran dan resolusi layar
Sistem ini dibangun khusus untuk dipasang
pada layar beresolusi 1280 x 960 pixel.
Perancangan ukuran halaman yang kurang
tepat akan menyebabkan terjadinya
scrolling.
Input devices
Pengembangan aplikasi ini ditujukan khusus
untuk touch screen, oleh karena itu perlu
diperhatikan aspek-aspek yang dapat
berpengaruh terhadap perancangan antar-
muka produk. Seperti yang telah dijelaskan
pada bagian tinjauan pustaka bahwa terdapat
empat jenis touch screen. Aplikasi ini
ditujukan khusus untuk touch screen jenis
capacitive screen yang cocok untuk
digunakan dalam berbagai keperluan
interaksi publik.
Plugin
Sistem ini memerlukan plugin flash player
untuk memutar file video, karena secara
default sistem operasi Microsoft Windows
tidak menyediakan plugin ini. Aplikasi ini
juga memerlukan plugin Apple Quick Time
agar bisa menjalankan fungsi suara ketika
button disentuh.
Mozilla Firefox dan Mozilla Prism
Sistem ini dijalankan pada browser Mozilla
Firefox serta untuk mendukung mode full
screen, maka diperlukan aplikasi Mozilla
Prism yang dapat membuat sistem ini
berjalan pada mode full screen.
5. Prinsip perancangan umum
Pada perancangan sistem ini diperhatikan
beberapa aspek dalam merancang desain
antarmuka. Aspek-aspek yang dimaksud antara
lain pemilihan teks, warna, suara, tombol,
pengaturan navigasi, serta penggunaan scrolling.
Petunjuk perancangan aplikasi ini merujuk pada
pedoman perancangan antarmuka yang dapat
dilihat pada bagian tinjauan pustaka pada
bagian touch screen design guideline dan pada
bagian komponen user interface.
B. Desain, Pengujian, dan Pengembangan
1. Perancangan ulang
Tahap ini tidak dilakukan karena tahap ini
merupakan tahap rekayasa ulang, validasi, dan
perbaikan dari tahap profil pengguna dan
analisis tugas kontekstual yang telah dilakukan
sebelumnya.
2. Desain model konseptual
Berdasarkan analisis kebutuhan, kemudian
akan dirancang antarmuka yang sesuai dengan
tujuan pengguna. Perancangan aplikasi touch
screen ini tentunya dititikberatkan pada
kemudahan penggunaan karena rata-rata
penggunanya adalah untrained user. Sketsa
rancangan aplikasi dapat dilihat pada Gambar 2
dan Gambar 3. Di bawah ini adalah langkah-
langkah perancangan model konseptual yang
dilakukan:
a. Pengaturan ruang dan tata letak
Touch screen biasanya memiliki ukuran
tetap (fixed size) dan pada sistem yang dibangun
ini menggunakan ukuran layar beresolusi 1280
x 960 pixel. Selain itu pada aplikasi touch
screen, tombol (button) yang digunakan juga
memiliki ukuran dan jarak minimum untuk
menjamin pengoperasian menggunakan jari.
Ukuran minimum pada button sebesar ¾ x ¾
inch, sedangkan jarak minimum antar button
sebesar ¼ inch.
Mengingat sistem ini dibangun untuk touch
screen, maka tata letaknya juga dilakukan
dengan cara yang berbeda. Hal yang
diperhatikan adalah mengidentifikasi
pengelompokan fungsi elemen-elemen yang
diletakkan berdekatan dan mengelompokkannya
ke dalam functional areas, seperti:
- Data display
10
- Data input atau data selection
- Grouping of function keys
- Numerical or text keypad
- Status display
b. Perancangan antarmuka utama
Perancangan antarmuka utama dilakukan
berdasarkan pembagian ruang. Hal yang perlu
diingat juga adalah touch screen tidak cocok
untuk data entry serta hindari penggunaan
scrolling yang tidak menerapkan point-click,
dengan kata lain pengguna diharuskan menahan
scroll dan menggesernya secara vertikal
maupun horizontal untuk melakukan operasi
scrolling.
HEADER
BUTTON BUTTON BUTTON BUTTON
BUTTON
Gambar 2 Konsep pembagian ruang untuk
halaman utama.
HEADER
BUTTON
CONTENT
BUTTON
Gambar 3 Konsep pembagian ruang untuk
halaman lainnya (halaman isi).
3. Screen design standards
Tujuan dari screen design standard adalah
untuk memastikan konsistensi serta
kesederhanaan pada perancangan detail
keseluruhan antarmuka suatu produk. Konsisten
tidak hanya berkaitan dengan easy-to-learn atau
easy-to-remember tapi juga easy-to-use.
Pengguna mengharapkan konsistensi pada
aplikasi dan cenderung akan melakukan
kesalahan jika terjadi inkonsistensi. Beberapa
standar yang digunakan dapat dilihat pada Tabel
4.
Tabel 4 Screen design standard
No Konten menu Jenis kontrol
1 Aksi navigasi Push button
2 Aksi scrolling Scrolling button
3 Teks informasi Text block
4 Informasi detail Pop up
4. Desain Antarmuka Detail
Berdasarkan tahap conceptual model design
dan screen design standards, yang dilakukan
pada tahap ini adalah menggabungkan kedua
tahap tersebut dengan menerapkan prinsip-
prinsip perancangan umum. Tampilan halaman
aplikasi dapat dilihat pada Lampiran 2.
Pengaturan ruang dan tata letak
Aplikasi touch screen ini dirancang khusus
untuk layar beresolusi 1280 x 960 pixel. Secara
keseluruhan, halaman pada aplikasi ini terbagi
menjadi tiga bagian yaitu header yang
berfungsi sebagai navigasi untuk mengetahui
menu yang sedang diakses, content yang
merupakan isi, serta button untuk menampilkan
menu bantuan, kembali (kembali ke halaman
sebelumnya), dan beranda (kembali ke halaman
utama).
Teks
Sebagaimana yang telah diuraikan pada
bagian tinjauan pustaka bahwa penggunaan teks
pada GUI sebaiknya menggunakan tipe font
face sans-serif yang beresolusi lebih rendah dan
lebih mudah dibaca. Atas pertimbangan itulah,
sistem informasi ini menggunakan font face
sans- serif.
Warna
Sebagaimana yang telah disebutkan pada
tips pengembangan aplikasi touch screen yang
menyebutkan bahwa warna background yang
cerah dapat mengurangi pantulan cahaya serta
dapat menyembunyikan sidik jari. Atas
pertimbangan tersebut, maka aplikasi yang
dibangun ini pun dirancang dengan meng-
gunakan komposisi background yang lebih
terang dengan foreground lebih gelap. Tingkat
kemampuan baca dengan beberapa kombinasi
warna teks dan background dapat dilihat pada
Tabel 5.
Pengembangan aplikasi ini menerapkan
teknik positive text, yaitu menggunakan teks
berwarna gelap serta latar berwarna terang.
Sedangkan pada komponen GUI lainnnya
11
didominasi warna biru. Hal ini didasari oleh
lambang IPB yang memiliki warna dasar biru.
Tabel 5 Tingkat kemampuan baca dengan
kombinasi warna berbeda
Kombinasi warna Tingkat baca
Teks hitam pada
background putih
Tinggi: nilai kontras
tertinggi. Perbedaan
yang tampak tinggi.
Teks biru pada
background putih
Tinggi: perbedaan
yang tampak tinggi,
selama menggunakan
biru tua.
Teks hitam pada
background abu-abu
Sedang: perbedaan
yang tampak antara
sedang menuju tinggi
bergantung pada
kombinasi warna dan
saturation level.
Teks putih pada
background biru
Rendah: susah dibaca.
Teks abu-abu pada
background putih
Rendah: nilai kontras
rendah. Perbedaan
yang tampak rendah.
Teks putih pada
background abu-abu
Rendah: nilai kontras
rendah. Perbedaan
yang tampak rendah.
Teks merah pada
background biru
Sangat rendah:
kombinasi warna
bercetak tebal tertentu
membetunk efek
berbayang,
melelahkan mata.
Teks merah pada
background hitam
Sangat rendah:
kombinasi warna
bercetak tebal tertentu
membetunk efek
berbayang,
melelahkan mata.
Suara
Untuk memberikan feedback pada pengguna,
maka saat pengguna melakukan aksi
(menyentuh tombol) akan disertai suara untuk
meyakinkan pengguna bahwa proses sedang
berlangsung atau sudah sukses dilakukan.
Tombol
Tombol pada perancangan sistem ini sengaja
dibuat berukuran besar serta kelihatan agak
timbul. Dengan tombol yang semacam itu
diharapkan dapat meningkatkan dugaan
sehingga pengguna dapat berinteraksi dengan
baik. Pada aplikasi touch screen ini, terdapat
beberapa tombol yang digunakan seperti yang
ditunjukkan pada Tabel 6.
Tabel 6 Jenis-jenis tombol
Tombol Fungsi
Tombol utama
“Has been activated”
button pada menu
Agenda
“Will be activated”
button pada menu
Agenda
Tombol default pada
menu Agenda
Tombol untuk kembali
ke halaman utama
Tombol untuk masuk
ke pilihan fakultas
pada menu Fakultas
Selain itu, pada aplikasi ini juga terdapat
thumbnail buttons, yaitu gambar yang clickable
berfungsi untuk preview gambar (pada menu
gambar dan produk) atau sebagai tombol untuk
memproses menu yang dituju (pada menu
organisasi). Thumbnail buttons dapat dilihat
pada Tabel 7.
Navigasi
Untuk memberi tahu dimana posisi
pengguna saat ini serta untuk mempermudah
menuju halaman tertentu, tentunya diperlukan
navigasi. Hal ini ditunjukkan oleh header pada
tiap halaman yang menunjukkan posisi
pengguna. Pada aplikasi ini, telah dirancang
navigasi yang dapat dilihat pada Tabel 8.
12
Tabel 7 Jenis-jenis thumbnail button
Thumbnail buttons Lokasi
(menu)
Gambar
Produk
Organisasi
Tabel 8 Navigasi
Navigasi Fungsi
menunjukkan
welcome screen
menunjukkan
posisi pada tiap-
tiap menu
kembali ke
welcome screen
(home) serta
untuk kembali
ke posisi
sebelumnya
(back)
Scrolling
Perancangan antarmuka sistem informasi ini
menekankan pada minimalisasi scrolling. Untuk
memenuhi tujuan tersebut, maka resolusi layar
yang dipakai harus 1280 x 960 pixel karena
aplikasi ini akan dipasang pada layar beresolusi
1280 x 960 pixel serta pada sistem ini informasi
yang ditampilkan diharapkan tidak berlebihan
namun cukup untuk memenuhi kebutuhan
pengguna akan informasi seputar IPB.
Mengingat aplikasi touch screen dijalankan
pada full screen mode, maka scrolling sangat
penting untuk dihindari, baik itu vertical
maupun horizontal scrolling. Namun karena
informasi yang akan diberikan relatif banyak,
maka salah satu solusinya adalah dengan
membuat scroll button seperti terlihat pada
Tabel 9.
Tabel 9 Jenis-jenis scroll button
Scroll button Fungsi
Scroll button pada
menu Video
Scroll button pada
menu Produk
Scroll button pada
menu Fakultas
Scroll button pada
menu Organisasi
Scroll button pada
pop-up menu
Gambar
5. Evaluasi Antarmuka Detail
Evaluasi pada tahapan ini hanya seputar
masalah sederhana seperti masalah-masalah
kosmetik (hiasan) pada rancangan antarmuka.
Sebagaimana yang telah disebutkan pada bagian
metode penelitian bahwa tahapan ini bisa
dilakukan menggunakan heuristic evaluation
atau bisa juga menggunakan evaluasi secara
langsung oleh seorang ahli desain antarmuka.
Evaluasi yang dilakukan pada penelitian ini
menggunakan metode heuristic evaluation yang
dilakukan oleh enam mahasiswa Departemen
Ilmu Komputer. Keenam evaluator menguji
sistem kemudian mengisi checklist HE yang
dapat dilihat pada Lampiran 3. Hasil lengkap
HE dapat dilihat pada Lampiran 4. Dari hasil
checklist tersebut, dilakukan penghitungan
tingkat kesesuaian antarmuka dengan standar
dalam HE. Tabel 10 menunjukkan hasil
perhitungan heurisic evaluation.
13
Tabel 10 Hasil perhitungan heuristic evaluation
Poin evaluasi Persentase
kesesuaian
1. Visibility system of status 88.09%
2. Match between system and the
real world
100%
3. User control and freedom 87,5%
4. Consistency and standards 81,94%
5. Help user recognize, diagnose,
and recover from errors
83,33%
6. Error prevention 72,22%
7. Recognition rather than call 90,91%
8. Flexibility 100%
9. Aesthetic and minimalist design 91,67
10. Help and documentation 78,57%
C. Instalasi
Sistem Informasi Kehumasan IPB dibangun
berbasis web. Hal ini ditujukan agar informasi
yang disajikan bersifat dinamis (dapat dilakukan
update informasi dengan mudah), kemudahan
dalam instalasi (hanya memerlukan browser
untuk menjalankan aplikasi), serta dengan
pertimbangan skalabilitas (aplikasi dapat
dipasang dimana pun dengan catatan terhubung
pada jaringan IPB).
Sistem ini terbagi ke dalam tiga bagian yaitu
server aplikasi, touch screen client, dan panel
administrator. Server aplikasi merupakan
tempat database disimpan, touch screen client
merupakan tempat aplikasi desktop dipasang
atau dengan kata lain merupakan aplikasi yang
dapat diakses langsung oleh pengguna (telah
dipasang pada media touch screen), serta
administrator yang merupakan panel untuk
meng-update informasi yang ingin ditampilkan.
Pada panel ini dapat dilakukan update agenda,
foto, video, dan produk serta dapat dilakukan
pula beberapa operasi manipulasi sederhana
seperti tambah, upload, edit, dan hapus.
Tampilan panel administrator tersebut dapat
dilihat pada Lampiran 5. Topologi instalasi
sistem informasi ini dapat dilihat pada Gambar
4.
Untuk menjamin keberhasilan kerja sistem,
maka dilakukan beberapa uji sistem baik uji
panel administrator maupun uji aplikasi touch
screen client. Pengujian yang dilakukan pada
panel administrator menggunakan teknik
blackbox, yang hanya berfokus pada
fungsionalitas sistem. Deskripsi dan hasil uji
sistem dapat dilihat pada Lampiran 8 dan 9.
Gambar 4 Topologi instalasi sistem.
Sistem Informasi Kehumasan IPB ini telah
di-install pada media touch screen di Kampus
Progam Pascasarjana Manajemen dan Bisnis
IPB (MB-IPB). Dokumentasi pemasangan
aplikasi ini dapat dilihat pada Gambar 5.
Gambar 5 Instalasi Sistem Informasi
Kehumasan IPB.
User Feedback
Setelah aplikasi yang dibangun mendapat
persetujuan untuk melakukan uji sistem, maka
aplikasi Sistem Informasi Kehumasan IPB di-
install pada media touch screen yang terdapat di
Kampus MB-IPB. Uji aplikasi ini dilakukan
untuk memperoleh user feedback dari pengguna
aplikasi.
Metode yang dilakukan untuk memperoleh
user feedback yaitu penyebaran kuisioner.
Sesuai dengan tujuan usability pada sistem yang
dibuat, yaitu easy to learn maka fokus
14
pengujian hanya pada pengguna baru. Kuisioner
yang dibagikan mengikuti Computer System
Usability Questionnaire (CSUQ) yang dapat
dilihat pada Lampiran 6.
Sistem yang telah di-install diujikan kepada
31 orang responden. Hasil dari kuisioner
tersebut dapat dilihat pada Lampiran 7. Skala
penilaian berkisar dari 1 sampai 7. Semakin
tinggi nilai yang diperoleh menunjukkan
semakin bagus hasil penilaian pengguna
terhadap sistem.
Dari Lampiran 7 dapat diketahui nilai mean,
median, mode, standard deviation, confidence
level, upper, serta lower hasil pengujian sistem.
Hal pertama yang harus diperhatikan ketika
menghitung nilai statistik deskriptif adalah
mengukur tingkat kecenderungan suatu nilai
terhadap titik tengah. Ketiga hal umum yang
harus dihitung antara lain mean, median, dan
mode.
Kuisioner CSUQ yang digunakan dapat
dibagi ke dalam empat atribut, antara lain
system usefulness (SYSUSE), information
quality (INFOQUAL), interface quality
(INTQUAL), dan overall satisfaction
(OVERALL). Dari Lampiran 7 dapat dilihat
bahwa nilai masing-masing atribut yang
diperoleh adalah SYSUSE = 5,69, INFOQUAL
= 5,39, INTQUAL = 5,20, dan OVERALL =
5,48.
Hasil perhitungan kuisioner menunjukkan
bahwa nilai mean dari setiap pertanyaan
melebihi nilai tengah. Dengan kata lain
responden merasa puas dengan sistem yang
dibangun. Yang menjadi perhatian lebih adalah
pertanyaan kuisioner nomor 12 yang
menanyakan tentang fitur (fungsi) yang
diharapkan pada sistem. Pada nomor tersebut
nilai mean yang diperoleh adalah 5,00 (nilai
mean terendah). Faktor-faktor yang dapat
mempengaruhi hal tersebut adalah sebagian
besar responden yang merupakan mahasiswa
MB-IPB mengharapkan adanya fitur jurnal serta
terdapat fitur search pada sistem. Nilai mean
pada pertanyaan kuisioner nomor 2 memperoleh
nilai tertinggi yaitu sebesar 6,10. Hal yang
ditanyakan pada nomor tersebut mengenai
penggunaan sistem yang sederhana. Faktor yang
dapat mempengaruhi tingginya nilai tersebut
adalah pembangunan sistem memperhatikan
usability yang dikhususkan bagi pengguna baru
serta penerapan antarmuka point-click
memudahkan pengguna untuk berinteraksi
dengan sistem secara langsung.
KESIMPULAN DAN SARAN
Kesimpulan
Kebutuhan akan informasi menjadi hal yang
penting dewasa ini. IPB sebagai salah satu
perguruan tinggi terkemuka di Indonesia
memiliki informasi yang dibutuhkan
masyarakat luas. Oleh karena itu, penelitian ini
dilakukan untuk membantu penyebarluasan
informasi bagi pengguna yang sedang berada di
lokasi kampus. Penelitian ini juga bertujuan
untuk membangun sebuah sistem informasi
yang user friendly.
Pada penelitian ini digunakan metode
usability engineering lifecycle yang
memperhatikan usability pada perancangan
sistem selama pengembangan sistem. Sistem ini
diimplementasikan pada media touch screen
yang lebih interaktif dibandingkan dengan
komputer atau laptop yang masih menggunakan
mouse dan keyboard (konvensional). Selain itu,
sistem ini dibangun lebih sederhana sehingga
memudahkan penggunaan aplikasi khususnya
bagi pengguna baru.
Pembangunan Sistem Informasi Kehumasan
IPB pada penelitian ini telah berhasil mencapai
usability yang baik. Hal ini dapat ditunjukkan
dari hasil analisis kuisioner CSUQ yang
dibagikan kepada 31 responden. Dari skala
penilaian berkisar 1 sampai 7, sistem ini
mendapatkan nilai kepuasan secara keseluruhan
(OVERALL) sebesar 5,48, serta memperoleh
nilai untuk masing-masing atribut, yaitu system
usefulness (SYSUSE) = 5,69, information
quality (INFOQUAL) = 5,39, serta interface
quality (INTQUAL) = 5,20.
Saran
Pada penelitian selanjutnya diharapkan
dapat memperbanyak konten sistem. Hal ini
dikarenakan, dari kuisioner yang dibagikan
banyak diperoleh kritik dan saran untuk
menambah informasi seputar kampus IPB lebih
luas lagi.
Pada penelitian selanjutnya juga perlu
diperhatikan tentang perangkat penyampaian
informasi. Media touch screen yang kurang
sensitif terhadap sentuhan menyebabkan
ketidaknyamanan pada penggunaan sistem.
Pengguna harus mengeluarkan tenaga ekstra
dan berkali-kali menyentuh layar untuk
mengakses suatu menu. Akibatnya, banyak
pengguna yang mengeluhkan hal tersebut.
15
DAFTAR PUSTAKA
Bjornskiold F, Johansson R. 2008. Touchscreen
GUI Design and Evaluation of an On-
Device Portal. Sweden: Umea University.
Galitz WO. 2007. The Essential Guide to User
Interface Design: An Introduction to GUI
Design Principles and Techniques. Ed ke-3.
Indiana: Wiley Publishing Inc.
Laudon K, Laudon J. 2006. Management
Information System: Managing Digital Firm.
New Jersey: Pearson/Prentice Hall.
Mayhew DJ. 1999. The Usability Engineering
Lifecycle: A Practitioner’s Handbook for
User Interface Design. San Fransisco:
Morgan Kaufmann Publisher.
Nielsen J, Loranger H. 2006. Prioritizing Web
Usability. Barkeley: New Riders.
Nordgren P. 2007. Development of a touch
screen interface for Scania Interactor.
Sweden: Umea University.
Seffah Ahmed, Metzker E. 2009. Adoption-
centric Usability Engineering. London:
Springer.
Stone D, Jarett C. 2005. User Interface Design
and Evaluation. UK: Elsevier Inc.
Tullis T, Albert B. 2008. Measuring the User
Experience: Collecting, Analyzing, and
Presenting Usability Metrics. San Fransisco:
Morgan Kaufmann Publisher.
17
Lampiran 1 Kuisioner (profil pengguna)
Kuisioner ini dibagikan untuk keperluan menyusun skripsi dengan judul
“Rekayasa Kebergunan pada Sistem Informasi Kehumasan IPB”
Ilmu Komputer – Institut Pertanian Bogor
Nama :
Jenis Kelamin* : Laki-laki / Perempuan Umur : tahun
Pekerjaan** :
1. Apa tujuan Anda mendatangi rektorat?
Jawaban :
2. Penguasaan Komputer
Kurang Cukup Baik
3. Apakah Anda kidal?
Ya Tidak
4. Apakah Anda pernah menggunakan touch screen?
Ya Tidak
5. Alasan Anda mendatangi rektorat
Jawaban :
6. Jika Anda mendatangi rektorat dan menjumpai touch screen yang akan memberikan
informasi seputar IPB, informasi apa sajakah yang Anda harapkan?
Jawaban :
Terima Kasih
* : coret yang tidak perlu
** : Jika Anda seorang mahasiswa/i, sebutkan program studi Anda beserta tahun masuk
18
Lampiran 2 Tampilan Sistem Informasi Kehumasan IPB
Welcome screen Halaman Agenda
Halaman Agenda (pop-up) Halaman Galeri
Halama Video Halaman Gambar
Halaman Fakultas & Produk Halaman Fakultas (awal)
19
Halaman Fakultas (detail) Halaman Produk
Halaman Tentang Halaman Organisasi
Halaman Organisasi Halaman Profil
20
Lampiran 3 Heuristic evaluation checklist
HEURISTIC EVALUATION
Evaluator _________________________________________ Tanggal __________________
1 Visibility of system status
Sistem Memberikan informasi apa yang sedang terjadi melalui feedback dengan waktu
yang sesuai (reasonable time).
# Review Checklist Yes No N/A
1.1 Apakah semua tampilan dimulai dengan judul atau header yang menggambarkan
konten?
1.2 Apakah terdapat konsistensi desain ikon dan style pada sistem?
1.3 Apakah selected icon yang berada di sekitar unselected icon dapat dibedakan?
1.4 Adakah feedback yang diberikan sistem setiap kali sebuah aksi dilakukan?
1.5 Setelah pengguna menyelesaikan suatu tahap, apakah ada feedback yang
memberikan indikasi bahwa tahap berikutnya dapat dilakukan?
1.6 Adakah feedback visual pada saat suatu objek dipilih?
1.7 Apakah current status ikon dapat dilihat dengan jelas?
1.8 Jika terdapat delay (lebih dari 15 detik) pada sistem, apakah user diberi tahu
bahwa sistem sedang bekerja?
1.9 Pengguna harus mengingat suatu informasi dalam waktu kurang dari 2 detik.
1.10 Tidak diperlukan konsentrasi tinggi serta tidak diperlukan mengingat informasi :
2 - 15 detik.
1.11 Apakah penamaan menu konsisten dengan tugas pengguna?
1.12 Apakah sistem menyediakan visibility: dengan melihat saja pengguna dapat
mengenali aksi yang harus dilakukan.
1.13 Apakah GUI menunjukkan suatu pilihan telah dibuat?
1.14 Apakah GUI menunjukkan pilihan yang telah dibuat dapat di-deselect?
Komentar :
2 Match between system and the real world
Sistem berkomunikasi menggunakan user's language, melalui kata-kata, frase, dan konsep
yang familiar, bukan melalui bahasa yang bersifat teknis.
# Review Checklist Yes No N/A
2.1 Apakah icon-icon jelas dan familiar?
2.2 Apakah menu dikelompokkan sesuai dengan langkah kerja sebenarnya?
2.3 Jika bentuk-bentuk dipilih sebagai tanda-tanda visual dalam sistem, apakah
bentuk tersebut dapat dikenali dan sesuai dengan fungsinya?
2.4 Apakah pemilihan menu sudah berada pada kategori yang sesuai (dapat
dipahami)?
2.5 Apakah jargon-jargon yang dipilih menggunakan bahasa manusia dan
menghindari bahasa teknis komputer?
2.6 Apakah nama perintah spesifik?
21
Komentar :
3 User control and freedom
User memiliki kebebasan untuk memilih urutan task (when appropriate), daripada sistem
yang melakukan untuk user. Jika user memilih fungsi secara tidak sengaja (yang tidak
diinginkan), user dapat memperbaikinya dengan mudah.
# Review Checklist Yes No N/A
3,1 Ketika suatu task selesai, apakah sistem menunggu sinyal dari pengguna sebelum
melakukan proses?
3.2 Jika sistem memiliki multiple menu, adakah mekanisme untuk kembali ke menu
sebelumnya?
3.3 Jika pengguna dapat kembali ke menu sebelumnya, dapatkah pengguna
mengubah pilihan-pilihan pada menu sebelumnya tersebut?
3.4 Apakah pengguna dapat mengulang aksi yang dilakukan dengan mudah?
Komentar :
4 Consistency and standards
User sebaiknya tidak dibingungkan dengan kata-kata, situasi dan aksi yang berbeda
namun memiliki arti sama.
# Review Checklist Yes No N/A
4,1 Apakah penggunaan banyak huruf kapital / kata-kata dengan huruf besar semua
telah dihindari?
4.2 Apakah ikon memiliki label?
4.3 Ikon tidak lebih dari 12-20 macam?
4.4 Adakah tanda visual yang jelas untuk mengidentifikasi active window?
4.5 Apakah setiap window memiliki title?
4.6 Jika 'close' merupakan sebuah pilihan, apakah menu tersebut selalu tampak di
pojok kanan atas?
4.6 Apakah struktur menu sesuai dengan struktur task?
4.7 Apakah title menu rata tengah atau rata kiri?
4.8 Apakah teknik "menarik perhatian" dilakukan?
4.9 Apakah tidak ada lebih dari empat jenis warna yang dominan dan warna-warna
tersebut tidak senada?
4.10 Apakah aksi-aksi yang dapat dilakukan memiliki nama yang konsisten?
4.11 Apakah warna-warna terang digunakan untuk menarik perhatian pengguna?
Komentar :
22
5 Help user recognize, diagnose, and recover from errors
Petunjuk diungkapkan dengan bahasa yang sederhana.
# Review Checklist Yes No N/A
5.1 Apakah petunjuk bersifat membangun, tanpa bermaksud mengkritik pengguna?
5.2 Apakah petunjuk disebutkan dengan jelas dan tidak ambigu?
5.3 Apakah bahasa yang digunakan menghindari non-Indonesia?
Komentar :
6 Error prevention
Mengedapankan dalam menghindari kesalahan yang mungkin terjadi.
# Review Checklist Yes No N/A
6.1 Apakah sistem menghindarkan pengguna dari melakukan kesalahan?
6.2 Apakah pemilihan menu pada level yang lebih tinggi digunakan sebagai title
pada menu di bawahnya?
6.3 Apakah pemilihan menu logis, khusus, dan satu sama lain berbeda?
Komentar :
7 Recognition rather than recall
Membuat objek, aksi, dan pilihan visible. User tidak perlu mengingat-ingat informasi dari
satu bagian ke bagian yang lain. Petunjuk penggunaan sistem visible.
# Review Checklist Yes No N/A
7.1 Apakah tampilan dimulai dari kiri atas?
7.2 Apakah data yang tampil berurutan?
7.3 Apakah text area memiliki "breathing space" di sekitarnya?
7.4 Apakah teks mudah dibaca?
7.5 Apakah white space digunakan untuk memfokuskan mata pengguna ke posisi
yang tepat?
7.6 Apakah item-item dikelompokkan ke dalam zona-zona tertentu dan dapat
dibedakan satu zona dengan zona lain?
7.7 Apakah antara zona yang satu dengan yang lain terpisah?
7.8 Apakah warna yang digunakan untuk mengelompokkan elemen yang
berhubungan sama?
7.9 Apakah penggunaan warna pada sistem konsisten?
7.10 Apakah inactive menu dapat dibedakan?
7.11 Adakah pilihan menu default?
Komentar :
23
8 Flexibility
Penggunaan shortcut dapat mempercepat aksi yang dilakukan.
# Review Checklist Yes No N/A
8.1 Apakah terdapat shortcut untuk membantu navigasi?
8.2 Apakah shortcut yang diberikan dapat memenuhi kebutuhan pengguna?
Komentar :
9 Aesthetic and minimalist design
Dialog tidak berisi informasi yang irrelevant atau jarang dibutuhkan.
# Review Checklist Yes No N/A
9.1 Apakah hanya informasi penting yang ditampilkan pada layar?
9.2 Semua ikon dapat dibedakan satu dengan yang lain?
9.3 Apakah objek besar dan garis tebal digunakan untuk membedakan ikon?
9.4 Apakah semua icon "keluar" dari background?
9.5 Apakah pilihan sub menu hanya berasosiasi dengan satu level menu yang lebih
tinggi?
9.6 Apakah menu sudah cukup jelas (singkat)?
Komentar :
10 Help and documentation
Walaupun sistem dapat digunakan lebih baik tanpa dokumentasi, namun kadang-kadang
masih diperlukan untuk menyediakan bantuan dan dokumentasi.
# Review Checklist Yes No N/A
10.1 Apakah instruksi-instruksi dapat terlihat?
10.2 Apakah instruksi yang muncul mengikuti aksi yang dilakukan atau akan
dilakukan pengguna?
10.3 Jika ikon atau menu ambigu, apakah ada penjelasan tambahan pada ikon yang
sedang terpilih?
10.4 Apakah ada fungsi help?
10.5 Navigasi: Apakah informasi mudah ditemukan?
10.6 Presentasi: Apakah layout dirancang dengan baik?
10.7 Conversation: Apakah informasi yang diberikan utuh, akurat dan mudah
dipahami?
10.8 Goal oriented (apa yang saya dapat lakukan dengan sistem ini?)
10.9 Deskriptif (what is this thing for?)
10.10 Prosedural (bagaimana saya melakukan task ini?)
10.11 Navigational (where am I?)
10.12 Apakah pengguna dapat pindah dari halaman help dan melanjutkan pekerjaannya
dengan mudah?
10.13 Apakah mudah mengakses help?
10.14 Apakah pengguna dapat me-resume pekerjaannya setelah melihat help?
25
Lampiran 4 Rekapitulasi hasil perhitungan heuristic evaluation
# P1 P2 P3 P4 P5 P6 Persentase
kesesuaian
1. Visibility system of status
1.1 1 1 1 1 1 1
88,09%
1.2 1 1 1 1 1 1
1.3 1 1 1 1 1 3
1.4 1 1 1 1 1 2
1.5 1 1 1 1 1 3
1.6 1 1 1 1 1 1
1.7 1 1 1 1 1 1
1.8 1 1 2 2 2 3
1.9 1 1 1 2 1 2
1.10 1 1 1 1 1 1
1.11 1 1 1 1 1 1
1.12 1 1 1 1 1 1
1.13 1 1 1 1 1 1
1.14 1 1 1 1 1 2
2. Match between system and the real world
2.1 1 1 1 1 1 1
100%
2.2 1 1 1 1 1 1
2.3 1 1 1 1 1 1
2.4 1 1 1 1 1 1
2.5 1 1 1 1 1 1
2.6 1 1 1 1 1 1
3. User control and freedom
3.1 1 2 2 1 1 1
87,5% 3.2 1 1 1 1 1 1
3.3 1 1 1 1 1 1
3.4 1 1 1 1 2 1
4. Consistency and standards
4.1 1 1 2 1 1 1
81,94%
4.2 1 1 1 1 1 1
4.3 2 1 1 1 1 1
4.4 1 1 1 1 1 3
4.5 1 3 1 1 3 1
4.6 1 2 2 2 3 2
26
# P1 P2 P3 P4 P5 P6 Persentase
kesesuaian
4.7 1 3 1 1 1 1
4.8 1 1 1 1 1 1
4.9 1 1 1 1 1 1
4.10 1 1 1 1 1 1
4.11 1 1 1 1 1 1
4.12 1 2 2 1 1 1
5. Help user recognize, diagnose, and recover from errors
5.1 1 1 1 2 1 1
83,33
5.2 1 1 1 1 1 1
5.3 1 1 2 2 1 1
6. Error prevention
6.1 1 1 1 1 2 3
72,22% 6.2 1 1 2 2 1 1
6.3 1 1 1 1 1 2
7. Recognition rather than call
7.1 1 3 1 1 1 2
90,91%
7.2 1 1 1 1 1 1
7.3 1 1 1 1 1 1
7.4 1 1 1 1 1 1
7.5 1 1 1 1 1 1
7.6 1 1 1 1 1 1
7.7 1 1 1 1 1 1
7.8 1 1 1 1 1 1
7.9 1 1 1 1 1 1
7.10 1 3 1 1 1 1
7.11 2 1 2 1 1 2
8. Flexibility
8.1 1 1 1 1 1 1 100%
8.2 1 1 1 1 1 1
9. Aesthetic and minimalist design
9.1 1 1 1 1 1 1
91,67%
9.2 1 1 1 1 1 1
9.3 1 3 1 1 1 1
9.4 1 2 1 1 3 1
9.5 1 1 1 1 1 1
27
# P1 P2 P3 P4 P5 P6 Persentase
kesesuaian
9.6 1 1 1 1 1 1
10. Help and documentation
10.1 1 1 1 1 1 1
78,57%
10.2 1 1 1 1 1 1
10.3 3 2 1 1 2 1
10.4 1 1 1 2 1 1
10.5 1 1 2 1 1 1
10.6 1 1 1 1 1 1
10.7 1 1 1 1 1 1
10.8 1 1 1 1 1 1
10.9 1 3 1 1 1 1
10.10 1 3 1 1 1 1
10.11 1 1 1 1 1 3
10.12 1 1 2 2 2 1
10.13 1 1 2 2 1 2
10.14 1 2 2 2 1 2
28
Lampiran 5 Tampilan halaman administrasi Sistem Informasi Kehumasan IPB
Halaman administrasi Agenda Halaman administrasi Agenda (tambah)
Halaman administrasi Video Halaman administrasi Video (tambah)
Halaman administrasi Gambar Halaman administrasi Gambar (tambah)
Halaman administrasi Produk Halaman administrasi Produk (tambah)
29
Lampiran 6 Kuisioner CSUQ (Computer System Usability Questionnaire)
Kuisioner ini dibagikan untuk keperluan menyusun skripsi dengan judul
“Rekayasa Kebergunaan pada Sistem Informasi Kehumasan IPB”
Ilmu Komputer – Institut Pertanian Bogor
Nama :
Jenis Kelamin* : Laki-laki / Perempuan Umur : tahun
Pekerjaan** :
Setelah Anda menggunakan aplikasi tersebut, tolong isi pertanyaan-pertanyaan berikut.
1. Berikan tingkat kepuasan Anda terhadap aplikasi tersebut! Hitamkan pada salah satu lingkaran.
Tidak Setuju Sangat setuju
# Evaluasi
Penilaian
1 2 3 4 5 6 7
1 Secara keseluruhan, Saya puas dengan kemudahan dalam
menggunakan sistem ini
2 Penggunaan sistem sederhana (tidak rumit)
3 Saya dapat menyelesaikan tugas dengan cepat
4 Saya merasa nyaman menggunakan sistem ini (tidak
membingungkan)
5 Sistem mudah dipelajari
6 Setiap kali saya membuat kesalahan menggunakan sistem
ini, saya dengan cepat dan mudah dapat memperbaikinya
7 Informasi (seperti agenda, video, foto, dan dokumentasi
lainnya) yang disediakan sistem cukup jelas
8 Mudah menemukan informasi yang dicari
9 Informasi yang tersedia mudah dimengerti
10 Pengelompokan informasi pada sistem dapat dipahami
11 Interface (antarmuka pengguna) sistem menarik
12 Sistem ini dilengkapi dengan fitur (fungsi) yang saya
harapkan
13 Secara keseluruhan, saya puas dengan sistem ini
2. Berikan kritik dan saran Anda mengenai aplikasi ini!
Terima Kasih * : coret yang tidak perlu
** : Jika Anda seorang mahasiswa/i, sebutkan program studi Anda beserta tahun masuk
30
Lampiran 7 Penilaian pengguna terhadap sistem secara keseluruhan menggunakan kuisioner CSUQ
Responden Q1 Q2 Q3 Q4 Q5 Q6 Q7 Q8 Q9 Q10 Q11 Q12 Q13 SYSUSE INFOQUAL INTERQUAL OVERALL
1 6 7 6 6 6 6 4 5 7 6 7 5 6 6,2 5,6 6,0 5,9
2 6 7 5 6 6 6 6 6 6 6 5 5 6 6,0 6,0 5,0 5,8
3 4 4 3 4 5 5 5 5 6 6 4 4 4 4,0 5,4 4,0 4,5
4 6 7 6 7 7 7 7 6 6 6 3 3 5 6,6 6,4 3,0 5,8
5 4 6 5 5 6 6 5 5 6 6 4 4 5 5,2 5,6 4,0 5,2
6 4 5 4 5 7 7 3 4 4 6 4 5 5 5,0 4,8 4,5 4,8
7 5 7 5 6 7 7 4 4 6 5 7 5 5 6,0 5,2 6,0 5,6
8 6 6 5 5 6 5 4 5 5 5 6 5 6 5,6 4,8 5,5 5,3
9 6 5 6 6 6 6 6 5 6 6 6 5 6 5,8 5,8 5,5 5,8
10 6 6 5 6 6 6 5 6 6 6 5 6 6 5,8 5,8 5,5 5,8
11 5 6 6 5 5 4 4 4 5 6 4 3 5 5,4 4,6 3,5 4,8
12 5 7 5 6 6 6 6 6 6 6 6 6 6 5,8 6,0 6,0 5,9
13 7 7 5 5 6 5 5 5 5 4 6 6 6 6,0 4,8 6,0 5,5
14 6 7 5 5 6 5 4 4 5 5 6 5 6 5,8 4,6 5,5 5,3
15 6 7 4 5 6 6 3 5 4 4 7 5 6 5,6 4,4 6,0 5,2
16 5 6 5 5 7 5 4 4 5 4 6 6 6 5,6 4,4 6,0 5,2
17 6 6 5 6 6 5 6 6 6 6 6 6 5 5,8 5,8 6,0 5,8
18 7 7 7 7 7 7 7 7 7 7 7 7 7 7,0 7,0 7,0 7,0
19 4 5 5 4 4 5 3 4 5 6 4 4 4 4,4 4,6 4,0 4,4
20 6 7 6 7 7 6 6 5 6 6 7 6 6 6,6 5,8 6,5 6,2
21 6 5 4 4 5 5 6 5 5 5 5 5 5 4,8 5,2 5,0 5,0
22 4 4 4 4 4 4 4 4 4 4 4 4 4 4,0 4,0 4,0 4,0
23 6 7 7 6 6 6 6 6 7 6 6 6 6 6,4 6,2 6,0 6,2
31
Responden Q1 Q2 Q3 Q4 Q5 Q6 Q7 Q8 Q9 Q10 Q11 Q12 Q13 SYSUSE INFOQUAL INTERQUAL OVERALL
24 6 6 6 7 7 6 7 3 6 7 6 5 6 6,4 5,8 5,5 6,0
25 5 5 6 5 5 6 3 4 4 5 4 3 5 5,2 4,4 3,5 4,6
26 6 5 5 5 5 5 5 5 5 5 5 5 5 5,2 5,0 5,0 5,1
27 7 7 6 6 6 6 5 6 6 7 3 3 5 6,4 6,0 3,0 5,6
28 6 6 6 6 6 6 6 6 6 6 6 6 6 6,0 6,0 6,0 6,0
29 6 6 3 6 7 6 6 6 6 6 6 5 5 5,6 6,0 5,5 5,7
30 6 7 6 7 7 6 6 6 6 6 7 6 6 6,6 6,0 6,5 6,3
31 6 7 5 6 7 5 5 5 6 5 7 6 6 6,2 5,2 6,5 5,8
Mean 5,61 6,10 5,17 5,57 6,03 5,67 5,07 5,07 5,53 5,60 5,40 5,00 5,47 5,69 5,39 5,20 5,48
Median 6,00 6,00 5,00 6,00 6,00 6,00 5,00 5,00 6,00 6,00 6,00 5,00 6,00 5,80 5,50 5,50 5,62
Mode 6,00 7,00 5,00 6,00 6,00 6,00 6,00 6,00 6,00 6,00 6,00 5,00 6,00 5,80 6,00 6,00 5,85
Std Dev 0,88 0,96 0,99 0,94 0,89 0,80 1,23 0,94 0,82 0,86 1,25 1,08 0,73 0,74 0,73 1,11 0,65
Minimum 4,00 4,00 3,00 4,00 4,00 4,00 3,00 3,00 4,00 4,00 3,00 3,00 4,00 4,00 4,00 3,00 4,00
Maximum 7,00 7,00 7,00 7,00 7,00 7,00 7,00 7,00 7,00 7,00 7,00 7,00 7,00 7,00 7,00 7,00 7,00
Conf (95%) 0,32 0,36 0,37 0,35 0,33 0,30 0,46 0,35 0,31 0,32 0,47 0,40 0,27 0,28 0,27 0,41 0,24
Upper 5,94 6,46 5,53 5,92 6,37 5,97 5,53 5,42 5,84 5,92 5,87 5,40 5,74 5,97 5,66 5,61 5,72
Lower 5,29 5,74 4,80 5,22 5,70 5,37 4,61 4,71 5,23 5,28 4,93 4,60 5,19 5,42 5,11 4,79 5,24
32
Lampiran 8 Tabel deskripsi dan hasil uji sistem (panel adminstrator)
No Deskipsi Uji Kondisi Awal Skenario Uji Hasil yang
Diharapkan
Hasil
Uji
1 Memasukkan
username dan
password
Halaman login Mengisikan
username dan
password lalu
menekan tombol
“LOGIN”
Masuk sistem
sebagai
administrator
OK
2 Melihat record
agenda
Halaman
agenda
Memilih tab agenda Muncul tabel
semua record
agenda yang
terdiri atas kolom
nama, tanggal,
waktu, kegiatan,
serta tempat
agenda
OK
3 Menambah
agenda
Halaman
agenda
Memilih tautan
“tambah agenda”,
kemudian akan
muncul form untuk
menambah agenda.
Setelah selesai
melakukan
penambahan agenda,
tekan tombol
“submit”
Data berhasil
ditambahkan dan
kembali ke
halaman agenda
OK
4 Melakukan
edit agenda
Halaman
agenda
Memilih tautan
“edit”, kemudian
akan muncul text box
serta text area untuk
mengubah data.
Setelah selesai
melakukan
pengubahan data,
tekan tombol “ubah”
Data berhasil
diubah dan
kembali ke
halaman agenda
OK
5 Menghapus
salah satu
record agenda
Halaman
agenda
Memilih tautan
“hapus”, kemudian
akan muncul pesan
konfirmasi
Jika memilih “ya”
maka record akan
terhapus dan
kembali ke
halaman agenda,
jika memilih
“tidak” maka
akan langsung
kembali ke
halaman agenda
OK
6 Melihat record
video
Halaman
video
Memilih tab video Muncul tabel
semua record
video yang terdiri
atas nama, durasi,
preview serta
deskripsi video
OK
33
No Deskipsi Uji Kondisi Awal Skenario Uji Hasil yang
Diharapkan
Hasil
Uji
7 Menambah
video
Halaman
video
Memilih tautan
“tambah video”,
kemudian akan
muncul form untuk
menambah video.
Setelah selesai
melakukan
penambahan video,
tekan tombol
“upload”
Video berhasil
ditambahkan dan
kembali ke
halaman video
OK
8 Melakukan
edit video
Halaman
video
Memilih tautan
“edit”, kemudian
akan muncul text box
serta text area untuk
mengubah data.
Setelah selesai
melakukan
pengubahan data,
tekan tombol “ubah”
Data berhasil
diubah dan
kembali ke
halaman video
OK
9 Menghapus
salah satu
record video
Halaman
video
Memilih tautan
“hapus”, kemudian
akan muncul pesan
konfirmasi
Jika memilih “ya”
maka record akan
terhapus dan
kembali ke
halaman video,
jika memilih
“tidak” maka
akan lagsung
kembali ke
halaman video
OK
10 Melihat record
gambar
Halaman
gambar
Memilih tab gambar Muncul tabel
semua record
gambar yang
terdiri atas nama,
deskripsi, tempat,
tanggal, serta
preview gambar
OK
11 Menambah
gambar
Halaman
gambar
Memilih tautan
“tambah gambar”,
kemudian akan
muncul form untuk
menambah gambar.
Setelah selesai
melakukan
penambahan gambar,
tekan tombol
“upload”
Gambar berhasil
ditambahkan dan
kembali ke
halaman gambar
OK
34
No Deskipsi Uji Kondisi Awal Skenario Uji Hasil yang
Diharapkan
Hasil
Uji
12 Melakukan
edit gambar
Halaman
gambar
Memilih tautan
“edit”, kemudian
akan muncul text box
serta text area untuk
mengubah data.
Setelah selesai
melakukan
pengubahan data,
tekan tombol “ubah”
Data berhasil
diubah dan
kembali ke
halaman gambar
OK
13 Menghapus
salah satu
record gambar
Halaman
gambar
Memilih tautan
“hapus”, kemudian
akan muncul pesan
konfirmasi
Jika memilih “ya”
maka record akan
terhapus dan
kembali ke
halaman gambar,
jika memilih
“tidak” maka
akan lagsung
kembali ke
halaman gambar
OK
14 Melihat record
produk
Halaman
produk
Memilih tab produk Muncul tabel
semua record
produk yang
terdiri atas nama,
inventor, fakultas,
deskripsi, serta
preview produk
OK
15 Menambah
produk
Halaman
produk
Memilih tautan
“tambah produk”,
kemudian akan
muncul form untuk
menambah produk.
Setelah selesai
melakukan
penambahan produk,
tekan tombol
“upload”
Produk berhasil
ditambahkan dan
kembali ke
halaman produk
OK
16 Melakukan
edit produk
Halaman
produk
Memilih tautan
“edit”, kemudian
akan muncul text box
serta text area untuk
mengubah data.
Setelah selesai
melakukan
pengubahan data,
tekan tombol “ubah”
Data berhasil
diubah dan
kembali ke
halaman produk
OK
35
No Deskipsi Uji Kondisi Awal Skenario Uji Hasil yang
Diharapkan
Hasil
Uji
17 Menghapus
salah satu
record produk
Halaman
produk
Memilih tautan
“hapus”, kemudian
akan muncul pesan
konfirmasi
Jika memilih “ya”
maka record akan
terhapus dan
kembali ke
halaman produk,
jika memilih
“tidak” maka
akan lagsung
kembali ke
halaman produk
OK
36
Lampiran 9 Tabel deskripsi dan hasil uji sistem (touch screen client)
No Deskipsi Uji Kondisi Awal Skenario Uji Hasil yang
Diharapkan
Hasil
Uji
1 Melihat agenda
pada tanggal
tertentu
Halaman
utama
Sentuh tombol
“agenda”, pilih
agenda IPB atau
pimpinan yang akan
dilihat, lalu sentuh
tanggal
Mengetahui
agenda pada
tanggal tertentu
berupa waktu,
kegiatan, serta
tempat agenda
berlangsung
OK
2 Kembali ke
halaman utama
Pop-up
agenda pada
tanggal
tertentu
Sentuh tautan
“close”, kemudian
sentuh tombol
“beranda”
Kembali ke
halaman utama
OK
3 Memutar video
dari playlist
yang tersedia
Halaman
utama
Sentuh tombol
“galeri”, sentuh
tombol “video”, lalu
pilih video dari
playlist
Dapat memutar
video
OK
4 Melihat
gambar
Halaman
video
Sentuh tombol
“kembali”, sentuh
tombol “gambar”,
lalu sentuh thumbnail
gambar yang
diinginkan
Dapat melihat
gambar dengan
ukuran yang lebih
besar
OK
5 Melihat
informasi
kontak
departemen
Halaman
utama
Sentuh tombol
“fakultas & produk”,
sentuh tombol
“fakultas”, sentuh
tombol “departemen”
yang dituju, sentuh
tombol “jurusan”
yang dituju, lalu
sentuh tab “kontak”
Dapat mengetahui
informasi kontak
departemen yang
dituju
OK
6 Melihat rincian
produk riset
IPB
Halaman
fakultas
Sentuh tombol
“fakultas & produk”,
sentuh tombol
“produk”, lalu sentuh
thumbnail produk
untuk melihat info
produk lebih rinci
Dapat mengetahui
informasi produk
riset IPB secara
rinci
OK
7 Melihat tujuan
dan motto IPB
Halaman
utama
Sentuh tombol
“tentang”, sentuh
tombol “profil”, lalu
sentuh tab “tujuan
dan motto”
Dapat mengetahui
tujuan dan motto
IPB
OK
8 Melihat
informasi
kontak kantor
dan direktorat
Halaman
profil
Sentuh tombol
“kembali”, sentuh
tombol “organisasi”,
sentuh thumbnail
untuk melihat kontak
kantor dan direktorat
Dapat mengetahui
informasi kontak
kantor dan
direktorat yang
dituju
OK
top related