Human-Computer Interaction

Computer Science Tripos Part IIAlan Blackwell

Add a button to turn the screen yellow.

- (void)loadView { //allocate the view self.view = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]]; //set the view's background color self.view.backgroundColor = [UIColor whiteColor]; //create the button UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect]; //set the position of the button button.frame = CGRectMake(100, 170, 100, 30); //set the button's title [button setTitle:@"Click Me!" forState:UIControlStateNormal]; //listen for clicks [button addTarget:self action:@selector(buttonPressed) forControlEvents:UIControlEventTouchUpInside]; //add the button to the view [self.view addSubview:button];}

-(void)buttonPressed { NSLog(@"Button Pressed!");}

700

Wavelength (nanometers)

600 500 400

I want it to be golden yellow.

Why did you want the screen to be yellow?

I want it to look like gold.

That’s not golden yellow.

“Sir John Herschel even thinks that our inability to resolve yellow leaves it doubtful whether our vision is trichromatic or tetrachromatic...”

John William Strutt (Lord Rayleigh) 1871“Some Experiments on Color”. Nature 111

I want it to look like gold.

Connotations relate not to a word's actual meaning, or denotation, but rather to the ideas or qualities that are implied by that word. A good example is the word "gold." The denotation of gold is a malleable, ductile, yellow element. The connotations, however, are the ideas associated with gold, such as greed, luxury, or avarice.

Where’s the button?

How can you get one button wrong?

How to design buttons and screens?

• Human-Computer Interaction (HCI)• Interaction Design• User Experience Design (UX)• Interactive Systems Design• Cognitive Ergonomics• Man-Machine Interface (MMI)• User Interface Design (UI)• Human Factors• Cognitive Task Design• Information Architecture (IA)• Software Product Design• Usability Engineering• User-Centred Design (UCD)

Typical results of HCI research (HCI 2009)

What the university offers …

Arts & Humanities

Humanities &Social Sciences

Technology

Physical Sciences

Biological Sciences

Clinical school

Arts & Humanities

Humanities &Social Sciences

Technology

Physical Sciences

Biological Sciences

Clinical school

Human | Computer

Human | Computer

interpretive scientific

reductionist

positivistrelativist

softacademic style

good

intuitive

cool

effective

simple

correct

Human | Computer

interpretive scientific

reductionist

positivistrelativist

softacademic style

good

intuitive

cool

effective

simple

correct

creative

practical

prof

essi

onal

styl

e

interpretive scientific

reductionist

positivistrelativist

soft

Human Computer Interaction

Interaction Design

User Experience Design

Interactive Systems Design

Cognitive Ergonomics

Man Machine Interface

User Interface Design

Human Factors

Cognitive Task Design

Information Architecture

Software Product Design

Usability Engineering

User Centred Design

Human Computer

Human Machine Usability

Man Systems Ergonomics

User Software Architecture

User Information Engineering

User Interface Interface

Cognitive Interactive Design

Cognitive Interaction Design

Experience Interaction Design

Task Product Design

Factors Design

Centred Design

Design

design

creative

practical

interpretive scientific

reductionist

positivistrelativist

softdesign

prof

essi

onal academ

ic

Course objectives (options)

• Learn interesting stuff about humans• Prepare for professional life• See cool toys• Find an alternative perspective on CS• Take an opportunity to be more creative• Get easy marks in final exam

2013/14 votes on course objectives

• Learn interesting stuff about humans• Prepare for professional life• See cool toys• Find an alternative perspective on CS• Take an opportunity to be more creative• Get easy marks in final exam

151566

111110106633

2013/14 course preview

• Lecture 2: Visual representation• Lecture 3: Text and gesture interaction• Lecture 4: Inference-based approaches• Lecture 5: Augmented and mixed reality• Lecture 6: Usability of programming languages• Lecture 7: User-centred design research• Lecture 8: Usability evaluation methods

Textbooks

• Sharp, Rogers & Preece Interaction Design: Beyond human-computer interaction 3rd Edition 2011– Practical design methods, at

forefront of current practice

Textbooks

• Carroll (Ed.) HCI Models, Theories and Frameworks: Toward a multidisciplinary science 2003– Best introduction to research

trends and advanced methods

– (but out of print )

Textbooks

• Cairns and Cox (eds) Research methods for human-computer interaction 2008– Advanced techniques,

academic context

Supervision exercises

• Preparation/evaluation for Part II projects– Selecting research and evaluation methods, within strict

constraints (much as for a professional project).

• Experimental comparison of user interfaces– Study changes in learning, efficiency or accuracy that

result from modifications to a user interface.

• Cognitive Dimensions in Comp Sci research– Identify what makes advanced programming languages

useful to real programmers.

Final exam

• We will decide in the final lecture how the material we have covered should be assessed.

• This may resemble previous years– aimed to assess knowledge of range of models and

techniques available, the ways in which they differ, and applicability to professional situations.

• But not if we decide not!• Note: dissertation can also gain marks from HCI

– preparation + evaluation sections > 20% exam question– for interactive systems, consider user research & testing