Well kali ini saya akan membahas mengenai web usability pada petersaysdenim.com. Tetapi sebelum kita membahas lebih dalam, ada baiknya jika kita pelajari dulu apa itu web usability.

Web Usability

Secara umum web usability merupakan suatu pendekatan untuk membuat website yang mudah digunakan oleh user tanpa harus melakukan pelatihan khusus, sehingga user dapat berinteraksi secara alami untuk menyelesaikan tugas yang ia miliki pada website tersebut. Sebagai contoh, jika user melihat sebuah tombol pada halaman website, maka ia akan mengklik tombol tersebut untuk mengantarkan user ke halaman/tujuan berikutnya. Tujuan  dari usability meliputi :

  1. Menyajikan informasi kepada pengguna dengan cara yang jelas dan ringkas.
  2. Memberikan pilihan yang tepat kepada pengguna, dengan cara yang sangat jelas
  3. Menghindari semua ambiguitas mengenai konsekuensi dari suatu tindakan misalnya mengklik pada hapus / menghapus / pembelian.
  4. Meletakan hal yang paling penting di tempat yang tepat  pada halaman web

Jika kita meninjau pada teori yang diberikan oleh Jacob Neilsen, usability didefinisikan oleh 5 komponen kualitas :

– Learnability
Learnability menjelaskan tingkat kemudahan pengguna untuk melakukan task-task dasar ketika pertama kali mereka melihat atau menggunakan hasil perancangan.
– Efficiency
Efficiency menjelaskan tingkat kecepatan pengguna dalam menyelesaikan task-task setelah mereka mempelajari hasil perancangan.
– Memorability
Memorability menjelaskan tingkat kemudahan pengguna dalam menggunakan rancangan dengan baik, setelah beberapa lama tidak menggunakannya.
– Errors
Errors menjelaskan jumlah error yang dilakukan oleh pengguna, tingkat kejengkelan terhadap error dan cara memperbaiki error.
– Satisfaction
Satisfaction menjelaskan tingkat kepuasan pengguna dalam menggunakan rancangan.

Untuk dapat memenuhi kelima komponen di atas, maka diperlukan suatu desain antarmuka yang baik dan benar serta mempermudah user untuk mengerjakan tugas mereka. Ada 10 prinsip umum yang harus diperhatikan jika kita ingin membuat antar muka yang baik dan benar, yaitu :

1. Visibility of system status
Sistem harus dapat menginformasikan kepada pengguna mengenai apa yang sedang terjadi pada sistem. Ada 2 hal pentung yang mendasari visibility of system status, yaitu
Where am a i? : dimana pengguna saat ini berada
Where can i go next? : kemana pengguna dapat pergi dari suatu state
2. Match between system and the real world
Sistem harus dapat ‘berbicara’ menggunakan bahasa yang akrab dan sesuai dengan bahasa yang digunaka user pada kehidupan sehari-hari.
3. User control and freedom
User dapat kembali ke suatu kondisi setelah mereka mengakses ke sebuah menu atau kondisi lain. Kadang user memilih pilihan yang salah dan perlu diberikan opsi emergency exit, sehingga user dapat keluar dari pilihan yang salah tersebut tanpa harus menanggung resiko yang tidak diinginkan.
4. Consistency and standards
Rancang sistem dengan suatu standar tertentu dan konsisten, sehingga pengguna tidak perlu bertanya-tanya.
5. Error prevention
Lakukan pencegahan jika terjadi eror yang disebabkan oleh pengguna. Dapat dikakukan dengan menghilangkan kondisi yang rawan eror, periksa kesalahan untuk user, atau berikan konfirmasi sebelum user ingin melakukan suatu tindakan.
6. Recognition rather than recall
Minimalkan beban pengguna untuk mengingat dengan membuat objek, tindakan, dan pilihan terlihat jelas. Pengguna tidak perlu mengingat informasi dari satu bagian ke dialog yang lain. Instruksi untuk penggunaan sistem harus terlihat jelas.
7. Flexibility and efficiency of use
Permudah pengguna dalam menggunakan sistem, sehingga user dapat menyelesaikan tugasnya dengan lebih cepat. Sajikan fitur-fitur pada website yang mudah digunakan oleh semua level user.
8. Aesthetic and minimalist design
Hindari informasi yang tidak relevan.
9. Help users recognize, diagnose, and recover from errors
Ketika user melakukan kesalahan beri pesan yang jelas dan mudah dimengerti menggunakan bahasa yang sederhana serta berikan solusi yang tepat.
10. Help and documentation
Meskipun lebih baik jika sistem tersebut dapat digunakan tanpa dokumentasi, mungkin perlu untuk memberikan bantuan dan dokumentasi. Setiap informasi tersebut harus mudah dicari, fokus pada tugas pengguna, mendaftar langkah-langkah konkret yang akan dilakukan, dan tidak terlalu besar.
Review yang dilakukan pada petersaysdenim.com akan merujuk berdasarkan penjelasan di atas. Sekarang mari kita beranjak ke www.petersaysdenim.com

