0

About Web Usability(part 3 'The End')

Posted by ANGGI PUTRANTIO on 25 January 2011 in interaksi manusia dan komputer |

Postingan yang terakhir ini adalah ulasan lanjutan dari postingan sebelumnya. Web yang akan saya ulas juga masih sama yaitu baby-love.com. Tanpa harus menunggu lama, saya akan langsung melanjutkan ulasan website ini.

6. Recognition rather than recall
Pada halaman confirmation ini, pengguna dapat langsung mengedit daftar belanja, metode pembayaran, dan alamat pengiriman dengan mengklik tulisan yang memliki link ke halaman yang sesuai dengan tulisan tersebut.

recognation

Gambar 9. Recognition rather than recall

7. Flexibility and efficiency of use
Fleksibilitas dan efsiensi dalam website sangat membantu sekali untuk pengguna. Pengguna tidak perlu lagi bersusah payah jika ingin melakukan sesuatu hal dari menu-menu di website. Di website ini fleksibilitas dan efisiensi sangat kurang sekali. Saya beri contoh pada gambar di bawah ini:

efisien

Gambar 10. Flexibility and efficiency of use

Gambar di atas sebenarnya menunjukan fleksibilitas dan efisiensi untuk pengguna jika saja tulisan Tas Belanja, Pengiriman, dan Konfirmasi dapat di klik dan di link ke halaman yang sesuai. Tapi sayang, tulisan di atas tak ada arti, selain hanya petunjuk bahwa pengguna telah selesai melakukan sesuatu kegiatan.

8. Aesthetic and minimalist design
Pertama saya lihat website ini, pendapat saya adalah terlalu sederhana, dan masih banyak kekurangan. Pengguna dari website ini akan merasa sedikit kesusahan dalam menjalankan menu-menu yang ada. Banyak  menu yang mestinya ada, tetapi tidak ditemukan di dalam website ini. Masih banyak  juga white space yang seharusnya bisa dimanfaatkan dengan baik. White space tersebut juga dapat digunakan untuk menambahkan menu agar website ini memiliki fleksibilitas dan efisiensi yang tinggi.

awal

Gambar 11. Halaman awal tampak atas

bawah

Gambar 12. Halaman awal tampak bawah

9. Help users recognize, diagnose, and recover from error
Pada saat pengguna ingin mendaftar, dan dalam mengisi pendaftaran tersebut ada kesalahan, seharusnya diberi tanda agar pengguna mengetahui dengan jelas letak kesalahan dia.

error

Gambar 13. Error

10. Help and documentation
Website ini tidak memberikan informasi dengan lengkap mengenai tata cara penggunaannya, tidak ada halaman F.A.Q pada website ini.Yang ada hanya about us dan contact us yang dapat dimanfaatkan pengguna jika ingin menanyakan hal yang dia bingung.

Sekian ulasan mengenai website baby-love.com. Menurut pendapat saya website ini adalah website yang kurang usable. Banyak sekali pesan-pesan yang hilang dalam penyampaian kata-kata yang membuat pengguna bingung. Fleksibilitas dan efisiensi website ini juga masih sangat kurang. Dan saya sendiri masih kurang nyaman menggunakan website ini.

Ucapan banyak terima kasih saya sampaikan kepada Pak Firman yang telah mengajarkan begitu banyak mengenai interaksi manusia dan komputer.

Terima kasih Pak Firman.

Referensi:

  • http://www.webdesignerdepot.com/2009/09/interview-with-web-usability-guru-jakob-nielsen/
  • http://www.useit.com/jakob/
  • http://usability.gov/

2

About Web Usability(part 2)

Posted by ANGGI PUTRANTIO on 25 January 2011 in interaksi manusia dan komputer |

Berikut ini adalah ulasan saya tentang web baby-love.com. Web e-commerce ini memberi kemudahan kepada pengguna untuk memenuhi kebutuhan bayi tanpa harus keluar rumah. Ini lah screenshoot halaman utama dari website tersebut:

Gambar 1. Tampilan awal web
Gambar 1. Tampilan awal web

Website ini menyediakan perlengkapan bayi yang cukup lengkap untuk para penggunanya. Website ini juga mencoba mempermudah pengguna untuk mencari barang yang diinginkan dengan mengkategorikan produk-produk tersebut menjadi satu. Berdasarkan prinsip heuristik yang diposting sebelumnya, saya akan mencoba membahas kekurangan dan kelebihan dari website ini.

