1. 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.

2. 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

3. 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.

4. 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)

5. 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.

6. 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

7. 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

8. 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?

9. 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

10. 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

11. 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

12. 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?

13. 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.

14. 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

15. 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

16. 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.

17. 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.

18. 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

19. 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.

20. 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.

21. 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?

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

23. 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.

24. 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
715 Design DXP
812 Cust. meeting
102 Lunch
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
715 Design DXP
808 Review SPA
812 Cust. meeting
Total
Improvement

25. 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

26. (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”.

27. 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.

28. 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)