Kajian Web Usability – Penutup (5 of 5)

June 25th, 2010
Yeaahh, akhirnya sampai ke penutup juga !! :D. Ini adalah postingan terakhir saya dengan label Web Usability (untuk lebih tepatnya postingan terakhr untuk tugas IMK, hehehe). Sebelumnya saya memberitahukan bahwa saya tidak menganalisis semua menu utama yang ada di website agnesmonicaofficial.com. Dari 7 menu utama antara lain Home, Profiles, News, Gallery, Nez Community, Agnezious dan Contact Us saya cuma menganalisis 4 diantaranya yaitu Home, Profiles, News dan Gallery. Hal ini karena untuk Menu Nez Community dan News mempunyai kemiripan tampilan sehingga saya mengambil salah satunya saja. Sedangkan untuk Menu Agnezious dan Contact Us menurut saya sudah bagus usability-nya. Dari hasil analisis didapat bahwa secara umum desain interface website agnesmonicaofficial.com perlu diperbaiki lagi, terutama dari segi concistency dan learnability. Hal ini dikarenakan karena masih banyak ditemukan desain yang tidak konsisten formatnya, dan juga masih banyak fungsi-fungsi yang kurang visible bagi user. Selain itu perlu ditinjau ulang lagi mengenai pemilihan latar gambar dan pemilihan lay-out karena saya melihat rancangan lay-out website agnesmonicaofficial.com masih ‘aneh’.

Saya menyadari bahwa kajian web usability saya ini jauh dari sempurna. Oleh karena itu saya mengharapkan kritik dan masukan yang membangun dari rekan-rekan sekalian demi kesempurnaan kajian ini. Saya mengucapkan terima kasih kepada teman-teman yang telah mengajari dan memberi masukan how to be a professional analyst in usability. Terima kasih juga buat teman-teman yang sudah meluangkan waktunya untuk memberi komentar di postingan saya sebelumnya. I love you all.

Referensi:

Ardiansyah, Firman. 2010. Slide-slide kuliah Interaksi Manusia dan Komputer.
Galitz, Wilber O. 2007. The Essential Guide to User Interface Design: An Introduction to GUI Design Principles and Techniques, Third Edition. Indianapolis: Wiley Publishing, Inc.
Johnson, Jeff. 2003. Web Bloopers: 60 Common Web Design Mistakes and How to Avoid Them. San Francisco: Morgan Kaufmann Publishers.
Nielsen, Jakob, dan Hoa Loranger. 2006. Prioritizing Web Usability. Berkeley: New Rider

sekian,

-yudizious-

Kajian Web Usability – Analysis Part II (4 of 5)

June 24th, 2010
Setelah postingan yang sebelumnya saya telah membahas usability dari menu Home dan Profiles, maka pada postingan kali ini saya lanjutkan lagi kajiannya dengan mengupas tuntas (oops, terbawa jargon infotainment jadinya :D) usability pada website agnesmonicaofficial.com terutama pada menu News dan Gallery.

Tampilan untuk menu News tampak seperti pada gambar di atas. Menu News terbagi lagi menjadi sub menu Events, NezLetter dan NezBlog. Visualisasi sub menu seperti yang terlihat pada gambar menurut saya cukup menarik, dikemas dengan tab menu dengan menambahkan unsur warna yang mencolok untuk mengalihkan pandangan user. Tapi terdapat kekurangan pada desain antarmuka ini. Pada menu utama, indikator yang menunjukkan posisi user (Where am I) digambarkan dengan memberi simbol-simbol di bawah tombol menunya. Tapi di sub menu yang berada di menu News ini, indikator Where Am I menggunakan warna, dimana untuk menunjukkan posisi user digunakan peng-enable-an dan peng-disable-an warna. Disini jelas sudah terjadi inconsistency perancangan antarmuka, sehingga dapat mengganggu user tentunya.

Hal yang cukup mengganjal juga terdapat pada gambar di bawah ini.

