PENERAPAN SISTEM HUMAN COMPUTER INTERACTION (HCI)

PADA WEBSITE E-LEARNING

Oleh
Sapto Haryoko
e-mail : saptoharyoko@yahoo.com

Abstrak

E-Learning adalah salah satu media pembelajaran yang penting bahgi mahasiswa.
Dimana E-learning terdiri dari berbagai macam media dan aplikasi, baik untuk sumber
belajar, sharing, maupun interaksi sosial melalui jaringan internet. Untuk itu perlu untuk
diterapkan sebuah model HCI (Human Computer Interaction) kedalam website agar E-
learnig dapat lebih interaktif. Aspek-aspek interaksi yang diperlukan dalam menjalankan
sebuah aplikasi pada komputer sehingga terjadi komunikasi, aspek tersebut terdiri atas: a)
Use and context of computers ( U); b) Human characteristic (H); c) Computer system and
interface architectur (C); d) Development proses ( D). Saat membangun website E-
Learning, terlabih dahulu harus memperhatikan: 1) peta potensi SDM yang ada, akan lebih
baik bila kita mampu memanfaatkan SDM yang ada apakah itu untuk dunia pendidikan,
bisnis maupun pengetahuan dab berita untuk membangun website ang bagus; 2)
kemampuan Human Computer Interface, yakni kekmampuan interaksi antara user dengan
website E-learning.

Kata Kunci: E-Learning, Human Computer Interface (HCI), Website.

1. PENDAHULUAN suatu disiplin ilmu yang mengkaji

Analisis sistem informasi sangat
penting dilakukan untuk menghasilkan
sistem yang mudah, efektif, efisien, dan
tepat guna bagi pengguna. Penelitian ini
bertujuan untuk merancang dan
menerapkan model analisis sistem
informasi dengan konsep Human
Computer Interaction (HCI) dengan
kriteria usability Jacob Nielsen yaitu
learnability, efficiency, memorability,
errors, dan satisfaction.
Menurut Prihati (2011) ketika
membangun sebuah sistem informasi,
seorang desainer atau pengembang sistem
harus memperhatikan faktor interaksi
manusia dan komputer, karena sistem
informasi dibuat oleh manusia dan
tujuannya juga untuk manusia. Interaksi
manusia dan komputer atau human
computer interaction (HCI) merupakan
komunikasi atau interaksi di antara
pengguna dengan sistem. Peran utama
HCI adalah untuk menghasilkan sebuah
sistem yang berguna, aman, produktif,
efektif, efisien dan fungsional.
Permasalahan-permasalahan yang sering
muncul dalam interaksi antara manusia
dengan komputer adalah sering terjadinya
salah persepsi manusia (pengguna)
terhadap software yang ada, sehingga
bukan efektivitas dan efisiensi kerja yang
diperoleh, akan tetapi justru
menyebabkan pekerjaan tidak efisien dan
efektif, pengguna sering mengalami
kesulitan menggunakan software tersebut
karena tidak familiar dengan software,
software terlalu rumit sehingga sulit
dipelajari, software tidak sesuai dengan
kebutuhan pengguna dan tidak atau
belum mengakomodasi kebutuhan yang
penting bagi pengguna.

1
 E-Learning adalah salah satu
