Analisis Antarmuka Pencarian dan Hasil Pencarian (SERP)

Antarmuka pencarian pada situs www.indonesia.travel sekilas tampak sempurna, text box yang diikuti dengan button berlabelkan kata search di samping kanannya. Namun ternyata ada beberapa kekurangan yang masih dimiliki antarmuka tersebut. Text box yang digunakan telah diatur agar menampilkan kata search dalam kondisi default. Hal ini merupakan kesalahan yang sering dilakukan developer saat membuat sebuah situs web (Justin, 2011). Sebenarnya hal itu tidak perlu dilakukan karena hanya akan memperumit keadaan. Akan lebih sederhana jika text box dibiarkan dalam keadaan kosong untuk kondisi default.

antarmuka pencarian pada situs www.indonesia.travel

Kesalahan lain yang terlihat jelas adalah penggunaan button yang tidak clickable. Sebagian orang mungkin berpikir bahwa hal ini sepele, namun kesalahan sepele ini dapat membuat pengguna bertanya-tanya mengenai button ini. Dan ketika pengguna bertanya-tanya, perhatiannya akan teralihkan dari task yang seharusnya ia kerjakan. Bukan tidak mungkin hal ini membuat pengguna tidak dapat menyelesaikan tugasnya atau yang terburuk, meninggalkan situs web tersebut (Krug, 2006).

Hal lain yang perlu diperhatikan adalah posisi search box tersebut pada situs. Sebenarnya posisi yang diterapkan dalam web ini tidak bermasalah. Search box telah diletakkan di tempat yang mudah dijangkau mata pengguna. Sayangnya beberapa pengguna akan mengharapkan search box ini ada di pojok kanan atas sebuah situs (Travis, 2009). Karena itu tidak ada salahnya jika kita meletakkannya di tempat yang diharapkan pengguna.

Kapasitas karakter yang mampu ditampung text box tersebut adalah 26 karakter. Kapasitas text box yang dimaksud di sini adalah banyaknya karakter yang mampu ditampilkan text box, bukan maksimal karakter dari keywords. Cukup banyak untuk ukuran situs ini, namun tetap kalah dengan kapasitas text box google yang mampu menampung 61 karakter.

Selanjutnya mari kita beralih pada hasil pencarian yang ditampilkan. Pertama saya mencoba memasukkan keywords kosong (empty kerwords) dan menekan tombol enter pada keyboard. Kemudian didapatkan keluaran seperti yang ditunjukkan gambar di bawah ini.

hasil pencarian dengan empty keywords

Dari gambar tersebut terlihat bahwa sistem menampilkan pemberitahuan untuk memasukkan keywords. Hal ini merupakan satu nilai plus untuk situs ini karena mampu menangani empty keywords. Sebuah sistem pencarian harus mampu menangani empty keywords atau empty queries dengan baik jika ingin dikatakan sebagai sistem yang baik (Travis, 2009).

Kemudian saya mencoba melakukan pencarian untuk kata ‘borobuduur’. Ternyata sistem tidak berhasil menemukan file yang sesuai dengan keywords yang saya berikan. Satu hal yang perlu digaris bawahi adalah tidak adanya pemberitahuan dari sistem bahwa mungkin saja terjadi kesalahan penulisan pada keywords yang saya masukkan. Memang pemberitahuan ini tidak terlalu mendesak karena di atas hasil setiap pencarian, telah ditampilkan keywords yang digunakan untuk pencarian tersebut. Sistem juga tidak memberikan keywords anjuran terkait dengan keywords yang saya masukkan.

hasil pencarian dengan keywords 'borobuduur'

Selanjutnya saya melakukan pencarian dengan keywords ‘borobudur’. Tidak lama kemudian beberapa hasil pencarian muncul di situs ini. Hal yang langsung menjadi pertanyaan saya adalah, “Ada berapa banyak hasil pencarian sih ini? Kok tidak ada keterangannya? Harus dihitung satu per satu kah?”. Situs ini memang belum menampilkan keterangan mengenai banyaknya hasil pencarian yang didapatkan. Padahal hal ini menjadi sesuatu yang harus ada pada suatu sistem pencarian. Hasil pencarian harus mampu menegaskan berapa banyak hasil yang didapatkan dan berapa banyak hasil yang ditampilkan di setiap halaman (Travis, 2009).