Gambar di atas masih bagian dari page News. Bagian yang saya tandai dengan lingkaran merah adalah content dari menu News itu sendiri. Di situ terlihat bagaimana alignment text yang buruk sekali. Tulisan terlihat tidak eye catchy karena selain preview isi yang sangat terbatas, penempatan posisinya pun sangat mengganggu. Space di bagian kanan page menjadi mubazir karena posisi tulisan memanjang ke bawah. Selain itu, judul content pada halaman di atas (Agnez Fair) ternyata tidak clickable. Ini di luar kebiasaan karena biasanya untuk membaca berita tentang selengkapnya, user akan meng-klik judul tersebut.

Tampilan untuk menu Gallery tampak seperti gambar di atas. Menu Gallery juga terdiri dari beberapa sub menu, yaitu Music Gallery, Video Gallery dan Picture Gallery. ‘Sasaran’ analisis saya telah ditandai dengan lingkaran merah pada gambar diatas (seperti biasa :D). Analisis akan mengacu pada nomor yang ada pada lingkaran merah tersebut.

  1. Pada lingkaran merah yang diberi nomor 1, saya masih membahas tentang indikator yang menunjukkan Where Am I. Penggunaan simbol tersebut sangat membantu user untuk mengetahui posisi dia sekarang ada dimana.
  2. Pada lingkaran merah nomor 2, mengulang analisis sebelumnya tentang scroll button yang kurang visible bagi user. Pemilihan warna, ukuran dan bentuk yang kurang sesuai membuat tombol menjadi tampak seperti ‘hiasan’ saja, tampak tidak mempunyai fungsi sebagai tombol untuk melihat page ke bawah dan ke atas.
  3. Lingkaran merah nomor 3, menunjukkan bahwa saya agak terganggu dengan penempatan sub menu Music Gallery, Video Gallery dan Picture Gallery. Di menu News seperti yang saya analisis sebelumnya, sub menu di buat dengan bentuk menyerupai tab sehingga lebih mudah dimengerti oleh user. Tapi sub menu yang ada di menu Gallery letaknya cenderung ‘berantakan’, tersebar di seluruh area page. Belum lagi pemilihan latar yang kurang sesuai membuat tampilan page menjadi ‘aneh’. Adanya inconsistency desain semacam ini yang membuat user kesulitan untuk menggunakan rancangan dengan baik (less memorability).
  4. Pada Lingkran nomor 4 lebih ke masalah efficiency. Disitu, Video Gallery terbagi lagi menjadi sub-sub menu lainnya (kategori). Pada bagian halaman tersebut (yang dilingkari merah nomor 4) sebelah kiri adalah kategorinya, dan sebelah kanan adalah isi dari semua kategori tersebut. Menurut saya, isi dari kategori tersebut tidak perlu ditampilkan, cukup dimasukkan ke dalam kategori yang sesuai. Dengan adanya tampilan isi tersebut, user akan kebingungan dan mengira itu juga merupakan kategori Video Gallery, padahal itu adalah isi dari kategori Video Gallery. Selain itu, pemunculan isi dari semua kategori di luar membuat adanya less efficiency, karena link-link jadi banyak dan membuat user semakin kebingungan. (yudizious, 2010)

(bersambung ke bagian 5……..)

sekian,
-yudizious-

Kajian Web Usability – Analysis Part I (3 of 5)

