CSE 3345 User interface design Slide 1 CSE 3345 User interface design A software engineering perspective Chapter 4: Mental Models and Interface Design © 2005, Pearson Education retains the copyright to the slides, but allows restricted copying for teaching purposes only. It is a condition that the source and copyright notice is preserved on all the material.

Slide 2 Mental Models A mental model of an IT system is the user’s understanding of what the system is and how it works. Users are not always conscious of their mental models, and if they are may not be able to explain their mental models to others. The effectiveness with which a user uses a system is often based on how close the user’s mental model is to what the system actually does. A good interface contributes to an accurate mental model. Mental model resource http://www.tcd.ie/Psychology/Ruth_Byrne/mental_models/index.html

Hidden Data and Mental Models Object permanence means that just because you cannot see an object (it disappears or moves behind something else) you believe that it is still there. Object permanence contributes to forming mental models Just because data disappears form the screen it does not mean the data has disappeared from the system. After the user forms a correct mental model, they find more creative ways of using the system. A user’s mental model of a system evolves with use of the system.

Conceptual Model vs. Mental Model The conceptual model is the developers way of viewing the system. The correct view of the system. Having a good understanding of the problem space can help inform the design space (what kind of interface, behaviour, functionality to provide) Developers need to first think about how the system will appear to users (i.e. how they will understand it) But before deciding upon these it is important to develop a conceptual model A conceptual model is: “a high-level description of how a system is organized and operates.” (Johnson and Henderson, 2002, p. 26)

Conceptual Model vs. Mental Model The overriding goal of user interface design is to get the user’s mental model to agree with the (developer’s) conceptual model in the shortest possible amount of time.

Why do we need to understand human cognition? Interacting with technology is cognitive so need to take into account cognitive processes involved and cognitive limitations of users. This allows us to identify and explain the nature and causes of problems users encounter Core cognitive aspects: Attention Perception and recognition Memory Reading, speaking and listening Problem-solving, planning, reasoning and decision-making, learning Most relevant to interaction design are attention, perception and recognition, and memory

Design Implications for Attention Make information salient when it needs attending to. Use techniques that make things stand out like colour, ordering, spacing, underlining, sequencing and animation Avoid cluttering the interface - follow the google.com example of crisp, simple design Avoid using too much because the software allows it Over-use of graphics

Design Implications for Perception and Recognition Design representations that are readily perceivable Text should be legible Icons should be easy to distinguish and read Which is easiest to read and why? What is the time? What is the time? What is the time? What is the time? What is the time?

Design Implications for Perception and Recognition Representations of information need to be designed to be perceptible and recognizable Icons and other graphical representations should enable users to readily distinguish their meaning Bordering and spacing are effective visual ways of grouping information Sounds should be audible and distinguishable Speech output should enable users to distinguish between the set of spoken words Text should be legible and distinguishable from the background

Memory Involves first encoding and then retrieving knowledge We don’t remember everything - involves filtering and processing what is attended to Context is important in affecting our memory (i.e., where, when) Well known fact that we recognize things much better than being able to recall things Better at remembering images than words Why interfaces are largely visual

Design Implications for Memory Don’t overload users’ memories with complicated procedures for carrying out tasks Design interfaces that promote recognition rather than recall This is why graphical interfaces ate more effective than command-line interfaces Provide users with a variety of ways of encoding digital information to help them remember where they have stored them e.g., categories, color, flagging, time stamping

Every Day Reasoning and Erroneous Mental Models You arrive home on a cold winter’s night to a cold house. How do you get the house to warm up as quickly as possible? Set the thermostat to be at its highest or to the desired temperature? (b) You arrive home starving hungry. You look in the fridge and find all that is left is an uncooked pizza. You have an electric oven. Do you warm it up to 375 degrees first and then put it in (as specified by the instructions) or turn the oven up higher to try to warm it up quicker?

Fig 4.1A Possible mental models for page format Slide 13 Fig 4.1A Possible mental models for page format F mm dmsm sp ab anem a tts, to fmst saåfprs fer s frfi smfe skf org s fp4et gsæ fgtær Model A: Page format on printer connection. Works on all docs at print-out. Disk Page Setup  Margins top bottom left right What happens when we close? 2.5 cm 3.5 cm 6 cm mm dmsm sp ab anem a tts, to fmst saåfprs fer s frfi smfe skf org s fp4et gsæ fgtær F Model B: Page format on document. Follows document. mm dmsm sp ab anem a tts, to fmst saåfprs fer s frfi smfe skf org s fp4et gsæ fgtær mm dmsm sp ab anem a tts, to fmst F Model C: Page format in text. Works from this page on.

RETAILER’S ENVIRONMENT Example: On-Line Ordering System User initially assumes the an order is sent immediately to the wholesaler. Why might this be? What prior experience might the user have had to support this erroneous mental model? Is it a big deal that the mental model is inaccurate? Solution: Use words that give the user a correct vision of where the data (order) goes and in what order. RETAILERS’S PC BATCH STORAGE WHOLESALER’S PC RETAILER’S ENVIRONMENT

Fig 4.1B Erroneous mental model for on-line ordering Slide 15 Fig 4.1B Erroneous mental model for on-line ordering User manual - Select Ordering from main menu - Fill in the form - Click OK You have now made an order to your wholesaler. Intuitive mental model Order Invoice + Delivery note Retailer Wholesaler Order batch Correct model Back order Invoice + Delivery note Evening Night

