Kajian Web Usability MyHobbyTown.com (Bagian 4 dari 4)

Tulisan ini dibuat untuk menyelesaikan tugas akhir dari mata kuliah Interaksi Manusia Komputer. Sebagai bagian dari kajian web usability untuk antarmuka situs My Hobby Town, penulis tidak memiliki hubungan apapun dengan situs yang bersangkutan.

Kajian web usability untuk antarmuka situs My Hobby Town dibagi menjadi 4 bagian :

Semua tulisan ini terangkum dalam kategori tugas akhir IMK.

______________________________________________________________

KESIMPULAN & SARAN
Situs My Hobby Town sebagai situs e-commerce lokal merupakan situs yang menarik. Masih banyak kekurangan dari sisi usability-nya, namun itu bukanlah sebuah halangan untuk menjadikan situs ini tidak berguna! Desain yang menarik secara graphical belum tentu baik dari segi usability-nya.

Beberapa hari yang lalu, penulis sempat melihat beberapa referensi situs dan mencoba membuat mock-up sederhana yang bisa dipakai untuk situs My Hobby Town. Mock-up sederhana tersebut adalah sebagai berikut :
Warna dan tulisan di gambar di atas hanyalah visualisasi saja. Dengan perubahan tata letak sedikit, situs My Hobby Town bisa menjadi lebih baik, karena saya akui pelayanan dari tokonya pun sangat baik, sehingga dengan adanya situs yang menarik maka pelanggan toko pun akan bertambah. Ups, kok jadi ngomongin bisnis XD

Semoga di kemudian hari situs My Hobby Town bisa menjadi lebih baik, dan lebih tepat guna. Maju terus situs e-commerce Indonesia!

______________________________________________________________

So
I’ll go straight ahead
It’s OK if I slip, right?! Right?
I’ll go as far as I can
Tomorrow’s lunch instead of yesterday’s test
Being positive is #1
I wonder if that’s no good?
That’s just fine

So
I’ll puff up my chest with pride and go
It’s fine if I’m selfish, right?! Right?
I only like the things I like
Things are going great, so I’ll start today enthusiastically too
Laughing is better
Otherwise, it’s a waste

______________________________________________________________

UCAPAN TERIMA KASIH

  • Pak Firman Ardiansyah selaku dosen mata kuliah Interaksi Manusia Komputer
  • Teman-teman Ilkomerz 44 serta blog-blognya yang membantu memberi inspirasi tulisan ini
  • Orang tuaku yang selalu sibuk
  • iTunes dan C3, temanku di kesendirianku
  • Allah SWT, selalu bersama kita semua :)

______________________________________________________________

Sebelumnya >> Bagian 3 : Kajian Usability 2

Kajian Web Usability MyHobbyTown.com (Bagian 3 dari 4)

Tulisan ini dibuat untuk menyelesaikan tugas akhir dari mata kuliah Interaksi Manusia Komputer. Sebagai bagian dari kajian web usability untuk antarmuka situs My Hobby Town, penulis tidak memiliki hubungan apapun dengan situs yang bersangkutan.

Kajian web usability untuk antarmuka situs My Hobby Town dibagi menjadi 4 bagian :

Semua tulisan ini terangkum dalam kategori tugas akhir IMK.

______________________________________________________________

EVALUASI HEURISTIK (lanjutan)
6. Recognition rather than recall
Mengurangi penggunaan memory pengguna dengan membuat objek, aksi, dan pilihan yang ada visible (jelas).

Fitur pencarian, biarpun bentuk dan warnanya dirubah menjadi lebih menarik, kata-kata ‘Try the New Search Engine’ akan membuat pengguna menyadari bahwa kotka tersebut adalah kotak pencarian yang akan berfungsi sebagaimana mestinya.
Kekurangan utama dari fitur ini adalah button Search Item yang terlihat sebagai tulisan biasa, padahal itu adalah button. Solusi yang baik menurut saya adalah berikan efek timbul pada latar belakang tulisan Search Item, sehingga pengguna dapat mengetahui bahwa kotak pencarian tersebut bisa memulai pencariannya, baik dengan menekan Enter pada keyboard maupun menekan button Search Item.

7. Flexibility and efficiency of use
Mempermudah pengguna untuk melakukan kegiatannya dengan lebih cepat. Sistem dapat memenuhi, baik untuk pengguna yang berpengalaman maupun yang tidak (dalam hal ini adalah pengguna yang awam).