1. Visibility of system status
Pada halaman awal, website ini tidak memberikan informasi kepada pengguna tentang keberadaan pengguna pada website. Hal ini dikarenakan navigasi pada menu bar tidak ada yang berbeda. Jika saya memilih menu how to buy, maka tidak ada perbedaan warna antara menu yang sedang pilih dengan menu yang lainnya.

menubarGambar 2. Navigasi bar

Pada bagian kiri website ini terdapat menu lainnya yaitu menu login dan kategori dari produk-produk yang dijual. Produk-pruduk tersebut mungkin sengaja dikategorikan berdasarkan jenisnya dengan tujuan dapat mempermudah pengguna dan dapat langsung menemukan produk yang dinginkan. Pada kategori Gendongan ada jQuery yang membuat submenu tersebut terbuka ke samping.

kategori

Gambar 3. Menu kategori

Sebaiknya, petunjuk navigasi menu dapat dibedakan dengan warna yang lain agar pengguna tidak bingung dia sedang berada di halaman mana. Pilihan pada menu bar tersebut sebaiknya tidak menutupi deskripsi web di halaman utama. Menurut saya lebih baik di buat dropdwon menu. Dan juga pengkategoriannya dapat ditambah seperti kategori berdasarkan merek, harga, iklan terbaru, iklan terpopuler agar mengurangi white space yang ada. Jika kita ke halaman utama dan kita scrolling ke bawah maka banyak white space yang sebenernya bisa dimanfaatkan.

2. Match between system and the real world
Bahasa yang digunakan dalam web ini secara umum adalah bahasa indonesia. Web ini tidak konsisten dalam penggunaan bahasa karena menggunakan dua bahasa yang berbeda. Jika web baby-love.com merupakan salah satu website yang diperuntukan untuk masyarakat Indonesia, maka sebaiknya penggunaan bahasa cukup menggunakan bahasa Indonesia saja. Untuk navigasi menu misalnya, bahasa yang digunakan adalah bahasa Inggris. Jika pengguna memiliki toefl yang sedikit maka ini dapat menjadi kendala karena sedikit akan membuat bingung.

inggris

Gambar 4. Navigasi bar

Sebaiknya penggunaan bahasa lebih dikonsistensikan kembali yaitu hanya menggunakan satu bahasa, jika ada dua bahasa maka harus ada pilihan untuk bahasa yang lainnya.

3. User control and freedom
Pilihan pembatalan transaksi atau merubah produk barang yang diinginkan oleh user saat membeli tidak disediakan pada halaman shipping information. Halaman ini ada saat pengguna telah membeli salah satu produk yang diinginkan dan selesai mengisi form pendaftaran.

shipping

Gambar 5. Shipping information

Pengguna hanya disediakan pilihan OK! Jika pengguna ingin langsung membatalkan pembelian dan merubah daftar barang belanjaan, maka pengguna tidak dapat langsung memilki hak akses tersebut. Pengguna akan memilih button back pada web browser atau mengklik OK yang akan menuju ke halaman confirmation dan baru disediakan menu edit daftar barang belanjaan.

confirmation

Gambar 6. Confirmation

Di halaman ini juga tidak disediakan menu pembatalan pembelian. Hanya ada OK. Menurut saya sebaiknya ditambah dengan menu pembatalan yang di Link ke halaman utama tetapi tidak mengosongkan daftar barang belanja pengguna. Hak kebebasan dari pengguna masih kurang sekali.

4. Consistency and standards
Pada menu pencarian terlihat tidak konsisten, karena saat pengguna memasukan keyword sepatu maka hasil pencarian tersebut adalah nol. Sedangkan sepatu itu merupakan salah satu dari kategori yang ada. Di sebelah kanan juga terdapat dua logo BCA dimana satu logo bertuliskan bca di bawahnya dan yang satu lagi tidak.

search

Gambar 7. Search

5. Error prevention
Pesan error ketika saya mencoba form pendaftaran dengan hanya mengisi email, password, dan ulang password adalah seperti gambar di bawah ini:

error

Gambar 8. Error Daftar

