Help and documentation - mainanbalita.com

“Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.”

User experience adalah tentang membuat aplikasi mudah dan menyenangkan saat digunakan. Ya, mudah digunakan. Bagaimana cara membuat sebuah aplikasi (dalam hal ini web) mudah digunakan? Salah satunya dengan menyediakan fasilitas help dan dokumentasi.

Di dalam web mainanbalita.com sendiri sudah ada halaman “How to buy” yang menjelaskan cara pembelian produk seperti berikut

Penjelasan di halaman ini sebenarnya sudah cukup baik, dan jelas. Namun sayangnya, langkah-langkah pembelian dijelaskan dalam bentuk poin-poin yang panjang, yang mungkin menyulitkan dalam membaca. Ditambah lagi, di dalam web ini tidak bisa melakukan klik kanan-open in new tab, jadi pengguna harus membuka 2 tab, tab pertama diketikkan alamat how to buy, sedangkan tab kedua diketikkan halaman produk. Jujur, itu sedikit merepotkan. Karena biasanya dalam melihat langkah, pengguna pasti melihat beberapa kali (misal, baca langkah 1, lakukan, lihat lagi langkah 2 dst), jadi halaman how to buy dan produk harus dibuka dalam tab berbeda agar bisa dilihat kembali dengan mudah (tidak perlu back halaman).

Help dan dokumentasi yang baik, harus bersifat KISS (Keep it Short and Simple). Jadi, daripada membuat halaman “How to buy” hanya dengan paragraf-paragraf panjang, lebih baik ditambahkan gambar agar user lebih cepat mengerti. Contohnya sebagai berikut

Oiya, jika suatu hari nanti mainanbalita.com melihat tulisan-tulisan saya ini, dan memperbaiki halaman webnya, jangan lupa juga untuk mengupdate halaman “How to buy”nya. Supaya tetap relevan dengan langkah yang harus dilakukan pengguna.

Overall, nilai severty rate yang saya berikan adalah 1, hanya masalah “tampilan”nya saja. Dipercantik sedikit, misal dengan menggunakan gambar dalam menjelaskan langkahnya, maka akan menjadi lebih baik. Good job!

Bagaimana menurut Anda?

Read More

Help users recognize, diagnose, and recover from errors - mainanbalita.com

“Though you could use all powers vested in you to make error-proof applications, they are inevitable especially in large-scale applications, because of things beyond your control and because of ..ahem… users themselves – there I said it. When errors occur, they need to be communicated well to the users.”

Pesan error harus dinyatakan dalam bahasa manusia biasa, maksudnya bukan bahasa programmer, atau bahkan bahasa mesin. Supaya pengguna mengerti apa yang dimaksud pesan error tersebut. Pesan error yang baik adalah: membuat pengguna tau apa yang terjadi dan cara memperbaikinya, serta jika diperlukan, menampilkan informasi tambahan (misal: link halaman yang membahas langkah-langkah memperbaiki kesalahan).

Beberapa pesan kesalahan sudah saya bahas di bagian Error Prevention. Seperti kesalahan ketika registrasi dan memesan barang.  Tapi sekarang akan dibahas dari sisi usernya.

Oke, yang pertama saat melakukan pencarian. Saya mencoba mencari nama saya sendiri: nalar. Dan hasilnya memang di web itu tidak ada kata-kata nalar. Tapi yang ditampilkan hanya seperti ini

Harusnya yang muncul itu bukan seperti itu. Karena saya mengira kalau halamannya masih loading, jadi saya terus menunggu sampai jemu. Hehe. Bukankah lebih baik jika ada pesan “Kata kunci yang Anda masukkan tidak ditemukan, silahkan masukkan kata kunci lain” atau pesan-pesan sejenisnya?

Kemudian saat melakukan registrasi, muncul pesan saat memasukkan email yang sudah terdaftar.

