Graphical User Interface
Design and Programming
P ERT E MU A N 4
INTERFACE DESIGN PRINCIPLES
Overview
HCI design concepts
Design principles
General design principles
Prinsip-prinsip desain dapat diterapkan dalam segala bidang. Beberapa prinsip
adalah penting untuk computer interfaces.
Mengikuti “general design principles” dapat menjamin bahwa “basic human
factors” akan dievaluasi
HCI Design Concepts
Visibility
Affordance
Constraints
Mapping
Causality
Transfer effects
Idioms
Individual differences
Donald Norman
Donald Norman, author of
"The Design of Everyday
Things".
Visibility
The principle of visibility
◦ Dengan melihat interface yang ada, user dapat mengerti system apa yang
sedang dihadapi kemudian bekerja dan melakukan suatu tindakan dengan
system tersebut
◦ Bagian-bagian yang penting dari system harus terlihat dan dapat digunakan
dengan jelas
Visibility
Affordance
Good affordance
◦ Penampilan dari obyek / interface mengindikasikan bagaimana seharusnya
digunakan. Contoh: scrollbars - moving up and down, button - pushing.
◦ Metaphor / icon / gambar yang sederhana, mudah dimengerti.
Affordance
Norman membedakan antara “perceived” dan “real” affordance.
• Physical objects mempunyai real affordance
• virtual items mempunyai perceptual affordance.
Dalam bidang komputer, affordances selalu perceptual dan bukan physical.
Perceptual objects menyandarkan pada pembelajaran conventions.
Affordance
Bagaimana obyek-obyek berikut memberikan affordance?
Constraints
Constraints:
Keterbatasan dari beberapa kemungkinan “actions of an object”.
Constraints mungkin juga digunakan untuk membatasi agar user tidak membuat
kesalahan.
Norman mengklasifikasikan 3 kategori constraints:
◦ Physical
◦ Logical
◦ Cultural
Constraints
(Image from
[Link]
urse/INST/6031/)
Mappings
Mapping
Kumpulan dari beberapa kemungkinan hubungan antar objects.
Menunjukkan hubungan antara controls dan actions:
◦ cause and effect: steering wheel-turn right, car turns right
Mappings
bad good
Mapping
poor mapping of video control buttons?
good mapping
QuickTime
Player 4.0
QuickTime Player 6.3
[Link]
Causality
Causality
Sesuatu yang terjadi dikarenakan suatu tindakan yang telah dilakukan oleh user
False causality:
◦ incorrect effect
◦ Mulai dengan unfamiliar application ketika “computer crashes”
◦ causes “superstitious” behaviors
◦ invisible effect
◦ Perintah dengan hasil yang tidak kelihatan selalu diulang-ulang. Misal mouse click pada
menu dimana system tidak responsive
Transfer effects
Transfer Effect
User memindahkan pola pikir dan pembelajarannya dari system yang lama ke
system yang baru
◦ positive transfer: pembelajaran pada system yang lama dapat diterapkan pada
system yang baru
◦ negative transfer: pembelajaran pada system yang lama tidak cocok / conflict
dengan system yang baru
Idioms
Idioms
Simbol / lambang yang diterima umum dan digunakan untuk
menggantikan suatu perintah
◦ red berarti bahaya / stop / dilarang
◦ green berarti aman / jalan / ok
Idioms berbeda-beda dalam beberapa kultur !
◦ switches lampu
◦ America: down off
◦ Britain: down on
Individual differences
Tidak ada system yang dapat melayani setiap orang / user rata-
rata user. Maka desian biasanya selalu kompromi.
Rule of thumb:
◦ Desain harus dapat melayani 95% user – 5% kompromi
◦ Desain untuk rata-rata user adalah keliru
Contoh
◦ computers dan visibility:
◦ font size, line thickness, color for colour blind people?
Digital watches
Digital watch example
Affordances:
biasanya mempunyai buttons untuk ditekan tapi fungsinya tidak jelas
Constraints and mapping:
tidak diketahui oleh user, biasanya tidak diketahui dengan jelas relasi antara buttons, kemungkinan
tindakan dan hasilnya
Transfer of training:
sedikit relasi dengan jam analog
Cultural idiom:
beberapa controls and functions dapat diterima oleh banyak orang
Individual differences:
jam tangan untuk remaja bisa dipakai oleh bapak-bapak
Interface Design Guidelines
Human factors design principles memberikan a good basis
for design.
Guidelines ini dapat digunakan untuk design process dan
juga untuk mengevaluasi interface guna melihat usability.
Interface design principles
Shneiderman’s 8 Golden Rules
1. Strive for consistency and predictability
2. Cater to universal usability
3. Offer informative feedback
4. Indicate completions and exits clearly
5. Prevent errors
6. Permit easy reversal of actions
7. Give the user a sense of control
8. Reduce short-term memory/cognitive load
(Shneiderman, 2005)
Consistency
Consistent interfaces
◦ Mudah digunakan dan dipelajari
◦ internal (within an application) & external (across applications or
devices).
◦ Microsoft Office
◦ Words, commands, actions harus mempunyai efek yang sama
dalam berbagai situasi, sehingga user dapat memprediksi hasil dari
apa yang dilakukan
◦ “cut and paste” diterapkan pada words, paragraphs, pictures,
files akan mempunyai hasil yang sama
Consistency
Consistency
◦ bahasa dan terminologi
◦ controls berada dalam lokasi yang sama pada semua screens, menus and dialog boxes
◦ layout and graphics
◦ visual appearance sama pada seluruh system
User akan mudah mengerti system jika desainer mengikuti “platform
and general interface style conventions” Microsoft platform and
interface style.
External inconsistency example
Keypad numbers layout
(a) phones, remote controls (b) calculators, computer keypads
1 2 3 7 8 9
4 5 6 4 5 6
7 8 9 1 2 3
0 0
Consistency
Selalu menggunakan “ctrl key plus first initial of the command”
◦ ctrl+C, ctrl+S, ctrl+O
Bagaimana jika ada lebih dari satu command yang dimulai dengan
huruf yang sama ?
◦ Misal save, spelling, select, style
Gunakan “combination of keys” breaking the consistency rule
◦ ctrl+S, ctrl+Sp, ctrl+shift+L
Consistency
Level consistency
◦ Application – word
◦ Product – microsoft office
◦ Platform – linux, windows
◦ User expectation most important
Contoh
◦ Web pages dengan words highlighted or underlined akan mengundang user
untuk meng-click
Universal usability
Universal usability
catering for the needs of a wide range of users.
dibutuhkan pengertian akan “profiles of users”.
Contoh:
◦ Expert user - auto completion of commands, functions keys
◦ Novice user - extra explanations
Feedback
Feedback
Keep user informed about what is happening.
◦ sound, highlighting, animation and combinations of these.
◦ Contoh
◦ the hourglass – proses sedang berlangsung
◦ the right hand on the web – siap untuk diproses
Microsoft's Outlook Express 5.0
Feedback
Feedback harus menunjukkan jawaban yang “as specific as
possible” didasarkan pada user input
Usahakan menarik perhatian user tetapi jangan membuat
user putus asa.
Hindari kalimatyang menyinggung perasaan dan warna atau
suara yang menggangu
Visual C++
Exits
Atur workflow menjadi urutan yang benar start, middle dan end
Feedback diberikan pada akhir actions
Beri peringatan tentang segala macam input information yang di
“saved” atau “lost”.
Exits
User biasanya berubah pikiran, terinterupsi, atau menjadi bingung
pada saat proses sedang berjalan. Maka perlu diberikan :
◦ Cancel button (dialogs waiting for input)
◦ Undo (get back to previous state)
◦ Quit (leaving the program at any time)
◦ Defaults (restoring to known state)
An example: A
Dishwasher
Prevent errors!
Good Desain
User sulit/sedikit membuat kesalahan dalam menjalankan proses
Gunakan constraints.
◦ menu selection daripada form fill-in
◦ choosing a date from a calendar daripada menginputkannya
Beri validasi input.
Check terlebih dahulu sebelum menjalankan action utama . Misal gunakan
“save” terlebih dahulu sebelum “exit prompt”.
Beri feedback untuk errors termasuk juga instruksi sederhana untuk recovery-
nya.
Designing for error
Beberapa strategi untuk mengurangi error problems:
Buat errors dapat dideteksi
◦ feedback on effects of action; evaluation of goal
Kurangi hal-hal yang memungkinkan untuk slips
◦ Sederhanakan dan indicate modes
Kurangi hal-hal yang memungkinkan untuk melakukan kesalahan
◦ Buat system state visible
Kurangi konsekuensi error
◦ Buat actions undo-able
General rules for error prevention
General rules
◦ Berjaga-jaga dari kesalahan sebelum terjadi
◦ Deteksi dan koreksi jika terjadi kesalahan
◦ User mengkoreksi kesalahan menggunakan feedback dan undo
Contoh
◦ capture errors
◦ Selain diberi konfirmasi, buat juga actions undoable
◦ adanya redo oleh user
◦ loss of activation
◦ Jika system gagal dalam menjalankan action, buat hal itu eksplisit
◦ description errors
◦ Dalam icon-based interfaces yakinkan bahwa icons yang dibuat adalah spesifik
Give user sense of control
user adalah satu-satunya pengontrol actions dan bukan computer
Gunakan user’s own language – simple dan non-technical. For
example, CD player v.s. DNS configuration ( “techspeak”).
Sajikan dengan jelas dan ringkas informasi yang diminta oleh user
◦ Hapus atau sembunyikan informasi yang tidak relevan
◦ Beri online help menggunakan context-driven help.
Short term memory/cognitive load
Jangan membuat navigation window management yang rumit dan
kompleks
Gunakan
◦ meaningful mnemonics, icons, dan abbreviations.
◦ recognition over recall.
◦ Ctrl/S
◦ File Save
◦ Icon
Short term memory/cognitive load
Gambarkan input format menggunakan contoh dan beri default.
◦ date format
Jangan meminta user untuk mengingat data dari satu screen ke
screen yang lainnya.
Additional guidelines
Mengetahui “basic interface design guidelines” hanyalah awal dari
“designing a good interface”. Masih ada beberapa guidelines untuk:
Graphical screen design.
◦ General screen layout, legibility and readability (typefaces), icons, colour, data
display and data entry (For example, menus, forms, dialog boxes)
Interface components yang lain:
◦ animations, audio, video
◦ automation
References
Interface Hall of Shame: [Link]
Norman, D. A. (1998). The Design of Everyday Things
Preece, J., Rogers, Y., & Sharp, H. (2002).
Shneiderman, B., & Plaisant, C. (2005). Designing the User Interface: Strategies for Effective
Human-Computer Interaction
Stone, D., Jarrett, C., Woodroffe, M., & Minocha, S. (2005). User Interface Design and Evaluation.