Analisis Usability Web www.tupperware.co.id (Part 4)

Postingan kali ini akan melanjutkan kajian yang ada pada postingan sebelumnya mengenai usability situs www.tupperware.co.id menurut Nielson:

6. Recognition Rather Than Recall

Pada situs www.tupperware.co.id untuk setiap text-link jika di-mouseover akan berubah warna sehingga dapat dengan mudah mengetahui bahwa text itu adalah sebuah tautan.

Gambar 1. Mouse-over

Pada form pengisian contact us www.tupperware.co.id mengizinkan untuk mengakses kembali informasi yang telah dituliskan apabila terjadi kesalahan pada pengisian form, sehingga user tidak harus mengisi dari awal form, cukup mengisi informasi yang salah dan juga informasi yang dibutuhkan untuk diisi ulang.

Gambar 2. Tanpa kehilangan informasi yang telah dimasukkan

7. Flexibility and Efficiency of Use

Situs www.tupperware.co.id sangat mudah untuk digunakan karena secara keseluruhan interface yang ada pada situs Tupperware sudah bagus. Namun masih ada sedikit kekurangan yang terlihat yaitu dari segi menu yang terlalu banyak. Ada di bagian paling atas, dibawah logo Tupperware yang merupakan dropdown menu, di bagian samping kiri, dan juga di bagian atas tepat dibawah menu search. Menu yang terlalu banyak dapat membuat user bingung untuk menentukan kemana dia akan pergi.

Gambar 3. Banyaknya Menu bar

Masalah juga ditemui yaitu sebagian besar halaman yang ada pada situs www.tupperware.co.id membutuhkan scrolling karena halaman yang terlalu panjang.

Gambar 4. Scrolling

8. Aesthetic and Minimalist Design

Pemilihan warna pada situs www.tupperware.co.id sangat bagus dan minimalis. Namun terdapat sedikit masalah dalam pemilihan glyph yang dirasa tidak sesuai untuk menu bar. Dari segi visualisasi jenis glyph ini agak tidak cocok dengan glyph lain yang ada pada situs ini.

Gambar 5. Glyph

Pencantuman logo pada header penting untuk menunjukkan identitas dari situs. Posisi peletakan logo Tupperware yang terletak pada kiri atas sudah sangat baik dan mudah dilihat oleh user. Hal ini dikarenakan sebagian besar pembaca mulai membaca situs dari pojok kiri atas, seperti saat membaca buku.

Gambar 6. Logo header

Whitespace pada situs www.tupperware.co.id memiliki komposisi yang tepat tidak ramai tapi tidak juga terlalu sepi, dan pada tulisan yang panjang situs ini memberikan kutipan awal dari tulisannya, untuk melihat tulisan secara keseluruhan maka situs ini menyediakan layanan untuk melihat selengkapnya tulisan tersebut.

Gambar 7. Fitur melihat selengkapnya

9. Help Users Recognize, Diagnose, and Recover from Errors

Adanya pemberian error message ketika pengisian form sangat membantu user untuk mengetahui apa yang sebenarnya terjadi. Sehingga user dapat dimudahkan dengan adanya error message ini dan juga agar user tidak meduga-duga kesalahan yang sedang terjadi.

Gambar 8. Error Message

Konfirmasi berhasil juga diperlukan agar user tahu bahwa dia telah berhasil melakukan pengisian form. Namun disarankan agar konfirmasi yang dikeluarkan jelas dan detail sesuai dengan kegunaan pengisian agar user merasa senang setelah melalui berbagai tahapan pengisian form.

Gambar 9. Konfirmasi berhasil

10. Help and Documentation

Untuk menghindari kesalahan dalam pengisian form maka Tupperware memberikan text konfirmasi untuk membantu user mengisi form tersebut.

Gambar 9. Mengatasi kesalahan

User kadang kala tidak tahu apa yang akan terjadi jika suatu text-link ditekan dan sebaiknya suatu website menyediakan tooltips yang bertujuan mendeskripsikan hal yang terjadi jika menekan tombol tersebut. Dengan begitu pengguna tidak perlu masuk ke suatu halaman yang tidak sesuai dengan apa yang mereka ingin kunjungi. Dan seharusnya situs www.tupperware.co.id menyediakan bantuan berupa tooltips untuk penggunanya.