Ada kata GALAT yang umumnya jarang dipakai didalam kasus seperti itu. Namun sisi baiknya, sistem menggunakan kata-kata dengan bahasa yang baik dan sopan, selain itu pesan tersebut menjelaskan penyebab kesalahan dan cara mengatasinya dengan singkat dan jelas. Nice! ^.^

Selanjutnya, saat melakukan pembayaran, saya tidak mengisikan propinsi, maka muncullah pesan error

Tapi sayangnya, mengapa pesan itu diletakkan di atas? Bukan di dekat kesalahan berasal. Itu membuat pengguna berpikir bahwa kesalahan saya waktu mengisi form adalah disekitar bagian atas, padahal di situ tidak ada label propinsi. Dan butuh beberapa menit untuk menyadari bahwa label propinsi ada dibagian bawah. Sebaiknya, pesan error diletakkan di samping text box yang tidak terisi, sehingga pengguna langsung menyadari kesalahannya.

Overall, severity rate yang saya berikan untuk mainanbalita.com adalah 3 karena menurut saya, pesan error adalah hal yang urgent terutama dibagian search, itu harusnya memberi tahukan kalau kata yang dicari tidak ada. Dan yang paling penting, di bagian pembayaran, yang seperti telah saya ceritakan di bagian sebelumnya, membuat saya kesal dan sedikit frustasi.

Bagaimana menurut Anda?

Read More

Aesthetic and minimalist design - mainanbalita.com

“Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.”

Desain yang minimalis tidak mengandung informasi yang tidak relevan. Coba kita lihat web mainanbalita.com. Halaman utamanya penuh dengan panel-panel di kiri dan kanannya. Informasi yang disajikan terlalu banyak.

Sebaiknya ini dihindari, karena akan membuat pengunjung web tidak fokus pada tujuan utamanya. Bisa jadi pengunjung malah terfokus pada panel-panel di kiri dan kanan itu dibandingkan dengan konten utamanya. Selain itu, panel tersebut mebuat white space dalam halaman web sedikit, sehingga terkesan penuh dan ramai. 

Untuk kategorisasi produk, web ini sudah melakukannya. Namun kategori tersebut ditaruh di panel sebeah kiri. Alangkah lebih baiknya jika kategori produk dibuat menjadi mega menu, agar terlihat lebih minimalis.

Hal baiknya, web ini sudah menggunakan tabel untuk barang yang telah dipilih. Selain itu, infomrasi produk juga sudah cukup informative, mulai dari ukuran, berat, deskripsi, gambar sampai harganya. Kemudian, struktur halaman juga sudah seragam di setiap halaman. Kecuali header di halaman utama dan halaman lain.

Untuk “memperbaiki” beberapa kekurangan yang sudah saya sebutkan, saya mencoba “mencorat-coret” desain yang baru sebagai berikut:

Dapat dilihat bahwa gambar dan tulisan yang diset marquee awalnya, dirubah menjadi gambar yang dislide agar pembaca bisa dengan mudah mempercepat dalam melihat gambar, dan bisa juga melihat gambar setelah dan sebelumnya.

Kategori produk juga dijadikan mega menu. Di halaman produk, ada keterangan halamannya. Login dan shopping cart di samping halaman, dan di setiap halaman harusnya ada, supaya memudahkan pengguna dalam melihat item apa saja yang sudah dipilih, dan saya login sebagai siapa.

Untuk nilai severity ratenya sendiri saya beri 2, memang hal ini cukup mengganggu dan harus diperbaiki. Tapi, lebih baik memprioritaskan hal lain dahulu, seperti yang sudah saya bahas sebelumnya.

Bagaimana menurut Anda?

Read More

Flexibility and efficiency of use - mainanbalita.com

"Bagaimana membuat sebuah sistem yang mengakomodasi pengguna yang sudah ahli dan pengguna yang masih pemula. Berikan alternatif untuk pengguna yang “berbeda” dari pengguna biasa (secara fisik, budaya, bahasa, dll)"

