www site uottawa caelsaddik www elsaddik com SEG

www. site. uottawa. ca/~elsaddik www. el-saddik. com SEG 3210 User Interface Design & Implementation Prof. Dr. -Ing. Abdulmotaleb El Saddik University of Ottawa (SITE 5 -037) (613) 562 -5800 x 6277 elsaddik @ site. uottawa. ca abed @ mcrlab. uottawa. ca http: //www. site. uottawa. ca/~elsaddik/ 1 Unit C-Task Analysis (c) elsaddik

www. site. uottawa. ca/~elsaddik www. el-saddik. com Unit C: conceptual models 2 Unit C-Task Analysis (c) elsaddik 1. Review: The trouble with Users 2. Introduction to Conceptual Models 3. Mental models 4. Relationship between design and user models 5. Metaphors 6. Guidelines for Building Conceptual Models 7. Key Points to Review

www. site. uottawa. ca/~elsaddik www. el-saddik. com 1. Review: The trouble with Users • Any developer can tell you that users are: • • lazy, demanding, careless and incompetent • In particular, developers are often frustrated that so many users apparently lack ‘computer literacy’ • Some day we’ll hook up all the machines and eliminate the middle-man • What can we do in the meantime? • There are some common strategies. . . 3 Unit C-Task Analysis (c) elsaddik

www. site. uottawa. ca/~elsaddik www. el-saddik. com First strategy - Wait for them to die Strategy flaws: • New ‘bad’ users will replace them • There will always be some users who are new to the current generation of technology. 4 Unit C-Task Analysis (c) elsaddik

www. site. uottawa. ca/~elsaddik www. el-saddik. com Second strategy - Wait for the super-user to evolve Strategy flaws: • No noticeable recent evolutionary leaps • Expert users are even less forgiving of usability problems than novices. . . • … so we have to deal with the users we’ve got. 5 Unit C-Task Analysis (c) elsaddik

www. site. uottawa. ca/~elsaddik www. el-saddik. com Third strategy - Educate them 6 Unit C-Task Analysis (c) elsaddik

www. site. uottawa. ca/~elsaddik www. el-saddik. com Designing usable systems Analysis Evaluate Design Analysis • Understand the users and their tasks Design • Apply this understanding during design activities Evaluate 7 Unit C-Task Analysis (c) elsaddik • Validate design decisions to see whether people can actually use the system.

www. site. uottawa. ca/~elsaddik www. el-saddik. com 2. Introduction to Conceptual Models Designer’s Model User’s Model System image 8 Unit C-Task Analysis (c) elsaddik

www. site. uottawa. ca/~elsaddik www. el-saddik. com 2. Introduction to Conceptual Models Conceptual model = Design model • Model held by the designer - may not be the same for all designers working on a product Mental Model = User’s model • Model held by a user - may be different for each user – System image • Reflection of the model in the system itself: its information display and control possibilities System image • The interface, the system’s behavior, and the documentation together are called the System Image. • If the system image does not convey to users the design model in a clear and obvious way, the users will develop incorrect user models. 9 Unit C-Task Analysis (c) elsaddik

www. site. uottawa. ca/~elsaddik www. el-saddik. com 2. Introduction to Conceptual Models Conceptual model – Definition (1): • • • The designer analyzes the content to be taught, the task to be performed or the information to be displayed, and defines its structure and functionality. This structure in the designer's mind is called a conceptual model Conceptual model: • A designer’s attempt, through the user interface, to facilitate the development of a useful mental model. • A framework through which functionality is presented • A conceptual model is also called an ‘external myth’ • i. e. the designer’s attempt to present a simplified view of the system • it is not really the same as the system • Can be considered a ‘roadmap’ to the system 10 Unit C-Task Analysis (c) elsaddik 1) Bielenberg, D. (1993). Interactive design and the mythical "intuitive user interface". Journal of Interactive Instruction Development, 6 (2), 14 -19

www. site. uottawa. ca/~elsaddik www. el-saddik. com Human knowledge Human intelligence relies on a great deal of background knowledge. • The more we know • The easier many tasks become We have millions of facts in our brains • Most should be quickly accessed • Hence they must be highly organized The better we understand the organization the better we can build user interfaces that. . . • Allow us to access our knowledge • Help us to improve our mental models 11 Unit C-Task Analysis (c) elsaddik

