Apa itu Heuristic Evaluation?

Ravi Mahfunda
Design Jam Indonesia
8 min readSep 22, 2019

Kita tidak pernah tau apa yang akan dilakukan oleh user kita. Mungkin kita sudah merencanakan dari Plan A to Z. Namun tiba-tiba user kita datang dalam plan AZ.

Heuristic Evaluation merupakan cara untuk mengidentifikasi apakah product kita sudah memenuhi common user behaviour yang critical bagi user. Dan dengan menerapkan 10 unsur di dalamnya, kita bisa meningkatkan pengalaman dari user kita menggunakan cara yang sebenarnya sering kita temukan dalam sehari-hari.

Namun karna begitu intuitif nya, kita sering kali tidak merasakan keberadaannya. Tapi — akan begitu terganggu saat kehilangannya.

Terdapat 10 unsur yang menjadi poin evaluasi pada Heuristic Evaluation, mari kita bahas satu per satu.

1. Visibility of System Status

Pernah kah kalian menekan suatu tombol, namun tidak terjadi apa apa? Lalu kalian menekannya berkali-kali dan tetap terjadi apa-apa. Itulah penting nya Visibility of System Status. Kita harus menginformasikan apa yang terjadi pada user saat user melakukan request atau aksi.

Bentuknya bisa bermacam-macam, beberapa model umum di antaranya:

  • State of Element, perubahan yang menandakan status dari suatu elemen. Contoh paling umumnya pada button terdapat 4 state dasar seperti default, hover, pressed, dan disabled. Keempat state ini menggambarkan kondisi berdasarkan apa yang dilakukan dan apa yang bisa dilakukan oleh user.
  • Progress Indicator, saat sistem melakukan sesuatu yang bertahap atau sesuatu yang mengharuskan user untuk menunggu kita harus menampilkan bagaimana progress yang telah dilakukan, berapa lama waktu yang diperlukan. Hal ini memberikan user kepastian tentang apa sampai lama mereka harus menunggu.
  • Feedback, saat suatu progress telah selesai atau saat user melakuan kesalahan kita harus memberikan feedback kepada user agar user tau bahwa permintaan mereka telah dikabulkan atau agar user tau apabila terjadi suatu kesalahan.
Various Button State to Indicate System Status

TLDR; Jujurlah kepada user mu, mereka butuh kepastian :D

2. Match Between the System and the Real World

Error 522: Missing required key!!!

Masih ada yang productnya nampilin error seperti itu? Ganti coi!

Agar dapat berkomunikasi dengan user kita lebih baik, kita harus berkomunikasi menggunakan bahasa dan sudut pandang user kita.

Speak the User’s Language

Dari sisi copy atau tata bahasa, akan sangat mudah bagi user jika kita menggunakan bahasa yang mereka mengerti. Mungkin sangat menggoda untuk menggunakan bahasa teknikal seperti contoh diatas. Namun dengan sedikit kerja ekstra dari anda dan developer anda, hal ini akan membuat user anda tidak merasa berbicara kepada sebuah mesin.

How GO-JEK Communicate with their users. Check GO-JEK’S Asphalt!

Follow Real-world Convention

Untuk mengurangi waktu berpikir user dan memproses informasi, coba tiru apa yang terjadi atau ada di dunia nyata. Hal ini akan membuat user familiar dengan design yang anda buat.

Sebagai contoh, gunakan icon keranjang atau trolley untuk tombol fitur Cart. Akan sangat berbeda jika anda menggunakan icon yang belum pernah ada di dunia nyata, maka user akan berpikir keras untuk menerjemahkan hal itu.

Salah satu contoh favorit saya dalam hal ini adalah bagaimana Google menstandarisasi design nya dengan Material Design. Material Design memiliki konsep seperti objek di dunia nyata. Dan konsep utamanya adalah kertas. Kertas bisa dilipat, bisa saling tumpuk, tapi tidak bisa saling melewati. Saat kertas yang diatas berada lebih tinggi, makan akan menghasilkan bayangan di bawah nya. Material Design membawa filosofi ini dari UI design, animasi, hingga alur navigasi.