media pembelajaran yang penting bahgi
mahasiswa. Dimana E-learning terdiri
dari berbagai macam media dan aplikasi,
baik untuk sumber belajar, sharing,
maupun interaksi sosial melalui jaringan
internet. Untuk itu perlu untuk diterapkan
sebuah model HCI (Human Computer
Interaction) kedalam website agar E-
learnig dapat lebih interaktif.
Saat ini sudah terdapat studi
khusus mengenai jembatan atau interface
yang menghubungkan atara manusia dan
komputer yang dikenal dengan HCI. HCI
merupakan singkatan dari Human
Computer Interaction. HCI melibatkan
studi, perencanaan, dan desain dari
interaksi antara orang-orang (user) dan
komputer. Tujuan utama dari HCI adalah
untuk menghasilkan sistem yang
bermanfaat (usable) dan aman (safe),
artinya sistem tersebut dapat berfungsi
dengan baik. Sistem tersebut bisa untuk
mengembangkan dan meningkatkan
keamanan (safety), utilitas (utility),
ketergunaan (usability), efektifitas
(efectiveness) dan efisiensinya
(eficiency).
2. HUMAN COMPUTER INTER-
FACE
HCI yang baik adalah HCI yang
user friendly dan usabilitynya tinggi.
User friendly adalah kemampuan yang
dimiliki oleh software atau program
aplikasi yang mudah dioperasikan, dan
mempunyai sejumlah kemampuan lain
sehingga pengguna merasa betah dalam
mengoperasikan program tersebut,
bahkan bagi seorang pengguna pemula.
Atau dengan kata lain user friendly
artinya memudahkan pengguna untuk
menggunakan komputer tersebut,
contohnya saja penerapan keyboard
qwerty pada handphone. Sedangkan
Usability merupakan kemampuan
komputer untuk digunakan dengan tepat
dan presisi, maksudnya disini adalah
ketepatan interface yang ada. Contohnya
saja adalah tombol yang kecil-kecil dapat
mengurangi usability yang ada karena
user cenderung susah menekannya karena
kecil.
Aplikasi dari HCI bisa diterapkan
di berbagai macam tempat, di
perkantoran, di dalam kendaraan, di
gadget-gadget, dan dimana saja selama
terdapat komputer. Di perkantoran
misalnya HCI banyak diterapkan dalam
penggunaan PC, atau dalam lift,
intercom, dan lain-lain. Pada kendaraan
contohnya saja interface yang berada di
depan supir, kemudahan menggunakan
fungsi-fungsi yang ada seperti wiper,
lampu sen, GPS, dan lainnya merupakan
bagian dari HCI. HCI memudahkan
komputer untuk lebih memahami
manusia dan manusia pun lebih
memahami komputer.
Gambar 1 diagram yang menunjukkan bidang
studi yang mempengaruhi perkembangan
HCI
Gambar 1 menunjukkan beberapa
bidang studi yang mempengaruhi
perkembangan dari HCI, contohnya
seperti Artificial Intellegence yang
membantu komputer untuk memahami
dan merespon bahasa yang disampaikan
manusia kepada komputer. Semakin
berkembang bidang-bidang studi tersebut
maka HCI yang diterapkan seharusnya
akan semakin baik.
Pada Gambar 2 diperlihatkan
beberapa aspek – aspek yang
dikembangkan dalam HCI.
2
 Website dapat memberikan
informasi ataupun pengetahuan
bagi seseorang untuk mencari
sesuatu sehingga sebuah website
harus benar-benar bekerja sesuai
dengan kebutuhan yang dapat
memberikan informasi.
Mengurangi pengeluaran tenaga
yang berlebihan, Sebuah tampilan
website harus mengurangi
tampilan yang membuat
pengunjung merasa bosan dan
menggunakan warna –warna yang
terang. Meminimalkan keletihan,
Sebuah website harus
Gambar 2. Aspek dalam HCI meminimalkan keletihan pada
saat orang mengunjung website
sehingga pada saat website itu
3. PRINSIP FISIKAL DAN PRINSIP saat loading orang tidak terlalu
KOGNITIF DALAM FAKTOR lama untuk menunggu website itu
ERGONOMI SEBUAH WEBSITE terbuka.
3) Mengurangi pengulangan yang
Ergonomi yaitu ilmu yang berlebihan
mempelajari perilaku manusia dalam Sebuah website harus mengurangi
kaitannya dengan pekerjaan mereka. tampilan yang berulang-ulang
Sasaran penelitian ergonomi ialah karena membuat orang merasa
manusia pada saat bekerja dalam bosan bila memebuka web
lingkungan. Secara singkat dapat tersebut.
dikatakan bahwa ergonomi ialah 4) Meminimalkan contact stress
penyesuaian tugas pekerjaan dengan Pada saat orang membuka website
kondisi tubuh manusia ialah untuk kita orang tersebut harus merasa
menurunkan stress yang akan dihadapi. nyaman bila membuka website
Upayanya antara lain berupa kita sehingga dapat
menyesuaikan ukuran tempat kerja menghilangkan stress orang
dengan dimensi tubuh agar tidak karena dengan tampilan website
melelahkan, pengaturan suhu, cahaya dan yang begitu menarik dan
kelembaban bertujuan agar sesuai dengan memberikan informasi terbaru
kebutuhan tubuh manusia. orang tersebut akan merasa
a) Prinsip Fisikal nyaman dan senang.
1) Menjadikan segala sesuatu mudah 5) Menciptakan lingkungan yang
dijangkau menyenangkan
Ketika membuka sebuah website Sebuah website harus
orang akan melihat tampilan menciptakan pengunjung website
sebuah website apakah tampilan merasa senang saat membuka
website itu menarik atau tidak sebuah website.
sehingga website menjadikan 6) Memberikan jarak ruang dan
segala sesuatu mudah dijangkau akses
dalam mencari sebuah informasi. Sebuah Website dapat
2) Bekerja dengan tinggi yang sesuai memberikan jarak ruang dan
akses yang luas sehingga

