Analisis Berdasarkan Artikel “Top 10 Mistake in Web Design”

Alhamdulillah take home test sudah selesai :). Tulisan ini (dan tulisan selanjutnya) dibuat dalam rangka Ujian Tengah Semester mata kuliah Interaksi Manusia dan Komputer. Saya akan mencoba menganalisis beberapa kesalahan desain pada beberapa website berdasarkan artikel “Top 10 Mistake in Web Design” yang dibuat oleh Jakob Nielsen, mari kita mulai analisisnya.

A. Bad Search

Gambar 1. Bad Search

Umumnya mesin pencari tidak dapat mengatasi kesalahan pengetikan, kemajemukan, tanda baca, dan lain-lain yang dalam pemrosesan query. Metode pencarian yang advance kadang sedikit membantu tetapi pencarian yang lebih simpel lebih disukai user.

Gambar 2. Desain Search Box www.indonesia.travel

Terdapat sedikit kekurangan dari kotak pencarian yaitu tombol Search yang kurang representatif sebagaimana desain dari sebuah tombol (memiliki bentuk 3 dimensi dan gradasi warna yang menunjukkan seakan-akan dapat ditekan serta dapat memicu suatu aksi – berupa konfirmasi atau halaman baru).

Gambar 3. Hasil Pencarian di www.indonesia.travel

Seharusnya hal ini dapat diantisipasi oleh Sang web developer agar membantu pengguna dalam proses pencarian. Namun memang cukup sulit untuk pengembangannya. Sebuah fitur pencarian harus mampu mengenali dan memperbaiki kesalahan query tersebut.

 B. PDF Files for Online Reading

Membuka file PDF pada browser memang menyebalkan karena menunggu waktu lama dan merusak alur browsing selain itu jarang sekali cocok dengan ukuran browser window sehingga tulisan menjadi lebih kecil dan membuat scrolling lebih sulit.

Gambar 4. Tampilan Website www.diperta.jabarprov.go.id/index.php/subMenu/909

Gambar di atas adalah solusi dari masalah diutarakan sebelumnya yaitu user harus men-download file tersebut (what??). Ini menunjukkan kemalasan Sang developer untuk membuat tabel pada website. Meskipun user harus men-download mestinya kebutuhan user perlu disesuaikan, terlihat website ini berusaha menampilkan data tentang luas tanam padi lalu mengapa format file yang di-download berupa PDF bukankah  format file Excel (XLS) atau Access (MDB/ACCDB) yang lebih cocok untuk sebuah data.

C. Not Changing the Color of Visited Links

Jika pengguna mengetahui halaman yang sudah ia kunjungi maka ia tidak akan mengunjungi halaman tersebut berulang-ulang. Hal ini sudah diantisipasi sejak lama oleh Google namun website lainnya sepertinya belum mengikuti jejaknya.

Gambar 5. Warna Link www.indonesia.travel

Tidak terdapat perbedaan warna antara link yang belum di-klik dan yang sudah. Hal ini dapat menyebabkan user mengunjungi halaman yang sama berulang-ulang dan tentu sangat menyebalkan.

D. Non-Scannable Text

Gambar 6. Non-Scannable Text

Membuat isi teks yang menarik dan mudah dibaca akan membuat user mudah memahami isi dari website tersebut. Jangan sampai desain teks yang buruk menghilangkan niat user untuk membaca isi teks yang sebenarnya sangat menarik.

Gambar 7. Tampilan Website www.gordonwaynewatts.com

Bahkan dalam website yang saya berikan gambarnya di atas terdapat FAQ (Frequently Asked Question) yang isinya bagaimana memahami halaman website itu. Perhatikan scroll bar di sebelah kanan, masih banyak sekali tulisan yang sebenarnya hanya akan membuat sakit mata jika terus dibaca.

E. Fixed Font Size

Sebuah web umumnya kini dilengkapi oleh CSS untuk membuat lebih web terlihat rapi dan teratur dengan menentukan terlebih dahulu baik ukuran, bentuk, letak konten web dalam CSS. Dengan begitu ukuran font dalam web tidak dapat diubah oleh browser, hal ini menjadi kendala bagi orang lanjut usia yang penglihatannya mulai berkurang.

Gambar 8. Tampilan Website http://www.go-iti.web.id/what-is-iti.html (font kecil)

Gambar 9. Tampilan Website http://www.go-iti.web.id/what-is-iti.html (font besar)

