LAPORAN AKHIR

M.K INTERAKSI MANUSIA DAN KOMPUTER

SEMESTER GENAP – 2007/2008

Kajian Situs
http://www.liputan6.com

oleh:
Nadya Nurul Hasanah
G14052014
(http://nadyaja.wordpress.com)

INSTITUT PERTANIAN BOGOR

2008
 DAFTAR ISI

Halaman
DAFTAR GAMBAR....................................................................................................................... iv
BAB 1 PENDAHULUAN ................................................................................................................ 1
1.1 Web usability ................................................................................................................... 1
1.2 Web Liputan 6 ................................................................................................................. 1
BAB 2 ANALISIS WEB Liputan 6.................................................................................................. 2
2.1 Analisis tiap halaman web ............................................................................................... 2
2.1.1 Halaman Home..................................................................................................... 2
2.1.2 Halaman Radio Partner ....................................................................................... 4
2.1.3 Halaman Profil Presenter ..................................................................................... 4
2.1.4 Halaman Info Iklan .............................................................................................. 4
2.1.5 Halaman Free Email ............................................................................................ 5
2.1.6 Halaman Site Map ................................................................................................ 5
2.1.7 Halaman Berita..................................................................................................... 6
2.2 Analisis web keseluruhan................................................................................................. 6
2.2.1 Logo dan nama perusahaan .................................................................................. 6
2.2.2 Fasilitas Search .................................................................................................... 7
2.2.3 Breadcrumb.......................................................................................................... 7
2.2.4 Penempatan menu utama...................................................................................... 8
2.2.5 Sub Menu ............................................................................................................. 8
2.2.6 Scrolling ............................................................................................................... 9
2.2.7 Terlalu banyak text dalam satu halaman ............................................................ 10
2.2.8 Perubahan warna pada link yang telah dikunjugi ............................................... 10
2.2.9 Link yang tidak berjalan ..................................................................................... 10
2.2.10 Button tidak menjadi link ................................................................................... 11
2.2.11 Terlalu banyak link............................................................................................. 11
2.2.12 Registrasi pengguna ........................................................................................... 12
2.2.13 Login .................................................................................................................. 13
2.2.14 Screen resolution................................................................................................ 13
2.2.15 Text image .......................................................................................................... 14
2.2.16 Penggunaan white space..................................................................................... 15
2.2.17 Kesalahan bahasa ............................................................................................... 15
2.2.18 Penyesuaian font dan warna ............................................................................... 16
2.2.19 Text yang terlihat seperti link ............................................................................. 17
2.2.20 Pop-up windows ................................................................................................. 17
2.2.21 Plug-ins .............................................................................................................. 18
2.2.22 Icon..................................................................................................................... 18

ii
 2.2.23 Tampilan Text .................................................................................................... 19
2.2.24 Relative specification ......................................................................................... 19
2.2.25 Indikator ‘>>’ ..................................................................................................... 19
2.2.26 Page title ............................................................................................................ 20
2.2.27 Penggunaan bullet list yang kurang tepat........................................................... 20
2.2.28 Update Content .................................................................................................. 21
2.2.29 Terlalu banyak gambar....................................................................................... 21
2.2.30 Error Messages .................................................................................................. 21
BAB 3 PENUTUP .......................................................................................................................... 23
3.1 Kesimpulan........................................................................................................................ 23
3.2 Saran .................................................................................................................................. 23
DAFTAR PUSTAKA ..................................................................................................................... 24

iii
 DAFTAR GAMBAR

Halaman
Gambar 1. Headline pada halaman home.......................................................................................... 3
Gambar 2. Tampilan setelah pemilihan button detail ....................................................................... 3
Gambar 3. Berita pada halaman home .............................................................................................. 4
Gambar 4. Halaman Menu Info Iklan .............................................................................................. 5
Gambar 5. Halaman Site map ........................................................................................................... 6
Gambar 6. Bagian Logo dan Nama web Liputan 6........................................................................... 7
Gambar 7. Search box...................................................................................................................... 7
Gambar 8. Judul pada halaman menu Politik ................................................................................. 8
Gambar 9. Penempatan menu utama ................................................................................................ 8
Gambar 10. Sub menu di bagian atas web ........................................................................................ 8
Gambar 11. Sub menu di bagian kanan web.................................................................................... 9
Gambar 12. Sub menu dengan heading berwarna biru muda .......................................................... 9
Gambar 13. Link yang tidak berjalan. ............................................................................................ 11
Gambar 14. Pengelompokkan link ................................................................................................. 12
Gambar 15. Window sizing button pada halaman registrasi............................................................ 12
Gambar 16. Tampilan form Registrasi ............................................................................................ 13
Gambar 17. Button pada form registrasi ........................................................................................ 13
Gambar 18. Form Login ................................................................................................................. 13
Gambar 19. Tampilan web Liputan 6 saat fungsi load images dimatikan ...................................... 15
Gambar 20. White space pada halaman web Liputan 6 .................................................................. 15
Gambar 21. Kesalahan bahasa pada bagian search ........................................................................ 16
Gambar 22. Kesalahan bahasa pada form registrasi........................................................................ 16
Gambar 23. Ukuran dan warna font pada heading dan informasi................................................... 16
Gambar 24. Text yang terlihat seperti link ..................................................................................... 17
Gambar 25. Judul Berita terlihat seperti link .................................................................................. 17
Gambar 26 Icon pada button detail ................................................................................................. 19
Gambar 27. Icon sub menu liputan khusus dan catatan produser ................................................... 19
Gambar 28. Indikator ‘>>’ bukan link ............................................................................................ 20
Gambar 29. Indikator ‘>>’ merupakan link .................................................................................... 20
Gambar 30. Penggunaan bullet list yang kurang tepat.................................................................... 20
Gambar 31. Waktu saat upload content .......................................................................................... 21
Gambar 32. Error message ............................................................................................................ 22

iv
 BAB 1
PENDAHULUAN

1.1 Web usability

Web usability adalah salah satu faktor penting dalam mengembangkan sebuah web.
Pengembang harus memahami prinsip-prinsip usability sebelum mengimplementasikannya
pada sebuah web. Menurut Jacob Nielsen, usability adalah sebuah atribut kualitas yang menilai
tingkat kemudahan user interface untuk digunakan. Usability juga mengacu kepada metode
untuk meningkatkan kemudahan penggunaan selama proses perancangan.
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.
Sebuah web dengan usability yang buruk akan ditinggalkan oleh penggunanya. Berikut
ini adalah beberapa kondisi yang akan membuat pengguna meninggalkan sebuah web :
 Web sulit digunakan.
 Homepage tidak menjelaskan tentang apa yang ditawarkan oleh perusahaan dan apa saja
yang dapat dilakukan oleh pengguna pada web tersebut.
 Pengguna mendapatkan adanya kesalahan pada web.
 Informasi web sulit dibaca dan tidak mampu menjawab pertanyaan-pertanyaan pengguna.

1.2 Web Liputan 6

Liputan 6 merupakan salah satu program berita di sebuah televisi swasta di Indonesia.
Liputan 6 memiliki sebuah website yang berdiri sendiri (terpisah dari web SCTV) namun tetap
terhubung dengan web SCTV. Web Liputan 6 beralamat di www.liputan6.com. Secara garis
besar tujuan utama adanya web ini, yaitu :
 Memberikan informasi-informasi terbaru mengenai kejadian di dalam maupun luar negeri.
 Memberi kemudahan bagi para pengguna untuk mengakses berita secara mobile.
 Menyediakan informasi mengenai alamat yang dapat dihubungi oleh pengguna (informasi
kontak).

1
 BAB 2
ANALISIS WEB LIPUTAN 6

Analisis terhadap web Liputan 6 yang beralamat di www.liputan6.com dilakukan dengan

menganalisis penerapan kaidah web usability berlandaskan pada buku Prioritizing Web Usability
karangan Jakob Nielsen. Di dalam buku ini, ada dua belas poin penting yang harus dicermati dalam
mendesain dan membangun sebuah website, yaitu :
1. Nothing to Hide
2. The Web User Experience
3. Revisiting Early Web Usability Findings
4. Prioritizing Your Usability Problems
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
Pembahasan pada makalah ini tidak dikelompokkan berdasarkan dua belas poin di atas.
Pembahasan akan dilakukan berdasarkan sub-poin dari tiap-tiap poin sesuai dengan kondisi yang
ditemukan pada web Liputan 6. Selain merujuk kepada buku Prioritizing Web Usability, analisis juga
merujuk kepada buku The Essential Guide Second Edition karangan Wilbert O. Galitz dan 231 point
dari Web Pages That Suck.

2.1 Analisis tiap halaman web

2.1.1 Halaman Home
Border digunakan untuk memfokuskan perhatian dalam sebuah gruoping atau
pada informasi yang berhubungan. Pada halaman home, terdapat satu berita yang
menjadi headline pada hari tersebut. Kekurangan yang tampak pada headline yang
ditampilkan adalah adanya penggunaan border yang tidak tepat. Border tersebut
digunakan hanya pada bagian cuplikan gambar yang merepresentasikan isi berita.
Akan tetapi, berita terkait yang menjadi inti justru berada diluar border. Hal ini akan
membuat pengguna sedikit bingung. Apakah berita tersebut merupakan satu
kesatuan dengan gambar yang terdapat diatasnya atau tidak. Sebaiknya antara berita
dengan cuplikan gambarnya dibuat berada dalam satu border, sehingga menjadi satu
kesatuan.
Hal lain yang juga perlu diperhatikan pada halaman ini adalah adanya tiga
button di sebelah kanan gambar. Button-button tersebut yaitu video, detail dan
komentar. Ketiga button ini menunjukkan inkonsistensi dalam web ini. Untuk
button video dan komentar, apabila di klik oleh pengguna maka akan muncul pop-
up windows. Sedangkan untuk button detail, jika di klik tidak akan menampilkan
pop-up windows, tetapi akan tetap berada pada window yang sama. Hal ini akan
membingungkan pengguna, karena jika mereka melakukan pemilihan aksi secara
sekuensial maka saat memilih button detail mereka akan mengharapkan untuk
menemukan pop-up windows yang menampilkan detail berita. Akan lebih baik jika

2
ketiga button tersebut melakukan aksi yang sama apabila di klik oleh pengguna.
Selain itu penggunaan pop-up windows juga menjadi suatu hal yang menjengkelkan
bagi pengguna. Apalagi jika pengguna mengaktiftkan pilihan untuk memblock
munculnya pop-up windows, mereka tidak akan mendapatkan informasi yang di
inginkan. Jadi, sebaiknya, saat memilih button video dan komentar, hasil yang
dikeluarkan tetap berada pada window yang sama.

Gambar dan
berita
dibawahnya
merupakan
bagian dari
headline, tapi
bordernya
dibuat
berbeda

Gambar 1. Headline pada halaman home

Permasalahan lain yang muncul yaitu pada pilihan detail. Saat pengguna
mengklik button detail, web akan menampilkan detail berita yang menjadi headline
tersebut. akan tetapi, yang membingungkan adalah menu detail yang ada disebelah
kanan menghilang, tetapi tampilan berita hampir sama dengan tampilan awal
headlinenya. Bagian yang berubah adalah hanya judul halaman serta berita yang
berada di bawah gambar. Sehingga ada kemungkinan pengguna tidak menyadari
bahwa menu detail yang mereka inginkan sudah dilakukan. Hal ini bahkan
memungkinkan pengguna menjadi bingung, karena saat mereka tidak mendapatkan
apa yang diharapkannya, maka dia akan berusaha sekali lagi untuk melakukan aksi
yang sama. Sedangkan pada kasus ini, pengguna tidak dapat melakukan aksi yang
sama dengan hilangnya button detail.
Perubahan judul
halaman

Pilihan detail
menghilang

Gambar 2. Tampilan setelah pemilihan button detail

Di bagian dibawah berita utama, terdapat beberapa berita lainnya. Sekali lagi
muncul masalah inkonsistensi dalam web ini, yaitu pada penulisan berita yang
memampilkan bentuk yang berbeda. Ada cuplikan berita yang menampilkan gambar
dan judul beritanya saja, tetapi ada juga yang menampilkan judul beserta kutipan
beritanya. Sebaiknya berita yang ditampilkan memiliki bentuk yang sama, sehingga

3
 pengguna mudah untuk mengingatnya. Selain itu, button video yang berada
dibawah berita terasa kurang tepat, karena button digunakan untuk menampilkan
link yang melakukan aksi, bukan untuk link yang menampilkan informasi. Lebih
baik jika button tersebut diganti dengan link saja.

Penulisan
cuplikan berita
tidak konsisten

Sebaiknya link,
bukan button

Gambar 3. Berita pada halaman home

2.1.2 Halaman Radio Partner

Pada halaman ini masalah yang terlihat adalah pada alignment-nya. Pada salah
satu radio partner yang ditampilkan terdapat sedikit kesalahan penggunaan
alignment untuk menuliskan jenis broadcast yang disiarkan di radio tersebut, yaitu
penulisan broadcast di radio Megaswara FM yang rata kiri (sejajar dengan logo
radio). Sebaiknya segera diperbaiki, karena walaupun kesalahan ini kecil, tetapi
tetap dapat mengganggu pengguna. Saran untuk halaman ini adalah untuk radio
partner yang ada, akan lebih baik terdapat link untuk menuju ke situs dari masing-
masing radio tersebut.

2.1.3 Halaman Profil Presenter

Pada halaman ini sebaiknya terdapat link untuk melihat profil lengkap dari
presenternya. Karena sesuai dengan menu tersebut adalah untuk melihat profil
presenter. Selain itu, sebaiknya di bagian email dari masing-masing presenter
dijadikan link, sehingga memudahkan pengguna yang ingin melakukan kontak
dengan salah satu presenter .
Profil presenter yang ditampilkan juga tidak didasarkan pada jenis urutan
tertentu. Selain itu, jumlah presenter yang ditampilkan terlalu banyak untuk satu
halaman. Hal ini akan memaksa pengguna melakukan tindakan yang kurang disukai,
yaitu scrolling. Jadi, lebih baik profil ditampilkan berdasarkan abjad dan digunakan
paging untuk menampilkan seluruh presenter. Di luar itu, halaman untuk profil
presenter sudah cukup baik.

2.1.4 Halaman Info Iklan

Pada halaman info iklan, di awal kalimatnya digunakan huruf kapital untuk
satu kata pertama. Mungkin penggunaan huruf kapital ini dimaksudkan untuk
mendapatkan perhatian pengguna. Tetapi, penggunaan huruf kapital ini dirasa
kurang tepat, karena kata tersebut tidak menunjukkan maksud untuk menarik
perhatian pengguna. Penggunaan huruf kapital pun biasanya hanya pada heading
atau headline dari sesuatu. Galitz menyarankan untuk menggunakan mixed case
untuk content sebuah web.
Selain itu, halaman ini lebih tepat jika dikatakan sebagai penjelasan dari web
dan tayangan Liputan 6 itu sendiri. Halaman ini tidak menunjukkan bahwa di sini
diinformasikan tentang periklanan di website liputan 6. Bagian yang menunjukkan
info iklan di halaman ini justru berada pada bagian akhir dari halaman ini, padahal
inilah inti dari dibuatnya halaman info iklan. Kemudian pada bagian yang harus

4
 dihubungi oleh pengiklan terdapat alamat email dan dibagian kanan terdapat tulisan
”contact us here”. Akan tetapi, alamat email dan tulisan tersebut tidak berupa link
yang bisa langsung menghubungkan pengiklan dengan pihak marketing Liputan 6.

Huruf kapital

Informasi tentang
Liputan 6, bukan
info iklan

Bukan link

Gambar 4. Halaman Menu Info Iklan

Di halaman ini juga tidak terdapat kata-kata yang dapat menumbuhkan
kepercayaan bagi para pengiklan untuk memasang iklan disini. Pada sebuah situs
yang menawarkan kerjasama seperti ini kata-kata yang menunjukkan bahwa
pengguna dapat mempercayakan pemasangan iklan disini sangatlah dibutuhkan,
karena kata-kata tersebut akan meningkatkan keamanan serta kenyamanan yang
dirasakan oleh calon pengiklan. Sehingga mereka tidak ragu-ragu untuk beriklan
disini. Walau demikian, tidak adanya kata-kata tersebut mungkin karena
pengembang web lebih menekankan kepercayaan pengguna terhadap nama Liputan
6. Sehingga mereka tidak membutuhkan pemuatan kata-kata seperti itu.
Solusi untuk permasalahan tersebut adalah sebaiknya content untuk halaman
ini diperbaiki, sehingga lebih menjelaskan bagaimana cara periklanan di web
Liputan 6 serta jika memungkinkan dapat diperlihatkan space mana saja yang
disediakan untuk iklan dan tarif beriklan disana. Untuk email dan tulisan ”contact us
here” sebaiknya dijadikan link, sehingga pengiklan dapat langsung menghubungi
jika ingin memasang iklan di web ini.

2.1.5 Halaman Free Email

Saat dipilih link Free Email, pengguna akan dibawa keluar dari web Liputan
6. dan menuju ke web sctvnews.com. Pada halaman Free Email ini, tampilan dari
web sudah cukup bagus, walaupun desainnya berbeda dengan desain web Liputan 6.
Hal ini dapat dimaklumi karena keduanya merupakan web yang terpisah.
Pembahasan mengenai menu-menu yang ada di dalamnya tidak dilakukan disini
karena sudah merupakan web yang berbeda.

2.1.6 Halaman Site Map

Site map menggambarkan struktur hierarki dan hubungan dari komponen
website. Site map akan menggambarkan struktur hierarki website dalam bentuk
grafis ataupun text. Site map mungkin dibuat tersedia untuk level global atau lokal
tergantung pada kompleksitas yang dimiliki oleh web. Idealnya, dalam sebuah site
map ditampilkan path navigasi yang lengkap mulai dari halaman home hingga akhir.

5
 Pada web liputan 6, site map yang ada sudah cukup baik. Kekurangan yang
muncul di sini adalah adanya bagian yang bukan link yang dimasukkan dalam site
map. Bagian tersebut merupakan sebuah pengkategorian terhadap menu-menu
dibawahnya. Sebaiknya, bagian tersebut tidak disertakan dalan site map. Karena site
map adalah kimpulan link yang akan menuju ke halaman-halaman dalam sebuah
web.

Bukan link

Gambar 5. Halaman Site map

2.1.7 Halaman Berita

Pada halaman berita politik, hukum & kriminal, sosial & budaya hingga lain-
lain terlihat penulisan berita yang ditampilkan sudah konsisten di setiap
halamannya.

2.2 Analisis web keseluruhan

2.2.1 Logo dan nama perusahaan
Logo dan nama perusahaan merupakan identitas utama sebuah website.
Identitas ini digunakan untuk menginformasikan kepada pengguna tentang web
yang sedang mereka kunjungi. Pada web ini, logo dan nama perusahaan sudah
diberikan dengan jelas. Selain itu, juga ada slogan (tagline) dari Liputan 6.
Permasalahan yang dijumpai pada logo dan nama perusahaan pada web ini
adalah :
a. Logo berada pada bagian kiri, tetapi tidak pada bagian paling atas, karena
dibagian paling atas digunakan sebagai space iklan.
b. Logo dan nama perusahaan (Liputan 6) menjadi link ke home (logo dan nama
dibuat menggunakan satu file image).
Solusi untuk permasalahan di atas adalah :
a. Logo sebaiknya ditempatkan pada bagian kiri atas karena telah menjadi konvensi
umum.
b. Sebaiknya hanya logo yang menjadi link ke home; nama perusahaan (Liputan 6)
sebaiknya dibuat dengan text menggunakan HTML atau file image yang terpisah
dari logo.

6
 Space Iklan (tidak muncul, tetapi pada halaman situs aslinya terdapat iklan)

Gambar 6. Bagian Logo dan Nama web Liputan 6

2.2.2 Fasilitas Search

Menu search merupkan salah satu elemen penting dalam sebuah web. Fitur
searching akan memudahkan pengguna untuk menemukan informasi tertentu yang
ada di web dengan mudah dan cepat. Pengguna hanya memasukkan beberapa kata
sebagai kata kunci dan sistem web akan menampilkan halaman hasil yang sesuai
dengan kata kunci. Penggunaan fitur ini tentu lebih menghemat waktu pengguna
daripada harus browsing ke semua halaman web untuk mendapatkan informasi
tertentu.
Pada web Liputan 6 ini sudah tersedia fasilitas searching, dan penempatannya
pun sudah sesuai dengan peletakan umum, yaitu dibagian kanan atas. Kekurangan
dari fasilitas searching di web ini hanyalah pada search box yang yang panjangnya
sekitar 20 karakter. Sangat disarankan panjang search box adalah 27 karakter karena
telah memenuhi 90% dari kueri pengguna.

Gambar 7. Search box

2.2.3 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. Breadcrumb memang kurang dibutuhkan pada web ini karena
setiap halaman rata-rata hanya memiliki jarak path satu sampai dua klik dari
halaman utama. Tanpa adanya breadcrumb, pengembang web ini membuat judul
pada setiap halaman sehingga pengguna bisa mengetahui dimana posisinya
sekarang.
Kondisi ini diperlihatkan pada gambar di bawah ini :

7
 Judul halaman

Gambar 8. Judul pada halaman menu Politik

2.2.4 Penempatan menu utama

Urutan fokus mata pengguna dalam mengamati sesuatu dimulai dari bagian
atas, kiri, kanan, dan terakhir adalah bagian bawah. Merujuk pada fakta ini, maka
penempatan informasi paling penting yaitu menu, sebaiknya diletakkan pada bagian
atas karena menu merupakan ide pokok yang mengetengahkan informasi utama
yang dimiliki oleh sebuah web. Peletakan menu utama pada web Liputan 6 dapat
dikatakan cukup baik karena diletakkan pada bagian atas. Dengan demikian, ketika
pengguna menggunakan web maka pengguna bisa langsung mengetahui konten apa
saja yang ditawarkan oleh web tersebut.
Tetapi, masih ada kekurangan dalam penempatan menu di web Liputan 6 ini.
Penempatan menu home yang umumnya berada di bagian kiri justru tidak dilakukan
disini. Menu home pada web Liputan 6 terletak di bagian kanan atas. Ditambah
dengan ukuran tulisan yang juga cukup kecil, penempatan menu yang tidak umum
akan membuat pengguna kesulitan untuk menemukannya. Sebaiknya penempatan
menu home dilakukan sebagaimana yang sering di temukan, yaitu berada dibagian
kiri dari halaman web.

Gambar 9. Penempatan menu utama

Menurut Galitz, pada sebuah halaman web yang memiliki halaman panjang,
sebaiknya menu home juga diletakkan pada bagian footer, sehingga ketika pengguna
melakukan scrolling hingga bagian bawah, mereka tidak perlu melakukan scrolling
kembali untuk menemukan menu home yang terdapat di bagian atas.
Kompleksitas pada web liputan 6 cukup tinggi. Web ini memiliki jumlah
kategori informasi yang sangat besar dan setiap kategori memiliki banyak content.
Galitz menyarankan dibuat sebuah sub menu untuk memperjelas navigasi pada web
seperti itu. Hal ini telah diterapkan pada web Liputan 6. Dalam web ini terdapat sub
menu yang terdapat di bagian atas, serta pada bagian kanan web.

Gambar 10. Sub menu di bagian atas web

2.2.5 Sub Menu

Karena kompleksitas web Liputan 6 yang tinggi, web ini mempunyai beberapa
sub menu. Pada sub menu di bagian kanan telah dilakukan grouping untuk

8
 mengelompokkan jenis-jenis berita yang ada. Akan tetapi tidak semua sub menu
yang ada merupakan suatu grouping. Kekurangan lain dari sub menu yang
digunakan ini adalah adanya inkonsistensi dalam penggunaan heading. Beberapa
heading pada sub menu merupakan link, tetapi sebagian lagi tidak. Hal lain yang
ditemukan disini adalah adanya perbedaan warna pada heading yang ada. Beberapa
heading berwarna biru tua, tetapi sebagian lainnya berwarna biru muda. Sekali lagi
terdapat inkonsistensi dalam desain web Liputan 6.

Link

Bukan link

Gambar 11. Sub menu di bagian kanan web

Gambar 12. Sub menu dengan heading berwarna biru muda

2.2.6 Scrolling
Pengguna jarang melakukan scrolling karena mereka terlalu sibuk dan banyak
informasi pada web yang tidak berharga untuk dilihat dalam halaman web, kecuali
jika informasi itu dapat dilihat dengan jelas dan halaman web itu mempunyai
informasi yang memang dibutuhkan. Sayangnya, kebanyakan halaman hanya
mempunyai sedikit informasi, sehingga pengguna memutuskan untuk menghindari
penggunaan scroll yang terlalu banyak. Jadi, seorang pengembang harus mengetahui
fakta-fakta ini agar dapat menampilkan cukup informasi di atas sehingga membuat
pengguna ingin melihat informasi di bawahnya
Pengguna dengan web experience yang lebih tinggi melakukan scroll yang
lebih banyak. User dengan web experience yang lebih rendah hanya melakukan
scroll untuk 38% dari halaman web, sedangkan web experience yang lebih tinggi
melakukan scroll 46% dari halaman web. Ada dua penjelasan yang mungkin untuk
ini: Pertama, para pemakai berpengalaman menjadi lebih sadar bahwa perancangan
web yang kurang baik kadang membuat informasi penting berada dibawah, dan
kedua, mereka lebih cepat saat memilih informasi yang relevan dengan membaca
sekilas halaman web, sehingga mereka menjadi lebih memerlukan banyak waktu
untuk melakukannya.
Pengguna web kebanyakan malas untuk melakukan scrolling dan kalaupun
mereka melakukan scrolling, maka mereka hanya melakukannya sedikit saja (satu
atau dua kali scrolling). Penggunaan scrolling pada web ini masih kurang baik,
karena pada-halaman-halaman tertentu pengguna harus melakukan kurang lebih
lima kali scrolling untuk melihat semua informasi yang ada pada halaman tersebut.
Banyaknya informasi yang ditampilkan pada satu halaman membuat pengguna

9
 harus melakukan scrolling berkali-kali. Rata-rata penggunaan scrolling dalam web
ini yaitu sekitar empat kali scrolling untuk setiap halaman.

2.2.7 Terlalu banyak text dalam satu halaman

Text dalam sebuah web merupakan hal yang penting. Sehingga komposisi text
dalam sebuah halaman web perlu diperhatikan. Text yang terlalu sedikit dalam satu
halaman akan mengakibatkan seringnya membalik halaman, dan pengguna dibuat
untuk mengklik berkali-kali. Akan tetapi, terlalu banyak text juga tidak baik karena
dapat menyebabkan kekacauan dan ketidaknyamanan.
Dalam web liputan 6 terdapat terlalu banyak text dalam satu halaman. Hal ini
akan sedikit mengganggu pengguna karena terlalu banyak informasi yang diberikan
di halaman tersebut. Selain itu, umumnya pengguna akan terlalu malas untuk
membaca text yang terlalu panjang. Text yang terlalu panjang juga menyebabkan
pengguna dipaksa untuk melakukan scrolling. Seperti yang telah dibahas di atas,
penggunaan scrolling seringkali dihindari oleh pengguna

2.2.8 Perubahan warna pada link yang telah dikunjugi

Umumnya, web browser kurang baik dalam mendukung navigasi pengguna,
tetapi mereka menyediakan satu fitur penting dalam navigasi. Mereka mengijinkan
pengembang untuk mengubah warna di tiap halaman saat pengguna telah
mengunjunginya. Saat ini 74% web menggunakan pendekatan desain yang seperti
ini, sehingga hal ini menjadi konvensi umum yang diharapkan pengguna.
Pelanggaran dalam hal ini bisa menjadi masalah usability yang sangat serius.
pengguna dapat tersesat dan mengunjungi kembali halaman yang sama jika mereka
tidak yakin bahwa mereka telah mengunjunginya. akibatnya mereka akan lebih
cepat menyerah saat menggunakan web tersebut. Mereka akan merasa kurang baik
terhadap situs yang gagal menggambarkan tindakan mereka dan dan gagal
membantu navigasi mereka.
Permasalahan usability juga menjengkelkan bagi pengguna dengan daya ingat
lemah yang sering tidak bisa mengingat apa yang telah mereka klik jika tidak ada
bantuan visual. Itulah sebabnya mengapa pengguna lebih baik dilayani dengan
perubahan warna link. Link yang tidak berubah warna membuat kebingungan
pengguna dalam navigasi karena pengguna tidak mengerti perrbedaaan dari yang
mereka pilih dan dimana mereka berada. Hal ini tentu saja merupakan masalah
usability yang serius.
Pada web Liputan 6 link yang telah dikunjungi tidak mengalami perubahan
warna. Sedangkan pengguna biasanya tidak suka mengingat mana saja link yang
sudah dikunjunginya. Sebaiknya, untuk link yang telah dikunjungi oleh pengguna di
atur agar dapat berubah warnanya sehingga tidak akan membuat pengguna
mengunjungi link yang sama lebih dari satu kali karena tidak ada bantuan untuk
mengingat mana link yang telah dikunjunginya.

2.2.9 Link yang tidak berjalan

Link pada sebuah web merupakan faktor kunci dalam proses navigasi.
Pengguna bisa berhenti menggunakan link yang terbukti tidak berhasil dikunjungi
sebelumnya. Sebaliknya, mereka mungkin kembali mengunjungi link yang telah
membantu mereka sebelumnya.
Pada salah satu berita olahraga yang ada di web ini saat ditampilkan isi berita
tersebut terdapat gambar yang berhubungan dengan berita dan menu untuk melihat
video dan komentar. Akan tetapi, saat dicoba untuk mengklik button video, ternyata

10
 button tersebut bukan berupa link ke tempat lain. Padahal dihalaman-halaman berita
yang lainnya menu video selalu menampilkan pop-up windows jika di klik. Sekali
lagi di sini ditunjukkan inkonsistensi dalam web liputan 6.
Pengembang web Liputan 6 harus lebih memperhatikan hal ini. Karena saat
pengguna menemukan kasus seperti ini, mereka mungkin tidak akan mengulangi
untuk mencoba mengunjungi link tersebut. Padahal penggunaan button video
tersebut ada d isetiap berita yang dimuat di sini. Hal ini tentu saja akan merugikan
Liputan 6.
Jika memang ada berita-berita tertentu yang memang tidak memiliki rekaman
video, sebaiknya dibuat satu bagian yang terpisah, antara berita yang memilki
rekaman video dengan berita yang hanya menampilkan informasi tertulis saja.
Sehingga hal-hal tersebut tidak akan membuat user menjadi kebingungan.

Link tidak
berjalan

Gambar 13. Link yang tidak berjalan.

2.2.10 Button tidak menjadi link

Pada kasus di atas, penggunaan button video juga menjadi tidak tepat. Karena
button tersebut tidak melakukan aksi atau menampilkan informasi apapun jika di
klik pengguna. Padahat tingkah laku button tersebut menyerupai sebuah link,
dimana saat ponter diarahkan ke button tersebut maka tulisan video berubah
menjadi warna biru terang. Untuk hal-hal seperti ini, pengembang web dapat lebih
memperhatikan penggunaan style di web tersebut. Sehingga tidak akan terdapat
kekeliruan seperti ini. Jika memang ada saat button bukan berupa link, ada baiknya
tampilan button tersebut berada sepeti dalam keadaan tidak aktif.

2.2.11 Terlalu banyak link

Memahami navigasi sebuah website kadang menjadi lebih sulit karena website
biasanya memiliki struktur yang lebih banyak dari sistem aplikasi biasa. Sebuah
halaman web dapat melakukan apa saja dan dapat memiliki banyak link untuk
halaman lain.
Jumlah link yang ditampilkan dalam sebuah halaman biasanya ditentukan oleh
kompleksitas dari web itu sendiri. Riset terhadap menu menunjukkan bahwa jumlah
link yang berada pada suatu halaman dapat ditentukan dari pengelompokkan
elemennya. Jika tidak ada pengelompokkan elemen batas link yang diijinkan adalah
4-8 link. Sedangkan jika terdapat pengelompokkan elemen link diperbolehkan
hingga 18-24 buah. Tetapi, sebagian ahli dalam web desain menyarankan hanya 8-
12 link saja.
Jumlah link yang terlalu sedikit juga meningkatkan kemungkinan terlihat
seperti pengumuman. Ini tidak diperlukan untuk menyebutkan semua fitur dari
sebuah web dalam semua halaman. Untuk mengurangi jumlah link batasi agar hanya
menampilkan content web yang paling penting atau fitur-fitur yang berguna saja.
Dalam web Liputan 6 terdapat banyak sekali link dalam satu halaman. Tetapi
jumlah link yang terdapat di web ini sudah sesuai dengan aturan di atas. Karena
telah dilakukan pengelompokkan elemen, jumlah link dalam setiap kelompok hanya
berkisar tiga hingga sembilan link.

11
 Gambar 14. Pengelompokkan link

2.2.12 Registrasi pengguna

Sebelumnya registrasi adalah suatu penghalang yang cukup besar dalam sebuah
web. Karena pengguna tidak tahu apakah mereka dapat mempercayakan informasi
pribadi mereka kepada web tersebut. Sekarang pengguna melakukan registrasi
apabila mereka percaya terhadap sebuah web dan mereka memerlukan produk atau
jasa yang ditawarkan. Meski demikian, pengguna tetap saja tidak suka untuk
melakukan registrasi. Sebuah web akan kehilangan banyak jika mereka
memaksakan pengguna untuk segera registrasi atau jika mereka menanyakan terlalu
banyak pertanyaan.
Melakukan registrasi di tempat yang salah adalah kesalahan yang umun
dilakukan pengguna. Banyak layar registrasi yang mempunyai area yang disediakan
untuk pelanggan baru. Pengguna biasanya akan lebih tertarik pada text boxes karena
itu terlihat dapat melakukan suatu aksi tertentu. Pengguna akan memilih untuk
melakukan sesuatu daripada membaca sesuatu. Itulah mengapa mereka lebih tertarik
pada open boxes dan mengabaikan hal lain di halaman registrasi
Pada web Liputan 6, pengguna akan diminta untuk melakukan registrasi apabila
mereka hendak memberikan komentar ataupun mengirimkan berita yang ada pada
web kepada orang lain. Kekurangan yang tampak pada saat hendak melakukan
registrasi adalah pengguna tidak dapat melihat seluruh point yang harus mereka isi
saat registrasi. Hal ini disebabkan oleh halaman registrasi yang muncul hanya
berukuran seperempat dari luas monitor keseluruhan. Pengguna tidak dapat
melakukan scrolling untuk melihat bagian bawah form registrasi. Bahkan pengguna
juga tidak bisa memperbesar layar karena tidak ada pilihan maximize pada window
sizing buttons seperti yang ditunjukkan pada gambar dibawah ini.

Gambar 15. Window sizing button pada halaman registrasi

Kekurangan lainnya yang ditemukan pada form registrasi adalah kedekatan
dalam penulisan point registrasi dengn text boxes. Sebaiknya pada penulisan point
registrasi digunakan rata kanan terhadap text boxes. Hal ini dimaksudkan agar
pengguna tidak sulit untuk melihat text box untuk bagian apakah yang sedang
mereka isi.

12
 Gambar 16. Tampilan form Registrasi
Saran untuk form registrasi yaitu sebaiknya untuk format tanggal diberikan
dalam bentul list, sehingga pengguna hanya perlu memilih saja. Karena untuk
pengisian format tanggal menggunakan text box memungkinkan terjadi kesalahan
dari pengguna.
Kesalahan lain yang ditemukan adalah pada bagian akhir form registrasi hanya
terdapat satu button, yaitu submit. Umumnya saat melakukan proses registrasi
pengguna akan menemui dua buah button, yaitu submit dan reset atau cancel

Gambar 17. Button pada form registrasi

Sebaiknya untuk kesalahan-kesalahan diatas segera diperbaiki agar web ini
terlihat makin profesional.

2.2.13 Login
Login merupakan sebuah menu yang dapat membawa pengguna yang sudah
teregistrasi untuk dapat mengakses fitur-fitur tertentu dalam sebuah web. Web
Liputan 6 memiliki form login yang akan digunakan jika pengguna ingin
memberikan komentar atau mengirimkan berita kepada orang lain.
Form login yang disediakan pada web ini terbilang sederhana, sama seperti web
lainnya. Satu kekurangan yang muncul adalah penulisan kata login di tempat yang
seharusnya bertuliskan username. Form login ini juga telah menyediakan pilihan
daftar untuk pengguna yang belum teregistrasi serta lupa password.

Gambar 18. Form Login

2.2.14 Screen resolution

Salah satu hal penting yang harus diperhatikan oleh pengembang web adalah
mengenai lebar (width) halaman web. Statistik menunjukkan bahwa kebanyakan

13
 komputer pengguna saat ini memiliki resolusi 800 x 600 atau 1024 x 768 piksel.
Kecendrungan saat ini menunjukkan bahwa resolusi 1024 x 768 piksel akan menjadi
resolusi yang paling kecil di masa mendatang. Jika lebar dari halaman web melebihi
resolusi komputer pengguna, maka ketika pengguna mengakses halaman web,
pengguna harus melakukan scrolling ke samping untuk melihat seluruh konten. Hal
ini tentu saja kurang bagus karena pengguna membutuhkan usaha yang lebih untuk
mendapatkan informasi dari web. Bisa-bisa, bukannya tetap mencoba scrolling ke
samping, tetapi pengguna malah memilih untuk meninggalkan web. Kalau sudah
begini, pemilik web juga yang menanggung kerugiannya.
Sebagian pengembang menyiasati masalah ini dengan membuat lebar halaman
web sesuai dengan ukuran terkecil resolusi monitor saat ini yaitu 800 piksel atau
lebih kecil dari itu. Harapannya adalah agar semua komputer pengguna dapat
menampilkan halaman web tanpa harus scrolling ke samping. Pengembangan web
Liputan 6 telah cukup baik dalam memperhatikan faktor screen resolution yang
telah dibahas di atas.

2.2.15 Text image

Text image biasanya digunakan oleh pengembang web untuk membuat tombol.
Text image biasanya juga digunakan untuk membuat font-font yang tidak standar di
web browser sehingga hal-hal yang berkenaan dengan browser compatibility dapat
diatasi. Walaupun penggunaan text image dapat mengatasi masalah browser
compatibility, penggunaan text image menimbulkan beberapa masalah, antara lain :
 File gambar dapat menyebabkan pembengkakan ukuran file. Sebagian besar
pengguna web di dunia masih menggunakan koneksi dial-up dan tidak sabar jika
loading dari web yang dibuka sangat lambat. Hal ini menyebabkan pengguna
akan meninggalkan web sebelum loadingnya selesai.
 Text berbasis gambar tidak dapat dipilih sehingga pengguna tidak mungkin
melakukan copy and paste.
 Text berbasis gambar tidak dapat diubah ukurannya, padahal sebagian pengguna
melakukan perubahan ukuran pada browsernya agar lebih mudah membaca
informasi yang ada di web.
 Informasi yang ditampilkan dengan menggunakan text berbasis gambar tidak
akan muncul jika pengguna mematikan pilihan load image pada browsernya.
Sebagian pengguna mematikan pilihan load image karena alasan koneksi. Jika
image tidak diload maka halaman web akan ditampilkan lebih cepat dan
bandwidth yang digunakan akan jauh lebih hemat; terutama untuk pengguna
yang mengakses web dengan koneksi yang mengharuskannya membayar per- kb
terhadap bandwidth yang digunakannya.
Pengembang web Liputan 6 dapat dikatakan kurang baik dalam menerapkan
text image dalam web nya. Hal ini terlihat dari content web yang hampir sebagian
besar memuat gambar. Bahkan untuk menu-menu berita yang ada dibuat dengan
menggunakan image. Hal ini membuat pengguna yang menggunakan text browser
atau yang mematikan fungsi load image pada browsernya akan kesulitan untuk
mengidentifikasi menu-menu tersebut. Sehingga pengguna tidak dapat mengakses
berita yang dibutuhkannya. Ditambah lagi, menu-menu tersebut tidak menyediakan
alternate text untuk menggantikan image yang mungkin tidak muncul. Kondisi ini
diperlihatkan pada gambar dibawah ini :

14
 Gambar 19. Tampilan web Liputan 6 saat fungsi load images dimatikan
Untuk mengatasi hal seperti ini, sebaiknya pengembang web menyediakan
alternate text untuk menggantikan images yang tidak tampak. Sehingga tidak akan
membuat pengguna frustasi dan meninggalkan web ini.

2.2.16 Penggunaan white space

White space adalah bagian halaman web yang tidak memiliki text atau ilustrasi
apapun. White space sangat penting dalam perancangan halaman web karena
memudahkan pengguna untuk memproses informasi dengan baik. Sebuah web yang
memiliki sedikit white space akan menyulitkan pengguna untuk mengidentifikasi
informasi yang penting. Sebaliknya, penggunaan white space yang terlalu banyak
juga kurang bagus karena halaman web akan terkesan kosong. Pengembang web
harus menyeimbangkan proporsi white space dengan konten yang ada, artinya white
space jangan terlalu sedikit tetapi juga tidak terlalu banyak sehingga
pengelompokan informasi dapat dilakukan dengan baik.
Pada web ini, pengembang terlalu banyak menggunakan white space pada
beberapa halaman yang memang menampilkan informasi sedikit. Hal ini disebabkan
karena pada bagian kanan terdapat sub menu yang selalu ada ditiap halaman web
Liputan 6. Hal inilah yang menimbulkan kesan kosong pada halaman-halaman
dengan informasi sedikit. Space yang kosong ini sebaiknya digunakan secara
maksimal oleh pengembang web untuk menampilkan informasi lain.

White space

Gambar 20. White space pada halaman web Liputan 6

2.2.17 Kesalahan bahasa

Bahasa merupakan salah satu hal penting untuk menyampaikan ide kepada
orang lain. Pada web, selain untuk menyampaikan informasi kepada pengguna,
bahasa juga mencerminkan profesionalitas serta bagus atau tidaknya sebuah
perusahaan. Oleh karena itu, tata bahasa sebaiknya menjadi perhatian yang tidak
kalah penting selain perancangan tampilannya. Pada web Liputan 6, terdapat

15
 kesalahan tata bahasa yang cukup sepele, tetapi sayangnya terdapat pada bagian
yang penting.
Kesalahan tata bahasa yang dijumpai yaitu pada bagian search. Dibawah search
box tertulis Advance Search, padahal semestinya yang tertulis adalah Advanced
Search. Hal ini dapat dilihat pada gambar dibawah ini :

Gambar 21. Kesalahan bahasa pada bagian search

Kesalahan lain yang ditemukan yaitu pada form registrasi. Salah satu poin yang
harus diisi adalah nomor telepon pengguna. Tetapi yang tertulis disana adalah
telefon, seperti yang ditunjukkan gambar dibawah ini :

Gambar 22. Kesalahan bahasa pada form registrasi

Kesalahan yang terjadi di atas memang sangat sepele. Tapi sekali lagi, karena
kesalahan tersebut terjadi pada bagian yang penting, maka kesalahan ini akan
mengurangi penilaian pengguna terhadap web dan juga Liputan 6. Sebaiknya,
kesalahan-kesalahan kecil seperti ini dapat dihindari ketika merancang sebuah web
dan dapat segera diperbaiki.

2.2.18 Penyesuaian font dan warna

Prinsip utama dalam menentukan font dan warna dalam satu halaman web
adalah berupaya untuk membatasi font-style dan warna yang digunakan. Font-style
sebaiknya digunakan secara menyatu dan efektif serta mampu menggambarkan
hirarki yang ada pada halaman web. Pembedaan font dan attribut font biasanya dapat
membantu pengguna untuk membedakan tingkat kepentingan sebuah heading dan
informasi. Jumlah typefaces maksimal dalam satu halaman web yang dianjurkan
adalah tiga typeface. Sementara untuk ukutan font maksinal adalah tiga jenis.
Sejalan dengan penggunaan font, penggunaan warna juga sebaiknya tidak terlalu
beraneka ragam dalam satu halaman web. Jumlah jenis warna maksimal dalam satu
halaman web yang dianjurkan adalah empat warna.
Penggunaan font dan warna pada web Liputan 6 telah dapat menggambarkan
hirarki yang terdapat pada halaman web. Pengembang menggunakan ukuran font
dan warna yang berbeda untuk menandakan sebuah text merupakan heading atau
informasi. Pada setiap halaman web, heading selalu dibuat dengan ukuran yang
lebih besar dan warna yang berbeda. Dengan adanya pembedaan ini, maka
pengguna dapat dengan mudah membedakan tingkat kepentingan informasi yang
disampaikan. Kondisi ini dapat dilihat pada gambar berikut ini :

Gambar 23. Ukuran dan warna font pada heading dan informasi

16
 Akan tetapi masih saja terdapat sedikit kekurangan penggunaan font dan warna
pada web Liputan 6 ini. Hal ini dapat dilihat dari ukuran text yang masih terlihat
kecil dan sedikit sulit terbaca. Padahal ukuran text sangat menentukan apakah
sebuah content dapat dibaca dengan mudah oleh pengguna atau tidak. Pada kasus
ini, pengembang tidak menyediakan fitur untuk memperbesar atau memperkecil text
sesuai dengan kebutuhan pengguna. Hal ini membuat pengguna harus memperbesar
web jika ingin memperjelas tulisan yang ada. Padahal memperbesar halaman web
justrru membuat web terlihat berantakan. Akan lebih baik pengembang
menyediakan fitur untuk memperbesar atau memperkecil tulisan pada web ini.
Selain itu, masih terdapat masalah dalam penggunaan warna. Untuk text yang
berisi informasi, di web Liputan 6 ini digunakan tulisan bewarna hitam sedangkan
untuk link, sudah sesuai dengan aturan baku, yaitu menggunakan warna biru. Akan
tetapi, warna biru yang digunakan untuk link terlalu tipis, bahkan hampir mendekati
hitam. Hal ini memungkinkan pengguna keliru apakah itu link atau hanya text biasa.
Sebaiknya penggunaan warna biru untuk link lebih dipertegas, sehingga tidak
menimbulkan keragu-raguan pengguna.

2.2.19 Text yang terlihat seperti link

Konvensi umum pengguna menunjukkan bahwa text yang berwarna biru atau
berwarna biru dan digarisbawahi merupakan sebuah link. Pada web ini, terdapat
beberapa text yang berwarna biru padahal bukan link, misalnya pada heading di
setiap halaman, judul berita, dan lain-lain. Hal ini diperlihatkan pada gambar di
bawah ini :

Gambar 24. Text yang terlihat seperti link

Gambar 25. Judul Berita terlihat seperti link

Berdasarkan gambar di atas, text “HEADLINE” serta judul berita yang
berwarna biru bukan merupakan sebuah link. Pengembang sebaiknya mengubah
style untuk text tersebut, karena warna biru sebaiknya hanya digunakan untuk
menandakan bahwa text tersebut adalah sebuah link.

2.2.20 Pop-up windows

Ketika pengguna mengklik suatu link atau button, umumnya mereka
mengharapkan suatu halaman web baru yang akan muncul menggantikan halaman
sebelumnya. Pengembang seringkali melakukan hal seperti ini untuk menjaga agar
pengguna selalu tetap berada pada halaman web mereka.
Pop-up windows biasanya membuat pengguna merasa terganggu dengan pop-up
windows dan sebagian ada yang menginstall software untuk memblock pop-up
windows ini. Penggunaan pop-up window seringkali menjadi sebuah alasan bagi
pengguna untuk segera meninggalkan web tersebut karena pop-up sering memiliki
konotasi buruk bagi pengguna. Kadang pengguna bisa langsung menutup pop-up
window bahkan sebelum membaca isinya.

17
 Pada web Liputan 6 sering dijumpai pop-up window saat kita mengklik button
tertentu, misalnya video. Sebagaimana yang telah dijelaskan di atas, hal ini akan
membuat pengguna meninggalkan web jika terus menerus menemui hal ini.
Sebaiknya, pengembang web Liputan 6 mengurangi penggunaan pop-up windows
dalam web ini.

2.2.21 Plug-ins
Sebuah web dapat kehilangan pengguna potensial apabila mereka menolak
untuk mendownload pug-ins lainnya atau software untuk menggunakan web
tersebut. Biasanya saat pengguna menghadapi download dialog, mereka cenderung
akan memilih cancel. Karena pengguna takut akan terkena virus dan mereka tidak
ingin menunggu untuk mendownload.
Dalam web Liputan 6, pengguna diharuskan memiliki Flash player untuk dapat
melihat video berita. Hal ini dapt menghambat keinginan pengguna yang memang
perlu untuk melihat tayangan-tayangan tersebut. Sebaiknya pemuatan video tersebut
menggunakan format pemutaran video yang umum, sehingga tidak menyulitkan
pengguna yang ingin melihatnya.

2.2.22 Icon
Icon adalah grafik dalam sebuah antarmuka yang digunakan untuk
mengkomunikasikan informasi kepada pengguna dengan mengekspresikan atribut
obyek, aksi atau perintah, dan tipe pesan.
Tipe icon ada tiga macam yaitu
 Resemblance, yaitu icon yang memperlihatkan atau mewakili obyek yang
direpresentasikannya.
 Abstract, yaitu sebuah representasi abstrak dari apa yang ingin disampaikan
 Exemplar, yaitu sebuah imej yang menggambarkan contoh atau karakteristik
dari sesuatu
 Arbitrary, yaitu icon yang tidak langsung berhubungan, untuk memahaminya
perlu ada proses pembelajaran.
 Analogy, yaitu icon yang secara fisik atau semantik memiliki hubungan dengan
sesuatu
Pada web Liputan 6 terdapat penggunaan icon untuk menggambarkan beberapa
pilihan menu. Icon yang sering terlihat di web ini adalah icon untuk menu video,
detail dan komentar. Icon-icon ini merupakan icon yang beripe arbitrary, karena
perlu ada suatu proses pembelajaran untuk dapat menerima icon-icon tersebut
sebagai lambang dari masing-masing menu. Pada dasarnya, penggunaan icon di web
Liputan 6 sudah cukup bagus walaupub masih ada sedikit kekurangannya.
Kekurangan yang dimaksudkan adalah salah satu bentuk icon, yaitu icon untuk
button detail, menyerupai icon yang sering digunakan untuk menu search.
Sebaiknya icon yang sudah sering digunakan seperti itu tidak lagi digunakan untuk
melambangkan hal-hal lainnya. Karena pengguna yang menemukan icon tersebut
akan lebih mengingat icon tersebut sebagai lambang dari suatu hal yang lebih dulu
dikenalkan. Saran untuk itu, sebaiknya icon pada button detail diganti dengan icon
yang lain yang tetap dapat mewakili hal yang dimaksud.

18
 Gambar 26. Icon pada button detail
Permasalahan lain yang ditemukan dalam penggunaan icon di web ini adalah
masih ada icon yang sama untuk menggambarkan dua jenis hal yang berbeda.
Misalnya untuk sub menu catatan produser dan liputan khusus. Keduanya memiliki
icon yang sama, padahal content yang ditampilkan tentu saja berbeda. Sebisa
mungkin hal seperti ini harus dihindari oleh pengembang web.

Sub menu berbeda, icon

sama

Gambar 27. Icon sub menu liputan khusus dan catatan produser

2.2.23 Tampilan Text

Untuk menampilkan text dalam satu halaman web terdapat beberapa aturan
umun yang harus dipenuhi. Diantaranya adalah jumlah karakter dalam setiap baris
hendaknya tidak lebih dari 40-60 karakter. Penulisan text tidak boleh rata kanan,
karena akan menyulitkan pengguna untuk membacanya.
Pengguna web seringkali malas jika dihadapkan pada persoalan scrolling.
Apalagi scrolling horizontal (menyamping) yang lebih sulit dilakukan. Pengguna
yang menemui kasus ini pada umumnya akan segera meninggalkan web tersebut.
Untuk mengatasi penggunaan scrolling horizontal, biasanya pengembang web
membatasi jumlah informasi yang disajikan kesamping. Umumnya dalam satu baris
informasi yang ditampilkan hanya sebanyak 8-10 kata.
Pada web Liputan 6, tidak ditemukan halaman yang memerlukan scrolling
horizontal. Karena dalam penyajian berita sudah digunakan batasan untuk jumlah
kata per baris. Hal ini akan lebih memudahkan pengguna, karena pengguna tidak
akan dipaksa untuk melakukan hal yang kurang disukai.

2.2.24 Relative specification

J. Nielsen menyarankan agar ukuran teks menggunakan sebuah skema ukuran
relatif (misalnya menggunakan persentase) dibandingkan memberikan ukuran tetap.
Contohnya, penggunaan ukuran headline text 140% lebih baik dari penggunaan
ukuran headline text 14-point type. Jika ukuran yang digunakan adalah ukuran
140%, maka headline akan tetap terlihat lebih besar dari teks yang lain seandainya
pengguna memperbesar tampilan teks. Sebagian pengembang web menggunakan
unit pengukuran mutlak untuk menentukan ukuran teks yang digunakan. Hal ini
menyebabkan pengguna tidak mungkin mengubah ukuran teks. Ukuran teks yang
tidak bisa diubah akan menyebabkan sebagian pengguna sulit untuk membaca
informasi yang ada di web. Ukuran teks pada web Liputan 6 masih menggunakan
ukuran point-type yang ditulis pada file CSS.

2.2.25 Indikator ‘>>’

Indikator ‘>>’ biasanya digunakan untuk mempertegas sebuah link. Pada web
Liputan 6 seringkali ditemukan indikator ‘>>’. Akan tetapi tidak semua indikator
‘>>’ merupakan tanda bagi sebuah link. Misalnya pada menu-menu berita yang
terdapat pada bagian bawah beberapa halaman. Akan tetapi, pada bagian-bagian
tertentu indikator ‘>>’ sudah tepat digunakan sebagai link.

19
 Bukan link

Gambar 28. Indikator ‘>>’ bukan link

Link

Gambar 29. Indikator ‘>>’ merupakan link

2.2.26 Page title

Sebuah page title haruslah menunjukkan kata-kata berarti, dimana kata
pertamanya merupakan penjelasan yang paling penting. Page title harus berbeda
antara halaman satu dengan halaman yang lainnya dan penulisannya menggunakan
mixed case. Page titles harus didesain untuk menampilkan informasi yang berguna.
Jika memungkinkan, biasanya page title berisi banyak kata. Ketika sebuah page title
berisi 60 karakter, harus bisa dipastikan bahwa 40 karakter pertama cukup untuk
menjelaskan topik pada halaman tersebut. Page title seringkali dipotong dari menu
navigasi dan digunakan dalan fasilitas search. jika sebuah page title bersumber pada
dua topik yang sama, maka dia harus diawali dengan kata yang sama, tetapi akhir
dari page title harus bisa menjelaskan perbedaan antara keduanya.
Penggunaan page title di web Liputan 6 dapat dikatakan cukup baik. Pada saat
pengguna mengunjungi sub menu yang ada mereka akan dengan segera mengetahui
di mana mereka berada. Permasalahan yang muncul adalah saat pengguna
mengunjungi menu-menu utama, page title yang digunakan tidaklah berbeda. Hal
ini dapat membingungkan pengguna. Sebaiknya penggunaan page title harus diatur
agar tidak terjadi kesamaan page title untuk halaman yang berbeda.

2.2.27 Penggunaan bullet list yang kurang tepat

List digunakan untuk menampilkan informasi secara berurutan agar mudah
dibaca oleh pengguna. Pada web ini, penggunaan bullet kurang tepat untuk list yang
terdapat pada halaman site map seperti diperlihatkan pada gambar berikut ini :

Gambar 30. Penggunaan bullet list yang kurang tepat

Pada gambar di atas, bullet yang digunakan menyerupai radio button sehingga
pengguna mungkin akan bertanya-tanya apakah itu radio button atau hanya sebuah
bullet. Sebaiknya bullet ini diganti dengan bullet lain sehingga tidak menimbulkan
anggapan yang salah dari pengguna.

20
2.2.28 Update Content
Analisis pertama terhadap www.liputan6.com dilakukan pada tanggal 31 Mei
2008 untuk menganalisis apakah web tersebut tergolong kepada web suck atau
tidak. Karena liputan 6 merupakan situs dari sebuah tayangan berita, maka sudah
sewajarnya jika proses update dilakukan hampir setiap saat.
Sesuai dengan jargon yang diajukannya, yaitu tajam terpercaya, Liputan 6
memang dapat dipercaya sebagai salah satu penyaji berita terlengkap serta tercepat.
Karena hampir setiap saat headline yang disajikan pada halaman utama Liputan 6
selalu berubah. Hal ini menunjukkan tingginya tingkat pergantian berita aktual di
situs ini.
Selain itu, pada setiap berita yang dimuat di web Liputan 6 ini, terdapat waktu
dimasukkannya berita tersebut. Sehingga pengguna akan selalu dapat melihat
apakah berita yang diturunkan adalah berita terbaru atau tidak.
Tanggal dan waktu upload berita

Gambar 31. Waktu saat upload content

2.2.29 Terlalu banyak gambar

Penggunaan gambar yang terlalu banyak dalam sebuah web akan membuat web
tersebut sulit untuk di akses lebih cepat. Sebaiknya penggunaan gambar dalam
sebuah halaman dibatasi sehingga tidak membuat pengguan kesal dan meninggalkan
situs karena terlalu lama menunggu. Penggunaan gambar pada web Liputan 6 dapat
dibilang sangat banyak, karena hampir di setiap bagian halaman terdapat gambar.
Hal ini tentu saja membuat waktu yang di butuhkan untuk me-load halaman menjadi
lebih lama. Sebaiknya pengembang web Liputan 6 mengurangi atau membatasi
penggunaan gambar di setiap halaman web ini.

2.2.30 Error Messages

Penyediaan error messages sangat membantu untuk data yang salah atau tidak
lengkap dimasukkan. Error message juga digunakan apabila dokumen yang diminta
tidak ada atau tidak bisa ditemukan. Error message biasanya ditampilkan dalam
sebuah message box yang menutupi halaman yang membuat error. Message box ini
akan menunjukkan dimana letak kesalahan sehingga menimbulkan error message
ini. Error message ini akan ditampilkan hingga pengguna menyadari dimana letak
kesalahannya. Dalam sebuah halaman web, menunjukkan error message pada
halaman yang terpisah akan menyelesaikan resiko yang disebabkan oleh error pada
halaman tersebut. Memori manusia menjadi sebuah solusi yang mungkin untuk
masalah yang ada dari sebuah program yang detailnya tidak jelas. Resolusi masalah
dengan menunjukkan halaman web yang terkait merupakan suatu hal yang tidak
efisien.
Solusi lain untuk menampilkan error message adalah langsung pada halaman
dimana error tersebut terjadi. Ini adalah pilihan yang direkomendasikan. Sehingga
keadaan akan terjaga dan kedua elemen dapat ditampilkan dengan jelas
kedekatannya. Sebuah pesan yang ditampilkan dengan style yang biasa tidak akan
terlihat sebagai suatu peringatan. Sehingga error message harus ditampilkan dalam
sebuah tampilan khusus yang sedekat mungkin dengan masalahnya. Tampilan
khusus ini dapat diperlihatkan melalui tampilan pesan yang lebih besar,
menggunakan border, ataupun huruf-huruf khusus. Dengan begitu, perhatian

21
pengguna akan mengarah pada bagian dimana tindakan dapat dilakukan., jadi pesan
harus dibuat sejelas mungkin. Bagaimanapun, lebih baik untuk mencegah kesalahan
dibandingkan mengatasinya.
Pada web Liputan 6, error message ditampilkan pada saat proses registrasi,
lupa password, ataupun login.

Gambar 32. Error message

22
 BAB 3
PENUTUP

3.1 Kesimpulan
Web usability adalah salah satu faktor penting dalam mengembangkan sebuah web.
Pengembang harus memahami prinsip-prinsip usability sebelum mengimplemen-tasikannya
pada sebuah web. Web merupakan salah satu media perusahaan untuk mempromosikan
perusahaannya. Pengembangan web perusahaan bertujuan untuk meningkatkan rasa
kepercayaan pengguna/pelanggan terhadap perusahaan.
Pada pengembangan web Liputan 6 masih terdapat banyak kekurangan menyangkut
masalah usability. Kekurangan-kekurangan yang ditemukan pada web ini, antara lain :
penggunaan bordfer, inkonsistensi desain, penempatam menu-menu, penggunaan link beserta
aturannya, pemakaian bullet list yang kurang tepat, kesalahan bahasa, penggunaan white space
yang terlalu banyak serta penggunaan text image untuk bagian yang penting. Kekurangan-
kekurangan ini membuat web terlihat kurang profesional. Kondisi ini dapat membuat
kepercayaan pengguna/pelanggan terhadap perusahaan berkurang.
Selain kekurangan-kekurangan yang telah dijelaskan, ada juga nilai positif yang
ditemukan di web ini. Faktor-faktor positif tersebut antara lain : penentuan ukuran lebar web
secara dinamis, penempatan menu utama pada bagian atas web, serta memperhatikan efek
penggunaan scrolling.
3.2 Saran
Makalah ini diharapkan menjadi bahan masukan bagi pengembang untuk
mengembangkan web Liputan 6 dengan lebih memperhatikan faktor-faktor usability.
Kekurangan-kekurangan yang masih ditemui, sebaiknya segera diperbaiki agar web dapat
terlihat profesional. Dengan demikian, kepercayaan pengguna/pelanggan terhadap Liputan 6
akan meningkat.

23
 DAFTAR PUSTAKA

Galitz, Wilbert O. 2002. The Essential Guide to User Interface Design: An Introduction to GUI
Design Principles and Techniques, Second Edition. John Wiley & Sons.
Nielsen J & Loranger H. 2006. Prioritizing Web Usability. Berkeley : New Riders.
www.webpagesthatsuck.com

24