Jan 6, 2011 IAT 334 1

IAT 334Interface Design

Chris Shaw______________________________________________________________________________________

SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] | WWW.SIAT.SFU.CA

Jan 6, 2011 IAT 334 2

Agenda

g Introductions - Me, TAg HCI Overview

– Objectives– Principles

g Review HCI’s history– Key people and events

g Course Info, Project– Description, details

Jan 6, 2011 IAT 334 3

Introductions

g Instructor– Chris Shaw– shaw@sfu.ca

g HCI – Two-Handed 3D interfaces– Scientific & Information Visualization– Visual Analytics

Jan 6, 2011 IAT 334 4

Introductions

g TA– Saba Alimadadi– salimada@sfu.ca

Jan 6, 2011 IAT 334 5

Course Informationg Book

– “Designing the User Interface: Strategies for Effective Human-Computer Interaction (5th Edition)”,

– By Ben Shneiderman, Catherine Plaisant • Addison-Wesley Computing © 2009

g Web– Syllabus– Assignments– HCI resources– Related courses

Read for next week

g Shneiderman & Plaisant– Chapters 1 + 2

Jan 6, 2011 IAT 334 6

Jan 6, 2011 IAT 334 7

Course Information

g Grading– Late-term exam 35%– Project (4 parts) 7.5% each ->

30%– Homeworks 35%

g Advice: Learn from past– Content, lectures, projects, ...

Jan 6, 2011 IAT 334 8

Group Project

g Design and evaluate an interface0 Team, Topic1 Understanding problem2 Design3 Implement prototype4 Evaluate

Jan 6, 2011 IAT 334 9

Project Teams

g 4 people (diverse is best!)– Arrange this in the Lab– Team needs to all be in same lab section

g Consider schedules

g Cool name

Jan 6, 2011 IAT 334 10

Why We Are Here

g Look at human factors that affect software design and development

g Central Topic: User interface design

Jan 6, 2011 IAT 334 11

HCI

g What happens when a human and a computer get together to perform a task– Task

• Write a document• Plan a budget• Design a presentation• Play a video game

– Not a task..• Goof off (obviously)

Jan 6, 2011 IAT 334 12

Why is this important?

g Computers (in one way or another) affect every person in society– Increasing % use computers in work, at

home in the road…

g Product success depends on ease of use

Jan 6, 2011 IAT 334 13

Course Aims

g Consciousness raising for you– Eg. Don Norman

• “The Design of Everyday Things”– Doors

• Handles afford various opening method

g Design critic

Jan 6, 2011 IAT 334 14

Goals of HCI (Shneiderman & Plaisant Chap1)

g Allow users to carry out tasks– Safely

– Effectively

– Efficiently

– Enjoyably

Jan 6, 2011 IAT 334

Goals of System Engineering

Functionality• Tasks and sub-tasks to be carried out

Reliability• Maintaining trust in the system

Standardization, integration, consistency and portability

Schedules and budgets• Adhering to timelines and expense• Human factors principles and testing

reduces costs

Jan 6, 2011 IAT 334 16

Usability

g Five Measurable Goals of UI Designg Combination of

– Ease of learning– High speed of user task performance– Low user error rate– Subjective user satisfaction– User retention over time

Jan 6, 2011 IAT 334

Life-critical systems: air traffic control, emergency, power utilities etc.

• high reliability, error-free performance, lengthy training for systems, subjective satisfaction less of an issue

Industrial and commercial uses: banking, inventory management, airline and hotel reservations, etc.

• low costs is critical over reliability, ease of learning, errors calculated against costs, subjective satisfaction of modest importance

Interests in Human Factors in Design

Sept14, 2009 IAT 334

Office, home, entertainment: productivity and entertainment applications

• ease of learning, low error rates, subjective satisfaction are paramount since use is discretionary and competition is fierce. Range of types of users from novice to expert.

Exploratory, creative, and cooperative: web-based, decision-making, design-support, collaborative work, etc.

• users knowledgeable in domain but vary in computer skills, direct-manipulation using familiar routines and gestures work best, difficult systems to design and evaluate.

Interests in Human Factors in Design

Jan 6, 2011 IAT 334

Accommodating Human Diversity

PhysicalAbilities andWorkplaces

Cognitiveand Perceptual

Abilities

PersonalityDifferences

Culturaland International

Diversity

Users withDisabilities

ElderlyUsers

Jan 6, 2011 IAT 334 20

Key Historical Event

g Design of the first Mac 1983-1984g “The computer for the rest of us”

