10 Usability Heuristics: Sebuah Penjelasan Agak Singkat

Ihwan Edi Saputro
Akhirnya
Published in
7 min readMay 13, 2020

Belajar Visual Design melalui Prinsip Jakob Nielsen

Source: https://uxdesign.cc/10-usability-heuristics-every-designer-should-know-129b9779ac53

Ketika anda membaca judul artikel ini, penulis ingin sekadar memperjelas sebuah fakta di sini bahwa penulis bukanlah ahli yang dimaksud di judul, setidaknya untuk sekarang ini. Bercerita tentang Visual Design, penulis ingin mengambil perspektif dari seorang ahli bernama Jakob Nielsen. Siapa beliau dan mengapa penulis yakin menyebut beliau seorang ahli di bidang Visual Design, dapat dibaca lebih lanjut pada halaman di bawah.

Jadi, apa itu Visual Design?

Visual Design?

Mari simak kutipan berikut.

Visual design aims to shape and improve the user experience through considering the effects of illustrations, photography, typography, space, layouts, and color on the usability of products and on their aesthetic appeal. To help designers achieve this, visual design considers a variety of principles, including unity, Gestalt properties, space, hierarchy, balance, contrast, scale, dominance, and similarity.

Kita bisa menganggap konsep Visual Design sebagai panduan kita/desainer untuk menyampaikan pesan/tujuan kepada user/masyarakat. Dalam konteks IT, Visual Design sangat erat kaitannya tentang desain sebuah software; seperti apa tampilannya dan bagaimana cara menggunakannya. Seorang Visual Designer yang baik harus mampu membuat karyanya dapat dipahami oleh orang-orang. Supaya pembahasan tidak melebar, penulis ingin membahas Visual Design dalam konteks IT saja, yang berarti akan banyak membahas tentang desain pada Software.

Dalam mendesain, seringkali kita/desainer hanya mendesain sesuai keinginan pribadi saja. Hal ini sebetulnya boleh-boleh saja, tapi lain lagi ceritanya jika yang didesain tadi adalah produk untuk digunakan user. Bagaimana kita memastikan user menyukai produk kita? Bagaimana kita memastikan user mampu menggunakan produk kita? Itulah alasan penulis ingin membahas melalui pemikiran Jakob Nielsen, yang disebut dengan 10 Usability Heuristics.

10 Usability Heuristics?

Pak Jakob Nielsen pada 24 April 1994 memperkenalkan 10 Usability Heuristics, semacam aturan-aturan yang harus dipenuhi untuk meningkatkan kualitas Visual Design. Apa saja? Lihat penjelasan berikut.

#1. Visibility of system status

Sistem harus selalu menginformasikan user tentang apa yang sedang terjadi, dengan feedback yang tepat di waktu yang tepat pula. Dengan mengetahui apa yang sedang terjadi, user lebih mampu menentukan keputusan yang tepat.

Contoh saat sign in/up email, source: https://medium.com/nyc-design/1-visibility-of-system-status-with-examples-5e3bc9adfe7b

Mungkin inilah prinsip paling dasar dari UI design guideline, user perlu mengetahui apakah action yang mereka lakukan berhasil atau tidak, apakah sistem bekerja atau tidak, apakah item barang sudah berhasil ditambahkan ke keranjang belanja, dan sebagainya

#2. Match between system and the real world

Sistem yang dibuat, harus sesuai dengan dunia nyata atau dunia yang kita tempati sekarang. Maksudnya adalah kata-kata yang digunakan sistem harus menggunakan bahasa user, dengan kata-kata dan konsep yang familiar oleh mereka. Tentu tidak baik mendesain sebuah software untuk user dengan menampilkan bahasa biner. Kita juga dapat menerapkannya pada ikon yang dibuat untuk melambangkan suatu action

Panduan ini juga dapat digunakan untuk memfokuskan pasar user. Siapa saja target untuk produk yang akan dibuat? Bagaimana latar belakang serta pengetahuannya? Dan sebagainya. Untuk membuat user nyaman, cobalah sesuaikan dengan apa yang sering dialami user. Misalkan, melihat foto di Facebook terasa seperti membolak-balikan halaman di album foto, memilih film untuk ditonton di Netflix terasa seperti melihat-lihat toko video, ataupun menghighlight sebuah bagian/kata-kata pada Medium terasa seperti mewarnai kata-kata penting di buku dengan spidol. Rasa familiar ini yang membuat user nyaman menggunakan produk kita.

Contoh penggunaan icon yang mirip kehidupan sekitar kita, source: https://www.slideshare.net/elida-arrizza/the-10-user-experience-principles-la-wordpress/15-2MATCH_BETWEEN_SYSTEMAND_REAL_WORLDB

#3. User control and freedom

Jika anda pernah melakukan kesalahan dalam menggunakan software dan tidak ingin kesalahan itu tersimpan, anda tentu ingin segera mengembalikannya seperti semula apapun caranya. Dalam hal ini, tombol Undo ataupun tombol Exit adalah penyelamat anda. Inilah maksud dari heuristik ini.

Contoh undo, source: https://medium.com/@digitalofthings/ux-principle-10-user-control-and-freedom-9b6c692f411a

User adalah pemegang kendali, dan kebebasan dalam menggunakan produk (sesuai dengan role atau paket yang dipilih). Mendesain sebuah Software yang dapat melakukan Undo atau force exit atas suatu action tentu menjadi nilai plus bagi user.

