2 December 2005 Human-Computer Interaction Design Guidelines and Models Prof. Beat Signer Department of Computer Science Vrije Universiteit Brussel beatsigner.com Department of Computer Science Vrije Universiteit Brussel beatsigner.com

Beat Signer - Department of Computer Science - [email protected] 2 October 21, 2024 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

Beat Signer - Department of Computer Science - [email protected] 3 October 21, 2024 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 Ben Shneiderman

Beat Signer - Department of Computer Science - [email protected] 4 October 21, 2024 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 ▪ Recognition rather than recall ▪ Flexibility and efficiency of use ▪ Aesthetic and minimalistic design ▪ Help users recognise, diagnose and recover from errors ▪ Help and documentation Jacob Nielsen

Beat Signer - Department of Computer Science - [email protected] 5 October 21, 2024 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

Beat Signer - Department of Computer Science - [email protected] 6 October 21, 2024 Visibility of System Status … ▪ Provide feedback about what action has been done, allowing users to continue with their activity ▪ audio, tactile, verbal, visual or a combination of this feedback

Beat Signer - Department of Computer Science - [email protected] 7 October 21, 2024 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

Beat Signer - Department of Computer Science - [email protected] 8 October 21, 2024 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 ▪ e.g.cancel button

Beat Signer - Department of Computer Science - [email protected] 9 October 21, 2024 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

Beat Signer - Department of Computer Science - [email protected] 10 October 21, 2024 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

Beat Signer - Department of Computer Science - [email protected] 11 October 21, 2024 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 ▪ provide accurate and easy understandable information

Beat Signer - Department of Computer Science - [email protected] 12 October 21, 2024 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

Beat Signer - Department of Computer Science - [email protected] 13 October 21, 2024 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 ▪ reactivating a neural pattern when the original stimulus is absent

Beat Signer - Department of Computer Science - [email protected] 14 October 21, 2024 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)

Beat Signer - Department of Computer Science - [email protected] 15 October 21, 2024 Flexibility and Efficiency of Use ▪ Offer accelerators like keyboard shortcuts and touch gestures ▪ Support personalisation and customisation by tailoring content and functionality

Beat Signer - Department of Computer Science - [email protected] 16 October 21, 2024 Aesthetic and Minimalistic Design ▪ Interfaces should not contain irrelevant information ▪ focus on the essentials ▪ aim for high signal-to-noise ratio

Beat Signer - Department of Computer Science - [email protected] 17 October 21, 2024 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)

Beat Signer - Department of Computer Science - [email protected] 18 October 21, 2024 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

Beat Signer - Department of Computer Science - [email protected] 19 October 21, 2024 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 ▪ …

Beat Signer - Department of Computer Science - [email protected] 20 October 21, 2024 Simplicity ▪ Balance offered features vs.ease of use (usability) ▪ Do not oversimplify and re- move necessary features - “users want complexity” (Don Norman) “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 Complex remote controls

Beat Signer - Department of Computer Science - [email protected] 21 October 21, 2024 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

Beat Signer - Department of Computer Science - [email protected] 22 October 21, 2024 Mapping … ▪ What about an alternative light switch design making use of natural mapping (without labels)? John Rambow, flikr.com

Beat Signer - Department of Computer Science - [email protected] 23 October 21, 2024 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 ▪ …

Beat Signer - Department of Computer Science - [email protected] 24 October 21, 2024 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!

Beat Signer - Department of Computer Science - [email protected] 25 October 21, 2024 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!

Beat Signer - Department of Computer Science - [email protected] 26 October 21, 2024 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 (colourblind- friendly) palettes ▪ e.g. https://coolors.co

Beat Signer - Department of Computer Science - [email protected] 27 October 21, 2024 Video: Inattentional Blindness

Beat Signer - Department of Computer Science - [email protected] 28 October 21, 2024 Change Blindness

Beat Signer - Department of Computer Science - [email protected] 29 October 21, 2024 Change Blindness …

Beat Signer - Department of Computer Science - [email protected] 30 October 21, 2024 Video: Change Blindness

Beat Signer - Department of Computer Science - [email protected] 31 October 21, 2024 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

Beat Signer - Department of Computer Science - [email protected] 32 October 21, 2024 Affordances ▪ Term affordance introduced in 1977 by psychologist James J.Gibson in the '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

Beat Signer - Department of Computer Science - [email protected] 33 October 21, 2024 Video: The Norman Door

Beat Signer - Department of Computer Science - [email protected] 34 October 21, 2024 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 𝑇 = 𝑘 log2 Τ 𝐷 𝑆 + 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 ▪ The further away and the smaller the object, the longer the time to locate it and point to it Paul Fitts

Beat Signer - Department of Computer Science - [email protected] 35 October 21, 2024 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 click 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

Beat Signer - Department of Computer Science - [email protected] 36 October 21, 2024 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 ▪ https://www.nngroup.com/articles/design-pattern-guidelines/

Beat Signer - Department of Computer Science - [email protected] 37 October 21, 2024 Material Design ▪ Design language developed by Google ▪ Android-oriented ▪ grid-based layouts, responsive animations, depth effects, … ▪ https://m3.material.io/

Beat Signer - Department of Computer Science - [email protected] 38 October 21, 2024 Apple Human Interface Guidelines ▪ Design guidance for common actions and experiences ▪ entering data ▪ file management ▪ feedback ▪ searching ▪ undo and redo ▪ https://developer.apple.com/ design/human-interface- guidelines/

Beat Signer - Department of Computer Science - [email protected] 39 October 21, 2024 Exercise 4 ▪ Mid-Fidelity Prototyping (FIGMA) and Design Validation

Beat Signer - Department of Computer Science - [email protected] 40 October 21, 2024 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

Beat Signer - Department of Computer Science - [email protected] 41 October 21, 2024 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 ▪ https://www.youtube.com/watch?v=MXuk-fdbr0A

Beat Signer - Department of Computer Science - [email protected] 42 October 21, 2024 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 ▪ https://www.youtube.com/watch?v=ZgbRmeWDgd0

Beat Signer - Department of Computer Science - [email protected] 43 October 21, 2024 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 ▪ https://m3.material.io

Beat Signer - Department of Computer Science - [email protected] 44 October 21, 2024 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 ▪ https://www.youtube.com/watch?v=VkrrVozZR2c

2 December 2005 Next Lecture Evaluation Methods