June 23rd, 2010
Sebelum memulai analisisnya, saya akan membahas sedikit tentang situs yang akan saya bahas, yaitu situs official Agnes Monica. Situs tersebut adalah situs pribadi (official site) yang berisi semua tentang Agnes Monica, seorang penyanyi papan atas Indonesia. Informasi yang bisa diakses dari situs tersebut meliputi profil lengkap Agnes Monica, update kegiatan terbaru (news), dan kumpulan gallery (gambar, musik dan video).
Kajian mengenai usability dari website agnesmonicaofficial dimulai dengan menganalisis tampilan utama (home) dari situs tersebut kemudian dilanjutkan dengan beberapa menu-menu yang lain yang dianggap layak untuk dianalisis.
Sekilas tidak ada yang salah dengan tampilan home di atas. Tapi ada sesuatu yang mengganjal, dimanakah letak menu utamanya ?? Jujur saya juga bingung menemukan menu utama saat pertama kali membuka situs ini karena yang muncul hanya ada latar gambar macam-macam benda yang asumsi saya clickable. Asumsi saya ternyata salah. Saya tidak bisa menemukan tampilan menu utamanya. Ternyata, setelah kursor digerakkan menjelajahi sepanjang area page, muncul sesutu yang “aneh”. Di setiap area page tertentu ternyata kalau disorot mengeluarkan hoofer text berupa menu-menu utama yang ada situs agnesmonicaofficial, seperti yang terlihat pada gambar diatas (diberi tanda dengan lingkaran merah nomor 2). Setelah saya teliti lebih jauh lagi, ternyata tampilan lengkap menu ada di bagian bawah page, ditunjukkan dengan lingkaran merah nomor 1 pada gambar diatas.
  1. Pada gambar diatas terlihat bahwa kalu saya menyorot bagian yang diberi tanda lingkaran merah nomer 2, maka yang keluar ada hoofer text berupa tulisan ‘profile’, dimana kalau di klik akan menuju ke halaman Profile. Strategi penggambaran menu seperti diatas memang cukup bagus dari segi efficiency, dimana halaman utama terlihat ‘bersih’ dari content tulisan sehingga diharapkan user tidak kebingungan dengan banyaknya content tulisan (link) di halaman awal. Tapi strategi ini sangat buruk dari learnability, dimana user sangat kesulitan untuk menemukan tas task dasar dalam hal ini menu utama.
  2. Pada bagian halaman yang ditunjukkan dengan lingkaran merah nomor 1, terlihat bahwa visualisasi lengkap mengenai apa saja menu utama terletak pada bagian bawah dengan tulisan yang sangat kecil. Menurut saya, bagian ini adalah bagian yang jarang diakses oleh user karena memang posisinya yang berada di paling bawah (footer). Jadi keberadaan tampilan menu ini terlihat sangat ‘useless‘ karena user cenderung mencari di bagian atas halaman untuk melihat menu utama.

Setelah “menemukan” menu-menu utama dari website agnesmonicaofficial, maka penjelajahan dilanjutkan dengan mengunjungi menu Profiles. Tampilan menu Profiles adalah sebagai berikut :


Menu Profiles mempunyai sub menu lagi yaitu Albums, Achievement dan Movies. Dari gambar diatas terdapat 2 poin yang akan saya analisis, ditunjukkan dengan tanda lingkaran merah yang diberi nomor pada halaman website tersebut.

  1. Pada lingkaran merah yang diberi nomor 1, saya akan menunjukkan bahwa website ini sudah mendukung konsep Where Am I. Jadi, website memberi tahu posisi user sekarang ada dimana. Pemakaian tanda untuk menunjukkan posisi user sangat menarik, tidak lagi memakai permainan warna tapi menggunakan simbol-simbol yang sangat unik. Ini tentu saja menarik dari segi pandang user.
  2. Untuk lingkaran merah yang diberi nomor 2, saya akan menganalis masalah tombol scroll. Menurut saya, tombol scroll yang digunakan pada halaman tersebut kurang visible bagi user, sehingga kurang nampak mempunyai fungsi seperti tombol untuk scroll yang biasa digunakan. Selain ukurannya yang kecil, pemilihan warna yang kurang mendukung, juga bentuk yang digunakan pun kurang lazim. Sehingga user tidak akan menyangka bahwa tombol itu sebenarnya adalah tombol untuk scroll.

Selain 2 hal diatas yang telah saya sebutkan, hal menarik yang saya temui saat berada di halaman Profiles adalah tampak seperti di bawah.