Ukuran font pada Gambar 8 adalah ukuran font terkecil untuk website tersebut. Namun website ini juga menyediakan pengaturan untuk memperbesar atau memperkecil ukuran font melalui icon yang berada di pojok kanan atas meskipun ukuran maksimal font terbatas seperti yang saya tunjukkan pada Gambar 9. Hal itu dilakukan demi menjaga tampilan web ini agar tetap rapi.

F. Page Titles With Low Search Engine Visibility

Sebuah judul halaman website yang baik memberikan informasi penting terkait isi halaman tersebut.

Gambar 10. Halaman www.detik.com

Dapat dilihat pada gambar di atas, www.detik.com memulai judul setiap halaman dengan nama yang sama. Saat user mengeluarkan tab yang banyak, browser akan mengecilkan ukuran  setiap tab dan yang terjadi adalah user kehilangan informasi terkait halaman yang telah ia buka pada tab tersebut. Hal ini tentu akan mengurangi kegunaan dari website itu sendiri bagi multiwindowing user.

G. Anything That Looks Like an Advertisement

Mata manusia cenderung selektif dalam melihat sesuatu, karena itu dalam mendesain upayakan menciptakan desain yang tepat untuk konten yang tepat sebagai contoh kita lihat gambar di bawah ini.

Gambar 11. Tampilan Website www.gordonwaynewatts.com

Yang saya tandai di atas adalah area untuk menampilkan berita terbaru. Jika tidak percaya lihat tanda panah yang saya tunjuk bertuliskan ‘RECENT NEWS’. Pastinya user lain yang melihat juga tidak sadar bahwa itu kolom untuk berita terbaru karena bentuknya lebih mirip sebuah iklan.

H. Violating Design Conventions

Konsistensi merupakan salah satu prinsip kegunaan yang paling penting. Jika sebuah website dapat mengatur alur prosesnya secara konsisten tentu akan memudahkan pengguna untuk mengingat kembali dan memprediksi apa yang terjadi selanjutnya.

Gambar 12. Tampilan Website www.siphawaii.com 

Akan tetapi bila user mengunjungi sebuah website e-commerce seperti gambar di atas mungkin akan berpikir beberapa kali untuk bertransaksi. Website ini menumpahkan (sedikit lebay) seluruh produknya pada halaman utama, jelas terlihat berantakan dan tidak menarik.

H. Opening New Browser Windows

Seorang user cenderung melakukan browsing hanya fokus pada satu tab saja karena malas mengganti-ganti tab. Terkadang link yang di-klik pada website otomatis membuka suatu tab baru yang dapat membingungkan user untuk kembali pada halaman sebelumnya karena tombol Back pada browser tidak dapat ditekan sehingga harus berpindah tab.

Gambar 13. Tampilan Website www.deptan.go.id/bpsdm/ppmkp

Kasus yang terjadi di atas malah lebih buruk lagi. Ketika user ingin membaca berita secara lengkap malah muncul popup window seperti iklan online. Mungkin akan muncul beberapa pertanyaan di benak user, apakah ini masih dalam website yang sama atau berbeda, bagaimana cara kembali ke halaman sebelumnya atau apakah dengan meng-klik tombol close pada popup window akan menyelesaikan masalah atau malah keluar dari browser.

J. Not Answering Users Questions

Setiap mengunjungi situs e-commerce tertentu, beberapa user tentu memiliki tujuan untuk membeli produk dalam website tersebut. Akan tetapi bila website tidak memberikan informasi yang dibutuhkan dijamin user akan beralih ke website lainnya yang memberikan penjelasan yang lebih baik.

Gambar 14. Tampilan Website www.wiwahasouvenir.com

Website di atas menjuluki dirinya sebagai e-commerce. Akan tetapi yang terjadi disini sepertinya ada salah pengertian dari arti e-commerce itu sendiri. Setelah menemukan produk yang dimaksud, yang saya lakukan adalah mencari bagaimana cara memesan produk tersebut (ingat, bukan langsung memesan). Mata saya kembali ke atas, melihat page Order & Shipping lalu membukanya dan akhirnya mengerti maksud dari situs ini yaitu pemesanan hanya dapat melalui telepon atau email. Informasi yang tidak dijelaskan secara rinci akan membuat kebingungan pada user dan memaksa user untuk memahami apa yang ada di dalam website tersebut.

Bersambung ke tulisan kedua . . .

Posted on October 23, 2011, in Interaksi Manusia dan Komputer and tagged , , , , . Bookmark the permalink. 2 Comments.

  1. manteb bgt mas analisisnyaa hehe

  2. lanjutkan gan!!

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s

%d bloggers like this: