1. Conceptual Model Mr. John Kelleher

2. 1 Conceptual Model A description of the proposed system in terms of a set of integrated ideas and concepts about what it should do, behave and look like, that will be understandable by the users in the manner intended. “ ”

3. 2 How many windows in your house? Conceptual Models “Run-Throughs” Carelman’s Tandem “Convergent Bicycle (Model for Fiancés) Carelman’s “Coffee Pot for Masochists” Jacques Carelman, Catalog of Unfindable Objects, Balland.

4. 3 People form Conceptual Models to: Predict future (or infer invisible) events. Find causes for observed events. Determine appropriate actions to cause desired changes. Serve as mnemonic devices for remembering relations and events. Provide a means of understanding an analogous device. Allow them to apply heuristic problem-solving strategies designed to overcome information processing limitations. However, often incomplete and vague Home thermostat

5. 4 Key aspects to design of a conceptual model (1/2) Decide what user will be doing when carrying out their tasks – his ‘interaction mode’ searching for information? recording events? E.g. Jeff Hawkin’s PDA (Palm Pilot) E.g. Buchenau and Suri (2000) Defibrillator E.g. Third Age Suit at ICE, Loughborough Univ. This prompts the choice of interaction style E.g. PDA (pen interface), command line interface, speech input, HUD (Head-Up Display)

6. 5 Key aspects to design of a conceptual model (2/2) Actual concrete solutions thought through behavior of the interface ‘look and feel’ particular interaction styles Content metaphors desktop paper document notebook with tabs score sheet, stage with actors (Director) accounting ledger (spreadsheet) stereo (for all media players) phone keypad calculator Web: "Shopping Carts" Quicken: "CheckBook"

7. 6 Alternative Conceptual Models A better way?

8. 7 Types of Conceptual Models Structural model …explains what the system does independent of use (it’s a system-centered model). User has internalized structure of how the item works Internalized declarative knowledge Explanation of the underlying mechanism Functional model …explains what the system does to assist a user’s task (it’s a user-centered model) Internalized procedural knowledge Developed from past knowledge and experience in a similar domain (calculator)

9. 8 Which model?

10. 9 Incomplete model

11. 10 Implications for HCI Users’ conceptual models are usually vague and incomplete just a piece of the puzzle The Interface should match the understanding the user already has Contrast with earlier HCI advice, where the users’ must grow the appropriate mental model of the application Users prefer simple models simple and working solution (even it is not completely correct) Occam’s Razor Threshold of Indignation

12. 11

13. 12 Refrigerator Problem: freezer too cold, but fresh food just right freezer fresh food

14. 13 Refrigerator Controls Problem: freezer too cold, but fresh food just right What is your conceptual model? How do you adjust the controls? Answer: keep the numerical setting unchanged. Change the alphabetic setting, C -> B

15. 14 Most Likely Conceptual Model i.e., independent controls Freezer Thermostat Freezer Control Cooling Unit Fresh Food Thermostat Fresh food Control Cooling Unit Cold Air

16. 15 Correct Conceptual Model Now can you fix the problem? One control for two functions: Problem! Thermostat (Location Unknown) Control A Freezer Cooling Unit Fresh Food Control B Cold Air Valve

17. 16 How design is received Developers of systems construct their mental models of how the system should function. This is called the design model. Users develop their own mental models of how their tasks should be accomplished, user’s model. After contact with a system, users build up a system image.

18. 17 Design Model & User’s Model Users gets model from experience & usage through system image What if design & user models don’t match? Design Model User’s Model System Image 

19. 18 But designers often do not intend that image Designers and the majority of users have never met. “The user of the system starts off with goals expressed in psychological terms. The system, however, presents its current state in physical terms”. That’s how gulfs have been created. Thus there is often a discrepancy.

20. 19 Three problems emerge 1. Mapping problems - which controls the temperature in the refrigerator and which one for the freezer? not directly intuitive 2. Ease of control - it is often required to manipulate several physical variables at the same time for a simple user goal, like maintaining total rate constant while increasing the temperature. 3. Evaluation – requires prompt feedback

21. 20 Two Guidelines for Design 1. Provide a good conceptual model allows user to predict the effects of our actions Problem: designer’s conceptual model communicated to user through system image: appearance, written instructions, system behaviour through interaction, transfer, idioms and stereotypes if system image does not make model clear and consistent, user will develop wrong conceptual model

