1. CS 321: Human-Computer Interaction Design
Lesson Eight
Mental Models
Cognitive Processes
Developer’s Implementation Model
Designer’s Represented Model
Chapter 3
Design Methods

2. Different Perspective
Cognitive Processes
To design software interfaces for users, the design team must understand how users think, i.e., their cognitive processes.
Example: Nintendo DS
Fears that handheld game players would not be capable of splitting their attention between two display screens were allayed by sales of over 135 million DS consoles in its first six years.
Inventory Menus
Game Domain Map
Different Perspective
CS 321
Lesson Eight
Mental Models
Page 95

3. Mental Models
The designer’s concept of the application may be quite different than the user’s concept.
Designer
Forms
Menus
Frames
Icons
URLs
Hyperlinks
Security
User
Web Access
Perusing
Selecting
Ordering
Payment
Credit Card
Delivery
CS 321
Lesson Eight
Mental Models
Page 96

4. Predictive Nature of Mental Models Example: Web Browser Back Buttons
The user’s mental model of an application enables the user to predict the consequences of interactions.
Example: Web Browser Back Buttons
CS 321
Lesson Eight
Mental Models
Page 97
When browser users use the Back menu to return to previously visited sites, do they realize that this does not cause all URLs above the chosen site in the history stack to be popped from the stack?

5. Explanatory Nature of Mental Models
The user’s mental model of an application enables the user to explain the reason that events occur in the application.
Example: VRML Navigation
Controls are provided to afford users the means to navigate the 3D virtual world.
Each control operation alters the “mode” of the mouse interactions.
The meaning of the operations quickly becomes evident to the user as interactions are performed.
Target a particular destination
Move user to a preprogrammed viewpoint
Undo/Redo Move & Straighten
Tilt/Go/Slide & Gravity/Float
CS 321
Lesson Eight
Mental Models
Page 98

6. Developer’s Implementation Model
knowledge skills
experiences biases
MENTAL MODEL
knowledge skills
experiences biases
There is frequently a marked contrast between the user’s mental model of how software works and the developer’s implementation model of how it actually works.
CS 321
Lesson Eight
Mental Models
Page 99

7. Dragging and Dropping a File
Mental Model Example
Dragging and Dropping a File
When a user presses the left mouse button and drags a file from one location to the other, the user’s mental model is that the file is being physically moved from one location to another.
The developer’s implementation model, however, is based on the relative locations of the source and the destination.
CS 321
Lesson Eight
Mental Models
Page 100

8. Dragging and Dropping a File
Mental Model Example
Dragging and Dropping a File
When the two locations are on the same drives, the implementation merely involves changing the file’s metadata, specifying its location on the drive.
When the locations are on different drives, the implementation requires that the data itself be copied to the new drive, resulting in a copy, not a move.
So the interface designer’s represented model corresponds to the user’s mental model (i.e., file moving) when the locations are on the same drive, but assumes a more thorough understanding of the developer’s implementation model when the locations are on different drives.
CS 321
Lesson Eight
Mental Models
Page 101

9. Designer’s Represented Model … or closer to the user’s mental model?
Should the designer represent the software to the user in a manner closer to the developer’s implementation model...?
Happy Developer
Unhappy User
… or closer to the user’s mental model?
Unhappy Developer
Happy User
The designer must develop a third model, the represented model, that combines the simplicity of the user’s mental model with the technical veracity of the developer’s implementation model.
CS 321
Lesson Eight
Mental Models
Page 102

10. Design Methods Supporting Mental Models: Simplicity
Mental models simplify reality, so interface design should simplify actual software functionality.
Include only needed functions
Make frequently used functions immediately apparent
Avoid cluttering the interface with advanced functions
Organize the interface to fade into the background, allowing users to focus
CS 321
Lesson Eight
Mental Models
Page 103

11. Design Methods Supporting Mental Models:
Familiarity
An interface should build on users’ prior knowledge and experience.
Allow users to start quickly and make immediate progress
Consistency in an interface reduces a user’s learning curve
CS 321
Lesson Eight
Mental Models
Page 104

12. Design Methods Supporting Mental Models: Availability
An interface should provide visual cues, reminders, lists of choices, etc., automatically or on request.
People are better at recognition than at recall
Avoid relying on the user for file names, previous settings, etc.
CS 321
Lesson Eight
Mental Models
Page 105

13. Design Methods Supporting Mental Models:
Flexibility
An interface should support alternate interaction techniques.
Allow users to choose the interaction method most appropriate to their situation
Allow users to use any object in any sequence at any time
Accommodate a wide range of user skills, physical abilities, interactions, and usage environments
CS 321
Lesson Eight
Mental Models
Page 106

14. Design Methods Supporting Mental Models:
Feedback
An interface should provide complete, continuous feedback regarding the actions taken.
Feedback supporting the current mental model reinforces it
Feedback contradicting the current mental model forces it to be modified
CS 321
Lesson Eight
Mental Models
Page 107

15. Design Methods Supporting Mental Models:
Safety
Users should feel confident in exploring, knowing that they can try an action, view the results, and then undo the action if the result is unacceptable.
Users feel more comfortable with interfaces in which their actions do not cause irreversible consequences.
CS 321
Lesson Eight
Mental Models
Page 108

16. Design Methods Supporting Mental Models: Perceived Affordances
Users often conclude what can and cannot be done with an interface justby examining its appearance.
By using real-world representations of objects within its interface, a software system can provide users with an intuitive sense of the system’s affordances.
WHERE’S THE “ZOOM” ICON?
CS 321
Lesson Eight
Mental Models
Page 109
MARQUEE ZOOM
ZOOM OUT/IN BUTTONS
MAGNIFICATION COMBO BOX
SNAPSHOT