HumanComputer Interaction

1
Human-Computer Interaction

• Designing the Users Conceptual Model

1
2
Lecture Overview

• Definitions
• System model
• Conceptual model
• System image
• Mental model
• Conceptual model design
• Metaphors
• Affordance
• System images - example screen shots

2
3
Users Mental Models

Simplified representations
Not always easy to convey
3
4
System, Conceptual and Mental Models, and System
Image
Conceptual Model
Mental Model
TOOL - Incomplete - Unstable - Unscientific -
Static - Dynamic
User
Designer
4
5
Mental Models Provide Explanation and Prediction

• Provide structure to link cause and effect
• Explanation
• What am I now seeing?
• What did the system just do?
• What did I do to make it do that?
• Prediction
• What can I do next?
• What if I do this?
• What will the system do then?
• What will I see as a result?

5
6
Conceptual Model Design

• First design conceptual model
• KISS
• Protect users from technicalities
• Second design system image (i.e. user interface)
  to convey conceptual model
• Each individual user will develop own model

6
7
Main Forms of Mental Model

• Object-action
• E.g. direct manipulation drawing package
• State transition
• E.g. phone, fax, ATM, menu system
• System switches between different modes of
  behaviour
• User may have more than one type of model of a
  given system

7
8
Metaphors

• Basis of conceptual model
• Allows user to infer from metaphor to system
• Suggests possible operations
• One application may draw on multiple metaphors
• If poorly chosen, can confuse or limit
  understanding

8
9
Metaphors

• Draws on users prior knowledge and experience
• Short-cuts to understanding complex concepts
• E.g Desktop, printers light box
• Scope - number of concepts involved, e.g.
• E.g. partial metaphor s
• ruler
• calculator

9
10
Metaphors Forever

• Finding metaphors is easy
• Finding good metaphors is difficult
• Allow for magic
• E.g. Insert/delete row/column in spreadsheet

10
11
Major Metaphors and Typical Application Areas

• Desktop metaphor
• E.g. operating environment
• Webtop metaphor
• Physical object metaphor
• E.g. object-oriented environment
• Travel holiday metaphor
• E.g. learning environment
• Ledger sheet metaphor
• E.g. spreadsheet
• Notecards
• Hypertext

11
12
Objects and Affordance

• Obvious by shape how to use most everyday things

12
13
Theory of Affordance
Much of our everyday knowledge resides in the
world, not in the head Don Norman, 1988

• Perceived potential for action of an object
• Property of an object with reference to the
  observer
• No prior experience required
• Information pickup - exploratory activity of
  looking and moving around

13
14
Implications of Affordance in User Interfaces

• Users do not learn interfaces in detail
• Rely on fluid use of information picked up from
  the interface rather than a retention of this
  information in memory
• Skill
• Not the accumulation of knowledge, but
• The education of attention to allow faster pickup
  of information from the environment
• Attempt to let world knowledge reside in the
  computer interface
• Reduces memory load

14
15
Affordances in Interface Design

• Pressing
• Sequential affordance
• Grab and slide
• Cut and paste
• Trade-off - knowledge in head or in interface
• Efficiency vs ease of use
• More detail displayed
• increases search time
• less memory load

15
16
A Good System Image

• Familiar to users
• Matches way they think about domain
• Preferably based on a concrete metaphor
• Coherent
• Supports learning by exploration
• Hides system model
• Reflects current status - changes are notified
• Supports retention
• Reduces need for training

16
17
Lecture Review

• Definitions
• System model
• Conceptual model
• System image
• Mental model
• Conceptual design
• Conceptual model as a basis for user interface
• Metaphors
• Affordance
• System image

22