www. site. uottawa. ca/~elsaddik www. el-saddik. com Principles of Knowledge organization: Semantic nets • Graph structures with. . . • Nodes representing concepts • Links representing relationships • e. g. • a person can be related to a dog by the ‘owner’ relation. • Ideas are similar to entity-relationship or object diagrams Rhetorical Structure Theory: • An example of this is the English sentences: "An apple is a fruit, Fruit is sweet. " is Is a Apple 12 Unit C-Task Analysis (c) elsaddik Fruit Sweet

www. site. uottawa. ca/~elsaddik www. el-saddik. com 3. Mental Model • A representation in a user’s brain of what contains his or her conceptualization and understanding of a system • Patterns of knowledge representation in the brain • Humans build models of systems using schemas and other semantic nets • Mental models are like computer simulations • But in the brain • Humans manipulate mental models to • Predict and test consequences of actions • i. e. we ‘run’ our models • Solve problems • Integrate new facts 13 Unit C-Task Analysis (c) elsaddik

www. site. uottawa. ca/~elsaddik www. el-saddik. com Mental Model • Mental models. . . • get better with experience • can be wrong and need replacing • We constantly seek evidence to strengthen or modify our mental models • by observation and exploration • good feedback can help in this process • Many user interface malfunctions can be ascribed to incorrect mental models • which may be generated by poor conceptual models • Systematic malfunctions are strongly suggestive of erroneous mental models • Mental models can be contrasted with images • Images are views of one state of a mental model 14 Unit C-Task Analysis (c) elsaddik

www. site. uottawa. ca/~elsaddik www. el-saddik. com Types of mental models We can build user interfaces that help users build and manage one or both of the following • Structural models: • User has internalized how something works • e. g. How a car works • Functional models: • User has internalized how to use something • e. g. How to drive a car • How to: • by a ticket, • go to a platform, • wait for a train, • get on a train, • change trains and • leave the station at the destination 15 Unit C-Task Analysis (c) elsaddik

www. site. uottawa. ca/~elsaddik www. el-saddik. com How the two types of models can help people Structural: • Help deal with unfamiliar problems • Help users predict the effects of any possible sequence of actions • However they require more work to learn • Context-free -> can be extended and integrated with other knowledge Functional: • Help get a task done fast with minimal thinking • i. e. ‘blindly’ following directions • Context-dependent --> easier to use • For most tasks, most people only build functional models 16 Unit C-Task Analysis (c) elsaddik

www. site. uottawa. ca/~elsaddik www. el-saddik. com Mental models can be • Abstract • Subway / Metro / Underground maps that are not to scale and leave out many details • Concrete • Topological map • Simple • Average driver’s model of a car • Detailed • Mechanic’s model of a car 17 Unit C-Task Analysis (c) elsaddik

www. site. uottawa. ca/~elsaddik www. el-saddik. com London complete system 18 Unit C-Task Analysis (c) elsaddik Famous for introducing abstraction - not to scale

www. site. uottawa. ca/~elsaddik www. el-saddik. com London central core 19 Unit C-Task Analysis (c) elsaddik Same detail, just bigger scale

www. site. uottawa. ca/~elsaddik www. el-saddik. com Paris suburban system: Even more abstract 20 Unit C-Task Analysis (c) elsaddik

www. site. uottawa. ca/~elsaddik www. el-saddik. com Paris central core 21 Unit C-Task Analysis (c) elsaddik Less abstract - more to scale - more complex

www. site. uottawa. ca/~elsaddik www. el-saddik. com Toronto 22 Unit C-Task Analysis (c) elsaddik Highly abstract and simple

www. site. uottawa. ca/~elsaddik www. el-saddik. com Mental models are typically messy • They are incomplete • People’s ability to run them is severely limited • We are not machines • They are unstable • People forget details • Models of similar systems are confused with each other • People incorporate unscientific ideas and superstitions into mental models • If there is a 50% chance, then if it succeeded last time it will fail next time We cannot hope to instill perfect mental models in users • We can only promote the development of a model that is neater, more elegant, more stable, more complete and more confident 23 Unit C-Task Analysis (c) elsaddik

