Design Guidelines and Models - Lecture 5 - Human-Computer Interaction (1023841ANR)

This lecture forms part of the course Human-Computer Interaction given at the Vrije Universiteit Brussel.

Transcript

1. Human-Computer Interaction Design Guidelines and Models Prof. Beat Signer Department Vrije beatsigner.com Universiteit of Computer Brussel Science Department of Computer Science Vrije Universiteit Brussel beatsigner.com 2 December 2005
2. Design Guidelines ▪ Design guidelines are based on human psychology: how people perceive, learn, reason, remember and convert intentions into action ▪ Over the last 40 years various guidelines and heuristics have been defined and adapted/extended for new interface types October 19, 2026 Beat Signer - Department of Computer Science - bsigner@vub.be 2
3. Eight Golden Rules of Interface Design ▪ Strive for consistency ▪ Seek universal usability ▪ Offer informative feedback ▪ Design dialogues to yield closure ▪ Prevent errors ▪ Permit easy reversal of actions ▪ Keep users in control ▪ Reduce short-term memory load October 19, 2026 Beat Signer - Department of Computer Science - bsigner@vub.be Ben Shneiderman 3
4. Ten Usability Heuristics for UI Design ▪ Visibility of system status ▪ Match between system and real world ▪ User control and freedom ▪ Consistency and standards ▪ Error prevention Jacob Nielsen ▪ Recognition rather than recall ▪ Flexibility and efficiency of use ▪ Aesthetic and minimalistic design ▪ Help users recognise, diagnose and recover from errors ▪ Help and documentation October 19, 2026 Beat Signer - Department of Computer Science - bsigner@vub.be 4
5. Visibility of System Status ▪ Keep users informed about what is going on (system state) feedback after each action (as quickly as possible) ▪ builds up trust ▪ ▪ Users learn about the outcome of previous interaction and can plan the next steps October 19, 2026 Beat Signer - Department of Computer Science - bsigner@vub.be 5
6. Visibility of System Status … ▪ Provide feedback about what action has been done, allowing users to continue with their activity ▪ October 19, 2026 audio, tactile, verbal, visual or a combination of this feedback Beat Signer - Department of Computer Science - bsigner@vub.be 6
7. Match Between System and Real World ▪ Use words and concepts familiar to the users ▪ Follow real-world conventions natural mapping ▪ skeumorphic user interfaces ▪ - e.g. recycle bin icon October 19, 2026 Beat Signer - Department of Computer Science - bsigner@vub.be 7
8. User Control and Freedom ▪ Actions often performed by mistake ▪ need “emergency exit” to leave unwanted actions ▪ Support undo and redo ▪ fosters a sense of freedom ▪ Show clear way to exit current action ▪ October 19, 2026 e.g. cancel button Beat Signer - Department of Computer Science - bsigner@vub.be 8
9. Consistency and Standards ▪ Internal consistency ▪ within a single product ▪ External consistency consistency across products by following standards ▪ e.g. shopping cart feature on e-commerce websites ▪ - Jakob’s Law of Internet User Experience: “People spend most of their time on sites other than yours" ▪ Consistent interfaces are easier to learn and use October 19, 2026 Beat Signer - Department of Computer Science - bsigner@vub.be 9
10. Consistency and Standards … ▪ Place information and controls in consistent locations ▪ based/supports on perceptual patterns/frames ▪ Internal and external keystroke consistency ▪ e.g. CTRL-X and CTRL-V ▪ External consistency of gesture-based interfaces? J. Johnson, Designing with the Mind in Mind October 19, 2026 Beat Signer - Department of Computer Science - bsigner@vub.be 10
11. Error Prevention ▪ Two types of errors slips are unconscious errors caused by inattention ▪ mistakes are conscious errors based on mismatch of user’s mental model ▪ - inaccurate or incomplete information ▪ Design to prevent mistakes ▪ October 19, 2026 provide accurate and easy understandable information Beat Signer - Department of Computer Science - bsigner@vub.be 11
12. Error Prevention … ▪ Design to prevent slips large click targets ▪ put space between targets ▪ warn users of incompleteness ▪ prompt users to confirm actions ▪ e.g. do not place ‘save’ menu entry next to ‘exit’ menu entry ▪ … ▪ ▪ Make risky operations hard to do ‘Delete All’ with confirmation defaulting to ‘Cancel’ ▪ ask confirmation from multiple users ▪ ▪ Prevent permanent errors by supporting undo ▪ Prevent “high-cost” errors first October 19, 2026 Beat Signer - Department of Computer Science - bsigner@vub.be 12
13. Recognition Rather Than Recall ▪ Reduce a user’s memory load by making elements and actions visible ▪ limited short-term or working memory ▪ Seeing/hearing and choosing is easier than to recall and type ▪ Recall ▪ October 19, 2026 reactivating a neural pattern when the original stimulus is absent Beat Signer - Department of Computer Science - bsigner@vub.be 13
14. Recognition Rather Than Recall … ▪ Use pictures where possible to convey functions e.g. toolbar icons ▪ people recognise pictures very quickly ▪ ▪ We also recognise small versions of the pictures ▪ e.g. thumbnails of slides in presentation overview ▪ Provide cues to let users know where they are ▪ e.g. different screen backgrounds when having multiple screens ▪ Simplify authentication ▪ e.g. biometric authentication rather than remembering passwords ▪ Avoid designs that have modes (or provide visible feedback about modes) October 19, 2026 Beat Signer - Department of Computer Science - bsigner@vub.be 14
15. Flexibility and Efficiency of Use ▪ Offer accelerators like keyboard shortcuts and touch gestures ▪ Support personalisation and customisation by tailoring content and functionality October 19, 2026 Beat Signer - Department of Computer Science - bsigner@vub.be 15
16. Aesthetic and Minimalistic Design ▪ Interfaces should not contain irrelevant information focus on the essentials ▪ aim for high signal-to-noise ratio ▪ October 19, 2026 Beat Signer - Department of Computer Science - bsigner@vub.be 16
17. Help Users Recognise/Recover From Errors ▪ Inform users when error occurred (recognise) ▪ clear error messages ▪ Tell users what went wrong (diagnose) ▪ Offer users a solution (recover) shortcut to solution ▪ provide undo function ▪ - operations within an app or more complex transitions (e.g. order in online store) October 19, 2026 Beat Signer - Department of Computer Science - bsigner@vub.be 17
18. Help and Documentation ▪ Ensure that it is easy to search for help ▪ Present contextual help and documentation ▪ focused on the user’s task ▪ List concrete steps to be carried out October 19, 2026 Beat Signer - Department of Computer Science - bsigner@vub.be 18
19. Visibility ▪ Visible functions ensure that a user knows what to do next ▪ voice mail system vs. marble answering machine ▪ Non-visible functions might be harder to use sensor-enabled faucets ▪ sensor-enabled lights ▪ … ▪ October 19, 2026 Beat Signer - Department of Computer Science - bsigner@vub.be 19
20. Simplicity ▪ Balance offered features vs. ease of use (usability) ▪ Do not oversimplify and remove necessary features - “users want complexity” (Don Norman) Complex remote controls “In anything at all, perfection is finally attained not when there is no longer anything to add, but when there is no longer anything to take away.” Antoine de Saint Exupéry October 19, 2026 Beat Signer - Department of Computer Science - bsigner@vub.be 20
21. Mapping ▪ Natural mapping makes it easy to understand which control performs which action ▪ “If a design depends upon labels, it may be faulty. Labels are important and often necessary, but the appropriate use of natural mappings can minimise the need for them. Wherever labels seem necessary, consider another design.” Seat adjustment in a Mercedes-Benz Kitchen stove with natural mapping on the right October 19, 2026 Beat Signer - Department of Computer Science - bsigner@vub.be 21
22. Mapping … ▪ What about an alternative light switch design making use of natural mapping (without labels)? John Rambow, flikr.com October 19, 2026 Beat Signer - Department of Computer Science - bsigner@vub.be 22
23. Gestalt Principles ▪ Law of proximity ▪ items that are closer together appear to be grouped ▪ Law of similarity ▪ similar-looking items appear grouped ▪ Law of Continuity ▪ visually-aligned items are perceived as continuous forms ▪ … October 19, 2026 Beat Signer - Department of Computer Science - bsigner@vub.be 23
24. Information Design ▪ Poor information design can disrupt reading ▪ uncommon or unfamiliar vocabulary - interrupts the reading process, e.g. “Please reauthenticate” vs. “Login again” tiny or fancy fonts ▪ text on noisy background ▪ contrast of text and background ▪ information buried in repetition (noise from text itself) ▪ - e.g. selection list with the following entries • Backlit Keyboard (English) & User’s Guide (English) • Backlit Keyboard (Western Spanish) & User’s Guide • Backlit Keyboard (French) & User’s Guide ▪ centred text - eyes are trained to go back to the same horizontal position ▪ Don’t disrupt reading – support it! October 19, 2026 Beat Signer - Department of Computer Science - bsigner@vub.be 24
25. Guidelines for Using Colours ▪ Use distinctive colours ▪ users can most easily distinguish colours on the colour-perception channels (red-green, yellow-blue and black-white) ▪ Separate strong opponent colours AVOID THIS! October 19, 2026 Beat Signer - Department of Computer Science - bsigner@vub.be 25
26. Guidelines for Using Colours … ▪ Distinguish colours by saturation and brightness as well as hue avoid subtle colour differences ▪ check whether elements are distinguishable in greyscale ▪ ▪ Avoid colour pairs that colour-blind people cannot distinguish ▪ Make use of existing tools for selecting (colourblindfriendly) palettes ▪ October 19, 2026 e.g. https://coolors.co Beat Signer - Department of Computer Science - bsigner@vub.be 26
27. Video: Inattentional Blindness October 19, 2026 Beat Signer - Department of Computer Science - bsigner@vub.be 27
28. Change Blindness October 19, 2026 Beat Signer - Department of Computer Science - bsigner@vub.be 28
29. Change Blindness … October 19, 2026 Beat Signer - Department of Computer Science - bsigner@vub.be 29
30. Video: Change Blindness October 19, 2026 Beat Signer - Department of Computer Science - bsigner@vub.be 30
31. Inattentional/Change Blindness ▪ Our goals strongly focus our attention ▪ Tendency to only perceive and notice things that match our goal “following the scent of information toward the goal” ▪ might miss changes at other parts of the screen ▪ ▪ Our limited peripheral vision might further reduce the things we see on a screen show information where users are already looking at ▪ use visual features/channels that that popout (e.g. blinking) to highlight a change ▪ October 19, 2026 Beat Signer - Department of Computer Science - bsigner@vub.be 31
32. Affordances ▪ Term affordance introduced in 1977 by psychologist James J. Gibson in 'The Theory of Affordances' ▪ defined as all possible actions with an object in an environment independent of an individual's ability to recognise these actions ▪ Don Norman refined the term affordances in the context of human-machine interaction only those possible actions with an object that can be recognised by an individual ▪ an affordance of an object tells us something (gives us a clue) about how to use the object ▪ good interaction design will take affordances and the related discoverability into account ▪ screen-based interfaces offer perceived affordances which are learned conventions ▪ October 19, 2026 Beat Signer - Department of Computer Science - bsigner@vub.be 32
33. Video: The Norman Door October 19, 2026 Beat Signer - Department of Computer Science - bsigner@vub.be 33
34. Fitts’s Law (1954) ▪ Fitts’s Law predicts that the time to point at an object using a device (e.g. mouse) is a function of the distance from the target object and the target object’s size 𝑇 = 𝑘 log 2 𝐷Τ𝑆 + 1.0 T = time to move the pointer to the target D = distance between the pointer and the target S = size of the target k = constant Paul Fitts ▪ The further away and the smaller the object, the longer the time to locate it and point to it October 19, 2026 Beat Signer - Department of Computer Science - bsigner@vub.be 34
35. Fitts’s Law (1954) … ▪ Make click targets (e.g. buttons, menu items, links) large enough that they are quick and easy to hit ▪ Checkboxes, radio buttons and toggle switches should also accept clicks on their label to increase the area ▪ Place important targets near the edge of the screen ▪ “infinite target size“ along screen edges (if not other screen connected to that edge) ▪ On smartphones consider using menus that people can easily reach with their thumb while holding the phone October 19, 2026 Beat Signer - Department of Computer Science - bsigner@vub.be 35
36. Design-Pattern Guidelines: Study Guide ▪ Additional specific design guidelines for specific interface patterns based on the Ten Usability Heuristics for User Interface Design input controls ▪ forms and wizards ▪ tooltips and dialogues ▪ icons and indicators ▪ menu design ▪ navigation elements ▪ search ▪ ▪ October 19, 2026 https://www.nngroup.com/articles/design-pattern-guidelines/ Beat Signer - Department of Computer Science - bsigner@vub.be 36
37. Material Design ▪ Design language developed by Google Android-oriented ▪ grid-based layouts, responsive animations, depth effects, … ▪ ▪ October 19, 2026 https://m3.material.io/ Beat Signer - Department of Computer Science - bsigner@vub.be 37
38. Apple Human Interface Guidelines ▪ Design guidance for common actions and experiences entering data ▪ file management ▪ feedback ▪ searching ▪ undo and redo ▪ ▪ October 19, 2026 https://developer.apple.com/ design/human-interfaceguidelines/ Beat Signer - Department of Computer Science - bsigner@vub.be 38
39. Exercise 4 ▪ Mid-Fidelity Prototyping (FIGMA) and Design Validation October 19, 2026 Beat Signer - Department of Computer Science - bsigner@vub.be 39
40. References ▪ Designing the User Interface: Strategies for Effective Human-Computer Interaction, Ben Shneiderman et al., Pearson (6th edition), April 2016, ISBN-13: 978-0134380384 ▪ Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Guidelines, Jeff Johnson, Morgan Kaufmann (3rd edition), November 2020, 978-0128182024 ▪ The Design of Everyday Things, Don Norman, Basic Books (revised and expanded edition), November 2013, ISBN-13: 978-0465050659 October 19, 2026 Beat Signer - Department of Computer Science - bsigner@vub.be 40
41. References ... ▪ Eight Golden Rules of Interface Design ▪ https://www.cs.umd.edu/users/ben/goldenrules.html ▪ Ten Usability Heuristics for User Interface Design ▪ https://www.nngroup.com/articles/ten-usability-heuristics/ ▪ Visibility of System Status ▪ https://www.youtube.com/watch?v=cTtc90jCULU ▪ Match Between System and Real World ▪ https://www.youtube.com/watch?v=0TAt9Pln51g ▪ User Control and Freedom ▪ October 19, 2026 https://www.youtube.com/watch?v=MXuk-fdbr0A Beat Signer - Department of Computer Science - bsigner@vub.be 41
42. References ... ▪ Consistency and Standards ▪ https://www.youtube.com/watch?v=Ibndy9KLOSQ&t=1s ▪ Error Prevention ▪ https://www.youtube.com/watch?v=imS9s1DUY-I ▪ Recognition Rather Than Recall ▪ https://www.youtube.com/watch?v=imS9s1DUY-I ▪ Flexibility and Efficiency of Use ▪ https://www.youtube.com/watch?v=LoTdRTBB8BQ ▪ Aesthetic and Minimalistic Design ▪ October 19, 2026 https://www.youtube.com/watch?v=ZgbRmeWDgd0 Beat Signer - Department of Computer Science - bsigner@vub.be 42
43. References ... ▪ Help Users Recognise, Diagnose and Recover From Errors ▪ https://www.youtube.com/watch?v=cCun-ReLTFI ▪ Help and Documentation ▪ https://www.youtube.com/watch?v=iIQVRzatb50 ▪ The Norman Door ▪ https://www.youtube.com/watch?v=yY96hTb8WgI ▪ Colour Palette Generator ▪ https://coolors.co ▪ Material Design ▪ October 19, 2026 https://m3.material.io Beat Signer - Department of Computer Science - bsigner@vub.be 43
44. References ... ▪ Apple Human Interface Guidelines ▪ https://developer.apple.com/design/human-interface-guidelines/ ▪ Inattentional Blindness ▪ https://www.youtube.com/watch?v=IGQmdoK_ZfY ▪ Change Blindness ▪ October 19, 2026 https://www.youtube.com/watch?v=VkrrVozZR2c Beat Signer - Department of Computer Science - bsigner@vub.be 44
45. Next Lecture Evaluation Methods 2 December 2005