TUGAS AKHIR

M.K INTERAKSI MANUSIA DAN KOMPUTER

SEMESTER GENAP 2007/2008


Kajian Situs
http://www.kickandy.com






ELGHAR WISNUDISASTRA
G64052049
(http://ghalerblanks.wordpress.com)













DEPARTEMEN ILMU KOMPUTER
FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
INSTITUT PERTANIAN BOGOR
2008
1

DAFTAR ISI

Halaman
BAB 1 PENDAHULUAN............................................................................................................... 2
1.1 Latar Belakang ................................................................................................................ 2
1.2 Web Kick Andy............................................................................................................... 2
BAB II TINJAUAN PUSTAKA ..................................................................................................... 4
2.1 Interaksi Manusia dan Komputer .................................................................................... 4
2.2 Web Usability.................................................................................................................. 4
2.3 User Experience .............................................................................................................. 5
2.4 User Interface.................................................................................................................. 5
BAB III ANALISIS WEB KICK ANDY........................................................................................ 6
3.1 Halaman Utama............................................................................................................... 6
3.2 Halaman Topik Lalu........................................................................................................ 8
3.3 Halaman Komentar ......................................................................................................... 9
3.4 Halaman ArsipPemenang Kuis Rolling Stone........................................................... 11
3.5 Halaman Arsip pemenang Buku ................................................................................ 12
3.6 Halaman Off Air............................................................................................................ 13
3.7 Form.............................................................................................................................. 13
3.8 BreadCrumb .................................................................................................................. 13
3.9 Link ............................................................................................................................... 14
3.10 Pemformatan Text ......................................................................................................... 15
3.11 Out off date ................................................................................................................... 16
3.12 Inkonsistensi Tampilan.................................................................................................. 16
BAB IV PENUTUP....................................................................................................................... 17
4.1 Kesimpulan ................................................................................................................... 17
3.1 Saran.............................................................................................................................. 17
DAFTAR PUSTAKA..................................................................................................................... 18














2

BAB 1 PENDAHULUAN

1.1 Latar Belakang
Web telah menjadi sesuatu yang common dikalangan masyarakat pada saat ini. Hampir setiap
kalangan menggunakan web sebagai media informasi di kehidupan sehari-hari mereka. Banyak pula
yang menggunakan web sebagai jalan dalam mengembangkan bisnis mereka. Web dibangun dengan
berbagai fungsi dan tujuan sesuai dengan kepentingan organisasi/ pribadi yang membuatnya. Web
menjanjikan prospek yang bagus kepada setiap penggunanya.
Karena peranan web yang sangat penting ini maka web yang dibangun haruslah memperhatikan
beberapa faktor yaitu : usability, user experience, dan user interface. Ketiga faktor inilah yang
menentukan apakah tujuan pembuatan suatu website tercapai atau tidak. Saat ini banyak web yang
dikatakan gagal dalam pencapaian tujuannya dikarenakan sang pengembang web tidak
memperhatikan ketiga faktor crucial tersebut.
Pada kesempatan kali ini, dengan memperhatikan ketiga faktor tersebut, akan dilakukan analisis
terhadap situs www.kikcandy.com.

1.2 Web Kick Andy
Kick Andy merupakan salah satu acara televisi talkshow di salah satu stasiun televisi swasta
yang telah banyak digemari oleh masyarakat Indonesia pada umumnya, khususnya dikalangan
mahasiswa dan orang tua. Acara ini membahas tentang segala aspek kehidupan, mulai dari musik,
kreatifitas, perjuangan hidup, politik, kebudayaan dan sebagainya. Acara ini juga mampu
menimbulkan motivasi dan pemikiran-pemikiran yang lebih kepada seseorang, bukan hanya
mengenai keberhasilan saja, tapi bagaimana keerhasilan itu dapat tercapai.
Web Kick Andy yang beralamat di www.kickandy.com secara garis besar dibangun sebagai
suatu sistem informasi dan komunikasi. Web ini berisikan tentang segala informasi acara Kick Andy
mulai dari topik yang akan di bahas ataupun yang telah dibahas, kegiatan-kegiatan yang dilakukan
oleh Kick Andy, undian buku gratis, Andys corner, berbagai komentar dari para pengunjung dan
penonton, sampai dengan profil tim KickAndy sendiri.
Agar memudahkan dalam pembahasan, dalam analisis kali ini ada 4 halaman dari navigasi menu
utama yang akan kita bahas secara khusus, yaitu:
1. Halaman Utama
2. Halaman Topik Lalu
3. Halaman Arsip Pemenang kuisRolligStone
4. Halaman Arsip Pemeng Buku
5. Halaman Off Air
Sedangkan untuk keseluruhan website ini akan dibahas perbagian saja.
Berikut merupakan screenshoot keseluruhan halaman utama website Kick Andy beserta
keterangan setiap bagiannya :












3












































Gambar Halaman Utama www.kickandy.com
Image link
Header
Image link
Navigasi
Menu
Utama
Halaman Isi
Fungsi
Search
Image
sponsor,
Bukan
merupakan
link
4

BAB II TINJAUAN PUSTAKA

2.1 Interaksi Manusia dan Komputer
Interaksi Manusia dan Komputer adalah suatu ilmu yang mempelajari tentang perencanaan dan
design (pemodelan) bagaimana orang dan komputer dapat bekerjasama dengan baik sehingga kebutuhan
orang tersebut dapat terpuaskan dengan cara yang paling efektif. Desainer IMK harus mempertimbangkan
bermacam-macam faktor seperti :
1. Apa yang orang inginkan dan harapkan.
2. Keterbatasan kemampuan dan phisycal apa yang orang miliki.
3. Bagaimana kerja sistem informasinya.
4. Kenyamanan serta ketertarikan apa yang dapat ditemukan orang.
5. Desainer juga harus mempertimbangkan karakteristik teknik dan batasan dari hardware dan
software komputer.
(Wilbert O. Galitz, the essential guide to user interface design)

2.2 Web Usability
Web usability merupakan salah satu faktor yang sangat penting dalam mengembangkan sebuah
web. Sebagian besar proses pengembangan web hanya akan terfokus di konsep usability. Usability
merupakan atribut kualitas yang menunjukkan seberapa mudahnya user interface di gunakan.
Usability juga mengacu pada metode untuk mengimprove kemudahan penggunaan selama proses
perancangan. Sebuah web dengan usability yang buruk akan ditinggalkan oleh penggunanya.
Web Usability digunakan agar:
a. Web menjadi lebih efektif dan efisien digunakan.
b. Web juga menjadi lebih aman.
c. Mempunyai utility yang baik.
d. Pengguna tidak perlu mempelajari web terlebih dahulu.
e. Dan pengguna dapat mudah mengingat bagaimana cara penggunaannya.
f. Menghindari kebingungan yang akan dialami pengguna.

Usability didefenisikan melalui lima komponen, yaitu :
a. Learnability
Learnability menjelaskan tingkat kemudahan pengguna untuk memenuhi task-task dasar ketika
pertama kali mereka melihat/menggunakan hasil perancangan.
b. Efficiency
Efficiency menjelaskan tingkat kecepatan pengguna dalam menyelesaikan task-task setelah
mereka mempelajari hasil perancangan.
c. Memorability
Memorability menjelaskan tingkat kemudahan pengguna dalam menggunakan rancangan dengan
baik, setelah beberapa lama tidak menggunakannya.
d. Errors
Errors menjelaskan jumlah error yang dilakukan oleh pengguna, tingkat kejengkelan terhadap
error dan cara memperbaiki error.
e. Satisfaction
Satisfaction menjelaskan tingkat kepuasan pengguna dalam menggunakan rancangan.

Menurut Jakob Nielsen dalam bukunya Prioritizing Web Usability terdapat dua belas hal
yang harus diperhatikan dalam membangun sebuah website, yakni :
1. Nothing to Hide
2. The Web User Experience
3. Revisiting Early Web Usability Findings
4. Prioritizing Your Usability Problems
5
5. Search
6. Navigation and Information Architecture
7. Readability & Legibility
8. Writing for the Web
9. Providing Good Product Information
10. Presenting Page Elements
11. Balancing Technology with People's Needs
12. Design That Works

2.3 User Experience
User Experience merupakan salah satu faktor yang harus di pertimbangkan oleh sang
pengembang web. Bagaimana cara agar user mendapatkan pengalaman yang menyenangkan dan
efektif sehingga mereka tidak merasakan frustasi, bosan,dan terganggu ketika mereka sedang masuk
dan memakai suatu website. Seberapa cepat mereka mempelajari website yng dikunjunginya. Hal
tersebut ditentukan dari beberpapa faktor seperti :
a. Bagaimana sebuah web didesain sesuai dengan keinginan/tujuan awal.
b. Kemampuan dan keterbatasan web.
c. Isi dan tampilan web.
d. Fungsionalitas website.
Sebuah website yang baik haruslah mempertimbangkan dan memperhatikan para pemakainya.
Maksudnya dalam hal desain dan perancangan web tersebut haruslah disesuaikan dengan target para
pengunjungnya. Mereka harus menentukan tingkat kemudahan dalam pemakaian website mereka
sesuai dengan target pengunjung. Dalam pembagiannya User experience terbagi menjadi 3 tingkatan
yaitu beginners, intermediate dan expert. Desain dari sebuah web sebaiknya fokus pada pengguna
dengan tingkat kemampuan intermediate.

2.4 User Interface
User Interface adalah bagian dari computer dan softwarenya dimana orang dapat melihat,
mendengar, menyentuh, berbicara, atau mengerti. User interace memiliki dua komponen penting,
yaitu input dan output. Input adalah bagaimana orang mengkomunikasikan kebutuhannya atau
keinginannya ke computer. Contoh input adalah keyboard, mouse, trackball, ones finger (untuk
touch-sensitive screens atau pads), dan ones voice (untuk spoken instructions). Output adalah
bagaimana komputer menyampaikan hasil dari komputasi dan persyaratan kepada user. Contoh dari
mekanisme output adalah display screen.
User Inteface adalah bagian yang paling penting dari sistem komputer. Tujuan dari user inteface
adalah untuk membuat orang bekerja dengan komputer dengan mudah, produktif, dan menyenangkan.
Desain interface yang layak akan menyediakan gabungan desain yang bagus dalam mekanisme input
dan output sehingga dapat memuaskan kebutuhan user, kemampuan, dan batasan dalam jalan/cara
yang paling efektif yang dimungkinkan. Interface yang paling baik adalah interface yang tidak
disadari, interface yang mengijinkan/ membimbing user untuk fokus kepada informasi dan task yang
dilakukan, bukan kepada mekanisme yang digunakan untuk menampilkan informasi dan melakukan
task
Oleh karena itu, perancang website dituntut untuk bisa merancang interface website sebaik
mungkin agar tujuan dari pembuatan website bisa tercapai.









6
BAB III ANALISIS WEB KICK ANDY

3.1 Halaman Utama
Halaman utama merupakan halaman yang akan pertama kali dilihat oleh pengunjung ketika
mereka masuk kedalam suatu website. Biasanya halaman utama berisikan tentang hal apa yang paling
ingin diberitahukan oleh pengembang web kepada pengunjung mengenai web mereka. Serta menjadi
panduan kepada pengunjung dalam pencarian informasi yang mereka butuhkan.
Ada beberapa hal yang dirasa kurang beserta perbaikkan yang dirasa perlu didalam halaman utama
ini, diantaranya :
a. Di halaman utama web Kick Andy menampilkan tentang topik yang akan di bicarakan pada
episode selanjutnya. Namun dalam format penulisannya, penjelasan tentang topik yang
dibicarakan terlalu panjang sehingga menimbulkan scrol kebawah yang teralu banyak. Hal
ini menyebabkan user terpaksa harus men-scroll keatas lagi ketika ia telah membaca isi
keseluruhan topik. Selain itu warna font pada setiap paragraf pembuka terlihat nyaru atau
mirip dengan background. Hal ini menyebabkan beberapa pengunjung termasuk saya
kesulitan membacanya. Padahal paragraf pembuka itu merupakan paragraf yang akan dibaca
pertama kali oleh pengunjung sebelum mereka melanjutkan membaca ke paragraf lanjutan.
Alangkah lebih baikknya jika format penulisan topik dibagi menjadi dua halaman atau yang
di tampilkan hanyalah paragraf pembuka saja dan di berikan link baca selengkapnya jika
ingin membaca isi keseluruhan dari topik, jadi pengunjung tidak harus menscroll terlalu
banyak. Dan juga sebaiknya diberikan link yang mengarah keatas halaman pada setiap akhir
halaman agar pengunjung tidak harus men-scroll keatas lagi setelah membaca isi topik.
Warna font pada setiap paragraf pembuka juga sebaiknya diganti kewarna yang lebih
menonjol seperti hitam (bold) agar pembaca jelas.

b. Di bagian bawah logo KickAndy terdapat tulisan SETIAP KAMIS, 22.05 yang
memberitahukan jadwal tayang Kick Andy. Namun ada sedikit kekurangan disini yaitu
tidak diberitahukkannya waktu daerah mana yang dipakai apakah WIB,WIT, atau WITA.
Sedangkan disetiap bagian atas judul topik yang dibahas juga diberikan pemberitahuan
tentang jadwal tayang KickAndy.
Untuk mengoptimisasi ada baiknya jika pemberitahuan jadwal dibawah logo KickAndy
diganti dengan Pemberitahuan yang ada di atas setiap judul topik. Jadi diatas judul topik
tidak perlu lagi ada pemberitahuan jadwal tayang karena sudah ada di bawah logo Kick
Andy yang akan muncul disetiap halaman. Diatas judul Topik hanya ada tanggal tayangnya
saja.









c. Dihalaman utama terdapat header GERAKAN SERIBU KAKI PALSU. Berikut adalah
screenshootnya,
Bisa dilihat bahwa terdapat penempatan link yang kurang
bagus(pendaftaran, press release ,donatur, penerima), ada space
kosong antar link. Selain itu pada saat saya pertama kali melihat
bagian ini, saya berfikir bahwa bagian header juga merupakan link


Dihilangkan
Diganti dengan tulisanTayang setiap Kamis pukul 22.05WIB
dan Minggu pukul 15.05WIB
header
7
karena tidak ada pembeda, ternyata
bukan. Sebaiknya link-link tersebut
disusun menjadi satu baris(hilangkan
space kosongnya) dan diberikan pembeda
dengan headernya .

d. Penggunaan icon yang salah pada menu
utama Pengunjung pasti akan merasa
kalau link tersebut bisa di expand jika
menggunakan tanda tersebut, padahal
tidak bisa. Sebaiknya dihilangkan saja.

e. Link menu Topik Terkini. Saat melihat link Topik Terkini saya mengira bahwa isi dari
link tersebut adalah topik yang benar-benar baru ditayangkan. Tetapi ketika dibuka ternyata
yang ditampilkan adalah topik lain yang sudah ditayangkan beberapa minggu sebelumnya.
Jadi sebenarnya isi dari Topik Terkini adalah topik yang mendapatkan rating paling bagus
diantara topik-topik yang baru ditayangan. Sehingga sebaiknya penamaan Topik Terkini
diganti saja dengan penamaan yang lebih cocok dengan content link tesebut.

f. Isi dari halaman utama(home) adalah tentang topik yang akan di bicarakan pada episode
selanjutnya yang juga merupakan content dari link menu Topik Berikutnya. Karena
kesamaan ini ada baiknya jika penempatan link menu Topik Berikutnya ditempatkan di
urutan pertama dari menu utama, sebelum link Topik Terkini.

g. Link halaman yang sedang dikunjungi tidak berubah sama sekali sehingga membuat
pengunjung bingung mereka sedang berada di halaman yang mana. Hal ini sangatlah penting
bagi pengunjung agar mereka tidak tersesat di dalam situs sehingga waktu mereka tidak
terbuang. Mestinya link yang telah diklik diberi tanda untuk memberitahu kita berada di
halaman mana atau diberikan bread crumb pada setiap halaman.

h. Dalam website ini, link ke halaman home tidak terindentifikasi dengan baik. Di website ini
logo Kick Andy merupakan link menuju kehalaman home. Para pengunjung yang baru
menunjungi website ini tidak dapat mengetahui dimana letak link menuju home. Link ke
halaman home sangatlah penting bagi para pengguna karena jika para pengguna telah terlalu
jauh masuk kedalam website ini dan jika diwebsite ini tidak ada breadcrumbnya maka link
home dapat mempermudah para pengunjung jika mereka ingin kembali kehalaman utama,
dibandingka jika mereka harus menekan tombol back berkali-kali hanya untuk kembali
kehalaman home ataupun halaman sebelumnya.
Sebaiknya dibuat tombol Home di menu utama agar mempermudah pengunjung dalam
proses penelusuran di website ini.

i. Pada halaman utama ini terdapa button yang sebenarnya tidak perlu dipakai karena memliki
fungsi yang sama dengan image link yang ada diatasnya. Berikut screenshootnya:



Dapat dilihat bahwa fungsi button klik di sini memliki fungsi yang
sama dengan image link nonton kick andy yaitu sama-sama menuju ke
halaman dimana kita dapat menonton langsung episode Kick Andy langsung
dari website ini.

j. Terdapat beberapa link flash di dalam halaman ini.. Jika hanya untuk link kita harus meload
flash sangatlah membuang waktu dibandingkan jika kita hanya menggunkan text ataupun
image. Apa lagi jika browser yang kita gunakan tidak memilki flash plug in, maka link
Memilki fungsi yang sama
Navigasi menu utama
Icon yang kurang tepat
8
tersebut tidak akan muncul. Penggunaan flash hanya untuk sebuah link tidak lah diperlukan,
jika hanya untuk memperindah tampilan kita bisa membuatnya dengan CSS. Jadi disarankan
agar penggunaan flash untuk link diganti menjadi image atau text saja.

k. Terdapat kerancuan antara mana image yang merupakan link dengan image biasa. Sebaiknya
diberikan pembeda antara image yang merupakan link sponsor dengan image yang
merupakan link utama pada website ini. Mungkin dari segi penempatan ataupun
pengelompokkannya.
l. Terdapat nya image Sponsor yang bukan merupakan link. Sebaiknya images sponsor di buat
link saja.

m. Didalam website ini tidak memilki footer. Tulisan Copyright 2007 Website Team Kick
Andy. All rights reserved ditemukan di setiap akhir halaman. Namun peletakannya tidak
sesuai. Terkadang posisinya terletak di bagian paling bawah agak menjorok kekanan, namun
di salah satu halaman posisinya berada sedikit keatas. Hal ini menunjukkan ketidak
konsistenan tentang peletakan tulisan tersebut. Jadi sebaiknya di buatkan footer yang isinya
tulisan Copyright 2007 Website Team Kick Andy. All rights reserved dengan format
penulisan rata tengah. Sehingga posisi tulisan tersebut akan sama disetiap halaman.


3.2 Halaman Topik Lalu
Halaman Topik Lalu merupakan halaman yang berisi arsip topik yang telah ditayang kan Kick
Andy dalam episode-episode sebelumnya. Arsip-arsip itu disajikan dalam bentuk paging. Yang
ditampilkan dari setiap topik dalam halaman ini hanyalah paragraf pembukanya saja atau deskripsi
singkat mengenai topik. Pengunjung dapat mengklik pada tiap judul topik jika ingin membaca
secara kesuluruhan isi topik tersebut. Berikut merupakan screenshoot dari halaman Topik lalu:










Berikut adalah beberapa hal yang
dirasa kurang beserta perbaikkan
yang drasa perlu yang yang berada
dalam halaman ini :



a. Halaman ini berisi beberapa topik disertai dekripsi singkat topik tersebut dimana ada
beberapa topik yang disertai gambar dari cuplikan acara tersebut. Halaman ini juga disertai
dengan paging. Masalah yang ditemui disini adalah terlalu banyaknya topik yang di publish
per halamanya. Kira-kira ada 15 topik perhalaman. Hal ini menyebabkan halaman web ini
menjadi sangat panjang dan memaksa user untuk melakukan banya scrolling ke atas maupun
kebawah.
Perbaikkan yang mungkin di lakukan adalah dengan mengurangi pengelompokkan topik
perhalamannya. Mungkin kita bisa mengurangi menjadi 10 topik saja atau 8 topik saja yang
di publish per halaman agar halamannya nanti tidak terlalu panjang.
Deskripsi topik
Judul topik
paging
9
Selain itu juga sebaiknya link paging dibuat dua, tidak hanya diatas saja tapi juga dibawah.
Hal ini dapat memudahkan user dalam berpindah halaman. Saat user sedang melakukan
pencarian topik, ketika dia sudah berada di bagian bawah halaman dia tidak perlu lagi
menscroll keatas hanya untuk berpindah halaman. Dia bisa langsung mencari ataupun
membaca topik di halaman berikutnya.

b. Disetiap deskripsi singkat topik yang disediakan adalah lebih baik jika diberikan penekanan
bahwa isi dari topik tersebut bukan hanya deskripsi singkat itu saja. Misalnya dengan
memberikan keterangan link baca selengkapnya disetiap akhir deskripsi topik tesebut.

c. Ketika pengunjung mengklik judul dari setiap topik, maka mereka akan dibawa kehalaman
baru berisikan tentang cerita lengkap dari topik tersebut. Namun dihalaman baru tersebut
tidak disediakan link untuk kembali ke halaman arsip topik lalu. Pengguna harus
menggunakan tombol back yang disediakan browser untuk kembali ke halaman sebelumnya.
Mungkin akan lebih baik jika pengembang web ini memberikan link yang menuju halaman
awal arsip topik lalu. Atau dengan menggunakan breadcrumb.

d. Arsip topik-topik yang di publish tidak di beri pengindex-an dengan baik. Hal ini dapat
membuat pengunjung kebingungan ketika mereka sedang mencari topik. Misalnya kita ambil
contoh jika seorang pengunjung ingin mencari topik 2 minggu yang lalu karena ia tidak
sempat menontonnya. Ia juga tidak tahu apa judul topik tersebut. Maka pengunjung tersebut
akan merasa bingung harus mencari kemana karena tidak ada petunjuk sama sekali. Yang dia
tahu hanya topik dua minggu lalu.
Untuk mengatasi masalah diatas hal yang sebaiknya dilakukan pengembang adalah
mengindex arsip topik-topik tersebut berdasarkan waktu topik tersebut ditayangkan. Serta
memberikan keterangan tanggal penayangan untuk setiap topik di bagian deskripsi singkat
topik tersebut.

3.3 Halaman Komentar
Halaman Komentar adalah halaman yang berisi tentang segala komentar dan form untuk
mengirim kan komentar para pengunjung mengenai Kick Andi baik websitenya maupun acaranya.
Berikut beberapa hal yang dianggap kurang berikut perbaikkan yang dianjurkan yang berada
dihalaman ini :
a. Pada halaman komentar terdapat penempatan informasi yang tidak sesuai. Bisa dilihat
digambar. Informasi tersebut memberitahukan tentang alamat, proses dan tata cara
pengiriman buku kepada para pemenang undian buku gratis .

Informasi ini seharusnya ditempatkan di halaman arsip
pemenang buku bukan di bagian komentar. Karena isi
dari infomasi tersebut sama sekali tidak mempunyai
hubungan dengan content dari halaman komentar.


Gambar penempatan informasi yang salah

b. Bisa dilihat pada screenshoot bagian komentar dibawah ini. Terlihat bahwa sang pengembang
web ini sebenarnya ingin memberikan pembeda antara pesan yang satu dengan pesan yang
lainnya. Hal ini terlihat jelas dari perbedaan warna background antar pesan yang dibuat oleh sang
pengembang web ini.




10


















Namun permasalahannya timbul ketika pengembang memberikan garis separator untuk
memisahkan isi pesan dengan pengirimnya. Hal ini malah membuat blok pesan terlihat
terpisah. Seperti memuat blok baru antar garis separator. Fungsi warna background sebagai
pemisah antar pesan pun menjadi tidak terlihat karena garis separator tersebut.
Untuk mengatasi permasalahan ini sebaiknya garis separator tersebut dihilangkan saja. Atau
dipindahkan posisinya menjadi dibawah keterangan pengirim pesan. Atau bisa juga dengan
memberikan jarak yang jelas antara pesan yang satu dengan pesan yang lainnya.

c. Tidak seperti pada halaman Topik Lalu, paging pada halaman ini sudah bagus. Komentar
yang ada disetiap halaman dibatasi menjadi 4 sampai 5 komentar saja. Namun
permasalahannya timbul ketika ada isi komentar yang sangat panjang. Hal ini menyebabkan
pembaca komentar ini harus menscrooll ke atas lagi setelah ia membaca isi komentar tersebut
dan hendak pergi kehalaman komentar yang lain.
Solusi yang ditawarkan adalah pengembang sebaiknya membuat link to top dibagian
akhir/bawah halaman yang menuju ke bagian atas halaman komentar. Jadi ketika user selesai
membaca komentar yang panjang ia tidak perlu lagi untuk menscroll keatas halaman, hanya
tinggal mengklik ke link yang dibuat.

d. Form komentar adalah form yang berfungsi untuk
memberikan komentar mngenai isi dari suatu
website.Ada beberapa kekurangan yang ditemui dan
perbaikkan yang mungkin dilakukan dalam form ini,
diantaranya:

1. Text field pada label Telepon dan Hp terlalu panjang
tudak sesuai dengan jumlah karakter dari nomornya
sendiri.
Sebaiknya panjang text field disesuaikan dengan jumlah
karakter yang akan diisikan, jangan terlalu panjang atau
pendek.

2. Sebaiknya pada textfield email diberikan format
penulisan ang benar. Bisa dengan menggunakan tooltip.

3. Terdapat kesalahan penempatan pada field Jenis
Kelamin dan Tanggal Lahir. Semestinya fiel tersebut
garis separator yang awalnya berfungsi
sebagai pemisah antar pesan dengan si
pengirim
Terlihat seperti satu blok pesan yang
sama. Padahal keterangan pengirim dan
isi pesan tidak saling berhubungan
11
berada di bagian DATA DIRI bukan di bagian KOMENTAR.

4. Pada radio button di label Jenis Kelamin mestinya diberikan default. Biasanya nilai
defaultnya laki-laki.

5. Dapat dilihat dari form bahwa field yang harus di isi adalah field Nama, Email,
Alamat, dan Komentar. Namun ketika pengisian form, jika field Jenis Kelamin dan
Tanggal Lahir dikosongkan maka akan keluar peringatan yang berisi bahwa field
Jenis Kelamin dan Tanggal Lahir harus lah di isi, tidak boleh dikosongkan. Oleh
karena itu sebaiknya pada fielad Jenis Kelamin dan Tanggal Lahir sebaiknya juga
diberi tanda(*) yang menandakan bahwa field tesebut haruslah diisi. Halini dapat
mengurangi kesalahan-kesalahan yang mungkin akan dilakukan oleh user.

6. Pesan peringatan yang dikeluarkan semestinya mestinya menyatakan peringatan yang
berisi tentang semua kesalahan yang dilakukan oleh user dan sesuai dengan kesalahan
yamg dibuat. Contoh pada saat kita tidak mengisikan field email. Pesan yang
dikeluarkan malah tentang format penulisan email. Bukan peringatan bahwa field
email harus di isi. Demikian pula ketika kita tidak mengisikan field email, tanggal
lahir , dan Jenis Kelamin. Pesan peringatan yang keluar hanyalah peringatan tentang
email saja. Sedangkan peringatan tanggal lahir dan jenis kelamin tidak di munculkan.
Setelah email diisi dengan benar barulah muncul perringatan tentang field tanggal
lahir. Dan begitu seterusnya sampai semua kesalahan selesai. Hal ini menyebabkan
user tidak langsung menyadari kesalahan yang ia buat. User hanya mengira bahwa
kesalahan yang dibuat hanya pada field email saja sedangkan yang lainnya tidak.

3.4 Halaman ArsipPemenang Kuis Rolling Stone
Halaman ini berisi daftar pemenang kuis majalah RollingStone. Halaman ini disusun
berdasarkan edisi terbit majalah tersebut. Pada halaman awal ArsipPemenang RolingStone terlihat
image dari setiap majalah yang diundikan. Ketika salah satu image tersebut diklik maka akan
ditampilkan daftar pemenang dari majalah tersebut. Namun dalam halaman ini terdapat beberapa hal
yang dianggap kurang. Berikut hal-hal yan kurang tersebut beserta perbaikan yang mungkin
dilakukan:
a. Dari setiap image terlihat diberikan deskripsi edisi majalah tersebut yang juga merupakan link
agar pengunjung tidak bingung dalam mencari arsip pemenang undian ini. Tapi ada beberapa
image yang tidak diberikan keterangan tahun pada
linknya. Hal ini dapat dilihat pada image dibawah
ini.









Semestinya di setiap link diberikan keterangan tahun edisi majalah tersebut agar tidak
menimbulkan kebingungan pada user.
Selain itu di halaman utama juga terdapat link berupa gambar yang mengacu pada daftar
pemenang undian majalah ini edisi juni 2008. Sedangkan dihalaman awal ArsipPemenang
RolingStone , arsip yang paling baru adalah edisi januari 2008. Tidak ada daftatr pemenang
antara edisi Januari 2008 dengan Juni 2008.

Ada keterangan tahun
Tidak ada keterangan tahun
12
b. Tidak ada informasi mengenai bagaimana cara untuk mengikuti undian majalah RollingStone
ini. Padahal hal ini sangatlah penting untuk user yang ingin mengikuti undian ini. Sebaiknya
pengembang memberikan informasi kepada user tentang bagaimana cara untuk mengikuti
undian tersebut di setiap halaman ArsipPemenang RolingStone.

c. Seperti pada halaman Topik Lalu paging pada halaman ini tidaklah bagus. Sehingga
menimbulkan terlalu banyak scroll. Sebaiknya diberikan link yang menuju ke atas halaman
di bagian akhir/bawah halaman ini.

d. Sama seperti pada halaman Topik Lalu, ketika kita mngklik salah satu edisi majalah maka
kita akan dibawa pada halaman baru daftar pemenang kuis. . Namun dihalaman baru tersebut
tidak disediakan link untuk kembali ke halaman arsip pemenang kuis. Pengguna harus
menggunakan tombol back yang disediakan browser untuk kembali ke halaman sebelumnya.
Mungkin akan lebih baik jika pengembang web ini memberikan link yang menuju halaman
awal arsip topik lalu. Atau dengan menggunakan breadcrumb.


3.5 Halaman Arsip pemenang Buku
Halaman Arsip pemenang Buku adalah halaman yang bertujuanuntuk memperlihatkan daftar
pemenang undian buku yang diundi setiap minggunya oleh KickAndy. Halaman ini disusun
berdasarkan episode tersebut. Pada halaman awal Arsip pemenang Buku terlihat image dari setiap
buku yang diundikan. Ketika salah satu image tersebut diklik maka akan ditampilkan daftar
pemenang dari bukutersebut. Namun dalam halaman ini terdapat beberapa hal yang dianggap kurang.
Berikut hal-hal yan kurang tersebut beserta perbaikan yang mungkin dilakukan :
a. Pada halaman ini ada beberapa link yang setelah di klik tidak mengacu pada daftar
pemenang buku tersebut, melainkan kehalaman pembahasan topik yang berkaitan dengan
buku tersebut. Hal ini jelas membingungkan pengunjung website ini yang ingin melihat
daftar pemenang undian buku. Mungkin ini disebabkan oleh keteledoran pengembang dalam
mengupdate content web ini. Namun apapun alasannya, sebaiknya link-link tersebut
diperbaiki agar kembali kefungsi awalnya yaitu menampilkan daftar pemenang undian buku.









b. Untuk image link dari tiap-tiap buku karena ditampilkan
secara menurun membuat isi halaman ini menjadi
terlalu panjang yang menyebabkan user harus
melakukan scrolling yang berlebihan. Selain itu hal ini
juga menimbulkan banyak whitespace dihalaman
tersebut. Sebaiknya image-image link tersebut
ditampilkan secara mendatar saja agar tidak terlalu
memakan banyak space.



c. Sebaiknya pegindexan dalam halaman ini dilakukan berdasarkan episode terbaru yang yang
ditayangkan atau berdasarkan buku terbaru yang di undi. Hal ini akan lebih memudahkan user
dalam pencariannya tentang daftar pemenang buku yang lalu.

Posisi menurun memakan banyak space
Banyak whitespace yang timbul
Tombol yang mubazir
13
d. Sama seperti pada halaman Topik Lalu dan Arsip Pemenang RolingStone , ketika kita
mengklik salah satu edisi buku maka kita akan dibawa pada halaman baru daftar pemenang
kuis. Namun dihalaman baru tersebut tidak disediakan link untuk kembali ke halaman Arsip
pemenang Buku. Pengguna harus menggunakan tombol back yang disediakan browser untuk
kembali ke halaman sebelumnya. Mungkin akan lebih baik jika pengembang web ini
memberikan link yang menuju halaman awal Arsip pemenang Buku. Atau dengan
menggunakan breadcrumb.


3.6 Halaman Off Air
Halaman Off Air KickAndy adalah halaman yang berisikan tentang arsip topik kegiatan Off
Air KickAndy. Secara garis besear isi dari halaman ini memilki kekurangan yang sama dengan
halaman Topik Lalu,dan halaman- halaman sebelumnya yang telah dibahas yaitu dimasalah paging,
link untuk kembali kahalaman awal, scrolling, pengindexan. Sehngga kurang lebih perbaikkan yang
harus dilakukannya pun sama.

3.7 Form
Berikut beberapa kekurangan yang ditemukan dan perbaikan yang dirasa perlu dalam
pengimplementasian form diwebsite ini, yaitu :

a. Cursor tidak otomatis berada pada field pertama form.
Cursor sebaiknya secara otomatis berada pada field
pertama yang ada pada form. Hal ini akan membuat
pengguna mendapatkan sedikit kemudahan dibandingkan
harus mengklik terlebih dahulu menggunakan mouse.

b. Tidak ada deffault pada radio button. Sebaiknya pada
setiap radio button diberikan nilai deffaultnya.
c. Terdapat penomoran di samping setiap menu checkbox.
Sebaiknya penomoran tersebut dihilangkan karena
dianggap tidak begitu berguna.

d. Penulisan label yang terlihat rancu. Sebaiknya diberikan
format penulisan atau keterangan satuan tahun. Pengunjung
akan bingung ketika akan mengisi field ini. Apakah harus
diisi dengan waktu kehilangan kaki atau lamanya waktu
kehilangan kaki.









3.8 BreadCrumb
Breadcrumb digunakan untuk menginformasikan kepada pengguna mengenai posisi mereka saat ini.
Dengan menggunakan breadcrumb, pengguna juga dapat menelusuri path yang telah dilaluinya sampai
berada di posisi saat ini sehingga pengguna dengan mudah dapat kembali ke halaman sebelumnya. Pada
web ini tidak terdapat breadcrumb. Padahal kehadiran breadcrumb sangat dibutuhkan pada web ini karena
setiap halaman dari web ini memilki jarak path yang cukup dalam dari halaman utama. Terlebih lagi link
14
untuk menuju halaman utama (home) dalam web ini tidak teridentifikasi dengan baik. Akibatnya para
pengunjung web ini mengalami kesulitan dalam penelusuruannya mencari informasi. Mereka terpaksa
menggunakan tombol back yang disediakan browser berkali-kali hanya untuk kembali pada halaman
utama maupn halaman-halaman sebelumnya. Hal ini tentu saja akan membuang- buang waktu para
pengunjung dan dapat membuat para pengguna menjadi jengkel dan malas dalam melakukan penelusuran
sehingga tujuan dari website ini dalam memberikan informasi dikatakan kurang berhasil.

3.9 Link
Berikut adalah beberapa kekurangan dalam penggunaan link dalam web ini,
a. Tidak semua link berubah warna ketika telah dikunjungi. Contoh pada link discreenshoot ini,
warnanya tidak berubah setelah dikunjungi. Sedankan link lainnya berubah warna.





Sebaiknya semua link harus berubah warna setelah di kunjungi. Hal ini akan membantu
pengguna dalam mengingat link-link mana saja yang telah dikunjungi.

b. Web ini banyak mengunakan image sebagai link tetapi tidak memberikan penanda bahwa image
tersebut adalah sebuah link atau bukan. Jadi pengunjung yang baru memasuki web ini tidak akan
menyadari bahwa image tersebut merupakan link atau bukan sebelum mereka menghover mouse
ke image tersebut. Karena ada juga image yang berukuran sama tapi dia bukan link .
Sebaiknya setiap image yang merupakan link diberikan penanda yang jelas bahwa image tersebut
merupakan suatu link. Selain itu sebaiknya penggunaan image sebagai link sebaiknya dikurangi,
jika cukup dengan mengunakan text gunakan text saja. Karena penggunaan image yang
berlebihan ini akan banyak memakan tempat dan inilah yang menyebabkan setiap halaman
menjadi terlalu panjang singga harus di scroll.

c. Tidak ada penanda link pada navigasi menu utama, jika di hover tidak ada yang berubah di link
tersebut.
Mestinya stiap link sebaiknya dibuat berubah warna atau digarisbawahi sewaktu cursor
mouse mengarah ke arah link (hover) karena telah menjadi konvensi umum bagi
pengunjung bahwa teks yang berwarna biru atau digarisbawahi merupakan sebuak link
yang dapat diklik

d. Sebaiknya image sponsor dijadikan link menuju alamat sponsor tersebut.








e. Banyak pengembang website yang sudah profesional menilai bahwa penggunaan link klik here
sangatlah amatir , terlalu informal, dan uninformatif. Link yang baik seharusnya hanya terdiri
dari phrase atau kata-kata yang paling penting saja, contohnya Details. Dalam web ini
ditemukan link penggunaan link klik disini. Sebaiknya kata-kata link tersebut diganti dengan
kata-kata atau phrase yang pailng pentig dari tujuan link tersebut.
Pada link yang ditunjukkan gambar disamping dapat
dirubah menjadi daftar, ganti password, lupa pasword.


Setelah di klik tidak
berubah warna
Image sponsor yang bukan
merupakan link
15


e. Pada logo KickAndy Foundation dibawah ini terlihat seperti link. Sebaiknya hindari penggunaan
atau penempatan image yang seperti link ini. Hal ini
membingungkan user. Jika ingin tetap memakai logo
seperti ini sebaiknya logo tersebut dijadikan sebagai link
saja.


3.10 Pemformatan Text
Pada web ini, terdapat beberapa kekurangan dalam segi pemfortan textnya. Baik dalam
pewarnaan font, format paragraf, dan format tulisan. Berikut beberapa kekurangan tesebut beserta
perbaikkan yang mungkin dilakukkan.
a. Terdapat pewarnaan font yang tidak sesuai dan inkonsistensi dalam pewarnaannya. Sebaiknya
pewarnaan font disamakan berdasarkan bagiannya. Misalnya untuk bagian content
disamakan warna fontnya. Begitu juga untuk bagian judul. Untuk isi tulisan yang berupa
informasi sebaiknya jangan menggunakan warna merah karena terkesan seperti peringatan
atau pesan kesalahan kepada pembacanya.
















b. Tedapat inkonsistensi penulisan paragraf maupun
judul.Dalam gambar terlihat pemformatan paragraf
yang tidak sama. Ada yang justify dan rata kiri.
Sebaiknya dalam pemformatan paragraf disamakan.
Memakai justify saja atau rata kiri saja.




c. Format penulisan didalam tabel lebih baik dibuat
menjadi rata kiri saja. Jika di buat center akan
membuat tulisan terlihat tidak rapi dan agak sulit
dibaca.







Pewarnaan font yang tidak sesuai
Pewarnaan font yang tidak sama
Rata kiri
16















Gambar format penulisan dalam tabel
3.11 Out off date
Pada beberapa halaman seperti di halaman topik terkini dibagian paling bawah terdapat image
yang merupakan link kesuatu alamat kidzania.com. Dalam image itu berisi informasi tentang
kegiatan yang off air yang akan dilakukan oleh Kick Andy. Namun setelah dilihat ternyata tanggal
acara off air tersebut telah dilakukan beberapa bulan yang lalu. Walaupun begitu informasi ini masih
saja tetap dipublish dalam web ini sampai sekarang.






Karena sebenarnya informasi tersebut sudah tidak
dipakai lagi terlebih image itu terlalu memakan banyak
tempat, jadi sebaiknya iklan tersebut dihilangkan saja
dari setiap halaman web.





3.12 Inkonsistensi Tampilan
Inkonsistensi tampilan dari web ini terlihat dalam fungsi search. Dapat dilihat dari gambar bahwa
posisi tombol search yang berada di halaman utama berbeda posisi dengan yang ada salah satu
halaman lainnya.






Pada Halaman utama
Pada halaman daftar pemenang kuis Rolling Stone
Sebaiknya pengembang menyamakan posisi tombol cari disetiap halaman yaitu tepat disamping
field pencarian. Agar tidak terjadi inkonsistensi tampilan lagi dalam web ini.

Tanggal yang sudah
lewat, masih dipasang
Tombol berada di bawah
field pencarian
Tombol berada di
samping field pencarian
Justify
Center
17
BAB IV PENUTUP

4.1 Kesimpulan
Tolak ukur Web dikatakan berhasil adalah sebagaimana besar tujuan dari pembuatan website
tersebut terpenuhi. Dalam hat ini peranan web usability sangatlah besar. Jika usability web tersebut
bagus maka pengunjung pun akan merasa nyaman dan menyukai web tersebut. Jika website tersebut
telah disukai banyak orang maka tujuan dari pembuatan website tersebut akan tercapai. Seorang
pengembang suatu web harus mempelajari web usability dan mengimplementasikannya pada web
yang dikembangkan jika dia ingin dikatakan sebagai pngembang yang berhasil..
Pada pengembangan web Kick Andy, pengembang bisa dikatakan masih kurang menerapkan web
usability yang baik pada webnya. Ini dapat dilihat dari kesalahan-kesalahan yang dilakukan
pengembang karena tidak memperhatikan : paging, scrolling, link, outdated content, inkonsistensi
tampilan, pemformatan text, breadcrumb, form, dll. Jika hal-hal ini tidak segera diperbaiki maka
tujuan dari pembuatan website ini sebagai sistem informasi dan komunikasi tidak akan tercapai.

3.1 Saran
Makalah ini diharapkan menjadi bahan masukan bagi pengembang untuk mengembangkan web
Kick Andy dengan lebih memperhatikan faktor-faktor usability. Kekurangan-kekurangan yang masih
ditemui, sebaiknya segera diperbaiki agar web dapat terlihat profesional. Dengan demikian, para
pengguna dan pengunjung website ini akan menyukai web ini dan tujuan dari pembuatan ini pun akan
tercapai.






























18
DAFTAR PUSTAKA
Johnson, Jeff. 2003. Web Bloopers: 60 Common Web Design Mistakes and How to Avoid Them. San
Fransisco: Morgan Kaufmann Publishers.
Galitz, Wilbert O. 2007. The Essential Guide to User Interface Design: An Introduction to GUI Design
Principles and Techniques, Third Edition. Indianapolis : Wiley Publishing, Inc.
Cooper, Alan, Robert Reimann, dan Dave Cronin. 2007. About Face 3: The Essentials of Interaction
Design. Indianapolis : Wiley Publishing, Inc.
Nielsen J & Loranger H. 2006. Prioritizing Web Usability. Berkeley : New Riders.