Situs www.tupperware.co.id ini mempunyai menu tanya jawab yang dibutuhkan oleh pengguna, namun situs ini tidak memberikan kesempatan bagi penggunanya untuk bertanya secara langsung. Tanya jawab yang ada pada situs ini adalah FAQ (Frequently Asked Questions ), dimana pertanyaan dan jawaban datang dari admin situs Tupperware itu sendiri untuk menjawab berbagai keunggulan dari produk yang ada pada situs ini.

Gambar 10. FAQ

Analisis Usability Web www.tupperware.co.id (Part 3)

Pada tulisan kali ini saya akan langsung membahas usability dari situs www.tupperware.co.id. Situs www.tupperware.co.id akan dikaji berdasarkan Nielsen Usability heuristik yang meliputi:

1. Visibility of System Status

Situs www.tupperware.co.id sudah sangat baik dalam hal feedbeck yang diberikan pada pengguna. Hal ini dapat terlihat ketika kita melakukan mouseover ke setiap menu dan content. Terdapat perubahan warna menjadi pink pada menu ketika di-mouseover.

Gambar 1. Mouse over

Gambar 2. Mouse over 2

Gambar 3. Mouse over 3

Namun untuk link-text dan non link-text tidak terlihat dengan jelas. Karena terdapat text dengan warna pink yang bisa merupakan link-text dan juga non link-text, hal ini dapat membuat user melakukan kesalahan berulang kali.

Gambar 4. Clickable dan Unclickable

Dan juga selain pink, www.tupperware.co.id juga menggunakan warna hitam untuk menandai link-text.

Gambar 5. Clickable

Sedangkan untuk penanda halaman aktif pada www.tupperware.co.id tidak diperlihatkan dengan jelas. Sebaiknya halaman yang sedang aktif diberi warna yang berbeda.

Gambar 6. Penanda halaman aktif

Tapi Tupperware menyediakan Bread-Crumb sebagai pelengkap navigasi membantu user untuk mengetahui posisi halaman yang sedang dibuka. Penggunaan Bread-Crumb tersebut memungkinkan user dapat berpindah ke halaman sebelumnya, dengan begitu user tidak akan tersesat. Penggunaan bread crumb dengan adanya perubahan warna dan guide line pada tombol.

Gambar 7. Bread-Crumb

2. Match Between System and the Real World

Bahasa yang digunakan pada www.tupperware.co.id adalah bahasa Indonesia, dengan sebagian judul-judul menu dan content dengan menggunakan bahasa inggris.

Gambar 8. Ketidakkonsistenan bahasa

Dan juga terdapat beberapa istilah yang tidak sesuai dan tidak akrab dengan user. Seperti adanya submenu yang berjudul Download yang isinya tidak seperti yang user harapkan, karena setelah submenu Download diklik yang keluar adalah login distributor. Istilah yang digunakan pada submenu ini sesuai dengan yang pengguna biasa gunakan.

Gambar 9. Ketidakkonsistenan judul dan isi

3. User Control and Freedom

Pada bagian pengisian form contact us terdapat button untuk melakukan remove, button remove ini bertindak tanpa adanya konfirmasi terlebih dahulu,

Gambar 10. Konfirmasi

sehingga apabila kita mengklik button remove ini maka semua isian form yang telah kita tulis akan hilang semua tanpa pemberitahuan terlebih dahulu (Gambar 10). Ini sangat tidak baik, karena apabila user tidak sengaja mengklik button remove ini maka user harus mengisikan kembali form tersebut. Selain itu untuk button remove dirasa tidak perlu, mengingat untuk membatalkan pengisian user bisa saja pindah kehalaman yang lain atau menutup halaman yang bersangkutan.

4. Consistency and Standards

Penggunaan button yang tidak standar terdapat pada situs www.tupperware.co.id , button submit, remove, dan go yang tidak seperti button karena menggunakan content bullet yang diikuti nama.

Gambar 11. Button tidak standar

