1

Introduction to Human-Computer Interaction

2

Human the end-user of a program the others in the organization

Computer the machine the program runs on often split between clients & servers

Interaction the user tells the computer what they want the computer communicates results

Human-Computer Interaction (HCI)

3

What is HCI?

Design

Organizational & Social Issues

Technology Humans

Task

4

These Factors Influence Each Other & Design

“Now that mice are included with most computers, applications assume a mouse will be used as a the pointing device”

HumansTechnology

Task

Design

Organizational & Social Issues

5

Factors Influence

“People change their knowledge as they perform, i.e., they learn”

HumansTechnology

Task

Design

Organizational & Social Issues

6

User Interfaces (UIs) Part of application that allows people

to interact with computer to carry out their task

User vs. Customer vs. Client user is a term only used by 2 industries -> bad! customer – the person who will use the product you build client – the person/company who is paying you to build it

HCI = design, prototyping, evaluation, & implementation of UIs

7

Why Study User Interfaces? Major part of work for “real” programs

approximately 50% You will work on “real” software

intended for people other than yourself Bad user interfaces cost

money (5% satisfaction -> up to 85% profits) lives (Therac-25)

User interfaces hard to get right people are unpredictable

8

What is Usability?

Ease of learning faster the second time and so on...

Recall remember how from one session to the next

Productivity perform tasks quickly and efficiently

Minimal error rates if they occur, good feedback so user can recover

High user satisfaction confident of success

9

Interface Hall of Shame or Fame?

10

Interface Hall of Shame

Hard to tell the difference between the two icons & names

11

Who Builds Interfaces?

A team of specialists (ideally) graphic designers interaction / interface designers technical writers marketers test engineers software engineers customers

12

Keys to Designing & Building Successful Interfaces

Design cycle Customer-centered design Task analysis & contextual inquiry Rapid prototyping Evaluation Programming Iteration

13

Interface Design Cycle

Design

Prototype

Evaluate

14

Customer-centered Design

“Know thy Customer” Cognitive abilities

visual & aural perception physical manipulation memory

Organizational / job abilities Keep customers involved throughout project

15

Task Analysis & Contextual Inquiry

Observe existing work practices Create scenarios of actual use Try-out new ideas before building software

?

16

Rapid Prototyping Build a mock-up of design Low fidelity techniques

paper sketches cut, copy, paste video segments

Interactive prototyping tools HTML, Visual Basic,

HyperCard, Director, etc. UI builders

Fusion, NeXT, Visual Cafe

Fantasy Basketball

17

Evaluation

Test with real customers (participants) Build models Low-cost techniques

expert evaluation walkthroughs

18

Programming

Toolkits UI Builders Event models Input / Output models etc.

19

Iteration

Design

Prototype

Evaluate

At every stage!

20

Goals of HCI for us

Learn to design, prototype, & evaluate interfaces discover the tasks of prospective customers cognitive/perceptual constraints that affect design techniques for evaluating an interface design importance of iterative design for usability technology used to prototype & implement UI code how to work together on a team project communicate your results to a group

key to your future success

21

Project Description

Example project from an HCI class propose an interface idea fixing something you don’t like

on the web or a new idea for the web

Groups 2-3 students to a group work with students w/ different skills/interests groups meet with teaching staff every two weeks

Cumulative apply several HCI methods to a single interface

22

Project Process Overview

Break-up into groups next Wednesday Project proposal Project task analysis & “sketches”

i.e., rough proposals that can & will change Low fidelity prototyping & testing Build 1st interactive prototype In class presentations & critiques Heuristic evaluations (individual)

23

Project Process Overview (cont.)

Heuristic evaluation summary Build 2nd interactive prototype In lab demo & critiques Customer testing of 2nd prototype In class presentation & critiques Build 3rd prototype

“real” interface, but not necessarily “real” app. In class presentations & critiques

24

ESP

Low-fi Prototyping & Testing

25

Project TimelineSt

art D

ate

Del

iver

able

1

Del

iver

able

s 2

Em

d of

Pro

ject

Proj

ect I

dea

Proj

ect S

ketc

hes

Low

-fi U

ser T

est

UI P

roto

type

#1

HE

Sum

mar

yU

I Pro

toty

pe #

2

Use

r Tes

ting

UI P

roto

type

#3

26

Project Examples

Online Telebears Research notebook

threads of ideas multiple views secure time stamps

27

Research Notebook

28

Project Examples (cont.)

SiteSketch web page design sketch-based

29

SiteSketch

30

Project Examples (cont.)

CD Jukebox

31

CD JukeBox

32

Project Examples (cont.)

Clothes Shopper online shopping knows your prefs & sizes

33

Clothes Shopper

34

Project Examples (cont.)

Interactive TV Guide find shows, program VCR to record, etc.

35

Interactive TV Guide

36

Project Examples (cont.)

Electronic book reader take advantage of all the online texts on the

net

37

Electronic Book Reader

38

Project Examples (cont.)

Nutrition tracker

39

Nutrition Tracker

40

Project Examples (cont.)

cUIzine recipe tool for the home

41

cUIzine

42

Project Examples (cont.)

Tech support help desk avoid using the phone for getting help

43

Tech-Support Help Desk

44

Project Examples (cont.)

Regular expression builder visual tool lets beginners build regular expression

45

Regular Expression Builder

46

Project Examples (cont.)

Apartment finder kinda obvious!!! :)

47

Apartment Finder

48

Project Examples (cont.)

Read WWW over phone find structure in pages & build voice menus navigation problem cache common paths & reorder?

PDA brainstorming tool small portable computers in a group meeting (say

Palm Pilots)

49

PDA Brainstorming

50

Project Examples (cont.)

Runner’s training log input daily workouts reports reminders

PDA for shopping scan in UPC & tells you whether a good price

Home entertainment control -“no more remotes”

51

Total Entertainment Control

52

Project Examples (cont.)

Football play design program sketch players & show how they will move simulate plays

Customized web newspaper

53

Web Newspaper

54

Project Examples (cont.)

PDA Baseball score keeper have stats of the players on your PDA keep track of what happens during the game upload stats after the game

55

PDA Baseball Scorekeeper

56

PalmStock

PalmStock

57

InkChat

58

Josh

Back-end

Ed

Brian

Cliff

Rendezvous

59

Nutrition/Exercise Tracker

60

Trippin’