by ·Comments Off on Merancang navigasi web

Ilustrasi

Mari kita bayangkan kita berada di sebuah mall atau supermarket bangunan, dan akan membeli gergaji mesin (chain saw).

Sejak masuk toko tersebut, apa yang ada di pikiran anda? pasti anda akan mencari melalui papan yang biasanya tergantung di dinding. “Hmmm, ” (anda berpikir),  ” ada di bagian tools? atau lawn and garden?”, dan anda akan secara otomatis memilih “tools” (A). Ketika mendapatkan “bagian tools”, maka selanjutnya kita akan mencari rak “power tools”. Setelah menemukan rak yang dicari, barulah kita mencari produk yang akan dibeli (B). Jika kita tidak menemukan apa yang dicari, maka kita akan berpindah ke rak lain.

department tools

Pada dasarnya, ketika memasuki sebuah toko, kita menggunakan dua cara, yaitu mengikuti navigasi toko (tanda dan hirarki organisasi) pada toko, dan langsung mencari sendiri barang yang akan dibeli (C), atau menggunakan kesempatan untuk bertanya kepada petugas toko letak barang yang akan dibeli (D).

 

                                (C)                                                                                     (D)

 

Ketika masuk kesebuah website, ada dua perilaku user, 1) mencoba menemukan sesuatu hal sendiri (dengan browsing), 2) memutuskan apakah akan bertanya dulu (dengan searching). Kecenderungan user dengan perilaku pertama, disebut search dominant user, dan kecenderungan perilaku kedua disebut link dominant user.

Jika anda tidak menemukan apa yang anda cari dengan segera, maka hampir dapat dipastikan, anda akan meninggalkannya. Desain yang baik seharusnya menyediakan dua pilihan alternatif ini untuk memberikan keleluasaan user dalam memilih.

Navigasi umum

Navigasi umum yang digunakan sebagai elemen dasar pembuatan web biasanya mengacu pada kesepakatan pada media cetak, seperti gambar di bawah ini.

Navigasi yang kuat, harus memuat 5 elemen (site ID, home, search, section, dan utilities) contoh navigasi dapat dibuat seperti dibawah ini :

navigasi dasar

 

Merancang siteID

siteID penting untuk ditampilkan dalam web, karena merupakan representasi untuk keseluruhan web. Analogi siteID merupakan merek atau logo yang biasanya ada di luar toko. Gunakan jenis huruf yang menarik dan warna yang mencolok. Hirarki logis sebuah website adalah sebagai berikut

This site

     Sections of this site

         Subsections

             Sub-subsections, etc.

                  This page

                         Areas of this page

                                     Items on this page

 

Merancang utilities

Utilities untuk setiap web, “kata kunci” bagian utilities berbeda dan bervariasi, Anda dapat memilih beberapa pilihan kata dibawah ini :

utilities

Merancang area pencarian (search area)

Ingatlah bahwa sebagian besar pengguna akan memindai sebuah halaman untuk menemukan sesuatu yang mereka cari. tiga pola utama pencarian disajikan dalam gambar di bawah ini. Rumus sederhananya : text box, tombol, dan kata cari. Jangan membuatnya sulit, dan tetaplah berpegang teguh pada  rumus ini. Secara khusus, hindari fancy word seperti “quick search”,  “Find”, “Quick Find”, “Quick Search”, or “Keyword Search” untuk menghindari kebingungan user. Cukup gunakan kata “search” sebagai “clue” dan “go” pada tombol disebelahnya.

area pencarian

Demikian sekilas pengetahuan dalam merancang navigasi web. Selamat mencoba!

Yogyakarta, 24 Mei 2016

by ·Comments Off on Pengujian usability cukup dengan 10 sen per hari!

  Pendapat yang “benar” tentang pengujian

  1. Jika anda menginginkan situs yang hebat, anda harus mengujinya.
  2. Pengujian yang dilakukan oleh satu orang user, 100% lebih baik dari pada tidak mengujinya sama sekali.
  3. Pengujian satu pengguna di awal proyek jauh lebih baik daripada pengujian saat separo jalan.
  4. Mengambil  pengguna representatif untuk  melakukan pengujian itu baik, tapi jauh lebih penting mengujinya lebih awal dan sering.
  5. Inti pengujian bukan untuk membuktikan atau menyangkal sesuatu, tapi untuk memberi penilaian (judgment)
  6. Pengujian adalah proses yang berulang.
  7. Tidak ada yang mengalahkan reaksi pengguna secara langsung.

5 Alasan utama mengapa kita tidak menguji website

Biasanya, para developer tidak menguji website karena beberapa hal, antara lain tidak punya waktu, tidak punya uang, tidak memiliki keahlian, tidak punya laboratorium usability, dan tidak dapat menginterpretasikan hasilnya. Tabel berikut ini menjelaskan “bantahan” dari alasan-alasan diatas.