Hal menarik yang saya maksud telah saya tandai dengan lingkaran merah di atas. Jadi, ketika saya meng-klik link yang berisi gambar pada halaman tersebut, maka akan langsung muncul gambar secara pop up. Visualisasinya seperti terlihat pada gambar diatas. Ini sangat menarik karena untuk melihat gambar tidak perlu membuka page baru. Selain hemat waktu, space yang digunakan pun menjadi lebih sedikit. Selain itu, pengkasesan website menjadi lebih praktis. (yudizious, 2010)

(bersambung ke bagian 4…….)

Sekian,
-y
udizious-

Kajian Web Usability – Web Usability, What Is it ?? (2 of 5)

June 23rd, 2010
Sebelum kita lebih jauh membicarakan masalah Web Usability (dan tentu saja sebelum mengkaji usability dari agnesmonicaofficial.com). ada baiknya kita mereview sedikit berkaitan dengan apa yang dimaksud dengan Web Usability itu sendiri. Web usability adalah salah satu faktor penting dalam mengembangkan sebuah situs. Pengembang harus memahami prinsip-prinsip usability sebelum mengimplemen-tasikannya pada sebuah situs. Menurut Jacob Nielsen, usability adalah sebuah atribut kualitas yang menilai tingkat kemudahan user interface untuk digunakan. Usability juga mengacu kepada metode untuk meningkatkan kemudahan penggunaan selama proses perancangan. Secara umum, usability berarti bagaimana user dapat belajar dan menggunakan suatu produk untuk mencapai tujuan yang ia harapkan serta seberapa baik pengalaman yang didapat user saat produk itu digunakan. Berkaitan dengan Web Usability, tentunya produk yang dibicarakan di sini adalah website.

Menurut Nielsen (2003), komponen yang mempengaruhi usability antara lain :

  • Learnability

Learnability menjelaskan tingkat kemudahan pengguna untuk memenuhi task-task dasar ketika pertama kali mereka melihat/menggunakan hasil perancangan. Agar mudah dipelajari, letakkan isi yang paling penting pada bagian atas halaman, sehingga pengunjung dapat melihat apa yang mereka cari dengan cepat. Pelajarilah kemungkinan-kemungkinan tentang kebiasaan pengunjung, mengapa mereka berada di situs kita dan apa yang mereka cari. Jangan sampai membuat pengunjung bingung dan menebak apa yang harus mereka lakukan ketika berada di situs kita.

  • Efficiency

Efficiency menjelaskan tingkat kecepatan pengguna dalam menyelesaikan task-task setelah mereka mempelajari hasil perancangan. Situs yang efisien dapat menyajikan informasi dengan cepat. Jangan membuat link yang terlalu banyak. Sediakan seperlunya saja dan antarkan pengunjung untuk mencapai informasi yang mereka perlukan dengan mudah dan cepat.

  • Memorability

Memorability menjelaskan tingkat kemudahan pengguna dalam menggunakan rancangan dengan baik, setelah beberapa lama tidak menggunakannya. Agar mudah diingat, sebuah situs sebaiknya jangan terlalu banyak melakukan perubahan-perubahan yang mencolok. Misalnya, pada navigasi, jangan terlalu sering melakukan penggantian tampilannya. Pengunjung nanti akan perlu waktu untuk menyesuaikan dan mempelajarinya kembali.

  • Errors

Errors menjelaskan jumlah error yang dilakukan oleh pengguna, tingkat kejengkelan terhadap error dan cara memperbaiki error. Jangan sampai ada link yang tidak berfungsi (broken link) atau halamannya masih dalam proses pembuatan (under construction). Sebaiknya periksa kembali link-link yang tidak bisa berfungsi dengan baik dan jangan cantumkan link tersebut jika belum ada isinya. Ketika pengunjung menemukan halaman yang kosong, mereka bisa kecewa.

  • Satisfaction