3
 pengunjung dapat mengaksesnya
ke berbagai Negara dalam
mencari informasi seperti
pengetahuan teknologi
informasi,mencari pekerjaan dll.
b) Prinsip Kognitif
1) Adanya Standarisasi, Dalam
membuat sebuah website harus
mempunyai standrisasi yang harus
memicu pada kebaikan untuk
sebuah website tersebut.
2) Membuat stereotype
Stereotipe adalah pendapat atau
prasangka mengenai orang-orang
dari kelompok tertentu, dimana
pendapat tersebut hanya
didasarkan bahwa orang-orang
tersebut termasuk dalam
kelompok tertentu tersebut.
Stereotipe dapat berupa prasangka
positif dan negatif, dan kadang-
kadang dijadikan alasan untuk
melakukan tindakan diskriminatif.
3) Menghubungkan aksi dengan
persepsi
Prinsip kognitif (pola pikir
manusia) dapat menghubungkan
aksi dan persepsi setiap orang
sehingga diambil suatu persepsi
secara bersama-sama.
4) Mempermudah pemaparan suatu
informasi
Sebuah website orang dapat
memberikan kritikan dan saran
tentang penampilan website yang
telah kita buat sehingga dari
kritikan tersebut kita dapat
memperbaiki atau memperbaharui
tampilan website.
5) Menyajikan informasi pada level
yang tepat secara detail
Dalam membuat sebuah website
kita harus menyajikan sebuah
informasi yang tepat secara detail
sehingga orang yang melihat dan
membuka website dapat
mengetahui informasi sehingga
informasi ini diketahui oleh orang
lain.
6) Memberikan image/gambaran
yang jelas
Pada sebuah website harus
memberikan image (gambar) yang
jelas sehingga orang yang
melihatnya tahu maksud gambar
yang telah kita buat.
7) Membuat redundansi
Pada prinsip kognitif dalam faktor
ergonomi di buat redudansi.
8) Membuat pola
Merancang sebuah website harus
membuat pola sehingga pola-pola
apa saja yang dibutuhkan dalam
website.
9) Memberikan stimulan yang
bervariasi sesuai kondisi
Prinsip kognitif bila ditinjau dari
sebuah tampilan website harus
memberikan stimulant yang
bervariasi sehingga orang yang
melihat website kita tidak merasa
jenuh dan disesuaikan dengan
kondisi masyarakat.
10) Memberikan umpan balik secara
cepat/seketika
Orang yang membuat website
harus memberikan umpan balik
antara si pembuat dengan si
pemakai sehingga mereka dapat
kritik atau saran yang bersifat
membangun kreativitas
penampilan website.
4. ASPEK HCI YANG MENJADI
PERHATIAN DALAM
MEMBANGUN WEBSITE E-
LEARNING
Website atau situs juga dapat
diartikan sebagai kumpulan halaman
yang menampilkan informasi data teks,
data gambar diam atau gerak, data
animasi, suara, video dan atau gabungan
dari semuanya, baik yang bersifat statis
maupun dinamis yang membentuk satu
rangkaian bangunan yang saling terkait
dimana masing-masing dihubungkan
dengan jaringan-jaringan halaman
4
(hyperlink). Bersifat statis apabila isi merupakan komponen fisik untuk
informasi website tetap, jarang berubah, terjadinya interaksi manusia dengan
dan isi informasinya searah hanya dari komputer atau sebaliknya komputer
pemilik website. Bersifat dinamis apabila dengan manusia (Gambar 2). Sedangkan
isi informasi website selalu berubah- komponen non fisik menyangkut
ubah, dan isi informasinya interaktif dua penyajian tampilan untuk interaksi
arah berasal dari pemilik serta pengguna tersebut.
website. Aspek-aspek interaksi yang
mengikuti pelajaran/perkuliahan diperlukan dalam menjalankan sebuah
di kelas. E-Learning sering pula dipahami aplikasi pada komputer sehingga terjadi
sebagai suatu bentuk pembelajaran komunikasi, aspek tersebut terdiri atas:
berbasis web yang bisa diakses dari a) Use and context of computers ( U); b)
intranet di jaringan lokal atau internet. Human characteristic (H); c) Computer
Sebenarnya materi e-Learning system and interface architectur (C); d)
Selanjutnya website elearning adalah Development proses ( D).
pembelajaran jarak jauh (distance
Learning) yang memanfaatkan teknologi
komputer, jaringan komputer dan/atau
Internet. E-Learning memungkinkan
pembelajar untuk belajar melalui
komputer di tempat mereka masing-
masing tanpa harus secara fisik pergi
tidak harus didistribusikan secara on-line
baik melalui jaringan lokal maupun
internet, distribusi secara off-line
menggunakan media CD/DVD pun
termasuk pola e-Learning. Dalam hal ini
aplikasi dan materi belajar dikembangkan
sesuai kebutuhan dan didistribusikan Gambar 3. Proses HCI
melalui media CD/DVD, selanjutnya
pembelajar dapat memanfatkan CD/DVD
tersebut dan belajar di tempat di mana dia
berada.
Komputer merupakan suatu
alat/mesin yang digunakan oleh manusia
untuk mencapai tujuan tertentu. Pada
dasarnya komputer terdiri dari 4 jenis
peralatan (device), yaitu alat masukan
(input), pemroses (CPU), penyimpan
(memory) dan alat keluaran (output).
Alat masukan digunakan oleh manusia
untuk memasukkan ‘aksi’ kepada
komputer. Komputer akan memroses
‘aksi’ tersebut di alat pemroses dan Gambar 4. Sistem Pengolahan Visual
mengeluarkan suatu ‘fungsi’ melalui alat
keluaran. Alat masukan (seperti Interaksi Manusia-Komputer
keyboard, mouse, touch panel, joy stick, dapat terjadi bila manusia sebagai
speech recognizers, eye tracker, scanner) pengguna peralatan komputer
dan alat keluaran (seperti visual display / memberikan aksi yang dimengerti oleh
sound / speech systhesizer) ini komputer tersebut. Komputer akan