www. site. uottawa. ca/~elsaddik www. el-saddik. com Classroom exercises with mental models In the following tasks, think about: • • • 24 Unit C-Task Analysis (c) elsaddik What mental activity you perform to compute the answer How much time it takes. How accurate you think your answer is If you need to do a similar task often, how could you improve your mental model. Could a computer make the task easier? How? 1. How many windows in your house? 2. How many traffic lights are there on the route you drive to work (or some other drive)? 3. If you came back to a cold house and you wanted a 20˚C temperature, what would you do? 4. How would you leave a message for somebody on their voice mail? When would they get it? 5. How would you find out of a given procedure in a program is ever going to be called?

www. site. uottawa. ca/~elsaddik www. el-saddik. com Two puzzles to illustrate mental models There are four cards • Each has a letter on one side and a number on the other side There are four receipts • Rule: If a purchase is for more than $1000, the manager must sign on the back of the receipt • Rule: If there is a vowel on one side, then there is an even number on the other side • You see the following receipts on the table: • You see the following cards: E, D, 4, 7 • two showing amounts $1200 and $200 • Which cards do you need to turn to verify the rule? • two showing the back, one with the manager’s signature • Which receipts do you need to turn to verify the rule? 25 Unit C-Task Analysis (c) elsaddik

www. site. uottawa. ca/~elsaddik www. el-saddik. com 4. Relationship between design and user models • Ideally, the user model should completely map onto the design model. • More often the users develop only a partial mental model of the design model. • The way users find out about the design model is through the interface, the system’s behavior, and the documentation • The gulfs of execution and evaluation: • Users can bridge the gulfs by changing their mental model • Designers can bridge the gulfs by changing the conceptual model they present 26 Unit C-Task Analysis (c) elsaddik

www. site. uottawa. ca/~elsaddik www. el-saddik. com Mapping indicates the relationship between the action of the user and the result of the action. • Natural mapping • The user’s natural understanding of action results • steering the wheel (direct association) • RED for stop and GREEN for go (cultural understanding) • Four controls for four stove burners (logical association) • Present the font choices using the fonts themselves 27 Unit C-Task Analysis (c) elsaddik Times New Roman Arial Black Courier New Old English Monotype Sorts Univers

www. site. uottawa. ca/~elsaddik www. el-saddik. com Forcing Function Design that prevents users from taking actions which are inappropriate or which would lead to error • Appliance shut off when opened • Microwaves • Washing Machines • Radio buttons • Choose one and one only Good example of a forcing function design: • Menu bar - grays out and prevents the selection of those items inapplicable to the current context 28 Unit C-Task Analysis (c) elsaddik New Open Close Save as. . .

www. site. uottawa. ca/~elsaddik www. el-saddik. com Directness of an interface The feeling that one is operating directly in the world of interest • Rather than through a computer Semantic directness: • The degree to which the UI allows users to say what they want to say simply and concisely • good: If users can directly draw in a word processor when creating a document rather than switching applications • bad: If users in a draw program must draw a shape using separate lines Articulatory directness: • The relation between the meanings of elements in a UI and their physical form • reasonable: turn indicator in a car • bad: burner controls on many stoves 29 Unit C-Task Analysis (c) elsaddik

www. site. uottawa. ca/~elsaddik www. el-saddik. com Example: burner controls on many stoves Stove Top A Stove Top B Controls A 30 Unit C-Task Analysis (c) elsaddik Controls B

www. site. uottawa. ca/~elsaddik www. el-saddik. com Affordances and constraints • A UI element with good perceived affordance suggests what is possible to do with it • A UI element with good perceived constraints suggests what is not possible to do with it. Good affordances and constraints: • Reduce the user’s reliance on her mental model • She can immediately tell what to do without thinking about it • Help the user build their mental model Typical affordance: • An element that looks like a button, can be pushed • When the cursor is over it, it darkens indicating that pressing the mouse now would perform the action Typical constraints: • e. g. a square peg and a round hole • e. g. the scroll bar can only scroll a limited distance 31 Unit C-Task Analysis (c) elsaddik

