Tugas Akhir Imk Final PDF
Tugas Akhir Imk Final PDF
Kajian Situs
http://www.kickandy.com
ELGHAR WISNUDISASTRA
G64052049
(http://ghalerblanks.wordpress.com)
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
1
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.
2
Header
Navigasi
Menu
Utama
Image link
Fungsi
Search
Image link
Image
sponsor,
Bukan
merupakan
link
Halaman Isi
3
BAB II TINJAUAN PUSTAKA
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
4
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
5
BAB III ANALISIS WEB KICK ANDY
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. Dihilangkan
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
header
6
Icon yang kurang tepat
karena tidak ada pembeda, ternyata Navigasi menu utama
bukan. Sebaiknya link-link tersebut
disusun menjadi satu baris(hilangkan
space kosongnya) dan diberikan pembeda
dengan headernya .
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:
Memilki fungsi yang sama
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
7
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.
paging
Judul topik
Deskripsi topik
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.
8
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.
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.
9
garis separator yang awalnya berfungsi
sebagai pemisah antar pesan dengan si
pengirim
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.
10
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.
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.
11
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.
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.
12
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.7 Form
Berikut beberapa kekurangan yang ditemukan dan perbaikan yang dirasa perlu dalam
pengimplementasian form diwebsite ini, yaitu :
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
13
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
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.
14
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.
Rata kiri
15
Justify Center
16
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.
17
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.
18