1 / 119

Friday, January 27

Friday, January 27. Psychology and HCI Project Groups and Ideas Loren Terveen. Agenda. Foundations of User Interfaces. Field of Human-Computer Interaction (HCI) Psychology Computer Science Ergonomics other disciplines Focus: Design Computer Systems for Humans. Human Capabilities.

sera
Télécharger la présentation

Friday, January 27

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Friday, January 27 Psychology and HCI Project Groups and Ideas Loren Terveen

  2. Agenda SEng 5115

  3. Foundations of User Interfaces • Field of Human-Computer Interaction (HCI) • Psychology • Computer Science • Ergonomics • other disciplines • Focus: Design Computer Systemsfor Humans SEng 5115

  4. Human Capabilities • Humans are very good at: • recognizing (images, voices, etc.) • associative memory • explaining phenomena • Humans are very limited in: • short-term memory • complex, multi-layered tasks • perfection SEng 5115

  5. Quick review of human capabilities • Goal: use this knowledge to guide design of interfaces that extend people’s abilities and compensate for weaknesses SEng 5115

  6. Human Cognition • Attention • Perception and recognition • Memory • Learning • Problem solving and reasoning SEng 5115

  7. Attention SEng 5115

  8. Attention – Design Implications • Make information relevant to the current tasksalient • Graphical techniques – layout, ordering, organization, underlining, color, animation – can be used to achieve this goal • But don’t visually clutter the interface: plain interfaces can be easier to use SEng 5115

  9. Attention - Example • Consider two interfaces that support web search; evaluate both from the perspective of being able to focus on where to enter your query SEng 5115

  10. SEng 5115

  11. SEng 5115

  12. Two more examples SEng 5115

  13. SEng 5115

  14. SEng 5115

  15. Perception SEng 5115

  16. Perception – Design Implications • Icons should be distinguishable • Sounds should be clearly audible and distinguishable • Text should be legible and distinguishable from the background SEng 5115

  17. Perception - Example • My goal is to read new messages in an online forum SEng 5115

  18. Icons: are their meanings clear? Attention: easy to focus on the right stuff? SEng 5115

  19. Memory • Short-term vs. long-term • What people are good and bad at remembering SEng 5115

  20. Memory – Design Implications • Don’t make users remember complicated procedures • Design interfaces that promote recognition over recall • Give users resources to help them visually encode information (colors, icons, time stamps, etc.)‏ SEng 5115

  21. Memory: Promote recognition over recall SEng 5115

  22. More than 7 +- 2 items in menu – bad? What about a voice menu? SEng 5115

  23. Visual representation of contacts – recognition, not recall Spatial organization of information Pictures SEng 5115

  24. SEng 5115

  25. Learning SEng 5115

  26. Learning – Design Implications • Create interfaces that encourage exploration • Easy to try out and undo actions • Design interfaces that constrain and guide users to select the right action • Provide multiple, linked representations SEng 5115

  27. Examples • Graphical editors • Simulation environments SEng 5115

  28. Can undo picture editing action Can learn about actions that are not available in current context SEng 5115

  29. SEng 5115

  30. Don Norman – Design of Everyday Things • Based on knowledge of human capabilities, Norman offers principles for creating usable designs SEng 5115

  31. Seven Stages of Action Goals Evaluation of the interpretations Intention to act Interpreting the perception Sequence of actions Execution of the action sequence Perceiving the state of the world The World SEng 5115

  32. But things can go wrong at any of these stages Notably… Gulf of Execution Gulf of Evaluation SEng 5115

  33. Gulfs of Execution & Evaluation Goals Evaluation of the interpretations Intention to act GULF OF EXECUTION Interpreting the perception GULF OF EVALUATION Sequence of actions Execution of the action sequence Perceiving the state of the world The World SEng 5115

  34. The Gulf of Execution • Does the system provide actions that correspond to the user’s intentions? • The difference between intentions and allowable actions is the Gulf of Execution SEng 5115

  35. The Gulf of Evaluation • Does the system provide a physical representation that can be readily perceived and interpreted in terms of the user’s intentions and expectations? • The Gulf of Evaluation reflects the amount of effort that the person must exert to interpret the physical state of the system and determine how well the intentions have been met. SEng 5115

  36. The Seven Stages as Design Aids Ask yourself how easily can the user: Determine the function of the system? Tell if the system is in the desired state? Tell what actions are possible? Determine a mapping from system state to interpretation Determine a mapping from intention to physical action? Perform the action? Tell what state the system is in? SEng 5115

  37. Determine the function of the system? “The Big Picture” http://www.peachpit.com/articles/article.aspx?p=1216150

  38. … principles for good design • Conceptual models • Visibility and affordances • Mappings • Feedback  Causality • Constraints • Knowledge in the world • Standardization • Designing for error SEng 5115

  39. Conceptual Model • People are explanatory creatures – we will come up with models of how things work • Rule 1 of interface design – an interface is well designed when it behaves exactly as users think it will • Put it another way: the designer’s job is to make it easy for users to create the right model of the system SEng 5115

  40. Design Model User Model System Image Designer and user models Goal: user model and design model should be identical Communication from designer to user is via the system image So system image must lead user to acquire a user model equal to the design model Designer User System SEng 5115

  41. So how does a designer help users acquire the right model? • Visibility and Affordances • Mappings • Feedback  Causality • Constraints • Knowledge in the World • Standardization • Designing for Error SEng 5115

  42. Visibility SEng 5115

  43. How do I pump the gas?

  44. “Push To Start”

  45. Affordances SEng 5115

  46. Affordances in GUIs? • Does a button icon afford clicking? Does a scrollbar afford scrolling? • Maybe… but what does the click mean? • Meaning is arbitrary, and is assigned by designers • Norman: “‘I put an affordance there… I wonder if the object affords clicking…’ affordances this, affordances that. And no data, just opinion. Yikes! What had I unleashed upon the world?” • Bottom line – affordances aren’t as useful in GUIs as in physical design SEng 5115

  47. Mappings SEng 5115

  48. Mappings Examples • Cup lids • Stove: which dial controls which burner? • Light / Ceiling Fan

  49. Which lid is the right size? SEng 5115

  50. Which lid is the right size? SEng 5115

More Related