Setelah saya mengisi nama saja dengan tetap mengosongkan form yang lainnya muncul pesan error yang menyebutkan untuk mengisi input alamat. Sama seperti gambar di atas. Menurut saya, pesan error tersebut dibuat dalam satu kelompok. Maksudnya agar pengguna bisa megetahui apa saja letak kesalahannya.

0

About Web Usability(part 1)

Posted by ANGGI PUTRANTIO on 8 January 2011 in interaksi manusia dan komputer |

Postingan kali ini saya buat dalam rangka memenuhi tugas akhir mata kuliah interaksi manusia dan komputer IPB. Tugas ini adalah kajian web usability pada sebuah website yang sudah ditentukan. Website yang saya kaji ialah website tokobabylove, yakni website dari sebuah toko peralatan anak bayi yang penggunanya diperuntukan untuk seorang ibu yang memilki bayi.
Sebelum mengulas web tersebut lebih dalam lagi, saya akan memberikan ulasan singkat mengenai web usability. Web usability merupakan suatu pendekatan agar suatu web mudah digunakan oleh seseorang atau pengguna untuk dapat melakukan hal yang dia perlukan dengan intuisi yang dia miliki, tanpa harus menjalani pelatihan khusus terlebih dahulu.
Secara garis besar, usability mengacu pada seberapa baik pengguna dapat mempelajari dan menggunakan produk untuk mencapai tujuan mereka dan seberapa puas mereka dengan proses tersebut.

Menurut Jakob Nielsen, usability didefinisikan sebagai lima komponen kualitas :

  • Learnability: seberapa mudah bagi pengguna untuk melakukan kegiatan (task) utama pada saat mereka pertama kali bertemu antarmuka tersebut?
  • Efficiency: Setelah pengguna terbiasa dengan antarmuka, seberapa cepat mereka melakukan suatu kegiatan?
  • Memorability: Saat pengguna kembali menggunakan antarmuka, setelah lama tidak menggunakannya, seberapa mudahkah mereka terbiasa kembali dengan antarmuka tersebut?
  • Errors: Berapa banyak kesalahan yang dilakukan pengguna, seberapa parah kesalahan tersebut, dan apakah pengguna dapat dengan mudah menangani kesalahan tersebut?
  • Satisfaction: Seberapa nyamankah pengguna dengan suatu antarmuka?

Pada web usability, terdapat sepuluh prinsip heuristic yang dikembangkan oleh Jakob Nielsen, yaitu :

  • Visibility of system status : Sistem dapat memberikan informasi kepada pengguna tentang apa yang terjadi pada system.
  • Match between system and the real world : Sistem harus ‘berbicara’ dalam bahasa yang biasa digunakan oleh pengguna. Kata,frasa, dan istilah yang digunakan mengikuti kebiasaan yang ada.
  • User control and freedom : Pengguna kadang memilih pilihan yang salah dan memerlukan opsi ‘emergency exit’. Pengguna dapat keluar dari keadaan akibat pilihan yang salah tersebut tanpa perlu melewati kegiatan tambahan lainnya.
  • Consistency and standards : Pengguna tidak harus berpikir apakah kata, situasi, dan aksi yang berbeda ternyata memiliki arti yang sama.
  • Error prevention : Sistem didesain sehingga mencegah pengguna melakukan kesalahan dalam penggunaan system. Bisa dilakukan dengan menggunakan pilihan konfirmasi.
  • Recognition rather than recall : Membuat objek, aksi, dan pilihan yang ada visible (jelas).
  • Flexibility and efficiency of use : Permudah pengguna untuk melakukan kegiatannya dengan lebih cepat.
  • Aesthetic and minimalist design : Dialog seharusnya tidak mengandung informasi yang tidak relevan atau tidak terlalu diperlukan.
  • Help users recognize, diagnose, and recover from errors : Pesan kesalahan harus dijelaskan dalam bahasa yang jelas, menjelaskan masalah dan memberikan solusi.
  • Help and documentation : Sistem menyediakan bantuan dan dokumentasi yang berisi informasi tentang penggunaan system.

Setelah postingan part 1 ini, saya akan mengulas website baby-love pada postingan part2. Terima kasih.

4

website visualization

Posted by ANGGI PUTRANTIO on 8 December 2010 in Academic |

