INTERAKSI MANUSIA DAN KOMPUTER

“ ANALISIS PERBANDINGAN WEBSITE E-LEARNING ”

KIDS-E-LAND DAN PENDIDIKAN.NET

OLEH :

1. JUNJUNGAN SIMBOLON 093410183

2. RANCES VO SIHOMBING 093410081

3. JEFRI JONATHAN SITIO 093410151

DOSEN : JUNITA MANIK S.Kom

STMIK PUTERA BATAM

T.A.2010/2011

KATA PENGANTAR

Puji syukur penulis panjatkan kehadirat Tuhan Yesus Kristus telah memberikan berbagai

nikmat sehingga penulis dapat menyelesaikan Penulisan makalah ini. Tak lupa kami

mengucap salam serta selalu tercurah kepada setiap mahluk ciptaanNya manusia termulia

bagi sang pencipta dan kepada para sahabat serta para pengikutNya yang selalu setia

hingga akhir zaman. Dan tak lupa kami mengucapkan terimakasih khusus nya buat Ibu

Junita Manik selaku dosen pengajar INTERAKSI MANUSIA DAN KOMPUTER yang

telah memberikan arahan atau bimbingan kepada kami hingga penulis dapat

menyelesaikan Penulisan makalah ini. Penulisan makalah yang diberi judul

“Perbandingan E-Learning Kids-E-Land dan Pendidikan.net” ini disusun guna

memenuhi laporan tugas akhir interaksi manusia dan computer pada jurusan Sistem

Informasi.

Penulis berharap semoga Penulisan makalah yang sangat sederhana ini dapat

memberikan sumbang saran yang berguna kepada penulis khususnya dan kepada

pembaca umumnya. Disamping itu penulis menyadari dalam Penulisan makalah ini

masih banyak kekurangan dan kesalahan baik dari segi isi, cara penyampaian serta tata

bahasanya. Kiranya kritik dan saran yang membangun dari pembaca sangatlah penulis

harapkan untuk dijadikan korelasi dalam Penulisan makalah ini.

Batam, 27 Juni 2011

Penulis

1

DAFTAR ISI

KATA PENGANTAR .................................................................. 1

DAFTAR ISI ………………………………………….. 2

BAB 1 PENDAHULUAN .................................................................. 3

1.1 Latar Belakang Masalah .................................................................. 3

1.2 Ruang Lingkup .................................................................. 4

1.3 Tujuan Penulisan .................................................................. 4

1.4 Tinjauan Pustaka ………………………………………….. 4

1.5 Metode Penulisan .................................................................. 4

1.6 Sistematika Penulisan .................................................................. 5

BAB 2 PEMBAHASAN MASALAH .................................................................. 6

2.1 Metafora .................................................................. 9

2.2 Clarity ........................................................... …... 10

2.3 Konsistensi …............................................................... 10

2.4 Aligment .................................................................. 11

2.5 Proximity .................................................................. 12

2.6 Kontras .................................................................. 12

2.7 Warna .................................................................. 13

2.8 Icon ................................................................. 14

BAB 3 PENUTUP .................................................................. 16

3.1 Kesimpulan .................................................................. 16

3.2 Saran .................................................................. 16

2

BAB I

PENDAHULUAN

1.1 Latar Belakang Masalah

Dewasa ini Sistem komputer yang kompleks sedang "mencari" jalan atau cara untuk masuk

ke dalam kehidupan sehari-hari, dan pada waktu yang sama pasar dipenuhi dengan merek-

merek yang bersaing. Ini telah mendorong usabilitas menjadi semakin populer dan secara

luas dikenal di tahun terakhir ini. Dalam pengembangan produknya, sekarang ini perusahaan-

perusahaaan mulai beralih dari metode lama yaitu metode berorientasi teknologi (technology-

oriented methods) menjadi metode berorientasi pengguna (user-oriented methods). sasaran

dari metode ini menetapkan kebutuhan suatu sistem. Metode berorientasi pengguna inilah

yang melahirkan istilah usabilitas. Usabilitas adalah suatu istilah yang digunakan untuk

menandakan bahwa orang dapat mempekerjakan alat tertentu dengan mudah dalam rangka

mencapai tujuan tertentu. usabilitas dapat juga mengacu pada metode yang digunakan untuk

mengukur kemudahan dan studi mengenai kerapian atau efisiensi suatu obyek yang dalam hal

ini ialah kemudahan dalam penggunaan sistem dan aplikasi komputer itu sendiri.

Seiring dengan berkembangnya internet di Indonesia, banyak Pembuat web di Indonesia

