Lecture 3: Human-Computer Interaction: HCI Design (2014)

  • Published on
    28-Jan-2015

  • View
    106

  • Download
    3

Embed Size (px)

DESCRIPTION

This is the third lecture of the HCI bachelor course at the VU University Amsterdam

Transcript

  • 1. Human-Computer Interaction Course 2014: Lecture 3 Lora Aroyo Web & Media Group HCI Design Chapters 5, 9-11, 13-14

2. Human-Computer Interaction Course 2014: Lecture 3 Interaction Design Concepts Design principles Affordance, Constraints, and Mapping Feedback Visibility Conceptual models Other factors: transfer effects cultural associations individual differences Lora Aroyo, Web & Media Group 2 3. Human-Computer Interaction Course 2014: Lecture 3 Four psychological Principles 1. Users See What They Expect to See 2. Users Have Difficulty Focusing on More than One Activity at a Time 3. It Is Easier to Perceive a Structured Layout 4. It Is Easier to Recognize Something than to Recall It Lora Aroyo, Web & Media Group 3 4. Human-Computer Interaction Course 2014: Lecture 3 Principle 1 Users confusions with the UI: consistency exploiting prior knowledgesee what they want to see Lora Aroyo, Web & Media Group 4 people dont read 5. Human-Computer Interaction Course 2014: Lecture 3 Principle 2 Users Have Difficulty Focusing on More Than One Activity at a Time The Cocktail Party Effect Principle of Perceptual Organization Group alike things together Principle of Importance Prominent display for important items Lora Aroyo, Web & Media Group 5 6. Human-Computer Interaction Course 2014: Lecture 3 Principle 3 It Is Easier to Perceive a Structured Layout Law of proximity Law of similarity Law of closure Law of continuity Law of symmetry Lora Aroyo, Web & Media Group 6 7. Human-Computer Interaction Course 2014: Lecture 3 Principle 4 It Is Easier to Recognize Something Than to Recall It Principle of recognition Knowledge in the head & Knowledge in the world Lora Aroyo, Web & Media Group 7 8. Human-Computer Interaction Course 2014: Lecture 3 Principles from Experience: Affordance The Principle of Affordance: It Should Be Obvious How a Control Is Used Lora Aroyo, Web & Media Group 8 9. Human-Computer Interaction Course 2014: Lecture 3 Affordances The perceived and actual fundamental properties of the object that determine how it could possibly be used (Gibson 1977) Some affordances are obvious, some learned Have suggestions or clues about to how to use these properties Can be dependent on the Experience Knowledge Culture of the actor Can make an action easy or difficult Lora Aroyo, Web & Media Group 9 10. Human-Computer Interaction Course 2014: Lecture 3 Affordances of a Teapot? Lora Aroyo, Web & Media Group 10 11. Human-Computer Interaction Course 2014: Lecture 3 Based on slide by Saul Greenberg In graphical, screen-based interfaces: designer has control over perceived affordances display screen pointing device selection buttons keyboard afford touching pointing looking clicking on every pixel of the display Affordances in Screen-based UI Lora Aroyo, Web & Media Group 11 12. Human-Computer Interaction Course 2014: Lecture 3 Constraints Restricting interaction to reduce errors Lora Aroyo, Web & Media Group 12 13. Human-Computer Interaction Course 2014: Lecture 3 Mappings Relationships between controls and their results For devices, appliances natural mappings use constraints and correspondences in the physical world Controls on a stove Controls on a car Radio volume Knob goes left to right to control volume Should also go in and out for front to rear speakers For computer UI design mapping between controls and their actions on the computer Controls on a digital watch Controls on a word processor program Lora Aroyo, Web & Media Group 13 14. Human-Computer Interaction Course 2014: Lecture 3 Slide adapted from Saul Greenberg Mapping Controls to Physical Outcomes back right front left back left front right 24 possibilities, requires: -visible labels -memory arbitrary full mapping back front front back 2 possibilities per side =4 total possibilities paired 15. Human-Computer Interaction Course 2014: Lecture 3 Based on slide by Saul Greenberg Transfer Effects People transfer their expectations from familiar objects to similar new ones positive transfer: previous experience applies to new situation negative transfer: previous experience conflicts with new situation 16. Human-Computer Interaction Course 2014: Lecture 3 Visibility Making it obvious which actions are available Consistency Similar functions are performed in the same way Identical terminology for identical operations Feedback Send information about what is happening back to the user Lora Aroyo, Web & Media Group 16 17. Human-Computer Interaction Course 2014: Lecture 3 Feedback The Principle of Feedback: It Should Be Obvious When a Control Has Been Used Lora Aroyo, Web & Media Group 17 18. Human-Computer Interaction Course 2014: Lecture 3 Feedback and Explanations Lora Aroyo, Web & Media Group 18 19. Human-Computer Interaction Course 2014: Lecture 3 From Bad to Better Lora Aroyo, Web & Media Group 19 20. Human-Computer Interaction Course 2014: Lecture 3 Feedback Lora Aroyo, Web & Media Group 20 21. Human-Computer Interaction Course 2014: Lecture 3 The Principle of Visibility: It Should Be Obvious What a Control Is Used For Visibility (perceived affordance) Lora Aroyo, Web & Media Group 21 22. Human-Computer Interaction Course 2014: Lecture 3 Consistency Uniformity in appearance, placement, and behavior Lora Aroyo, Web & Media Group 22 23. Human-Computer Interaction Course 2014: Lecture 3 Structure & Consistency Lora Aroyo, Web & Media Group 23 24. Human-Computer Interaction Course 2014: Lecture 3 25. Human-Computer Interaction Course 2014: Lecture 3 Cultural Associations Groups of people learn idioms red = danger, green = go But these differ in different places Light switches America: down is off Britain: down is on Faucets America: counter-clockwise is on Britain: counter-clockwise is off Lora Aroyo, Web & Media Group 25 26. Human-Computer Interaction Course 2014: Lecture 3 Metaphors Lora Aroyo, Web & Media Group 26 27. Human-Computer Interaction Course 2014: Lecture 3 Metaphors Lora Aroyo, Web & Media Group 27 Facebook Timeline Bookmark 28. Human-Computer Interaction Course 2014: Lecture 3 Whats Wrong? Mapping wed expect to go off, low, high Feedback when lamp is on, hard to tell from switch position whether its in low or high mode Lora Aroyo, Web & Media Group 28 29. Human-Computer Interaction Course 2014: Lecture 3 Whats Wrong? Lora Aroyo, Web & Media Group 29 30. Human-Computer Interaction Course 2014: Lecture 3 Whats Wrong? CONSISTENCY: Different procedure for setting different intervals of time. FEEDBACK: When timer is at a time under 15 minutes, hard to tell if its actually on or not (silent failure). Lora Aroyo, Web & Media Group 30 31. Human-Computer Interaction Course 2014: Lecture 3 Star Trek TOS: Command Controls Lora Aroyo, Web & Media Group 31 32. Human-Computer Interaction Course 2014: Lecture 3 Design Knowledge Design Principles First Principles of Interactive Design http://www.asktog.com/basics/rstPrinciples.html Design Rules 8 Golden Rules http://www.usask.ca/education/coursework/skaalid/theory/ interface.htm 33. Human-Computer Interaction Course 2014: Lecture 3 DESIGN GUIDELINES & RATIONALE Lora Aroyo, Web & Media Group 33 34. Human-Computer Interaction Course 2014: Lecture 3 Standards ISO 9241: Ergonomic requirements for office work with visual display terminals (VDTs) defines usability as effectiveness, efficiency and satisfaction with which users accomplish tasks ISO 14915: Software ergonomics for multimedia user interfaces guidelines for design of multimedia interfaces ISO 13407: Human-centered design processes for interactive systems management guidance through the development life-cycle ISO/CD 20282: Ease of operation of everyday products four-part standard to ensure products can be used as consumers expect them to Lora Aroyo, Web & Media Group 34 35. Human-Computer Interaction Course 2014: Lecture 3 Guidelines (1/2) For optimizing the user experience abstract guidelines (principles) applicable during early life cycle activities detailed guidelines (style guides) applicable during later life cycle activities http://www.usability.gov/pdfs/guidelines.html Lora Aroyo, Web & Media Group 35 36. Human-Computer Interaction Course 2014: Lecture 3 Guidelines (2/2) Accessibility Page Layout Navigation, Scrolling and Paging, Headings, Titles, and Labels Content Organization Text Appearance Lists Links ScreenBased Controls (Widgets) Graphics, Images, and Multimedia Search Lora Aroyo, Web & Media Group 36 37. Human-Computer Interaction Course 2014: Lecture 3 DESIGN PRINCIPLES Lora Aroyo, Web & Media Group 37 38. Human-Computer Interaction Course 2014: Lecture 3 Keep it Simple Lora Aroyo, Web & Media Group 38 39. Human-Computer Interaction Course 2014: Lecture 3 Lora Aroyo, Web & Media Group 39 40. Human-Computer Interaction Course 2014: Lecture 3 All-in-One Doesnt Work Lora Aroyo, Web & Media Group 40 41. Human-Computer Interaction Course 2014: Lecture 3 Buy a drink with your cell phone 42. Human-Computer Interaction Course 2014: Lecture 3 A Way to Achieve It Lora Aroyo, Web & Media Group 42 43. Human-Computer Interaction Course 2014: Lecture 3 Lora Aroyo, Web & Media Group 43 44. Human-Computer Interaction Course 2014: Lecture 3 Organization of the UI in a meaningful way Lora Aroyo, Web & Media Group 44 45. Human-Computer Interaction Course 2014: Lecture 3 Tolerance Prevent user from making mistakes Prevention Recoverability Forward error recovery - system accepts the error and helps the user to accomplish their goal Backward error recovery undo the effects of the previous interaction Lora Aroyo, Web & Media Group 45 46. Human-Computer Interaction Course 2014: Lecture 3 Lora Aroyo, Web & Media Group 46 47. Human-Computer Interaction Course 2014: Lecture 3 Location on the screen Lora Aroyo, Web & Media Group 47 Mind the typical Ads location Use typical locations 48. Human-Computer Interaction Course 2014: Lecture 3 W3C Accessibility Guidelines W3C Web Content Accessibility Guidelines http://www.w3.org/TR/WAI-WEBCONTENT/ 1. Provide alternatives to auditory and visual content 2. Dont rely on color alone 3. Use markup and style sheets properly 4. Clarify natural language usage abbreviation and foreign text 5. Create tables that transform gracefully 6. New technology pages transform gracefully accessible when newer technologies are not supported Lora Aroyo, Web & Media Group 48 49. Human-Computer Interaction Course 2014: Lecture 3 W3C Accessibility Guidelines 7. Ensure user control of time-sensitive content pausing/stoping of animation, scrolling, etc. 8. Ensure direct accessibility of embedded UI 9. Design for device independence various input devices 10. Use interim solutions (for older browsers to function) 11. Use W3C technologies and guidelines 12. Provide context and orientation information 13. Provide clear navigation mechanisms 14. Ensure that documents are clear and simple Lora Aroyo, Web & Media Group 49 50. Human-Computer Interaction Course 2014: Lecture 3 Style Guides A typical guide includes: description of required interaction styles & user interface controls guidance on when and how to use the various styles or controls illustrations of styles and controls screen templates Lora Aroyo, Web & Media Group 50 51. Human-Computer Interaction Course 2014: Lecture 3 Example Style Guides Apple Interface Guidelines http://developer.apple.com/DOCUMENTATION/UserExperience/ Conceptual/AppleHIGuidelines/ Microsoft Windows XP UI Guidelines http://www.microsoft.com/whdc/Resources/windowsxp/default.mspx IBMs Common User Access http://en.wikipedia.org/wiki/Common_User_Access Motif Style Guide http://www.opengroup.org/motif/motif.data.sheet.htm Sun Microsystems Java Look and Feel http://java.sun.com/products/jlf/ed2/book/HIGTitle.html Lora Aroyo, Web & Media Group 51 52. Human-Computer Interaction Course 2014: Lecture 3 09/06/14Lora Aroyo, Intelligent Information Systems, VU University Amsterdam 53. Human-Computer Interaction Course 2014: Lecture 3 Design Rationale Design rationale is information that explains why a system is the way it is Benefits of design rationale communication throughout life cycle reuse of design knowledge across products enforces design discipline presents arguments for design trade-offs organizes potentially large design space capturing contextual information Process-oriented preserves order of deliberation and decision making Structure-oriented emphasizes post hoc structuring of considered design alternatives Lora Aroyo, Web & Media Group 53 54. Human-Computer Interaction Course 2014: Lecture 3 Read more

Recommended

View more >