•             Search and You May Find (Neilsen, 2006)

• Top 10 Mistakes in Web Design (Nielson, 2011)

1. Pencarian yang buruk – umumnya mesin pencari tidak dapat mengatasi kesalahan pengetikan, kemajemukan, tanda baca, dan lain-lain yang dalam pemrosesan query.
2. Tidak mengubah warna dari link yang sudah dikunjungi – jika user mengetahui halaman yang sudah ia kunjungi maka ia tidak akan mengunjungi halaman tersebut berulang-ulang. Berbeda dengan google.com yang sudah menggunakan perbedaan warna dalam link yang belum dikunjungi dan link yang sudah dikunjungi.

Gambar 15: www.google.com

• ·         List of search usability guidelines (Anonim, 2011)

1. The default search is intuitive to configure (no Boolean operators).
2. The search results page shows the user what was searched for and it is easy to edit and resubmit the search.
3. Search results are clear, useful and ranked by relevance.
4. The search results page makes it clear how many results were retrieved, and the number of results per page can be configured by the user.
5. If no results are returned, the system offers ideas or options for improving the query based on identifiable problems with the user's input.
6. The search engine handles empty queries gracefully.
7. The most common queries (as reflected in the site log) produce useful results.
8. The search engine includes templates, examples or hints on how to use it effectively.
9. The site includes a more powerful search interface available to help users refine their searches (preferably named "revise search" or "refine search", not "advanced search").
10. The search results page does not show duplicate results (either perceived duplicates or actual duplicates).
11. The search box is long enough to handle common query lengths.
12. Searches cover the entire web site, not a portion of it.
13. If the site allows users to set up a complex search, these searches can be saved and executed on a regular basis (so users can keep up-to-date with dynamic content).
14. The search interface is located where users will expect to find it (top right of page).
15. The search box and its controls are clearly labeled (multiple search boxes can be confusing).
16. The site supports people who want to browse and people who want to search.
17. The scope of the search is made explicit on the search results page and users can restrict the scope (if relevant to the task).
18. The search results page displays useful meta-information, such as the size of the document, the date that the document was created and the file type (Word, pdf etc.).
19. The search engine provides automatic spell checking and looks for plurals and synonyms.
20. The search engine provides an option for similarity search ("more like this").

 

A.               B. Analisis Kesalahan

• ·         Tombol Search

 

 

Gambar 16. Tombol Search

Terdapat sedikit kekurangan dalam tombol search diatas. Warna kotak yang digunakan terlalu samar dengan warna background web. Selain itu gambar lup yang ada dalam kotak search dapat diganti dengan tulisan Search. Karena terdapat beberapa orang yang menganggap bahwa gambar lup tersebut berfungsi untuk memperbesar.

Contoh perbaikan:

 

Gambar 16: Tombol Search (fix)

• Warna link hasil pencarian

Gambar 17: Link Hasil Pencarian

Tidak terdapat perbedaan antara link yang sudah di-klik dengan link yang belum di-klik. Hal ini dapat menyebabkan user mengunjungi link tersebut berulang-ulang dan dapat mengulur waktu.

Contoh perbaikan:

Gambar 18: Link Sebelum Dikunjungi

Gambar 19: Link Setelah Dikunjungi

• ·         Jumlah hasil pencarian yang terlalu banyak

Gambar 20: Link Hasil Pencarian

Dapat dilihat bahwa hasil dari pencarian mencakup satu halaman. Hal ini membuat user harus menggunakan scroll down untuk melihat hasil yang lainnya di bawah dan semakin malas untuk melihat hasil pencarian pada halaman berikutnya yang tentunya kurang efisien.

Contoh perbaikan:

Hasil pencarian yang ditampilkan sebaiknya 10 artikel per halaman .

Gambar 21: Hasil Pencarian (fix)

• ·         Pencarian yang buruk

Gambar 22: No Result

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

 Contoh Perbaikan :

Gambar 23: No Result (fix)

C. Daftar Pustaka

Nielson J. (2006) Search and You May Find[Internet]. Tersedia dari : <http://www.useit.com/alertbox/9605.html> [Diakses 24 Oktober 2011].

Nielson J. (2011) Top 10 Mistakes in Web Design [Internet]. Tersedia dari : <http://www.useit.com/alertbox/9605.html> [Diakses 24 Oktober 2011].

