human computer interaction
Download
Skip this Video
Download Presentation
Human-Computer Interaction

Loading in 2 Seconds...

play fullscreen
1 / 97

Human-Computer Interaction - PowerPoint PPT Presentation


  • 250 Views
  • Uploaded on

Human-Computer Interaction. Lecture 3 – the science of usability. Some lessons from history. Control panels. scientific instruments physically reconfigured look at lamps & CRTs simple human factors. apply existing design guidance. DIMENSION A(11) READ A 2 DO 3,8,11 J=1,11

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Human-Computer Interaction' - Jeffrey


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
human computer interaction

Human-Computer Interaction

Lecture 3 – the science of usability

control panels
Control panels
  • scientific instruments
  • physically reconfigured
  • look at lamps & CRTs
  • simple human factors

apply existing design guidance

algebraic languages

DIMENSION A(11)

READ A

2 DO 3,8,11 J=1,11

3 I=11-J

Y=SQRT(ABS(A(I+1)))+5*A(I+1)**3

IF (400>=Y) 8,4

4 PRINT I,999.

GOTO 2

8 PRINT I,Y

11 STOP

Algebraic languages
  • work at your desk
  • translate formulae

user’s own context and language

data files
Data files
  • since 1890 census
  • ‘key-punch’ typists
  • file with rubber bands and paperclips

paper procedures are useful

command lines
Command lines
  • teletypes since 1925
    • still Unix ‘TTY’
  • user sends command, waits for response
  • interaction dialogue

tasks are structured in time

OBEY

YES

SIR

line editors command and response
Line editors – command and response
  • User must:
    • define command context
    • remember internal state
    • request reminders

10p

quick brown foz

.s/foz/fox/

+

?

9p

ggggg

.d

menus
Menus
  • what commands can I perform?
  • why not list them for user to choose?

:afb21$ ex

Entering Ex mode. Type "visual"

to get out.

:help

"help.txt" [readonly] 1185 lines,

55790 characters

:

recognition is easier than recall

w hat y ou s ee i s w hat y ou g et
WhatYouSeeIsWhatYouGet
  • “glass teletypes”
    • ‘scroll’ up the screen
  • ‘full-screen’ editor
    • user can see context

let users see what interests them

modeless interaction
Modeless interaction
  • Early full-screen editors built on line editors (e.g. vi)
    • request preview of file contents
    • command line area at bottom of screen
    • the same key sometimes enters text and sometimes triggers a command depending where you are
  • User studies explored confusion and complaints
    • Modal interaction is unpredictable
  • In modeless editors (e.g. emacs)
    • Given keystroke has the same effect in any context

no modes!

pointing devices
Pointing devices
  • define text position
  • select from menu
  • light pen
  • joystick
  • mouse
graphical displays
Graphical displays
  • toggle between
    • text (control) mode
    • graphic (output) mode.
icons and windows
Icons and windows
  • bitmapped displays
  • contextual modes separated by frames.
  • pictures represent abstract entities.
w indow i con m enu p ointer
WindowIconMenuPointer

first UI that was both acceptable and affordable

little change since 1984

direct manipulation
Direct manipulation
  • Described by Shneiderman:
    • objects of interest continuously visible
    • operations by physical actions, not commands
    • actions rapid, incremental, reversible
    • effect of actions immediately visible
    • basic commands for novices, more for experts
  • Still not true of all GUIs
graphics without directness
Graphics without directness
  • Object of analysis isn’t visible
  • Effect of controls isn’t immediate
  • All functions are presented to novices
even less direct
Even less direct!

remember direct manipulation

slide24

output

input

output

input

From research into visual perception

Computer

User

From research into

physical motion

slide25

The User

longtermmemory

workingmemory

vision

vision

input

problem

solving

motion

control

output

how to see marr
How to see (Marr)

retinal

image

primal

sketch

2 1/2D

sketch

3D

model

Pivot

- handle

- cylinder

- hinge

- screw

- …

- …

- …

how to see in 2 5d
How to see in 2.5D