Accelerator adalah fasilitas yang bertujuan mempercepat pekerjaan pengguna. Accelerator meliputi: Short-cuts, Breadcrumbs, Keyboard Navigation dan Context Menu.

Di halaman web ini sudah ada Breadcrumbs yang cukup baik saat memilih produk seperti berikut

Tapi seperti sebelumnya pernah saya katakan bahwa lebih baik breadcrumbnya cukup ditulis Home>> mainan China>> celengan>> celengan Kamen. Karena dari “Toko Mainan Balita Online” sampai “Remote Contol” merujuk pada halaman yang sama.

Untuk keyboard navigation pun sudah cukup baik. Contohnya ketika mengisi form, untuk pindah dari text box satu ke yang lain bisa menggunakan mouse, atau tombol tab di keyboard. Nice!

Sayangnya, tidak ada perbedaan halaman pada pelanggan yang expert dan pemula. Sama saja.  Ada baiknya kalau didalam web tersebut ada personalisasi. Misal ketika A yang sering membeli boneka, ketika A login, disuguhkan iklan-iklan tentang boneka.

Sama halnya, tidak ada perbedaan halaman untuk pengunjung dari luar negeri maupun dalam negeri, karena tidak ada fasilitas ganti bahasa. Padahal, di form pembayaran terdapat Negara lain selain Indonesia. Harusnya web ini juga mengakomodasi bahasa yang ada di dalam daftar Negara di dalam form pembayaran. Supaya mempermudah komunikasi antar orang yang ingin mengirim barang ke luar negeri, atau mungkin sekedar menghindari kesalahpahaman.

Bagaimana menurut Anda?

Read More

Recognition rather than recall - mainanbalita.com

“Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.”

Recognition berarti mengenali sebuah objek yang pernah dilihat sebelumnya. Sedangkan recall berarti mencoba mengingat-ingat bagaimana warna, bentuk atau lainnya dari objek yang pernah dilihat sebelumnya. Kita pasti merasa bahwa recall lebih sulit dilakukan daripada recognition. Oleh karena itu, desain halaman web pun harus menyesuaikan kemampuan penggunanya.

Kebanyakan pengguna (terutama saya) tidak bisa mengingat serangkaian nomor, kata apalagi daftar pekerjaan. Hal baiknya, di bagian “shopping cart” sudah ada daftar barang apa yang telah dipilih, jumlah beserta harga dan total harganya. Nama barang di dalam daftar itupun sekaligus menjadi link ke halaman deskripsi barangnya. Saya cukup puas dengan fasilitas ini. Karena saya tidak perlu mengingat barang apa saja yang sudah saya pilih tadi?. Selain itu, kotak “shopping cart” itu ada di seluruh halaman. Jadi saya tetap bisa melihatnya dimanapun saya berada di web itu.

Selain itu, icon keranjang belanja yang ada di kotak Shopping Cart menggambarkan keranjang belanja dalam dunia nyata. Ini bagus, karena manusia lebih mudah menghubungkan hal yang ada di dunia nyata dengan menggunakan gambar.

Bagusnya lagi, hampir seluruh desain gambar halaman sama untuk setiap halaman. Jadi, user masih bisa mengenali, dan menyadari bahwa dia masih ada di dalam web mainanbalita.com. Nice! ^.^

Sayangnya, seperti yang telah dibahas sebelumnya, sistem registrasi di mainanbalita.com mengirimkan passwordnya ke email ketika mendaftar. Password yang saya dapat waktu itu adalah Kz23wD. Mungkin dalam beberapa jam saya ingat. Tapi ketika beberapa hari kemudian dihadapkan dengan kotak dialog ini lagi,

Saya lupa apa kata sandi aku saya? Akhirnya, saya membuka email, lalu mencari email dari mainanbalita.com yang sudah pernah saya dapat lalu mengisikannya ke dalam form. Dan jujur, itu merepotkan. Parahnya, tidak ada fasilitas ganti password. Maka dari itu saya menyarankan desain form baru