Situs My Hobby Town hanya mengkhususkan pada info acara, katalog barang, cara memesan, alamat toko, serta page Facebook. Tidak ada halaman lain yang tidak berhubungan dengan keempat hal tadi, sehingga pengguna tidak perlu melakukan langkah-langkah yang panjang untuk mengakses setiap halamannya. Tautan-tautan utama bersifat dinamis, ada di setiap halaman. Seperti How to Buy, di halaman apapun pengguna membuka, tautan How to Buy akan selalu ada sehingga pengguna tidak perlu kembali ke halaman depan untuk membuka halaman How to Buy.
Coba perhatikan posisi navigasi di kedua halaman di bawah ini : Tidak berubah, bukan? Ini sangat membantu efisiensi waktu bagi pengguna.

8. Aesthetic and minimalist design
Dialog-dialog seharusnya tidak mengandung informasi yang tidak relevan atau tidak terlalu diperlukan. Setiap informasi tambahan akan ‘bersaing’ dengan bagian-bagian yang relevan dan dapat mengurangi visibilitas relatifnya.

Format Tulisan
Konten dalam situs My Hobby Town menggunakan jenis huruf Verdana berukuran kecil dan tidak banyak bermain di glyph. Bentuk huruf Verdana yang bulat dan padat membantu pengguna untuk lebih nyaman membaca dan membedakan antar huruf, tetapi ukuran yang kecil akan sangat mengganggu. Solusi yang baik menurut saya adalah gunakan ukuran huruf yang sedikit lebih besar, ada baiknya menggunakan ukuran huruf yang biasa dipakai dalam pengetikan biasa, yaitu dalam kisaran 11-14 point.

Gambar
Dalam situs My Hobby Town digunakan banyak gambar, termasuk background situs menggunakan gambar, untuk menarik perhatian pengguna. Gambarnya pun berukuran sedang sehingga tidak mengganggu konten lain seperti tulisan. Pada bagian kategori barang, gambar bisa diperbesar dengan cara klik di thumbnail gambar. Gambar yang besar akan muncul di window baru seperti berikut ini :

9. Help users recognize, diagnose, and recover from errors
Pesan error sebaiknya ditampilkan dalam bahasa biasa, bukan bahasa koding. Selain itu pesan error sebaiknya tepat masalah dan memberi solusi.

Kesalahan yang banyak terjadi bagi pengguna situs My Hobby Town adalah pengetikan kata kunci untuk pencarian dan salah pengetikan alamat dari halaman tertentu. Pesan error yang muncul dari kesalahan pengetikan alamat adalah sebagai berikut :
Fitur pencarian dalam My Hobby Town tidak memiliki fitur seperti Google yang memberikan saran kata kunci lain jika pengguna salah memasukkan kata kunci dalam kotak pencarian, sehingga yang muncul dalam layar adalah :
Penggunaan kata-kata ‘No stock’ memiliki kesan bahwa kata kunci apapun yang dicari, sudah ada (dijual) di situs My Hobby Town hanya saja stok-nya sedang kosong. Padahal yang dimaksud adalah tidak ada yang berkaitan dengan kata kunci yang di-input-kan. Solusi yang baik menurut saya adalah berikan kalimat yang lebih relevan seperti ‘Hasil pencarian tidak ditemukan’ dan sejenisnya. Selain itu, berikan pula tautan kembali ke kotak pencarian agar pengguna tidak perlu repot menekan Back atau Undo pada browser.

10. Help and documentation
Meskipun beberapa berpendapat bahwa sistem akan lebih baik tanpa dokumentasi, tetapi akan menjadi nilai lebih jika memiliki fitur bantuan. Bantuan ini, sesuai namanya berisi bantuan dalam penggunaan sistem.

Sitemap
Dalam situs My Hobby Town, tidak ada halaman khusus yang berisi bantuan. Namun My Hobby Town memiliki tiga bagian yang dapat membantu pengguna menggunakan sistem yaitu FAQ dan Sitemap. FAQ dirangkap dalam halaman How to Buy, dan Sitemap terpisah seperti berikut : Sitemap ini kurang baik, karena sifatnya hanya sebagai ‘Daftar Isi’ dan bertaut dengan halaman-halaman yang bersangkutan. Selain itu tulisan yang kecil juga dapat diacuhkan oleh pengguna, sehingga justru Sitemap ini akhirnya tidak ada yang mengakses. Solusi yang baik menurut saya adalah selain tautan ke halaman yang bersangkutan, berilah penjelasan sedikit tentang halaman-halaman tersebut. Selain itu, tulisan juga dapat diperbesar dan akan lebih baik jika disertai peta situs berupa gambar.

Halaman Depan
Saat pertama kali masuk ke situs My Hobby Town, di luar navigasi terdapat konten-konten seperti berikut :
Meskipun beberapa pengguna mungkin dapat langsung menerka bahwa situs ini adalah situs e-commerce, tak sedikit juga pengguna yang kebingungan apa yang harus dilakukan dengan situs ini begitu muncul konten-konten di atas. Solusi yang baik menurut saya adalah berikan sedikit penjelasan tentang isi situs My Hobby Town di halaman depan untuk ‘menyambut’ pengunjung situs, juga membantu pengguna untuk menentukan apa yang akan dilakukan setelahnya.

