[Tugas IMK] Review dan Contoh website dengan kriteria “Top 10 Mistakes in Web Design”

Ananlisis dan Contoh  10 Kesalahan yang Paling Sering Terjadi dalam Web Design

Dalam sebuah Alertbox yang pernah ditulis oleh Jacob Neilsen pada artikel yang terdapat di http://www.useit.com/alertbox/9605.html, disana terdapat aturan mengenai 10 kesalahan pembuatan web design yang paling sering dilakukan. Berikut adalah ke 10 hal tersebut dengan masing-masing contoh yang diberikan.

1. Bad Search (sistem pencarian yang buruk).

Pencarian yang buruk disini lebih kepada bagaimana sebuah web mampu menampilkan hasil pencarian yang kita inginkan meskipun kata kunci yang kita masukan salah ejaannya. Kita bisa lihat contoh perbaikan kasus ini pada website-website pencari yang sudah terkenal. Misalnya pada website telkomsel dibawah ini.

Pada contoh ini, saya memasukan kata kunci “telkomflah” pada pencarian di website telkomsel. Hasil yang keluar adalah “no result for telkomflah”. Pada kasus ini kita lihat bahwa meskipun ada di website resmi seharusnya mempu menampilkan informasi mengenai telkomflash, namun jika salah sedikit saja memasukan kata kunci maka tidak ada hasil yang keluar. Hal ini cukup fatal karena bisa jadi pengguna yang melakukan pencarian memang tidak mengetahui dengan benar ejaan dari produk yang diinginkan.

Website yang baik seharusnya mampu memberikan notice jika kata kunci yang kita masukan kurang tepat atau tidak dengan ejaan yang benar. Sehingga ketika pengguna salah memasukan kata kunci pengguna masih bisa mendapatkan informasi yang dibutuhkan. Berikut ditampilkan website yang sudah mendukung pencarian yang baik dengan merekomendasikan pencarian yang dilakukan.

 

Contoh pencarian yang baik dengan rekomendasi kata yang dimasukan pada website pencari ask.com dan google.com

 

2. PDF Files for Online Reading (menggunakan format PDF untuk halaman yang dibaca online)

Salah satu hal yang mengganggu pengguna ketika hendak membaca sebuah artikel pada sebuah website adalah ketika link yang dituju malah membuka sebuah membuka artikel yang kita baca dalam format pdf. Bagi para pengguna dengan user experience rendah hal ini mungkin sering terjadi jika  link yang dituju malah mengantarkannya ke sebuah hal pdf yang dibaca dan harus di download untuk membacanya pada website-website penyedia dokumen-dokumen seperti dostoc.com dan  scribd.com. pengguna pemula kemungkinan besar akan langsung keluar dari halaman dan melakukan pencarian lain. Tapi ada juga website yang langsung membuka file dalam bentuk pdf pada saat kita membaca sebuah artikel seperti pada google docs.

Pada contoh diatas, pengguna harus membaca file yang diinginkan dalam bentuk pdf yang sudah secara langsung dibuka oleh google docs. Hal ini cukup bermasalah karena pada beberpa browser yang belum ter-plug­-in pembaca pdf bisa saja artikel tersebut tidak mucul. Masalah kedua adalah kenyamanan yang didapat pengguna, ketika yang muncul adalah file dalam bentuk pdf sebetulnya ketika pencarian pengguna bisa saja tidak membutuhkan semua informasi pada file pdf tersebut melainkan hanya sebagian saja pada halaman tertentu, tentunya hal ini akan sangat mengganggu jika halaman yang ditampilkan langsung dalam bentuk pdf.

 

3. Not Changing the Color of Visited Links (tidak mengganti warna dari link yang sudah dikunjungi)

Kesalahan lain hasil pencarian yang memunculkan  banyak daftar link adalah ketika tidak ada perubahan warna pada link yang pernah pengguna kunjungi. Perubahan warna tersebut dimaksudkan agar pengguna mengetahui bahwa link yang warnanya sudah berubah berarti sudah pernah dikunjungi oleh pengguna. Tujuannya adalah agar pengguna tidak mengulangi mengunjungi halaman yang pernah dikunjungi, tentunya hal ini hanya akan membuang waktu pengguna dalam mencari informasi yang dibutuhkan. Jika suatu saat pengguna menemukan hasil pencarian yang begitu banyak dan tidak ada perubahan warna pada daftar title link, bisa dibayangkan kesulitan dalam pencarian yang dilakukan dan efisiensi waktu yang terbuang dalam mencari informasi.

Contoh pada hasil pencarian website bps.go.id yang tidak merubah warna link pada title yang pernah dikunjungi

4. Non-Scannable Text (text yang susah dibaca sekilas)

Pada kasus ini sebenarnya saya lebih melihat dari kasus wesite-website yang cukup buruk mengatur elemen-elemen web mulai dari warna, font, penempatan text dan antarmuka yang langsung dapat dilihat pengguna. Contoh yang saya ambil adalah website prides-online.com. berikut gambarnya.

 

 

