M.K INTERAKSI MANUSIA DAN KOMPUTER. SEMESTER ..... oleh Kick Andy,
undian buku gratis, Andy's corner, berbagai komentar dari para pengunjung dan.
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
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
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. 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, Andy’s 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 :
2
Header Navigasi Menu Utama
Image link
Fungsi Search
Image link
Image sponsor, Bukan merupakan link
Halaman Isi
Gambar Halaman Utama www.kickandy.com
3
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.
a.
b.
c.
d.
e.
Usability didefenisikan melalui lima komponen, yaitu : Learnability Learnability menjelaskan tingkat kemudahan pengguna untuk memenuhi task-task dasar ketika pertama kali mereka melihat/menggunakan hasil perancangan. Efficiency Efficiency menjelaskan tingkat kecepatan pengguna dalam menyelesaikan task-task setelah mereka mempelajari hasil perancangan. Memorability Memorability menjelaskan tingkat kemudahan pengguna dalam menggunakan rancangan dengan baik, setelah beberapa lama tidak menggunakannya. Errors Errors menjelaskan jumlah error yang dilakukan oleh pengguna, tingkat kejengkelan terhadap error dan cara memperbaiki error. 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
4
5. 6. 7. 8. 9. 10. 11. 12.
Search Navigation and Information Architecture Readability & Legibility Writing for the Web Providing Good Product Information Presenting Page Elements Balancing Technology with People's Needs 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, one’s finger (untuk touch-sensitive screens atau pads), dan one’s 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.
5
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. Dihilangkan
Diganti dengan tulisan”Tayang setiap Kamis pukul 22.05WIB dan Minggu pukul 15.05WIB” 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 bukan. Sebaiknya link-link tersebut disusun menjadi satu baris(hilangkan space kosongnya) dan diberikan pembeda dengan headernya .
Navigasi menu utama
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: 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.
l.
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. 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:
paging
Judul topik
Deskripsi topik 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.
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.
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.
9
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
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
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.
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. Tidak ada keterangan tahun
Ada keterangan tahun
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.
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. Posisi menurun memakan banyak space Banyak whitespace yang timbul
Tombol yang mubazir 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.
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.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 pengimplementasian form diwebsite ini, yaitu :
yang dirasa perlu dalam
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
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. Setelah di klik tidak 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. Image sponsor yang bukan merupakan link
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.
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.
Pewarnaan font yang tidak sesuai Pewarnaan font yang tidak sama 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. Rata kiri 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.
15
Center
Justify
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. Tanggal yang sudah lewat, masih dipasang
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. Tombol berada di samping field pencarian Tombol berada di bawah field pencarian 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.
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
