1. Midterm Review Packet Stolen 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. Based on slide by Saul Greenberg 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.

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

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. Mapping controls to physical outcomes back right front left back left front right 24 possibilities, requires: -visible labels -memory arbitrary full mapping back front back 2 possibilities per side =4 total possibilities paired

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. 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

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

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

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

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

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. Slide adapted from Saul Greenberg 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: my.doc move

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

20. Slide adapted from Saul Greenberg Games

21. Slide adapted from Saul Greenberg 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”)

22. Image from Newsweek, Jan 2001 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

23. Image from Newsweek, Jan 2001 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?

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. What happens when you cancel a cancelled operation? Do I have any choice in this? Umm, thanks for the warning, but what should I do? Uhhh… I give up on this one

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

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

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

32. 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

33. 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…”

34. 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?

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

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

37. Today Evaluation based on Cognitive Modeling Comparing Evaluation Methods

38. 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

39. Slide adapted from Melody Ivory 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

40. Slide adapted from Melody Ivory 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 Adapted from slide by Dan Glaser

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

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

43. 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

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

45. Slide adapted from Newstetter & Martin, Georgia Tech Symbols and values KBPHDMRKBPHDMR 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 - Operator RemarksTime (s) Raskin excludes Assumption: expert user

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

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

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

49. Slide adapted from Newstetter & Martin, Georgia Tech Example 1 KBPHDMRKBPHDMR 0.2.10/.20 1.1 0.4 - 1.35 - Temperature Converter Choose which conversion is desired, then type the temperature and press Enter. Convert F to C. Convert C to F. HPBHKKKKK HMPMBHMKMKMKMKMK HMPBHMKKKKMK Apply Rule 0 Apply Rules 1 and 2 Convert to numbers.4+1.35+1.1+.20+.4+1.35+4(.2)+1.35+.2 =7.15

50. Slide adapted from Newstetter & Martin, Georgia Tech Example 1 KBPHDMRKBPHDMR 0.2.10/.20 1.1 0.4 - 1.35 - Temperature Converter Choose which conversion is desired, then type the temperature and press Enter. Convert F to C. Convert C to F. HPBHKKKKK HMPMBHMKMKMKMKMK HMPBHMKKKKMK Apply Rule 0 Apply Rules 1 and 2 Convert to numbers.4+1.35+1.1+.20+.4+1.35+4(.2)+1.35+.2 =7.15

51. Example 2 GUI temperature interface Assume a button for compressing scale Ends up being much slower –16.8 seconds/avg prediction

52. Using KLM and Information Theory to Design More Efficient Interfaces (Raskin) Armed with knowledge of the minimum information the user has to specify: –Assume inputting 4 digits on average –One more keystroke for C vs. F –Another keystroke for Enter Can we design a more efficient interface?

53. Using KLM to Make More Efficient Interfaces First Alternative: To convert temperatures, Type in the numeric temperature, Followed by C for Celcius or F for Fahrenheit. The converted Temperature will be displayed. MKKKKMK = 3.7 sec

54. Using KLM to Make More Efficient Interfaces Second Alternative: –Translates to both simultaneously MKKKK = 2.15 sec C F

55. Slide adapted from Melody Ivory GOMS in Practice Mouse-driven text editor (KLM) CAD system (KLM) Television control system (NGOMSL) Minimalist documentation (NGOMSL) Telephone assistance operator workstation (CMP-GOMS) –saved about $2 million a year

56. Drawbacks Assumes an expert user Assumes an error-free usage Overall, very idealized

57. Slide adapted from Newstetter & Martin, Georgia Tech Fitts’ Law Models movement time for selection tasks The movement time for a well-rehearsed selection task increases as the distance to the target increases decreases as the size of the target increases

58. Slide adapted from Newstetter & Martin, Georgia Tech Fitts’ Law Time (in msec) = a + b log 2 (D/S+1) where a, b = constants (empirically derived) D = distance S = size ID is Index of Difficulty = log 2 (D/S+1)

