1. SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 30, 2001

2. Cognitive Considerations From Don Norman’s book, The Psychology (Design) of Everyday Things – Affordances, Constraints, and Mappings – Mental Models – Action Cycle and Gulf of Execution

3. Slide adapted from Saul Greenberg Getting serious about design World War II – invention of machines (airplanes, submarines...) that taxed people’s sensorimotor abilities to control them – even after high degree of training, frequent errors (often fatal) occurred Example airplane errors: – if booster pump fails, turn on fuel valve within 3 seconds test shows it took at least five seconds to actually do it! – Altimeter gauges difficult to read caused crashes when pilots believe they are at a certain altitude Result – human factors became critically important

4. Slide adapted from Saul Greenberg Other computer psychopathologies from InfoWorld, Dec ’86 – “London— An inexperienced computer operator pressed the wrong key on a terminal in early December, causing chaos at the London Stock Exchange. The error at [the stockbrokers office] led to systems staff working through the night in an attempt to cure the problem”

5. Slide adapted from Saul Greenberg Other computer psychopathologies from Science magazine – In 1988, the Soviet Union’s Phobos 1 satellite was lost on its way to Mars, when it went into a tumble from which it never recovered. “not long after the launch, a ground controller omitted a single letter in a series of digital commands sent to the spacecraft. And by malignant bad luck, that omission caused the code to be mistranslated in such a way as to trigger the [ROM] test sequence [that was intended to be used only during checkout of the spacecraft on the ground]”

6. Affordances Affordance: The perceived and actual properties of an object that determine how it could possibly 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

7. Based on slide by Saul Greenberg Affordances Perceived can differ from real affordance – Chair: real affordance Affords sitting Affords standing for changing a lightbulb Affords jamming a door open – Chair: false affordance Can be moved, but not if bolted down Remember the Strauss Mouse video

8. Based on slide by Saul Greenberg Affordances in Computer Screen- Based Interfaces Designer only has control over perceived affordances – Display screen, pointing device, selection buttons, keyboard – These afford touching, pointing, looking, clicking on every pixel of the display.

9. Based on slide by Saul Greenberg Affordances in Computer Screen- Based Interfaces Most of this affordance is of no value – 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?

10. Visual affordances of a scrollbar

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

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

13. Slide adapted from Saul Greenberg

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

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

17. Based on slide by Saul Greenberg Mental Models People have mental models of how things work: – how does your car start? – how does an ATM machine work? – how does your computer boot? Allows people to make predictions about how things will work

18. Based on slide by Saul Greenberg Mental Models Mental models built from – affordances – constraints – mappings – positive transfer – cultural associations/standards – instructions – interactions Mental models are often wrong!

19. Slide adapted from Saul Greenberg Our mental models of how bicycles work can “simulate” this to know it won’t work

20. Slide adapted from Saul Greenberg

21. People are always trying to explain things Mental models often extracted from fragmentary evidence People find ways to explain things – Computer terminal breaks when accessing the library catalog – Sure your driving on the correct road

22. Norman’s Action Cycle Human action has two aspects – execution and evaluation Execution: doing something Evaluation: comparison of what happened to what was desired

23. Action Cycle Goals EvaluationExecution The World start here

24. Action Cycle Goals Evaluation Evaluation of interpretations Interpreting the perception Perceiving the state of the world Execution Intention to act Sequence of actions Execution of seq uence of actions The World start here

25. Norman’s Action Cycle Execution has three stages: – Start with a goal – Translate into an intention – Translate into a sequence of actions Now execute the actions Evaluation has three stages: – Perceive world – Interpret what was perceived – Compare with respect to original intentions

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

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

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

29. Digital Watch Redesigned for Affordances (Rachna Dhamija)

30. Digital Watch Redesigned for Affordances (Ping Yee)

31. Slide adapted from Saul Greenberg Interface Metaphors Revisited Definition of Metaphor – application of name or descriptive term to an object to which it is not literally applicable Purpose – function as natural models – leverages our knowledge of familiar, concrete objects/experiences to understand abstract computer and task concepts Problem – metaphor may portray inaccurate or naive conceptual model of the system A presentation tool is like a slide projector

32. Slide adapted from Saul Greenberg Interface Metaphors – Use metaphors that matches user's conceptual task – desktop metaphor for office workers – paintbrush metaphor for artists... – Given a choice, choose the metaphor close to the way the system works – Ensure emotional tone is appropriate to users E.g., file deletion metaphors – trashcan – black hole – paper shredder – pit bull terrier – nuclear disposal unit...

33. Slide adapted from Saul Greenberg Metaphors continued Caveat – metaphors can be overdone! Common pitfalls – overly literal unnecessary fidelity excessive interactions – overly cute novelty quickly wears off – overly restrictive cannot move beyond – mismatched does not match user’s task and/or thinking

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

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

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

37. Slide adapted from Saul Greenberg Phone list List metaphor Rolodex metaphor

38. Slide adapted from Saul Greenberg Games

39. Slide adapted from Saul Greenberg Direct Manipulation Xerox Star: pioneered in early '80s, copied by almost everyone – simulates desktop with icons in and out baskets file folders and documents calculators printers blank forms for letters and memos – small number of generic actions applicable system wide move, copy, delete, show properties, again, undo, help – eg same way to move text, documents, etc property sheets – pop-up form, alterable by user – What you see is what you get (WYSIWYG)

40. Slide adapted from Saul Greenberg Xerox Star continued Star's observers: – objects understood in terms of their visual characteristics affordances, constraints – actions understood in terms of their effects on the screen causality – intuitively reasonable actions can be performed at any time conceptual model A subtle thing happens when everything is visible: the display becomes reality

41. Slide adapted from Saul Greenberg Is direct manipulation the way to go? Some Disadvantages – Ill-suited for abstract operations spell-checker? – Tedium manually search large database vs query – Task domain may not have adequate physical/visual metaphor – Metaphor may be overly-restrictive 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”)

42. Slide adapted from Saul Greenberg Conventional Applications: A Mix

43. Based on slide by Saul Greenberg Guidelines for Design Provide a good conceptual model – allows users to predict consequences of actions – communicated thorugh the image of the system Make things visible – relations between user’s intentions, required actions, and results should be sensible consistent meaningful (non-arbitrary) – make use of visible affordances, mappings, and constraints – remind person of what can be done and how to do it

44. Slide adapted from Saul Greenberg Summary Good Representations – captures essential elements of the event / world – deliberately leaves out / mutes the irrelevant – appropriate for the person, their task, and their interpretation Metaphors – uses our knowledge of the familiar and concrete to represent abstract concepts – need not be literal – has limitations that must be understood Direct manipulation – visibility of the objects of interest – rapid, reversible, incremental actions – manipulation by pointing and moving – immediate and continuous display of results