22. 21 Two Guidelines for Design (contd.) 2. Make things visible relations between user’s intentions, required actions, and results are sensible non arbitrary meaningful Visible affordances, mappings, and constraints Use visible cultural idioms Reminds person of what can be done and how to do it

23. 22 Good Design Scissors Affordances: holes for something to be inserted Constraints: big hole for several fingers, small hole for thumb Mapping: between holes and fingers suggested and constrained by appearance Positive transfer and cultural idioms learned when young constant mechanism Conceptual model: implications clear of how the operating parts work

24. 23 Bad Design Digital Watch Affordances: four push buttons to push, but not clear what they will do Constraints and mapping unknown: no visible relation between buttons, possible actions and end result Transfer of training: little relation to analog watches Cultural idiom: somewhat standardized core controls and functions but still highly variable Conceptual model: must be taught 12:00

25. 24 Interface Metaphors Definition of Metaphor application of name or descriptive term to an object to which it is not literally applicable Purpose leverages our knowledge of familiar, concrete objects/experiences to understand abstract computer and task concepts Metaphor is basic to human language for a similar reason: it allows us to talk about knew or abstract things by drawing on familiar experience: Time is like a line we move on We can go forward and look back We can push a meeting back Love is like a journey (also like a fall) A presentation tool is like a slide projector

26. 25 Metaphor Since functional models draw on past experience and not everyone has computer experience, its useful to draw on the real world. Hence the “desktop metaphor”: Directories are like folders Files are like sheets of paper Windows are like ?: Menus are like menus Deleting is like putting in the trash Running an application program is like opening the doc. Copy to buffer and restore is like cut-and-paste...

27. 26 Interface Metaphors Use metaphors that matches user's conceptual task desktop for office workers paintbrush for artists layers for animators ledger for accountants search engine for surfers timeline for video editors scrollbar, toolbar, portal even Bluetooth!

28. 27 Uses of metaphors… as a way of conceptualising a particular interaction style, e.g. using the system as a tool as a conceptual model that is instantiated as part of an interface, e.g., the desktop metaphor as a way of describing computers, e.g., the Internet highway names for describing specific operations e.g., ‘cut’ and ‘paste’ commands for deleting and copying objects as a part of the training material aimed at helping learning, e.g., comparing a word processor with a typewriter.

29. 28 Opposition to interface metaphors (1/3) Overly literal interpretation Unnecessary fidelity Metaphors meant to support under- standing of new domain Break the rules Bin on desktop Too constraining E.g. finding a deeply nested file or moving a file to another folder Conflicts with design principles Fidelity with metaphor compromises design principles E.g. violating consistency principle with Mac bin

30. 29 Opposition to interface metaphors (2/3) Not being able to understand the system functionality beyond the metaphor Metaphor acts as straight-jacket to user’s vision Overly literal translation of existing bad designs Calculator (a) replicates poor design elements of ‘real’ calculators 

31. 30 Opposition to interface metaphors (3/3) Limits the designer’s imagination in conjuring up new paradigms and models Always looking ‘backwards’ Microsoft Windows Media Player vs. WinAmp Gentner & Nielsen (1996) Superbook

32. 31 Interaction Paradigms A particular philosophy about interaction design Can inform novel conceptual models Beyond GUI Ubiquitous computing Pervasive computing Wearable computing 

33. 32 Metaphors – Strengths & Difficulties Strengths Gives a way for people to understand a new concept quickly given what they know. Helps to provide good choices for visual and audio elements, as well as terminology. Difficulties The metaphor may create expectations that are false along with the true ones: Can I shred this file instead of putting in the trash can? Our understanding is “functional” rather than “structural”. That means understanding is relative to how we do things.

34. 33 Evaluating suggested metaphors 1. How much structure does the metaphor provide? Organises the disparate features 2. How much of the metaphor is relevant to the problem? How inadequate is the metaphor? 3. Is the interface metaphor easy to represent? 4. Will your audience understand the metaphor? 5. How extensible is the metaphor? Consider these questions in light of a ‘shared calendar’ system. 

35. 34 The Metaphor of Direct Manipulation Direct Manipulation the feeling of working directly on the task 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. 35 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. 36 Resources Chapter 2 Understanding and conceptualising interaction Chapter 8 Prototyping and Construction