EIGHT GOLDEN RULES BY BEN SHNEIDERMAN

1. MENURUTBENSHNEIDERMAN
EIGHTGOLDENRULES
S-1TeknikIndustrii
UniversitasSebelasMaret

2. • Memahami
• Arti Golden Rules
• Bagaimana Golden Rules dapat meningkatkan kualitas dari sebuah
User Interface (UI)
• Mampu
• Menjelaskan Golden Rules serta memberikan contohnya
• Mendiskusikan suatu UI sesuai dengan konsep Golden Rules
LEARNING GOALS

3. BUKU PEDOMAN

4. 01
02
03
04
05
06
07
Strive for Consistency
Seek Universal Usability (Another version: Enable frequent users to use shortcuts)
Offer Informative Feedback
Design Dialogue to Yield Closure
Prevent Errors / Offer Simple Error Handling
Permit Easy Reversal of Actions
Keep Users in Control / Support Internal Locus of Control
08 Reduce Short-term Memory Load
THE EIGHT GOLDEN RULES

5. STRIVE FOR CONSISTENCY
01
• Pengaplikasian segala hal secara konsisten, mulai dari userflow,
terminologi, warna, layout, font, icon, call-to-action (CTA), dll.
• Konsistensi membantu user agar dapat langsung mengoperasikan Interface
tanpa perlu mempelajari terlebih dahulu
• Konsistensi membantu user cepat familiar terhadap interface sehingga
mempermudah dalam menyelesaikan setiap tugas
• Konsistensi terdapat 2 makna, yaitu konsisten antara sistem lainnya yang
sejenis atau konsisten dalam sistem internal itu sendiri

6. STRIVE FOR CONSISTENCY
01
Tampilan di atas terlihat berbeda dari tampilan di samping
mulai dari warna, hingga Tombol CTA.

7. STRIVE FOR CONSISTENCY
01
Contoh Konsistensi Layout (studycase: Google Suite)

8. STRIVE FOR CONSISTENCY
01
Contoh Konsistensi Warna (studycase: Google Suite)

9. STRIVE FOR CONSISTENCY
01
Contoh Konsistensi Userflow
Penggunaan userflow signup-login yang sudah umum dapat
mempermudah user dalam memahami interface

10. SEEK UNIVERSAL USABILITY
02
Ketika mendesain interface, Kita tidak boleh hanya fokus pada kebutuhan satu
kelompok pengguna saja. Sebuah desain antarmuka pengguna (UI) baru bisa
dianggap baik jika semua pengguna baru dan semua kelompok pengguna
dapat dengan mudah memahami dan menggunakan aplikasi tersebut untuk
mencapai tujuan mereka dengan cepat.

11. SEEK UNIVERSAL USABILITY
02
Contoh: Tooltip pada Slack
Bantuan Kontekstual berupa tooltip dapat memudahkan pengguna baru untuk menjelajahi
aplikasi atau situs web.

12. • Setiap user melakukan tindakan, user harus mengetahui posisi mereka
saat ini dan aktivitas pada sistem yang sedang berjalan. Sistem harus
memberikan feedback yang informatif.
• Feedback informatif: Harus bisa dimengerti oleh orang awam dan
diberikan waktu yang cukup untuk user untuk mengambil tindakan
OFFER INFORMATIVE FEEDBACK
03

13. OFFER INFORMATIVE FEEDBACK
03
adanya highlight (perbedaan warna dengan tab sebelahnya) menandakan
user saat ini berada pada tab Twitter/X
Contoh: Tab pada Google Chrome

14. OFFER INFORMATIVE FEEDBACK
03
adanya highlight (perbedaan warna dengan proses
sebelahnya) menandakan user saat ini berada pada
proses “Bayar”
Contoh:
Traveloka

15. OFFER INFORMATIVE FEEDBACK
03
memberikan pesan error seperti ini akan membuat pengguna bingung. Ini
sama saja ketika anda bertanya ke pasangan mau makan apa, lalu dijawab
"terserah", tentunya anda akan bingung sendiri 😭

