header-dont-make-me-think-web-usability

“Don’t Make Me Think!”: Tips Praktis Meningkatkan Usability

Pernahkah kamu menggunakan suatu aplikasi lalu menjadi frustasi karena bingung menggunakannya? Merasa kesulitan menyelesaikan tugas menggunakan aplikasi tersebut? Hmm… bisa jadi aplikasi tersebut masih memiliki kekurangan dari segi usability (kebergunaan).

Pengertian usability atau kebergunaan itu sendiri pada intinya adalah apakah sesuatu berjalan/berfungsi dengan baik dan apakah interfacenya mudah digunakan oleh orang yang berpengalaman maupun orang awam.

Nah, untuk mempelajari prinsip-prinsip dasar usability, tim Clickoding punya rekomendasi buku yang wajib dibaca oleh kamu-kamu para desainer, developer, manajer, direktur, dan siapapun yang tertarik bagaimana cara meningkatkan kebergunaan suatu produk.

Buku ini berjudul, Don’t Make Me Think!” (artinya : “jangan membuat saya berpikir!”). Buku yang ditulis oleh Steve Krug ini disusun secara singkat, padat, jelas. dan ditulis menggunakan bahasa sederhana sehingga mudah dipahami orang non-IT sekalipun.

Tapi sebelum masuk ke pembahasan, tau gak sih kenapa usability itu penting?
Kalau kata Steve dalam bukunya, simplenya sih…

Jika sesuatu sulit digunakan, saya tidak akan sering-sering menggunakannya.

Nah, gak mau kan produk hasil kerja keras kita (aplikasi, alat elektronik, atau produk hasil desain lainnya) bukannya membantu pengguna justru malah menyusahkan pengguna hingga akhirnya produk kita ditinggalkan?

Jadi, yuk langsung kita bahas tips praktis ala Steve Krug untuk meningkatkan usability!

Hukum pertama Steve Krug tentang usability :
Jangan membuat saya berpikir!

Faktanya, orang memang tidak suka dibuat bingung tentang bagaimana melakukan sesuatu. Jadi jika saat menggunakan aplikasi user ‘dipaksa’ untuk memikirkan hal-hal yang sebetulnya tidak penting baginya, misalnya bingung harus memulai dari mana, bingung harus mengklik yang mana, maka hal itu akan cenderung menguras tenaga, semangat, dan waktu pengguna.

Ilustrasi user yang kebingungan saat melihat laman web

Ilustrasi user yang kebingungan saat melihat laman web (Gambar diambil dari buku Don’t Make Me Think! hal. 13)

Ilustrasi user yang memahami laman web

Ilustrasi user yang memahami laman web (Gambar diambil dari buku Don’t Make Me Think! hal. 12)

Maka, tugas kita dalam membangun aplikasi adalah meminimalisir pertanyaan-pertanyaan yang akan muncul dalam pikiran user. Buat halaman yang gamblang, jelas, dan eksplisit. Rangkai tampilan, terminologi (pemilihan kata-kata), layout, dan teks secara cermat sehingga interface yang kita buat dapat menjelaskan dirinya sendiri.

Desain halaman untuk dibaca cepat

Sesungguhnya pengguna aplikasi (termasuk kita) tidak membaca setiap konten yang ada di halaman satu persatu, melainkan hanya membaca cepat atau membaca sepintas halaman (pengecualian untuk laman yang berisi dokumen seperti berita, laporan, deskripsi produk, dll).

Kita juga cenderung tidak mencari tahu bagaimana segala sesuatu bekerja, tidak membaca instruksi, dan hanya menebak-nebak dan mencoba sampai berhasil.

Maka, untuk memastikan user sebaik dan secepat mungkin memahami web kita harus :

1.) Buat hierarki visual yang jelas

Caranya? Buat elemen-elemen yang penting terlihat lebih mencolok. Contohnya judul halaman fontnya dibuat berukuran lebih besar, lebih tebal, diposisikan di bagian paling atas.

Selain itu elemen-elemen dikelompokkan sesuai logis secara visual. Bisa ditunjukkan dengan penggunaan style yang sama, atau meletakkannya dalam bidang yang jelas, misal : list menu navigasi, atau link produk seperti laptop, PC, mouse, dikumpulkan di bawah sub navigasi “Komputer”.

2.) Memanfaatkan konvensi

Contoh pemanfaatan konvensi adalah penggunaan ikon keranjang belanja pada situs e-commerce. Ikon shopping cart ini sudah menjadi ‘bahasa universal’ dalam dunia aplikasi bahwa ia adalah tempat untuk ‘menyimpan sementara’ belanjaan kita di internet sebelum checkout. Maka sebaiknya kita manfaatkan konvensi ini dengan menggunakan ikon keranjang belanja untuk fitur shopping cart di situs kita. Contoh lain konvensi pada aplikasi ialah penggunaan warna hijau pada pesan notifikasi sukses, atau merah untuk notifikasi error.

