ASF Architecture: Presentation Layer

1. ASF Architecture: Presentation Layer Mental Models and Metaphors An Overview of Presentation Layer Conceptual Modeling "All our ideas and concepts are only internal pictures". -- Ludwig Boltzmann (1899) www.air-worldwide.com

2. Introduction • Mental Models • Psychological representations of real, hypothetical, or imaginary situations • First postulated by the Scottish psychologist Kenneth Craik (1943) “The mind constructs ‘small-scale models’ of reality to anticipate events, to reason, and to underlie explanation” • Their structure corresponds to the structure of what they represent. • They are accordingly similar to • architects’ models of buildings • molecular biologists’ models of complex molecules • physicists’ diagrams of particle interactions.

3. Background • Mental Models • Users acquire mental models through… • Interaction • Explanation • Two types of mental model: • Functional – knowing what to do but not why (e.g. shutting down OC before switching off) • Structural – understanding the components and their relationships (why) • Structural models allow us to solve problems

4. Mental Models • Example • The heating has just come on but the room is cold. The room thermostat is set where you normally have it (higher than the current temperature) • Do you… • Turn it up hoping that the room will heat faster? • Leave it where it is and just wait?

5. Mental Models • Example • A room thermostat is not like a tap (valve)

6. Mental Models • Example • A room thermostat is like a switch

7. Mental Models - Notation • Primary entities and their relationships User’s mental model of central heating system in UML Class Diagram Notation

8. Mental Models – Whose? • Different roles need different models Engineer’s mental model of central heating system

9. Mental Models – Whose? • Designer’s and user’s models for an interactive system (Don Norman in User-Centered System Design) Book available from Will’s Desk

10. Mental Models – Whose? • Mapping the three models using UML

11. Conceptual Models • To… • Distinguish between the various models • Reflect that mental models are not directly under our control • …We will call the mental model we want users to acquire the users’ conceptual model (or just conceptual model) • Purpose of conceptual model is to • leverage the user’s experience from the physical world • enable them to form accurate and useful expectations about what type of functionality or content is available. • It helps them answer the question, “is this thing a store, a brochure, a newspaper, a reporting system, or what?”

12. Conceptual Models • Conceptual models invariably represent real world objects and experiences • Examples: • blogs are a like a diary, • iTunes is like a jukebox, • Microsoft Word is like a typewriter • ATM is like a bank teller. • Not one of these models tell the user how something is likely to be organized or structured, they do tell them what types of transactions, features, objects, and capabilities are likely to be present.

13. Conceptual vs Mental Models By contrast, mental model describes: • How a user expects a particular system or service to be organized. • It helps them say, “Given that this thing is a store, I expect there to be a place dedicated to product X, a space for product Y, and a place to complete my transaction.”

14. Conceptual Models • How can users acquire the ‘right’ mental model? • Training • Documentation • Interaction with the system • In systems for general use (e.g. e-commerce), interaction is usually the only realistic approach • In systems for specialized use (e.g. CLASIC/2), all three are means by which we can help bring the system models into greater alignment with the users’ mental models.

15. Conceptual Design • To create a system that will be easy to use, the conceptual model must be… • Deliberately designed • Simple enough to be understood through minimal training • Able to scale to greater levels of understanding through repeated interaction • Appropriate to users’ tasks • Aligned with internalized workflow processes • Use familiar concepts and terms • Provide adequate feedback • Be consistent (especially with users’ expectations)

16. Example – Inappropriate Concept Expiration Date • What are common examples of expiration dates? • Deli meat, milk, ALERT account? • What action(s) do you associate with expiration dates? • Throw out?

17. Example – Inappropriate Concept • Secure email certificates have expiration dates • But discarding a certificate means loosing access to all email encrypted with it.

18. Example – Inappropriate Concept • Security certificates are more like insurance policies than foods or drugs • Renewal date would have been a better concept

19. Reverse Engineering • Conceptual models can be ‘reverse engineered’ from existing applications or web sites • Expert review or with users • Three Step Process: • Visual Inspection • Interaction with controls (but no navigation) • Unrestricted Use • Alternatively, a user’s conceptual model can be elicited following use of the system

20. Reverse Engineering • Major concepts and relationships should be apparent from visual inspection • Primary results are entities and relationships (operations and attributes at a more detailed level) • Users’ conceptual models can be compared with designers’ • Careful questioning of users might be necessary to validate results (e.g. ‘what would happen if…’)

21. Reverse Engineering Entities from visual inspection of Amazon Website

22. Reverse Engineering Reverse-engineered conceptual model of Amazon Site

23. Reverse Engineering - CATStation Entities from visual inspection of CATStation

24. Reverse Engineering CATStation Reverse-engineered conceptual model of CATStation Report Generation

25. Reverse Engineering • Entities • Usually Nouns • Frequently gleaned from navigation (e.g. menus, tabs, links) • Can be other User Interface components (e.g. panels, popups, dialogs) • Relationships • Need not be named • Gleaned from visual relationships • More reliant on interaction with the system

26. Metaphors • 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) • 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) • Logical inference that if things agree in some respects they probably agree in others (WordNet)

27. Metaphors • 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 • “business as war” versus “business as game” metaphors • launch a ‘hostile takeover’ • we should ‘touch base’ • We can use metaphor to highlight certain features & suppress others • There is some systematicity to the transference

28. Metaphors • Metaphors make use of existing conceptual models • Do not have to be literal or visual, but they can provide a source of images • Desktop metaphor: inbox, folder, phone • Wild Harvest metaphor: shopping basket, checkout • Relationships of interest need to be related in some way: • ‘systemic’ (e.g. we are not interested in the size of shopping baskets, just the ‘idea’ of a shopping basket)

29. Metaphors • Myths About Metaphors • Difficulty usually comes from visual metaphors (e.g. Microsoft’s BOB UI)

30. Metaphors • Myths About Metaphors • To limiting • Only when taken literally or visually • Confusing • Only when inappropriate metaphor is used • Windows desktop proves metaphor is bad • Broken metaphors are bad • Windows bears little resemblance to ‘real’ desktop metaphor

31. Desktop Metaphor ‘Real’ desktop metaphor is closer to Xerox Star than Windows

32. Desktop Metaphor The Xerox Star Computer with Star Desktop GUI

33. Metaphors Other Aspects of Metaphors • Metaphors can be used at different levels • High level: desktop, shopping • Low Level: scissors for ‘cut’, green, right facing arrow for “Play” • Iceberg model of metaphor • Some terms have hidden relationships

34. Design Exercise (optional) • Consider metaphors that might be appropriate for managing money and allowing greater flexibility (what did people use to do before everyone had a bank account?) • Further: Think of coin/paper money as a store of value – now extend those metaphors

35. Design Exercise • People used to put money (store value) into different containers: • Jars • Tins • Socks • Mattresses • Bags • Envelopes • Goats

36. Design Exercise • What are the basic operations that can be performed on these containers? • What extensions could we make for a web implementation?

37. Design Exercise Solution • Basic operations • Create/Destroy • View Balance • Add Funds • Remove Funds • Extensions • Automatic interest calculation • Regular credits or debits • Limits (e.g. when enough funds for holiday, boat)

38. Design Exercise • Conceptual model for ‘Jars’ account

39. Design Exercise This is where you would now be in the process: • Contextual enquiry • Abstract use cases • Conceptual design • Concrete use case • Prototype • Visual Design • Implementation

40. Notes • Add Notes here.