website http://taggalaxy.de/ ini merupakan salah satu dari website dengan visualisasi yang menarik. website ini mengambil foto-foto dari website flickr.com. kumpulan foto-foto ini diambil dan dimasukan sesuai kategori tempat daerah, atau kota, dan juga negara.

setelah muncul semua gambar kita dapat mengarahkan mouse ke satu foto, klik, dan foto tersebut akan membesar.
sungguh menarik.

nah, kita lihat gambar di atas, terlihat foto yang membesar setelah kita klik. foto yang membesar tersebut hasil visualisasi size atau ukuran.

kita dapat memasukan Tag baru, sebagai contoh kita ketikan kata “Indonesia” maka kita akan mendapatkan bermacam-macam foto dari indonesia.

nah di atas pengelompokan tempat berdasarkan warna. kita bisa mengklik salah satunya.
sekian dari ulasan saya. terimakasih

0

web smpn 20 bekasi

Posted by ANGGI PUTRANTIO on 24 September 2010 in Academic |

WAW, website anak smp n 20, ckck, smp pun sudah ada website nya.

Website ini adalah website dari smp n 20 Bekasi yang terletak di Jatibening, Bekasi. Sekilas web ini cukup baik dalam penyampaian informasi mengenai sekolah. Dari penjelasan tentang profil sekolah itu sendiri, kurikulum, kesiswaan, E-learning, dan lain-lain.

Button navigasi dari web ini terletak di bagian paling atas. Terdapat bermacam-macam button, mulai dari Home, Profil sekolah, Blog Guru, dan lain-lain.
Namun yang saya bingungkan setelah kita mengklik salah satu button tersebut, kita akan di bawa ke dalam halaman yang berbeda, jadi seperti hal nya blog.

Di atas adalah halaman web yang di dapat setelah kita mengklik button navigasi tersebut. Di sini kita diberikan banyak sekali penjelasan seputar sekolah. Cukup baik sih. Namun ada hal yang kurang, saya tidak menemukan VISI dan MISI dari sekolah ini. Apa sekolah ini didirikan tanpa ada nya VISI dan MISI, atau memang ada, namun tidak ditunjukan di web ini. Kenapa yah??
Padahal VISI dan MISI itu kan penting. Coba jika ada siswa yang ingin mendaftar di skolah ini, jika dia membaca VISI dan MISI dari sekolah ini, dan ternyata VISI dan MISI itu meyakinkan dia, maka calon siswa tersebut berpikit untuk memilih sekolah ini.

Setelah saya berselancar di dalam web ini, saya menemukan keganjilan, dan apa yang terjadi setelah saya mengklik Button Hubungi Kami yang ada di halaman web kedua(mungkin) smpn 20 ini.
Halaman tersebut ternyata kosong dan saya tidak menemukan apa-apa. Hahaha, apa web ini hanya untuk SISWA nya saja yah, jadi kalau saya sebagai CALON siswa dan ingin mendaftar di sekolahan itu, saya tampaknya harus ke sekolah tersebut, karena saya tidak bisa menghubungi sekolah tersebut. APA yang buat web ini lupa yang memasukan no telp mungkin dari sekolah. hhha, ga tau deh.

Dan satu lagi, pada saat awal kita masuk web ini kita akan di ganggu oleh semacam iklan, coba liat deh…

udah yah segitu aja pembahasan dari saya, mohon komentar tambahan nya.HHe makasih

0

Website yang Membingungkan

Posted by ANGGI PUTRANTIO on 23 September 2010 in Academic |

komentar saya tentang website ini adalah :
1. User interface dari website ini tidak jelas, karena isinya di buat tidak beraturan. Dan menggunakan huruf besar semua.

2. Tidak jelas mana header, mana menu navigasi, mana content, ini tentunya membingungkan user.

3. Font colour yang terlalu banyak seperti web yang dibuat hanya untuk fun-fun aja.

4. Tidak mempunyai menu yang baik untuk user.

5. Scroll ke bawah yang terlalu panjang.

6. Background sound, tidak jelas maksudnya, yang pasti hal ini kurang lazim dalam penggunaan website.

sekian saja komentar dari saya, maklum masih belajar. haha

Copyright © 2010-2017 anggi.putrantio08's blog All rights reserved.
This site is using the Desk Mess Mirrored theme, v2.4, from BuyNowShop.com.