Hal lain yang menarik adalah cuplikan dari setiap artikel yang ditampilkan merupakan kalimat-kalimat pertama pada artikel versi lengkapnya. Kalimat-kalimat tersebut kadang tidak berhubungan dengan keywords yang dimasukkan. Akibatnya pengguna sulit untuk memutuskan mana artikel yang sesuai dengan keinginannya dan mana yang tidak sesuai. Akan lebih baik jika yang ditampilkan adalah cuplikan yang berhubungan dengan keywords-nya.

Situs ini juga tidak merubah warna link yang telah dikunjungi. Sehingga ketika dihadapkan pada hasil pencarian yang banyak, akan sulit mengingat mana link yang sudah kita kunjungi dan mana yang belum.

Hasil pencarian yang didapatkan ditampilkan dalam tab-tab sesuai kategori yang dibutuhkan. Rasanya ini cukup memudahkan pengguna untuk memilih artikel yang tepat sesuai kebutuannya.

hasil pencarian dengan keywords 'borobudur'

Berikut ini beberapa perbaikan yang bisa dilakukan untuk situs ini:

1.      Pindahkan search box ke pojok kanan atas situs dan tampilkan keywords yang dicari.

2.      Ganti button lama dengan button baru yang lebih clickable.

3.      Tampilkan banyaknya hasil pencarian yang ditemukan dan hasil pencarian yang ditampilkan di setiap halaman.

4.      Ubah warna link yang telah dikunjungi.

5.      Beri nomor pada setiap hasil pencarian.

6.      Ganti isi cuplikan dengan bagian artikel yang berhubungan dengan keywords dan cetak tebal keywords pada cuplikan.

7.      Geser nomor halaman ke bagian tengah agar lebih setimbang.

8.      Tambahkan keywords anjuran.

Hasil Perbaikan1

Hasil Perbaikan 2

Referensi:

Justin. 2011. 10 Usability Guiedlines for Designing the Search Interface [terhubung berkala]. http://usabilitygeek.com/10-usability-guidelines-for-the-search-interface/ [23 Oktober 2011].

Krug, Steve. 2006. Don’t Make Me Think! A Common Sense Approach to Web Usability, Second Edition. California: New Riders Publishing.

Travis, David. 2009. 20 Search Usability Guidelines [terhubung berkala]. http://www.userfocus.co.uk/resources/searchchecklist.html/ [23 Oktober 2011].

READ MORE - Analisis Antarmuka Pencarian dan Hasil Pencarian (SERP)

Top 10 Mistakes in the Web Design

Sepuluh kesalahan yang sering ditemukan pada situs web adalah sebagai berikut:

a.       Bad search : www.bni.co.id

Pada situs tersebut, hasil pencarian yang didapatkan tidak optimal. Sebagai contoh ketika dilakukan pencarian dengan keywords ‘kurs’, hasil yang ditampilkan tidak ada yang sesuai. Bukannya menampilkan informasi kurs mata uang, yang ditampilkan justru informasi produk BNI yang di dalamnya terkandung kata ‘kurs’. Setelah mengecek di google, ternyata informasi kurs di situs resmi BNI menggunakan judul ‘nilai tukar mata uang asing’. Kemudian saya kembali ke situs BNI dan melakukan pencarian dengan keywords ‘nilai tukar mata uang asing’. Ternyata hasil yang ditampilkan tetap tidak sesuai dengan yang diharapkan.

Kekurangan yang kedua dari situs ini adalah banyaknya hasil pencarian tidak ditampilkan. Akibatnya pengguna tidak bisa mengetahui berapa banyak hasil yang ditemukan dari pencarian yang mereka lakukan. Memang di samping setiap hasil terdapat nomor yang dapat dijadikan acuan untuk melihat banyaknya hasil yang ditemukan. Namun hal ini berlaku hanya jika hasil pencarian yang ditemukan sedikit.

           Kekurangan berikutnya adalah tidak ditampilkannya keywords pencarian dalam hasil sehingga pengguna tidak tahu pencarian apa yang tadi ia lakukan. Pengguna juga akan sulit mengetahui ketika terjadi kesalahan pengetikan keywords karena tidak ditampilkannya keywords tersebut. Ada baiknya judul halaman yang tadinya hanya ‘Hasil Pencarian’ diubah menjadi ‘Hasil Pencarian terhadap Keywords’. Cuplikan dari setiap hasil sebaiknya merupakan bagian yang mengandung keywords. Kemudian dalam cuplikan hasil pencarian, sebaiknya keywords dicetak tebal.

           Kekurangan lainnya adalah tidak ditampilkannya keywords yang disarankan ketika terjadi kesalahan pada pengetikan keywords. Akibatnya pengguna tidak tahu apakah keywords yang ia cari memang tidak ada atau terdapat kesalahan pengetikan pada keywords tersebut.

           Ketika keywords yang dicari tidak ditemukan, situs ini hanya akan menampilkan halaman kosong dengan judul ‘Hasil Pencarian’ di atasnya. Ada baiknya jika diberi pemberitahuan bahwa memang tidak ada hasil pencarian yang sesuai.

Berikut beberapa screenshot dari web tersebut:

hasil pencarian dengan keywords 'kurs'

Hasil Pencarian dengan Keywords 'kusr'

Hasil Pencarian dengan Keywords  'nilai tukar mata uang asing'

 

b.       PDF File for Online Reading : www.bps.go.id

Pada situs resmi BPS ini, artikel-artikel yang panjang akan ditampilkan berupa cuplikannya saja dengan link menuju artikel lengkap di bawah cuplikan tersebut. Artikel lengkap tersebut sayangnya ditampilkan dalam format pdf yang kurang disukai sebagian pengguna. Namun pada situs tersebut telah ditampilkan pemberitahuan bahwa link yang bersangkutan akan membuka halaman bertipe pdf sehingga pengguna bisa ‘mempersiapkan diri’.

Cuplikan Salah Satu Artikel di Situs BPS

c.       Not Changing the Color of Visited Links : www.indonesia.travel

ada situs ini tidak ada perubahan warna pada link yang telah dikunjungi. Akibatnya pengguna sulit mengetahui link mana saja yang telah dikunjungi karena tidak ada tanda yang menunjukkan bahwa sebuah link telah dikunjungi.

Salah Satu Link yang Telah Dikunjungi

Salah Satu Link yang Telah Dikunjungi

d.       Non-scannable Text : www.bps.go.id

Pada situs ini, artikel yang berukuran panjang memang akan ditampilkan cuplikannya saja. Namun cuplikan itu sendiri sudah cukup panjang. Sayangnya pada artikel-artikel ini format font yang digunakan seragam sehingga pengguna akan sulit melakukan scanning pada artikel-artikel tersebut. Ada baiknya jika kata-kata kunci dicetak tebal sehingga pembaca tahu bagian mana yang sebenarnya penting dari artikel tersebut. Jika suatu artikel menampilkan data yang teratur, ada baiknya data tersebut dimasukkan ke dalam sebuah tabel. Tidak ada salahnya juga jika kemudian data tersebut ditampilkan dalam bentuk grafik sehingga pengguna bisa segera menganalisis data tersebut.

Salah Satu Artikel di Situs BPS

 

Secara umum ternyata situs ini menggunakan format font yang seragam. Akibatnya pengguna sulit untuk membedakan mana informasi yang penting dan mana yang kurang penting.

Halaman Beranda Situs BPS

 

e.       Fixed Font Size : depkeu.go.id

Ukuran font yang kecil dan jarak spasi yang begitu rapat menyulitkan pengguna berusia lanjut untuk membaca situs ini. Tapi sayangnya ukuran tersebut tidak bisa diubah.

Halaman Beranda Situs Depkeu

f.       Page Title with Low Search Engine Visibility : megaclick.net

Situs ini menampilkan judul halaman yang sama pada label di setiap tab untuk semua halaman apapun seperti yang tampak pada gambar 10. Hal ini merepotkan ketika beberapa tab dibuka secara bersamaan. Pengguna tidak akan mampu mengenali halaman yang satu dengan halaman yang lain hanya dengan melihat label pada tab. Mereka harus membuka satu per satu tab untuk mencari halaman yang dimaksud.

judul pada tab browser

Selain itu, kekurangan lain dari situs ini adalah tidak adanya judul halaman untuk setiap halaman. Hal ini menyulitkan pengguna untuk mengetahui posisi mereka berada sekarang. Yang mungkin bisa membantu adalah adanya efek ‘tertekan’ pada menu halaman tempat kita berada sekarang.

halaman Site Directory

Halaman Beranda Situs Indonesia Travel 1

 

g.       Anything that Look Like an Advertisement : www.indonesia.travel

Situs ini mempromosikan acara-acara yang tengah diselenggarakan dengan menampilkannya di bagian kanan situs. Awalnya saya kira ini memang space untuk iklan dari sponsor, tapi setelah dilihat lebih teliti dan dibuka salah satu link-nya ternyata bukan. Hal ini sebaiknya diperbaiki karena pengguna seperti saya bisa saja menganggap bahwa bagian itu memang iklan dan melewati informasinya begitu saja.

Halaman Beranda Situs Indonesia Travel 1

Halaman Beranda Situs Indonesia Travel 2

h.       Violating Design Conventions : mamacheesies.com

Situs ini menggunakan background, format font, dan warna yang berbeda untuk setiap halaman yang berbeda. Penggunaan desain yang tidak konsisten ini dapat mengurangi kepercayaan pengguna pada web ini. Ketika berpindah dari satu halaman ke halaman yang lain mereka bisa saja bertanya-tanya. Sebenarnya saya masih ada di situs yang sama atau tidak? Kenapa halaman yang muncul seperti ini? Dan masih banyak lagi. Semakin banyak pertanyaan di pikiran pengguna, semakin banyak pula keraguan yang muncul terhadap sebuah situs web. Jika pengguna ragu pada suatu web, semakin besar kemungkinan web resebut akan ditinggalkan.

Halaman Beranda Situs Mama Cheesies

Halaman Bags Situs Mama Cheesies

Halaman Crocher Situs Mama Cheesies

i.       Opening New Browser Windows : www.shopstyle.com

Situs ini merupakan situs e-commerce di bidang fashion. Ketika saya memilih salah satu produk, sebut saja produk A, maka browser window baru akan dibuka. Browser window yang baru ini akan mengakses situs web asal dari produk A. Misalnya produk A berasal dari butik B, maka browser window baru akan tersambung ke situs web butik B. Hal ini bisa saja menyebabkan saya tidak kembali ke shopstyle karena ada kemungkinan saya tidak sadar bahwa sekarang saya sudah tidak ada di shopstyle melainkan di situs butik B.

Salah Satu Halaman di Situs Shopstyle

Window Baru yang Ditampilkan

 

j.       Not Answering User’s Questions : chachashop.com

Situs ini tidak menyediakan informasi yang jelas bagi para penggunanya. Seperti yang ditampilkan pada gambar 15, produk nomor 1-7 dihargai Rp 100.000 kecuali produk nomor 5. Lalu yang jadi pertanyaan, produk nomor 5 berapa harganya? Sayangnya tidak ada informasi yang menjawab pertanyaan tersebut. Selain itu, situs ini juga tidak menampilkan detail produknya. Untuk produk baju misalnya, situs ini tidak menampilkan informasi bahan baju tersebut, ukuran yang tersedia, dan cara pencucian baju. Padahal informasi tersebut sangat diperlukan pengguna yang memang ingin membeli barang dari situs ini.

Bagian yang Tidak Jelas

READ MORE - Top 10 Mistakes in the Web Design

QR Code, Si Kecil Berkemampuan Besar

Waktu pertama kali melihat gambar di bawah ini, saya sempat bertanya-tanya. Sebenarnya ini gambar apa ya? Dan jawaban-jawaban aneh muncul di kepala saya? Labirin? Bagian dari tes IQ? Lukisan abstrak? Apa sih ini? Sampai kemudian saya tau kalau ini merupakan gambar QR Code. Tapi kemudian pertanyaan saya berubah. QR Code itu apa ya?