Pengujian usability yang sederhana

Bagaimana melakukan pengujian sendiri ketika kita tidak memiliki cukup waktu dan uang? Tabel menjelaskan beberapa triknya

Berapa jumlah user yang “seharusnya” digunakan dalam pengujian?

Krug menjelaskan, 3 atau 4 user dianggap sudah cukup untuk melakukan pengujian. Gambar dibawah menunjukkan, bahwa satu pengujian dengan 8 pengguna akan menemukan 5 problem, sedangkan pegujian dengan 3 pengguna dalam 2 kali tahapan akan menemukan 9 problem. Hal ini menunjukkan, jumlah pengguna yang digunakan untuk pengujian tidak perlu terlalu banyak, tapi yang lebih penting adalah pengulangan pengujian, agar didapatkan problem yang benar-benar krusial untuk dipecahkan.

Nielsen’s research

Penelitian Nielsen menyebutkan, bahwa hasil terbaik didapatkan dari pengujian dengan jumlah pengguna sebanyak 5 orang. Seperti  halnya masalah faktor manusia, bagaimanapun, ada pengecualian.

  1. Studi kuantitatif untuk kepentingan statistik, setidaknya 20 pengguna untuk mendapatkan jumlah statistik yang signifikan. Interval kepercayaan yang ketat membutuhkan lebih banyak pengguna.
  2. Card sorting setidaknya melibatkan 15 pengguna.
  3. Eyetracking memerlukan 39 pengguna jika anda menginginkan heatmaps yang stabil.

klik disini untuk melihat alasan mengapa jumlah user dalam pengujian hanya perlu 5 orang saja.

Demikian ulasan singkat tentang pengujian usability yang dapat dilakukan oleh para developer sendiri untuk menghemat waktu dan biaya. Semoga bermanfaat!
Yogyakarta, 23 Mei 2017

by ·Comments Off on How we really use the web?

Bagaimana perilaku kita (user) sebenarnya dalam menggunakan web? mari kita bahas satu persatu “fact of life” mengenai hal ini.

FACT OF LIFE #1
We don’t read pages. We scan them.

 

Pada dasarnya, kita tidak membaca halaman web secara keseluruhan, tapi kita melakukan pembacaan secara sekilas. Mengapa kita melakukan “scanning”?
Pertama, karena keberadaan web termotivasi oleh keinginan user untuk menghemat waktu. Akibatnya, pengguna web cenderung bertindak seperti saat bertemu hiu : mereka harus tetap bergerak, atau mereka akan mati!
Kedua, karena user tahu, bahwa mereka tidak perlu membaca secara keseluruhan. Pada satu bagian halaman besar, kemungkinan kita hanya tertarik pada sebagian kecil dari apa yang disajikan. Kita hanya mencari sesuatu yang sesuai dengan minat atau tugas kita. Pemindaian adalah bagaimana kita menemukan “sesuatu kecil” yang relevan.
Ketiga, kita telah melakukan “scanning” dengan baik. Kehidupan nyata membuktikan kita telah terbiasa melakukan scanning pada surat kabar, majalah, buku, dan lain-lain. Hidup kita telah menemukan bagian yang kita minati, dan kita telah mengetahuinya bersama, bahwa itu berhasil!
Kita cenderung memusatkan perhatian pada kata-kata dan ungkapan yang cocok dengan “tugas” atau “kepentingan”. Dan tentu saja hal ini dipicu oleh kata-kata yang tertanam dalam syaraf kita seperti, “gratis”, “dijual”, “jenis kelamin” dan “nama kita sendiri.”
FACT OF LIFE #2
We don’t make optimal choices. We satisfice.

 

Dalam kehidupan nyata, kebanyakan kita tidak memilih pilihan terbaik, tapi memilih pilihan yang paling rasional. Hal ini merupakan strategi yang disebut “satisficing”. Begitu kita menemukan link yang kita cari, maka secepat itu pula kita akan menge”klik” nya. Mengapa demikian?
Pertama, kita selalu tergesa-gesa. Maka, seperti kata Klein, “optimasi akan sulit dan memakan waktu lama, kepuasan lebih efiesien”.
Kedua, tidak ada penalti jika kita salah menebak. Biasanya user cukup menekan tombol (klik) satu atau dua kali, hal ini membuat strategi kepuasan lebih efektif. (Note : tombol back adalah tombol fitur yang paling banyak digunakan pada browser web).
*tentu saja ini kalau kita asumsikan halaman web dimuat dengan cepat, kalau tidak, kita harus membuat pilihan yang lebih hati-hati.
Ketiga, pada situs yang dirancang buruk, kita tidak berusaha untuk mengeluarkan banyak effort dalam memilih. User biasanya lebih baik pergi dengan tebakan pertama dan dengan menekan tombol “back” jika apa yang kita pilih tidak bekerja.
Keempat, menebak itu lebih menyenangkan! Dari pada pusing memikirkan pilihan tombol atau link, kita lebih suka menebaknya. Jika tebakan benar, ini akan menimbulkan reaksi yang lebih cepat, dan ini mengenalkan unsur kebetulan yang menyenangkan dan kemungkinan berjalan menjadi sesuatu yang mengejutkan dan fun!
FACT OF LIFE #3
We don’t figure out how things work. We muddle through.
User tidak pernah tahu dan mau tahu bagaimana sebuah tombol bekerja, tapi mereka tahu bagaimana cara menggunakannya. Bagi sebagian user, membaca instruksi perangkat lunak akan memakan waktu banyak, tapi bagi user yang telah terbiasa, mereka akan menggunakan waktunya dengan lebih efisien. Bahkan jauh dari apa yang dibayangkan oleh para desainer.
don’t make me think, steve kurg 