yang membuat webnya untuk semenarik mungkin, salah satu jenis web yang banyak diakses

adalah jenis E-Learning. E-Learning adalah pembelajaran melalui internet. Berdasarkan hal

tersebut diatas, maka kami membuat perbandingan tampilan web E-Learning Wikipedia dan

Kiseland.

Pemahaman mengenai kemudahan penggunaan suatu aplikasi (dalam hal ini website) inilah

yang akan kita bahas dalam makalah ini, ada beberapa pertanyaan yang mengindikasikan

kemudahan penggunaan tersebut, diantaranya ialah seberapa mudah pengguna menggunakan

fungsi-fungsi saat pertama kali mereka menggunakan aplikasi tersebut (berhadapan dengan

desain pertama kali)?, sekali ketika para pemakai sudah mempelajari didesain, seberapa cepat

mereka dapat melaksanakan tugas?, seberapa banyak kesalahan yang dibuat pengguna ketika

memakai aplikasi ini? Seberapa cepatkah mereka memperbaiki kesalahan tersebut? Dan

seberapa menyenangkan desain tersebut bagi pengguna? Itulah beberapa hal yang akan kita

bahas lebih lanjut dalam makalah ini.

3

1.2 Ruang Lingkup

Pada penulisan makalah ini, Penulis membatasi masalah mengenai Tampilan pada web

wikipedia dan kidseland

1.3 Tujuan Penulisan

> Dalam penulisan makalah ini, penulis mempunyai tujuan dari pembuatan makalah ini yaitu

untuk memenuhi laporan tugas akhir Sistem Informasi.

> Dapat mengetahui ciri-ciri website yang baik dan kurang baik;

> Dapat membandingkan analisa yang dilakukan dengan teori yang telah diterima;

1.4 Tinjauan Pustaka

Interaksi Manusia dan Komputer (IMK)

Interaksi Manusia dan Komputer (IMK) adalah disiplin ilmu yang berhubungan dengan

perancangan, evaluasi, dan implementasi sistem komputer, interaktif untuk digunakan oleh

manusia, serta studi mengenai hal-hal yang berhubungan dengannya, misalnya pengguna.

Usabilitas

Usabilitas adalah suatu istilah yang digunakan untuk menandakan bahwa orang dapat

mempekerjakan alat tertentu dengan mudah dalam rangka mencapai tujuan tertentu. Usabilas

dapat juga mengacu pada metode yang digunakan untuk mengukur usabilitas dan studi

mengenai kerapian atau efisiensi suatu obyek.

Antar Muka Pemakai (User Interface)

Antarmuka pemakai adalah bagian sistem komputer yang memungkinkan manusia

berinteraksi dengan komputer.

Desain antar Muka yang baik memiliki karakteristik di berikut ini:

Standardisasi keseragaman sifat-sifat antarmuka pemakai pada aplikasi yang berbeda.

Integrasi: keterpaduan antara paket aplikasi dan software tools.

Konsistensi: keseragaman dalam suatu program aplikasi.

Portabilitas: dimungkinkannya data dikonversi pada berbagai hardware dan software.

1.5 Metode Penulisan

Untuk menyusun penulisan makalah ini penulis mengumpulkan bahan yang diperlukan

dengan mencari informasi dari internet untuk selanjutnya diolah.

4

1.6 Sistematika Penulisan

Untuk memberikan penjelasan secara singkat serta garis besar dari isi penulisan ini. Penulis

menggunakan Sistematika Penulisan yang dibagi 3 bab, yang dimaksud untuk memberikan

pengertian yang singkat dan jelas dengan urutan sebagai berikut :

BAB 1 PENDAHULUAN

Pada bab ini penulis menjelaskan mengenai latar belakang dari judul penulisan, ruang lingkup

penulisan atau batasan-batasan pada penulisan makalah ini, tujuan dari penulisan ini, metode

penulisan, dan sistematika penulisan yang mengungkapkan intisari setiap dari bab yang akan

dibahas dalam penulisan makalah ini.

BAB 2 PEMBAHASAN MASALAH

Menguraikan hasil penelitian yang mencakup semua aspek yang terkait .

BAB 3 PENUTUP

Pada Bab III yang merupakan bagian terakhir dari penulisan ilmiah ini berisi kesimpulan dan

saran-saran.

5

BAB II

PEMBAHASAN MASALAH

Web : Kids-E-land

6

Web : Pendidikan.Net

8

1. METAFORA ( Pemakaian kata atau kelompok kata bukan dengan arti yang sebenarnya melainkan sebagai lukisan yang berdasarkan persamaan/perbandingan)

