1 Human-Computer Interaction Designing the User’s Conceptual Model.

18
1 Human-Computer Human-Computer Interaction Interaction Designing the User’s Designing the User’s Conceptual Model Conceptual Model

Transcript of 1 Human-Computer Interaction Designing the User’s Conceptual Model.

Page 1: 1 Human-Computer Interaction Designing the User’s Conceptual Model.

1

Human-Computer InteractionHuman-Computer Interaction

Designing the User’s Designing the User’s Conceptual Model Conceptual Model

Page 2: 1 Human-Computer Interaction Designing the User’s Conceptual Model.

2

Lecture OverviewLecture Overview

• DefinitionsDefinitions• System modelSystem model

• Conceptual modelConceptual model

• System imageSystem image

• Mental modelMental model

• Conceptual model designConceptual model design

• MetaphorsMetaphors

• AffordanceAffordance

• System images - example screen shotsSystem images - example screen shots

Page 3: 1 Human-Computer Interaction Designing the User’s Conceptual Model.

3

Users’ Mental ModelsUsers’ Mental Models

Not always easy to convey

Simplified representations

Page 4: 1 Human-Computer Interaction Designing the User’s Conceptual Model.

Mental Model

Designer / Developer User

- Incomplete- Unstable- Unscientific

- Static- Dynamic

System Image

System Model

TECHNICAL- Hardware- Software

Conceptual

Model

System, Conceptual and Mental Models, and System Image

Page 5: 1 Human-Computer Interaction Designing the User’s Conceptual Model.

5

Mental Models Provide Mental Models Provide Explanation and PredictionExplanation and Prediction

• Provide structure to link cause and effectProvide structure to link cause and effect

• ExplanationExplanation• What am I now seeing?What am I now seeing?

• What did the system just do?What did the system just do?

• What did I do to make it do that?What did I do to make it do that?

• PredictionPrediction• What can I do next?What can I do next?

• What if I do this?What if I do this?

• What will the system do then?What will the system do then?

• What will I see as a result?What will I see as a result?

Page 6: 1 Human-Computer Interaction Designing the User’s Conceptual Model.

6

Conceptual Model DesignConceptual Model Design

• First: design conceptual modelFirst: design conceptual model• KISSKISS

• Protect users from technicalitiesProtect users from technicalities

• Second: design system image (i.e. user Second: design system image (i.e. user interface) to convey conceptual modelinterface) to convey conceptual model

• Each individual user will develop own modelEach individual user will develop own model

Page 7: 1 Human-Computer Interaction Designing the User’s Conceptual Model.

7

Main Forms of Mental ModelMain Forms of Mental Model

Object-action Object-action • E.g. direct manipulation drawing packageE.g. direct manipulation drawing package

State transitionState transition• E.g. phone, fax, ATM, menu systemE.g. phone, fax, ATM, menu system• System switches between different modes of System switches between different modes of

behaviourbehaviour

• User may have more than one type of model of a User may have more than one type of model of a given systemgiven system

Page 8: 1 Human-Computer Interaction Designing the User’s Conceptual Model.

8

MetaphorsMetaphors

• Basis of conceptual modelBasis of conceptual model

• Allows user to infer from metaphor to systemAllows user to infer from metaphor to system

• Suggests possible operationsSuggests possible operations

• One application may draw on multiple metaphorsOne application may draw on multiple metaphors

• If poorly chosen, can confuse or limit If poorly chosen, can confuse or limit understandingunderstanding

Page 9: 1 Human-Computer Interaction Designing the User’s Conceptual Model.

9

MetaphorsMetaphors

• Draws on user’s prior Draws on user’s prior knowledge and experienceknowledge and experience

• Short-cuts to understanding Short-cuts to understanding complex conceptscomplex concepts

• e.g Desktop, printer’s light boxe.g Desktop, printer’s light box

• Scope - number of concepts Scope - number of concepts involved, e.g. involved, e.g.

• e.g. partial metaphor se.g. partial metaphor s

• rulerruler

• calculatorcalculator

Page 10: 1 Human-Computer Interaction Designing the User’s Conceptual Model.

10

Metaphors ForeverMetaphors Forever

