Memahami User Interface dengan Prinsip 10 Usability Heuristic

Published in

Pegadaian Design

5 min readJan 23, 2021

Overview

Sudah familiar dengan User Interface? User Experience? Keduanya sering disingkat UI/UX. Profesi tersebut sangat erat hubungannya dengan tampilan website dan aplikasi yang baik, sehingga bisa membuat pengguna merasa nyaman dan ingin berlama-lama di suatu aplikasi. Keren bukan.. 😎

Tapi, UI dan UX punya perbedaan lho.. Begini ilustrasinya

Meskipun sama-sama terdapat kata “user” pada dasarnya UI dan UX memiliki tugas yang berbeda. UX designer bertugas untuk memastikan kenyamanan dan memberikan pengalaman yang baik bagi penggunanya, yang bisa diperoleh dengan mengetahui kebiasaan dan tujuan pengguna. Sedangkan UI designer, bertanggung jawab terhadap aspek visual, seperti tata letak, desain, warna, font, dan gambar, agar sebuah aplikasi dapat terlihat lebih menarik.

Pada kesempatan kali ini mari kita bahas bagaimana cara merancang tampilan antarmuka yang baik dengan prinsip 10 Usability Heuristic.

**Apa itu 10 Usability Heuristic? 🤔**

10 Usability Heuristic untuk User Interface diciptakan oleh Jakob Nielsen pada tahun 1994.

“Usability atau kegunaan adalah tentang pengguna dan bagaimana mereka dapat memahami dan menggunakan sesuatu, bukan tentang teknologi” — Steve Krug, dalam bukunya Don’t Make Me Think.

Prinsip tersebut biasanya digunakan untuk membantu mengidentifikasi masalah kegunaan dalam pengembangan User Interface. UI bisa dikatakan baik ketika mudah dipahami oleh penggunanya.

Apa saja poin-poin prinsip tersebut? Check this out!

#1: Visibility of system status 🧐

Gambar di bawah ini merupakan kondisi upload pada google drive yang memberikan informasi status file yang diunggah oleh pengguna.

Gambar di bawah ini memberikan informasi kekuatan kata sandi yang dimasukkan pengguna.

#2: Match between system and the real world 🤳

Sistem harus menyampaikan informasi dalam bahasa pengguna, sehingga lebih mudah dipahami.

Selain itu, pengguna cenderung menyamakan penggunaan sebuah aplikasi berdasarkan pengalaman dengan sistem lain yang pernah diakses. Dengan menggunakan bahasa yang dipahami, akan dapat membantu pengguna mengatasi kebingungan pada saat awal menggunakan.

Gambar di bawah ini merupakan contoh kesesuaian antara real-word dan icon pada smartphone.

#3: User control and freedom 👨‍💻

“Setiap sistem harus memiliki pintu keluar darurat yang jelas.”

Hal tersebut bertujuan untuk mengakomodasi salah klik dari pengguna. Bayangkan ketika situasi tersebut terjadi dan melibatkan sesuatu yang penting seperti penghapusan file penting secara tidak sengaja 🙀

Maka dari itu setiap sistem harus memiliki “pintu keluar darurat” yang ditandai dengan jelas, untuk memberikan pengguna jalan kembali yang mudah ketika mereka berada pada situasi yang tidak diinginkan.

Gambar di bawah ini merupakan contoh button exit ketika masuk ke google maps.

Kemudian contoh lain adalah button undo yang muncul ketika pengguna menghapus file pada google drive.

#4: Consistency and standards 🙌

Tampilan yang konsisten serta diatur dengan baik akan berfungsi memudahkan pengguna mengenali suatu fitur. Konsistensi secara aspek visual cukup luas, mulai dari struktur tampilan, icon, jenis tulisan, ukuran tulisan, warna dan sebagainya. Perihal konsistensi ini juga memunculkan istilah Style guide dan Design System yang bisa kita bahas pada topik tersendiri.

Gambar di bawah ini merupakan contoh konsistensi icon pada google material, satu icon dengan yang lain memiliki style yang sama.

#5: Error prevention 😯

Sistem harus memberitahu penggunanya untuk menghindari error. Hal ini juga berkaitan dengan poin ke-1 yakni visibility of system status, sehingga user tahu kondisi yang benar dan menghindari hal-hal yang error.

Berikut ini merupakan contoh error prevention.

#6: Recognition rather than recall 🤔

“Don’t make users think” — Steve Kurg

Dalam menggunakan suatu fitur, biasanya pengguna akan melewati beberapa halaman. Para desainer perlu membuat pola yang sama sehingga pengguna tidak terlalu banyak berpikir, atau sistem harus memberikan semua saran yang diperlukan pada saat pengguna membutuhkannya.

Gambar di bawah ini merupakan contoh rekomendasi pencarian pada google

#7: Flexibility and efficiency of use 🤗

“Setiap pengguna itu unik, masing-masing memiliki kebutuhan dan keterampilan yang berbeda. Demikian pula setiap aplikasi, unik dan membutuhkan kontrol yang berbeda” — Michal Langmajer

Antarmuka dari sebuah sistem dituntut fleksibel dan efisien untuk mengakomodasi semua kalangan pengguna.

Gambar di bawah ini menunjukan shortcut pada google docs untuk mempermudah pengguna

#8: Aesthetic and minimalist design 😎

Minimalis yang dimaksud adalah sebisa mungkin kita hanya menampilkan apa yang seharusnya ditampilkan, menghilangkan semua elemen yang tidak diperlukan, selain itu dengan menggunakan kontras yang baik, posisi yang diatur dengan baik akan membuat tampilan enak untuk dilihat 😎.

Berikut ini merupakan contoh website dengan design minimalis

#9: Help users recognize, diagnose, and recover from errors 👨‍🔧

Pesan error harus ditampilkan dalam bahasa sederhana yang dimengerti oleh pengguna, menunjukkan masalah, dan secara konstruktif menyarankan solusi. Sehingga pengguna bisa mengantisipasi dan bertindak sesuai apa yang terjadi pada sistem.

Gambar berikut menampilkan error yang tidak dimengerti pengguna 🤦‍♂️.

Sementara gambar berikut menampilkan error yang lebih dimengerti oleh pengguna 😉.

#10: Help and documentation 💁🏻

Pengguna pasti memiliki tujuan pada saat membuka aplikasi, sistem perlu membantu tujuan atau kebutuhan pengguna tersebut, terlebih pada saat pengguna kebingungan. Sistem perlu memiliki fitur bantuan dan dokumentasi pertanyaan-pertanyaan pengguna pada saat menggunakan aplikasi.

Gambar di bawah ini merupakan contoh halaman bantuan dari google.