CSCD 487/587Human Computer Interface

Winter 2013

Lecture 6Human Cognition Continued

more

Overview Look more in depth at models of cognition Visual details important for designers of

interactive systems Other senses are not as important Look at that next time

3

CONCEPTUAL MODELS

Model can help designers make decisionshow the interface should look and feeleven what functions are important

What information do we present to the user?What information do we want to ge back from the user?

First step in Design Important to develop a unifying model for the interface

how it is organised how it operates the concepts modelled by the interface the relationships between those concepts

4

CONCEPTUAL MODELS

Model can help designers make decisionsHow the interface should look and feeleven what functions are important

E.g. what's the underlying model of selection in PowerPoint?

Simple click selects an item?Shift click toggles an item's entry in a listSimple click clears the list and adds an item

5

BENEFITS TO THE DESIGN TEAM

1. Allows them to focus on user experience

2. Gives them a common vocabulary

if they talk to each other

3.Delays commitment to detailed design

4. Facilitates future developmentsmodel paves the way for future developmentstho' it's understood that they won't be implemented just yet

6

WHAT'S IN A CONCEPTUAL MODEL?Metaphors and analogies

Assist users to understand the purpose of the productAssist users to understand the usage of product

Concepts that underlie the product need to be clear

Paint tools apply colour to a surfaceDrawing tools construct geometric shapesPhoto editing tools apply filters to an image

Ex.: cf scribbler

7

AN EARLY, INFLUENTIAL CONCEPTUAL MODEL

VISICALC

Calculation tool for financial modellingNot based on a calculatorShowed many data itemsAllowed many identical calculations

Based on existing systemLedger sheetFamiliar appearanceKnown to be valuable

Extended existing systemReal-time data entryReal-time calculations

8

ANALYSE THE PROBLEM SPACE FIRSTIf We Don't Use Conceptual Models ….

Starting with functional requirementsCan obscure usability considerations

Starting with an interface technologyCan lead to inappropriate interfacesConsider GPS car navigation system

VR heads-up display – obscure real itemsmaps on LCD displays – distractingspoken instructions redress the balance

Start with Abstract AnalysisAssumptions – reasons, often presented without empirical justificationClaims – have to be lived up togoals

not bad practice, if they can be verified

Both have been used

9

WHAT DID THE DEVELOPERS ASSUME? itunes

Users want to organise playlistsUsers will organise their music files with itunesFocus on individual songs?Focus on albums?People will buy individual songs

How do you rate importance of Playing individual songs?Playing playlists?

What could you do to verify what users wanted?

when playingmoreso when buying

Were Apple's assumptions warranted?

10

WHAT DID THE DEVELOPERS CLAIM?With the integrated iTunes Store, you can build a collection of

• digital music• movies• TV shows• iPod games• audiobooks• podcasts

from the comfort of your computer

http://www.apple.com/itunes/overview

11

INTERFACE METAPHORS

Provide similarity to a real-world, physical object Called an analogy if appearance is similar People do variety of clerical, drawing, etc. tasks at a desk Computers that facilitate similar tasks should be similar to this

Metaphor is not limited to properties of real-world objectcopying files or folderssearching for files

Replaces computer-related jargon with familiar termseasier to learn and talk about

Metaphor may be quite abstractWhat sort of engine is in a search engine

• Steam, gas turbine, internal combustion?

12

BENEFITS OF INTERFACE METAPHORS

Provides a clue to the underlying conceptual model

Familiarity reduces difficulty of learning

Empowers a wide variety of non-technical users

Before the desktop metaphor, computer usage was hieratic

Well-chosen metaphor can prompt new functionalityShortcuts allow files to be in two places at once

13

PROBLEMS WITH INTERFACE METAPHORS

Can limit designers' exploration of the solution spacecf. "well-chosen metaphor can prompt new functionality"

Can conflict with interface design principlesMusic software often has rotary knobslinear movements are easier with a mouse

Can restrict users' understanding of the system to the metaphor

Variable names in programming languages hide reality of storage allocation

14

INTERPRET DATA FOR THE USER TO GUIDE DECISIONS

Copying one file over another requires confirmation

Why doesn’t it show Filesizes graphicallyand a timeline to indicate relative ages of the files?

Or compare filesizes and dates for the user

the existing file with this bigger, newer file

1.76MB3.57.50pmTuesday

8 March 2007

2.76MB3.49.44am

Today12 March 2007

CancelConfirm

incoming file isbigger and newer

Confirm file replace

21Dec

2:43:24

2003

4Feb

19:33:12

2008

74MB

25MB 74MB

CancelConfirm

Confirm file replace

incoming file isbigger and older

21Dec

2:43:24

2003

4Feb

19:33:12

2008

74MB

25MB74MB

CancelConfirm

Confirm file replace

incoming file issmaller and newer

21Dec

2:43:24

2003

4Feb

19:33:12

2008

74MB

25MB

25MB

CancelConfirm

Confirm file replace

21Dec

2:43:24

2003

4Feb2008

74MB

25MB

incoming file issmaller and older

25MB

15

MAKE THE MENTAL MODEL CLEAR