Pada situs www.tupperware.co.id terdapat dua menu “HOME” yang menuju ke halaman yang berbeda. Jika yang dimaksud adalah home dari solusi & resep maka sebaiknya jangan dinamakan sama dengan homepage (halaman awal pada saat situs pertama kali dibuka). Namun setelah dilihat home yang terdapat pada menu solusi & resep di situs www.tupperware.co.id merupakan penjelasan tujuan Tupperware. Sehingga timbul kesalahan persepsi oleh user yang telah masuk ke halaman ini.

Gambar 12. Ambiguitas penamaan

Ketidakkonsistenan bahasa juga terdapat pada situs ini. Pada menu dan sub menu sering kali menggunakan bahasa Indonesia dicampur dengan bahasa inggris. Terkadang menggunakan judul dengan bahasa inggris, tetapi isi yang diberikan ditulis dengan bahasa indonesia.

Gambar 13. Ketidakkonsistenan bahasa

5. Error Prevention

Untuk mencegah kesalahan pada pengisian form di halaman contact us, www.tupperware.co.id menggunakan text konfirmasi format pengisian data. Penggunaan text konfirmasi ini sangat berguna agar user tidak bingung dalam hal pengisian form.

Gambar 14. Text konfirmasi

Namun format text konfirmasi juga harus disesuaikan, pada pengisian mobile user tertulis bahwa nomor dipisahkan dengan spasi dimana bagian depan sebanyak 4 angka dan di bagian belakangnya sebanyak maksimal 9 angka . setelah dilakukan pengisian ternyata bagian belakang hanya bisa terisi sebanyak 3 angka. padahal untuk memasukkan nomor mobile dibutuhkan minimal 10 angka.

Gambar 15. Kesalahan dalam text konfirmasi

Untuk selanjutnya akan di-post lanjutan dari kajian situs www.tupperware.co.id dari segi :

6. Recognition Rather Than Recall
7. Flexibility and Efficiency of Use
8. Aesthetic and Minimalist Design
9. Help Users Recognize, Diagnose, and Recover from Errors
10. Help and Documentation

-->

Usability Web www.tupperware.co.id (Part 2)

Tulisan kali ini saya akan menjelaskan mengenai Web Usability. Tentunya sebelum mengkaji usability dari situs Tupperware kita harus mengetahui terlebih dahulu mengenai web usability.

Usability (usability.gov, 2010) adalah seberapa baik pengguna dapat mempelajari, menggunakan , dan mengingat produk untuk mencapai tujuan dan bagaimana kepuasan mereka dengan proses tersebut. Pengertian yang serupa dapat kita temukan pada kutipan dari Prioritizing Web Usability : Usability is a quality attribute relating to how easy something is to use. More specifically, it refers to how quickly people can learn to use something, how efficient they are while using it, how memorable it is, how error-prone it is, and how much users like using it. If people can't or won't use a feature, it might as well not exist (Jakob Nielsen, 2006).

Mengapa Usability Penting?

Dari perspektif pengguna, usability penting untuk melihat perbedaan antara melakukan tugas secara akurat dan sempurna atau tidak, dan apakah menikmati proses dari sistem atau sedang frustrasi. Dari sudut pandang pengembang, usability penting karena dapat berarti perbedaan antara keberhasilan atau kegagalan sistem. Dari sudut pandang manajemen, perangkat lunak dengan usability yang buruk dapat mengurangi produktivitas tenaga kerja ke tingkat kinerja yang lebih buruk daripada tanpa sistem. Dalam semua kasus, kurangnya usability dapat berpengaruh pada biaya, waktu, dan usaha, serta dapat menentukan keberhasilan atau kegagalan sistem. Jika diberi pilihan, orang cenderung untuk membeli sistem yang lebih user-friendly.

Menurut Jakob Nielsen, usability adalah kombinasi faktor berupa :

