Menerapkan UI Design dengan Best Practice

Aldo Bima
PPL SeLaw
Published in
4 min readApr 30, 2019

Nielsen 10 Usability Heuristic

Salah satu guideline yang dapat digunakan pada saat melakukan UI design adalah 10 Nielsen 10 Usability Heuristic. Hal ini merupakan prinsip UI design yang cukup universal dan banyak digunakan pada produk2 perangkat lunak yang ada.

Berikut adalah daftarnya :

  1. Visibility of System Status

Suatu kondisi yang mampu memberikan informasi yang terjadi pada user baik yang sedang dilakukan, sedang dibagian apa dan apa yang terjadi.

2. Match between system and the real world

Sistem haruslah mempu memberikan informasi yang mudah dipahami seperti bahasa sehari-hari. Untuk memberikan kesan keakraban dan kepercayaan bagi user.

3. User control and freedom

Mampu memberikan kemudahan dan kebebasan kepada user dalam menggunakan interface. Contohnya seperti user yang dapat melakukan undo, redo, dll.

4. Consistency and standards

Desain konsisten dan baik akan memudahkan bagi user dalam mengenal fitur agar tidak membuat user ragu-ragu saat menggunakan fitur tertentu. Hindari penggunaan informasi atau gambar yang berbeda namun memiliki makna yang sama.

5. Error prevention

Error atau bug pada sistem merupakan suatu yang tidak profesional bila terlihat oleh user namun untuk menangani hal ini dapat diganti dengan pesan error dalam bentuk desain. Dengan menggunakan prinsip nomor satu (visibility of system status) user memahami apa yang terjadi pada sistem.

6. Recognition rather than recall

Daripada memaksa user untuk mengingat, lebih baik buat user bisa mengenali sistem tersebut. User dalam menjelajahi sistem atau aplikasi tentu akan melewati beberapa halaman. Agar user tidak bingung, buat aplikasi yang membuat user bisa mengenali pola desain yang dibuat sehingga mereka bisa tetap menggunakan aplikasi tanpa harus mengingat langkah yang harus dilakukan setelahnya.

7. Flexibility and efficiency of use

Bagi user atau pengunjung baru tentu mereka akan mempelajari sistem atau aplikasi terlebih dahulu. Apalagi jika aplikasi tersebut memiliki fitur yang banyak, user pasti membutuhkan yang lebih banyak dalam mempelajarinya. Oleh karena itu aplikasi haruslah fleksibel dan efisien.

8. Aesthetic and minimalist design

Desain layout yang baik haruslah nyaman dipandang dengan menggunakan kontras warna yang baik, posisi yang sesuai dan serasi. Dengan desain yang minimalis dan dipadukan dengan whitespace (jarak antar elemen) yang sesuai akan membuat aplikasi terlihat elegan.

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

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.

10. Help and documentation

Harapan user menggunakan sistem atau aplikasi tentunya dapat menyelesaikan masalah dan pekerjaannya. Untuk membantu mereka dalam menyelesaikan masalah atau pekerjaannya kita perlu diberikan fitur bantuan dan dokumentasi dari kemungkinan kesalahan dalam penggunaan.

Menerapkan pada justika probono

Pada bagian ini akan dielaborasikan penerapan prinsip design di atas pada pengembangan perangkat lunak justika probono. Pada bagian ini akan dijelaskan beberapa saja yang kami terapkan

  1. Visibility of System Status

Pada website justika probono. terdapat form yang akan menjelaskan sudah berapa karakter yang diinput pada input field. Hal ini berguna untuk user agar dapat mentrack status jumlah karakter yang ia masukkan karena jumlah masksimum karakter yang digunakan itu dibatasi.

2. Consistency and standards

Pada Proses design justika probono sebelumnya dilakukan proses pembuatan guideline untuk mengatur standard dari design yang ada. Desain yang dilakukan pun konsisten sesuai dengan standard yang telah dibuat.

3. Recognition rather than recall

Terkait dengan menerapkan kebiasaan menjadi keuntungan. Dengan memerhatikan kebiasaan pengguna dan menerapkannya maka user akan lebih mudah mempelajari bagaimana website justika bekerja. Yang dilakukan adalah seperti membuat navigator, kemudian posisi tanda close, dll

4. Error prevention

Pada jsutika probono yang dilakukana dalah error prevention pada form sebelum disubmit. Form akan mengeluarkan waring apabila terjadi kesalahan

5. Aesthetic and minimalist design

Pada desain web justika probono digunakan colour pallete yang minimalis yaitu hanya dominan berwarna biru dan oranye. Selain itu juga terdapat banyak space berwarna putih yang membuat kesan halaman lebih ringan dan minimalis. Selain itu juga terdapat banyak aksen desain vektor yang menggunakan flat design.

--

--