Part 1 – Menggunakan Prinsip Jacob Nielsen’s Heuristic untuk Meningkatkan Usability pada User Interface

Screen diambil dari Mobbin.design

Dalam pembuatan User Interface Design, terkadang dibutuhkan sebuah proses evaluasi terhadap Usability UI Design yang telah dibuat, Usability sendiri dapat diartikan sebagai sebuah tingkat kemudahan penggunaan dalam product digital.

Proses evaluasi ini dinamakan Heuristic Evaluation, sebuah metode inspeksi terhadap masalah-masalah usability pada product yang sedang dikembangkan atau telah dibuat, seseorang yang biasanya melakukan evaluasi ini dinamakan UX Expert.

Heuristic Evaluation menggunakan Usability Heuristic sebagai guideline utama tentang apa saja yang akan dievaluasi, Usability Heuristic sebenarnya memiliki beberapa versi, namun Jakob Nielsen’s heuristics adalah yang paling banyak digunakan dalam pengembangan User Interface Design.

Berikut terdapat 10 Usability Heuristic versi Jacob Nielsen:

1. Visibility of System Status

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

User tidak ingin berpikir atau melakukan task berlebih, maka dari itu sebaiknya sebuah sistem membantu user agar tidak bingung dalam menggunakan sebuah product, salah satu caranya adalah dengan menginformasikan proses-proses yang sedang terjadi dalam sebuah sistem, agar user dapat mengerti dengan jelas dan tidak membuat asumsi atau action yang tidak tepat.

Berikut adalah beberapa contoh penerapannya:

Screen diambil dari Mobbin.design

1. Progress Bar di bagian atas screen, menginformasikan progress quisioner dari sebuah Onboarding App.
2. Indicator Slider di bagian atas button (Bulat merah dan abu-abu), menginformasikan di screen ke berapa yang sedang diakses oleh user.
3. Terdapat 2 hal, yang pertama adalah indicator ON/OFF Download automatically, yang kedua adalah progres bar circle dan presentase dari progres download itu sendiri.
4. Indicator loading, mengisyaratkan bahwa sistem sedang memuat sesuatu untuk ditampilkan.

2. Match between system and the real world

The system should speak the user’s language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

Untuk mempercepat pemahaman user terhadap experience dari sebuah product, maka sebaiknya product tersebut memiliki kesamaan komponen, konsep, dan proses-proses seperti yang ada di dunia nyata.

Hal ini akan membuat sebuah product lebih mudah dikenali dan digunakan oleh user, karena user sudah merasa cukup familiar dengan apa saja yang ada di dalam product tersebut.

Berikut adalah beberapa contoh penerapannya:

Screen diambil dari Mobbin.design

1. Tampilan fitur kalender seperti kalender di dunia nyata.
2. Icon di Navbar yang sesuai dengan object-object di dunia nyata, selain itu icon tersebut juga usefull karena sesuai dengan konteks judulnya.
3. Fitur menggambar seperti menggambar di dunia nyata. Terdapat canvas, pensil, spidol, penghapus, dan lain sebagainya.
4. Tampilan dan flow marketpace seperti di Supermarket dunia nyata, hal ini ditunjukkan dari cara menampilkan barang berjejer lengkap dengan Harga, Diskon, Nama Barang, dan Detail. Selain itu, user dapat memasukkan barang yang ingin dia beli ke keranjang, flow ini seperti saat kita membeli barang di Supermarket.

3. User control and freedom

Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

User berkemungkinan membuat kesalahan dalam menggunakan sebuah product digital. Sebagai seorang UX Designer, sebaiknya mencoba memproyeksikan segala kemungkinan kesalahan yang sering dilakukan user, lalu membuatkan sebuah sistem penanggulangan kesalahan tersebut dengan tepat, sistem penanggulangan atau biasa disebut “Emergency Exit” ini biasanya berupa Undo, Redo, Unsend, dan semacamnya.

Berikut adalah beberapa contoh penerapannya:

Screenshot dari Aplikasi-apliakasi yang ada di HP sendiri

1. Fitur Delete Message di Grup Telegram memperbolehkan user untuk menghapus pesan yang telah dia kirim, sehingga tidak dapat dibaca lagi oleh semua anggota grup.
2. Fitur Urungkan pengiriman email dari Gmail, fitur ini memberikan user akses untuk mengurungkan pengiriman email sesaat setelah email dikirim.
3. Fitur Undo dan Redo, memberikan user kebebasan dalam membatalkan perintah atau mengulang perintah yang sudah dibatalan sebelumnya.
4. Fitur Delete pada komentar yang telah diposting.

4. Consistency and standards

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

Ingatan manuasia terbatas, maka dari itu sebuah sistem perlu membuat sebuah standar-standar komponen dengan tujuan yang spesifik, dengan menggunakan standar ini secara konsisten di setiap screen, maka user akan semakin mengenali flow dan fungsi-fungsi dari setiap komponen, dengan begitu user tidak perlu mencoba menggalih ingatan dan berpikir keras.

“Standar” juga dapat diartikan sebagai standar komponen dan flow yang telah ada di product digital lainnya. Dengan mengikuti standar ini, user akan lebih mudah dalam mengenali dan menggunakan sebuah product digital, hal ini karena user telah menghabiskan banyak waktunya untuk menggunakan product digital lainnya, maka user pun berharap sistem product yang kita buat tidak jauh dari product digital lainnya.

Contoh yang paling jelas adalah sebuah app atau website yang menggunakan UI Guideline atau Design System. Saya sendiri sangat suka dengan Design System Gojek yang bernama Asphalt, guideline diklasifikasikan dan didokumentasikan dengan sangat jelas.

Diambil dari Asphalt — Design System Gojek

5. Error prevention

Even better than good error messages is a careful design which prevents a problem 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.

Selain membuat penanggulangan kesalahan yang dilakukan oleh user, maka akan sangat bijak jika sebuah product juga memiliki sistem pencegahan terhadap kesalahan yang dibuat user. Dengan adanya pencegahan ini, maka pain point user dan jumlah waktu user yang digunakan dalam menyelesaikan task akan berkurang.

Saya akan mengambilkan contoh dari salah satu aplikasi Best Hidden Gem 2019 Google Play, aplikasi tersebut adalah Riliv.

Diambil dari UI Design Riliv

1. Untuk melakukan Konseling Online, user wajib memenuhi syarat-syarat tertentu dengan melakukan Checklist. Bila user tidak memenuhi syarat (Tidak melakukan checklist), maka button akan berada pada state disable, hal ini mencegah user melanjutkan proses dengan tanpa memenuhi persyaratan.
2. Ketika user memenuhi syarat dan telah melakukan Checklist pada semua persyaratan, maka button akan berada pada state Active sehingga user dapat melanjutkan ke proses selanjutnya.
3. Fitur Show/Hide di kolom Password memberikan pencegahan terjadinya password yang salah/typo. User dapat melakukan cek terhadap text yang telah diinput, sehingga dapat meningkatkan kemungkinan password yang telah diinput adalah benar dan mengurangi kemungkinan eror login.
4. Dalam screen Player Meditasi terdapat pop up yang berisikan pertanyaan apakah user yakin ingin keluar dari player tersebut atau tidak, pop up ini dibuat agar user yang tidak sengaja menekan tombol back di hpnya tetap bisa melanjutkan audio meditasi yang sedang diputar.

Jika ingin lanjut membaca Part 2, silahkan akses artikel berikut:
Menggunakan Prinsip Jacob Nielsen’s Heuristic untuk Meningkatkan Usability pada User Interface — Part 2