Aplikasi dari nama atau deskripsi istilah objek lain yang tidak dapat diartikan secara harafiah.

Menghubungkan presentasi dan elemen-elemen visual dengan item-item yang berkaitan.

Metafora akan membuat para pengunjung seolah-olah berada di tempat yang sebenarnya, atau

bisa dikatakan juga bahwa metafora dibuat mirip seperti tempat yang dikunjungi. Contohnya,

website suatu toko online yang memiliki metafora, dimana pengunjung dibawa ke tempat

seolah-olah mereka benar ada di toko online tersebut.

Hasil analisa :

Kids-E-Land

Kalangan yang di tujukan untuk website ini tidak terlaluk jelas. Di karenakan bila di

tunjukkan untuk anak-anak pra sekolah atau baru mulai belajar mengenal huruf, dapat

dikatakan bahwa penggunaan website ini kurang baik karena penggunaannya menggunakan

kata dan mereka (anak-anak) belum mengerti apa itu huruf jadi bila disimpulkan penggunaan

website ini memerlukan bantuan pendamping sehingga mereka baru dapat mengaksesnya.

Banyak terdapat icon-icon yang diperuntukkan adanya pendampingnya agar para anak-anak

dapat mulai mempelajari yang mereka butuhkan seperti memulai mengenal bahasa atau mulai

berhitung.

Penggunaan metode pembelajaran yang terdapat didalamnya juga menggunakan video

sehingga untuk mereka yang baru mulai belajar mengenal huruf, barang, dan berhitung akan

sulit dalam memahami tetapi hal ini mempunyai nilai lebih dikarenakan anak-anak lebih

tertarik dengan gambar bergerak daripada gambar yang diam. Pada halaman

pembelajarannya termasuk simple, tidak terdapat kata-kata yang justru akan membuat

bingung anak-anak dalam memfokuskan diri dari melihat video yang dilihatnya.

Pendidikan.net

Untuk tampilan pendidikan yang ditunjukkan untuk pelajar . Tampilannya memudahkan para

pengguna untuk mencari informasi yang dibutuhkan. Kekurangannya penggunaan warna

yang teralu minim menyebabkan tampilan web ini kurang menarik.

9

2. CLARIFY

Harus ada alasan yang kuat/masuk akal dan jelas mengapa menggunakan setiap elemen yang

berada dalam suatu interface yang kita buat,contohnya dalam peletakan suatu button,pembuat

harus memiliki alasan mengapa diletakkan di tempat tersebut. Penggunaan elemen yang lebih

sedikit akan lebih baik. Penggunaan background berwarna putih dianjurkan untuk memimpin

mata dan membuat mata tidak lelah dengan aktifitas elemen yang ada pada suatu website.

Hasil analisa :

Kids-E-Land

Warna yang digunakan dibuat berwarna-warni untuk menarik perhatian para penggunanya

yaitu anak-anak.Tataletak tombol nya rapih tidak berantakan Pengistirahatan mata dalam web

ini tegolong baik karena tidak banyak tulisan yang memusingkan mata dan setiap kita ingin

mengakses video nya ada jeda yang membuat mata sedikit beristirahat .Web ini tergolong

sederhana dan menarik

Pendidikan.net

Warna yang di gunakan adalah merah dan putih pewarnaannya simple namun sedikit kurang

menarik .sehingga terlihat teralu monoton tombol yang di gunakan di buat simple agar

simetris dengan tampilan web nya. Pada element pengistirahatan mata web ini terkesan

kurang karena teralu banyak terdadapat tulisan atau padat tulisan. Web ini tergolong simple

dan elegan.

3. KONSISTENSI

Keseragaman dalam suatu program aplikasi. Konsistensi dalam tampilan, pewarnaan,

gambar, ikon, typography (model form yang digunakan pada suatu website), teks, dll. Harus

ada konsistensi baik dalam layar maupun antar layar. Dan harus selalu ada metafora

dimanapun juga. Setiap platform mungkin memiliki panduannya.

Hasil analisa :

Kids-E-Land10

Konsistensi atau kesinambungan pada web KIDS E LAND tergolong baik karena

kesinambungan pada tampilan awal atau muka dan tampilan setelah masuk ke dalam salah

satu pilihan yang di tuju sama. Tombol dan pilihan yang adapun tidak berubah. Warna warni

pada web ini yang memang di tujukan pada anak-anak juga sangat cocok karena

menggambarkan dunia anak yang berwarna.

Pendidikan.net

Posisi tulisan pada web pendidikan.net tergolong baik karena terlihat teratur dan tertata rapi