Types of Mental Models Mental models for data (see previous slide) How the data flow through the system Mental models for system functions Models system capabilities Most abstract of all the models Mental models for the domain Models the real world The least abstract of the models Similar to a business model Mapping model Knowing what system functions to use to carry out domain tasks.

Mental Model Terminology Structural model corresponds to data model + system function model. Functional model corresponds to mapping model. Task-action model also corresponds to mapping model. Function is an ambiguous term that refers to something the computer does or something the user does.

Fig 4.2 Mental models for data, functions and domain Slide 18 Fig 4.2 Mental models for data, functions and domain Order Customer Name Address Get Find Cancel John F. Smith Model for data What the system remembers Model for system functions What the commands do Get Cust. Find Orders Cancel Order Domain model Tasks and items Mapping model How to do it on the computer What the user sees, hears and does

Dialogue Levels and Virtual Window Method Dialogue level refers to the level of communication between the user and the computer (none, low-level, mid-level or high-level) Virtual Window Method is a UI development technique created by the books author which frequently refers to dialogue levels. Dialog Levels… Domain level – what goes on in the real world outside of the computer It is important to understand how users currently carry out their jobs – the tasks they perform and the data they use. Data level – the kinds and quantity of information the new computer system will be expected to store and manage.

Dialogue Levels and Virtual Window Method More dialog Levels… Functional level – the functions the system can perform and what happens when it performs them. Syntax level – the format in which data is represented on the screen and the ways by which functionality can be accessed (command button, menus, etc.). Mapping level – user maps domain-level tasks he wants to carry out to system functions Physical level and SW platform – I/O devices (mouse, sound, keyboard, etc.) and OS to be used.

Fig 4.3 Dialog levels and Virtual Window method Slide 21 Fig 4.3 Dialog levels and Virtual Window method Order Customer Name Address Data level Planning and design of Virtual Windows Functional level Design of functions Planning of screens Get Cust. Find Orders Cancel Order Domain level Task description and data modeling Mapping level Planning the functions (cognitive walk through) Syntax level Screen details: date format, menu vs. F-keys Get Find Cancel Order John F. Smith Physical level and software platform Color screen? Mic? Web-based or window-based?

Fig 4.4 Data versus functions Slide 22 Fig 4.4 Data versus functions Notice how data is displayed and system functionality is accessed.

Fig 4.5A Bad screens - patient monitoring Slide 23 Fig 4.5A Bad screens - patient monitoring Temperature Patient: John Smith Date Time Temp dddd xxxx yyyy Pulse Patient: John Smith Date Time Pulse dddd xxxx yyyy Problems: Raw database No task support Interface is modeled on data base structure: two tables, two windows. Interface does not support user tasks Temperature and pulse are taken at the same time. Temperature a pulse are reviewed at the same time. A single window combining both readings would simplify the users tasks.

Fig 4.5B Bad screen - work-hour registration Slide 24 Fig 4.5B Bad screen - work-hour registration Time registration Employee: MBH Activity Date Hours 102 Lunch 23-09-02 0.5 715 Design DXP 23-09-02 4.0 812 Cust. meeting 23-09-02 3.0 102 Lunch 24-09-02 0.5 Problems: No patterns No gestalts No visual check Time registration Employee: MBH Week: 39 Year: 02 Activity Mo Tu We Th Fr Sa Su Tot 102 Lunch 0.5 0.5 0.5 0.5 2.0 715 Design DXP 4.0 3.0 5.0 3.0 4.5 19.5 808 Review SPA 4.5 2.5 7.0 812 Cust. meeting 3.0 7.5 3.5 14.0 Total 7.5 8.0 8.0 7.5 7.0 4.5 0.0 42.5 Improvement

Fig 4.6 Bad screens - step-by-step extreme Slide 25 Fig 4.6 Bad screens - step-by-step extreme Task description: Review status Task description: Create an order 1. Enter name and address 2. Enter pay method 3. Enter the delivery address 4. Enter item number and amount 5. Repeat step 4 as needed 6. Confirm order

(Fig 4.6 Cont.) Enter your name and address Name: Slide 26 (Fig 4.6 Cont.) Enter your name and address Name: Address: What do you want to do? 1. Create an order 2. Review order status 3. Cancel an order 4. See latest news How do you want to pay? Method: Card number: Expiry date: Which delivery address? ZIP: Country: Which item do you want? Item number: Number of items: More items Confirm Problems: Computer controls the sequence. Data viewed through a “soda straw”.

Fig 4.7A Mental, conceptual, and cognitive models Slide 27 Fig 4.7A Mental, conceptual, and cognitive models Real system Mental model User Psychologist Conceptual model Cognitive model Designer Plan for design. Explanation to user. Explanation of user’s mental model.

Fig 4.7B What are mental models? Slide 28 Fig 4.7B What are mental models? Earlier experience Guidance Mental model Intuition? Innate? New experience Pictures + Logic + Procedures? Effects of model: - what will happen if ... - expected functions - what a message means Model life cycle: - fast development (hours) - gradual refinement (weeks) - proficiency (mapping dominates) - fading (non-intuitive models forgotten)