A whole lot of rubbish which is not at all important apart from needing to show that a window can have contents. It would be better if it actually said something of value, or even better if it happened to include some graphics, controls (such as menu bars or other realistic items) but that would have the disadvantage of managing and copying multiple items (or single large items in the case of windows grabbed from the screen - they could be down-sampled, but then they wouldn’t be legible anyway). So on the whole it is best to stick with this. Sorry.

A whole lot of rubbish which is not at all important apart from needing to show that a window can have contents. It would be better if it actually said something of value, or even better if it happened to include some graphics, controls (such as menu bars or other realistic items) but that would have the disadvantage of managing and copying multiple items (or single large items in the case of windows grabbed from the screen - they could be down-sampled, but then they wouldn’t be legible anyway). So on the whole it is best to stick with this. Sorry.

A whole lot of rubbish which is not at all important apart from needing to show that a window can have contents. It would be better if it actually said something of value, or even better if it happened to include some graphics, controls (such as menu bars or other realistic items) but that would have the disadvantage of managing and copying multiple items (or single large items in the case of windows grabbed from the screen - they could be down-sampled, but then they wouldn’t be legible anyway). So on the whole it is best to stick with this. Sorry.

slide32

The User

longtermmemory

workingmemory

vision

input

problem

solving

motion

control

output

how to move fitts law
How to move (Fitts’ Law)
  • Make big targets
  • Make them close

<

<

slide34

The User

workingmemory

longtermmemory

vision

input

problem

solving

motion

control

output

how to remember miller 1956
How to remember (Miller 1956)
  • The magic number 7+/-2
  • ksnehfifmwbtdoanebgocnesj
  • fruitapplegrapeguavalemon
slide36

The User

longtermmemory

workingmemory

vision

input

problem

solving

motion

control

output

learn these
keyboard

banana

absence

speed

pencil

notebook

withhold

telephone

category

rucksack

concern

camel

classic

correct

bicycle

transfer

function

armchair

Learn these
how to learn paivio 1972
keyboard

camel

rucksack

bicycle

armchair

banana

notebook

telephone

pencil

concern

speed

absence

withhold

category

classic

correct

transfer

function

How to learn (Paivio 1972)
slide42

The User

longtermmemory

workingmemory

vision

input

problem

solving

motion

control

output

how to think ernst newell 1969
How to think (Ernst & Newell 1969)
  • Reduce difference between current and goal state
  • Decompose new goal into sub-goals (recursively)

buy pizza

get money

go to shop

buy it

findjob

comparing designs before implementation

Comparing designs before implementation

Predicting human performance quantitatively

goms and the model human processor
GOMS and the Model Human Processor
  • Goals: what is the user trying to do?
  • Operators: what actions must they take?
    • Home hands on keyboard or mouse
    • Key press & release (tapping keyboard or mouse button)
    • Point using mouse/lightpen etc
  • Methods: what have they learned in the past?
  • Selection: how will they choose what to do?
    • Mental preparation
quantitative prediction from a model human
Quantitative prediction from a model human
  • Which is faster? Make a word bold using

a) Keys only

b) Font dialog

keys only method
Keys-only method

<shift> + 

 + 

 + + + 

<ctrl> + b

keys only method48
Mental preparation: M

Home on keyboard: H

Mental preparation: M

Hold down shift: K

Press : K

Press : K

Press : K

Press : K

Press : K

Press : K

Press : K

Release shift: K

Mental preparation: M

Hold down control: K

Press b: K

Release control: K

Keys-only method
keys only method49
1 occurrence of H

3 occurrences of M

12 occurrences of K

0.40

1.35 * 3

0.28 * 12

7.81 seconds

Keys-only method
font dialog method
Font dialog method

click,drag

move,

click

release,

move

move,

click

release

click,

move

motion times from fitts law
From start of “The” to end of “cat” (t ~ k log (A/W)):

distance 110 pixels, target width 26 pixels, t = 0.88 s

From end of “cat” to Format item on menu bar:

distance 97 pixels, target width 25 pixels, t = 0.85 s

Down to the Font item on the Format menu:

distance 23 pixels, target width 26 pixels, t = 0.34 s

To the “bold” entry in the font dialog:

distance 268 pixels, target width 16 pixels, t = 1.53 s

From “bold” to the OK button in the font dialog:

distance 305 pixels, target width 20 pixels, t = 1.49 s

Motion times from Fitts’ law
font dialog method52
Mental preparation: M

Reach for mouse: H

Point to “The”: P

Click: K

Drag past “cat”: P

Release: K

Mental preparation: M

Point to menu bar: P

Click: K

Drag to “Font”: P

Release: K

Mental preparation: M

Move to “bold”: P

Click: K

Release: K

Mental preparation: M

Move to “OK”: P

Click: K

Font dialog method
font dialog method53
1 occurrence of H

4 occurrences of M

7 occurrences of K

6 mouse motions P

Total for dialog method:

Total for keyboard method:

0.40

1.35 * 4

0.28 * 7

1.1 + 0.88 + 0.85 + 0.34 + 1.53 + 1.49

13.95 seconds (+ 1 R)

vs.

7.81 seconds

Font dialog method
problems
Problems

You could probably guess that by common sense

The predictions aren’t very accurate

There is a huge range between individuals

Individual performance improves with practice

Predictions only apply to practiced tasks

Predictions don’t account for mistakes

Most people give up at learning time anyway

comparing designs after implementation

Comparing designs after implementation

Measuring human performance quantitatively

controlled experiments
Controlled experiments
  • Based on a number of observations:
    • How long did Fred take to order a CD from Amazon?
    • How many errors did he make?
  • But every observation is different.
  • So we compare averages:
    • over a number of trials
    • over a range of people (experimental subjects)
  • Results often have a normal distribution
statistics histograms distributions

normalisation

log normalisation

mean

“outlier”

variance

(statistics: histograms & distributions)

number of

observations

4

3

2

1

time

5

10

15

20

25

30

35

40

45

experimental treatments
Experimental treatments
  • A treatment is some modification that we expect to have an effect on usability:
    • How long does Fred take to order a CD using this great new interface, compared to the crummy old one?
    • Expected answer: usually faster, but not always

number of

observation

trials

new

old

time taken to order CD

(faster)

hypothesis testing
Hypothesis testing
  • Null hypothesis:
    • What is the probability that this amount of difference in means could be random variation between samples?
    • Hopefully very low (p < 0.01, or 1%)
    • Use a statistical significance test, such as the t-test.

only

random

variation

observed

observed effect

probably does

result from

treatment

very significant

effect of

treatment

sources of variation
Sources of variation
  • People differ, so quantitative approaches to HCI must be statistical.
  • We must distinguish sources of variation:
    • The effect of the treatment - what we want to measure.
    • Individual differences between subjects (e.g. IQ).
    • Distractions during the trial (e.g. sneezing).
    • Motivation of the subject (e.g. Mondays).
    • Accidental intervention by experimenter (e.g. hints).
    • Other random factors.
  • Good experimental design and analysis isolates these.
problems61
Problems

Huge variation between people (~200%)

Mistakes mean huge variation in accuracy (~1000%)

Improvements are often small (~20%)

… or even negative (because new & unfamiliar)

Most people give up at learning time anyway

comparing learning before implementation

Comparing learning before implementation

Predicting human performance qualitatively

mental models
Mental models
  • Study of the mental representations used for everyday problem-solving by ordinary people
  • The mental model of the user is not the mental model of the designer …
    • but can be influenced by the designer.
designer s model
Designer’s model?

Toilets

Kitchen

Wiring closet

Plantroom

Stairs

solving problems with mental models

Copy in

Illustrator

Paste in

Photoshop

Paste in

Word

Solving problems with mental models

Copy in

Illustrator

What happened?

Data discarded?

Translation?

Override?

Two clipboards?

Layers?

Canedit text

Can’tedit text

think aloud studies
Think-aloud studies
  • Alternative method for studying a user’s mental model in a controlled “problem-solving” task.
  • Subject talks continuously while performing task.
    • transcribed as a verbal protocol for detailed study
  • Useful for exploratory investigations, where there is no initial experimental hypothesis:
    • preliminary investigation of a user task, perhaps before any software is developed.
    • evaluate software when no alternative designs are available.
