Review Bhinneka.com – Aksesibilitas dan Kebergunaannya

Siapa konsumen pernak-pernik komputer yang belum pernah mendengar nama besar situs Bhinneka.com? Tulisan ini akan memuat review seputar aksesibilitas dan kebergunaan (usability) situs web tersebut.

Pada tag <title>, situs Bhinneka.com menggunakan kalimat:

Bhinneka No. 1 Computer Webstore in Indonesia, Toko Komputer Online.

Jika sudah menjadi nomor satu di hasil pencarian Google Indonesia dengan kata kunci toko komputer online, lalu apa? Apakah masih ada yang kurang? Perlu dioptimasi lagi? Faktor konversi mana yang masih bisa dimaksimalkan untuk sebuah toko komputer ‘online’?

Tulisan ini hanya berkomentar mengenai aksesibilitas, antarmuka, dan kebergunaan situs tersebut dari fitur umumnya. Belum menyinggung langsung dari sisi ‘e-Commerce’-nya.

Tampilan situs akan dicoba dengan peramban Mozilla Firefox 3.0.9–yang level standar webnya ada diantara Opera-Safari & Internet Explorer– dan peramban Blazer 4.0 di sistem operasi Palm.

Mungkin pada tulisan berikutnya bisa dimuat mengenai simulasi transaksi.

Mengapa aksesibilitas dan kebergunaan?

Bukankah sebuah situs web/blog dibuat untuk dapat diakses seluas-luasnya oleh lebih banyak pengguna/pengunjung/konsumen, perangkat/media, dalam berbagai koneksi, kapan saja, dan dimana saja? Ubiquitous.

Pengguna ’screen reader’ atau ‘aural agent’ bukan hanya orang dengan ketidakmampuan melihat secara normal–buta parsial & total, tapi juga pemakai iTunes dan iPod versi tertentu (memiliki ’spoken menus’) yang sedang berkendara.

Jika ada peluang untuk itu, kenapa tidak? Terlebih bagi suatu situs usaha daring (‘online’). Dimana sebagian proses transaksi terjadi melalui antarmuka web.

Laman Bhinneka.com

Saya mulai dari lamannya (‘homepage’). Lihat Gambar 1 di bawah:

Gambar 1. Tampilan laman situs Bhinneka.com dalam moda tanpa gambar. Jendela peramban berukuran 900×600px.

Mengapa tanpa gambar? Setidaknya sedikit banyak menghemat waktu tampil (‘loading time’) saat Internet lambat. Dan juga relatif lebih mudah menilai aksesibilitas dan kebergunaannya.

Gambar 2. Produk dan layanan Bhinneka.com dalam moda tanpa gambar, saat tetikus di-’hover’, dan sebagian gambar lainnya ditampilkan.

Berikut ini ulasannya:

Logo, gambar, atribut title – alt, label, kontras warna

1. Logo

   NavinoT.com sudah membuka ulasan melalui tulisan berjudul Optimasi Situs Toko Online. Berikut ini beberapa kuotasinya dan komentar saya:

   Header

   …Pasti hampir semua situs tersebut menempatkan logonya di sebelah kiri atas.
   …logo harus bisa di-klik dan mengarah kembali ke beranda.

   Saya setuju. Semua hal yang diharapkan pengguna berdasarkan ketentuan umum/yang sering dijumpai, membuat pengguna tidak perlu berpikir banyak untuk menerka dan menggunakan fitur yang ditawarkan.

   Mengenai posisi logo di kiri atas, alasan ‘usability’ lainnya adalah masih ada pengguna yang memilih membuka jendela peramban tidak dengan lebar maksimal (‘maximize window’) ukuran layar komputernya. Jadi peluang logo dipasang di sebelah kiri akan lebih besar manfaatnya bagi pengguna.

   Saya pun berharap jika logo itu bisa di-klik, pengunjung akan diarahkan menuju ke laman. Walau pun sudah ada menu ‘Home’.

2. Gambar. Ada beberapa fitur penting yang tidak aksesibel. Tidak memiliki atribut alt (Gambar 2):
   • Fitur ‘Chat Online’
   • Fitur ‘Fasilitas Kredit’ (simulasi kredit) di pojok kiri bawah

   Walau pun mungkin tidak penting bagi mesin pencari Internet, tapi atribut ‘alt’ di sini berguna bagi pemakai ’screen readers’.

