IT110 Design Principles PDF

IT110 – Introduction to Human-Computer Interaction 1st Semester, AY 2024-2025 Design Theory, Principles and Guidelines Mary Joy P. Canon Slides from Human Computer Course Professor Interaction by Luigi De Russis Hall of Fame or Sh...

IT110 – Introduction to Human-Computer Interaction 1st Semester, AY 2024-2025 Design Theory, Principles and Guidelines Mary Joy P. Canon Slides from Human Computer Course Professor Interaction by Luigi De Russis Hall of Fame or Shame? 3 Human Computer Interaction The Four Pillars of Design Ben Shneiderman & Catherine Plaisant, Designing the User Interface: Strategies for Effective Human-Computer Interaction 4 Human Computer Interaction Goals Generating design solutions Guidelines Principles Theories Evaluating generated designs Expert reviews and heuristics Usability testing Controlled experiments 5 Human Computer Interaction  Generating Design Solutions Specific Practical, cases operational ▪ Guidelines: Low-level focused advice about good formulation practices and cautions against dangers. Concrete ▪ Principles: Mid-level strategies or rules to analyze and compare design alternatives. ▪ Theories: High-level widely applicable frameworks to Applicable domains draw on during design and evaluation, as well as to support communication and teaching. Abstract, General theoretical 6 © 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Human Computer Interaction Design Theories Theoretical frameworks enabling foundational research The “Why” 7 Human Computer Interaction  Design Theories Types of theories Human capacity ▪ Descriptive ▪ Motor task o UI elements, terminology, semantics o Skill in pointing, clicking, … ▪ Explanatory movements o Sequences of events with causal relationships ▪ Perceptual ▪ Prescriptive o Sensory inputs o Guidelines for designers to make decisions ▪ Cognitive ▪ Predictive o Problem-solving, short-/long-term o Comparison of design alternatives memory based on performance figures 8 © 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Human Computer Interaction Abowd and Beale Model (Explanatory) 9 Human Computer Interaction Foley and van Dam Four-level Approach (Descriptive) ▪ Conceptual level o User’s mental model of the interactive system ▪ Semantic level o Describes the meanings conveyed by the user's command input and by the computer’s output display ▪ Syntactic level o Defines how the units (words) that convey semantics are assembled into a complete sentence that instructs the computer to perform a certain task ▪ Lexical level o Deals with device dependencies and with the precise mechanisms by which a user specifies the syntax 10 Human Computer Interaction Consistency Theories (Prescriptive) ▪ Consistency of nouns (objects) and verbs (actions) o Reduces learning time and errors ▪ Consistency of o Color o Layout o Icons o Fonts and Font sizes o Button sizes o … ▪ Inconsistencies might be used (sparingly!) for drawing attention 11 Human Computer Interaction Design Principles The important aspects that we need to consider when creating a design. The “What” 12 Human Computer Interaction  Design Principles ▪ More practical than Theories ▪ More fundamental, widely applicable, and enduring than Guidelines ▪ Fundamental principles (→ from Needfinding) o Determine user’s skill levels o Identify the tasks ▪ 5 primary interaction styles ▪ 8 golden rules of interface design ▪ Prevent errors ▪ Automation and human control 27 © 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Human Computer Interaction  Interaction Styles ▪ Direct manipulation ▪ Menu selection ▪ Form fill-in ▪ Command language ▪ Natural language 28 © 2017 Pearson Education, Inc., Hoboken, NJ. All rights reserved. Human Computer Interaction Norman’s Principles from Action Models Principles of good design User failures can occur ▪ State and the action alternatives should be ▪ Users can form an inadequate goal visible ▪ Might not find the correct interface object ▪ Should be a good conceptual model with a because of an incomprehensible label or consistent system image icon ▪ Interface should include good mappings ▪ May not know how to specify or execute a that reveal the relationships between desired action stages ▪ May receive inappropriate or misleading ▪ User should receive continuous feedback feedback E.g. Download progress bar 29 Human Computer Interaction The 8 Golden Rules of Interface Design ▪ Strive for consistency ▪ Cater to universal usability ▪ Offer informative feedback ▪ Design dialogs to yield closure ▪ Prevent errors ▪ Permit easy reversal of actions ▪ Keep users in control ▪ Reduce short-term memory load 30 Human Computer Interaction The 8 Golden Rules of Interface Design ▪ Strive for consistency ▪ Similar situations should lead to ▪ Cater to universal usability similar sequences of actions ▪ Offer informative feedback ▪ Same terminology in prompts, ▪ Design dialogs to yield closure menus, help ▪ Prevent errors ▪ Color, layout, capitalization, fonts, … ▪ Permit easy reversal of actions ▪ Exceptions should be ▪ Keep users in control comprehensive and limited ▪ Reduce short-term memory load o E.g., delete, password echo 31 Human Computer Interaction Consistency – Action Items Maintain consistency within a single product or a family of products (internal consistency). Follow established industry conventions (external consistency). 32 Human Computer Interaction Internal Consistency Microsoft is a great example of Internal Consistency between their 365 Office Apps. Do not confuse your user — keep words and actions consistent. Use “The Principle of Least Surprise”. Consistency with mental models https://twitter.com/grmcall/status/1182586857814659073?s=20 36 Human Computer Interaction Consistency of Interpretation ▪ Which one is the selected one? o Color codes are ambiguous o No further internal clues o No external clues ▪ Does it represent the current status? ▪ Does it represent the status that we want to achieve? 37 Human Computer Interaction Inconsistency for Drawing Attention The border color and button text color in the “danger zone” are deliberately different than the rest of the page 38 Human Computer Interaction The 8 Golden Rules of Interface Design ▪ Strive for consistency ▪ Users with different needs: let the ▪ Cater to universal usability interface adapt, let content be transformed ▪ Offer informative feedback ▪ Design dialogs to yield closure ▪ Novices vs. experts. Young vs elderly. Web vs. mobile. Users with ▪ Prevent errors disabilities (→Accessibility) ▪ Permit easy reversal of actions ▪ Responsive design ▪ Keep users in control ▪ International (and cultural) ▪ Reduce short-term memory load variations 39 Human Computer Interaction Cater to Universal Usability Action Items: Provide accelerators like keyboard shortcuts and touch gestures where possible. Tailor content and functionality for individual users. Enable customization so users can make selections about how to use the product. Automate frequently used operations. The 8 Golden Rules of Interface Design ▪ Strive for consistency ▪ For *every* human action, there ▪ Cater to universal usability should be an interface feedback ▪ Offer informative feedback ▪ Frequent and minor actions: light ▪ Design dialogs to yield closure feedback ▪ Prevent errors ▪ Infrequent and major actions: stronger feedback ▪ Permit easy reversal of actions ▪ Visual presentation of objects helps ▪ Keep users in control showing the changes (e.g., dim, ▪ Reduce short-term memory load highlight, grey out, …) 41 Human Computer Interaction Offer Informative Feedback design should always keep users informed about what is going on When users know the current system status, they learn the outcome of their prior interactions and determine next steps Informative Feedback – Action Items ▪ No action with consequences should be taken without informing the users. ▪ Present feedback to the user as quickly as possible (preferably immediately). ▪ Feedback should be relevant, comprehensible, and meaningful. ▪ Communicate with the user clearly to build trust Informative Feedback - Examples Inf0rmative Feedback - Examples Example Try to install VS Code for all users on a computer (install to Program Files rather than user’s folders) 46 Human Computer Interaction The 8 Golden Rules of Interface Design ▪ Strive for consistency ▪ Every sequence of actions should ▪ Cater to universal usability have o Beginning ▪ Offer informative feedback o Development ▪ Design dialogs to yield closure o End ▪ Prevent errors ▪ Provide clear feedback at end ▪ Permit easy reversal of actions o Satisfy users o ‘Delete’ current task from their ▪ Keep users in control working memory, prepare for the ▪ Reduce short-term memory load next 47 Human Computer Interaction Design Dialogs to Yield Closure – Action Items ▪ Simplify language to ensure users can understand terms and words without having to look up definitions. ▪ Apply user research to uncover your users’ familiarity with terminology and technology. ▪ Supply the users with well- defined options for the next step. Dialogue The 8 Golden Rules of Interface Design ▪ Strive for consistency ▪ Avoid the possibility of making errors ▪ Cater to universal usability ▪ Disable menu items, buttons, links, … that are not applicable ▪ Offer informative feedback ▪ Design dialogs to yield closure ▪ Prevent entering illegal characters ▪ Offer simple, constructive and specific ▪ Prevent errors instructions for recovery ▪ Permit easy reversal of actions o Repair only the faulty part ▪ Keep users in control ▪ Errors should not alter application state ▪ Reduce short-term memory load (or make it easy to restore) 50 Human Computer Interaction Prevent Errors – Action Items ▪ Prioritize: Prevent bigger errors first, then little frustrations. ▪ Avoid slips by providing helpful constraints and good defaults. ▪ Prevent mistakes by removing memory burdens, supporting undo, and warning your users. ▪ Offer solutions for problems. Error Prevention 52 Human Computer Interaction The 8 Golden Rules of Interface Design ▪ Strive for consistency ▪ Actions should be reversible (at the ▪ Cater to universal usability cost of extra development effort) o Relieves anxiety ▪ Offer informative feedback o Encourages exploration ▪ Design dialogs to yield closure ▪ Different levels of reversibility ▪ Prevent errors o A single action ▪ Permit easy reversal of actions o A data-entry task o A complete group of actions ▪ Keep users in control ▪ Reduce short-term memory load 55 Human Computer Interaction Permit Reversal of Actions – Action Items ▪ Support Undo and Redo. ▪ Show a clear way to exit the current interaction, like a Cancel button. ▪ Make sure it doesn’t interfere with workflow. ▪ Single-action undo and action history. The 8 Golden Rules of Interface Design ▪ Strive for consistency ▪ The interface should always respond ▪ Cater to universal usability to user actions ▪ Offer informative feedback ▪ Minimize the tedious and lengthy ▪ Design dialogs to yield closure tasks ▪ Prevent errors ▪ Avoid surprises or changes in familiar behavior ▪ Permit easy reversal of actions ▪ Keep users in control ▪ Reduce short-term memory load 57 Human Computer Interaction Keep users in control Action Items ▪ Keep the content and visual design of UI focus on the essentials. ▪ Don’t let unnecessary elements distract users from the information they really need. ▪ Prioritize the content and features to support primary goals. ▪ Allow quitting or cancelling actions Example Simplify interfaces by removing unnecessary elements or content that does not support user tasks. 59 Human Computer Interaction Example Give users the power to choose whether to continue running the program or exit from it. The 8 Golden Rules of Interface Design ▪ Strive for consistency ▪ Rule of thumb: o People can remember 7±2 chunks ▪ Cater to universal usability of information ▪ Offer informative feedback ▪ Information on a screen should not ▪ Design dialogs to yield closure be needed (remembered) in the next screen ▪ Prevent errors ▪ No entry of phone numbers (collect ▪ Permit easy reversal of actions from addressbook), show website ▪ Keep users in control location, fit long forms in a single ▪ Reduce short-term memory load page, … 61 Human Computer Interaction Discussion – An Exception? 64 Human Computer Interaction Exceptions… sometimes entering is better than selecting 65 Human Computer Interaction Activity 1 –Application of Shneiderman’s 8 Golden Rules in Interface Design For each design rule in Shneiderman’s golden rules in interface design, choose a particular task/s and define specific action items that you will be implementing on your proposed HCI solution in accordance/compliance with the particular rule. Design Principles by Benyon (I) (adapted from Norman, Nielsen and others) ▪ Learnability – helping people access, learn and remember the system o Visibility – ensure that things are visible, so users can see what functions are available and what the system is currently doing o Consistency (→above) o Familiarity – use language and symbols that the intended audience will be familiar with o Affordance – design things so it is clear what they are for (e.g., buttons should be pushed). Maps the (perceived) properties of the objects with how they can be used 67 Human Computer Interaction Affordance 68 Human Computer Interaction  69 Human Computer Interaction Design Principles by Benyon (II) (adapted from Norman, Nielsen and others) ▪ Effectiveness – giving users the sense of being in control, knowing what to do and how to do it o Navigation – support people in moving around the different sections: maps, directional signs, information signs o Control – who is in control for the next interaction? Clear and logical mapping between controls and their effect. Relationships with the “side effects” in the real world o Feedback (→feedback above) 70 Human Computer Interaction Example: Navigation and Control? 71 Human Computer Interaction Design Principles by Benyon (III) (adapted from Norman, Nielsen and others) ▪ Safety and Security o Recovery (→error recovery) o Constraints (→prevent errors) ▪ Accommodation – offer an interaction way that suits the users o Flexibility (→universal usability) o Style – stylish, attractive, nice-looking o Conviviality – polite, friendly, pleasant. No abrupt interruptions 72 Human Computer Interaction Norman’s Seven Principles for Transforming Difficult Tasks into Simple Ones ▪ Use both knowledge in the world and knowledge in the head ▪ Simplify the structure of tasks ▪ Make things visible ▪ Get the mappings right ▪ Exploit the power of constraints, both natural and artificial ▪ Design for error ▪ When all else fails, standardize D. Norman, The Design of Everyday Things 73 Human Computer Interaction  https://asktog.com/atc/principles-of- interaction-design/ First Principles of Interaction Design (Bruce Tognazzini, 2014) Aesthetics Anticipation Autonomy Color Consistency Defaults Discoverability Efficiency of the User Explorable Interfaces Fitts's Law Human-Interface Objects Latency Reduction Learnability Metaphors Protect Users' Work Readability Simplicity State: Track it Visible Interfaces 74 Human Computer Interaction Design Guidelines Shared language to promote consistency among multiple designers in terminology usage, appearance, and action sequences The “How” 75 Human Computer Interaction Design Guidelines ▪ Concrete suggestions about “How” the Principles may be satisfied ▪ Often rule-based ▪ Based on best practices ▪ Encapsulate experience of expert designers ▪ Sometimes blessed as «standards» ▪ But: o May be too specific and hard to apply to your situation o Difficult to develop a general-purpose guideline 76 Human Computer Interaction  Web Style Guide, 4th Edition: Foundations of User Experience Design (2016) https://webstyleguide.com/ Web Style Guide 77 Human Computer Interaction  https://www.w3.org/WAI/standards- Web Content Accessibility guidelines/wcag/ Guidelines (WCAG) 78 Human Computer Interaction  U.S. General Service Administration https://digital.gov/resources/mobile-user- U.S. Government Mobile User experience-guidelines/ Experience Guidelines Previously (2016 - 2021) 79 Human Computer Interaction  https://design-system.service.gov.uk U.K. Government Design System 80 Human Computer Interaction  https://designers.italia.it/linee-guida/ Italian Government Guidelines and Design System 81 Human Computer Interaction  https://developer.apple.com/design/human- interface-guidelines/ Apple HIG 82 Human Computer Interaction  https://www.microsoft.com/design/fluent/ Microsoft «Fluent» Design 83 Human Computer Interaction  https://material.io/ Google Material Design 84 Human Computer Interaction Guidelines for Human-AI Interaction ▪ By Microsoft Research: o https://www.microsoft.com/en- us/research/project/gui delines-for-human-ai- interaction/ o https://www.microsoft.com/en- us/haxtoolkit/ai- guidelines/ 85 Human Computer Interaction Guidelines for Human-AI Interaction: Examples 86 Human Computer Interaction Guidelines for Augmented Reality ▪ By Apple Design: https://developer.apple.c om/design/human- interface- guidelines/technologies/a ugmented-reality/ 87 Human Computer Interaction References and Acknowledgments ▪ Ben Shneiderman, Catherine Plaisant, Maxine S. Cohen, Steven M. Jacobs, and Niklas Elmqvist, Designing the User Interface: Strategies for Effective Human- Computer Interaction o Chapter 3: Guidelines, Principles, and Theories ▪ David Benyon: Designing Interactive Systems, Pearson, 2014 o Section 4.5: Design Principles ▪ COGS120/CSE170: Human-Computer Interaction Design, videos by Scott Klemmer, https://www.youtube.com/playlist?list=PLLssT5z_DsK_nusHL_Mjt87THSTlgrsyJ ▪ Thanks to Fulvio Corno, past teacher of the course, for his work on some of these slides 88 Human Computer Interaction License ▪ These slides are distributed under a Creative Commons license “Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)” ▪ You are free to: o Share — copy and redistribute the material in any medium or format o Adapt — remix, transform, and build upon the material o The licensor cannot revoke these freedoms as long as you follow the license terms. ▪ Under the following terms: o Attribution — You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use. o NonCommercial — You may not use the material for commercial purposes. o ShareAlike — If you remix, transform, or build upon the material, you must distribute your contributions under the same license as the original. o No additional restrictions — You may not apply legal terms or technological measures that legally restrict others from doing anything the license permits. ▪ https://creativecommons.org/licenses/by-nc-sa/4.0/ 89 Human Computer Interaction Activity2 (10/15/24) – Design Guidelines for the Chosen Solution (Platform and Domain) Look for one or more design guidelines that can form as your basis in developing your proposed solution. These design guidelines will help you on how you are going to implement the design principles and actions you have identified last meeting.