16. OFFER INFORMATIVE FEEDBACK
03
pesan dengan bahasa mesin yang tidak informatif seperti di atas tidak
membantu pengguna menyelesaikan masalahnya. Gunakan pesan yang
dimengerti oleh orang awam

17. OFFER INFORMATIVE FEEDBACK
03
Feedback di atas merupakan contoh-contoh feedback yang informatif
dan dapat membantu user
https://cxl.com/blog/error-messages/

18. DESIGN DIALOGUE TO YIELD CLOSURE
04
Jangan biarkan pengguna menebak-nebak harus melakukan apa, apakah proses sudah
selesai atau masih perlu menunggu
adanya dialog yang menyatakan bahwa proses upload sudah selesai
Contoh:
Proses Upload
pada Google Drive

19. DESIGN DIALOGUE TO YIELD CLOSURE
04
Loading semestinya memberikan kejelasan sudah sampai mana
proses menunggunya
https://uxdesign.cc/loading-progress-indicators-ui-
components-series-f4b1fc35339a

20. PREVENT ERRORS / OFFER SIMPLE ERROR HANDLING
05
• Saat terjadi kesalahan pada sistem, usahakan tidak menyalahkan pengguna
• Jika terjadi kesalahan, sampaikan dengan sederhana yang dilengkapi dengan
langkah-langkah penyelesaian permasalahan tersebut

21. PREVENT ERRORS / OFFER SIMPLE ERROR HANDLING
05
https://uxplanet.org/how-to-write-good-error-messages-858e4551cd4

22. PREVENT ERRORS / OFFER SIMPLE ERROR HANDLING
05
https://uxplanet.org/how-to-write-good-error-messages-858e4551cd4

23. • Ijinkan pengguna memperbaiki kesalahan yang telah dilakukan sebelumnya (ex:
undo pada Microsoft Office)
• Fitur ini mengurangi kecemasan karena user tahu bahwa kesalahan dapat
dikembalikan, dan mendorong user untuk mengeksplorasi interface lebih
banyak.
• Solusi apabila memang proses tidak dapat dibatalkan: Penambahan tombol
konfirmasi atau peringatan jika data yang dimasukkan memang tidak dapat
diubah lagi.
PERMIT EASY REVERSAL OF ACTIONS
06

24. 06
Saat menghapus file, sistem akan memberikan kesempatan untuk “undo”
Contoh:
Proses Delete
pada Google Drive
PERMIT EASY REVERSAL OF ACTIONS

25. 06
Memberikan fitur unsend pada aplikasi messenger
PERMIT EASY REVERSAL OF ACTIONS

26. KEEP USERS IN CONTROL
07
• Ijinkan user menjadi inisiator dari suatu action
• Berikan full control kepada user untuk mengendalikan aktifitas pada sistem
• Sistem harus dirancang sehingga “predictable”

27. 07
Sistem IOS memberikan pilihan kepada user apakah mengizinkan untuk
memberikan akses camera dan microphone kepada aplikasi instagram
KEEP USERS IN CONTROL

28. 08
REDUCE SHORT-TERM MEMORY LOAD
• Manusia memiliki keterbatasan memori
• Sistemlah yang mengingat, bukan pengguna. Ini bermakna sistem harus bisa
menyimpan dan mengakses informasi pengguna sebelumnya, sehingga mereka
tidak perlu mengingat ulang setiap kali.
• Tampilkan informasi yang dibutuhkan pengguna secara jelas. Informasi
penting harus mudah ditemukan dan diakses, sehingga pengguna tidak perlu
mencari-cari.
• Recognition > Recall. Gunakan bantuan seperti tampilan visual atau audio untuk
membantu pengguna memahami dan mengingat informasi.

29. 08
Penggunaan ilustrasi dapat menjelaskan pengguna secara singkat
tentang apa yang terjadi pada sistem
REDUCE SHORT-TERM MEMORY LOAD

30. How You Can Apply Shneiderman’s 8 Golden Rules to Your Interface Designs
https://www.interaction-design.org/literature/article/shneiderman-s-eight-golden-rules-will-help-you-design-better-interfaces