1. Vocabulary of Design Visibility - –how easily a user can see what can be done and how to do it Mappings - –how a control and object are related –suffers when more functions than controls Feedback – -shows what has been done -suffers when delayed or not meaningful Cues and affordances learned expectations about visual forms

2. Core characteristics of interaction design Users should be involved through the development of the project Specific usability and user experience goals need to be identified, clearly documented and agreed at the beginning of the project Iteration is needed through the core activities

3. Today’s theme: –It’s all in the head.

4. Conceptual model Need to first think about how the system will appear to users (i.e. how they will understand it) A conceptual model is: “a high-level description of how a system is organized and operates.” (Johnson and Henderson, 2002, p. 26)

5. Web Definitions A mental model captures ideas in a problem domain, while a conceptual model represents 'concepts' (entities) and relationships between them.... en.wikipedia.org/wiki/Conceptual_model_(computer_science) en.wikipedia.org/wiki/Conceptual_model_(computer_science) A mental image of an object, system, or process. www.esse.ou.edu/glossary_st.html www.esse.ou.edu/glossary_st.html a high-level conceptual representation of important assumptions, inter-component flows, states, parameters, and uncertainties; may be used as a... www.sahra.arizona.edu/scenarios/index2.php www.sahra.arizona.edu/scenarios/index2.php defines concepts of a universe of discourse. Conceptual model provides the abstract description of the selected real-world features. costg9.plan.aau.dk/Bremen2001/Rados/RadosGlossary.htm costg9.plan.aau.dk/Bremen2001/Rados/RadosGlossary.htm written description and visual representation of how a system or process works and interacts www.dairyingfortomorrow.com/cds/Understanding%20Dairy%20Cat chments/Glossary.html www.dairyingfortomorrow.com/cds/Understanding%20Dairy%20Cat chments/Glossary.html

6. What is and why need a conceptual model? Not a description of the user interface but a structure outlining the concepts and the relationships between them Why not start with the nuts and bolts of design? –Architects and interior designers would not think about which color curtains to have before deciding where the windows will be placed in a new building –Enables “designers to straighten out their thinking before they start laying out their widgets” (p. 28) –Provides a working strategy and a framework of general concepts and their interrelations

7. Helps the design team Orient themselves towards asking questions about how the conceptual model will be understood by users Not to become narrowly focused early on Establish a set of common terms they all understand and agree upon Reduce the chance of misunderstandings and confusion arising later on

8. Main components Major metaphors and analogies that are used to convey how to understand what a product is for and how to use it for an activity. Concepts that users are exposed to through the product The relationships between the concepts –e.g., one object contains another The mappings between the concepts and the user experience the product is designed to support

9. Class Conceptual model

10. A classic conceptual model: the spreadsheet Analogous to ledger sheet Interactive and computational Easy to understand Greatly extending what accountants and others could do www.bricklin.com/history/refcards.htm

11. Why was it so good? It was simple, clear, and obvious to the users how to use the application and what it could do “it is just a tool to allow others to work out their ideas and reduce the tedium of repeating the same calculations.” capitalized on user’s familiarity with ledger sheets Got the computer to perform a range of different calculations and recalculations in response to user input

12. Don Norman Design of Everyday Things. Buy at amazon

17. Conceptual Model Mental Model

18. Watson task You are shown a set of four cards placed on a table each of which has a number on one side and a colored patch on the other side. The visible faces of the cards show 3, 8, red and brown. Which card(s) should you turn over in order to test the truth of the proposition that if a card shows an even number on one face, then its opposite face is red?

19. Watson task You are a bartender and need to make sure you are not serving minors. Who do you check? 22 17 Coke Beer

20. The Conceptual Model is what the designer produces and tries to communicate to the user. The Mental Model is what the user develops and understands about the system.

24. Vocabulary of Design The burden of interpretation –how much “thinking” is required on the users part? Input gaps –how easy it is to figure out how to do it Output gaps –how easy it is to figure out system state

25. Impementation Model Represented Model User Mental Model

26. User Models? Mental Models –The expectation a user has about a computer’s behavior. –Inside the head… can be trained User Models –The expectation a computer has of a user –Inside the computer… can be changed directly.

27. Another classic 8010 Star office system targeted at workers not interested in computing per se Spent several person-years at beginning working out the conceptual model Simplified the electronic world, making it seem more familiar, less alien, and easier to learn Johnson et al (1989)

28. The Star interface

29. Interface metaphors Designed to be similar to a physical entity but also has own properties –e.g. desktop metaphor, search engine Exploit user’s familiar knowledge, helping them to understand ‘the unfamiliar’ Conjures up the essence of the unfamiliar activity, enabling users to leverage of this to understand more aspects of the unfamiliar functionality People find it easier to learn and talk about what they are doing at the computer interface in terms familiar to them

30. Benefits of interface metaphors Makes learning new systems easier Helps users understand the underlying conceptual model Can be innovative and enable the realm of computers and their applications to be made more accessible to a greater diversity of users

31. Problems with interface metaphors (Nelson, 1990) Break conventional and cultural rules –e.g., recycle bin placed on desktop Can constrain designers in the way they conceptualize a problem space Conflict with design principles Forces users to only understand the system in terms of the metaphor Designers can inadvertently use bad existing designs and transfer the bad parts over Limits designers’ imagination in coming up with new conceptual models

33. Vocabulary of Design The burden of interpretation –how much “thinking” is required on the users part? Input gaps –how easy it is to figure out how to do it Output gaps –how easy it is to figure out system state

35. Bathtub control User’s goals: –Warm bath –Right amount of water Psychological variables –Temperature & water depth Physical variables –Cold water flow rate –Warm water flow rate

36. Simple design Hot Water Cold Water valve Bath Tub

39. But how do you turn on the shower? Pushing the control (arrow) is only PART of the solution (see next slide) How does this map temperature and speed?

40. The problem: another control Both controls have to be on!

41. Design exercise Design the perfect bathtub control. 1. Assume you have unlimited budget 2. Bath control only… no shower. 3. Think about mapping controls to the users goals (physical variables).