Anonim. (2011) 20 Search Usability Guidelines [Internet]. Tersedia dari : <http://www.userfocus.co.uk/resources/searchchecklist.html> [Diakses 24 Oktober 2011].

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.

1. Bed Search

 

2. PDF Files for Online Reading

 

Gambar 2: www.embassyofindonesia.org

Ketika kita ingin membaca suatu artikel dan kemudian mengklik title artikel, maka hal yang paling menyebalkan adalah muncul perintah untuk men-download artikel tersebut. Hal ini terkadang tidak disukai oleh user sebab selain mengulur waktu lebih lama untuk membaca artikel, users juga belum tentu ingin menyimpan file download dari artikel tersebut.

 

Gambar 3: Download

3. Not Changing the Color of Visited Link

Gambar 4: http://kotabogor.go.id 

Jika user mengetahui link yang sudah dikunjungi maka user tidak akan berulang-ulang untuk mengunjungi link tersebut. Namun, masih terdapat beberapa web yang tidak menggunakan perbedaan warna pada link yang belum dikunjungi dengan link yang sudah dikunjungi. Hal ini akan membuat user harus membuka link tersebut untuk mengetahui bahwa link tersebut sudah pernah dibacanya atau belum. Selain itu, hal ini dapat membuang waktu user untuk membuka halaman yang sama.

1.      4. Non-Scannable Text

Terkadang isi teks dalam sebuah web akan menjadi daya tarik user. Isi teks yang menarik dan rapi akan mempermudah user untuk mendapatkan informasi dari web tersebut. Jangan sampai, design text dalam web membuat user tidak jadi membaca informasi yang ada di dalam web tersebut. Dengan design text yang tidak bagus ditambah dengan informasinya menggunakan bahasa inggris membuat user menjadi malas untuk membacanya.

Gambar 5: www.fcw.com

2.      5. Fixed Font Size

Umumnya, web- web saat ini menggunakan style CSS yang membuat web terlihat lebih rapi dan menarik dengan mengubah ukuran font size oleh user sehingga font size tidak dapat diubah oleh browser. Hal ini menjadi kendala bagi user yang berusia di atas 40 tahun dengan penglihatan yang mulai berkurang.

Gambar 6: http://www.go-iti.web.id/what-is-iti.html

Gambar 7: http://www.go-iti.web.id/what-is-iti.html

Pada web tersebut (Gambar 7) hanya dapat dilakukan 3 kali perbesaran font. Selain itu, web ini juga menyediakan pengaturan untuk memperkecil font namun tetap dengan tampilan yang rapi.

3.      6. Page Titles With Low Search Engine Visibility

Gambar 8: www. Dailymotion.com

Dapat dilihat pada gambar di atas bahwa sebuah judul halaman dalam web memberikan informasi yang penting. Pada web www. Dailymotion.com semua judul halaman diawali dengan tulisan Dailymotion. Ketika user membuka tab dengan jumlah yang banyak, browser akan memperkecil ukuran halam judul sehingga membuat user bingung dalam melihat halaman judul yang sedang dibukanya.

4.     7.  Anything That Looks Like an Advertisment

Dalam membuat web, maka bentuk dan isi web harus diperhatikan. Jangan sampai, ketika user mengunjungi web tersebut membuat user menjadi bingung karena halaman utama dari web tersebut seperti web yang mengisi iklan-iklan. Hal ini terdapat pada web anselme.homestead.com. Saat user mengunjungi halaman depan maka akan terdapat gambar-gambar seperti banner periklanan. Namun, jika user mengklik gambar tersebut (misalnya tulisan HAITI yang diberi lingkaran warna hijau) maka akan keluar sebuah informasi mengenai negara HAITI.

Gambar 9: http://anselme.homestead.com

5.      8. Violating Design Conventions

Konsistensi merupakan salah satu prinsip kegunaan yang paling penting. Jika sebuah web dapat terlihat lebih menarik maka akan menjadi nilai tambah untuk web tersebut. Salah satu contoh yang kurang bagus dan konsisten adalah ronoslund.com. Dengan background yang tidak jelas ditambah dengan tulisan-tulisan yang kecil membuat user malas untuk mengunjungi web ini.

Gambar 10: http://ronoslund.com

6.      9. Opening New Browser Windows