3. User Control & Freedom

Memberikan user kebebasan dari apa yang dapat dilakukan akan menciptakan rasa aman dan kendali akan produk kita. Dengan begitu user akan merasa menguasai dan memiliki produk sehingga menciptakan motivasi untuk bereksplorasi.

Control Visibility

Selain memberikan kendali akan product, penting untuk dicatat bahwa user harus tau dari apa yang dapat kita lakukan. Karna bila user tidak mengetahui kapabilitas itu, apa bedanya dengan tidak ada?

Material Design Feature Highlight to Introduce you users to the Features

Error Tolerance

Memberikan user opsi untuk undo-redo sebuah aksi juga akan memberikan user rasa aman untuk mencoba-coba dalam proses eksplorasinya. Sehingga ia tidak perlu takut untuk melakukan kesalahan.

4. Consistency & Standard

Agar produk lebih mudah dipahami, maka produk kita harus konsisten baik dari bentuk, warna, ataupun alur. Konsistensi dan standar terbagi menjadi 2 tipe, yaitu internal dan external consistency. Apa bedanya? Mari kita bahas!

Internal Consistency

Seperti namanya, internal consistency mengatur konsistensi yang berada dalam produk itu sendiri. Sebuah konsistensi antar elemen seperti warna, ukuran, font, ukuran, copy, dan lain sebagainya.

Beberapa product yang sudah matang bahkan mengatur hal dalam sebuah standarisasi yang disebut Design System dan Design Guideline.

External Consistency

Sedangkan external consistency mengatur konsistensi antara product anda dan product lain yang berada di luar. Sebagai contoh — apabila product anda adalah sebuah e-commerce, maka fitur add-to-cart adalah sebuah fitur yang harus ada. Karena user berekspektasi akan menemukan hal itu.

Mungkin ada beberapa dari kalian bertanya-tanya,

“Kalo semua nya sama? Berarti enggak inovatif dong? Terus bedanya apa?”

There is a thin line between being unique and being odd.

Jadi berhati-hati lah dalam memberikan sisi unik dari product mu, jangan sampai tidak mampu memenuhi ekspektasi user.

How Tokopedia, Bukalapak, and Shopee serve their Cart Feature. The consistency of the icon and the position.

“Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.”

— Jakob’s Laws

5. Error Prevention

Selain menoleransi error yang dilakukan oleh user dengan fitur undo, ada baiknya untuk kita mencegah hal itu terjadi.

Karna mencegah lebih baik dari mengobati

Berikut adalah pola umum dalam mencegah user sebelum melakukan kesalahan:

Validation

Jauh sebelum user melakukan kesalahan, kita harus mengecek apakah yang dilakukan user dapat diterima oleh sistem kita. Beri mereka batasan dan arahan.

Dalam implementasinya — hal ini seperti memberi tahu user field mana yang harus diisi, format yang diinginkan, dan batasan-batasan lainnya. Namun kita harus dengan jelas menjelaskan batasan-batasan ini dan mengomunikasikannya secara agak efektif, agar user merasa aman bukan justru geram dan kesal.

Show what will happen

Cara kedua ialah dengan menampilkan atau mensimulasikan apa yang akan terjadi akibat aksi user. Salah satu contohnya ialah saat kamu mengubah resolusi layar laptop mu, maka resolusi nya akan langsung berubah dan menanyakan konfirmasi mu. Dan konfirmasi ini adalah cara selanjutnya.

Confirmation Dialog

Menanyakan konfirmasi user untuk sebelum melakukan/menyimpan perubahan yang dilakukan user akan menjadi cara yang paling efektif dan umum dalam mencegah kesalahan user.

The magic of Undo

Cara terakhir, once again — kita tidak pernah tau apa yang akan dilakukan oleh user. Maka sediakan fitur undo agar user dapat me-recover kesalahan yang dia lakukan.

6. Recognition vs. Recall in User Interfaces

