Usability Transaksi di Toko Online

Posted: April 23, 2009 at 15:45:08 by Dani Iswara. Words count: 734.
Last updated: July 31, 2010 at 12:09:26.

Setelah yang lalu, Simulasi Web Usability dari Google ke Homepage, kali ini akan fokus ke proses transaksi. Masih menggunakan toko komputer online, Bhinneka.com, sebagai contoh. Pada tulisan sebelumnya, saya akhirnya menelusuri pencarian 'notebook'. Karena dari beberapa kata kunci yang dicoba, hanya dengan kata kunci itu, situs Bhinneka.com muncul di halaman pertama hasil pencarian.

Menelusuri 'notebook' di Bhinneka.com

1. Memilih menu navigasi bertingkat, 'Computer' › 'Notebook HP'.
2. Ada menu 'breadcrumb' yang aksesibel di sisi kiri, menarik. Sedikit di bawah (jika dengan ukuran jendela peramban 900x600px kesukaan saya, 'above the fold' situs kurang berhasil, karena harus menggulung ke bawah), tertulis 'Notebook/Laptop HP List'. Di kanannya ada fasilitas 'Convert to [Rupiah]'. Saya meng-klik-nya.
3. Sedikit menggulung/'scroll' ke bawah. Memilih urutan berdasarkan 'Lowest Price'. Ada opsi 'Compare' juga.
4. Menggulung ke bawah lagi. Coba klik memilih produk 'netbook' HP 1001 Mini Note seharga Rp 5.159.000,00 dengan spesifikasi:

   Atom N270, 1GB DDR2, 60GB HDD, WiFi, Bluetooth, Camera, VGA Intel GMA950 64MB (shared), 10.2" WXGA, Win XP Home.

5. Di halaman baru ini
   • 'Above the fold', harganya berubah menjadi US$ lagi. Tapi saat di-'hover', ada keterangan harga Rupiahnya (Gambar 1). Menurut saya, akan lebih aksesibel dan 'usable' jika konversi harga disertakan sebagai teks biasa di sebelahnya. Misal: US$ 469.00 (5 juta 159 ribu Rupiah). :)
     

     Gambar 1. Tampak hasil konversi mata uangnya hanya dengan bantuan tetikus.

   • Ada opsi 'Customer Reviews'. Saya coba klik. Sudah ada templat review (opsional). Entah apakah hasil review ini dapat ditautkan dengan suatu URI atau taut permanen. :)
   • Gulung ke bawah, memuat spesifikasi produk yang lebih rinci
   • Jika informasinya kurang jelas, sudah tercantum nomor telepon, taut menuju formulir kontak, dan 'live chat'.

Saya setuju dengan Tibidip.com bahwa tulisan 'This product goes well with' pada isi keranjang sementara, kurang 'usable' karena sulit dibaca. Seperti calon konsumen lainnya, menurut eCommerce Usability Journal, saya pun menyukai informasi rinci terhadap suatu produk (87% konsumen menyetujuinya) dan membandingkan harga.

Bingung menentukan pilihan 'notebook'?

Sejauh ini cukup mudah menggunakannya. Bagaimana jika calon pembeli ingin membandingkan dengan 'notebook' lainnya? Atau bingung memilih produk yang mana? Pada menu 'Computer' › 'Notebook', gulung ke bagian bawah, ternyata ada fitur Rekomendasi Notebook berdasarkan:

Brand Platform Processor Type Operating System Harddisk Capacity Display Max. Resolution Display Size Price Range.

Saya berharap fitur ini harusnya lebih mudah ditemukan lewat suatu taut. Jika bisa, fitur ini ada untuk semua golongan produk. Atau dikelompokkan dengan judul, misalnya: Bingung menentukan [notebook-pilihan link] [desktop-pilihan link]? :)

Bertransaksi 'online' di Bhinneka.com

Saya coba menu transaksinya.

1. Klik 'BUY' atau 'BELI' HP 1001 Mini Note. Mungkin lebih enak dilihat jika ada efek saat tombol ditekan. :) Muncul--'pop-up'--jendela kecil. Entah apa alasannya masih memakai model ini. Biasanya pengguna langsung menutup jendela kecil ini. :(
2. Tekan 'Check Out' untuk melanjutkan atau 'Close' di kanan bawah untuk melanjutkan belanja. Saya pilih 'Check Out'.

Masuklah ke bagian keranjang belanjaan ('Shopping Cart'):

1. Shopping Cart
   • Memilih jasa pengiriman.
   • Check Out (sebagai 'non-member') Tidak harus menjadi anggota dulu.
2. Data Pengiriman Setuju dengan NavinoT.com (Optimasi Situs Toko Online dalam rangka Kontes Kritis 2009) dan Tibidip.com, pemilihan kota tujuannya membingungkan. :(
3. Pembayaran
   • Pilihan metode pembayaran.
   • Persetujuan syarat dan kondisi.
4. Konfirmasi
5. Selesai

Ada berapa langkah? Belanja di Bhinneka.com cukup 5 langkah! :) Mungkinkah diperingkas?

Aksesibilitas formulir transaksi

Seperti saya sebut pada tulisan seri pertama, Review Bhinneka.com, Aksesibilitas dan Kebergunaannya, formulir transaksi pun belum menyertakan:

• tag <label> di tiap input.
• beberapa gambar juga tidak memiliki atribut alt.

Kontak via pesan singkat

Setelah diperhatikan kembali, informasi kontak via SMS ('Short Message Service'), Gambar 2, tidak konsisten ada di tiap halaman web.

Simpulan 'Usability' Transaksi 'Online' di Bhinneka.com

Berikut ini simpulan dan saran sesuai tulisan di atas:

1. Konversi harga sebaiknya dimunculkan dengan tidak bergantung pada efek 'hover' saja.
2. Tidak semua tombol disertai efek jika di-'hover', di-'focus', dan ditekan. Sebaiknya perhatikan juga pengguna yang tidak memakai tetikus.
3. Fitur Rekomendasi Pilihan sebaiknya dibuat agar lebih mudah dicapai dan tersedia untuk kategori produk yang lain.
4. Menyediakan taut review konsumen berupa pranala permanen, jika memungkinkan/belum ada. Sehingga mudah dirujuk oleh pengguna lain.
5. Ketiadaan tag <label> dan atribut alt di formulir transaksi.
6. Seberapa mudah fitur transaksinya? Selain opsi pemilihan kota tujuan, selebihnya relatif mudah.
7. Kontak SMS dibuat lebih 'usable'.

Saran untuk calon konsumen

Beberapa komentator di tulisan sebelumnya menyatakan situs Bhinneka.com berat diakses. Saran saya:

1. Nonaktifkan tampilan gambar dan JavaScript di sisi peramban. Aktifkan jika perlu saja.
2. Tentukan pilihan produk yang ingin dicari. Dengan kata kunci yang lebih spesifik, telusuri di Google dengan, misalnya: netbook hp 1001 mini site:www.bhinneka.com.
3. Jika sekadar melihat harga, unduh brosur 'price list' yang tersedia.
4. Kontak langsung pengelola situs.

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

Just unessential weblog

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