5
 menjalankan suatu fungsi sesuai program
yang sudah dimuat didalamnya. Jadi
tujuan manusia tercapai dengan bantuan
komputer yang sudah diprogram untuk
menjalankan fungsi tertentu. Gambar 5
berikut menjelaskan prinsip dasar
terjadinya interaksi.

KOMPUTER

Aksi
MANUSIA
Fungsi

Gambar 4. Bentuk E-Learning

TUJUA
N

Gambar 5. Interaksi Manusia-Komputer :

Aksi dan Fungsi

Bila komputer tersebut hanya

menjalankan satu fungsi tentu tidak ada
masalah, cukup tekan satu tombol fungsi
tersebut langsung dijalankan. Namun
kenyataaannya fungsi yang dijalankan
oleh komputer tidak hanya satu tetapi
banyak fungsi, tergantung tujuannya
pengguna yang hendak dicapai melalui
peralatan tersebut. Semakin banyak
fungsi, semakin sulit mengatur interaksi
yang terjadi. Kemudahan interaksi akan
menjadi pertimbangan bagi perancang
untuk mendesain program/perangkat
lunak yang disimpan pada komputer
tersebut. Jadi jangan sampai fungsi yang
ditawarkan begitu banyak tetapi
pengguna tidak dapat
mengoperasikannya.
Pemahaman terhadap jenis
peralatan dan teknik interaksi harus
diketahui oleh seorang perancang.
Melalui penelitian terhadap pengguna
memakai peralatan interaksi dan
tekniknya dapat diketahui tingkat
kemudahan interaksi yang terjadi dalam
E-learning. Salah satu contoh E-Learning
diperlihatkan pada Gambar 4.
Gambar 5. LMS UNM Makassar
E-learning pada Gambar 5 untuk
melakukan modifikasi maka perlu
memperhatikan aspek-aspek HCI
(Human Computer Interaction):
a) Use and context of computers
( U), hal ini berkaitan dengan: i)
Social organization and work,
HCI dalam kegunaannya bagi
mahasiswa dan dosen dalam
konteks pembelajaran dan proses
belajar; ii) Application Areas,
berkaitan dengan karakteristik
mata kuliah; iii) Human-Machine
Fit and Adaptation, kesesuaian
antara mahasiswa dengan website
E-learning yang dikembangkan.
b) Human characteristic (H), hal ini
berkaitan dengan: i) Human
Information Processing,
karakteristik mahasiswa sebagai
pemroses dan yang membutuhkan

