Minggu, 23 Oktober 2011

Top 10 Mistakes in Web Design

Pada kesempatan kali saya akan membahas 10 Kesalahan yang sering dilakukan oleh Web Designer dalam mengembangkan desain webnya. Pembahasan kali ini berguna untuk memenuhi Ujian IMK, Desain Interaksi. Sumber referensi diambil dari http://www.useit.com/alertbox/9605.html. Berikut pembahasannya.

1. Bad Search

Pada poin ini, saya mengambil contoh website www.garuda-indonesia.com. Website ini termasuk website yang masih kurang dalam segi search result page-nya. Terlihat dari contoh pencarian kata “flight” dan akan muncul hasilnya seperti yang terlihat pada screenshot. User cenderung akan bingung jika melihat hasil pencariannya karena tidak ada kata “flight” yang muncul dari hasil pencarian, yang ada hanya berupa subheader dari page-page lain. Sebaiknya hasil pencarian dapat berupa header page yang isinya berkaitan dengan kata pencarian dan diberikan minimal satu atau dua baris dalam isi dari page yang mengandung kata pencarian tersebut.

Di samping itu, sistem pencarian di website ini belum bisa menangani kesalahan user mengetikkan kata pencarian. Contohnya jika dimasukkan kata “fligth” maka sistem akan mengembalikan page kosong dengan informasi “return 0 matches”.

Seharusnya sistem dapat mengenali kesalahan tersebut dan menggunakan sistem semantik agar user tetap nyaman dengan hasil pencarian. Walaupun pengetikan kata pencarian salah maka sistem secara otomatis mengetahui maksud user. Contoh penggunaan sistem yang semantik adalah dengan pemberian suggestion word seperti “do you mean : ‘flight’” dan menampilkan hasil yang berhubungan dengan kata “flight”. Setidaknya ada hasil yang dimunculkan walaupun user tidak menginginkan kata “flight” yang muncul daripada diberikan page kosong.


2. PDF Files for Online Reading

Pada poin kesalahan ini, saya berikan contoh pada website www.menlh.go.id/adipura. Pada website ini terdapat artikel press release pelaksanaan adipura tahun 2008 dan panduan umum pelaksanaan lingkungan hidup seperti yang terlihat pada screenshot ini.


Kesalahan yang mendasar adalah tidak adanya page yang menampilkan artikel tersebut. Ketika kita klik menu artikel maka kita akan dihadapkan 2 link yang harapannya dapat diklik untuk dilihat isinya. Nyatanya tidak demikian. Link tersebut malah akan menampilkan pop-up windows untuk mengunduh isi artikel yang berupa file PDF. Hal ini memaksa user untuk mengunduh sebelum melihat isi dari artikel tersebut. Seharusnya isi artikel dibuat resume atau paragraf pengantar yang menggambarkan isi artikel secara keseluruhan dan terdapat pilihan untuk mengunduh file isi artikel keseluruhannya.


3. Not Changing the Color of Visited Links

Pada poin ini, website yang saya ambil adalah website www.kumpulan.info/sehat/artikel-kesehatan. Tampilan website tersebut seperti pada screenshot berikut

Terlihat kumpulan artikel kesehatan yang sudah cukup baik tampilannya baik dari header page artikel yang pas font-nya dengan satu paragraf yang dapat mewakili isi artikel keseluruhan. Akan tetapi, website ini masih ada kekurangan, yaitu pewarnaan link header page artikel yang sudah dikunjungi sama dengan saat belum dikunjungi. Hal ini dapat membingungkan user yang akan membuka beberapa artikel. Misalkan user ingin membuka artikel “Cara Aman Menggunakan Toilet Umum” lalu user membuka artikel “Bersahabat dengan Lemak” dan setelah itu user ingin membuka artikel lain tetapi lupa artikel mana yang sudah dibuka. Jadi bisa saja user tersebut malah mengunjungi artikel “Cara Aman Menggunakan Toilet Umum” lagi. Oleh karena itu, ada baiknya website diberikan penanda link untuk pengunjungan suatu page. Penanda yang cukup baik adalah dengan membuat warna header yang berbeda terhadap link header page yang sudah dikunjungi dan yang belum dikunjungi.


4. Non-Scannable Text

Pada poin ini, saya mencoba mencontohkan dengan website www.goodwords.co.uk. Inilah tampilan awal dari website tersebut.