Jan 6, 2011 IAT 334 21

Moving Forward

g How do we improve interfaces?– 1. Change attitude of software

professional• “Slap that interface on”

– 2. Draw upon fast accumulating body of knowledge regarding H-C interface design

– 3. Integrate UI design methods & techniques into standard software development methodologies now in place

Jan 6, 2011 IAT 334 22

Improving Interfaces

g Know the User!– Physical abilities– Cognitive abilities– Personality differences– Skill differences– Cultural diversity– Motivation– Special needs

Jan 6, 2011 IAT 334 23

Two Crucial Errors

g Assume all users are alike

g Assume all users are like the designer

Another Crucial Error

g Have the user design it!

g Users bring vital knowledge to design:– They know a lot about the problem– They know a lot about the current tools– They typically know very little about

design

Jan 6, 2011 IAT 334 24

Jan 6, 2011 IAT 334 25

UI Design/Develop Process

g Analyze user’s goalsg Create design alternativesg Analyze designsg Implement prototypeg Testg Refine

Design

Evaluate Implement

Jan 6, 2011 IAT 334 26

Evaluation

g Things we can measure– Time to learn– Speed of performance– Rate of errors by user– Retention over time– Subjective satisfaction

Jan 6, 2011 IAT 334 27

Interfaces in the World

g VCRg Mouseg Phoneg Copierg Carg Airline reservationg Air traffic control

Jan 6, 2011 IAT 334 28

History of HCI

______________________________________________________________________________________

SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] | WWW.SIAT.SFU.CA

Jan 6, 2011 IAT 334 29

Agenda

g Review HCI’s history– Key people and events

g Human capabilities– Senses– Information processing

• Perceptual• Cognitive

– Memory

Jan 6, 2011 IAT 334 30

History of HCI

g Digital computer grounded in ideas from 1700’s & 1800’s

g Technology became available in the 1940’s and 1950’s

Jan 6, 2011 IAT 334 31

Vannevar Bush

g “As We May Think” - 1945 Atlantic Monthly

“…publication has been extended far beyond our present ability to make real use of the record.”

Jan 6, 2011 IAT 334 32

Bush

g Postulated Memex device– Can store all records/articles/communications– Large memory– Items retrieved by indexing, keywords, cross

references– Can make a trail of links through material– etc.

g Envisioned as microfilm, not computer

Jan 6, 2011 IAT 334 33

J.R. Licklider

g 1960 - Postulated “man-computer symbiosis”

g Couple human brains and computing machines tightly to revolutionize information handling

Jan 6, 2011 IAT 334 34

Vision/Goals

g Immediate Intermediate Long-term• Time sharing• Electronic I/O• Interactive, real-

time system• Large scale

information storage and retrieval

• Combined speech recognition, character recognition, light- pen editing

• Natural language understanding

• Speech recognition of arbitrary users

• Heuristic programming

Jan 6, 2011 IAT 334 35

Mid 1960’s

g Computers too expensive for individuals -> timesharing– increased accessibility– interactive systems, not jobs– text processing, editing– email, shared file system

Jan 6, 2011 IAT 334 36

Ivan Sutherland

g SketchPad - ‘63 PhD thesis at MIT– Hierarchy - pictures & subpictures– Master picture with instances– Constraints– Icons– Copying– Light pen as input device– Recursive operations

Sutherland Demo Videos

g http://www.youtube.com/watch?v=USyoT_Ha_bAg http://www.youtube.com/watch?v=mOZqRJzE8xg

Jan 6, 2011 IAT 334 37

Jan 6, 2011 IAT 334 38

Douglas Engelbart

g Invented the mouseg Landmark system/demo:

– hierarchical hypertext, multimedia, mouse, high-res display, windows, shared files, electronic messaging, CSCW, teleconferencing, …

g http://www.youtube.com/watch?v=JfIgzSoTMOs

Jan 6, 2011 IAT 334

The Mouse

source: resonancepub.com & brittanica.com

Doug Engelbart’s mouse - 1963-64

Jan 6, 2011 IAT 334 40

Alan Kay

g Dynabook - Notebook sized computer loaded with multimedia and can store everything

g Personal Computingg Desktop Interface

Jan 6, 2011 IAT 334 41

Ted Nelson

g Computers can help people, not just business

g Coined term “hypertext”

Jan 6, 2011 IAT 334 42

Nicholas Negroponte

g MIT machine architecture & AI group ‘69-’80s

