2008. Kajian Situs

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 popup 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 masingmasing 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 lainlain 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 812 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. Kekurangankekurangan 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