1. SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005

2. Today Finish Mappings and Affordances Mental Models Norman’s Action Cycle Metaphors in Interfaces Time Permitting: –Raskin’s Locus of Attention –Errors –Modes

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

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

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

6. Based on slide by Saul Greenberg Putting These Together 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

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

8. Digital Watch Redesigned for Affordances (Rachna Dhamija)

9. Digital Watch Redesigned for Affordances (Ping Yee)

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

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

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

13. People are always trying to make sense of things Mental models often extracted from fragmentary evidence People find ways to explain things –Computer terminal breaks when accessing the library catalog –Certain you’re driving on the correct road

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

15. Action Cycle Goals EvaluationExecution The World start here

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

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

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

19. Metaphor in User Interfaces

20. Slide adapted from James Landay Metaphor Lakoff & Johnson –“...the way we think, what we experience, and what we do every day is very much a matter of metaphor.'' –in our language & thinking - “argument is war” …he attacked every weak point... criticisms right on target... if you use that strategy We can use metaphor to highlight certain features & suppress others –There is some systematicity to the transference

21. Metaphor and Analogy Metaphor –L. metaphora, fr. to carry over, transfer; meta: beyond, over –The transference of the relation between one set of objects to another set for the purpose of brief explanation (Webster’s revised) Analogy –A resemblance of relations; an agreement or likeness between things in some circumstances or effects, when the things are otherwise entirely different. (Webster’s revised) –1. Similarity in some respect between things that are otherwise dissimilar: "the operation of a computer presents an interesting analogy to the working of the brain“ (WordNet) – 2: (logic) inference that if things agree in some respects they probably agree in others (WordNet)

22. Interface Metaphors 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

23. What are some example interface metaphors?

24. Direct Manipulation uses a Metaphor Metaphor –Computer objects as visible, moveable objects Consequences –Items represented as icons –Items can be “picked up” and “moved” on a surface –Items can be “thrown out” –Items can be “copied” Do we really want to have to drag them to a photocopier? How much is too much?

25. The Desktop Metaphor Started at Xerox PARC –Xerox Star (see video) –Bitmapped screens made it possible Not meant to be a real desktop –Idea is to organize information in a way to allow people to use it in the way they user information on their desktops –Allow windows to overlap – make the screen act as if there were objects on it Apple took it farther –Waste basket, etc Microsoft took it to extremes –Microsoft Bob – a recognized failure

26. Macintosh Desktop

27. Caldera’s Desktop

28. Microsoft Bob’s Desktop Metaphor

29. Microsoft Bob’s Livingroom – Almost not a metaphor anymore!

30. Beyond the Desktop Robertson, George et al. " The Task Gallery: A 3D Window Manager." In Proceedings of CHI 2000

31. Beyond the Desktop Jun Rekimoto, Multiple-Computer User Interfaces: "Beyond the Desktop" Direct Manipulation Environments, ACM CHI2000 Video Proceedings, 2000.

32. Identify the mis-matched metaphors (from the Interface Hall of Shame) The classic (from the mac desktop) –To eject a disk you drag it to the trashcan

33. Identify the mis-matched metaphors (from the Interface Hall of Shame) VCR buttons to control a printer??

34. Identify the mis-matched metaphors (from the Interface Hall of Shame) Using tabs to make arbitrary groups

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

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

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

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

39. Guidelines for Design Metaphors use our knowledge of the familiar and concrete to represent abstract concepts need not be literal have limitations that must be understood

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

41. Guidelines for Design Good Representations capture essential elements of the event / world deliberately leave out / mute the irrelevant appropriate for the user, their task, and their interpretation