3.) Bagi laman ke dalam sejumlah bidang yang didefinisikan dengan tegas

Dengan membagi-bagi laman ke dalam batasan-batasan yang jelas (misal : bagian navigasi, konten, produk, tautan, dsb) user dapat memutuskan secara cepat akan berfokus pada bidang mana. Elemen-elemen yang dikelompokkan dalam satu bidang yang sama juga akan membantu user melakukan pencarian di laman.

4.) Perjelas apa yang bisa diklik

Mungkin kelihatannya sepele, tapi gak mau kan udah membuat pengguna pusing duluan mikirin “apakah itu bisa diklik?”. Jadi, buatlah button tampak seperti button (misal dengan memberi efek hover, shadow, dsb). Dan buat link terlihat seperti link (misal dengan diberi warna yang berbeda dengan teks lain, diberi underline, atau mengubah warnanya saat pointer diarahkan ke link tersebut).

material io button states

Gambar di atas merupakan panduan mendesain button di material.io. Tampilan visual button dibuat berbeda-beda saat enabled, disabled, hover, focused, maupun pressed sehingga memudahkan pengguna mengenali bahwa itu adalah button (Sumber: https://material.io/components/buttons/)

 

5.) Minimalisir derau (gangguan) visual

Jika tampilan terlalu ‘ramai’ maka akan sulit bagi user untuk fokus. Contoh : terlalu banyak iklan, terlalu banyak warna cerah, terlalu banyak border, terlalu banyak huruf-huruf besar yang mencolok, background yang mencolok, dsb.

Hukum kedua Krug tentang Usability :
Sediakan option yang dapat dipilih pengguna tanpa banyak ‘berpikir’

“Tidak masalah berapa kali saya harus mengklik, asalkan setiap klik merupakan pilihan yang sudah jelas dan tanpa perlu dipikirkan. (Setiap klik dilakukan dengan mudah dan membuat user senantiasa yakin bahwa mereka berada di jalur yang benar)”

Di dalam laman web pasti ada banyak pilihan yang disediakan, entah itu berupa button untuk melaksanakan tugas tertentu, navigasi, dsb. Nah, dalam memilih suatu aksi terkadang kita dibuat bingung harus memilih pilihan yang mana, maka dari itu kita perlu menyediakan pilihan-pilihan yang jelas yang dapat ditentukan tanpa perlu berpikir.

discard draft - yes or no

Ini contoh yang kurang baik karena pilihannya masih ambigu, jika jawab “No” tidak jelas apa yang akan terjadi selanjutnya (Sumber : https://uxplanet.org/5-essential-ux-rules-for-dialog-design-4de258c22116)

discard draft - cancel or discard

Ini contoh yang baik, karena pilihannya jelas. Saat pengguna memilih “cancel” maka batal buang draft, sedangkan jika memilih “discard” maka draft akan dibuang (Sumber: https://uxplanet.org/5-essential-ux-rules-for-dialog-design-4de258c22116)

Hukum kedua Krug tentang Usability :
Buang kata-kata yang tak perlu!

Membuang kata-kata yang ‘tidak akan dibaca’ user akan memberikan beberapa manfaat :

  1. Mengurangi gangguan visual pada laman
  2. Menjadikan konten yang berguna lebih mencolok
  3. Laman menjadi lebih ringkas, sehingga pengguna dapat lebih banyak melihat sekilas setiap laman tanpa perlu melakukan scrolling


Desain navigasi yang jelas, sederhana, dan konsisten

“Orang tidak akan menggunakan situs Web Anda jika mereka tersesat di sana.”

Beberapa cara untuk mencegah perasaan ‘tersesat’ pengguna adalah dengan :

  • Menyediakan navigasi yang baik
  • Memberi indikator ‘Anda sedang berada di sini’
  • Menyediakan breadcrumb pada setiap laman untuk menunjukkan posisi user saat ini.
you are here indicator (bbc)

Pada laman BBC News terdapat beberapa indikator “Kamu ada di sini”. 1) Logo branding. 2) Perbedaan visual pada navbar. 3) Heading. 4) Petunjuk konteks laman

Ciri-ciri laman yang memiliki navigasi yang baik adalah yang dapat menjawab seluruh pertanyaan berikut secepat mungkin :

  • Situs apa ini? (ID situs)
  • Saya berada di laman mana? (nama laman)
  • Apa saja bagian-bagian utama dari situs ini? (bagian-bagian)
  • Apa saja pilihan saya di tingkat ini? (navigasi lokal)
  • Di mana posisi saya dalam skema besar? (indikator “Anda ada di sini”)
  • Bagaimana saya bisa mencari?