rapid prototyping for software
Rapid prototyping for software

Professional designers make extensive use of rapid sketching, so that they can quickly assess and evaluate many different ideas for themselves.

Car designers, architects and product designers make rapid prototypes with clay, cardboard or3D printing to show other people.

It’s very expensive to develop a user interface in order to test your design ideas experimentally.

But extremely valuable to learn about and anticipate user’s mental models in think aloud.

wizard of oz implementation
Wizard-of-Oz implementation
  • Originally invented to evaluate artificially intelligent dialogue systems
    • User typed on a real computer, but computer answers were simulated by a ‘man behind the curtain’
  • With a paper prototype, it’s not necessary to hide behind a curtain!
    • Just ask the user to ‘click’ by pointing on your paper prototype
    • Simulate the system response by sticking on another Post-it note ‘window’, or replacing the piece of paper
  • Paper can be more or less ‘low-fidelity’ (can use hard copies of Photoshopped screen mockups).
computer tools for lo fi prototyping
Computer tools for lo-fi prototyping
  • Some of the WoZ functions can use a computer:
    • e.g. DENIM from University of Washington
    • Take photographs of your paper sketches
    • Display the rough pencil drawings on the screen
    • Define control areas and ‘buttons’
    • Simulation tool changes to other sketch screens in response to user actions
  • Variants
    • SILK – ‘sketch’ by drawing on the screen itself
    • Or just load sequence of photos on an iPod and flick through them
  • The ‘sketchy’ appearance helps users comment
storyboard or click through prototypes
Storyboard or ‘click-through’ prototypes
  • Doesn’t allow user interaction, but does help them imagine what the system will be like to use.
  • PowerPoint is the most commonly used tool
    • Load a series of screen mockups
    • Move the mouse pointer over the screen as though you are controlling it
    • Point at a button and click
    • (but of course, Powerpoint will always go to the next slide, regardless of where the pointer is when you click)
time to start work
Time to start work!
  • Create a low-fidelity prototype from your sketches of Critical Care for the World
  • Continue thinking of alternative designs
  • Can still be paper only at this stage
    • But play with DENIM, with Powerpoint, or some other mockup technique if you like
  • Bring work in progress to next two lectures
    • (remember we have a guest on Tuesday)
surveys and questionnaires
Surveys and questionnaires
  • Collect subjective evaluation from users
    • more like market research than like opinion polls
  • Closed questions …
    • yes/no or Likert scale (opinion from 1 to 5)
    • useful for statistical comparison
  • Open questions …
    • require coding frame to structure data
    • useful for exploratory investigation
  • Questionnaires: valuable for online studies
bad evaluation techniques
Bad evaluation techniques
  • Purely affective reports: 20 subjects answered the question “Do you like this nice new user interface more than that ugly old one?”
  • No testing at all: “It was decided that more colours should be used in order to increase usability.”
  • Introspective reports made by a single subject (often the programmer or project manager): “I find it far more intuitive to do it this way, and the users will too.”
cognitive walkthrough
Cognitive Walkthrough
  • Third usability evaluation technique.
  • Advantages over heuristic evaluation:
    • analyses user problems, not just system features.
  • Advantages over keystroke level models:
    • accepts that user might not be an expert.
    • can deal with situations where the user is meeting a task for the first time.
  • Based on an explicit cognitive model: the CE+ theory of exploratory learning. (Lewis & Polson)
cognitive model of cw
Cognitive model of CW
  • User sets a goal to be accomplished, in terms of the expected system capabilities.
  • User searches interface for currently available actions.
  • User selects the action that seems likely to make progress toward the goal.
  • User performs the selected action and evaluates the feedback given by the system, looking for evidence that progress has been made.
evaluation procedure
Evaluation procedure
  • Manually simulate a user carrying out the stages of the model.
  • Evaluators move through task, telling a story about why user would choose each action.
  • Evaluate the story according to:
    • user’s current goal.
    • accessibility of correct control.
    • quality of match between label and goal.
    • feedback after the action.
