10 Usability Heuristics dalam Desain

Dalam membuat desain, kita tidak semata-mata menggunakan feeling subjektif tanpa panduan apapun. Sebaliknya, kita membutuhkan sebuah pedoman yang sebelumnya telah terbukti dapat membantu menghasilkan desain yang baik. Untuk itu, pada kesempatan ini saya ingin membahas mengenai 10 prinsip umum dalam desain interaksi (dikenal dengan nama usability heuristics), menurut Jakob Nielsen. Jakob Nielsen merupakan seorang pakar dan periset dalam bidang interaksi manusia dan komputer.

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.

Pengguna perlu diberikan informasi mengenai apa yang sedang terjadi pada sistem. Oleh karena itu, proyek kami mengimplementasikan loading indicator untuk memberi informasi kepada pengguna bahwa halaman sedang dimuat.

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.

Sebaiknya menggunakan bahasa yang mudah dipahami pengguna. Misalnya search bar pada home page berikut yang tertulis “Cari destinasimu di sini …” Sebenarnya kami sebagai development team terbiasa menggunakan istilah point of interest (POI) untuk menyatakan destinasi wisata. Namun, apabila tertulis “Cari POI di sini” maka akan lebih sulit untuk dipahami pengguna.

Kami juga menggunakan icon yang merepresentasikan dunia nyata sehingga pengguna dapat merasa familiar. Misalnya icon keranjang pada tombol “Tambah ke Keranjang” dan untuk rating umumnya memakai simbol bintang.

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.

Pengguna mungkin saja melakukan sesuatu secara tidak sengaja ketika menggunakan aplikasi, namun kita sebagai pengembang yang sebaiknya membantu user untuk membatalkan aksi mereka yang tidak disengaja. Proyek kami mengimplementasikan tombol Batal pada halaman Rekomendasi ITIN agar jika pengguna sebenarnya tidak sedang ingin mendapatkan rekomendasi, dapat dikembalikan ke halaman sebelumnya.

Consistency and standards

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.

Desain sebaiknya menggunakan terminologi yang sama untuk setiap hal yang sama. Pada proyek kami, terdapat terminologi “Bucket List” yakni semacam wishlist untuk tempat wisata yang ingin dikunjungi di kemudian hari. Terminologi bucket list selalu sama baik itu di button atau di navigation bar dan dengan logo yang sama sehingga konsisten dan tidak membingungkan.

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.

Cegah error untuk terjadi kepada pengguna sebelum error itu benar-benar terjadi. Pada halaman pembuatan itinerary, apabila jam mulai dan berakhir untuk sebuah tempat wisata sama, maka akan diberi pesan peringatan agar pengguna tidak terlanjur menekan tombol “Buat ITIN” barulah terjadi error.

Pada fitur Ganti Password di aplikasi kami, pengguna juga harus melakukan konfirmasi dengan memasukkan password sebanyak dua kali. Tujuannya untuk menghindari kesalahan yang tidak disengaja yaitu typo pada password.

Contoh lain untuk pencegahan error adalah seperti gambar di bawah ini, yang diambil dari internet. Pengguna diminta untuk melakukan konfirmasi sebelum menghapus sesuatu. Sayangnya aplikasi kami belum sempat mengimplementasikan pencegahan error sampai sedetail ini.

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.

Jangan membuat pengguna harus mengingat-ingat apa yang terjadi sebelumnya melainkan sediakanlah informasi agar pengguna cukup merecall. Ini tentu dilakukan agar tidak memenuh-menuhi cognitive load pengguna. Pada proyek kami, pengguna tidak perlu mengingat-ingat sudah memasukkan suatu tempat wisata ke bucket list atau belum, karena dapat dicek dengan mudah dengan melihat tombol yang telah kami sediakan.

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.

Halaman daftar destinasi wisata menyediakan berbagai shortcut yang dapat mempercepat proses bagi seluruh pengguna. Misalnya jika pengguna ingin melakukan pencarian dengan keyword, dapat dilakukan pada search bar dan apabila ingin menyeleksi beberapa lokasi / kategori, dapat melakukan filter.

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.

Jangan menggunakan desain yang berlebihan dan tidak relevan, misalnya terlalu berwarna-warni atau menambahkan gambar kartun. Walaupun lucu, namun tidak berhubungan dengan fungsionalitas aplikasi. Oleh karena itu, aplikasi kami menerapkan desain yang sederhana dan menampilkan informasi yang perlu saja. Halaman itinerary menampilkan itinerary pengguna, baik yang dibuat manual atau dengan rekomendasi.

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.

Berikan pesan error dalam bahasa manusia agar pengguna dapat memahami apa yang masih salah, jika ada. Misalnya pada formulir untuk rekomendasi itinerary berikut, pengguna akan diminta untuk memilih kota jika ia belum.

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.

Tidak selalu, namun terdapat kejadian-kejadian dimana dokumentasi dan penjelasan tambahan diperlukan untuk menjelaskan kepada pengguna mengenai aplikasi yang dikembangkan. Terdapat beberapa aplikasi yang memberikan semacam tutorial bagi pengguna yang pertama kali bergabung. Namun, sejauh ini aplikasi kami belum mencakup tutorial tambahan tersebut.

Contoh dari aplikasi lain adalah FAQ pada SCELE. SCELE merupakan learning management system (LMS) yang dipakai di Universitas Indonesia. Berikut ini adalah tampilan FAQ SCELE pada URL https://scele-ng.cs.ui.ac.id/faq_scele/

Adapun proses desain untuk aplikasi kami terdiri atas beberapa tahap, dimulai dari low fidelity prototype, high fidelity prototype, serta terdapat saat dimana kami perlu menyediakan desain alternatif. Oleh karena itu pada kesempatan ini saya ingin membagikan pengalaman desain kelompok kami.

Membuat Wireframe

Pada proyek kelompok kami, wireframe telah disediakan oleh klien. Kami perlu memahami dan mengkonfirmasi beberapa hal yang perlu mengenai wireframe dengan asdos, untuk membuat mockup di tahap selanjutnya.

Membuat Mockup

Kami membuat mockup untuk memberikan gambaran mengenai website nantinya dengan lebih realistis. Mockup ini merupakan high fidelity prototype yang sudah bisa diklik untuk menyimulasikan aksi di website nantinya. Mockup berguna untuk memberikan pemahaman mengenai flow fitur pada aplikasi. Mockup merupakan finalisasi sebelum implementasi dilakukan.

Membuat desain alternatif

Dalam pembuatan mockup, kelompok kami juga membuat beberapa desain alternatif. Tujuannya untuk memilih dan membuat kesepakatan bersama teman sekelompok mengenai desain mana yang paling baik. Kami juga mempertimbangkan desain mana yang paling realistis implementasinya.

--

--

Computer Science Student at University of Indonesia

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kezia Sulami

Kezia Sulami

Computer Science Student at University of Indonesia