______________________________________________________________

Sebelumnya >> Bagian 2 : Kajian Usability 1
Selanjutnya >> Bagian 4 : Penutup

Kajian Web Usability MyHobbyTown.com (Bagian 2 dari 4)

Tulisan ini dibuat untuk menyelesaikan tugas akhir dari mata kuliah Interaksi Manusia Komputer. Sebagai bagian dari kajian web usability untuk antarmuka situs My Hobby Town, penulis tidak memiliki hubungan apapun dengan situs yang bersangkutan.

Kajian web usability untuk antarmuka situs My Hobby Town dibagi menjadi 4 bagian :

Semua tulisan ini terangkum dalam kategori tugas akhir IMK.

______________________________________________________________

EVALUASI HEURISTIK
1. Visibility of system status
Sistem harus dapat menginformasikan kepada pengguna tentang apa yang terjadi pada sistem, dapat dilakukan melalui feedback yang wajar.

Tautan dan Navigasi
Dalam situs My Hobby Town terdapat 4 (empat) jenis tautan. Tautan jenis pertama adalah tautan yang menuju ke halaman-halaman penjelasan tentang situs tersebut dan berada di bagian paling atas, sedangkan tiga sisanya adalah tautan menuju kategori barang yang dijual. Tiga sisanya ini berada di bagian bawah gambar Header, di samping kiri konten, serta di bagian paling bawah tepat di dekat Copyright situs.


Diberi warna oranye dan memiliki bentuk tulisan yang berbeda dengan tulisan pada konten, menunjukkan tulisan tersebut “berbeda” dan bukan konten. Jika di-hover, tautan akan memiliki garis bawah dan kursor akan berubah bentuk dari tanda panah menjadi penunjuk tangan. Jika tautan tersebut sudah pernah diakses sebelumnya, warnanya akan menjadi ungu tua. Mirip dengan ketiga jenis tautan kategori.
Navigasi kategori ini dibahas lebih lanjut di bagian Consistency and standards.

Kelemahan dari tautan di atas adalah, pengguna hanya mengetahui halaman apa yang akan diakses dan menunjukkan bahwa tulisan tersebut adalah tautan. Jika sudah di-klik, tidak ada tulisan ataupun tanda untuk menunjukkan navigasi bahwa pengguna ada di halaman tersebut. Seperti contoh di bawah ini :
Ini adalah halaman How to Buy, dan tidak ada perubahan tanda pada tautan. Hanya berubah menjadi warna ungu tua, bahwa halaman tersebut sudah diakses. Bahkan di bagian judul, tetap saja bertuliskan :: My Hobby Town ::. Padahal bagi pengguna yang memaksimalkan fungsi Tab pada browser, ini akan mempersulit.
Solusi yang baik menurut saya adalah pemberian judul halaman di depan :: My Hobby Town ::, misalkan How to Buy :: My Hobby Town ::. Selain itu, pada navigasi diberi tanda yang menunjukkan pengguna berada di halaman tersebut. Misalnya dengan memberi latar warna merah dan tulisan dirubah menjadi putih. Hal ini penting agar pengguna tidak tersesat lebih jauh di dalam situs.

Loading Halaman
Dalam situs My Hobby Town, tidak diketahui dengan baik apa yang terjadi pada antarmuka. Sederhananya, terkadang saya sendiri tidak bisa mengetahui apakah halaman yang sedang saya buka ini sudah loading 100% atau masih ada bagian-bagian yang masih loading. Ini adalah tampilan “berantakan” situs saat loading belum mencapai tahap 100% :
Ini dikarenakan terlalu banyak gambar yang harus di-load, sehingga membuat pengguna bingung apakah halaman sudah selesai di-load atau belum. Solusi yang baik menurut saya adalah pemberian tanda/status loading di tengah situs, seperti layaknya loading sebuah aplikasi WPF, sehingga mempermudah pengguna untuk mengetahui proses loading sudah selesai atau belum. Karena terlalu lama menunggu akan membuat pengguna menjadi jenuh.

2. Match between system and the real world
Sistem harus ‘berbicara’ dalam bahasa yang biasa digunakan oleh pengguna. Kata-kata dan berbagai istilah yang digunakan harus menyesuaikan.