• Finding metaphors is easyFinding metaphors is easy

• Finding good metaphors is difficultFinding good metaphors is difficult

• Allow for ‘magic’Allow for ‘magic’• E.g. Insert/delete row/column in spreadsheetE.g. Insert/delete row/column in spreadsheet

Page 11: 1 Human-Computer Interaction Designing the User’s Conceptual Model.

11

Major Metaphors and Typical Major Metaphors and Typical Application AreasApplication Areas

• Desktop metaphorDesktop metaphor• E.g. operating environmentE.g. operating environment

• ‘‘Webtop metaphor’Webtop metaphor’• Physical object metaphorPhysical object metaphor

• E.g. object-oriented environmentE.g. object-oriented environment

• Travel holiday metaphorTravel holiday metaphor• E.g. learning environmentE.g. learning environment

• Ledger sheet metaphorLedger sheet metaphor• E.g. spreadsheetE.g. spreadsheet

• NotecardsNotecards• HypertextHypertext

Page 12: 1 Human-Computer Interaction Designing the User’s Conceptual Model.

Objects and AffordanceObjects and Affordance

Obvious by shape how to use most everyday thingsObvious by shape how to use most everyday things

Page 13: 1 Human-Computer Interaction Designing the User’s Conceptual Model.

13

Theory of AffordanceTheory of Affordance

• Perceived potential for action of an object Perceived potential for action of an object

• Property of an object with reference to the observerProperty of an object with reference to the observer

• No prior experience requiredNo prior experience required

• Information pickup - exploratory activity of looking and Information pickup - exploratory activity of looking and moving aroundmoving around

“Much of our everyday knowledge resides in the world, not in the head”

Don Norman, 1988

Page 14: 1 Human-Computer Interaction Designing the User’s Conceptual Model.

Objects and AffordanceObjects and Affordance

© Gary Larson

Page 15: 1 Human-Computer Interaction Designing the User’s Conceptual Model.

14

Implications of Affordance in User Implications of Affordance in User InterfacesInterfaces

• Users do not learn interfaces in detailUsers do not learn interfaces in detail• Rely on fluid use of information picked up from the interface Rely on fluid use of information picked up from the interface

rather than a retention of this information in memoryrather than a retention of this information in memory

• SkillSkill• Not the accumulation of knowledge, butNot the accumulation of knowledge, but

• The education of attention to allow faster pickup of information The education of attention to allow faster pickup of information from the environmentfrom the environment

• Attempt to let world knowledge reside in the Attempt to let world knowledge reside in the computer interfacecomputer interface

• Reduces memory loadReduces memory load

Page 16: 1 Human-Computer Interaction Designing the User’s Conceptual Model.

15

Affordances in Interface DesignAffordances in Interface Design

• PressingPressing• Sequential affordanceSequential affordance

• Grab and slideGrab and slide• Cut and pasteCut and paste

• Trade-off - knowledge in head or in interfaceTrade-off - knowledge in head or in interface• Efficiency vs ease of useEfficiency vs ease of use• More detail displayedMore detail displayed

• increases search timeincreases search time• less memory loadless memory load

Page 17: 1 Human-Computer Interaction Designing the User’s Conceptual Model.

16

A ‘Good’ System ImageA ‘Good’ System Image

• Familiar to usersFamiliar to users• Matches way they think about domainMatches way they think about domain

• Preferably based on a concrete metaphorPreferably based on a concrete metaphor

• CoherentCoherent

• Supports learning by explorationSupports learning by exploration

• Hides system modelHides system model

• Reflects current status - changes are notifiedReflects current status - changes are notified

• Supports retentionSupports retention

• Reduces need for trainingReduces need for training

Page 18: 1 Human-Computer Interaction Designing the User’s Conceptual Model.

22

Lecture ReviewLecture Review

• DefinitionsDefinitions• System modelSystem model

• Conceptual modelConceptual model

• System imageSystem image

• Mental modelMental model

• Conceptual designConceptual design• Conceptual model as a basis for user interfaceConceptual model as a basis for user interface

• MetaphorsMetaphors

• AffordanceAffordance

• System imageSystem image