1 / 77

Midterm Review Packet Stolen Borrowed from Prof. Marti Hearst

Midterm Review Packet Stolen Borrowed from Prof. Marti Hearst. HFID Spring 2005. Affordances. The perceived properties of an object that determine how it can be used. Knobs are for turning. Buttons are for pushing. Some affordances are obvious, some learned Glass can be seen through.

james-french
Télécharger la présentation

Midterm Review Packet Stolen Borrowed from Prof. Marti Hearst

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. Midterm Review PacketStolen Borrowed from Prof. Marti Hearst HFID Spring 2005

  2. Affordances • The perceived properties of an object that determine how it can be used. • Knobs are for turning. • Buttons are for pushing. • Some affordances are obvious, some learned • Glass can be seen through. • Glass breaks easily. • Sometimes visual plus physical feedback • Floppy disk example • Rectangular – can’t insert sideways • Tabs on the disk prevent the drive from letting it be fully inserted backwards

  3. Norman’s Affordances • Affordances: • Have perceived properties that may or may not exist • 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 From McGrenere & Ho, Proc of Graphics Interfaces, 2000

  4. Affordances in Screen-Based Interfaces • In graphical, screen-based interfaces, all that the designer has available is control over perceived affordances • Display screen, pointing device, selection buttons, keyboard • These afford touching, pointing, looking, clicking on every pixel of the display. Based on slide by Saul Greenberg

  5. Affordances in Screen-Based Interfaces • Most of this affordance is not used • Example: if the display is not touch-sensitive, even though the screen affords touching, touching has no effect. • Example: • does a graphical object on the screen afford clicking? • yes, but the real question is does the user perceive this affordance; does the user recognize that clicking on the icon is a meaningful, useful action? Based on slide by Saul Greenberg

  6. Visual affordances of a scrollbar

  7. Mappings • Mapping: • Relationships between two things • Between controls and their results • Related to metaphor discussion • Related to affordances

  8. Slide adapted from Saul Greenberg

  9. full mapping paired arbitrary front back front back backright frontleft backleft frontright 2 possibilities per side =4 total possibilities 24 possibilities, requires: -visible labels -memory Mapping controls to physical outcomes

  10. Mappings • 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

  11. 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 Based on slide by Saul Greenberg

  12. 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 Based on slide by Saul Greenberg

  13. Gulf of Evaluation • The amount of effort a person must exert to interpret • the physical state of the system • how well the expectations and intentions have been met • We want a small gulf!

  14. Example • Scissors • affordances: • holes for insertion of fingers • blades for cutting • constraints • big hole for several fingers, small hole for thumb • mapping • between holes and fingers suggested and constrained by appearance • positive transfer • learnt when young • conceptual model • implications clear of how the operating parts work Based on slide by Saul Greenberg

  15. Bad Example • Digital Watch • affordances • four push buttons, not clear what they do • contraints and mapping unknown • no visible relation between buttons and the end-result of their actions • negative transfer • little association with analog watches • cultural standards • somewhat standardized functionality, but highly variable • conceptual model • must be taught; not obvious • How to design a better one? Based on slide by Saul Greenberg

  16. Bad Example • Digital Watch • affordances • four push buttons, not clear what they do • contraints and mapping unknown • no visible relation between buttons and the end-result of their actions • negative transfer • little association with analog watches • cultural standards • somewhat standardized functionality, but highly variable • conceptual model • must be taught; not obvious • How to design a better one? Based on slide by Saul Greenberg

  17. The Metaphor of Direct Manipulation • Direct Engagement • the feeling of working directly on the task • Direct Manipulation • An interface that behaves as though the interaction was with a real-world object rather than with an abstract system • Central ideas • visibility of the objects of interest • rapid, reversible, incremental actions • manipulation by pointing and moving • immediate and continuous display of results • Almost always based on a metaphor • mapped onto some facet of the real world task semantics)

  18. move my.doc Object-Action vs Action-Object • Select object, then do action • interface emphasizes 'nouns' (visible objects) rather than 'verbs' (actions) • Advantages • closer to real world • modeless interaction • actions always within context of object • inappropriate ones can be hidden • generic commands • the same type of action can be performed on the object • eg drag ‘n drop: Slide adapted from Saul Greenberg

  19. Direct manipulation • Representation directly determines what can manipulated Slide adapted from Saul Greenberg

  20. Games Slide adapted from Saul Greenberg

  21. Is direct manipulation the way to go? • Some Disadvantages • Ill-suited for abstract operations • Spell-checker? • Search database by scrolling or by query? • Solution: Most systems combine direct manipulation and abstractions • Word processor: • WYSIWYG document (direct manipulation) • buttons, menus, dialog boxes (abstractions, but direct manipulation “in the small”) Slide adapted from Saul Greenberg

  22. Raskin on Cognition • Cognitive Conscious / Unconscious • Examples? • What is the last letter in your first name? • You know it but weren’t consciously accessing this information a moment ago, but now you are. • How do your shoes feel right now? • How did “The Shining” make you feel? • Having a name on the “tip of your tongue” • Differences? • New situations/routines • Decisions / one standard choice • Sequential / simultaneous Image from Newsweek, Jan 2001

  23. Raskin on Cognition • Locus of Attention • What is it? • An idea/object/event about which you are intently and actively thinking. • The one entity on which you are currently concentrating • You see and hear much more • E.g., white noise • Turn the lights off, you have a full-fidelity recording of their sound in your mind, which fades quickly • Why locus? • Focus implies volition; locus not always under conscious control • Attention can be either active or “going with the flow” • Why is it important for HCI? Image from Newsweek, Jan 2001

  24. Raskin on Cognition • Locus of Attention • Why is it important for HCI? • Cannot be conscious of more than one task at a time • Make the task the locus of attention • Don’t count on people to read labels or directions • Beware of the power of mental habits • Repetitive confirmations don’t work • Take advantage of it • Do pre-loading while user thinking about next step • Streamline resumption of interrupted tasks

  25. Cooper on error dialog boxes • Why are they problematic? • How related to locus of attention? • What are the alternatives? • Cooper is talking to programmers • “Silicon Sanctimony” • You should feel as guilty as for using a goto – an admission of failure in design

  26. Umm, thanks for the warning, but what should I do? What happens when you cancel a cancelled operation? Do I have any choice in this? Uhhh… I give up on this one

  27. “HIT ANY KEY TO CONTINUE” Slide adapted from Saul Greenberg

  28. Modes • What are they? • The same user actions have different effects in different situations. • Examples: • Adobe reader example: vs. • Powerpoint drawing example • Keycaps lock

  29. Modes • When are they useful? • Why can they be problematic? • How can these problems be fixed?

  30. Modes • When are they useful? • Temporarily restrict users actions • When logical and clearly visible and easily switchable • Drawing with paintbrush vs. pencil • Autocorrect (if easy to switch the mode) • Why can they be problematic? • Big memory burden • Source of many serious errors • How can these problems be fixed? • Don’t use modes – redesign the system to be modeless • Redundantly visible • Raskin -- quasimodes

  31. A Summary Statement • Raskin, p. 69 • “We must make sure that every detail of an interface matches both our cognitive capabilities and the demands of the task…”

  32. Wireframing • What is the main idea? • Separate content from layout and display • Next week: • Use the page layout to signal the flow of interaction • Group conceptually related items together • Nielsen: • What does the layout communicate? • Test if a page of content becomes more usable because of the layout • A template (for a home page) should contain what items?

  33. How WireFraming Fits In Kelly Goto & Eric Ott of Macromedia http://www.gotomedia.com/macromedia/monterey/architecture/

  34. From http://www.gotomedia.com/macromedia/monterey/architecture/

  35. Today • Evaluation based on Cognitive Modeling • Comparing Evaluation Methods

  36. Another Kind of Evaluation • Evaluation based on Cognitive Modeling • Fitts’ Law • Used to predict a user’s time to select a target • Keystroke-Level Model • low-level description of what users would have to do to perform a task. • GOMS • structured, multi-level description of what users would have to do to perform a task

  37. GOMS at a glance • Proposed by Card, Moran & Newell in 1983 • Apply psychology to CS • employ user model (MHP) to predict performance of tasks in UI • task completion time, short-term memory requirements • Applicable to • user interface design and evaluation • training and documentation • Example of • automating usability assessment Slide adapted from Melody Ivory

  38. Model Human Processor (MHP) • Card, Moran & Newell (1983) • most influential model of user interaction • used in GOMS analysis • 3 interacting subsystems • cognitive, perceptual & motor • each with processor & memory • described by parameters • e.g., capacity, cycle time • serial & parallel processing Slide adapted from Melody Ivory Adapted from slide by Dan Glaser

  39. Original GOMS (CMN-GOMS) • Card, Moran & Newell (1983) • Engineering model of user interaction • Goals - user’s intentions (tasks) • e.g., delete a file, edit text, assist a customer • Operators - actions to complete task • cognitive, perceptual & motor (MHP) • low-level (e.g., move the mouse to menu) Slide adapted from Melody Ivory

  40. CMN-GOMS • Engineering model of user interaction (continued) • Methods - sequences of actions (operators) • based on error-free expert • may be multiple methods for accomplishing same goal • e.g., shortcut key or menu selection • Selections - rules for choosing appropriate method • method predicted based on context • hierarchy of goals & sub-goals Slide adapted from Melody Ivory

  41. Keystroke-Level Model • Simpler than CMN-GOMS • Model was developed to predict time to accomplish a task on a computer • Predicts expert error-free task-completion time with the following inputs: • a task or series of subtasks • method used • command language of the system • motor-skill parameters of the user • response-time parameters of the system • Prediction is the sum of the subtask times and overhead

  42. t sec. KLM-GOMS (What Raskin refers to as GOMS) Keystroke level model 1. Predict 2. Evaluate x sec. Action 1 Action 2 y sec. Action 3 + z sec. Time using interface 1 Time using interface 2 Slide adapted from Newstetter & Martin, Georgia Tech

  43. Raskin excludes Symbols and values Remarks Time (s) Operator Press Key Mouse Button Press Point with Mouse Home hand to and from keyboard Drawing - domain dependent Mentally prepare Response from system - measure 0.2 .10/.20 1.1 0.4 - 1.35 - K B P H D M R Assumption: expert user Slide adapted from Newstetter & Martin, Georgia Tech

  44. 0.2 .10/.20 1.1 0.4 - 1.35 - K B P H D M R Raskin’s rules Rule 0: Initial insertion of candidate M’s M before K M before P iff P selects command i.e. not when P points to arguments Rule 1: Deletion of anticipated M’s If an operator following an M is fully anticipated, delete that M. e.g. when you point and click Slide adapted from Newstetter & Martin, Georgia Tech

  45. 0.2 .10/.20 1.1 0.4 - 1.35 - K B P H D M R Raskin’s rules Rule 2: Deletion of M’s within cognitive units If a string of MK’s belongs to a cognitive unit, delete all M’s but the first. e.g. 4564.23 Rule 3: Deletion of M’s before consecutive terminators If a K is a redundant delimiter, delete the M before it. e.g. )’ Slide adapted from Newstetter & Martin, Georgia Tech

  46. 0.2 .10/.20 1.1 0.4 - 1.35 - K B P H D M R Raskin’s rules Rule 4: Deletion of M’s that are terminators of commands If K is a delimiter that follows a constant string, delete the M in front of it. Rule 5: Deletion of overlapped M’s Do not count any M that overlaps an R. Slide adapted from Newstetter & Martin, Georgia Tech

  47. 0.2 .10/.20 1.1 0.4 - 1.35 - K B P H D M R Example 1 Temperature Converter Choose which conversion is desired, then type the temperature and press Enter. Convert F to C. Convert C to F. Apply Rule 0 HPBHKKKKK HMPMBHMKMKMKMKMK Apply Rules 1 and 2 HMPBHMKKKKMK Convert to numbers .4+1.35+1.1+.20+.4+1.35+4(.2)+1.35+.2 =7.15 Slide adapted from Newstetter & Martin, Georgia Tech

  48. 0.2 .10/.20 1.1 0.4 - 1.35 - K B P H D M R Example 1 Temperature Converter Choose which conversion is desired, then type the temperature and press Enter. Convert F to C. Convert C to F. Apply Rule 0 HPBHKKKKK HMPMBHMKMKMKMKMK Apply Rules 1 and 2 HMPBHMKKKKMK Convert to numbers .4+1.35+1.1+.20+.4+1.35+4(.2)+1.35+.2 =7.15 Slide adapted from Newstetter & Martin, Georgia Tech

More Related