The Review

Gambar di atas adalah halaman utama dari petersaysdenim.com. Menurut saya halaman home ini di buat dengan cukup sederhana. Foto-foto besar yang hampir memenuhi layar ketika pertama di buka memperlihatkan produk-produk terbaru di tampilkan secara bergantian. Hal ini cukup menarik user untuk mengetahui lagi lebih dalam mengenai produknya. Tetapi ada satu fitur penting yang tidak ditemukan pada web ini, yaitu pencarian. Saya tidak tahu apa alasan pembuat web ini tidak memberikan fitur pencarian, padahal menurut saya fitur itu sangat penting untuk mempermudah tugas user.Sekarang mari kita lihat web ini berdasarkan 10 usability heuristic.

1. Visibility of system status

Ketika pertama masuk ke web ini saya sedikit kebingungan untuk mencari lokasi saya saat ini. Setelah saya masuk ke halaman shop akhirnya saya menemukan breadcumb (path penunjuk posisi user pada website). Namun sayangnya fitur tersebut hanya ada ketika kita sedang berada di halaman utama. Dari halaman shop pengguna dapat langsung memilih produk kesukaannya.

Selain itu masih ada sedikit kekurangan juga pada tombol navigasi yang menunjukan menu utama pada web ini. Tombol utama tidak diberikan perubahan ketika mouse berada di atasnya. Hal ini dapat mempersulit dalam memilih menu yang diinginkan.

2. Match between system and the real world

Lagi-lagi saya terjebak dengan desain antar muka pada web ini. Saya mengira tombol dengan icon bendera yang terletak di bagian kanan atas adalah tombol kontrol untuk mengubah bahasa inggris atau indonesia. Setelah saya pelajari ternyata tombol tersebut hanya digunakan untuk menentukan lokasi kita (nasional / internasional). zzzzz (-_-“)

menurut saya bahasa yang digunakan untuk menyampaikan informasi terlihat sedikit kaku dan tidak konsisten, seakan-akan bahasa yang digunakan hanya bertujuan untuk menjual produk saja tidak untuk melayani. Hal ini menimbulkan kesan yang kurang ramah terhadap user.

3. User control and freedom

Pada web ini telah diberikan kontrol untuk kembali ke keadaan sebelumnya. Tetapi sayangnya kontrol ini tidak diberikan di setiap kondisi. Salah satu contohnya saya temukan setelah saya menekan tombol “send to friend” pada detail produk.

4. Consistency and standards

Ada beberapa ketidakkonsistenan yang saya temukan pada website ini dan hal ini cukup mempersulit saya dalam menyelesaikan tugas. Tombol kontrol pemilihian regional (icon bendera di kanan atas) tidak diberikan disemua halaman. Kemudian bahasa yang digunakan pun sangat tidak konsisten. Di beberapa bagian menggunakan bahasa Inggris dan lainnya menggunakan bahasa Indonesia. hmmmm cukup labil juga ya web ini hehehe.

5. Error prevention

Untuk menguji berdasarkan prinsip ini, dapat dilihat pada bagian pendaftaran member baru. Ada beberapa pertanyaan yang harus diisi sebagai informasi umum mengenai user. Salah satunya user di haruskan mengisi kata sandi dengan karakter minimal 5 karakter. Kali ini saya sengaja melakukan kesalahan, yaitu mengisi kata sandi hanya 3 karakter. Hasilnya, sistem memberikan peringatan bahwa sandi yang saya masukan salah. Nice job dude 🙂