3. Penggunaan atribut title="..." dan alt="..." (Gambar 2)

   Pemakaiannya pada gambar yang juga sebagai pranala/tautan, menurut saya, berlebihan. Karena keduanya memuat deskripsi yang sama. Ini hal klasik sederhana yang sering terjadi.

   Jika keterangan pada atribut alt sudah cukup deskriptif (misal spesifikasi produk termasuk harga; tidak berbeda dengan informasi yang tampil jika ‘disable image’ dimatikan), tidak perlu dilakukan pengulangan yang persis-serupa pada atribut title.

   Apalagi, setelah tampilan gambar pada beberapa item produk saya aktifkan. Ternyata, gambar produk sudah memuat informasi yang lebih rinci.

   Ditargetkan untuk ’screen readers’, iTunes dan iPod nano yang punya ’spoken menus’? Justru duplikasi tadi akan terdengar mengganggu. Karena kedua atribut mampu dibaca oleh ‘aural agent’. Misal, ’screen reader’ akan membaca kedua atribut sebagai berikut: Apple Mac Notebook Apple Mac Notebook.

   Kecuali pengguna ’screen readers’ menyetel agar perangkatnya hanya membaca salah satu atribut saja. Bahkan ada yang belum mampu membaca kedua atribut, sehingga penyajian ‘plain text’ kembali menjadi pilihan.

   Masih mengaitkan atribut title dengan SEO (‘Search Engine Optimization’)? Saya pernah menulisnya di Atribut title terkait Aksesibilitas dan SEO.

4. Penggunaan label pada elemen input teks
   Jika memang menargetkan pengguna ’screen reader’ (termasuk iTunes, iPod) juga, elemen ‘input’ yang berupa teks pada formulir fasilitas pencarian sebaiknya menyertakan <label>. Karena ‘label’ inilah yang dibaca oleh mesin bicara (’screen reader’; ‘aural agent’).
5. Tes kontras warna
   Pada tes ‘Luminosity Contrast Ratio’ yang berbasis WCAG (‘Web Content Accessibility Guidelines’) 2.0, terdapat kegagalan pada beberapa kombinasi warna.

Versi mobile Bhinneka.com

Kemudian saya coba akses dengan peramban ‘mobile’, Blazer 4.0 lawas, di Palm OS (‘operating system’). Tentu tanpa gambar. Peramban ini dapat mengenali CSS dengan media="screen".
Ukuran berkas yang terunduh tercatat sekitar 162-an kb. Tautan yang tersaji dari atas hingga bawah cukup melelahkan jika di-’tabbing’.

Apakah Bhinneka.com tidak memiliki versi khusus yang lebih sederhana untuk pengguna layar kecil (’small screen’)?

Halaman Bhinneka Post

Sebagai tambahan, saya coba menelusuri halaman ‘Bhinneka Post’ berjudul Bluetooth 3.0. Beberapa catatan saya:

1. Menu navigasi ‘Previous Entry’ dan ‘Next Entry’ itu membingungkan. Terutama saat berada di tengah-tengah bagian antara tulisan terbaru dan terlama. Pernah saya tulis di Usability of Previous/Next vs Older/Newer Links.
2. Tombol komentar tidak aksesibel. Tanpa atribut ‘alt’.
3. Formulir komentar tidak ‘inline’ seperti blog kebanyakan (tidak ‘usable’).

Simpulan

Setiap elemen desain dan fitur yang ditawarkan tentu disajikan dengan alasan tertentu. Lihat juga Backstage Design Story of Bhinneka.com (Faces of Indonesia).

Saran-saran (terkait akses tanpa gambar):

• posisi logo Bhinneka.com dan ‘clickable’-nya,
• kelengkapan tag label, atribut alt, deskripsi atribut title untuk mendukung aksesibilitas,
• penyesuaian kontras warna sesuai rekomendasi WCAG 2.0,
• ketersediaan dukungan versi ‘mobile’,
• kemudahan pakai halaman Bhinneka Post ditingkatkan melalui fitur ‘inline comments’ dan navigasinya.

Apakah situs toko ‘online’ memang merasa tidak perlu menerapkan desain universal? Terlebih sudah punya nama seperti Bhinneka.com? Seperti juga Amazon.com, Google, Blogspot yang tidak pusing dengan standar web dan aksesibilitas?

Bukankah inginnya menjangkau pelanggan seluas-luasnya?

Tulisan ini dibuat karena topik terkait di atas memang menjadi salah satu pembahasan di blog Dani Iswara .Net. Kebetulan pula sedang diselenggarakan Kontes Kritis 2009 oleh NavinoT.

Lihat juga tulisan Mas Hendry di Membantai Bhinneka.com – Ulasan Toko e-Commerce dan Saran-saran. Saya setuju jika redesain web–sekecil apa pun itu–dan konversinya, membutuhkan suatu kajian ilmiah.

Berlanjut ke Simulasi Web Usability dari Google ke Homepage.

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