• Ease of learning- Seberapa cepat pengguna yang belum pernah melihat antarmuka suatu web sebelumnya dapat belajar cukup baik untuk menyelesaikan tugas-tugas dasar?
• Efficiency of use - Setelah pengguna berpengalaman dan telah belajar untuk menggunakan sistem, seberapa cepat dia dapat menyelesaikan tugas-tugasMemorability -Jika seorang pengguna telah menggunakan sistem sebelumnya, dapat ia mengingat dengan cukup baik untuk menggunakannya secara efektif di waktu mendatang atau apakah pengguna harus memulai lagi belajar semuanya?
• Error frequency and severity - Seberapa sering pengguna membuat kesalahan ketika menggunakan sistem, seberapa serius kesalahan itu, dan bagaimana pengguna mengembalikan dari kesalahan ini?
• Subjective satisfaction - Berapa banyak pengguna suka menggunakan sistem?

Metode yang dapat digunakan untuk menilai usability dari suatu antarmuka salah satunya adalah evaluasi heuristik (heuristic evaluation) yang didefinisikan pengguna Advokat Dr Jakob Nielsen tahun 1994.

Evaluasi Heuristik
Evaluasi heuristik adalah metode yang digunakan untuk menemukan masalah pada desain antarmuka dengan melibatkan satu atau lebih ahli evaluator. Evaluator mengukur kegunaan, efisiensi, dan efektivitas dari antarmuka berbasis pada Usability heuristik dan prinsip-prinsip umum faktor-faktor manusia. Nielsen Usability heuristik meliputi:

1. Visibility of System Status

pengguna memberikan umpan balik tepat waktu dan memadai tentang status sistem.

Contoh: Jika membutuhkan waktu yang lama untuk load layar, tampilkan progress bar dan / atau perkiraan waktu yang mungkin diperlukan untuk memuat layar, sehingga pengguna tahu apa yang diharapkan.

2. Match Between System and the Real World

Sistem harus berbicara dalam bahasa yang biasa digunakan pengguna, menggunakan istilah dan konsep yang akrab dengan audiens. Informasi harus diatur secara alami dan logis berdasarkan apa yang pengguna terbiasa melihat di dunia nyata.

Contoh: Ketika merancang sebuah situs web untuk anak-anak, gunakan istilah yang akrab dengan akrab dan menampilkan informasi dalam format ini yang sering mereka lihat.

3. User Control and Freedom

Pengguna harus merasakan pengalaman mereka berinteraksi dengan sistem, dan mempunyai kebebasan melakukan apa saja tanpa harus dipersulit.

Contoh: Menyediakan fungsionalitas untuk Undo dan Redo dan tindakan untuk dengan mudah keluar dari sistem.

4. Consistency and Standards

Pengguna kontrol, icon, terminologi, dan pesan kesalahan harus konsisten di seluruh antarmuka, jangan sampai memberikan sesuatu yang berbeda tapi dengan maksud yang sama. Apabila diperlukan, industri dan platform standar harus diterapkan.

Contoh: Gunakan icon yang orang kenal, bukan menciptakan desain baru yang berarti hal yang sama.

5. Error Prevention

Mencegah pengguna melakukan kesalahan dalam menggunakan antarmuka sistem, dengan mengidentifikasi area dari masalah yang khas bagi pengguna dan merancang ulang serta mengkomunikasikan konsekuensi dari tindakan pengguna. Menyediakan pilihan konfirmasi untuk melakukan sesuatu yang rentan atau sulit dibuat.
Contoh: Jika pengguna membatalkan account nya, tawarannya cara untuk mendirikan kembali account dalam jangka waktu tertentu.

6. Recognition Rather Than Recall

Kurangi beban memori dari pengguna dengan menampilkan icon akrab, tindakan, dan pilihan bila memungkinkan. Tidak memerlukan user untuk mengingat informasi dari satu layar yang lain. Gunakan mouse-over, tooltips untuk menjelaskan fungsi icon yang mungkin belum terbiasa.

Contoh: Pada formulir web, izinkan untuk mengakses informasi yang telah dimasukkan seperti nomor seri, sehingga pengguna tidak perlu menuliskannya kemabali.

7. Flexibility and Efficiency of Use

Pemula dan pengguna ahli menggunakan sistem berbeda. Sistem tersebut harus mudah dan efisien untuk digunakan oleh pemula dan ahli sama. Menyediakan "akselerator" bagi pengguna ahli lebih efisien menavigasi sistem untuk menyelesaikan tugas-tugas yang paling sering.