prerequisites
Prerequisites
  • Type of user:
    • Wallace and Gromit fan
  • Their knowledge:
    • Stereos & Walkmans
    • Windows
  • Representative tasks:
    • Play a CD
    • Play an MP3 file
    • Eject a CD
correct action sequences
Correct action sequences
  • Play a CD:
    • insert CD, wait for drive to read it, press play.
  • Play an MP3 file:
    • open menu for further functions, open music library browser, select album and track.
  • Eject a CD:
    • open main window, press eject button.
playing a cd
Playing a CD
  • Insert CD, wait for drive to read it:
    • Story: user starts player, inserts CD in drive. Tries to press “Play”, but it isn’t available yet. Notices that the CD has not loaded yet. Waits, and CD then loads.
      • Goal: Start player.
      • Accessibility: Controls not accessible until CD read.
      • Match: OK - controls greyed, status area blank, although no indication of need to wait.
      • Feedback: Good - afterloading, controls areenabled, name of CDand track appears.
playing a cd87
Playing a CD
  • Press play:
    • Story: user inspects the available controls, notes similarity to familiar audio controls. Presses play.
      • Goal: Start playing first track on CD.
      • Accessibility: Play button is very prominent.
      • Match: Good - looks like a play button in context.
      • Feedback: Good - button getsrecessed, track indicator moves,track counter starts, sound starts.
        • (but may be a problem if thevolume is turned right down).
playing an mp3 file
Playing an MP3 file
  • Open menu for further functions:
    • Story: user will try various buttons before finding the menu control.
      • Goal: Find MP3 functions.
      • Accessibility: Not directly accessible.
      • Match: Bad - nonstandard menu button.
      • Feedback: OK once menu discovered.
        • Tooltips do help, although only if you know you need a menu.
playing an mp3 file89
Playing an MP3 file
  • Open browser:
    • Goal: choose MP3 track to be played.
    • Match: Bad - should user choose menu item “Select from Master Library” or “Browse Master Library”?
playing an mp3 file90
Playing an MP3 file
  • Select album and track:
      • Accessibility: OK - tracks are clearly in a hierarchy.
      • Match: Good - conventional Windows tree browser.
ejecting a cd
Ejecting a CD
  • Open main window:
    • Story: the user has seen the main window, knows it has an eject button, but doesn’t know how to get there.
      • Goal: open main window.
      • Accessibility: the button is on the current display.
      • Match: ?
  • Press eject button …
structured interviews
Structured interviews
  • Additional to requirements definition meetings.
  • Encourage participation from a range of users.
  • Structured in order to:
    • collect data into common framework
    • ensure all important aspects covered
  • Newman & Lamming’s proposed structure:
    • activities, methods and connections
    • measures, exceptions and domain knowledge
observational task analysis
Observational task analysis
  • Less intrusive than interviews.
  • Potentially more objective
  • Harder work:
    • transcription from video protocol
      • relative duration of sub-tasks
      • transitions between sub-tasks
      • interruptions of tasks
    • alternatively, transcription from audio recording
ethnographic field studies
Ethnographic field studies
  • Field observation to understand users and context
  • Division of labour and its coordination
  • Plans and procedures
    • When do they succeed and fail?
  • Where paperwork meets computer work
  • Local knowledge and everyday skills
  • Spatial and temporal organisation
  • Organisational memory
    • How do people learn to do their work?
    • Do formal methods match reality?
  • See Beyer & Holtzblatt, Contextual Design
write user personas
Write user personas
  • Distillation of field work, user studies etc into a form usable by design teams.
  • Write fictional portraits of individuals representing various kinds of user.
  • Help software engineers to remember that customers are not like them …
    • or their friends …
    • or anyone they’ve ever met!
product field testing
Product field testing
  • Brings advantages of task analysis to assessment & testing phases of product development.
  • Case study: Intuit Inc.’s Quicken product
    • originally based on interviews and observation
    • follow-me-home programme after product release:
      • random selection of shrink-wrap buyers;
      • observation while reading manuals, installing, using.
    • Quicken success was attributed to the programme:
      • survived predatory competition, later valued at $15 billion.
ad