Analisis Antarmuka Pencarian dan Hasil Pencarian (SERP)

Tulisan ini (dan tulisan sebelumnya) dibuat dalam rangka Ujian Tengah Semester mata kuliah Interaksi Manusia dan Komputer. Saya akan membahas tentang antarmuka pencarian dan hasil pencarian sebagai search usability pada website www.indonesia.travel, mari kita mulai analisisnya.

A. Referensi Mengenai Search Usability

  • Web Navigation 101 (Krug, 2006)

User biasanya mencoba untuk mencari sesuatu – tidak seperti di dunia nyata, dalam website tidak ada seseorang yang akan berdiri dan menjelaskan dimana letak sesuatu yang kamu butuhkan berada.

User akan memutuskan melakukan antara searching atau browsing terlebih dahulu – mencari sesuatu di dalam website diibaratkan disebut searching yaitu mengetikkan deskripsi dari apa yang kamu butuhkan pada kotak pencarian dan hasilnya adalah daftar tempat dimana kamu bisa menemukannya.


Gambar 15. Searching

Jika user memilih melakukan browsing, maka gunakan model hierarki untuk menuntunnya – hal ini akan membuat urutan pencarian yang lebih mudah untuk user.

 

Gambar 16. Page Hierarchy

Jika user tidak dapat menemukan apa yang ia cari maka ia akan pergi – user akan keluar dari website ketika telah yakin tidak menemukan apa yang mereka cari atau mereka merasa frustasi karena tidak menemukannya.

Gambar 17. Alur Proses User Melakukan Pencarian pada Sebuah Website

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

Dua kesalahan desain website diantaranya adalah :

Gambar 18. Bad Search

Pencarian yang buruk – umumnya mesin pencari tidak dapat mengatasi kesalahan pengetikan, kemajemukan, tanda baca, dan lain-lain yang dalam pemrosesan query.

Gambar 19. Hasil Pencarian Google

Tidak mengubah warna dari link yang sudah dikunjungi – 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.

B. Analisis Kesalahan (yang sudah benar tidak dikomentari)

  • Tombol Search

Gambar 20. Kotak Pencarian

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).

Contoh Perbaikan :

Gambar 21. Kotak Pencarian (fix)

Dengan mengganti bentuk tombol dan mengubah labelnya menjadi ‘Go’ akan memberikan interpretasi yang lebih baik pada user.

  • Warna link hasil pencarian

Gambar 22. Link Hasil Pencarian

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 ini tentu sangat menyebalkan.

Contoh Perbaikan :

Gambar 23. Link Sebelum Dikunjungi

Gambar 24. Link Setelah Dikunjungi

Link sebelum dikunjungi akan berwarna biru dan setelah dikunjungi akan berwarna ungu. Ini sudah merupakan ketentuan umum pewarnaan link yang juga memudahkan para user yang buta warna.

  • Jumlah hasil pencarian yang terlalu banyak

Gambar 25. Hasil Pencarian

Terlihat ada 12 hasil pencarian pada satu halaman. Hal ini memaksa 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 :

Gambar 26. Hasil Pencarian (fix)

Mengurangi jumlah hasil pencarian menjadi 5 buah akan memberikan kemudahan dan kecepatan proses pencarian dalam satu halaman.

  •  Tata letak label halaman dan kotak pencarian

Gambar 27. Tata Letak

Alangkah lebih baik label halaman terletak di sebelah kiri dan kotak pencarian di sebelah kanan. Karena mata manusia cenderung melihat dari kiri ke kanan dan dari atas ke bawah. Ini merupakan navigasi yang kurang baik, seakan-akan membuat pengguna harus melakukan pencarian terlebih dahulu (awalnya bahkan saya mengira situs ini tidak memiliki halaman lain).

 Contoh Perbaikan :

Gambar 28. Tata Letak (fix)

Tata letak seperti ini memang cenderung umum seperti website lainnya. Inovasi memang perlu namun tidak melupakan esensi untuk membantu user  menyelesaikan keperluannya.

  •  Pencarian yang buruk

Gambar 29. Not Found

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

 Contoh Perbaikan :

Gambar 30. Not Found (fix)

Dengan memperbaiki backend system dari website, user yang belum mengetahui nama tempat wisata di Indonesia (turis luar negeri) akan sangat terbantu dalam proses pencariannya.

  • Tata letak konten pada homepage

Gambar 31. Homepage

Terlihat pada gambar di atas, homepage website ini begitu panjang dan terdapat konten yang sebenarnya tidak perlu. Website ini berusaha menampilkan gambar-gambar yang menarik untuk memikat pengunjung. Akan tetapi hal tersebut belumlah mencukupi, fungsi keseluruhan website ini sangat banyak, sambil memperkenalkan dan memasarkan tempat-tempat wisata di seluruh Indonesia juga menyediakan informasi seperti info terbaru terkait dunia wisata di Indonesia hingga penyedia travel tempat wisata.

Untuk itulah perlu manajemen konten yang baik pada homepage karena sebagai pengantar dari sebuah website. Antarmuka homepage yang baik akan membantu user untuk menjelajah dan melakukan navigasi untuk mencari apa yang ia butuhkan.

Contoh Perbaikan :

Gambar 32. Homepage (fix)

Beberapa penjelasan dari gambar di atas :

  1. Head banner and other – ukurannya telah diperkecil agar tidak memenuhi halaman saat dibuka. Pengubahan letak search box dan menambah page News agar mudah dan cepat diakses.
  2. Event-event uptodateevent yang sedang uptodate ditampilkan ke atas agar lebih mudah dilihat dan diketahui oleh pengunjung.
  3. Snapshot images – letaknya sedikit diubah tanpa mengilangkan kesan penting dimaksudkan agar konten pada penjelasan nomor 2 dapat terlihat.
  4. Right sidebar – konten pada penjelasan nomor 2 yang dinaikkan ke atas akan mengurangi jumlah konten pada right sidebar sehingga terlihat lebih efektif.
  5. Hide the news – konten  news dihilangkan karena dirasa konten ini merupakan konten tambahan pada website namun untuk kemunculannya telah di atasi pada penjelasan nomor 1.

C. Daftar Pustaka

Krug S. 2006. Don’t Make Me Think : A Common Sense Approach to Web Usability Second Edition. Berkeley : New Riders

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

Posted on October 23, 2011, in Interaksi Manusia dan Komputer and tagged , , , , , . Bookmark the permalink. Leave a comment.

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: