Simulasi Web Usability dari Google ke Homepage

Posted: April 23, 2009 at 15:31:33 by Dani Iswara. Words count: 680.
Last updated: July 9, 2010 at 15:58:48.

Catatan ini menceritakan simulasi usability situs web toko komputer 'online', Bhinneka.com. Masih terkait dengan tulisan sebelumnya, aksesibilitas dan kebergunaan Bhinneka.com. Saya sebagai pengunjung/calon pembeli, memakai peramban Mozilla Firefox 3.0.9 versi Linux. Semua fitur (gambar, 'JavaScript', flash) diaktifkan. Kecuali ekstensi Adblock Plus yang tetap aktif. Jendela peramban dimaksimalkan seukuran layar komputer, 1024x768px. Perjalanan dimulai dari hasil pencarian di Google hingga ke laman/'homepage'.

Mulai dari Mencari di Google

Mari kita mulai. Anggaplah saya tidak tahu situs dimaksud. Hasil pencarian di Google Indonesia untuk kata kunci berikut dan posisi situs Bhinneka.com:

1. harga notebook toko komputer online: nomor 5,
2. harga modem toko komputer online: tidak ada di 2 halaman pertama,
3. harga dvdrom toko komputer online: tidak ada di 2 halaman pertama.

Sebaliknya, ada 2-3 situs web rival yang selalu ada di 2 halaman awal. Penggunaan kata kunci saya sesuaikan dengan yang tercantum pada (selain tag <title>):

<meta name="keywords" content="Toko Komputer Online, Computer Products Distribution in Indonesia - Produk Komputer, plotter, notebook, digitizer, scanner, motherboard, memori, software, accessories, printer, network, CAMM, video editing, CD album, UPS, Modem, CDRom, DVDRom, MIcron, Encad, Roland, Gerber, caseLogic, Pinnacle" /> <meta name="description" content="We Sell Computer Hardware, Peripheral, Accessories and Software. Kami menjual berbagai produk komputer di Indonesia dan perlengkapannya. Check harga kami dan bandingkan!!!" />

Benar, mesin pencari Internet modern tidak terlalu mementingkan meta name="keywords". Tapi setidaknya, dengan kata kunci itulah situs tersebut ingin dikenali, dikunjungi, lalu meraih keuntungan/profit. Tentu bukan sekadar sebagai pembanding harga, bukan? Hasil pencarian saat itu mungkin juga dipengaruhi banyak faktor lainnya. Menurut LynxView, seperti pada Gambar 1 di bawah, teks berikut yang akan terbaca oleh Google: Kualitas teks kurang adekuat di mata Google? Kata kunci dan <title> kurang sesuai dengan konteks? Hasil pencarian nomor satu ditelusuri. Menuju laman/'homepage'.

Kesan pertama

Sebelum menu navigasi, ada taut strategis untuk Register, Sign In, Help. Di bawahnya ada logo berbasis flash, taut Shopping Cart, menambahkan fasilitas pencarian Bhinneka.com ke peramban, dan kolom pencarian.

Logo, posisi, 'flash'

Penempatan logo di sebelah kiri sudah dibahas pada tulisan saya sebelumnya. Gambar dan warna latar kota Jakarta dengan gedung MPR/DPR dan Tugu Monas terasa kurang pas ada disana (Gambar 2). Aksesibilitas format 'flash' sebagai logo sudah diungkapkan oleh NavinoT.com di Optimasi Situs Online sebagai rangkaian Kontes Kritis 2009.

Fasilitas pencarian

Saya berpikir tombol dengan kata 'SEARCH' di sebelah kiri kolom pencarian itu bisa di-klik. Karena tampilannya mirip dengan tombol "GO" di seberangnya. Ternyata tidak! :) Saat mencoba mesin pencarinya:

• Jika pencarian lebih spesifik, misal dengan kata kunci: netbook hp 1001 mini note, pengguna langsung disajikan halaman yang memuat rincian produk dimaksud.
• Dengan kata kunci netbook hp mini, menghasilkan 6 item dan ada pilihan untuk membandingkannya (fitur 'compare').
• Jika kata kunci tidak spesifik, hasilnya "Sorry, your search returned no result".

Saran saya, mungkin fitur (mesin) Rekomendasi--fitur ini saya ketahui belakangan saat simulasi--bisa ditempatkan di halaman hasil pencarian ini. :)

Posisi kursor saat 'tabbing' kurang jelas

Seperti yang pernah saya tulis di 6 Hal Aksesibilitas Blog yang Mungkin Terlupakan, posisi kursor sulit ditemukan saat berpindah taut/kolom dengan tab. Lebih nyaman jika a:link, a:visited, a:hover, a:focus, a:active diberi warna latar dan garis bawah.

Masalah dengan position:fixed

Posisi menu kalkulator di bagian bawah dengan pengaturan CSS (Cascading Style Sheets) position:fixed, biasanya bermasalah saat pencarian kata. Misalnya, ketika saya ctrl+f, ketik email, lalu f3 beberapa kali. Saya tidak menemukan alamat e-mail Bhinneka.com! Padahal sebenarnya ada. Karena tertutup oleh menu kalkulator tadi. :)

Simpulan

Hal-hal kecil 'usability' tersebut mungkin sepele. Apalagi jika ada prioritas lain yang harus didahulukan sebagai bagian dari strategi. Kali ini saya hanya menemukan:

1. pada 'header':
   • logo ada di kanan, lebih 'usable' di kiri,
   • logo berbasis flash yang tidak bisa di-klik,
   • gambar latar yang kesannya kurang serasi dengan tema keseluruhan,
2. fasilitas pencarian
   • tombol 'SEARCH' yang agak membingungkan,
   • halaman 'no result' yang kurang 'usable',
3. posisi kursor saat 'tabbing' sebaiknya diberi penanda tertentu,
4. menu dengan position:fixed bisa 'menyembunyikan' informasi.

Tulisan ini berlanjut di Usability Transaksi di Toko Online.

Share on: Delicious™ | Digg™ | Facebook™ | Twitter™.

Just unessential weblog

Dani Iswara, mail me: [myfirstnamelastname]@gmail.com.