g Ideas:– wall-sized displays, video disks, AI in

interfaces (agents), speech recognition, multimedia with hypertext

Jan 6, 2011 IAT 334 43

Personal Computers

g Late ‘70’s – Apple II– Z-80 CP/M – IBM PC

g Text and command basedg Word processingg Spreadsheets!

Jan 6, 2011 IAT 334 44

PCs with GUIs

g Xerox PARC - mid 1970’s– Alto– Local processor, Bitmap display, Mouse– Precursor to modern GUI– LAN - Ethernet

Jan 6, 2011 IAT 334

Menus

source: folklore.org

Bill Atkinson’s Polaroids of the first pull-down menu prototype - circa 1979

Jan 6, 2011 IAT 334 46

Xerox Star - ‘81

g First commercial PC designed for “business professionals”– Desktop metaphor, pointing, WYSIWYG

g First system based on usability engineering

Jan 6, 2011 IAT 334 47

Star

g Commercial flop– $15k cost– closed architecture– lacking key functionality (spreadsheet)

Jan 6, 2011 IAT 334 48

Apple Lisa - ‘82

g Based on ideas of Star

g More personal rather than office tool– Still expensive!

g Failure

Jan 6, 2011 IAT 334 49

Apple Macintosh - ‘84

g Aggressive pricing - $2500g Not trailblazer, smart copierg Good interface guidelinesg 3rd party applicationsg High quality graphics and laser

printer

Windows 95

Jan 6, 2011 IAT 334 50

Handhelds

g Portable computing + phoneg Newton, Palm, Blackberry, iPhone

Jan 6, 2011 IAT 334 51

Jan 6, 2011 IAT 334 52

Human Capabilities

g Want to improve user performance

g Know the user!– Senses– Information processing systems

Jan 6, 2011 IAT 334 53

Senses

g Sight, hearing, touch important for current HCI

– smell, taste ???

Jan 6, 2011 IAT 334 54

Sight

g Visual System workings

g Color - color blindness: 8% males, 1% females

g Much done by context & grouping (words, optical illusions, …)

Jan 6, 2011 IAT 334 55

Eyes

g Retina receives imageg Light sensitive cellsg Two types:

– Rods• Monochrome• Sensitive to entire visible spectrum• Small• Fast-acting• Distributed throughout Retina

LightOptic Nerve

Eye

Jan 6, 2011 IAT 334 56

Eyes-Retina

g Retina Cells: Cones– Three types

• Red, Green, Blue• Each type sensitive to limited range of

visible light• Cones are larger cells than rods• Cones are less sensitive• Strongly concentrated in Fovea• Relatively few cones outside fovea

Jan 6, 2011 IAT 334 57

Fovea

g High-resolution area of Retina– It’s what you point your eyes at to get

good image– About 2 degrees visual angle– Densely packed with Rods + Cones

Jan 6, 2011 IAT 334 58

Hearing

g Often taken for granted how good it is– Pitch - frequency– Loudness - amplitude– Timbre - type of sound (instrument)

g Sensitive to range 20Hz - 22000Hzg Limited spatially, good temporal

performance

Jan 6, 2011 IAT 334 59

Hearing

g Sounds can be perceived as coming from a location– Not terribly accurate– Cone of confusion

Jan 6, 2011 IAT 334 60

g 3D Audio cues:– Interaural Time Difference– Interaural Intensity Difference– Pinnae filtering– Body filtering

3D Audio Perception

Jan 6, 2011 IAT 334 61

Touch

g Three main sensations handled by different types of receptors:– Pressure (normal)– Intense pressure (heat/pain)– Temperature (hot/cold)

g Where important?

Jan 6, 2011 IAT 334 62

Models of Human Performance

g Predictiveg Quantitative

– Time to perform– Time to learn– Number and type of errors– Time to recover from errors

g Approximations

Jan 6, 2011 IAT 334 63

Basic HCI

g Model Human Processor– A simple model of human cognition– Card, Moran, Newell 1983

g Components:– Senses – Sensory store– Short-term memory– Long-term memory– Cognition

Jan 6, 2011 IAT 334 64

Model Human Processor Basics

g Based on Empirical Datag Three interacting subsystems

– Perceptual (read-scan)– Cognitive (think)– Motor (respond)

Jan 6, 2011 IAT 334 65

Information Processing

g Usually serial action– Respond to buzzer by pressing button

g Usually parallel recognition• Driving, reading signs, listening to radio

Jan 6, 2011 IAT 334 66

