SIMS 213: User Interface Design & Development

1. SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 14, 2006

2. Today • Review Affordances, Mappings, Mental Models • Norman’s Action Cycle • Metaphors in Interfaces • Raskin’s Locus of Attention • Error Messages

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

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

5. Digital Watch Redesigned for Affordances (Rachna Dhamija)

6. Digital Watch Redesigned for Affordances (Ping Yee)

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

8. Action Cycle start here Goals Execution Evaluation The World

9. Action Cycle start here 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

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

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

12. Metaphor in User Interfaces

13. 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 Slide adapted from James Landay

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

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

16. Macintosh Desktop

17. Caldera’s Desktop

18. Microsoft Bob’s Desktop Metaphor

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

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

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

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

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

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

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

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

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

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

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

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

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

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

33. Raskin on Cognition • Cognitive Engineering • Ergonomics: • Takes into account the statistical variation of human variability • Design a car seat that fits 95% of the population • Says that designing products that interact with us physically is reasonable straightforward • Cognetics: Ergonomics of the mind • The study of the “engineering scope of our mental abilities” • This is the applied side of cognitive science

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

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

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

37. Error Messages

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

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

40. Inane Dialog Boxes

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