Contoh: akselerator bisa menjadi jalan pintas keystroke, seperti Macintosh Command + Q untuk keluar dari aplikasi.

8. Aesthetic and Minimalist Design

Hindari menampilkan informasi yang berlebihan dan elemen desain, karena mereka akan bersaing secara visual dengan informasi yang lebih relevan di layar.

Contoh: Background grafis dapat membuat orang kesulitan melihat teks.

9. Help Users Recognize, Diagnose, and Recover from Errors

Hadirkan pesan kesalahan yang memberikan pengguna petunjuk tentang cara memulihkan dari kesalahan, daripada kode rahasia yang tidak mengerti pengguna

Contoh: Jika pengguna memasukkan alamat email tidak valid pada formulir web, berikan pesan kesalahan secara jelas, seperti "Itu alamat email ini tidak di catatan kami. Silakan masukkan alamat email dalam format ini: email@address.com. "

10. Help and Documentation

Sistem menyediakan bantuan dan dokumentasi yang berisi informasi tentang penggunaan system. Bisa dengan menyediakan video tutorial dan contoh-contoh untuk prosedur yang kompleks atau kontrol yang sulit untuk mencari.

Contoh: memberikan pengguna sebuah contoh bagaimana untuk memasukkan informasi dengan menggunakan format yang diperlukan, seperti memasukkan nomor telepon sebagai xxxx-xxx-xxx.

Itulah sekilas mengenai usability. Pada tulisan berikutnya saya akan mengakaji usability pada situs www.tupperware.co.id

Usability Web www.tupperware.co.id (Part 1)

Postingan kali ini terkait dengan tugas akhir matakuliah Interaksi Manusia dan Komputer mengenai Web Usability dari antarmuka (interface) situs www.tupperware.co.id yang merupakan salah satu situs e-commerce, yaitu menyediakan transaksi jual beli produk, jasa, dan informasi antar mitra bisnis lewat jaringan komputer (Turban, et all., 2000). Namun situs www.tupperware.co.id cenderung memberikan informasi mengenai produk dari tupperware, informasi tempat pembelian, dan berbagai informasi lainnya.

Pada bagian pertama ini, saya akan memperlihatkan tampilan dari situs www.tupperware.co.id sebelum mulai mengkaji web usability.

Tampilan --> Home

Demikian sekilas mengenai situs yang akan dikaji. Untuk posting selanjutnya akan dibahas mengenai web usability.

QR code

Kudu nyoba bagi yang punya HP dengan fasilitas deteksi QR code..
Ini adalah QR code no HP gw.. dicoba y..

QR Code no HP gw

 Nah kl yg ini QR code buat buka blog gw.. harus kudu dicoba juga..

QR Code blog gw

Karakteristik kenapa hati ini jatuh pada Infoscape

Postingan kali ini berkaitan dengan postingan sebelumnya yang berjudul “Intel Infoscape HD Walls”. Tapi pada postingan kali ini saya akan menjelaskan kenapa saya memilih interface dari Infoscape untuk dibahas? Karakterisik apa saja yang saya gunakan sehingga saya menetapkan untuk mengangkat mengenai hal itu?

Seperti yang terlihat infoscape adalah layar yang sangat besar yang bisa disentuh dan digeser, berisi mengenai segala macam info, cukup dengan menyentuh layarnya secara langsung. Yang menarik lagi bukan hanya satu orang saja yang bisa menyentuh layar ini, dalam arti kita tidak harus mengantri untuk menyentuhnya demi mengetahui segala info yang ada didalamnya. Semua orang dengan waktu bersamaan dapat mengetahui info yang ada pada infoscape.

Dari sedikit deskripsi di atas mungkin akan mengingatkan anda kembali mengenai infoscape. Langsung saja pada karakteristik apa saja yang saya pakai ketika memutuskan untuk mengangkat tentang infoscape untuk dijadikan bahasan:

1. Dari segi design dari infoscape sendiri.
Yaitu layar sentuhnya yang berukuran besar yang sangat menarik perhatian semua orang yang melihat, termasuk saya sendiri (padahal cuma melihat lewat layar laptop yang sedang tersambung pada internet), tidak bisa membayangkan jika melihat langsung. Dengan kata lain jatuh cinta pada pandangan pertama. Dirancang secara simple berbentuk kotak dimana setiap sisi tegaknya (dindingnya) itu adalah layar yang bisa digunakan sesuai dengan fungsi infoscape sendiri. Sederhana dan tetap menonjolkan teknologi yang digunakan, tanpa mempengaruhi pengguna dengan hal-hal atau design yang tidak penting yang hanya mempengaruhi tujuan awal dari penggunaan infoscape.

2. Dari segi fungsi yang ditawarkan.
Seperti yang sudah dijelaskan infoscape menawarkan bagi penggunanya berbagai informasi hanya dengan sekali sentuh. Berbagai informasi dapat diperoleh oleh beberapa pengguna dalam waktu yang bersamaan dan beberapa informasi sekaligus. Tersedia 20,000 content sources berbeda dan lebih dari 20 live feeds dari global news sources and networks.

3. Dari segi teknologi yang digunakan.
Intel dalam membuat infoscape ini menggunakan single all new 2010 Core i7 processor w/ Intel Hyper-Threading technology and Intel HD graphics. Bergerak dengan kecepatan luar biasa dan gerakan halus.

4. Dari segi ide yang dikembangkan.
Tidak mau kalah dan ketinggalan trend yaitu segala sesuatu telah menjadi mudah hanya dengan sekali sentuh, intel pun mengeluarkan infoscape. Ide yang dikembangkan sangat luar biasa, karena sekarang semua orang ingin kemudahan apalagi dalam hal pemenuhan kebutuhan akan informasi. Dan intel pun mewujudkan kemudahan itu dengan infoscape, orang dapat dengan mudah memperoleh berbagai macam informasi, tidak perlu menghabiskan banyak waktu, dapat melihat banyak informasi dalam waktu yang bersamaan juga, hal ini tentunya akan menyingkat penggunaan waktu pemakainya.

5. Dari segi device yang digunakan.
Spesifikasi device yang digunakan yaitu layar touchscreen yang berukuran 9x9 kaki and mempunyai 1920 x 1920 resolution. Sungguh mengagumkan, serasa mengintip ke masa depan, tampaknya sangat mirip layar komputer dalam film Minority Report. Sungguh mengagumkan semua yang melihatnya.

Intel Infoscape HD Walls

Dari gambar di atas terlihat hanya seperti dinding biasa yang ditempeli foto-foto semata, lalu dikasih lampu agar kelihatan hidup, yah kayak papan iklan gitu deh. Tapi lihat kembali teman-teman, itu bukan dinding biasa, itu adalah dinding yang bisa kita sentuh dan seret, teknologi yang dibuat oleh intel.

Mantap banget euy. Itu kata pertama yang terucap ketika melihat kubus buatan Intel yang dapat disentuh ini. Ketika disentuh maka detailnya akan muncul, kita akan dapat melihat lebih dalam informasi pada setiap link. Dinding yang besar ini tidak hanya bisa disentuh oleh satu orang saja tapi puluhan pengguna pun bisa secara bersamaan menyentuh kotak ini untuk mengetahui detail informasi setiap link.

Spesikasi yang diberikan Intel's Inside:

• Dua - 7x7 - 1920x1920 resultion
• Double-HD
• Double-touch touch screen glass wall. Setiap dinding ini didukung oleh single all new 2010 Core i7 processor w/ Intel Hyper-Threading technology and Intel HD graphics

Intel Infoscape HD Walls dapat me-render 576 live links of information, mengambil 20,000 content sources berbeda dan lebih dari 20 live feeds dari global news sources and networks. seperti Flickr, Twitter, YouTube and intel.com.

Pembuatan Intel Infoscape HD Walls ini adalah sebagai salah satu upaya untuk pamer kekuatan prosesor Intel i7, tapi tidak disangka demo yang dibangun oleh insinyur Elie Jamaa berubah menjadi hit besar di booth Intel. Keren banget padahal tadinya cuma buat demo doang, eh malah jadi menarik banyak orang.

Untuk lebih jelas dapat dilihat pada video di bawah ini