Quick Response (QR) Code sebenarnya merupakan bentuk evolusi kode batang dari satu dimensi menjadi dua dimensi. Berbeda dengan barcode (kode batang) yang hanya memiliki satu sisi penyimpan data (penyimpanan informasi hanya dilakukan secara horizontal), konon QR Code memiliki dua sisi berisi data (penyimpanan dilakukan secara horizontal dan vertikal). Inilah sebabnya QR Code mampu memuat lebih banyak informasi ketimbang barcode. Informasi yang dapat ditampung dalam QR Code itu sendiri dapat berupa URL sebuah website, data teks, sms, maupun informasi yang berisi nama, alamat, dan nomor telepon.

QR Code pertama kali dikembangkan oleh Denso Wave, sebuah divisi Denso Corporation yang merupakan sebuah perusahaan Jepang bagian dari Toyota group. Kode ini kemudian dipublikasikan pada tahun 1994 dan tanpa diduga karena kecepatan membaca dan akurasi yang tinggi, QR code sangat berkembang di daerah Timur Tengah dan Eropa walaupun tidak sepopuler di negeri asalnya Jepang. Awalnya QR Code hanya digunakan untuk pelacakan kendaraan bagian di manufaktur. Namun kini kode QR digunakan dalam konteks yang lebih luas, termasuk aplikasi komersial dan kemudahan pelacakan aplikasi berorientasi yang ditujukan untuk pengguna telepon selular. Di Jepang sendiri, penggunaan kode QR sangat populer, hampir semua jenis ponsel di Jepang bisa membaca kode QR sebab sebagian besar pengusaha di sana telah memilih kode QR sebagai alat tambahan dalam program promosi produknya, baik yang bergerak dalam perdagangan maupun dalam bidang jasa. Pada umumnya kode QR digunakan untuk menanamkan informasi alamat situs suatu perusahaan.

Selain karena lebih besarnya informasi yang dapat ditampung QR Code dibandingkan barcode, QR Code juga dapat dibaca dari segala arah dengan hasil yang sama berkat adanya tiga buah segi empat di ketiga sisinya. Hal ini tentulah menjadi kelebihan tersendiri bagi QR Code karena mampu meminimalkan kesalahan baca akibat salah posisi QR Code. Selain itu, QR Code ini termasuk mudah penggunaannya. Dengan hanya berbekal sebuah handphone berkamera, atau bahkan yang tanpa kamera, kita sudah dapat menggunakan QR Code. Kelebihan-kelebihan inilah yang membuat QR Code semakin banyak digunakan dalam kehidupan sehari-hari.

Salah satu penggunaan QR Code yang terlintas di kepala saya adalah penggunaannya untuk memastikan keaslian suatu produk. Pertama, QR Code yang berisi kode produksi berbeda untuk setiap produk ditempelkan pada kemasan produk. Kemudian handphone kita dapat digunakan untuk memindai QR Code tersebut dan menghubungkan kita ke website produk yang alamatnya juga tercantum dalam kode tersebut. Selanjutnya kode produksi akan dicocokkan dengan kode produksi pada website dan dicek keasliannya.

Selain itu, ada baiknya jika QR Code ini juga dicantumkan pada buku-buku yang dijual di pasaran. Informasi seperti rating buku dan url website dapat dicantumkan pada QR Code. Website yang nanti diakses dapat berisi review dan komentar pembaca terhadap buku yang bersangkutan.

Penggunaan lainnya yang mungkin akan menarik adalah mencantumkan QR Code dalam "couple rings" anda. Daripada mengukirkan nama pasangan anda seperti yang layaknya dilakukan pasangan lain, bukankah akan lebih menarik jika anda mencantumkan QR Code pada cincin pasangan anda?

Terlepas dari segala ide saya tentang penggunaannya, QR Code ini memang merupakan si kecil berkemampuan besar...

G64090088

READ MORE - QR Code, Si Kecil Berkemampuan Besar

Tugas IMK 1

Setelah berlama-lama bingung mencari ide untuk mengerjakan tugas IMK, akhirnya pilihan saya jatuh pada situs toko es krim online ini.