www. site. uottawa. ca/~elsaddik www. el-saddik. com Conceptual models of novices vs. experts • Knowledge starts of as declarative • Statements of fact that can be put in words • With practice, knowledge gradually becomes more procedural and automated • One internalizes the mental model of how to do certain things • An expert may not even be able to explain what they do • The fact-learning required in the early stage is a bottleneck • We must make interfaces so they can be learned and used with just a few pieces of knowledge • e. g. how to use the mouse • Expanding on existing procedural knowledge can sometimes be easier • Computer experts can more easily to learn any UI 32 Unit C-Task Analysis (c) elsaddik

www. site. uottawa. ca/~elsaddik www. el-saddik. com States and modes In the UI a mode is: • A state entered by a particular action, in which the set of actions available changes • e. g. in the Unix vi text editor, one can be in • Text entry mode • Command mode • e. g. Dialog boxes are modes if one has to quit before doing anything else • ‘Modeless dialogs’ are better. Each mode has its own mini conceptual model • This can be confusing to users • Hence avoid modes where possible 33 Unit C-Task Analysis (c) elsaddik

www. site. uottawa. ca/~elsaddik www. el-saddik. com 5. Metaphors • Metaphors are an important tool in building conceptual models There is a close linkage between metaphors and conceptual models. • metaphor implies a model • model isn't easily grasped without metaphors What is a metaphor ? • A word or phrase denoting one object used in place of another to suggest a likeness • The use in an interface of familiar concepts to represent more abstract system concepts Analogy: • Partial likeness between things that are compared Metaphor vs. Analogy • Distinction is that in a metaphor an object is treated as if it were another; in analogy we remain aware that they are different. Metaphors 34 Unit C-Task Analysis (c) elsaddik • Help the user use prior knowledge to understand a system • Make abstract ideas more concrete • Help users build mental models

www. site. uottawa. ca/~elsaddik www. el-saddik. com Examples of metaphors • Mac/MS-Windows - desktop metaphor – • mismatch: ejecting disk by dropping in trash can • word processor - typewrite metaphor – • mismatch: auto-line wrap • Spreadsheet as ledger - squared paper metaphor – • mismatch: calculating formulae • Mailtool - mailbox metaphor – • icon mismatch: US mailbox not UK, German, French etc • Control panel as cards with tabs • Conceptual model as roadmap to the system • ‘Ubiquitous computing’ is a step beyond metaphors: • integrating a computer invisibly into an everyday device (e. g. an employee badge) Two types of metaphors: • Verbal metaphors • The system is explained in a metaphorical way • Virtual interface metaphors 35 Unit C-Task Analysis (c) elsaddik • The system appears in a metaphorical way

www. site. uottawa. ca/~elsaddik www. el-saddik. com Difficulties developing metaphors 1. Following a metaphor too literally can mean we underutilize the power of the computer • e. g. in a windowing system it can be hard to sort through many windows which represent documents • • This is easier with real paper documents We should ensure the computer also makes this easy 2. Incomplete metaphors can mislead the user • e. g. Ejecting a disk (file cabinet) by putting it in the trash 3. It is difficult to extend metaphors consistently, especially when adding functionality • e. g. ‘Magical’ Macintosh features: • • • 36 Unit C-Task Analysis (c) elsaddik Infinite folders-within-folders Aliases for files (same file in several folders) The trash can is on the desktop!

www. site. uottawa. ca/~elsaddik www. el-saddik. com A solution to the metaphor extension problem • Composite metaphors • Several metaphors working together • as long as they don’t conflict! • People don’t seem to have a problem working with multiple mental models at a time • E. g. • • • 37 Unit C-Task Analysis (c) elsaddik desktop + menus + windows + scrolls + cutting and pasting + publishing and subscribing

www. site. uottawa. ca/~elsaddik www. el-saddik. com Some sources of ideas for metaphors • Human activities: • Agents • Stage and theater • Searching, creating, writing etc. • Machines: • • Television and telecommunications Carpentry, plumbing and construction Office devices like rolodex and keyboards Clocks and other representations of time • • • Forms, spreadsheets Drafting tables, light tables Game boards Instrument panels Menus Maps • 2 -D space • 2. 5 -D space • Desktops and briefcases • Books and encyclopedias • Notebooks and index cards • 3 -D space 38 Unit C-Task Analysis (c) elsaddik • Doorways, rooms and buildings • Earth’s surface, atmosphere, outer space