Desain laman home yang baik

Laman home sebaiknya dapat menjawab pertanyaan-pertanyaan berikut :

  • Situs apa ini?
  • Apa yang mereka punya di sini?
  • Apa yang bisa saya lakukan di sini?
  • Dari mana saya harus memulai?
  • Mengapa saya harus berada di situs ini bukan di tempat lain?


Uji Usability

“Jika Anda menginginkan aplikasi yang hebat, maka Anda harus mengujinya”

Usability test adalah tahapan penting dalam membangun aplikasi, karena sesungguhnya jawaban dari mayoritas pertanyaan terkait “bagaimana desain aplikasi yang bagus” tidak ada jawaban ‘benar’ yang sederhana. Jawaban yang benar adalah jika desain tersebut bagus, terintegrasi, memenuhi kebutuhan, dieksekusi dengan baik, dan sudah teruji.

Fakta tentang uji usability :

  • Jika Anda menginginkan aplikasi yang hebat, maka Anda harus mengujinya
  • Menguji satu pengguna lebih baik daripada tidak menguji seorang pun
  • Menguji satu pengguna di awal proyek lebih baik daripada menguji 50 pengguna menjelang akhir proyek.
  • Dalam pengujian, merekrut pengguna yang sesuai dengan target situs Anda itu baik, tapi lebih penting untuk melakukan pengujian lebih awal dan lebih sering.
  • Tujuan pengujian bukan untuk membuktikan atau menyangkal sesuatu.
    Bukan tentang “a” lebih baik dari “b”, tapi dengan melakukan pengujian dapat memberi masukan yang akan mempermudah pengambilan keputusan untuk memilih antara “a” dan “b” dengan lebih bijaksana.
  • Pengujian adalah proses berulang.
    Kita membuat sesuatu, mengujinya, membenahinya, dan mengujinya lagi. Jadi tidak perlu mencari dan menyepakati solusi yang benar-benar sempurna. Kita hanya perlu mencari tahu apa yang akan dicoba berikutnya.

Kapan pengujian dilakukan?

Pada setiap fase pengembangan, karena sesungguhnya tidak ada kata terlalu awal untuk pengujian. Bahkan sebelum mulai mendesain, kita bisa terlebih dahulu menguji situs-situs pembanding untuk melihat apa yang sudah baik dan yang belum, lalu kita bisa mengambil contoh yang baik, dan mengimprovenya pada desain kita.

Apa yang diuji?

  • Uji ‘menangkap’ : untuk menguji apakah pengguna memahami kegunaan situs, proposisi nilainya, pengelolaannya, cara kerjanya, dll
  • Uji tugas utama : yaitu meminta pengguna untuk melakukan suatu tugas, kemudian kita perhatikan seberapa baik mereka mengerjakannya. Contohnya : cari buku yang ingin Anda beli, cari resep makanan yang Anda butuhkan, dst.

Steve Krug juga udah baek banget menyediakan contoh script pengujian usability loh, script tersebut bisa didownload di : http://sensible.com/downloads-dmmt.html

Nah, setelah melakukan pengujian, kita dapat meninjau hasil pengamatan lalu menyusun prioritas penanganan, dan mencari pemecahan masalah.

Kesimpulan

Prinsip-prinsip dasar untuk meningkatkan usability yang dirangkum dari buku Don’t Make Me Think diantaranya : jangan membuat user terlalu banyak berpikir dengan membuat interface yang dapat menjelaskan dirinya sendiri; desain halaman untuk dibaca cepat; sediakan option yang tidak membuat user terlalu banyak berpikir; buang kata-kata yang tak perlu; desain navigasi yang jelas, sederhana dan konsisten; desain laman home yang baik; lakukan pengujian secara teratur.

Dan yang perlu sering-sering kita ingat kembali, bahwa di ujung sana yang akan menggunakan aplikasi kita adalah seorang manusia, bukan komputer. Jadi, bangunlah aplikasi (atau produk apapun yang kamu bangun) untuk manusia dan bantulah ia dengan berusaha menyediakan usability yang baik supaya aplikasi kita menjadi lebih bermanfaat 🙂

Sekian dan terimakasih, nantikan postingan kami berikutnya ya!

 

Referensi

Krug, Steve. 2013. Don’t Make Me Think! Jakarta : Prigel Books.

Nielsen, Jakob. 2012. Usability 101 : Introduction to Usability. https://www.nngroup.com/articles/usability-101-introduction-to-usability/ (diakses pada Agustus 2019)

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Tinggalkan Balasan