59. Slide adapted from Pourang Irani Fitts’ Law Same ID → Same Difficulty Target 1 Target 2 Time = a + b log 2 (D/S+1)

60. Slide adapted from Pourang Irani Fitts’ Law Smaller ID → Easier Target 2 Target 1 Time = a + b log 2 (D/S+1)

61. Slide adapted from Pourang Irani Fitts’ Law Larger ID → Harder Target 2 Target 1 Time = a + b log 2 (D/S+1)

62. Slide adapted from Pourang Irani Determining Constants for Fitts’ Law To determine a and b design a set of tasks with varying values for D and S (conditions) For each task condition –multiple trials conducted and the time to execute each is recorded and stored electronically for statistical analysis Accuracy is also recorded –either through the x-y coordinates of selection or –through the error rate — the percentage of trials selected with the cursor outside the target

63. Adapted from slide by James Landay Formal Usability Studies When useful –to determine time requirements for task completion –to compare two designs on measurable aspects time required number of errors effectiveness for achieving very specific tasks Require Experiment Design

64. Experiment Design Experiment design involves determining how many experiments to run and which attributes to vary in each experiment Goal: isolate which aspects of the interface really make a difference

65. Experiment Design Decide on –Response variables the outcome of the experiment usually the system performance aka dependent variable(s) –Factors (aka attributes)) aka independent variables –Levels (aka values for attributes) –Replication how often to repeat each combination of choices

66. Experiment Design Example: –Studying a system (ignoring users) Say we want to determine how to configure the hardware for a personal workstation –Hardware choices which CPU (three types) how much memory (four amounts) how many disk drives (from 1 to 3) –Workload characteristics administration, management, scientific

67. Experiment Design We want to isolate the effect of each component for the given workload type. How do we do this? –WL1CPU1 Mem1Disk1 –WL1CPU1Mem1Disk2 –WL1CPU1Mem1Disk3 –WL1CPU1Mem2Disk1 –WL1CPU1Mem2Disk2 –…–… There are (3 CPUs)*(4 memory sizes)*(3 disk sizes)*(3 workload types) = 108 combinations!

68. Experiment Design One strategy to reduce the number of comparisons needed: –pick just one attribute –vary it –hold the rest constant Problems: –inefficient –might miss effects of interactions

69. Interactions among Attributes A1A2 B135 B268 A1 A2 B135 B269 A1 B1 A2 A1 B2 A2 B2 Non-interacting Interacting A2 A1 B1B2B1B2

70. Experiment Design Another strategy: figure out which attributes are important first Do this by just comparing a few major attributes at a time –if an attribute has a strong effect, include it in future studies –otherwise assume it is safe to drop it This strategy also allows you to find interactions between attributes

71. Experiment Design Common practice: Fractional Factorial Design –Just compare important subsets –Use experiment design to partially vary the combinations of attributes Blocking –Group factors or levels together –Use a Latin Square design to arrange the blocks

72. Between-Groups Design Wilma and Betty use one interface Dino and Fred use the other

73. Within-Groups Design Everyone uses both interfaces

74. Adapted from slide by James Landay Between-Groups vs. Within-Groups Between groups –2 or more groups of test participants –each group uses only 1 of the systems Within groups –one group of test participants –each person uses all systems can’t use the same tasks on different systems

75. Between-Groups vs. Within-Groups Within groups design –Pros: Is more powerful statistically (can compare the same person across different conditions, thus isolating effects of individual differences) Requires fewer participants than between-groups –Cons: Learning effects Fatigue effects

76. Special Considerations for Formal Studies with Human Participants Studies involving human participants vs. measuring automated systems –people get tired –people get bored –people (may) get upset by some tasks –learning effects people will learn how to do the tasks (or the answers to questions) if repeated people will (usually) learn how to use the system over time

77. More Special Considerations High variability among people –especially when involved in reading/comprehension tasks –especially when following hyperlinks! (can go all over the place)