Model Human Processor Basics

g Parameters– Processors cycle time of 50-200ms– Memories have type, capacity, decay

timeg Types

– Visual– Auditory– Tactile – Taste, smell, proprioception, etc

Jan 6, 2011 IAT 334 67

Model picture

Jan 6, 2011 IAT 334 68

Model Picture Closeup

Jan 6, 2011 IAT 334 69

Perceptual Processor

g Continually “grabs data” from the sensory system

g Cycle time: 100ms [50 - 200] ms

g Passes data to Image Store in unrecognized form– “Array of Pixels” (or whatever it is) from eyes– “Sound Intensities” from ears

Jan 6, 2011 IAT 334 70

Sensory Store

g The “input buffer” of the sensesg Stores most recent input unrecognizedg Storage time and capacity varies by type

– Visual: Nominal Range• Capacity: 17letters of text [7 - 17] letters• Decay Time: 200ms [70 - 1000] ms

– Audio: • Capacity: 5 letters of text [4.4-6.6] letters • Decay Time: 1500 ms [900 - 3500] ms

Jan 6, 2011 IAT 334 71

Memory

g Three “types”– Short-term memory

Conscious thought, calculations– Intermediate

Storing intermediate results, future plans

– Long-term Permanent, remember everything ever happened to us

Jan 6, 2011 IAT 334 72

Memory: Sort Term

g Short Term (Working) Memory (WM) – Gets basic recognition from Sensory Store

• “Stop sign” vs. “red octagon w/white marks”– 7 +/- 2 “chunks”

• 4048946328 vs. 404-894-6328

– WM: Nominal Range• Capacity: 7 chunks [5 - 9] chunks• Decay Time: 7 seconds [5 - 226] seconds• Access Time: 70ms [25 - 170] ms

Jan 6, 2011 IAT 334 73

Memory: Long Term

g Long Term Memory (LTM)– “Unlimited” size– Slower access time (100ms)– Little decay– Episodic & Semantic

g Why learn about memory?– Know what’s behind many HCI

techniques– Predict what users will understand

Jan 6, 2011 IAT 334 74

LT Memory Structure

g Episodic memory– Events & experiences in serial form

g Semantic memory– Structured record of facts, concepts &

skills

Jan 6, 2011 IAT 334 75

Memory Characteristics

g Things move from STM to LTM by rehearsal & practice and by use in context

g We “forget” things due to decay and interference

Jan 6, 2011 IAT 334 76

Interference

g Interference– Two strong cues in working memory– Link to different chunks in long term

memory

Jan 6, 2011 IAT 334 77

Interference

Exercise: Read the colors of these words

Introduction BackgroundTheory LemmaProof

Jan 6, 2011 IAT 334 78

Read the colors of the words

Black Red Orange

Yellow Blue

Jan 6, 2011 IAT 334 79

MHP Operation

g Recognize-Act Cycle– On each cycle, contents in WM initiate

actions associatively linked to them in LTM

– Actions modify contents of WMg Discrimination Principle

– Retrieval is determined by candidates that exist in memory relative to retrieval cues

– Interference by strongly activated chunks

Jan 6, 2011 IAT 334 80

Perception

g Stimuli that occur within one PP cycle fuse into a single concept– movies (frame rate)

• Frame rate > 1 / Tp = 1/(100 msec/frame) = 10 f/sec– morse code listening rate

g Perceptual causality– two distinct stimuli can fuse if the first event

appears to cause the other– events must occur in the same cycle

Jan 6, 2011 IAT 334 81

Operation

g Variable Cognitive Processor Rate– Cognitive Processor cycle time Tc is

shorter with greater effort– Induced by increased task

demands/information– Decreases with practice

Jan 6, 2011 IAT 334 82

Operation: Target finding

g Task: Move hand to target areag Fitts Law

– A series of microcorrections• Correction takes Tp + Tc + Tm

– Time Tpos to move hand to target width W which is distance D:• Tpos = a + b log2 (d/w + 1.0)

– Movement time depends on relative precision

Jan 6, 2011 IAT 334 83

Group Project

g Design and evaluate a web-based system0 Team1 Understanding problem2 Design3 Implement prototype4 Evaluate

Jan 6, 2011 IAT 334 84

Project Teams

g 4 people (diverse is best!)– Arrange this in the Lab– Team needs to all be in same lab section

g Consider schedules

g Cool name

Read for next week

g Shneiderman & Plaisant– Chapters 1 + 2

Jan 6, 2011 IAT 334 85