Satisfaction menjelaskan tingkat kepuasan pengguna dalam menggunakan rancangan. Kepuasan adalah hal yang paling diinginkan oleh setiap pengguna. Tentu pengunjung menginginkan situs dapat dengan mudah digunakan dan dipelajari. Selain itu mereka ingin bisa menemukan apa yang dicari dengan cepat, mengetahui di mana mereka berada dan bisa pergi ke mana saja dalam sebuah situs. Tak ketinggalan pengunjung bisa dengan mudah memberitahukan situs tersebut kepada teman-teman mereka.

Sebuah situs dengan usability yang buruk akan ditinggalkan oleh user. Berikut ini adalah beberapa kondisi yang akan membuat pengguna meninggalkan sebuah situs :

  • Situs sulit digunakan.
  • Homepage tidak menjelaskan tentang apa yang ditawarkan oleh perguruan tinggi dan apa saja yang dapat dilakukan oleh pengguna pada situs tersebut (pengguna tidak mendapatkan apa yang dia ingin cari pada situs tersebut).
  • Pengguna mendapatkan adanya kesalahan pada situs.
  • Informasi sulit sulit dibaca dan tidak mampu menjawab pertanyaan-pertanyaan pengguna. (yudizious, 2010)

(bersambung ke bagian 3……..)

sekian
-yudizious-

Kajian Web Usability – Mukadimah (1 of 5)

June 21st, 2010
Postingan saya kali ini mungkin agak sedikit “berbeda” dengan postingan yang sebelumnya. Jadi, apakah yang dimaksud berbeda disini ?? Berbeda judul jelas. Berbeda tanggal posting juga jelas. Tetapi perbedaan itu lebih ke segi isi dari postingan saya, dimana untuk postingan saya yang ini dan seterusnya (mungkin sampai 4-5 postingan ke depan) akan bertema tentang review singkat dan ulasan tentang suatu website dilihat dari segi usability-nya. Jadi bau-baunya akan seperti membuat sebuah resensi, melakukan review sekaligus menyertakan kelebihan dan kekurangannya. Lah bagaimana ceritanya saya bisa banting setir (tulaaang kali dibanting) menjadi seorang “resensator” ??

Jadi ceritanya, pada semester 6 Departemen Ilmu Komputer kami mendapat suatu mata kuliah Interaksi Manusia dan Komputer (IMK), salah satu mata kuliah terfavorit teman-teman di semester 6. Nah, semua berawal dari mata kuliah ini. Kami diwajibkan memilih satu website lokal untuk dikaji dari sisi usability-nya. Ini adalah tugas akhir sebelum kita benar-benar dinyatakan lulus (lolos mungkin untuk lebih tepatnya) dari mata kuliah yang diajar Bapak Firman ini. Dan pilihan website saya tidak jauh-jauh dari “kehidupan” saya selama ini. Yak, saya memilih official website Agnes Monica, yaitu agnesmonicaofficial.com

Tapi sayang, saat saya mau memulai untuk mengkajinya, website yang bersangkutan malah di hack. Poor me…:). Jadi, kapan kapan saja saya mulai melanjutkannya lagi. Sekarang masih dalam masa post-UAS, mau refreshing duluu…)

By the way, inilah tampilan website http://agnesmonicaofficial.com/ yang sedang di hack ituu.

Kerangka daftar postingan untuk Kajian Web Usability adalah sebagai berikut :

  1. Kajian Web Usability – Mukadimah (1 of 5)
  2. Kajian Web Usability – Web Usability, What Is It ?? (2 of 5)
  3. Kajian Web Usability – Analysis Part I (3 of 5)
  4. Kajian Web Usability – Analysis Part II (4 of 5)
  5. Kajian Web Usability – Penutup (5 of 5)

Jadi, keep waiting yah teman-teman untuk postingan yang selanjutnya. Postingan ini masih permulaan, next pasti lebih menarik…hehehe (yudizious, 2010)

(bersambung ke bagian 2…….)

sekian,
-yudizious-