Web sederhana milik sebuah toko es krim bernama Jeni's Ice Cream ini menawarkan layanan pembelian es krim secara online yang akan diantar kemana saja. Bagi anda yang ingin mengetahui lebih lanjut dapat mencoba link berikut jenisicecreams.

Begitu anda mengakses link tersebut, tampilan seperti gambar di atas akan menyambut anda. Sejak pertama kali melihat tentu anda akan sadar bahwa web ini merupakan sebuah toko es krim online. Setelah melihat ke bagian bawah, ternyata web ini tidak hanya menawarkan es krim tapi juga perlengkapan untuk menyajikan es krim dan beberapa aksesoris toko mereka. Ini artinya halaman depan web, atau yang lebih kita kenal dengan halaman home, mampu menjawab dengan baik pertanyaan-pertanyaan seperti web apa ini dan aktivitas apa saja yang dapat kita lakukan di web ini. Namun sayangnya pertanyaan lain seperti kenapa saya harus memilih menggunakan web ini daripada menggunakan web yang lain belum terjawab. Jadi begitu melihat bagian home-nya beberapa pengguna mungkin saja akan berpikir 'Ok, saya mengerti web apa ini. Tapi kenapa saya harus menggunakan web ini? Kenapa saya tidak menggunakan web lain?' dan pergi meninggalkan web ini sebelum melihat lebih dalam isinya.

Penggunaan tanda '^' terbalik di bagian menu untuk menerangkan bahwa sub-menu akan muncul saat kursor mendekati salah satu pilihan menu termasuk pilihan cerdas karena cara ini mudah dimengerti pengguna.

Masih di halaman depan, ada sebuah video promosi yang ditayangkan. Menarik memang. Tapi bagi mereka yang koneksi internetnya lambat mungkin akan sulit untuk menikmati video ini.

Di bawah video ada dua buah gambar yang clickable untuk memilih berdasarkan apa nanti kita berbelanja, berdasarkan rasa atau koleksi (paket). Pilihan yang bagus karena beberapa pengguna memiliki kecenderungan untuk mengklik sebuah gambar. Begitu salah satu gambar kita klik (misalnya kita klik gambar yang paling kiri), akan muncul tampilan berikut :

Di sini kita bisa melihat bahwa gambar yang tersambung ke halaman lain kembali digunakan. Walaupun judul setiap produk ternyata clickable, namun adanya gambar ini sangat membantu pengguna. Di bawah setiap produk terdapat tombol untuk memasukkan produk ke daftar belanja. Sayangnya tombol tersebut kurang nampak seperti tombol. Beberapa pengguna mungkin akan memerlukan beberapa detik sebelum menyimpulkan bahwa kotak-kotak tersebut adalah tombol. Ada baiknya bila tombol-tombol tersebut diberi sedikit efek agar lebih jelas bentuk tombolnya.

Apabila kita pilih salah satu produk, akan muncul tampilan sebagai berikut:

Dapat kita lihat bahwa masalah tombol kembali terjadi seperti pada halaman sebelumnya. Berikut beberapa tampilan dari halaman-halaman lain:

Setelah puas berkeliling web ini saya ingin kembali ke halaman depan web atau sering disebut beranda. Tapi kemudian saya sadar bahwa web ini tidak memiliki pilihan home dalam daftar menunya. Setelah tengok kanan-kiri mata saya tertuju pada logo toko yang terdapat di pojok kiri atas web. Benar dugaan saya, logo toko tersebut juga merupakan link untuk kembali ke halaman depan web. Langkah ini memang pilihan cerdas untuk menghemat ruang untuk menu. Tapi untuk beberapa pengguna, hal ini mungkin bisa menjadi sesuatu yang membingungkan.

Secara umum web ini sudah dapat memenuhi kebutuhan user dan mampu mencapai tujuan awal pembuatan web ini. Namun ada beberapa hal kecil yang cukup mengganggu, yang walaupun terlihat sepele namun sebaiknya diperbaiki, seperti tombol yang kurang 'nyata'.

Begitulah menurut pendapat saya, bagaimana menurut pendapat Anda?

Anisaul Muawwanah

READ MORE - Tugas IMK 1

Selalu suka mereka

READ MORE - Selalu suka mereka