Purwokerto, 22 Mei 2017

by ·Comments Off on Don’t make me think!

 

“Jangan buat saya berpikir (lebih)!” kira2 begitu terjemahan judul buku ini. Sebuah buku berjumlah 200 halaman yang mengupas usability web dengan pendekatan common sense. Buku yang ringan dibaca, mudah dipahami, dan bagus untuk pengetahuan para developer dan desainer dalam membangun user interface sebuah web. The first law dari usability menurut Steve Krug adalah :

Don’t make me think!

Pada dasarnya, desain yang baik adalah desain yang membuat user tidak terlalu banyak “mikir”. Jangan buat mereka berpikir terlalu lama pada sebuah tampilan web yang membingungkan. Sebagai gambaran, perhatikan ilustrasi berikut.

 

not thinking

Ketika user menghadapi sebuah halaman web yang tidak perlu “mikir”, maka semua pertanyaan yang berkecamuk di kepala kita akan terjawab langsung. Dan, otak kita akan berkata seperti “oh, oke, ini tombol X”, atau “hmmm…, ini menarik untuk saya” atau “inilah yang saya cari”.

thinking

Hal yang berbeda ketika user bertemu pada web page yang membuat mereka agak “berpikir”, maka seluruh pertanyaan dalam otak kita akan berseliweran menuntut jawaban. Tugas para desainer adalah membersihkan “question mark” user.

button choice

Perhatikan button choice diatas! semakin ke kiri, tombol “result” semakin dipahami user. Desainer memilih  button berbentuk persegi panjang dengan efek 3D yang merepresentasikan sebuah tombol di dunia nyata. Pilihan tombol dengan bentuk persegi panjang saja akan membuat user agak berpikir “apakah ini tombol?” karena bentuknya yang flat. Pilihan text dengan panah agak membingungkan user, karena bisa jadi mereka berpikir ini bukanlah tombol. Saran : untuk memudahkan user, ubahlah kursor berbentuk panah menjadi bentuk tangan jika telah berada pada area tombol yang akan di “klik”.

Contoh lain : saat kita berkunjung ke sebuah situs jual beli buku seperti berikut ini, maka user akan dipaksa untuk berpikir lebih saat akan menggunakannya.

most bookstore sites (web A)

Perhatikan bagaimana desainer web menyusun sebuah tombol, text box, combo box dan caption! ini cukup membingungkan user pemula. Apa bedanya “quick search” dengan “search”? “apakah user harus memilih drop down menu dulu atau menulis keyword yang akan dicari?” dan sebagainya. Nah, untuk contoh toko buku online, toko buku online terbesar amazon cukup cerdas dalam membuat desain!

amazon.com (web B)

Amazon meletakkan drop down menu diatas text box. Mengapa? karena secara naluriah, manusia melakukan pencarian dari atas ke bawah, dari kanan ke kiri. Dengan demikian, sesuatu yang sifatnya “lebih penting” akan diletakkan paling kanan atau paling atas. Perhatikan pada desain web A, peletakkan combo box di sebelah kiri, itu artinya user akan “mengesampingkan” tombol ini, karena dianggap kurang penting. Bisa jadi, user akan menuliskan keyword pada text box, tanpa melihat drop down menu!

Amazon memilih kata search dibandingkan quick search. Karena pada dasarnya ini memang area untuk melakukan pencarian “buku”, tak ada pilihan lain selain search. Kecuali ada pilihan “slow search” maka perlu ada “quick search”.

Buatlah desain se simple mungkin, tapi tetap memikirkan alur berpikir user!

Demikian hasil ulasan pada chapter 1 buku ini. Lain kali akan kita ulas, seperti apa fakta real di dunia nyata tentang perlakuan user dengan membuat desain yang memahami keinginan para pengguna.

Yogyakarta, 18 Mei 2017