6
 informasi; ii) language, 5. KESIMPULAN
Communication and Interaction,
bahasa yang digunakan dalam E- 1. Fungsi dari website adalah sarana
Learning sebagai media bagi alternatif dalam penyampaian
mahaiswa dan dosen untuk informasi. Informasi yang
berinteraksi dengan satu sama ditempatkan dalam website
lain; iii) ergonomics, berkaitan bermacam-macam (mis:
dengan karakteristik antropometri pengetahuan, berita, permainan,
dan fisiologis dan kaitannya iklan).Faktor kebutuhan
dengan kenyamanan membuka menggunakan website antara lain: a)
website E-Learning. Kemudahan dalam pendistribusian
c) Computer system and interface informasi ke khalayak umum (tidak
architectur , berkaitan dengan: i) terbatas ruang dan waktu); b)
Input and Output Devices, Kecepatan penyampaian informasi
konstruksi teknis pada peralatan yang up to date; c) Informasi yang
yang digunakan sebagai media disampaikan lebih interaktif
interaksi mahasiswa dan dosen dibandingkan media lainnya.
dan komputer; ii) Dialogue 2. Saat membangun website E-
Techniques, Software dasar dan Learning, terlabih dahulu harus
teknik-teknik dalam berinteraksi memperhatikan: 1) peta potensi SDM
dengan manusia terdiri dari input yang ada, akan lebih baik bila kita
dan output dialog, cara mampu memanfaatkan SDM yang
berinteraksi, dan masalah-masalah ada apakah itu untuk dunia
dalam dialog; iii) Dialogue Genre, pendidikan, bisnis maupun
iv) Gaya / metode yang pengetahuan dab berita untuk
digunakan antara lain: membangun website ang bagus; 2)
penggunaan metafora, metode kemampuan Human Computer
yang relevan dg media lain, aspek Interface, yakni kekmampuan
estetika; v) Computer Graphics, interaksi antara user dengan website
konsep – konsep dasar dari E-learning.
tampilan E-learning meliputi:
aspek geometris dalam 2D
ataupun 3D, transformasi linear, DAFTAR PUSTAKA
tampilan warna; vi) Dialogue
Architecture, Arsitektur software
dan standar – standart untuk antar [1] Abdul Kadir & Terra Ch. Triwahyuni.
muka dengan user. (2003). Pengenalan Teknologi
d) Development proses ( D) Informasi. Andi Offset.
berkaitan dengan: i) Design Yogyakarta..2004.
Approaches
Proses desain dan topik – topik [2] Hariyanto, Bambang 2004. Sistem
yang relevan dari disiplin ilmu Manajemen Basis
yang lain; ii) Implementation Data.Bandung:Informatika
Techniques and Tools, cara- cara
dan peralatan implementasi; iii) [3] Hoffer, Jeffrey, A, et all. (2002). Modern
Evaluation Techniques, metode - Database management. New
metode spesifik untuk evaluasi Jersey:Pearson Edecation, Inc.
Elearning.

7
[4] Insap Santosa, P. (1997). Interaksi
manusia dan computer : Teori dan
Praktek.Yogyakarta : Andi Offset.
[5] Jenny Preece, Et all. (1994). Human
computer interaction. England :
Pearson Education Limited.
[6] Joel Spolsky. (2001). User interface
design for programmer. Hongkong : C
& C Offset Printing Co., Ltd.
[7] Viska Armalina, (2011). Interaksi
Manusia Dan Komputer (Human
Computer Interaction).
[8] http://annasyahrani.wordpress.com/
2012/03/07/human-computer-interaction/
[9] http://aplikasiergonomi.wordpress.
com/ 2011/12/27/pengertian-
sederhana-hci-human-computer-
interaction/
[10] www.unm.ac.id