Mental Models and User Interfaces

1. SIMS 213: User Interface Design & Development Marti Hearst Thurs, Feb 12, 2004

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

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

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

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

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

7. Action Cycle start here Goals Execution Evaluation The World

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

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

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

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

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

13. Digital Watch Redesigned for Affordances (Rachna Dhamija)

14. Digital Watch Redesigned for Affordances (Ping Yee)

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

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

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

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

19. Games Slide adapted from Saul Greenberg

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

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

22. Summary • Good Representations • capture essential elements of the event / world • deliberately leave out / mute the irrelevant • appropriate for the user, their task, and their interpretation • Metaphors • use our knowledge of the familiar and concrete to represent abstract concepts • need not be literal • have 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

23. Next Time • Raskin on Cognition • Modes • Cooper & Norman on Errors