Bahasa Inggris
Navigasi yang digunakan adalah Bahasa Inggris, seperti FAQ, How to Buy, Contact, Our Location, dan lain-lain. Digunakan Bahasa Inggris untuk memudahkan pengguna yang kebanyakan adalah remaja dan dewasa. Digunakan bahasa baku sesuai standar situs-situs e-commerce di luar negeri. Hampir tidak ada penggunaan Bahasa Indonesia, padahal ini adalah situs e-commerce lokal!
Situs ini menyediakan modul translasi ke bahasa lain, menggunakan API dari Google. Namun kelemahannya adalah menjadi tidak efektif, karena translasi dari Google kadang masih berantakan. Solusi yang baik menurut saya adalah situs ini dibuat dalam bentuk bilingual, agar pengguna yang awam Bahasa Inggris tertarik dengan situs ini.

Istilah dalam Bahasa Jepang
Terdapat beberapa istilah Bahasa Jepang, sesuai dengan barang-barang yang dijual di situs ini seperti Anime dan Washi. Penyebutan nama barang ini digunakan sesuai dengan nama aslinya untuk menghindari kesalahan dan pelanggaran hak cipta, selain itu diberikan gambar untuk memperjelas lagi.

3. User control and freedom
Pengguna kadang memilih fungsi yang salah sehingga memerlukan emergency exit dan dapat keluar dengan bebas tanpa perlu melalui langkah-langkah lain. Biasanya ditandai dengan mendukung fungsi undo dan redo.

Tidak ada fungsi seperti ini pada situs My Hobby Town. Karena sifatnya hanya sebagai katalog, pengguna dapat keluar dengan bebas dari situs ini tanpa harus akses ke halaman-halaman tertentu (tekan tanda X pada tab/browser jika sudah selesai maupun pada situsnya terjadi error).

4. Consistency and standards
Pengguna tidak harus berpikir apakah kata, situasi, dan aksi yang berbeda ternyata memiliki arti yang sama. Follow platform conventions, lebih baik menggunakan hal-hal yang sifatnya umum.

Navigasi untuk Kategori Barang
Terdapat tiga bentuk tautan untuk navigasi kategori barang yang dijual di My Hobby Town. Berdasarkan segi letak, ada tiga posisi. Sedangkan berdasarkan segi bentuk tautan, ada dua yaitu berupa tulisan dan button.

Ketiga jenis tautan ini sebenarnya memiliki fungsi yang sama dan dapat mengecoh pengguna. Pengguna dapat saja berpikir button memiliki fungsi yang berbeda dibanding navigasi kategori di bawah Header. Solusi yang baik menurut saya adalah berikan cukup dua saja navigasi kategori yang paling membantu pengguna. Button dan tulisan sudah cukup, dan disarankan menggunakan breadcrumps agar pengguna tidak tersesat saat sedang melihat jenis-jenis barang.

Selain itu, hindari juga penggunaan gambar pada button yang tidak sesuai. Contohnya pada button Posters : Di satu sisi, ini menarik karena tema situs My Hobby Town adalah anime (kartun Jepang). Tapi dari sisi usability, ini tidak bagus karena beberapa pengguna akan berpikir bahwa dimaksud di button di atas adalah boneka atau bahkan makanan! Solusi yang baik menurut saya adalah berikan gambar yang sesuai. Jika memang ingin menggunakan gambar anime, berilah gambar anime yang sesuai dengan tulisan pada button.

Tautan ke Halaman Sendiri
Di situs My Hobby Town, seperti sudah dijelaskan di Visibility of system status, pengguna 80% bisa dipastikan tersesat karena Where am I?-nya yang masih belum jelas. Pengguna dapat semakin tersesat karena adanya self link, yaitu tautan ke halaman sendiri. Sebagai contoh, pengguna berada di halaman Home. Ia membuka tab baru, dan saat kembali ia mengakses halaman My Hobby Town, ia lupa bahwa ia masih berada di halaman Home sehingga ia mengarahkan kursornya ke tautan Home. Menjadi tidak efisien bukan?
Solusi yang baik menurut saya adalah hindari penggunaan self link.

5. Error prevention
Desain sistem yang mencegah pengguna melakukan kesalahan dalam penggunaan sistem. Bisa dilakukan dengan pilihan konfirmasi (biasa juga disebut autentikasi).

Pada situs My Hobby Town, pengguna sifatnya hanya melihat dan mencari informasi. Tidak diperlukan input selain input untuk melakukan pencarian. Kesalahan sistem biasanya terjadi saat database My Hobby Town sedang error sehingga beberapa halaman situs tidak dapat diakses. Sehingga kesalahan yang terjadi pada pengguna biasanya hanya merupakan kesalahan pengetikan yang selanjutnya akan dibahas di Help users recognize, diagnose, and recover from errors.

______________________________________________________________

Sebelumnya >> Bagian 1 : Pendahuluan
Selanjutnya >> Bagian 3 : Kajian Usability 2