Human computer interaction
Download
1 / 97

Human-Computer Interaction - PowerPoint PPT Presentation


  • 241 Views
  • Updated 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 l.jpg

Human-Computer Interaction

Lecture 3 – the science of usability



Control panels l.jpg
Control panels

  • scientific instruments

  • physically reconfigured

  • look at lamps & CRTs

  • simple human factors

apply existing design guidance


Algebraic languages l.jpg

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 l.jpg
Data files

  • since 1890 census

  • ‘key-punch’ typists

  • file with rubber bands and paperclips

paper procedures are useful


Command lines l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
WhatYouSeeIsWhatYouGet

  • “glass teletypes”

    • ‘scroll’ up the screen

  • ‘full-screen’ editor

    • user can see context

let users see what interests them


Modeless interaction l.jpg
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 l.jpg
Pointing devices

  • define text position

  • select from menu

  • light pen

  • joystick

  • mouse


Graphical displays l.jpg
Graphical displays

  • toggle between

    • text (control) mode

    • graphic (output) mode.


Icons and windows l.jpg
Icons and windows

  • bitmapped displays

  • contextual modes separated by frames.

  • pictures represent abstract entities.


W indow i con m enu p ointer l.jpg
WindowIconMenuPointer

first UI that was both acceptable and affordable

little change since 1984


Direct manipulation l.jpg
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 l.jpg
Graphics without directness

  • Object of analysis isn’t visible

  • Effect of controls isn’t immediate

  • All functions are presented to novices


Even less direct l.jpg
Even less direct!

remember direct manipulation



Slide24 l.jpg

output

input

output

input

From research into visual perception

Computer

User

From research into

physical motion


Slide25 l.jpg

The User

longtermmemory

workingmemory

vision

vision

input

problem

solving

motion

control

output


How to see marr l.jpg
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 l.jpg
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 l.jpg

The User

longtermmemory

workingmemory

vision

input

problem

solving

motion

control

output


How to move fitts law l.jpg
How to move (Fitts’ Law)

  • Make big targets

  • Make them close

<

<


Slide34 l.jpg

The User

workingmemory

longtermmemory

vision

input

problem

solving

motion

control

output


How to remember miller 1956 l.jpg
How to remember (Miller 1956)

  • The magic number 7+/-2

  • ksnehfifmwbtdoanebgocnesj

  • fruitapplegrapeguavalemon


Slide36 l.jpg

The User

longtermmemory

workingmemory

vision

input

problem

solving

motion

control

output



Learn these l.jpg

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 l.jpg

keyboard

camel

rucksack

bicycle

armchair

banana

notebook

telephone

pencil

concern

speed

absence

withhold

category

classic

correct

transfer

function

How to learn (Paivio 1972)


Slide42 l.jpg

The User

longtermmemory

workingmemory

vision

input

problem

solving

motion

control

output


How to think ernst newell 1969 l.jpg
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 l.jpg

Comparing designs before implementation

Predicting human performance quantitatively


Goms and the model human processor l.jpg
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 l.jpg
Quantitative prediction from a model human

  • Which is faster? Make a word bold using

    a) Keys only

    b) Font dialog


Keys only method l.jpg
Keys-only method

<shift> + 

 + 

 + + + 

<ctrl> + b


Keys only method48 l.jpg

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 l.jpg

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 l.jpg
Font dialog method

click,drag

move,

click

release,

move

move,

click

release

click,

move


Motion times from fitts law l.jpg

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 l.jpg

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 l.jpg

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 l.jpg
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 l.jpg

Comparing designs after implementation

Measuring human performance quantitatively


Controlled experiments l.jpg
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 l.jpg

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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg

Comparing learning before implementation

Predicting human performance qualitatively


Mental models l.jpg
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.


User s model l.jpg
User’smodel


Designer s model l.jpg
Designer’s model?

Toilets

Kitchen

Wiring closet

Plantroom

Stairs



Solving problems with mental models l.jpg

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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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.”


Usability method 3 cognitive walkthrough l.jpg

Usability Method 3:Cognitive Walkthrough


Cognitive walkthrough l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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