6. Recognition rather than recall

Informasi yang disajikan pada website ini sudah cukup baik. Sistem sudah memberikan informasi yang mengurangi beban user untuk mengingat. Hal tersebut terbukti ketika saya ingin meneruskan proses transaksi dan berada di tahap pemilihan metode pembayaran, sistem memberikan informasi berapa jumlah biaya transaksi yang harus saya tanggung.

7. Flexibility and efficiency of use

Menurut saya masih ada beberapa fitur yang kurang efisien dan belum mendukung untuk semua level user. Salah satunya yang telah saya bahas di awal, web ini tidak menyediakan fitur pencarian. Hal ini dapat memperlambat user dalam menyelesaikan tugasnya. Selain itu pada halaman detail produk terdapat navigasi yang kurang efisien. Ketika saya ingin melihat gambar dengan mengklik opsi gambar seperti ilustrasi di bawah ini.

Maka akan mucul gambar yang lebih besar seperti gambar di bawah ini

Kemudian jika ingin merubah gambar, saya harus mengklik terlebih dahulu baru dapat kembali memilih gambar lainnya. Cukup melelahkan jika saya ingin melihat semua gambar. Munngkin akan lebih baik jika diberikan tombol next dan back pada bagian gambar yang telah di perbesar.

8. Aesthetic and minimalist design

Semua informasi yang disajikan pada web ini sudah cukup relevan dengan tujuan awalnya, yaitu menjual produk. Informasi berupa teks dan gambar sudah saling mendukung, sehingga user tertarik untuk melakukan transaksi pada web ini.

9. Help users recognize, diagnose, and recover from errors

Seperti pada bagian 5 (error prevention) ketika user melakukan kesalah input/aksi, maka akan diberikan peringatan/konfirmasi mengenai kesalahan yang telah dibuat. Namun informasi tersebut masih kurang efisien, karena sistem memeriksa kesalahan pengisian secara berurutan dari atas ke bawah dan informasi kesalahnya hanya akan ditampilkan satu per satu.

10. Help and documentation

Sangat disayangkan pada web ini tidak ditemukan help documentation atau FAQ. Padahal fitur ini akan cukup membantu user jika menemukan kesulitan dalam menggunakan web ini. 😦

The Conclusion

Setelah melakukan evaluasi berdasarkan 10 usability heuristic, sekarang saatnya untuk meninjau apakah petersaysdenim.com sudah memenuhi 5 komponen kualitas dengan baik :

– Learnability
Pada dasarnya web ini menggunakan desain dan interaksi yang sudah umum digunakan di banyak e-commerce lainnya, sehingga setiap proses mudah untuk dipelajari bahkan oleh user baru sekalipun
– Efficiency
Secara umum fungsionalitas dari web ini sudah cukup efisien, walaupun ada beberapa bagian yang masih kurang efisien. Seperti tidak disediakannya fungsi pencarian. Hal ini cukup memperlambat user jika ingin langsung mencari informasi yang ia butuhkan dengan cepat.
– Memorability
User dapat dengan mudah mengenali kembali fitur/informasi yang diberikan pada web ini. Karena grouping informasi pada web ini sudah cukup baik, sehingga mudah untuk diingat.
– Errors
Sebenarya pada web ini tidak ditemukan eror kecuali jika user salah memberikan perintah atau inputan. Itupun sudah dapat di atasi dengan adanya pesan eror yang sesuai dengan kesalahan yang dilakukan. Tetapi ada kejanggalan jika mengunjungi halaman LINK. Ketika halaman ini di akses yang muncul di layer hanya tampilan polos berwarna putih. Entah halaman ini masih dalam pengembangan atau memang belum tersedia, ada baiknya jika memberikan informasi mengenai hal ini.
– Satisfaction
Overall dalam penggunaan web ini saya merasa masih kurang puas. Hal tersebut dikarenakan masih adanya ketersedian menu yang tidak konsisten di semua halaman. Bahasa yang digunakan juga masih inggris setengah matang alias campur aduk antara Inggris dan Indonesia. Penggunaan tombol/link masih sulit dibedakan antara teks biasa atau link/tombol.

Sekian review dari saya, saran dan kritik sangat saya terima untuk perbaikan saya di post berikutnya 🙂