Situs ini merupakan sebuah web komunitas yang mengizinkan anggotanya memiliki semacam footer signature. Namun yang menjadi masalah ternyata penulisannya dibebaskan kepada anggota forum ini dan tidak ada pengaturan dari website tersbut. Maka bisa dilihat di atas penggunaan warna yang tidak match, dan beberapa warna yang tidak cukup baik dilihat.

Contoh footer signature ukuran besar dan rata tengah yang cukup mengganggu ketika membaca artikel.

5. Fixed Font Size (ukuran font yang tidak bisa diubah)

Teknologi css pada design web saat ini memang belum mendukung dalam merubah font pada website yang ada. Ukuran font yang tetap sebenarnya tidak begitu menjadi masalah ketika pengguna yang berkunjung ke halaman tersebut memiliki pandangan yang normal dalam artian sesuai ukuran manusia normal. Tapi yang perlu diantisipasi adalah ketika misalnya para lanjut usia yang mengakses halaman tersebut dan penglihatannya sudah mulai terganggu maka akan menjadi masalah saaat pengguna tersebut hendak membaca sebagian font ukuran standart yang ada. Sebenarnya hal ini bisa disiasati dengan menggunakan ctrl + saat browser menampilkan halaman web. Sehingga tampilan akan zoom in sesuai keinginan pengguna. Itupun dengan catatan pengguna mengetahui cara zoom in  manual tersebut. Tapi ada hamper semua website berbasis flash tidak mendukung menggunakan ctrl + ini, sehingga informasi dengan ukuran font kecil misalnya tidak akan terbaca oleh pengguna lanjut usia atau pengguna yang memiliki gangguan penglihatan. Sehingga teknologi kedepan diharapkan css yang ada mampu memberikan fungsi khusus pembesaran font dengan segmentasi pengguna lanjut usia.

 

Ukuran font yang kecil pada bagian bawah yang tidak bisa terbaca jelas pada website orangedan.net.

6. Page Titles With Low Search Engine Visibility (title page yang diberi indeks rendah oleh Search Engine)

Beberapa website resmi pada sebuah perusahan biasanya memberikan welcome greeting pada homepage nya. Tapi yang sering dilupakan adalah designer biasanya memberikan tittle yang cukup panjang sehingga tidak tampil seluruhnya tittle tersebut. Penggunaan tittle seperti ini sebenarnya meruapakan salah satu dari title page yang diberi indeks rendah oleh Search Engine.

Berikut contohnya.

Contoh pada website pdambekasi.com

 

7. Anything That Looks Like an Advertisement (segala hal yang terlihat seperti iklan)

Kasus ini sering kita jumpai pada website-website jenis blog yang meletakan banner-banner iklan dan gambar-gambar dihalaman utama. Antarmuka seperti ini sangat mengganggu bagi pengguna dan juga justru malah merugikan website tersebut karena pengguna kemungkinan akan langsung meninggalkan website tersebut karena banyaknya banner.

 

8. Violating Design Conventions (melanggar kesepakatan desain)

Dalam pembuatan design, seringkali ditemukan sebuah website tidak konsisten menampilkan halaman webnya. Misalnya pada website-website iklan dan website penyedia jasa hosting. Ketika pengguna melakukan klik pada salah satu fitur web atau hasil pencarian, pengguna malah diarahkan ke sebuah website lain yang tidak berhubungan dengan website bersangkutan. Biasanya antarmuka website tersebut pun penuh dengan banner iklan dan tata letak yang membingungkan.

Berikut contohnya.

 

9. Opening New Browser Windows (membuka jendela browser baru)

Beberapa website memaksa pengguna membuka jendela browser baru ketika mengunjungi website tersebut. Contoh website yang saya ambil adalah ziddu.com, berikut gambarnya.

 

 

Ketika pengguna meng-klik kursornya pada bagian kotak tempat pengetikan password untuk men-unggah file, maka secara otomatis muncul jendela browserbaru yang berisi halaman yang tidak jelas. Biasanya secara pribadi saya akan langsung meng-close jendela baru itu karena sangat mengganggu pencarian.

Website kedua yang menjadi contoh adalah blogspot. Para penggun blog blogspot pasti pernah menambahkan widget pada blogspot, dan ketika pengguna meng-klik menu “add widget” maka jendela baru akan keluar yang berisi daftar widget atau gadget yang bisa kita tambahkan dalam blogspot kita.

 

10. Not Answering Users’ Questions (tidak menjawab pertanyaan pengguna)

Pada kasus ini kesalahan sebuah website terjadi karena tidak dapat menjawab pertanyaan yang diberikan oleh pengguna. Biasanya pertanyaan diberikan melalui fungsi search atau chatbox pada website. Jawaban atas pertanyaan pengguna menjadi sangat penting ketika pengguna benar-benar ingin tahu informasi mengenai pencarian yang dilakukan. Contoh yang saya ambil adalah website pam Jakarta yaitu palyja.co.id.

Pencarian saya lakukan dengan kata kunci tariff palyja, tapi hasil yang ditampilkan ternyata tidak ada. Padahal keyword ini cukup penting pada sebuah website official resmi palyja.

Demikian analisa yang diberikan semoga bermanfaat.

4 thoughts on “[Tugas IMK] Review dan Contoh website dengan kriteria “Top 10 Mistakes in Web Design”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s