rekayasa kebergunaan pada sistem informasi … · dengan adanya aplikasi ini diharapkan pengguna...

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


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


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



2. Memilih menu “About

IPB”

3. Memilih menu

“Organizational Structure”

Pengguna bingung

memilih menu

Salah mengetikkan

alamat

Melihat

profil IPB

Mengunjungi

situs IPB



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.

LAMPIRAN

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.


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.


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.


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.


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.


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.


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.


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.


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.


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?

24

Komentar :

---------------------------- TERIMA KASIH ----------------------------

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


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


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


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




mengubah data.

Setelah selesai

melakukan

pengubahan data,


Data berhasil

diubah dan

kembali ke

halaman video

OK

9 Menghapus

salah satu

record video

Halaman

video

Memilih tautan


akan muncul pesan

konfirmasi


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


Diharapkan

Hasil

Uji

12 Melakukan

edit gambar

Halaman

gambar

Memilih tautan




mengubah data.

Setelah selesai

melakukan

pengubahan data,


Data berhasil

diubah dan

kembali ke

halaman gambar

OK

13 Menghapus

salah satu

record gambar

Halaman

gambar

Memilih tautan


akan muncul pesan

konfirmasi


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




mengubah data.

Setelah selesai

melakukan

pengubahan data,


Data berhasil

diubah dan

kembali ke

halaman produk

OK

35


Diharapkan

Hasil

Uji

17 Menghapus

salah satu

record produk

Halaman

produk

Memilih tautan


akan muncul pesan

konfirmasi


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)


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

rekayasa kebergunaan pada sistem informasi … · dengan adanya aplikasi ini diharapkan pengguna...

Documents