Ada yang tau bedanya recognition dan recall?
Ya, hal ini adalah salah satu istilah dalam kita mengakses memory kita. Dan hal ini sangat membantu user dari sisi cognitive load.

Apa itu cognitive load? — Cognitive Load ialah effort yang diperlukan user untuk memahami produk kita. Atau bisa dibilang satuan beban pikiran. Semakin sedikit beban pikiran pada produk kita, maka semakin buruk pula produk kita — begitu juga sebaliknya.

Recall — what I’m searching for?

Sedang Recall merupakan usaha dimana kita berusaha mencari tau sesuatu. Mencari tau dengan mencari dan menggali ingatan terdalam.

Recognition — is this what I’m searching for?

Recognition merupakan usaha dimana kita berusaha mengidentifikasi sesuatu. Mencoba menyamakan dengan apa yang kita telah ketahui.

Perbedaannya adalah biasanya recognition selalu menyediakan visual cue atau petunjuk visual. Hal ini ditujukan untuk mengurangi cognitive load dari user.

GUI VS Command

7. Flexibility and Efficiency of Use

Pernah pakat Microsoft Word? Google Docs?

Gimana caranya bikin teks jadi bold? Tekan icon B? Ctrl+B? Itulah flexibility and Efficiency.

Many ways to achieve the goal

Flexibility memberikan user akses sebuah aksi dari berbagai entry point dan berbagai cara. Hal ini memungkinkan user untuk memilih caranya sendiri.

As quick as possible

Efficiency menciptakan kecepatan dalam menyelesaikan tujuan user. Hal ini bisa beragam dari keyboard shortcut, saving user preferences, automated task, dan lainnnya.

Enhance for Expert and Ease for Noob

Dengan menggunakan 2 faktor diatas secara tepat, kita dapat meningkatkan user yang telah berpengalaman dengan produk kita secara maksimal. Seperti apa yang dilakukan instagram dengan double-tap-to-like nya atau tinder dengan swipe card nya. Namun kita tetap harus menyediakan cara yang mudah dipahami oleh user yang baru atau awam dengan product kita.

8. Aesthetic and Minimalist Design

Tetap cantik meski sederhana…

Poin ini berfokus pada efektivitas elemen yang ditampilkan pada user, tampilkan yang perlu dan jangan buat mereka salah fokus.

Salah satu contoh favorit saya ialah bagaimana Google menyajikan halaman utamanya. Singkat, padat, dan indah. Tepat pada intent product nya dan memfasilitasi tujuan user.

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

Unsur yang ini mungkin sudah dibahas di unsur-unsur sebelumnya. Penting bagi kita untuk mengkomunikasikan error dengan baik kepada user kita. Tidak hanya mengkomunikasikan tapi juga memberikan arahan dan cara untuk menyelesaikan kesalahan tersebut.

Seperti salah satu prinsip dalam UX Writing, dimana sebuah copy harus bersifat helpful.

GO-JEK’s helping their user to recover from errors through Copy and Illustrations

10.Help and Documentation

Buat apa sih ada fitur help? Ya buat dibaca.

Mungkin minim yang menggunakan, namun keberadaan nya sangat diperlukan untuk memberikan sense of knowing saat user kebingungan ia tau kemana ia bisa berlabuh.

Ada baiknya fitur help disajikan sesederhana dan se-interaktif mungkin. Dengan tujuan agar mudah dipahami. Bisa berupa teks, interactive session, atau video tutorial. Yang penting memenuhi kebutuhan user.

Kesimpulan

10 Heuristic ini merupakan faktor yang seharusnya kita penuhi sebelum product kita berada ditangan user. Agar user kita bisa lebih nyaman dan dapat menggunakan product kita secara intuitif. Mengurangi cognitive load dan mentoleransi kesalahan user.

Ya balik lagi… kita tidak pernah tau apa yang akan dilakukan user

Peace :D

--

--

Ravi Mahfunda
Design Jam Indonesia

M.24 • Product Designer • No-code Builder • Community Organizer