Kajian Situs
http://www.liputan6.com
oleh:
Nadya Nurul Hasanah
G14052014
(http://nadyaja.wordpress.com)
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
BAB 2
ANALISIS WEB LIPUTAN 6
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
Pilihan detail
menghilang
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
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
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
6
Space Iklan (tidak muncul, tetapi pada halaman situs aslinya terdapat iklan)
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
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
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.
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
11
Gambar 14. Pengelompokkan link
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
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.
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.
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.
White space
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 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.
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.
Gambar 27. Icon sub menu liputan khusus dan catatan produser
19
Bukan link
Link
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
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.
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