#4. Consistency and standards

User tidak perlu bertanya-tanya, apakah kata-kata, situasi, atau action yang berbeda dapat bermakna sama atau tidak. User juga tidak boleh dibuat bingung dengan desain halaman, font, layout, dan cara yang berbeda-beda dalam satu sistem.

Misalkan begini, saat menggunakan pop-up untuk tiap action, tombol “Ya” pada action A terletak di sebelah kanan, tapi pada action B terletak di sebelah kiri, sehingga user yang tadinya ingin melakukan sesuatu justru malah keluar, ataupun user yang tadinya tidak ingin melakukan sesuatu justru melakukan hal tersebut. Begitupula dengan desain halaman dan font, untuk tiap halaman harus disamakan atau paling tidak mirip, supaya tidak membingungkan user. Link di bawah akan menjelaskan tentang platform conventions atau standar dalam heuristik ini.

Contoh interface yang konsisten, source: https://www.interaction-design.org/literature/article/user-interface-design-guidelines-10-rules-of-thumb

#5. Error prevention

Mencegah lebih baik dari mengobati. Yang lebih baik dari pesan error yang bagus adalah desain yang bagus yang dapat mencegah kemungkinan error tersebut muncul. Ada dua tipe error yang dilakukan users, yaitu Slips (ingin melakukan A, tapi yang terjadi justru B, contohnya Typo) dan Mistakes (error yang berasal dari kesalahan user memahami problem, misalkan ingin menyelesaikan A tapi dengan cara untuk menyelesaikan B).

Ada beberapa cara mengatasi ini, diantaranya:

a. Support Undo (Membatalkan action yang dilakukan user)

b. Confirm Before Destructive Actions (Misalkan saat delete foto atau file, konfirmasikan ke user untuk memastikan user tidak melakukan hal tersebut secara tidak sengaja)

Source: https://spencerthemadhatter.wordpress.com/2013/11/10/lets-talk-ui-design-heuristic-5-error-prevention/

c. Warn Before Errors Are Made (Beritahu user jika user akan melakukan error, contohnya saat menulis Tweet dengan karakter > 280 (jumlah maksimumnya))

d. Remove Burden Memories (Memastikan hal yang dilakukan user tidak mengganggu memory karena dapat menghasilkan output yang berbeda dan bahkan dapat menggagalkan task)

#6. Recognition rather than recall

User tidak perlu mengingat apa saja yang dapat dilakukan sistem dan bagaimana caranya. Sistem harus dibuat sejelas mungkin sehingga user langsung dapat mengenali bagaimana caranya menggunakan sistem tersebut tanpa harus mengingatnya.

Contoh jelasnya adalah suggestion saat kita mencari sesuatu di Search Engine seperti Google. Dengan ini, user dapat mencoba suggestion tersebut dan menggunakan sistem dengan benar.

#7. Flexibility and efficiency of use

Desain User Interface harus dibuat sefleksibel dan seefisien mungkin hingga dapat dimengerti oleh semua pengguna, baik itu pemula atau pengguna ahli. Contohnya adalah User Interface ketika menginstall sebuah aplikasi, kita diberi pilihan apakah ingin menginstall secara manual atau default.

Source: https://www.duxburysystems.com/documentation/dbt12.4/getting_setup_in_DBT/Installation/Custom_Installation.htm

#8. Aesthetic and minimalist design

Dialog yang ditampilkan tidak boleh berisikan informasi yang tidak relevan atau tidak terlalu dibutuhkan. Selain itu, gunakan desain/layout yang setidaknya nyaman untuk dilihat user, seperti kontras warna atau pencahayaan yang baik dan tidak menyakitkan mata user.

#9. Help users recognize, diagnose, and recover from errors

Pesan error harus ditampilkan secara jelas, bukan menunjukkan potongan kode yang menyebabkan error tersebut. Pesan tersebut harus secara jelas mendeskripsikan masalah dan memberi tahu user solusi dari error tersebut.

Source: https://www.slideshare.net/KatelynCaillouet/ux-tools-tips-tricks-for-codeher-conference-2015/21-9_Help_users_recognize_Diagnose

#10. Help and documentation

Walaupun lebih baik jika sebuah sistem dapat digunakan tanpa dokumentasi, tetap saja masih ada kemungkinan dokumentasi dan bagian help akan dibutuhkan. Segala informasi tersebut harus mudah untuk dicari, fokus ke pekerjaan user, list dari langkah konkrit untuk digunakan, dan tidak terlalu besar.

Contoh help & documentation, source: https://enricoangelini.com/2012/the-tenth-heuristic/

Kesimpulannya?

10 Usability Heurstics ini bukanlah satu-satunya prinsip dalam Visual Design, namun merupakan salah satu yang paling banyak diterapkan. Dengan memahami 10 Usability Heuristics ini, kita dapat lebih memahami tentang Visual Design seperti apa yang baik, apa yang kira-kira dibutuhkan user dan apa yang tidak. Semua ini tidak lepas dari pengalaman para pakar di masa lalu, sehingga kita di masa sekarang cukup mempelajari dan menerapkannya.

Sumber Utama

Penulis memberikan berbagai macam referensi pada artikel ini. Untuk mempelajari lebih lanjut, anda dapat membaca melalui referensi penulis berikut, ataupun di referensi lain. Semoga bermanfaat!

--

--