Bagian 3: Kesalahan yang Menyebalkan

Sebagai referensi, Penulis menggunakan www.useit.com dan www.webpagesthatsuck.com. Kedua situs ini membahas tentang usability, user experience, dan user interface dalam web. Ketiga hal ini dianggap hal yang sangat penting untuk diperhatikan dalam pembuatan dan pengembangan sebuah situs web.

Top Ten Web-Design Mistakes

Dari www.useit.com, didapatkan artikel tentang Top Ten Web-Design Mistakes (Sepuluh Besar Kesalahan dalam Web-Design) yang ditulis oleh Jakob Nielsen dalam Alertbox (http://www.useit.com/alertbox/9605.html). Tulisan ini adalah hasil pengamatannya sejak tahun 1996, dan telah diperbarui di tahun 2007. Kesalahan-kesalahan tersebut meliputi (1) bad search, (2) PDF files for online reading, (3) not changing the color of visited links, (4) non-scannable text, (5) fixed font size, (6) page titles with low search engine visibility, (7) anything that looks like an advertisement, (8 ) violating design conventions, (9) opening new browser windows, dan (10) not answering users’ questions. Berikutnya hal-hal yang dianggap sebagai kesalahan tersebut akan dijelaskan satu per satu serta analisis kesalahan tersebut pada www.yamaha-motor.co.id.

1. Bad Search – search engine yang payah.

Pencarian adalah harapan terakhir pengguna saat gagal mengartikan navigasi web atau saat terjadi kesalahan. Meskipun terkadang pencarian yang rumit kadang membantu, namun pencarian yang lebih simpel akan lebih berhasil. Pencarian yang baik biasanya direpresentasikan dalam sebuah kotak (input box) yang mudah dilihat oleh pengguna.

Dalam www.yamaha-motor.co.id, search engine tidak berfungsi dengan baik. Memang search engine ditempatkan di setiap halaman di paling atas, namun sama sekali tidak berguna karena pengguna tidak dapat menggunakannya. Lalu ada beberapa pencarian yang tidak dapat langsung diakses dari halaman depan, yaitu pencarian toko yang menjual produk atau spare parts Yamaha, dimana pencarian tersebut harus diakses dari menu Network, dimana biasanya menu Network berisi link ke cabang-cabang Yamaha lainnya di Indonesia atau di dunia.

2. PDF Files for Online Reading – file PDF untuk dibaca di halaman online.

Pengguna tidak menyukai membaca dalam file PDF secara online karena melambatkan pergerakan mereka. Lebih buruk lagi, menurut Nielsen, PDF adalah sebuah gumpalan yang menyebalkan dan sulit untuk dikendalikan dan melambatkan sistem.

Dalam artikel lainnya yang membahas keburukan PDF untuk dibaca secara online, banyak pengguna yang mengeluh saat harus mendownload PDF untuk mendapatkan informasi yang penting. Mereka mengatakan bahwa PDF melambatkan sistem mereka dan mereka lebih menyukai format dalam bentuk HTML. Lebih buruk lagi kalau tidak ada logo “PDF” atau keterangan apapun bahwa file tersebut adalah file PDF saat pengguna merasa perlu harus mendownloadnya.

PDF digunakan untuk mendownload Parts Catalogue dalam menu Yamaha Inside. Tidak ada logo PDF, satu-satunya keterangan bahwa file tersebut berbentuk PDF adalah tulisan yang sangat kecil dengan warna hampir transparan. Sangat mungkin ada pengguna yang tidak meyadarinya hingga mereka mendownloadnya dan menyesal saat PDF tersebut melambatkan sistem mereka. Terlebih lagi, tidak ada pilihan versi lain untuk pengguna, misalnya saja dalam bentuk HTML atau word-text.

3. Not Changing the Color of Visited Links – tidak adanya perubahan warna pada halaman yang telah dikunjungi.

Pemahaman yang baik yang dimiliki seseorang tentang navigasi akan membantu dalam pemahaman tentang “lokasi saat ini” dalam web. Mengetahui halaman-halaman mana saja yang sudah pernah dikunjungi akan memudahkan pemutusan halaman mana yang selanjutnya akan dikunjungi. Kegunaan pengubahan warna bagi link yang sudah pernah dikunjungi yaitu menghindari pengunjungan kembali atau revisiting secara berkali-kali pada halaman web yang sama.

Hal ini tidak diterapkan di www.yamaha-motor.co.id. Tiap-tiap halaman dalam web ini didesain dengan background berwarna gelap sehingga pengubahan warna pada link yang sudah pernah dikunjungi menjadi sulit dilakukan. Pewarnaan background sangat perlu mendapat perhatian agar suatu situs web dapat menerapkan prinsip-prinsip usability dengan baik.

4. Non-Scannable Text – teks yang tidak dapat diamati.

Tulisan yang banyak akan membuat seseorang merasa diintimidasi, membosankan, dan merasa pusing saat membacanya. Menulis di web adalah menulis di web, bukanlah untuk diprint dan dijadikan sebagai dokumen cetak yang memerlukan efisiensi tempat agar dapat menghemat kertas. Beberapa kriteria tulisan online adalah mempunyai judul, terditi atas poin-poin (bulleted), kata-kata kunci yang di-highlight, paragraf-paragraf pendek, berbentuk piramida terbalik, dan menggunakan gaya yang simpel.

Tulisan di www.yamaha-motor.co.id dapat dikategorikan cukup baik karena relatif tidak terlalu panjang dan tidak membosankan untuk dibaca. Hanya saja, tulisan-tulisannya tidak mengandung informasi yang menarik dan cenderung tidak terlalu penting.

5. Fixed Font Size – ukuran dan jenis huruf yang tetap.

Penggunaan ukuran dan jenis huruf yang sesuai sangtlah penting untuk mengantisipasi pembaca yang berusia lanjut. Ukuran font yang baik dalam web adalah fleksibel, yaitu dapat diubah sesuai kebutuhan pengguna.

Pada www.yamaha-motor.co.id, jenis dan ukuran tulisan sudah cukup baik namun hanya bermasalah dengan penggunaan warna dan tidak adanya perbedaan antara link dan bukan link.

6. Page Titles With Low Search Engine Visibility – judul halaman yang sulit dicari.

Halaman yang sukar dicari merupakan salah satu kriteria situs yang buruk. Banyak pengguna yang tidak memiliki banyak waktu untuk satu per satu membuka menu pada sebuah situs. Mereka akan menggunakan search engine dalam situs tersebut, mengetikkan kata kunci hal yang mereka cari, kemudian dengan informasi yang tersedia mereka baru mengeksplornya. Atau mereka akan menggunakan search engine pada web browser seperti Google, Wikipedia, atau Yahoo! untuk mencari situs yang mereka butuhkan. Untuk itu, penggunaan nama yang tepat adalah sesuatu yang penting. Sebaiknya judul tidak menggunakan kata “The” atau “Welcome” karena dalam susunan alfabetis kata-kata tersebut akan menempati urutan bawah. Hal ini tentu saja sangat tidak menguntungkan bagi organisasi pemilik web.

Pada kasus ini, situs Yamaha menggunakan tanda “-::-“ di awal judul web mereka. Mungkin ini adalah cara curang, namun hal ini menjadikan situsnya menjadi urutan pertama jika seseorang mem-bookmark situs ini.

Berdasarkan kedua gambar diatas, dapat diprediksikan ternyata Web Yamaha telah memikirkan hal ini sebelumnya. Meskipun cara yang mereka gunakan agak curang, namun nyatanya web mereka berhasil menduduki urutan pertama pada urutan bookmark.

7. Anything That Looks Like an Advertisement – sesuatu yang mirip seperti iklan.

Usaha agar menarik perhatian adalah baik. Namun sekarang para pengguna web sudah tidak lagi memerlukan hal seperti itu, karena mereka lebih menyukai hal yamg simpel agar tidak mendapat gangguan yang menghambat proses pencapaian tujuan mereka. Gangguan yang sering terjadi misalnya proses pencarian menjadi lambat. Jadi, jika tujuan akhir kita adalah pengguna, maka segala sesuatu dalam sebuah situs yang sangat eye-catching akan menadi sesuatu yang percuma dan tidak efektif. Dan memang tujuan akhir kita adalah untuk memenuhi kebutuhan pengguna, bukanlah keindahan yang terlalu berlebihan.

Jika memang berniat melakukan advertising dalam web, maka hal-hal yang harus diperhatikan saat penyampaian promosi adalah:

• Banner blindness, yaitu tidak menyerupai iklan. Dalam dunia web, hal-hal yang terlalu ramai dan menyerupai iklan justru dihindari oleh para penguna.
• Menghindari animasi-animasi berlebihan, seperti flash atau tulisan atau gambar yang berkedip.
• Pop-up, dimana kebanyakan pengguna biasanya sesegera mungkin menutup pop-up sebelum seluruh isinya muncul dengan sempurna.

Pada www.yamaha-motor.co.id, di halaman Home terdapat 3 buah banner kecil yang berfungsi sebagai iklan yang tidak memiliki kekonsistenan. Dua diantaranya merupakan link ke web lainnya, namun yang di tengah-tengah samasekali bukanlah link, hanya bersifat dekoratif saja. Masih di halaman yang sama, ada satu lagi banner besar yang berfungsi sebagai iklan dan bersifat dekoratif.

8. Violating Design Conventions – pelanggaran dalam tata cara desain.

Kekonsistenan adalah salah satu hal yang teramat sangat berpengaruh dalam prinsip usability. Hal ini agar orang-orang mudah memprediksi dan tidak merasa takut atau khawatir akan melakukan kesalahan. Mereka akan mengetahui yang akan terjadi berdasarkan pengalaman sebelumnya. Jakob’s Law of the Web User Experience (Hukum Jakob tentang Web User Experience) menyatakan bahwa “pengguna lebih memilih untuk menghabiskan waktunya di situs web lain”. Hal ini berarti jika web sulit digunakan dan menimbulkan ketidaknyamanan bagi pengguna, maka pengguna akan kesulitan dan meninggalkan situs tersebut.

Penulis merasakan hal tersebut, dimana Penulis merasa lebih baik meninggalkan situs Yamaha ini daripada tetap menggunakannya. Memang terdapat kekonsistenan di situs ini, namun kekonsistenan tersebut merupakan kekonsistenan yang tidak nyaman. Misalnya saat membuka menu selain Home, Penulis (sebagai pengguna) harus meng-klik menu di sebelah kiri panel untuk mendapatkan informasi. Terlebih lagi, teks pada menu-menu tersebut tidak dapat di-klik. Yang available untuk di-klik adalah icon folder di sebelah kiri tulisan atau teks tersebut. Bagi Penulis sendiri hal tersebut membuat bingung.

9. Opening New Browser Windows – membuka window baru pada browser.

Pada teorinya, desainer membuat “open new browser windows” agar membuat pengguna tetap berada di halaman tersebut pada saat membuka menu lainnya. Namun kenyataannya hal itu justru merupakan senjata makan tuan, karena pengguna sudah mempunyai cara tersendiri untuk kembali ke halaman sebelumnya, yaitu dengan menggunakan tombol Back pada browser. Jika desainer web menerapkan hal ini, berarti mereka telah menyalahi kebiasaan pengguna. Malahan pengguna sering kali tidak menyadari bahwa telah terbuka window baru saat mereka sedang menggunakan monitor yang kecil.

Ada dua link di situs Yamaha yang bersifat seperti ini, yaitu link yang terhubung ke http://www.vixion-indonesia.com/ dan ke http://www.donitatagp.com/. Link tersebut adalah “banner” pada halaman pertama (menu Home) di situs ini. Selebihnya, tidak ada lagi perilaku semacam ini yang terdapat pada www.yamaha-motor.co.id.

10. Not Answering Users’ Questions – tidak menjawab pertanyaan pengguna.

Pengguna memiliki harapan yang besar dalam sebuah web. Mereka ingin memenuhi kebutuhan mereka, misalnya saja dengan membeli produk. Hal ini akan gagal jika situs web tidak menyediakan apa yang mereka butuhkan. Harga, misalnya, adalah salah satu hal yang krusial dalam web yang menawarkan belanja online.

Dalam situs Yamaha, hal ini tidak terjadi. Untuk produknya, mereka menyediakan informasi yang dirasakan cukup lengkap, termasuk pencantuman harga. Namun mungkin karena mereka tidak bertujuan sebagai situs online shopping atau belanja online, maka tidak ada pilihan cara-cara pembayaran online bagi pengguna yang ingin membeli produknya.

Berdasarkan penjelasan diatas, dapat disimpulkan bahwa dari Sepuluh Besar Kesalahan dalam Web-Design versi Jakob Nielsen, www.yamaha-motor.co.id melakukan 6 kesalahan, yaitu pada kriteria nomor 1 (Bad Search), nomor 2 (PDF Files for Online Reading), nomor 3 (Not Changing the Color of Visited Links), nomor 7 (Anything That Looks Like an Advertisement), nomor 8 (Violating Design Conventions), dan nomor 9 (Opening New Browser Windows). Sedangkan pada nomor 4 (Non-Scannable Text), nomor 5 (Fixed Font Size), nomor 6 (Page Titles With Low Search Engine Visibility), dan 10 (Not Answering Users’ Questions) situs Yamaha juga tidak bisa dibilang selamat, karena hal-hal yang disajikan belum menerapkan prinsip usability dengan maksimal.

Berdasarkan hal-hal tersebut, maka situs ini dapat dikategorikan sebagai situs yang buruk, karena banyak melakukan kesalahan dalam hal usability. Masih banyak perbaikan-perbaikan yang harus dipertimbangkan untuk dilakukan agar situs ini menarik lebih banyak pengunjung dan membuat betah para pengunjung.

Does Your Website Suck?

Untuk lebih meyakinkan lagi, Penulis juga membuat daftar kriteria yang diambil dari www.webpagesthatsuck.com dalam artikel Does Your Web Site Suck? Checklist 1 – 148 ways you’re killing your site (148 cara yang Anda lakukan untuk membunuh situs Anda) dan Does Your Web Site Suck? Checklist 2 – 82 ways you’re maiming your site (82 cara yang Anda lakukan untuk melumpuhkan situs Anda). Artikel tersebut memuat kesalahan-kesalahan yang sering ditemui pada web-web dan sebagai parameter baik atau tidaknya sebuah situs. Caranya yaitu dengan mengecek situs melalui dua buah daftar pernyataan, dimana pernyataan-pernyataan tersebut adalah pernyataan negatif sebuah situs. Jadi, semakin banyak ceklis yang diberikan, berarti semakin buruk sebuah situs.

Ada beberapa pengulangan dari dua daftar pernyataan tersebut. Penulis kemudian merangkum dan menggabungkan kedua daftar tersebut sehingga untuk www.yamaha-motor.co.id terdapat 23 kesalahan yang ditemui, yaitu:

1. Desain pada web tidak memenuhi kebutuhan para pengunjung web.
2. Situs ini tidak membangun kepercayaan pengunjungnya.
3. Situs ini tidak membuang hal-hal yang tidak perlu.
4. Pengelola situs tidak dapat membedakan mana hal yang perlu dan mana yang tidak perlu.
5. Halaman ini mengandung white spaces yang berlebihan.
6. Situs ini berisi hal-hal yang bersifat scrolling, blinking, fading, dan moving text.
7. Pada halaman tertentu ada yang berisi sangat sedikit tulisan.
8. Link yang telah dikunjungi tidak memiliki perubahan warna.
9. Link tidak teridentifikasi dengan jelas.
10. Link tidak informatif.
11. Gambar pada situs membingungkan dan menyerupai iklan.
12. Navigator sistem hanya dimengerti oleh pembuat web.
13. Tidak ada informasi yang jelas tentang keberadaan saat ini.
14. Situs ini tidak menarik.
15. Situs ini tidak mengenal tanggal (banyak artikel lama yang sudah tidak berlaku).
16. Background situs ini tidak berwarna putih atau warna muda lainnya.
17. Situs ini tidak menggunakan tulisan yang berwarna hitam.
18. Sistem pencarian (search engine) situs ini tidak berfungsi.
19. Teks yang bergaris bawah bukanlah link.
20. Tanggal tidak pernah atau jarang diperbarui.
21. Gambar yang disajikan membosankan dan ukurannya relative besar.
22. Judul pada situs ini DIBERI KAPITALISASI.
23. Ukuran font tetap dan tidak dapat diubah.

 

 Sumber Bagian 1, Bagian 2, Bagian 3:

Flanders Enterprises. Does Your Web Site Suck? Checklist 1 – 148 ways you’re killing your site. [15 Juni 2008]

Flanders Enterprises. Does Your Web Site Suck? Checklist 2 – 82 ways you’re maiming your. [15 Juni 2008]

Flanders Enterprises. Biggest Mistakes in Web Design 1995-2015. [16 Juni 2008]

Galitz, Wilbert O. 2007. The Essential Guide to User Interface Design. Indianapolis : Wiley Publishing, Inc.

Nielsen, Jacob. 1997. Difference between intranet and Internet design. [11 Juni 2008]

Nielsen, Jacob. 1997. How people read on the Web. [11 Juni 2008]

Nielsen, Jacob. 2003. Usability 101: Introduction to Usability. [11 Juni 2008]

Nielsen, Jacob. 2007. Banner Blindness: Old and New Findings. [12 Juni 2008]

Nielsen, Jacob. 2007. Fancy Formatting, Fancy Words = Looks Like a Promotion = Ignored. [12 Juni 2008]

Nielsen, Jacob. 2008. How Little Do Users Read?. [16 Juni 2008]

Nielsen, Jacob. 2008. Top Ten Mistakes in Web Design. [16 Juni 2008]

 

 

 

Bagian 2: Website Yamaha

Kali ini saya akan mencoba membuat kajian yang mengarah kepada Official Web milik Yamaha Motor Indonesia, yaitu www.yamaha-motor.co.id. Situs ini menginformasikan kepada pengguna tentang produk Yamaha Motor, gambaran umum perusahaan, produk-produk yang dijual di Indonesia, servis, spare parts, Yamaha Club, kegiatan yang diadakan oleh Yamaha Motor, tips-tips berkendara, dan lain-lain. Secara umum, perkiraan karakteristik pengguna situs ini sebagian besar adalah pengendara motor (khususnya merk Yamaha), orang-orang yang berkepentingan terhadap produk, klub-klub terkait, perusahaan Yamaha, atau orang-orang yang mengikuti kegiatan-kegiatan yang diselenggarakan oleh perusahaan. Menu utama dalam website ini adalah Home, Profile, Yamaha Inside, dan Costumer Forum.

Pembahasan Menu

Home

Tampilan awal situs juga bertindak sebagai menu Home pada situs ini. Komposisi visual pada halaman ini secara umum telah mengikuti aturan ekonomis dalam hal penggunaan font. Definisi ekonomis merajuk pada The Essential Guides, yang menyebutkan bahwa ”Economy, is the frugal and judicious use of display elements to get the message across as simply as possible”. Dengan kata lain, ekonomis berarti menggunakan desain tampilan secara hemat dan bijak dalam rangka penyampaian maksud. Kira-kira hanya terdapat tiga jenis font yang digunakan di halaman ini dan seluruh halaman web, serta divariasikan dengan pengunaan ukuran dan warna yang berbeda pada masing-masing fungsi untuk member penekanan tertentu.

Untuk memudahkan pembahasan, penulis membagi halaman Home kedalam 4 bagian utama. Pembagian dilakukan secara vertikal berdasarkan tiga garis lurus yang seakan-akan membagi halaman ini. Berikutnya akan dijelaskan masing-masing bagian yang terdapat di halaman Home.

1. Bagian Pertama

Bagian pertama dalam menu Home merupakan satu bagian yang berisi logo, pencarian (search), informasi tentang karir, informasi tentang global link Yamaha, informasi tentang site map, dan menu utama. Bagian ini merupakan bagian yang bersifat permanen, yaitu selalu ada disetiap halaman walaupun eksplorasi sedang dilakukan. Bagian ini juga dianggap sebagai navigator utama situs.

Logo hanya bersifat sebagai identitas dan tidak berfungsi sebagai link menuju Home. Namun, seperti yang telah disebutkan bahwa bagian ini merupakan bagian yang tetap atau permanen. Dengan adanya kekonsistenan ini, maka link logo sebagai Home tidak dikhawatirkan menyebabkan pengguna “tersesat”.

Sistem pencarian (Search) dalam situs ini dianggap hanyalah sebagai “hiasan”. Alasan saya berpendapat seperti ini adalah karena sistem ini memang tidak berfungsi. Tidak ada hal yang terjadi atau berubah sedikitpun ketika penulis melakukan pengujian dengan mengetikkan input kata, misalnya “Yamaha” pada input box Search kemudian menekan tombol Enter pada keyboard. Hal yang sama terjadi ketika operasi pencarian dilakukan dengan menekan tombol “Go”. Samasekali tidak terjadi perubahan. Begitu pula yang terjadi ketika saya mengganti kata-kata dalam input box. Selama pengujian sistem pencarian, kata-kata input yang digunakan adalah “Yamaha”, “member”, “promosi”, dan “profil”. Menurut saya, kata-kata tersebut harusnya ada dalam konten situs ini, paling tidak ada satu hasil pencarian (result search) yang dapat ditampilkan.

Link Career berada disamping kanan sistem pencarian. Link ini berkedip dan warnanya berubah-ubah. Warna yang ditampilkan adalah putih, kuning, hijau, biru, abu-abu, dan merah. Kemungkinan besar, perubahan warna ini dimaksudkan untuk menarik perhartian pengguna yang berminat bergabung dan memiliki karir di perusahaan. Saat masuk ke link tersebut, kesan yang pertama timbul adalah pemborosan. Seperti yang terlihat disini terdapat tempat yang sangat mubazir pada body text yang hanya berisi gambar, logo, dan slogan Yamaha, serta sebuah scrolling text “Please select your menu on the left panel”. Ini menimbulkan pekerjaan yang seharusnya tidak perlu dilakukan oleh pengguna, yaitu : (1) membaca scrolling text, (2) meng-klik menu di panel kiri.

Seharusnya web developer situs ini tidak memberikan default pada body text yang kosong, karena bagi Penulis logo dan slogan Yamaha yang nampak merupakan suatu hal yang tidak penting dan tidak berkaitan dengan karir. Penggunaan gambar dirasakan masih relevan, dan tampilan scrolling text “Please select your menu on the left panel” tidak perlu ada kalau disajikan default.  

Hal lainnya yang ditemukan pada halaman ini adalah scrolling vertikal pada halaman web yang dirasakan tidak perlu karena sama sekali tidak terdapat informasi yang memerlukan scrolling. Sama halnya dengan scrolling horizontal, namun ini tidak menjadi masalah karena scrolling horizontal tersebut tidak aktif. Sebagai informasi, scrolling vertikal dan horizontal ini hanya merepresentasikan halaman yang berwarna putih saja (bagian body-text). Mungkin developer web ini menjadikan scroll vertikal sebagai sebuah default pada bagian body-text, sehingga banyak-sedikitnya informasi tidak mempengaruhi keberadaan scroll tersebut. Namun bagi saya, hal ini merupakan sesuatu yang sia-sia. Satu-satunya scrolling yang berguna adalah scrolling window, yang berfungsi untuk memperlihatkan informasi yang berada di bagian bawah halaman.

Kesalahan berikutnya adalah kurangnya petunjuk yang jelas pada menu panel disebelah kiri mengenai apakah itu merupakan menu yang dapat diakses (link) ataukah teks biasa. Dapat dilihat bahwa menu di panel kiri yang tersedia seluruhnya menggunakan warna putih pada setiap font. Petunjuk satu-satunya yaitu hanyalah garis bawah (underline) pada teks yeng berupa link. Bagi saya, seorang web developer sebaiknya menggunakan warna teks yang berbeda pada link. Hal lainnya adalah “petunjuk-petunjuk” diletakkan di tempat dimana seharusnya link-link atau menu berada. Petunjuk tentu saja bukan termasuk menu. Menurut Penulis, sebaiknya petunjuk-petunjuk tesebut diletakkan dalam body-text saja.

Keanehan kembali terjadi. Icon folder pada menu panel di sebelah kiri ternyata merupakan link dan dapat di-klik. Namun, tulisan “Available Vacations” disebelahnya bukanlah link. Kondisi seperti ini bukanlah kondisi umum karena pada umumnya link berupa teks dan bergaris bawah. Hal tersebut dapat menimbulkan kebingungan bagi pengguna. Jika di-klik, icon folder terlihat terbuka dan pada body text ditampilkan informasi berupa lowongan pekerjaan yang tersedia (dapat dilihat disini). Pilihan lowongan tersebut merupakan sub-menu yang apabila di-klik akan muncul keterangan pada body text.

Saya akhirnya menemukan fungsi dari text-box yang sedari tadi tidak berisi informasi yang berarti. Ternyata fungsinya adalah menampilkan informasi dari sub-menu yang ada. Bagi pengguna yang berminat mengisi lowongan pekerjaan disediakan form dalam bentuk .xls dan .pdf. Keduanya dapat di-download sesuai dengan petunjuk yang telah disediakan. Kekurangan yang ditemukan adalah informasi yang disediakan tidak up-to-date (tanggal penutupan lowongan ini adalah 30 Mei 2008, dan tanggal saya mengakses situs ini adalah 9 Juni 2008 ) dan timbul kebingungan yang terjadi karena font tulisan berwarna biru. Warna biru biasanya merupakan petunjuk bahwa tulisan tersebut berfungsi sebagai link. Namun yang terjadi disini adalah warna biru juga digunakan untuk penekanan kalimat.

Sebagai tambahan informasi, pada setiap teks pada panel menu yang berfungsi sebagai link akan mengalami transformasi warna menjadi kuning apabila di-hover. Inilah satu-satunya petunjuk yang membedakan antara teks berupa link atau bukan link, mengingat warna seluruh teks sama dan tidak semua menu diberi garis bawah.

Kembali ke menu, disebelah kanan Career terdapat Global Link yang berisi link website Yamaha ke beberapa negara. Apabila link tersebut di-klik, maka akan terbuka window baru sesuai alamat web yang dituju. Di halaman Global Link dapat dilihat bahwa ada 2 warna tulisan yang berbeda, yaitu warna marun dan abu-abu. Namun disini ditemukan hal yang tidak konsisten. Warna marun tersebut hanya bersifat link pada Company List saja. Tulisan Global Links di pojok kiri atas ataupun kategori benua (Asia/Oceania dan Europe) tidak bersifat link. Inilah kesalahan lain dari situs ini. 

Selanjutnya ada Site Map yang merupakan peta petunjuk pada website ini. Site map berisi seluruh link yang ada di situs ini.

2. Bagian Kedua

Yang paling menarik perhatian adalah gambar yang paling besar ukurannya. Gambar tersebut menempati lebih dari 50% halaman tanpa scrolling (lihat disini). Namun yang menjadi pertanyaan, apakah ini merupakan iklan (ad-advertisement)? Ternyata ini bukanlah iklan yang berfungsi sebagai promosi, melainkan hanya sekedar gambar dekoratif saja.

Memuat sesuatu yang mirip iklan adalah hal yang sangat disalahkan bagi web developer dan merupakan urutan ke-7 dari 10 Kesalahan Terbesar dalam Desain Web (Top Ten Mistakes in Web Design – Jakob Nielsen). Menurut Nielsen, merupakan suatu tindakan yang bijak jika para web developer menghindari desain yang menyerupai iklan, bahkan untuk iklan sekalipun. Lebih jauh lagi, gambar terbesar ini tidak mempunyai fungsi sebagai link, yang artinya gambar ini 100% bersifat dekoratif. Bagi saya, hal semacam ini merupakan pemborosan tempat yang sangat tidak bermanfaat. Kalau ingin menginformasikan sesuatu yang luar biasa dan ingin menggunakan gambar besar, maka sebaiknya gambar tersebut memiliki link ke tempat informasi lebih lengkapnya. Sebaliknya, tidak mempunyai fungsi link, sebaiknya informasi cukup berupa teks saja.

Pada bagian ini juga terdapat kolom Highlight. Fungsi dari menu ini tidak begitu jelas karena lagi-lagi terdapat hal yang tidak konsisten. Dari tiga gambar flash, dua gambar di kiri dan kanan berfungsi sebagai link, tetapi gambar yang di tengah hanya bersifat dekoratif. Gambar sebelah kiri merupakan link ke http://www.vixion-indonesia.com/ dan yang sebelah kanan merupakan link ke http://www.donitatagp.com/ yang merupakan Official Web Doni Tata Pradita, pembalap motor Indonesia.

Selanjutnya terdapat kolom Event & Promotion di sebelah kiri. Menu ini benar-benar aneh karena tidak satupun teks yang berfungsi sebagai link, termasuk judul promosi yang diungkapkan. Di sana terdapat keterangan bahwa jika ingin tahu informasi selengkapnya, maka pengguna harus mencari informasi tersebut di menu news.

Selain itu, nampak adanya tempat yang kosong (sekitar 50%) pada kolom Event & Promotion. Tempat kosong ini sebenarnya adalah lahan yang sangat potensial untuk dimanfaatkan, baik untuk tempat iklan, tambahan event atau promosi, ataupun keterangan tambahan tentang event dan promosi yang sedang diadakan. Menurut saya, jika isinya hanya sedikit, sebaiknya Event & Promotion tidak dijadikan kolom yang menghabiskan banyak tempat, tetapi dibuat menjadi sebuah menu. Jadi, walaupun tidak ada event atau promosi, tidak akan menjadi masalah karena dapat diberi keterangan, misalnya “Saat ini kami sedang tidak mengadakan event atau melakukan promosi. Silahkan klik disini untuk mengakses event atau promosi terdahulu”. Dalam hal ini,”disini“ berfungsi sebagai link terhadap event atau promosi terdahulu.

3. Bagian Ketiga

Bagian ketiga ini berisi kolom-kolom Yamaha News, Yamaha Polling, Yamaha Racing, Yamaha Safety Riding Science, dan Career. Link pada kolom-kolom ini mengunakan warna marun dan berubah menjadi kuning ketika di-hover (yang tidak kontras dengan background yang berwarna kelabu). Pada dasarnya link-link yang terdapat di kolom-kolom tersebut adalah link content website ini. Saya mengira bahwa Yamaha-Motor berpendapat bahwa berita yang dipajang di halaman utama ini adalah berita yang dianggap penting. Namun sayangnya, sangat jelas terlihat pemanfaatan ruang yang sangat tidak optimal.

Selain tidak mengoptimalkan ruang, kesalahan lain yang ditemukan pada bagian ini adalah pada kolom Yamaha Polling. Terlihat jelas bahwa radio button tersebut tidak memiliki default, dimana seharusnya ada satu default pada radio button. Kemudian, tanda “>>” dan “<<” yang terdapat pada menimbulkan kesan bahwa itu merupakan tanda “next” pada sistem pencarian atau sistem data record. Sebaiknya para web developer tidak menggunakan simbol-simbol tertentu yang memiliki fungsi-fungsi khusus, melainkan cukup dengan member garis bawah dan warna biru maka setiap orang akan mengerti bahwa itu adalah link.

Ketidak konsistenan juga nampak pada isi kolom, dimana kolom Yamaha News dan Career menggunakan margin rata kiri, sedangkan kolom Yamaha Racing dan Yamaha Safety Riding Science mengunakan margin pusat (center). Kemudian pada halaman ini juga terdapat pengulangan, yaitu pada link CAREER di pojok kanan atas dan Career di dalam kolom Career pada tubuh halaman. Tidak ada perbedaan isi diantara kedua “Career” tersebut.

4. Bagian Keempat

Bagian keempat di halaman ini sama seperti bagian pertama, yaitu bersifat tetap atau permanen. Arinya, bagian ini pasti selalu ada pada setiap halaman di dalam situs ini. Bagian ini memuat tentang alamat dan nomor telepon Yamaha Indonesia Motor serta saran tentang penggunaan browser untuk membuka halaman ini.

Hingga bagian tulisan ini, informasi didapatkan berdasarkan situs www.yamaha-motor.co.id yang diakses pada tanggal 9 Juni 2008, kecuali pada halaman Global Link dan Site Map yang diakses pada tanggal 16 Juni 2008.

Profile

Menu kedua setelah Home adalah Profile. Sesuai namanya, menu ini menyajikan profil Yamaha Motor. Saat dibuka, saya mengira rupanya tampilan seperti ini sudah menjadi standar dan ciri khas situs ini. Pada waktu pengujian, saya juga sempat membuka menu-menu lainnya (Products, Network, Yamaha Inside, Dan Costumer Form), yang ternyata isinya sama seperti ini, yaitu menampilkan halaman “kosong” tanpa informasi yang bernilai. Untuk itu, untuk kasus ini, saya tidak menyajikan pembahasan kembali karena hal sudah pernah dibahas pada menu Career sebelumnya.

Product

Pada menu Products, disajikan informasi tentang produk-produk yang dijual oleh Yamaha Motor Indonesia yang terbagi menjadi 3 kategori besar, yaitu Automatic, Moped, dan Sports yang dapat diakses dengan meng-klik link tang tersesia pada menu panel kiri. Halaman tampilan produk berisi spesifikasi produk serta harga produk. Namun menurut saya, Yamaha memang tidak ingin costumernya membeli produk secara online karena tidak ada cara-cara pembayaran atau hal apapun yang mengindikasikan transaksi dapat dilakukan secara online dan kemudian barang akan dikirim kerumah, seperti situs belanja pada umumnya. Selain itu, terlalu banyak ditemui ruang yang kosong di halaman ini.

Network

Menu Network berisi tentang alamat-alamat toko yang menyediakan pelayanan Sales, Service, dan Spare Parts Yamaha di Indonesia. Pada awalnya daftar alamat diacak baik kota maupun namanya. Untuk memudahkan, pengguna harus memasukkan input pada input box, yaitu nama toko dan nama kota. Namun jika pengguna tidak mengetahui nama toko, maka dapat pula hanya menuliskan nama kota saja. Input box berwarna kuning pada City berarti data tersebut merupakan data primer jika ingin melakukan pencarian (required data).

Setelah melakukan input berupa pada Shop Name, maka akan keluar nama toko yang sesuai dengan keyword yang dimasukkan sebagai input. Jika hanya memasukkan input berupa nama kota (City) saja, maka output yang dihasilkan adalah sejumlah alamat toko yang berada di kota yang dimaksud dan diurutkan dua-dua secara horizontal berdasarkan nama. Hal yang dirasakan mengganggu adalah kesan bahwa data alamat yang disajikan tidak ada yang lengkap. Disetiap toko tercantum e-mail, namun tidak ada satupun yang mengisinya. Menurut Penulis, e-mail require tersebut tidak perlu ada karena tidak ada toko yang memiliki e-mail.

Dalam satu halaman pencarian terdapat maksimal hasil pencarian. Jika lebih, maka akan ditampilkan di halaman selanjutnya dengan meng-klik pada pojok kanan halaman. Namun terdapat kesan bahwa web “memaksa pengguna untuk melihat setiap halaman, karena tidak ada pilihan halaman 1, 2, dan seterusnya.

Dari blockquote sebelumnya hingga bagian tulisan ini, informasi didapatkan berdasarkan situs www.yamaha-motor.co.id yang diakses pada tanggal 9 Juni 2008.

Yamaha Inside

Menu yang selanjutnya adalah Yamaha Inside. Menu ini berisi tentang hal-hal yang berkaitan dengan pengendara motor. Seperti yang sudah-sudah, halaman ini juga awalnya kosong pada body text, kemudian baru muncul isi berita setelah di klik pada panel menu sebelah kiri.

Contohnya adalah pada halaman yang berisi tentang Yamaha Safety Riding Science yang terdiri dari beberapa artikel, Yamaha Club, Yamaha Racing, Tips and Trick, serta fasilitas Download. Download yang dapat dilakukan meliputi download Parts Catalogue dalam bentu .pdf, Ring Tones dalam bentuk .zip, dan Wallpaper untuk PC dan Handphone dalam bentuk .zip.

Hal ironis yang ditemukan di halaman ini adalah pada konten “Cara Merawat Helm” yang kosong. Menurut saya, sebaiknya judul dari artikel ini dihapus karena berkesan menipu pengguna.

Costumer Forum

Menu terakhir dalam situs ini adalah Costumer Forum. Bagian ini menyajikan kesempatan hubungan antara pengguna dengan pihak Yamaha. Untuk mengaksesnya, pihak Yamaha mewajibkan pengguna yang ingin bergabung untuk mengisi formulir yang tersedia.

Seperti biasa, ada hal yang menarik untuk dibahas disini. Seperti yang dapat diamati di halaman Costumer Forum, bagian Nama Lengkap, E-mail, dan Telepon bertanda bintang. Ini berarti wajib diisi. Namun, yang terjadi adalah pada input box e-mail, warnanya adalah kuning, yang berarti juga wajib diisi. Lagi-lagi, situs ini membingungkan pengguna.

Selain hal tersebut, formulir ini relatif “kosong” dan itu sangat disayangkan. Padahal ruang kosong tersebut dapat dimanfaatkan untuk iklan atau sejenisnya yang nantinya mendatangkan pendapatan bagi situs ini.

Dari blockquote sebelumnya hingga bagian tulisan ini, informasi didapatkan berdasarkan situs www.yamaha-motor.co.id yang diakses pada tanggal 16 Juni 2008.

Bagian 1: Human-Computer Interaction

Desain antarmuka (interface), khususnya pada web, merupakan hal krusial yang perlu menjadi salah satu perhatian utama bagi para pengembang web atau web developer dan desainer web. Antarmuka merupakan hal penting yang menentukan keeksisan suatu web. Jika sebuah situs web atau website sulit digunakan karena desain antarmuka yang buruk, maka orang menjadi enggan untuk menggunakannya. Desain antarmuka yang buruk dapat menyebabkan website tidak dapat menyampaikan dengan jelas hal-hal yang ingin dijelaskan perusahaan atau organisasi, atau informasi yang disampaikan cukup jelas namun sulit dibaca. ‘Tersesatnya’ pengguna saat berusaha mengeksplorasi sebuah web juga merupakan bagian dari kesalahan desain antarmuka. Bagi pengguna, mereka tidak ingin menghabiskan banyak waktu untuk berusaha memahami sebuah antarmuka. Jika pengguna merasa tidak puas, mereka akan beralih ke website yang memiliki antarmuka yang lebih baik.

Hal utama yang perlu diperhatikan dalam membangun web adalah dengan user-testing. Hal ini perlu karena pada akhirnya penggunalah yang akan menggunakan web, bukan developer. Maka pengguna sebaiknya mampu menggunakannya dengan optimal. Ada beberapa hal yang dapat dijadikan pertimbangan dalam melakukan user-testing, yaitu :

• Menggunakan pengguna yang representatif, yaitu pengguna yang nantinya berpotensi besar menggunakan web yang dibangun.
• Bertanya kepada mereka tentang tugas apa saja yang mereka kerjakan dan hal apa saja yang mereka butuhkan berkaitan dengan web.
• Melakukan observasi tentang seberapa jauh pengguna dapat menggunakan web tersebut dengan baik, seberapa banyak mereka melakukan kesalahan dan apakah kesalahan yang sering dilakukan oleh pengguna. Observasi tersebut dilakukan tanpa campur tangan para web developer.

Menurut Jakob Nielsen dalam artikelnya yang berjudul How Little Do Users Read?, jumlah rata-rata orang yang memiliki waktu untuk membaca sebuah halaman web hanyalah 20%. Bahkan, dalam artikel lain yang ditulis Nielsen tahun 1997, para pengguna web tidaklah membaca kata-perkata, melainkan hanya melakukan scanning, mengambil inti kata dari setiap kalimat, kemudian menyimpulkan kira-kira hal-hal apa saja yang termuat dalam halaman web tersebut. Scanning dilakukan dengan melihat :

• Kata-kata kunci yang telah disorot (highlight).
• Sub-sub judul.
• Kalimat-kalimat atau kata-kata yang disajikan dalam poin-poin.
• Inti sebuah paragraf (diambil dari beberapa kata pertama tiap-tiap paragraf).
• Gaya inverted pyramid, yang dimulai dengan satu kesimpulan.

Usability adalah atribut kualitas yang menilai seberapa baik user interfaces berdasarkan tingkat kemudahan penggunaan web. Usability dedefinisikan dalam lima komponen kualitas:

1. Learnability, yaitu kemudahan untuk dimengerti atau dipelajari.
2. Efficiency, yaitu seberapa cepat sebuah task dapat ditampilkan.
3. Memorability, yaitu seberapa banyak pengguna mengingat apa saja yang dilakukan dalam sebuah web dan seberapa mahir mereka (menggunakan daya ingat) menggunakan web tersebut saat kembali mengunjunginya.
4. Errors, yaitu seberapa banyak kesalahan yang dibuat oleh pengguna dan bagaimana cara mereka menghadapi kesalahan tersebut.
5. Satisfaction, yaitu seberapa puas pengguna menggunakan situs berdasarkan desain yang ada.

Masih banyak atrinut kualitas lainnya, namun inti dari semuanya adalah utilitas pengguna. Usability dan utilitas mengarah kepada hal-hal yang diinginkan dan tidak diinginkan pengguna. Tidak baik jika suatu web secara hipotetis mudah, namuan jika terlalu sulit justru akan menghasilkan keadaan yang lebih buruk.

Kesalahan Pada Situs Web

Beberapa kesalahan sering kali dibuat dalam web. Kesalahan-kesalahan tersebut kebanyakan karena menganggap pengetahuan yang dimiliki oleh developer sama dengan pengetahuan yang dimiliki oleh pengguna (user). Kesalahan yang umum ditemui adalah:

1. Percaya bahwa orang-orang perduli pada situs Anda.

Kebanyakan orang-orang akan menertawai saat desain yang dibuat adalah untuk developer atau desainer, bukan untuk pengguna. Bahkan ada juga situs-situs yang hanya dapat dibuka oleh browser tertentu saja.

Kebanyakan orang mengunjungi situs untuk menyelesaikan masalah mereka, misalnya mereka memerlukan informasi, donasi, hiburan, atau ingin menjadi bagian dari sebuah komunitas.

2. Orang asing tidak dapat menebak atau mengira-ngira isi dari situs secara umum dalam waktu kurang dari 4 detik.

Ini berari penempatan logo yang tidak pada tempatnya, atau tidak adanya tagline atau ilustrasi yang mengkomunikasikan situs apakah itu.

3. Menggunakan elemen-elemen yang curang dalam meningkatkan pengunjung.

Hal ini misalnya dilakukan dengan black hat dalam search engine. Black hat yaitu teknik Internet Marketing yang digunakan untuk ‘menipu’ search engine seperti Google atau Yahoo supaya website anda tampil di halaman pencarian Utama.

Biasanya yang banyak di gunakan pemain black hat adalah mereka membuat website yang isinya hampir tidak ada apa-apanya, namun website tersebut diisi dengan halaman yang penuh dengan iklan affiliate link mereka untuk menawarkan sebuah produk yang mereka pasarkan.

Cara lainnya dilakukan dengan hal-hal semacam games atau iming-iming hadiah.

Biasanya cara-cara seperti ini menggunakan teknik yang menarik perhatian, seperti penggunaan splash animation.

Gambar 1, bisa dilihat di dokumen tugas.

4. Menjadikan website sebagaGi strategi marketing.

Meskipun saat ini sangat marak situs-situs belanja online, namun bukan berarti desain situs dapat dikaitkan dengan strategi pemasaran karena akan menyalahi aturan-aturan dalam usability, user experience, dan user interface. Hal ini dikarenakan fokus utamanya sudah beralih menjadi strategi pemasaran.

5. Desain yang digunakan tidak standar.

Bereksperimen dengan desain web adalah hal yang berbahaya karena pengguna akan merasa sangat asing. Sebaiknya penempatan logo, tombol, menu, dan lain-lain dilakukan sesuai hal yang biasanya ada.

6. Kegagalan navigasi.

Seluruh navigasi web harus dapat menjawab pertanyaan “Dimana saya sekarang?”, “Tempat mana saja yang telah saya kunjungi?”, “Kemana seharusnya saya pergi setelah ini?”, dan “Dimana halaman utamanya?”. Untuk itu, navigasi web haruslah konsisten dan simpel.

7. Menggunakan “Mystery Meat Navigation”.

8. Tidak memiliki hal yang menarik.

9. Melupakan kegunaan tulisan.

Maksudnya adalah penggunaan gambar untuk menyampaikan maksud, jadi menyampaikannya tidak dalam bentuk tulisan.

10. Terlalu banyak materi dalam satu halaman.

11. Membingungkan dan ajaib.

Kebanyakan orang telah memiliki ekspektasi tertentu tentang website dan sangat tidak menyukai kejutan. Hal-hal seperti pop up window dirasakan sangat mengganggu.

12. Menyalahgunakan Flash.

Keindahan memang bauk, namun jika menggunakan Flash pada web demi sebuah keindahan, maka hal tersebut merupakan hal yang menyebalkan bagi pengguna. Kenapa? Karena Flash memerlukan waktu loading yang sangat lama dan memakan biaya yang sangat besar dalam mendownload setiap isinya. Oleh karena itu, pengguna sering melewatkan “fase” Flash. Jadi, daripada sia-sia, sebaiknya kurangi penggunaan Flash.

13. Salah pengertian dalam menggunakan gambar.

Beberapa kesalahan tentang ini adalah menggunakan GIF untuk JPG, menggunakan gambar yang besar, background yang buruk, ketidak-kontrasan, menggunakan gambar yang tidak relevan, dan lain-lain.

Tugas IMK Akhir

Tugas IMK Akhir

Yunditia Yulantami (H24054113) ta_imk_h240541131