Pada umumnya, user biasa menggunakan tab yang sama untuk membaca suatu artikel tanpa harus berpindah ke new tab. Hal ini dikarenakan user malas untuk kembali ke tab semula jika dia sudah membaca sebuah artikel di halaman baru. Biasanya dengan menggunakan tab yang sama user hanya perlu menekan tombol backspace untuk kembali ke halaman sebelumnya. Namun pada web deptan.go.id, saat user ingin membaca artikel lebih lengkap maka artikel tersebut akan muncul dengan tab yang baru.

Gambar 11: www. deptan.go.id

Gambar 12: www.deptan.go.id

7.      10. Not Answering User’s Questions

Ketika user mengunjungi situs e-commerce, biasa mereka mempunyai tujuan untuk membeli produk yang dijual dalam situs tersebut. Namun, apabila web tersebut tidak memberikan informasi yang diinginkan oleh user maka dapat menghilangkan niat user untuk membeli produk yang dijual tersebut.

Gambar 13: www.grsshop.com

Gambar 14: www.grsshop.com

Salah web yang memiliki informasi tidak lengkap adalah www.grsshop.com. Dalam web ini tidak dijelaskan cara pembayaran jika user jadi membeli produk dalam web tersebut. Padahal hal ini yang menjadi sangat penting dalam e-commerce. Dalam web ini hanya menjelaskan cara pemesanan dan pengiriman produk tanpa menjelaskan bagaimana cara membayarnya.

belladesoto.us

http://www.belladesoto.us

Sebuah website harus memperhatikan bentuk tampilan agar dapat membuat pengunjung yang melihat website tersebut tertarik dan tidak merasa jenuh atau bosan. Website dengan tampilan menarik yang baik (menarik) akan membuat pengunjung merasa nyaman dan betah berlama-lama untuk membaca informasi yang kita berikan. Sedangkan website yang terlalu banyak tulisan ataupun gambar akan mengganggu mata serta membuat bingung pengunjung web tersebut.

Menurut saya, salah satu website yang memiliki tampilan buruk yaitu belladesoto.us.

Web ini merupakan web yang memberikan informasi-informasi dalam berbagai macam kategori. Mulai dari kategori Art & Entertainment, Business, Food, Education, Health, dan masih banyak lagi.

Tampilan buruk dalam website ini:

1. Warna yang digunakan dalam website ini kurang menarik (terlalu simple, hanya ada warna putih dan biru muda) untuk dilihat.

1. 2.  Warna kotak search yang diletakkan di kanan pojok atas terlalu samar (sama dengan warna background) sehingga agak terlalu sulit untuk dilihat oleh pengunjung yang mempunyai penglihatan tidak normal (minus, plus, silinder).

3. Warna tulisan pada poin pages, categories, archives, dll yang terletak disebelah kanan terlalu samar dengan warna background web ini (putih). Sehingga pengunjung harus melihat dengan jarak yang dekat lagi untuk membaca tulisan tersebut.

Dalam membuat sebuah website, tampilan sangat perlu diperhatikan. Oleh karena itu, para pengembang web harus memperhatikan tampilan webnya agar websitenya bisa dikunjungi serta diterima oleh banyak pengunjung.

Sedih bgt kemarin ga bisa pulang ke rmh gara2 MESTI, KUDU, HARUS, WAJIB kerjain project kuliah yang banyak bgt...Padahal sabtu kemarin kakak gw ultah...
Yang bikin tambah sedih wktu kakak gw sms ke gw : "Kok ga ada yang pulang? kan aku bawa kue :-( "
Gw langsung blz sms dy: "Maaf uni, aku ga bs plng coz hrs kerjain tugas"
aduh2...sedih bgt dh

Pas ultah w yg ke 20...awal rada BT coz tmn2 dkat w dikampus pada ga ucapin ultah ke gw..padahal klo mereka ultah w berusaha untuk ucpin happy b'day yang pertama buat mereka...hufh
gw sempat berpikir kalo mereka memang sengaja...tp 1 diantara mereka tuh ad yg ngucapin,,,loh trus ini gmn???
Akhir'a ssemua pertnyaan w terjawab...sore'a setelah rapat famghat..tmn2 gw bikin suprise untuk gw...ohh so sweett....pas gw tanya ke mereka kenapa g ucpin happy b'day gw ke ternyata mereka itu sengaja gak ucapin,buat bikin gw kesal...OMG!!!!
tuk rini:thx ya,gw suka bgt kado lo...
Thx for all my friends...w sayang kalian semua