seperti pada web kidseland dalam hal tampilan, pewarnaan,ikon, serta typography yang

digunakan. Dalam hal tampilan dan pewarnaan, web ini menyesuaikan para pengunjung web

yang sebagian besar merupakan pelajar. Hal ini ditunjukkan dengan pemilihan warna-warna

cerah yang melambangkan anak muda, sedangkan tampilan yang mencerminkan anak muda

adalah banner informasi yang menggunakan model remaja.

4. ALIGMENT

Untuk perataan dapat digunakan rata kiri, kanan atau tengah. Pada umumnya suatu teks pada

website dimulai dari kiri atas (left alignment), dimana left alignment akan mengijinkan mata

untuk menguraikan tampilan dengan lebih mudah. Selain itu dengan menggunakan bantuan

garis akan membantu dalam hal perataan. Sembunyikan garis horizontal dan vertical untuk

membantu mengalokasikankomponen window/jendela.Garis juga membantu menghubungkan

hal-hal yang berhubungan dan memudahkan perataannya.

Hasil analisa :

Kids-E-Land

Posisi tulisan pada web kids e-land tergolong baik karena terlihat teratur dan tertata rapi baik

pada tampilan awal atau muka dan tampilan di dalamnya sehingga tidak membuat

penggunanya khususnya anak-anak merasa nyaman.

Pendidikan.net

Pada web pendidikan.net tata letak tulisan terlihat jelas dan teratur dari kiri ke kanan dan atas

ke bawah. Sehingga memudahkan pemakai dalam mengaksesnya.

11

5. ROXIMITY

Item-item yang berkaitan ditampilkan bersama pasti memiliki hubungan karena jarak yang

jauh mengimplikasikan bahwa tidak ada hubungan antara item-item tersebut.

Hasil analisa :

Kids-E-Land

Untuk web ini, dalam hal pengelompokan yang ingin di tampilkan tergolong baik dan sesuai

dengan apa yang dibutuhkan dalam melakukan pengarahan, dalam arti pilihan yang terdapat

didalam menu tersebut sesuai dengan yang dimaksudkan dengan menu tersebut.

Pendidikan.net

Untuk pendidikan.net pengelompokannya baik yang membuat pengguna mudah untuk

mencari artikel dan item-item yang di butuhkan.

6. KONTRAS

Kontras adalah perbedaan antara dua buah atau lebih elemen. Dengan memakai teknik

kontras, seorang designer dapat menciptakan daya tarik visual dan perhatian tunggal dari

pengunjung website. Bayangkanlah apabila sebuah halaman website memiliki gaya dan

penampakan yang sama, maka halaman website tersebut menjadi membosankan dan tanpa

daya tarik. Bahkan isinyapun menjadi sulit untuk dicerna, karena itulah membuat elemen

menjadi kontras adalah salah satu dari web design yang efektif. Kontras dalam sebuah

halaman website dapat dibuat dengan memainkan 3 aspek design yaitu: warna, bentuk dan

posisi.

Kontras dalam warna

Ketika kita mendengarkan kata kontras, kita akan berpikir soal warna. Walaupun prinsip

tentang kontras tidak terbatas pada warna, akan tetapi ini akan membantu pengguna untuk

membedakan halaman website yang satu dari yang lain. Alasan inilah yang membuat hampir

setiap web design memiliki header, isi dan footer. Ketiga area ini haruslah berbeda dan

memiliki batas visual yang jelas. Menggunakan warna dasar yang kontras adalah salah satu

cara efektif untuk mencapai tujuan tersebut.

12

Pembedaan ini membuat isi dari website menjadi lebih penting dari elemen lain. Warna juga

dapat dipakai dalam tulisan sehingga dapat membedakan secara jelas yang mana judul, isi

dan catatan tambahan bahkan komentar dari pengunjung. Hal ini semakin penting apabila kita

mendesign blog agar para pengunjung dapat membedakan isi dengan jelas.

Kontras dalam bentuk ukuran

Sebuah cara lain dalam membentuk kontras dalam web design adalah dengan menciptakan

ukuran elemen yang berbeda atau dengan kata lain membuat elemen yang penting lebih besar

dari elemen yang kurang penting. Membuat kontras dalam ukuran menjadi semakin penting

terutama apabila anda tidak dapat melakukannya dengan warna.

Kontras dalam posisi

Penempatan posisi yang baik memainkan peranan yang besar dalam kualitas web design.

Beberapa elemen akan terlihat lebih baik dalam posisinya masing-masing daripada bila

