NOVEMBER 15, 2023

Golden Rules of
Interface Design
INTERAKSI MANUSIA DAN KOMPUTER
 Agenda

1 2 3

Shneiderman’s
Norman’s seven Nielsen’s heuristics
eighat golden rules
principles
Shneiderman’s eight
golden rules
8 Golden Rules adalah panduan dalam
membuat suatu rancangan antarmuka untuk
suatu aplikasi yang diusulkan oleh Ben
Shneiderman melalui bukunya“ Designing the
User Interface”.

LET'S START!
Strive for consistency
Membangun desain yang konsisten, sangat
dibutuhkan dalam satu aplikasi, apalagi kalau aplikasi
tersebut saling berhubungan. Fungsinya, agar notive
user dapat mengetahui halaman mana saja yang masih
berhubungan.

Pada aplikasi kamera, tombol “ambil foto”

selalu berada di bagian tengah bawah.
Cater to universal usability
Perbedaan yang dimiliki antar user dalam membuat
user interface berpengaruh terhadap preferensi
interface yang digunakan. Pembuatan designnya
harus sesuai dengan universal usability.

Layanan ini memungkinkan pengguna untuk menerjemahkan teks ke dan dari banyak bahasa yang
berbeda, menjadikannya alat yang sangat berguna bagi pengguna dari berbagai latar belakang.
Offer feedback
Pemberian informasi yang merupakan hasil feedback
dari aksi tidak hanya berupa jawaban. Namun juga
bisa dibuat user interface dengan design yang
berbeda.
WhatsApp: Saat mengirim pesan di WhatsApp,
ada tanda centang yang menunjukkan status pesan.
Satu tanda centang berarti pesan telah terkirim ke
server, dua tanda centang berarti pesan telah
sampai ke penerima, dan dua tanda centang biru
berarti pesan telah dibaca oleh penerima
Design dialog to yield closure
Poin ini merupakan pin yang satu kesatuan dengan
feedback informasi. Karena fungsinya untuk
menyampaikan bahwa proses yang dilakukan oleh
user telah selesai dilakukan.
E-commerce: Saat kamu melakukan pembelian di
situs e-commerce, biasanya ada beberapa langkah
yang harus dilalui, seperti memilih produk,
memasukkan alamat pengiriman, dan melakukan
pembayaran.
Setelah semua langkah selesai, biasanya akan mun
cul halaman konfirmasi yang menunjukkan bahwa
proses pembelian telah selesai
Prevent errors
Poin ini untuk menjaga agar user tidak melakukan
kesalahan dalam menjalankan proses. Biasanya
berupa petunjuk pengisian formulir sesuai format
yang diterima oleh aplikasi, sehingga user dapat
mengisi formulir dengan tepat pada percobaan
pertama.
Memberikan Peringatan Real-Time: Dengan
memberikan peringatan real-time, sistem dapat
mencegah pengguna melakukan kesalahan.
Misalnya, jika pengguna mencoba mengirim form
ulir dengan bidang yang belum diisi, sistem dapat
menampilkan peringatan
Permit easy reversal of actions
Pada poin ini user bisa melakukan pembatalan atas
aksi yang dilakukan sebelumnya. Tidak hanya berupa
tombol back saja melainkan aksi pembatalan lainnya.
Seperti saat melakukan pembelian barang di toko
online user ingin membatalkan pemesanan maka
bisa dilakukan. Sehingga user tidak perlu
menghubungi customer service atau meminta
bantuan kepada pemilik aplikasi.
Keep users in control
User seringkali menyukai pengaturan interface sesuai
dengan keinginannya sendiri. Karenanya membiarkan
user memilih pengaturannya sendiri akan membuat
user semakin nyaman menggunakan aplikasi.
Banyak aplikasi dan situs web memungkinkan pengg
una untuk menyesuaikan pengaturan mereka sendiri, s
eperti tema, layout, dan preferensi notifikasi
Reduce short-term memory load
Pada proses ini data dipusatkan pada menu dan
tombol yang ada. Ini agar memudahkan user
dalam menggunakan menu dan tombol yang ada.
Menu Dropdown: Menu dropdown dapat
mengurangi beban memori karena pengguna
tidak perlu mengingat semua opsi yang
tersedia.
Mereka hanya perlu mengklik menu dan memi
lih opsi yang mereka inginkan
Norman’s seven principles
DISCOVERABILITY (MUDAH DITEMUKAN)
Discoverability ialah mudah ditemukan atau mudah dicari (fitur). Biasanya ketika kata dapat
ditemukan digunakan melalui internet merujuk pada mudahnya mencari konten.

Ketika kita membuka Aplikasi Gojek dan ingin mencari fitur “GoCar”, tidak perlu
susah-susah mencari karena semua fitur dan pilihan tersedia di Home Page.

AFFORDANCES (KESESUAIAN)
Kesesuaian atau keterjangkauan yaitu, hubungan antara sifat-sifat objek fisik dan kemampuan
agen yang menentukan bagaimana objek mungkin dapat digunakan.

Contoh elemen antarmuka pengguna, secara langsung menyarankan tindakan pengguna yang
sesuai, dengan contohnya yaitu slide unlock yang dapat diseret dan beralih ke home page di
HP
Norman’s seven principles
SIGNIFIERS (PENANDA )
Signifiers atau penanda bertindak sebagai petunjuk. Berbagai jenis yang dapat membantu
proses dalam menandakan user tentang interaksi. Bisa lewat warna, suara, gerakan, bentuk,
dll. Yang harus dipahami dengan baik. Mencakup What, How, Where. Dalam berbagai cara,
karakteristik dari sebuah objek mensugestikan ke individu bagian apa yang diterima oleh
sebuah affordance.
Button slide untuk On/Off sebagai petunjuk