www. site. uottawa. ca/~elsaddik www. el-saddik. com Check list for metaphors • • • Does the concept represent the functionality? Are the users familiar with the concept? Does the concept fit with the system context ? Is the concept too complex for my user group ? What are the mismatches from the metaphor in representative use scenarios/use cases ? • Identify strategies to manage mismatches ? • Identify the levels at which the metaphor applies - the task, procedural method, appearance level. The metaphor is trading off accuracy of the mental model for learnability 39 Unit C-Task Analysis (c) elsaddik

www. site. uottawa. ca/~elsaddik www. el-saddik. com 6. Guidelines for Building Conceptual Models 40 Unit C-Task Analysis (c) elsaddik General • Keep the conceptual model, and thus the system, simple. • Build conceptual models that draw maximally on real-world knowledge. • Avoid conceptual models that require abstract, logical thinking. • Documentation and on-line help should explicitly present the conceptual model. • Choose names and terminology consistent with the conceptual model. • Design conceptual models that maximize both semantic and articulatory directness. • Where possible, eliminate modes

www. site. uottawa. ca/~elsaddik www. el-saddik. com Guidelines for Building Conceptual Models 41 Unit C-Task Analysis (c) elsaddik Using conceptual models to build mental models • Take into account mental models users will bring with them to the new system. • Design so as to facilitate the user’s development of an efficient and effective mental model. • Conceptual models should be oriented to the user’s, not the designer’s mental model. • Help the user build a structural model if they need to be creative with the system. • Help the user build a functional model if they need to rapidly perform some function. • Ensure feedback works to correct and build users’ mental models. • Avoid displaying clutter or irrelevant information as this will slow the building of a mental model. • Different but related conceptual models may be needed for novices and experts • Reduce the dependence on the user’s mental model by making the interface as visible as possible – using elements with appropriate perceived affordance and constraints

www. site. uottawa. ca/~elsaddik www. el-saddik. com Guidelines for Building Conceptual Models 42 Unit C-Task Analysis (c) elsaddik Metaphors: • Make departures from any metaphor clear • Avoid metaphors that if followed literally would not allow the power of the computer to be fully used. • When the metaphor is already chosen, trade literalism for power by adding ‘magic’ features. • Avoid partial metaphors that users may be misled to assume are more complete • When building composite metaphors, make sure the component metaphors do not conflict

www. site. uottawa. ca/~elsaddik www. el-saddik. com 7. Key Points to Review Task analysis and conceptual modeling are techniques that help us design better user interfaces • We understand users and their needs more deeply Task: Goal-directed procedure • with subtasks and actions • internal task vs. external task • natural task vs. artificial task Goal: State the user wants to be in • implicit goal vs. explicit goal 43 Unit C-Task Analysis (c) elsaddik

www. site. uottawa. ca/~elsaddik www. el-saddik. com Key Points to Review Task analysis: Modeling user’s tasks parallel with traditional analysis (e. g. OO) 1. Model the tasks • • • Determine user classes List and prioritize tasks Gather goals, preconditions, decompositions, mental models, side-effects, breakdowns 2. Simplify and improve the models • • • Make abstract Build conceptual models Add back details: • • • 44 Unit C-Task Analysis (c) elsaddik Standardize, rearrange, reduce need

www. site. uottawa. ca/~elsaddik www. el-saddik. com Key Points to Review 45 Unit C-Task Analysis (c) elsaddik • Conceptual model (roadmap to system) • vs. mental model (map in user’s brain) Human knowledge representation Mental models • • Simulations used to test and predict consequences of actions Cause malfunctions when incorrect Contrast with images Structural (workings) vs. functional (use) Abstract vs. concrete; simple vs. detailed Typically messy The conceptual model helps build good mental models

www. site. uottawa. ca/~elsaddik www. el-saddik. com Key Points to Review Users’ vs. designers’ mental models • Gulfs of execution and evaluation Interface directness • Semantic: Say what you want • Articulatory: Relation to physical form Perceived affordance and constraints • Reduce reliance on mental model Novices vs. experts • Declarative vs. automated and procedural knowledge • Bottleneck acquiring initial declarative knowledge Modes: States where actions differ: To be avoided Metaphors: Familiar concepts to represent system 46 Unit C-Task Analysis (c) elsaddik • • • Difficulties Following to literally Misleading due to incompleteness Being consistent Composite metaphors