Penerapan 8 Golden Rules dari Ben Shneiderman pada User Interface SIAK NG 2.0

Rafli Bangsawan
4 min readJun 17, 2022

--

Dalam pengembangan sebuah aplikasi, tentu tampilan dari produk merupakan salah satu hal yang paling penting. Tampilan atau interface ini yang akan menentukan kemudahan penggunaan produk yang dihasilkan. Beberapa pakar desain merumuskan aturan-aturan yang sebaiknya diikuti dalam membuat suatu desain UI.

sumber: https://www.binaracademy.com/blog/8-golden-rules-interface-design

Salah satu aturan dalam mendesain UI yang cukup populer adalah 8 Golden Rules dari Ben Shneiderman. 8 Golden Rules ini berisi 8 aturan yang meliputi: Strive for Consistency, Enable Frequent Users to Use Shortcuts, Offer Informative Feedback, Design Dialog to Yield Closure, Offer Simple Error Handling, Permit Easy Reversal of Actions, Support Internal Locus of Control, Reduce Short-Term Memory Load. Pada artikel ini, saya akan menjelaskan penerapan dari setiap aturan Golden Rules pada proyek PPL 2022 tim saya, yaitu SIAK NG 2.0.

Strive for Consistency

Dalam mendesain, konsistensi merupakan hal yang perlu diperhatikan. Konsistensi yang dimaksud di sini meliputi konsistensi dalam menggunakan font, konsistensi dalam memilih warna, konsistensi dalam membuat layout, dan lain-lain. Berikut contoh penerapan dalam SIAK NG 2.0:

Dapat dilihat tampilan dari SIAK NG 2.0 ini konsisten dalam hal font, pemilihan warna tema, dan bentuk tabel.

Enable Frequent Users to Use Shortcuts

Membuat shortcut dapat memudahkan pengguna agar dapat membuka halaman yang diinginkan dengan klik yang minimum.

Pada halaman home, SIAK NG 2.0 memiliki suatu shortcut menuju halaman yang eventnya sedang berjalan.

Offer Informative Feedback

Aturan yang berikutnya yaitu Offer Informative Feedback. Dalam aturan ini, kita perlu membuat desain yang dapat membuat pengguna tahu apa yang mereka lakukan.

Tim PPL saya menerapkan aturan ini pada halaman Isi IRS di SIAK NG 2.0. Pada halaman ini, ketika pengguna memilih kelas maka akan diberi tahu jumlah sks sekarang dan informasi mengenai pengecekan IRS.

Contoh di atas ketika pengguna belum memilih kelas DDP 2 dan ketika sudah memilih kelas DDP 2, jumlah SKS dan informasi pengecekan IRS diperbarui.

Design Dialog to Yield Closure

Desain yang kita buat perlu memberi pesan ketika pengguna melakukan suatu tindakan. Pada SIAK NG 2.0, ketika ingin melakukan penyimpanan IRS maka akan muncul pop up agar pengguna dapat mengecek kembali kelas yang sudah diambil.

Offer Simple Error Handling

Ketika terjadi error, tampilan desain yang baik dapat memunculkan pesan error yang sederhana. Pada SIAK NG 2.0, ketika pengguna gagal melakukan login, maka akan muncul sebuah pop up message.

Permit Easy Reversal of Actions

Aksi untuk meng-undo akan sangat membantu pengguna ketika melakukan kesalahan. Desain yang baik akan menyediakan aksi undo yang mudah untuk penggunanya. Pada SIAK NG 2.0, kami menerapkan prinsip ini dalam halaman Isi IRS. Saat pengguna memilih suatu kelas dengan menekan radio button di tabel, pengguna dapat men-undo dengan cara menekan radio button itu kembali.

Pengguna memilih kelas PSD-A.

Pengguna meng-undo dengan cara menekan radio button pilih kembali.

Support Internal Locus of Control

Memberi kontrol dan kebebasan untuk pengguna adalah hal yang penting dalam membuat desain. Aturan ini diterapkan SIAK NG 2.0 pada halaman Isi IRS. Ketika pengguna sedang memilih kelas, pengguna dapat melihat apakah ada masalah dari IRS yang dibuat. Ketika terdapat kesalahan, pengguna dapat menghilangkan kelas yang diambil dengan menekan icon sampah pada tabel Kelas Diambil sehingga permasalahan tidak muncul.

Reduce Short-Term Memory Load

Pada penerapan aturan ini, SIAK NG 2.0 menggunakan icon-icon yang sudah familiar sehingga pengguna langsung mengetahui fungsi dari tombol tersebut. Contohnya adalah icon notifikasi, icon untuk menghapus sesuatu, dan icon untuk membuka chat.

Icon notifikasi
Icon delete
Icon membuka chat

Sekian artikel mengenai desain UI dengan 8 Golden Rules pada halaman SIAK NG 2.0. Sampai jumpa di artikel lain!

Referensi

  1. https://webdesign.tutsplus.com/articles/8-golden-rules-for-better-interface-design--cms-30886

--

--

Rafli Bangsawan
Rafli Bangsawan

Written by Rafli Bangsawan

Computer Science Undergraduate at Universitas Indonesia

No responses yet