Website ini merupakan one page website yang berisi kumpulan kata-kata bijak. Secara isi konten sudah bagus, akan tetapi dari segi desain website ini tergolong website yang buruk. Terlihat dari pemilihan background yang tidak cocok dengan warna tulisan. Pemilihan warna untuk tulisanpun juga tidak tepat. Hal ini mengakibatkan user seakan bingung dan sulit untuk membaca tulisan tersebut. Selain tulisannya yang tidak terbaca, tata letak dari tulisannya pun terkesan berantakan. Seharusnya tulisan dari page harus diperhatikan tata letaknya, warna, dan background tulisan.


5. Fixed Font Size

Pada poin ini, website yang saya contohkan adalah www.hrodc.com dan inilah tampilan dari website tersebut

Pada website ini terdapat kekurangan yang signifikan, yaitu font dari tulisan pada page yang terlalu kecil. Hal ini menyulitkan user dalam membaca tulisan dari page tersebut terutama untuk user yang sulit membaca tulisan kecil. Selebih lagi apabila digunakan fitur zoom pada web browser, tulisan ini masih terlihat kecil dan baru benar-benar terbaca bila diperbesar sampai 4 kali penekanan tombol zoom. Mungkin si empunya website ingin menampilkan semua fitur dan menu pada homepage. Seharusnya untuk font tulisan harus disesuaikan dengan kebutuhan user dan desain tampilan homepage harus disesuaikan dengan besar font tulisan sehingga dapat dikira-kira dapat muat atau tidak dalam satu page.


6. Page Titles With Low Search Engine Visibility

Untuk poin kesalahan ini, dicontohkan website www.khusus-artikel-online.blogspot.com dan inilah tampilannya.

Dari tampilan sekilas website ini tidak ada kekurangan. Namun bagaimana dengan pemilihan judul pagenya? Jika user membuka banyak page yang ada di website ini maka tab-tab pada web browser akan menjadi seperti ini

Pemilihan judul page-nya dimulai dengan kata yang sama yaitu “Khusus Artikel Online -”. Namun jika tab line sudah penuh seperti screenshot di atas, ini akan menyulitkan user untuk memilih tab mana yang akan ia buka karena judulnya seakan-akan sama. Oleh karena itu, diperlukan pemilihan nama pada judul page yang tepat untuk mewakili isi dari page.


7. Anything That Looks Like an Advertisement

Pada poin ini diberikan contoh website http://arngren.net. Website ini merupakan website e-commerce yang menjual banyak jenis barang. Tampilannya sebagai berikut

Banyak konten-konten pada website ini yang berbentuk advertisement. Saking banyaknya konten-konten website yang berbentuk advertisement, sampai-sampai user mengira index yang merupakan menu pada website seakan-seakan seperti advertisement juga. Hal ini mengakibatkan user akan menghindari menu ini, karena user cenderung akan menghindari advertisement.


8. Violating Design Conventions

Pada poin kesalahan ini, kembali lagi kita bahas website http://arngren.net/. Dilihat dari tampilan awal website ini, dapat disimpulkan bahwa website ini merupakan website dengan tampilan yang buruk. Dilihat dari tata letak yang berantakan dan menu dari website yang tertutup oleh konten-konten lainnya. Tata letak yang sangat tidak rapi ini membuat user akan jenuh dan akan cepat-cepat beralih ke website lain. Pemilihan warna pada tulisan pun seakan menambah list keburukan dari website ini.


9. Opening New Browser Windows


Pada poin kesalahan ini, saya mencontohkan dengan www.okezone.com. Kesalahan dari website ini adalah penggunaan fitur “Open a New Tab” pada proses jika diklik pada menu website ini. Tab baru ini akan dianggap menyusahkan bagi sebagian user. Ketika pengguna tersebut ingin kembali ke halaman sebelumnya, pengguna akan kesulitan karena tidak ada tombol back pada browser.


10. Not Answering Users' Questions

Pada poin yang terakhir ini, website yang dicontohkan adalah www.imgsportstechnologygroup.com yang tampilannya adalah sebagai berikut


Website ini merupakan website e-commerce. Website e-commerce selayaknya menyediakan layanan “tanya jawab” yang dapat menjawab semua pertanyaan calon konsumen dari produk ini atau minimal ada layanan “contact us” sebagai informasi bagi konsumen yang akan menghubungi si empunya website. Namun berbeda dengan website ini, pada link “contact us”, website ini tidak menampilkan page “contact us” pada umumnya, yaitu informasi alamat dan no telp si empunya website, akan tetapi link ini malah memanggil program “Ms.Outlook” yang belum jelas maksudnya apa. Hal ini tentu membuat user menjadi terganggu kenyamanannya. Mungkin saja user hanya ingin mencari tahu nomor contact person tetapi apa yang user dapat tidak sesuai dengan yang diinginkan.



Tidak ada komentar:

Posting Komentar