Apa itu 10 Usability Heuristics? Bagaimana contoh penerapannya?
Overview
Proses pengembangan sebuah aplikasi terdiri dari beberapa tahap, salah satu tahap penting yang harus sangat diperhatikan adalah tahap desain. User Interface (UI) & User Experience (UX) merupakan dua istilah yang sudah sangat lumrah dalam dunia desain aplikasi. Sesuai namanya, User Interface (UI) merupakan tampilan (interface) yang mencakup semua aspek visual yang ditampilkan pada aplikasi. Sedangkan User Experience (UX) bertanggung jawab dalam hal kepuasan dan pengalaman menyenangkan yang dirasakan pengguna ketika berinteraksi dengan aplikasi.
Namun, para desainer seringkali melupakan satu aspek lain yang tidak kalah penting dalam merancang sebuah produk digital. Ya, tidak lain dan tidak bukan adalah aspek usability. Singkatnya, usability merupakan parameter seberapa mudah suatu produk dapat digunakan oleh pengguna untuk mencapai tujuannya dengan efektivitas, efisiensi, dan kepuasan penggunaan dalam konteks tertentu. Usability inilah yang menjadi dasar pondasi dari rancangan sebuah produk dan memiliki hubungan erat dengan aspek UI dan UX. Visual yang menarik akan berdampak pada kemudahan dalam berinteraksi dengan aplikasi, sedangkan kemudahan dalam berinteraksi akan memberikan pengalaman yang menyenangkan bagi pengguna itu sendiri.
Heuristic usability
Heuristic Usability merupakan sebuah metode untuk menganalisa suatu alat atau objek agar memberikan kemudahan dalam penggunaan untuk dapat mencapai suatu tujuan. Heuristik Jakob Nielsen merupakan yang paling banyak digunakan sebagai acuan dari desain antarmuka pengguna. Jakob Nielsen merangkum 10 Usability Heuristics bersama dengan Rolf Molich di awal tahun 90-an, dimana general rules of thumb rancangan mereka masih sering dijadikan acuan sampai sekarang.
Jakob Nielsen’s 10 Usability Heuristics beserta contoh penerapannya
#1 Visibility of System Status
The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.
Rules ini menekankan bahwa pengguna harus mengetahui apa yang sedang terjadi dalam sistem. Ketika pengguna mengetahui status sistem saat ini, mereka dapat mengetahui hasil dari interaksi mereka sebelumnya dan menentukan langkah selanjutnya.
Contoh penerapan:
Pada contoh pertama, terdapat progress bar yang berfungsi untuk memberikan informasi mengenai modal yang sudah terkumpul sejauh ini pada sistem.
Sedangkan pada contoh kedua, terdapat label status yang menunjukkan status dari proses pengadaan barang yang diajukan oleh pengguna.
#2 Match between system and the real world
The design should speak the users’ language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Follow real-world conventions, making information appear in a natural and logical order.
Dalam rules ini, sistem dituntut untuk mampu memberikan informasi yang mudah dipahami oleh pengguna, seperti menggunakan bahasa sehari-hari yang familiar untuk setiap kalangan dan penggunaan ikon yang familiar. Sehingga diharapkan dapat memberikan kesan keakraban dan kepercayaan bagi pengguna.
Contoh penerapan:
Dalam hal ini, kami menjelaskan beberapa hal mengenai aplikasi menggunakan Bahasa Indonesia sehari-hari yang mudah dimengerti oleh pengguna. Walaupun masih terdapat kata asing seperti crowdfunding, namun hal tersebut dapat teratasi dikarenakan kami juga membuat user’s onboarding untuk menjelaskan lebih detail setiap fitur pada aplikasi kami.
Kami juga menggunakan ikon chevron-down untuk tombol dropdown, dan ikon chevron-left untuk tombol kembali. Kedua ikon tersebut tentu sudah sangat familiar, sehingga pengguna dapat mengetahui kegunaanya tanpa harus diberitahu.
#3 User control and freedom
Users often perform actions by mistake. They need a clearly marked “emergency exit” to leave the unwanted action without having to go through an extended process.
Rules ini berbicara tentang memberi pengguna kebebasan untuk melakukan suatu tindakan, termasuk membatalkan suatu tindakan yang sengaja ataupun tidak sengaja.
Contoh penerapan:
Pada aplikasi kami, terdapat beberapa tombol ‘kembali’ dan ‘batalkan’ yang ditujukan kepada pengguna yang ingin mengurungkan niatnya dalam melakukan suatu tindakan.
#4 Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.
Rules ini menekankan konsistensi dari segi visual suatu desain, seperti konsistensi dalam hal warna, ukuran, tipografi, bentuk, dan lain sebagainya. Hal itu akan memudahkan pengguna dalam mengenali fitur agar tidak membuat pengguna ragu-ragu saat menggunakan fitur tertentu.
Contoh penerapan:
Salah satu penerapan pada aplikasi kami ialah konsistensi dari primary button yang berwarna hijau, dan negative button yang berwarna merah, sehingga memperkecil kemungkinan pengguna salah mengklik diantara kedua tombol tersebut.
#5 Error prevention
Good error messages are important, but the best designs carefully prevent problems from occurring in the first place. Either eliminate error-prone conditions, or check for them and present users with a confirmation option before they commit to the action.
Error message merupakan sesuatu yang penting untuk ditampilkan, namun Error atau bug pada sistem merupakan suatu yang tidak profesional bila terlihat oleh pengguna, sehingga akan lebih baik untuk memperhatikan desain yang dapat mencegah pengguna melakukan kesalahan.
Contoh penerapan:
Ketika akan menulis tweet di Twitter, tombol “Tweet” tidak akan bisa diklik sebelum pengguna telah menulis teksnya dengan benar.
Kami belum menerapkan rules ini pada desain aplikasi kami, dikarenakan desain mockup saat ini hanyalah tampilan main flow, belum mencakup alternative flow. Rules ini kemungkinan akan kami implementasikan saat memasuki tahap coding setiap fitur, dalam tahap tersebut kami dapat lebih mempertimbangkan error-error yang mungkin terjadi dan bagaimana cara mencegahnya.
#6 Recognition rather than recall
Minimize the user’s memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design (e.g. field labels or menu items) should be visible or easily retrievable when needed.
Alih-alih memaksa pengguna untuk mengingat, lebih baik membuat pengguna dapat mengenali sistem tersebut. Dengan mendesain aplikasi yang membuat pengguna dapat mengenali pola desain yang dibuat sehingga mereka bisa tetap menggunakan aplikasi tanpa harus mengingat langkah yang harus dilakukan setelahnya.
Contoh penerapan:
Contoh penerapan pada situs Ebay yang memberi rekomendasi barang berdasarkan apa yang dilihat sebelumya, seperti yang tertera pada gambar, bahwa terdapat menu interest pada sidebar untuk memudahkan pengguna dalam mencari barang yang kemungkinan akan mereka tertarik. Selain itu, juga terdapat menu recent searches dimana meyimpan history pencarian pengguna sebelumnya.
Kami juga belum menerapkan rules ini dalam aplikasi kami, sehingga tidak dapat memberikan contoh penerapan secara langsung.
#7 Flexibility and efficiency of use
Shortcuts — hidden from novice users — may speed up the interaction for the expert user such that the design can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
Rules ini menekankan bahwa sistem aplikasi sebaiknya memberikan fleksibilitas dan keefisienan dalam penggunaannya, sehingga memudahkan pengguna untuk mempelajari aplikasi, terlebih jika aplikasi memiliki fitur yang banyak dan kompleks.
Contoh penerapan:
Contoh penerapan pada aplikasi kami yaitu terdapat shorcut call to action pada landing page, yang mana akan memudahkan pengguna untuk menuju fitur utama ketika baru memasuki halaman website.
#8 Aesthetic and minimalist design
Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.
Rules ini bertujuan untuk memastikan desainer menjaga konten dan desain visual tetap fokus pada hal-hal penting yang mendukung tujuan utama pengguna saja.
Contoh penerapan:
Aplikasi kami jauh lebih mengutamakan fungsionalitas dibanding estetika semata, sehingga desain yang kami buat juga cukup sederhana. Seperti contoh halaman diatas dimana hanya menampilkan komponen yang benar-benar diperlukan, dengan juga kombinasi warna pada halaman tersebut yang cukup kontras satu sama lain. Sehingga tampilan akan mudah dimengerti namun masih terlihat rapi.
#9 Help users recognize, diagnose, and recover from errors
Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution.
Desain yang baik dan nyaman tentu belum lengkap tanpa adanya penanganan error bila terjadi. Saat error terjadi, aplikasi seharusnya tidak hanya memberikan pesan error namun juga memberikan solusi.
Contoh penerapan:
Jika kata sandi yang dimasukkan pengguna terus-menerus salah, aplikasi kami dapat menawarkan fitur lupa password yaitu dengan menuliskan alamat email yang sudah terdaftar, lalu sistem kami akan mengirimkan pesan kepada email tersebut untuk mengatur ulang kata sandi sebelumnya.
#10 Help and documentation
It’s best if the system doesn’t need any additional explanation. However, it may be necessary to provide documentation to help users understand how to complete their tasks.
Harapan user menggunakan sistem atau aplikasi tentunya dapat menyelesaikan masalah dan pekerjaannya tanpa diharuskan ada petunjuk. Namun, untuk membantu mereka dalam menyelesaikan masalah atau pekerjaannya kita perlu diberikan fitur bantuan dan dokumentasi dari kemungkinan kesalahan dalam penggunaan.
Contoh penerapan:
Seperti yang sempat saya singgung diatas, pada aplikasi kami terdapat fitur user’s onboarding yang berfungsi sebagai petunjuk dan dokumentasi setiap fitur pada aplikasi kami. Namun saat ini desain dari tampilannya belum terpikirkan.
Berikut adalah contoh implementasi dari sumber lain:
Sekian sedikit penjelasan dari saya mengenai 10 Usability Heuristics beserta contoh penerapannya pada suatu aplikasi. Lebih kurangnya mohon maaf, semoga bermanfaat :)