MAPPING (PEMETAAN)
Pemetaan digunakan untuk menunjukkan hubungan antara dua set benda seperti sakelar dan
lampu terkait yang dikendalikannya. Ini sering digunakan ketika merancang control dan
tampilan. Pemetaan alami sangat berguna dalam design online karena mengambil keuntungan
dari tindakan yang sudah kita ketahui – seperti meng-slide sesuatu untuk menghapusnya, atau
slide kabawah untuk refresh page di ponsel.

Slider juga memiliki pemetaan yang kuat karena jelas memindahkannya ke kanan akan
meningkatkan nilainya versus memindahkan ke kiri akan mengurangi nilai.
Norman’s seven principles
CONSTRAINT (KENDALA)
Memberikan batasan pada apa yang mungkin terjadi dengan suatu objek dapat
membantu memperjelas cara menggunakannya dan untuk apa itu. Memberikan arahan
yang jelas tentang bagaimana berinteraksi dengan atau mengoperasikan system.

Contoh dari hal ini dalam design web adalah penanganan kesalahan, dimana formulir akan memberikan umpan balik yang bermanfaat
kepada pengguna untuk menghindari pertukaran yang tidak produktif.

FEEDBACK (UMPAN BALIK)

Umpan balik penting untuk membantu kita memahami bagaimana berinteraksi dengan objek dan apa
efek tindakan kita terhadap objek atau system. Feedback online bisa dalam bentuk informasi
tambahan yang muncul di halaman.

Feedback yang didapat oleh customer yaitu mendapat poin yang bisa ditukarkan dengan
voucher/promo.
Norman’s seven principles
CONCEPTUAL MODEL (MODEL KONSEPTUAL)
Model konseptual adalah bagaimana pengguna memahami suatu system untuk bekerja dan
penting untuk memberikan rasa control kepada pengguna. Pengguna dapat mengetahui cara
melakukan hal-hal baru atau mencoba variasi di berbagai hal. Dan juga dapat mengevaluasi
hasil tindakan yang di ambil.

Contohnya adalah fitur Retweet di Twitter atau X

 10 Usability Heuristics
Visibility of system status Match between system and the real world
Sistem harus selalu menginformasikan user tentang apa yang Sistem yang dibuat, harus sesuai dengan dunia nyata atau dunia yang
sedang terjadi, dengan feedback yang tepat di waktu yang tepat kita tempati sekarang. Maksudnya adalah kata-kata yang digunakan
pula. sistem harus menggunakan bahasa user, dengan kata-kata dan konsep
yang familiar oleh mereka.
 10 Usability Heuristics
User control and freedom
User adalah pemegang kendali, dan kebebasan dalam
menggunakan produk. Mendesain sebuah Software yang dapat
melakukan Undo atau force exit atas suatu action tentu menjadi
nilai plus bagi user.
Consistency and standards
User tidak perlu bertanya-tanya, apakah kata-kata, situasi, atau action
yang berbeda dapat bermakna sama atau tidak. User juga tidak boleh
dibuat bingung dengan desain halaman, font, layout, dan cara yang
berbeda-beda dalam satu sistem.
 10 Usability Heuristics
Error prevention
Yang lebih baik dari pesan error yang bagus adalah desain yang
bagus yang dapat mencegah kemungkinan error tersebut muncul.
Ada dua tipe error yang dilakukan users, yaitu Slips (ingin
melakukan A, tapi yang terjadi justru B, contohnya Typo) dan
Mistakes (error yang berasal dari kesalahan user memahami
problem, misalkan ingin menyelesaikan A tapi dengan cara untuk
menyelesaikan B).
Recognition rather than recall
Sistem harus dibuat sejelas mungkin sehingga user langsung dapat
mengenali bagaimana caranya menggunakan sistem tersebut tanpa
harus mengingatnya.
Contoh jelasnya adalah suggestion saat kita mencari sesuatu di
Search Engine seperti Google.

Confirm Before Destructive Actions

 10 Usability Heuristics
Flexibility and efficiency of use
Desain User Interface harus dibuat sefleksibel dan seefisien
mungkin hingga dapat dimengerti oleh semua pengguna, baik itu
pemula atau pengguna ahli.
Contohnya adalah User Interface ketika menginstall sebuah
aplikasi, kita diberi pilihan apakah ingin menginstall secara
manual atau default.
Aesthetic and minimalist design
Dialog yang ditampilkan tidak boleh berisikan informasi yang tidak
relevan atau tidak terlalu dibutuhkan. Selain itu, gunakan
desain/layout yang setidaknya nyaman untuk dilihat user, seperti
kontras warna atau pencahayaan yang baik dan tidak menyakitkan
mata user.
 10 Usability Heuristics
Help users recognize, diagnose, and recover from Help and documentation
errors
Segala informasi tersebut harus mudah untuk dicari, fokus ke
Pesan error harus ditampilkan secara jelas, bukan menunjukkan
pekerjaan user, list dari langkah konkrit untuk digunakan, dan tidak
potongan kode yang menyebabkan error tersebut. Pesan tersebut
terlalu besar.
harus secara jelas mendeskripsikan masalah dan memberi tahu
user solusi dari error tersebut.
 SOURCES
https://www.scribd.com/document/417547064/7-PRINCIPLES-20160140034-R-Dhiya-Aulia-docx
https://medium.com/akhirnya/10-usability-heuristics-sebuah-penjelasan-agak-singkat-697c509855ba
https://www.binaracademy.com/blog/8-golden-rules-interface-design