tulisan kali ini adalah lanjutan dari seri Animestuffs Usability-Bab II

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

ketika pengguna salah memasukkan inputan, pesan yang ditampilkan cukup jelas menurut saya, tapi akan lebih baik lagi jika disertai contoh yang inputan yang benar

namun saya pernah jika e-mail inputan tidak sesuai pesan error yang tampil seperti ini

yang pastinya sangat sulit dimengerti pengguna

point : 6/10

10. help and documentation

bantuan yang ada untuk pengguna masih minim bahkan hampir tidak ada pada situs ini, menu “how tu buy” pun hanya berisi tatacara pembayaran, sehingga jika pengguna benar-benar buta tentang internet situs ini cukup susah digunakan.

point : 4/10

KESIMPULAN

mari kita lihat berapa point yang didapat situs ini dari ke-10 heuristic evaluation

  1. visibility of system status  –5/10
  2. match between system and real world  – 6.5/10
  3. user control and freedom   – 4/10
  4. consistency and standards  – 6/10
  5. error prevention  – 6.8/10
  6. recognition rather than recall  – 5.5/10
  7. flexibility and effeciency of use   – 6.5/10
  8. aesthetic and minimal design   – 5/10
  9. help users recognize, diagnose and recovers from errors   – 6/10
  10. help and documentation   – 4/10

jika dijumlahkan menjadi 55.3/100

menurut saya nilai 55.3 cukup buruk untuk sebuah situs e-commerce, karena dari berbagai segi situs ini kurang nyaman untuk digunakan, bahkan bagi saya yang sudah terbiasa menggunakan internet.

PENUTUP

mungkin sekian saja postingan berseri saya yang merupakan salah satu rangkaian tugas IMK. semoga postingan ini bermanfaat, terutama bagi pemilik situs tersebut. mohon maaf jika ada suatu kesalahan dari segi penulisan maupun ulasan.

Ja Mata-ne!!

tulisan kali ini adalah lanjutan dari Animestuffs Usability-Bab I

5. error prevention

pada kotak search tidak dibatasi apa saja yang bisa dicari, sehingga pengguna bisa memasukkan apapun dan yang tidak ada pesan error. Pada form registrasi sudah ada tanda (*) yang berarti input harus diisi agar registrasi sukses

point : 6.8/10

6. Recoginition rather than recall

mungkin kendala terbesar ada pada halaman cart yang mengharuskan pengguna mengingat kembali fungsi (x) di tabel

dan ketika kita sudah selesai mendaftar/login maka akan ditampilkan pesan cara pembayaran, di sini saya tidak melihat berapa jumlah yang kita harus bayarkan sehingga pengguna harus mengingat berapa jumlah yang harus dibayarkan

point : 5.5/10

7. flexibility and effeciency of use

dari segi fleksibilitas, situs ini cukup mudah untuk digunakan, pengunjung lama maupun baru dapat dengan mudah berbelanja di situs ini. namun, dari segi efisiensi situs ini masih memilik beberapa kekurangan seperti harus mendaftar sebelum membeli dan pengunjung harus mengingat berapa jumlah yang harus ditransfer.

point : 6.5/10

8. aesthetic and minimalist design

desain untuk situs ini menurut saya agak kurang sedap dipandang, dari segi peletakan komponen dan pemilihan warna. selain itu, informasi yang ditawarkan untuk suatu barang sangat sedikit sehingga pengguna tidak bisa terlalu membandingkan antar barang.

point : 5/10

postingan ini akan berlanjut ke Animestuffs Usability-epilog

USABILITY

Kali ini saya akan mereview usability dari suatu website, yaitu animestuffs. postingan ini akan terdiri dari beberapa seri yang membahas tentang usability dari website ini.