Internal construction of some aspect of the external worldenabling predictions to be made

?

“The designer has a clear (mental) model of how the system works, but the ‘system image’ does not convey it and the user gets lost.”

16

WHAT'S THE MIND LIKE?

Information processing modelData entersSuccessive processing stages

imagesmental modelsrules

Delaysenables predictions of times required to performspecific tasks

Internal and external information"external cognition" uses

input

encoding

comparison

responseselection

responseexecution

output

17

GOMS Models

GOMS: Definition Overview of GOMShttp://www.cs.cmu.edu/~bej/

CognitiveModelingForUIDesign/2a_GOMS_Architectures.pdf

GOMS models user’s behavior in terms of: Goals

What the user wants to do. Operators

Specific steps a user is able to take and assigned a specific execution time.

Methods Well-learned sequences of subgoals and operators that can accomplish

a goal. Selection Rules

Guidelines for deciding between multiple methods.

GOMS: A Family of Models Keystroke-Level Model (KLM) Card, Moran, and Newell (CMN-

GOMS) We will only look at first two Natural GOMS Language (NGOMSL) Cognitive-Perceptual-Motor GOMS (CPM-GOMS)

GOMS: Keystroke-Level Model (KLM) Simplest GOMS technique

Basis for all other GOMS techniques Predicts execution time

Requires analyst-supplied methods Assumes that routine cognitive skills can be

decomposed into a serial sequence of basic cognitive operations and motor activities, which are:

K: A keystroke (280 msec) M: A single mental operator (1350 msec) P: Pointing to a target on a small display (1100 msec) H: Moving hands from the keyboard to a mouse (400

msec)

Top-level Goal: Edit Manuscript (move “quick brown” to before “fox”)

Subgoal: Highlight text

Operators: Move-mouse Click mouse-button

Type characters (keyboard shortcuts)

Methods: 1. Delete-word-and-retype (retype method) 2. Cut-and-paste-using-keyboard-shortcuts

(shortcuts method) 3. Cut-and-paste-using menus (menus method)

Selection Rules: If the text to be moved is one or two characters long, use retype method

Else, if remember shortcuts, use shortcuts method

Else, use the menus method

KLM Example

Description Operator Duration (sec)

Mentally Prepare M 1.35

Move cursor to “quick” P 1.10

Double-click mouse button K 0.40

Move cursor to “brown” P 1.10

Shift-click mouse button K 0.40

Mentally Prepare M 1.35

Move cursor to Edit Menu P 1.10

Click mouse button K 0.20

Move cursor to Cut menu item P 1.10

Click mouse button K 0.20

Mentally Prepare M 1.35

Move cursor to before “fox” P 1.10

Click mouse button K 0.20

Mentally Prepare M 1.35

Move cursor to Edit menu P 1.10

Click mouse button K 0.20

Move cursor to Paste menu item P 1.10

Click mouse button K 0.20

TOTAL PREDICTED TIMETOTAL PREDICTED TIME 14.9014.90

Method Used

Cut-and-paste-using-menus

1

2

3

4

5

M=1.35P=1.10K=0.20

GOMS: Card, Moran, and Newell (CMN-GOMS) Subgoal invocations and method

selection are predicted by the model given the task situation

Predicts operator sequence and execution time

Based directly on the Model Human Processor

Description Duration (sec)

GOAL: MOVE-TEXT

…….GOAL: CUT-TEXT

……………GOAL: HIGHLIGHT-TEXT

………………..MOVE-CURSOR-TO-BEGINNING 1.10

………………..CLICK-MOUSE-BUTTON 0.20

………………..MOVE-CURSOR-TO-END 1.10

………………..SHIFT-CLICK-MOUSE-BUTTON 0.48

………………..VERIFY-HIGHLIGHT 1.35

……….........GOAL: ISSUE-CUT-COMMAND

…………………MOVE-CURSOR-TO-EDIT-MENU

…………………PRESS-MOUSE-BUTTON 0.10

…………………MOVE-MOUSE-TO-CUT-ITEM 1.10

…………………VERIFY-HIGHLIGHT 1.35

…………………RELEASE-MOUSE-BUTTON 0.10

………GOAL: PASTE-TEXT

…………….GOAL: POSITION-CURSOR-AT-INSERTION-POINT

…………………MOVE-CURSOR-TO-INSERTION-POINT 1.10

…………………CLICK-MOUSE-BUTTON 0.20

…………………VERIFY-POSITION 1.35

…………….GOAL: ISSUE-PASTE-COMMAND

…………………MOVE-CURSOR-TO-EDIT-MENU

…………………PRESS-MOUSE-BUTTON 0.10

…………………MOVE-MOUSE-TO-PASTE-ITEM

…………………VERIFY-HIGHLIGHT 1.35

…………………RELEASE-MOUSE-BUTTON 0.10

TOTAL PREDICTED TIMETOTAL PREDICTED TIME 14.3814.38

CMN-GOMSCMN-GOMS

Summary

Models and knowledge of cognitive processes can only help with designing interfaces

Should know what humans are thinking (in general) when they are presented with color, visual cues and complexity

The End

Talk about assignment today.