Agar pengguna bisa memilih passwordnya sendiri, yang tentu saja akan lebih diingat. Untuk masalah pengarsipan sendiri, mainanbalita.com pun bisa saja mengirimkan passwordnya ke email pengguna, untuk jaga-jaga kalau suatu hari pengguna lupa password. Atau solusi lebih sederhana, adakan fasilitas “lupa password”.

Untuk nilai severity ratingnya sendiri, saya berikan nilai 2, penting untuk diperbaiki, namun prioritasnya rendah. Karena sebenarnya user masih bisa mengingat kembali passwordnya di email mereka, walaupun agak repot.

Bagaimana menurut Anda?

Read More

Error Prevention - mainanbalita.com

Tidak semua error disebabkan oleh pengguna. Kadang sebuah error tidak terelakkan karena adanya gangguan di jaringan dengan sistem lain. Jadi, sebisa mungkin kita sudah mengingatkan kesalahan pengguna atau error dari sistem sebelum error itu benar-benar terjadi. Ingat, “mencegah lebih baik daripada mengobati”.   

Salah satu error prevention yang kurang baik diterapkan di web ini dalam proses registrasi. Pernah dibahas sebelumnya (di visibility of system status) bahwa tidak ada tanda-tanda sebelumnya kalau email yang saya masukkan sudah terdaftar, tapi ketika telah menekan tombol Register baru ditampilkan pesan seperti ini:

Hal yang cukup menyebalkan juga terjadi saat melakukan pembayaran. Awalnya, ditampilkan form, lalu saya mengisikan detail pemesanan. Karena ada pilihan “Copy dari detail pemesanan”, maka saya menchecklist itu. Dan saya berpikir kalau detail alamat kiriman sudah diisi semua. Akhirnya saya memilih tanda persetujuan dan mengklik tombol Konfirm.

Ternyata tampil peringatan seperti ini

Lalu saya memeriksa lagi di form “Detail Pemesanan” dan saya terkejut karena tidak ada kata-kata propinsi. So, why??  Apa nama kotanya gak boleh Indonesia? Akhirnya saya mengisi kota menjadi Subang

Tapi peringatan itu masih muncul, dan akhirnya saya sadari bahwa propinsi itu ada di detail alamat kirim. Mengapa tanda peringatan itu tidak diletakkan di dekat errornya berasal? Ok, fine. Lalu saya mengisi propinsi, dan mengklik tombol confirm. Tapi sungguh menjengkelkan, karena muncul lagi peringatan ini.

 Padahal sebelumnya saya sudah mencetang bagian persetujuan itu, akhirnya saya mencentang persetujuan dan saya klik tombol konfirm lagi (untuk kesekian kalinya). Akhirnyaaaa muncul status transaksi berhasil (walaupun data yang dimasukkan asal-asalan).

Saya menilai severity rate untuk kasus ini adalah 3, karena cukup menjengkelkan, bahkan sangat menjengkelkan ketika harus berulang kali melakukan hal yang sama : mengisi data - melihat pesan error - mengisi data lagi - melihat pesan error lagi. Mengapa sistemnya tidak memberi tahu segera setelah saya melakukan kesalahan?

Saya menyarankan beberapa perubahan

Jadi, ada tanda kalau kita sudah memasukkan data yang valid. Pengisian Negara, provinsi, kota dan kode pos pun tidak bisa sembarangan karena menggunakan drop down. Misal kita memilih Negara Indonesia, maka di bagian propinsi, ditampilkan pilihan propinsi di Indonesia. Misal dipilih Provinsi Jawa Barat, maka di bagian kota ditampilkan kota yang ada di Jawa Barat. Begitu seterusnya.

Kemudian untuk data yang belum diisi, diberi tanda atau peringatan bahwa pengguna belum mengisinya. Dengan begini, kemungkinan mengulangi pengisian data karena adanya kesalahan bisa diminimalisir.

Bagaimana menurut Anda?

Read More