untuk mereview usability dari website ini saya akan menggunakan standar` yang telah didefinikankan oleh nielsen, yaitu:

  1. learnability, mudahnya pengguna menyelesaikan suatu pekerjaan saat pertama kali menggunakan
  2. Efficiency, seberapa cepat pengguna menyelesaikan suatu pekerjaan
  3. Memorability, apakah pengguna masih ingat fungsi website setelah lama tak berkunjung
  4. Errors, seberapa banyak error dan bagaimana menyelesaikannya
  5. Satisfication, apakah desainnya memuaskan pengguna

sedangkan untuk peniliaian secara heuristic nielsen membaginya menjadi 10 kategori :

  1. visibility of the system status, sistem harus terus menginformasikan pengguna tentang apa yang terjadi dalam rentang waktu yang wajar.
  2. Match between system and real world, bahasa yang digunakan oleh sistem harus bisa dimengerti pengguna dan sesusai dengan isitilah dunia nyata
  3. User control and freedom, pengguna terkadang membuat suatu kesalahan, maka dari itu sistem harus bisa menyediakan fungsi yang bisa membatalkan kesalahan.
  4. Consistency and standards, antarmuka sebuah web haruslah konsisten dari satu halaman ke halaman lain dan mengikuti standar yang ada
  5. Error prevention, daripada menampilkan pesan error akan lebih baik jika error yang ada dihilangkan terlebih dahulu
  6. Recognition rather than recall, usahakan agar pengguna mengingat sesedikit mungkin dengan membuat objek terlihat dan mudah dikenali
  7. Flexibility and efficiency of use, sistem yang ada harus fleksibel terhadap berbagai macam pengguna dan efisien
  8. Aesthetic and minimalist design, dialog yang ada haruslah efisien dan sesuai tujuan, desain yang ada juga minimalis tapi tepat guna
  9. Help users recognize, diagnose, and recover from errors, pesan error haruslah jelas dan bisa memudahkan pengguna kembali dari error
  10. Help and documentation, terkadang dokumentasi yang diperlukan agar fungsi-fungsi dalam sistem jelas

saya akan menggunakan heuristic evaluation di atas untuk mereview situs ini. range point yang saya gunakan adalah :

0-4.4 : merah – buruk

4.5-6.4 : oranye – sedang

6.5-10.0 : hijau – bagus

SEKILAS MENGENAI ANIMESTUFFS

animestuffs adalah sebuah situs e-commerce yang menjual-jual pernak pernik mengenai anime yang kebanyakan barangnya sudah original. situs ini mencoba memfasilitasi fans suatu anime yang ingin membeli aksesori yang original, karena biasanya aksesori original hanya bisa didapatkan di luar negeri.

sekilas tampilan awal animestuffs

postingan ini akan berlanjut ke Animestuffs Usability-Bab I

tulisan kali ini adalah lanjutan dari Animestuffs Usability-prolog

REVIEW

untuk membahas usability dari animestuffs mari kita bahas dari sisi heuristic evaluation nielsen satu persatu

1. visibility of the system status

visibility dari situs ini menurut saya agak kurang, karena untuk mengetahui pengguna berada di halaman apa, hanya tersedia judul halaman web tersebut, sedangkan page title statis sehingga jika kita berpindah tab, sulit mengetahu halaman dan kita sedikit susah mengetahui halaman apa yang sedang kita kunjungi karena warna link yang kita kunjugi tidak berubah.

selain itu jika saya ingin melihat detail dari suatu barang, detail yang ditawarkan cukup sedikit

hanya ada kategori barang dan harganya. selain itu, jika kita memesan maka akan masuk menu cart yang jika kita klik update cart maka akan muncul halaman yang persis sama, sehingga pengguna tidak tahu apakah cart sudah terupdate atau belum

tanda checklist di samping item ternyata untuk menghapus item, pertama kali saya gunakan saya kira itu adalah checklist untuk update cart -_-

point : 5/10

2. match between system and real world

pada beberapa halaman ada pemilihan bahasa yang bercampur(kanan atas)

untuk masalah harga, sudah bagus ditampilkan memakai format Rp.xxx,xxx sehingga user tidak bingung memisahnya(kiri)

namun terkadang ada produk yang hanya berupa angka dan tidak mempunyai nama(bawah)

point : 6.5/10

3. User control and freedom

seperti pada point pertama, tanda checklist di kanan item ternyata gunanya untuk menghapus item, dan pada saat penghapusan tidak ada konfirmasi ke pengguna apakah pengguna benar-benar ingin menghapus item, sehingga jika pengguna salah mengklik maka item akan terhapus. selain itu, pilihan “update cart” dan “confirm order” berbentuk button tetapi pilihan “remove all” adalah sebuah link yang lagi-lagi tidak ada konfirmasi.

selain itu untuk membeli sesuatu kita “dipaksa” untuk mendaftar terlebih dahulu dan saya tidak melihat suatu tempat di halaman utama untuk login, jadi ketika kita membeli sesuatu nampaknya harus selalu login terlebih dahulu

point : 4/10

4.  Consistency and Standards

konsistensi di situs ini cukup kurang karena banner yang selalu berubah-ubah setiap pindah halaman. selain itu, terkadang ada beberapa halaman yang berbeda fontnya seperti halaman “how to buy”

point : 6/10

postingan ini akan berlanjut ke Animestuffs Usability-Bab II

Aplikasi web ini memvisualisasikan berapa banyak tag-tag dalam html dan bagaimana struktur dari sebuah halaman web tersusun. Visualisasi ini berbentuk graf dengan nodenya adalah tag html yang diwakili oleh warna tertentu dan edgenya adalah tingkatan dari suatu tag html (nested tag) . Pengunjung dapat membuat visualisasi dari sebuah halaman page dengan membuka http://www.aharef.info/static/htmlgraph/. Situs ini menggunakan teknologi applet untuk membuat visualisasi datanya. yay java!!

daripada anda melihat source code suatu halaman web yang hanya berisi huruf dan symbol untuk mengerti struktur suatu halaman web

lebih baik dengan visualisasi graf berwarna seperti ini

berikut penjelasan warna yang mewakili masing-masing tag

biru : tag a(link)

merah : tag table, tr, dan td

hijau : tag div

ungu : tag img

kuning : tag form

oranye : tag br,quote,dll

hitam : tag html

abu-abu : tag lainnya(script dll)

8 warna yang dipakai menurut saya sudah cukup untuk membedakan antara tag yang satu dengan yang lainnya, representasi berbentuk graf juga bisa menjelaskan struktur dan hierarki halaman web ini, seperti tag div yang didalamnya terdapat beberapa link(bagian bawah).

Halaman web diatas adalah halaman web dari facebook, bisa dilihat bahwa halaman web ini banyak memakai tag script dan banyak tag div untuk masing-masing elemen.

Visualisasi ini juga bisa untuk membandingkan struktur dua halaman web yang menawarkan “jasa” yang serupa

google dan bing

visualisasi halaman web google

visualisasi halaman web bing.com

bisa kita lihat mana yang lebih unggul halaman web google lebih sederhana dengan sedikit div, bandingkan dengan bing yang menaruh semacam gallery (buat apa??) di halaman utamanya.

mungkin kekurangan aplikasi ini adalah jika struktur web terlalu kompleks dan pemakaian applet yang lumayan lama untuk loading (mungkin HTML5 suatu hari nanti?)

sekian saja tulisan saya, sambil iseng ngeblog siapa tahu dapat satu juta 😀

beginilah jadinya kalo manusia-manusia “error” bertemu

aneh, ngga rasional, nyeleneh itulah geeks 😀

nb : nama disensor demi privasi geeks 😛

Sebenarnya bikin blog ini pas lagi rame-ramenya anak Ilkom rajin komen :D, kebetulan ada tugas IMK,  jadilah tulisan-tulisan yang selama ini saya pendam dikeluarkan 😛

postingan kali ini akan membahas beberapa website yang tampilan atau fungsinya menurut saya ‘agak’ mengganggu, mohon maaf  m(- -)m kepada developer websitenya , tapi kritik yang membangun akan menjadikan sesuatu lebih baik. daripada lama-lama berpanjang lebar kita mulai saja (semoga g ada bata yang melayang ke saya)

1. capcai captcha registrasi G-mail

baru-baru ini saya coba membuat akun g-mail baru, ketika proses pendaftaran saya agak terganggu dengan fungsi captcha untuk registrasi g-mail

perhatikan baik-baik gambar ini :

berapa persen orang Indonesia yang bisa membaca captcha diatas, untuk saya captcha diatas masih bisa dibaca (cracondos kah bacanya?) tapi bayangkan jika ada seorang berumur yang ingin membuat akun g-mail baru untuk berkomunikasi dengan cucunya diluar negeri.

sekarang mari kita ‘jalan-jalan’ ke yahoo!

ada yang berbeda? walaupun image captcha juga ‘lumayan’ susah dibaca (adakah captcha yang gampang dibaca?) setidaknya yahoo! mail menyediakan tombol “coba kode baru” jadi user bisa mengganti gambar jika yang ini sulit dibaca, hal ini tidak tersedia di g-mail yang jika salah memasukkan captcha kita harus memasukkan ulang password, apalagi jika kita sampai salah memasukkan captcha berulang kali -_-“

adalagi :

bagaimana jika nama saya benar-benar John Smith? apa maksudnya angka-angka dibelakang itu?

——-

2. Website bioskop 21

pas lagi bingung nyari website lain untuk dikomentari, iseng-iseng saya apdet status di facebook buat saran. eh, dapet saran dari teman saya, Agung Prasetiyo, tentang website ini. credit to him :).

website ini beralamatkan di http://www.21cineplex.com/

bisa kita lihat film-film Indonesia yang kualitasnya patut dipertanyakan

yang saya lihat disini adalah tampilan menu utama yang banyak dan agak membingungkan, menu “the star” dan “exclusive” ketika saya buka isinya tidak berbeda jauh, begitu pula dengan menu “gallery” yang menurut saya bisa digabung dengan menu “video”, adalagi ketika saya coba klik menu “slow motion”, maka keluar tampilan seperti ini

nampaknya halaman ini berisikan berita-berita seputar dunia perfilman, yang saya herankan kenapa namanya “slow motion”?

——-

dari hasil penerawangan saya(browsing ngasal) ternyata susah nyari website yang tampilan/fungsionalitasnya agak mengganggu, mungkin ini juga faktor saya yang terbiasa memakai internet.

sekian dulu postingan ini, kalau ada yang kurang berkenan mohon maaf

Ja Mata Ne!!

Ketika sedang asik-asiknya nonton tv di rumah saya melihat sebuah ‘forum diskusi’ di media massa, ketika itu topik yang lagi hangat-hangatnya adalah konflik Indonesia-Malaysia. Karena tampaknya cukup menarik maka saya tonton acara itu, kebetulan acara itu mempertemukan para ‘pakar'(atau orang yang disebut pakar) tentang masalah ini, diskusi berjalan seru, masing-masing pakar mengeluarkan argumennya yang berapi-api. Tapi pada akhirnya tidak ada kesimpulan yang didapat, yang ada malah seperti ‘membakar’ semangat orang Indonesia agar kita memerangi Malaysia. bukannya saya setuju dengan tindakan Malaysia yang melanggar kedaulatan negara kita, tapi kita ini negara serumpun, sebangsa, bahkan malaysia termasuk negara Islam dan bahkan waktu TPB dulu banyak teman saya dari Malaysia, untuk apa kita bertengkar lama-lama?

Pikiran saya kembali ke masa lalu, pernah dulu saya menjumpai acara diskusi serupa di sebuah stasiun TV terkemuka. Konsep acaranya adalah mempertemukan dua kubu yaitu ‘pro’ dan ‘kontra’ mengenai suatu topik, lalu ada juga suara ‘gong’ yang membatasi waktu masing-masing peserta berbicara. ketika menonton acara itu saya ‘agak’ miris karena melihat ini lebih ke acara ‘adu domba’ daripada diskusi terlebih lagi dengan suara-suara ‘dukungan’ dari penonton dibelakang pembicara.

Dari contoh diatas, saya jadi berpikir, apakah benar media massa kita yang sekarang ini memberi solusi atas permasalahan yang terjadi?

it’s not Hello world! it’s pertamaX!! long live pertamaX!!