mereka berada ditempat yang berbeda. Karean hal tersebut maka menciptakan perbedaan

kontras melalui posisi ini adalah hal yang paling sulit dan jarang digunakan akan tetapi bila

digunakan secara tetap akan menghasilkan design yang memukau dan fantastis.

Hasil analisa :

Kids-E-Land

Pada website kids-e-land teratur dan dapat membuat anak-anak sebagai usernya lebih merasakan kenyamanan dalam penggunaan wabsite ini.

Pendidikan.net

Sedangkan kalau kontras pada pendidikan.net terlihat kurang menarik karena terlalu mengunakan warna-warna yang terlalu terang.

7. WARNA

Warna merupakan pertimbangan emosional, karena variasi warna dapat menyebabkanemosi yang berbeda pada tiap orang. Berikut beberapa makna dari beberapa warna :

13

BiruPositif: keheningan, mencintai, kesetiaan, keamanan, percaya, intelligenceNegatif: kedinginan, ketakutan, kejantanan

HijauPositif: uang, pertumbuhan, kesuburan, kesegaran, healingNegatif: iri hati, kecemburuan, kesalahan, kekacauan

Merahpositif: cinta, energi, kuasa, kekuatan, penderitaan, panasnegatif: kemarahan, bahaya, peringatan, ketidaksabaran

Orangepositif: keberanian, kepercayaan, kehangatan/keramahan, keakraban, suksesnegatif: ketidak-tahuan, melempem, keunggulan

Hitampositif: perlindungan, dramatis, serius, bergaya/anggun, formalitasnegatif: kerahasiaan, kematian, kejahatan/ malapetaka, kegaiban

Cokelatpositif: ramah, bumi, keluar rumah, umur panjang, konservatifnegatif: dogmatis, konservatif

Putihpositif: kebaikan, keadaan tak bersalah, kemurnian, segar, gampang, bersihnegatif: musim dingin, dingin, jauh

Hasil analisa :

Kids-E-Land

Pemberian warna pada website Kids-E-Land cukup soft karena anak-anak menyukai warna yang lembut, dan cerah sehingga membangkitkan para anak-anak untuk belajar dan mengetahui hal-hal baru.

Pendidikan.net

Pewarnaan pada website pendidikan.net di donimasi oleh warna merah dan putih yang mengartikan semangat dan energi untuk para pemuda giat belajar, dan warna putih yang mengartikan kemurnian para pembaca untuk memberi inspirasi baru.

8. ICON

Mempresentasikan obyek atau tindakan yang mudah dikenal secara luas Mewakili obyek atau tindakan dalam cara yang lazim dan dikenali Batasan jumlah icon-icon yang berbeda

14 Buat icon yang menonjol dari latar belakang

Pastikan bahwa icon-icon yang telah diseleksi satu persatu secara jelas dapat dilihat

jika dikelilingi dengan icon-icon yang tidak terseleksi.

Buat setiap icon berbeda

Buat anggota-anggota icon-icon yang harmonis dari kumpulan icon

Hindari perincian yang berlebihan

Hasil analisa :

Kids-E-Land

Icon balita pada kids-e-Land ini cukup mengesankan para anak-anak bayi karena web ini di

khususkan untuk anak-anak pre-school agar lebih mengetahui tentang berbagai informasi,

dan juga penulisan kata-kata Kids-E-Land di kiri atas.

Pendidikan.net

Icon pada pendidikan.net yang terdiri atas buku-buku, bola dunia, dan poto dokumenter yang

mengartikan bahwa kita itu harus membaca buku dimana buku adalah jendela ilmu, jika bola

dunia membuat para pembaca untuk lebih giat lagi belajar agar bisa Go Global, sedangkan

foto dokumenter mengartikan pelajar-pelajar yang giat meraih prestasi.

15

BAB III

PENUTUP

3.1 Kesimpulan

Kesimpulan dari makalah ini adalah pada pembuatan website khususnya e-learning

diperlukan pertimbangan yang matang dilihat dari 8 aspek yang telah di bahas diatas, dan

harus melihat golongan yang dituju dari website ini.

Kriteria penilaian bagus tidaknya website yang paling utama adalah ada tidaknya

kenyamanan yang dirasakan oleh pengunjung website ini. Serta info yang diberikan website

ini sudah membantu oleh pengunjung atau belum.

3.2 Saran

Mohon maaf bila ada kesalahan dalam pembuatan makalah ini , karena kami sadar bahwa

makalah ini jauh dari sempurna. Kritik dan saran yang membangun di butuhkan untuk

penyempurnaan makalah ini kedepannya.

16