IAT 334

Interface Design

Chris Shaw
______________________________________________________________________________________

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

Jan 6, 2011 IAT 334 1

Agenda
g Introductions - Me, TA
g HCI Overview
– Objectives
– Principles
g Review HCI’s history
– Key people and events
g Course Info, Project
– Description, details

Jan 6, 2011 IAT 334 2

Introductions
g Instructor
– Chris Shaw
– shaw@sfu.ca

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

Jan 6, 2011 IAT 334 3

Introductions

g TA
– Saba Alimadadi
– salimada@sfu.ca

Jan 6, 2011 IAT 334 4

Course Information
g 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

Jan 6, 2011 IAT 334 5

Read for next week

g Shneiderman & Plaisant

– Chapters 1 + 2

Jan 6, 2011 IAT 334 6

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 7

Group Project

g Design and evaluate an interface

0 Team, Topic
1 Understanding problem
2 Design
3 Implement prototype
4 Evaluate

Jan 6, 2011 IAT 334 8

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 9

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 10

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 11

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 12

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 13

Goals of HCI
(Shneiderman & Plaisant Chap1)

g Allow users to carry out tasks

– Safely

– Effectively

– Efficiently

– Enjoyably

Jan 6, 2011 IAT 334 14

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

Usability

g Five Measurable Goals of UI Design

g 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 16

Interests in Human Factors
in Design

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

Jan 6, 2011 IAT 334

Interests in Human Factors
in Design

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.

Sept14, 2009 IAT 334

Accommodating
Human Diversity

Personality
Differences
Physical Users with
Abilities and Disabilities
Workplaces

Cognitive Elderly
and Perceptual Users
Abilities Cultural
and International
Diversity

Jan 6, 2011 IAT 334

Key Historical Event

g Design of the first Mac 1983-1984

g “The computer for the rest of us”

Jan 6, 2011 IAT 334 20

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 21

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

Jan 6, 2011 IAT 334 22

Two Crucial Errors

g Assume all users are alike

g Assume all users are like the designer

Jan 6, 2011 IAT 334 23

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

UI Design/Develop Process

g Analyze user’s goals

g Create design alternatives Design
g Analyze designs
g Implement prototype
g Test Evaluate Implement
g Refine

Jan 6, 2011 IAT 334 25

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 26

Interfaces in the World

g VCR
g Mouse
g Phone
g Copier
g Car
g Airline reservation
g Air traffic control

Jan 6, 2011 IAT 334 27

 History of HCI

______________________________________________________________________________________

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

Jan 6, 2011 IAT 334 28

Agenda
g Review HCI’s history
– Key people and events
g Human capabilities
– Senses
– Information processing
• Perceptual
• Cognitive
– Memory

Jan 6, 2011 IAT 334 29

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 30

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 31

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 32

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 33

Vision/Goals

g Immediate Intermediate Long-term

• Time sharing • Combined speech • Natural language
• Electronic I/O recognition, understanding
• Interactive, real- character • Speech recognition
time system recognition, light- of arbitrary users
• Large scale pen editing • Heuristic programming
information
storage and
retrieval

Jan 6, 2011 IAT 334 34

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 35

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

Jan 6, 2011 IAT 334 36

Sutherland Demo Videos
g http://www.youtube.com/watch?v=USyoT_Ha_bA
g http://www.youtube.com/watch?v=mOZqRJzE8xg

Jan 6, 2011 IAT 334 37

Douglas Engelbart

g Invented the mouse

g 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 38

The Mouse

Doug Engelbart’s mouse - 1963-64

source: resonancepub.com & brittanica.com

Jan 6, 2011 IAT 334

Alan Kay

g Dynabook - Notebook sized computer

loaded with multimedia and can store
everything
g Personal Computing
g Desktop Interface

Jan 6, 2011 IAT 334 40

Ted Nelson

g Computers can help people, not just

business

g Coined term “hypertext”

Jan 6, 2011 IAT 334 41

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 42

Personal Computers

g Late ‘70’s
– Apple II
– Z-80 CP/M
– IBM PC
g Text and command based
g Word processing
g Spreadsheets!

Jan 6, 2011 IAT 334 43

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 44

Menus

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

source: folklore.org

Jan 6, 2011 IAT 334

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 46

Star

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

Jan 6, 2011 IAT 334 47

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 48

Apple Macintosh - ‘84

g Aggressive pricing - $2500

g Not trailblazer, smart copier
g Good interface guidelines
g 3rd party applications
g High quality graphics and laser printer

Jan 6, 2011 IAT 334 49

Windows 95

Jan 6, 2011 IAT 334 50

Handhelds
g Portable computing + phone
g Newton, Palm, Blackberry, iPhone

Jan 6, 2011 IAT 334 51

Human Capabilities

g Want to improve user performance

g Know the user!

– Senses
– Information processing systems

Jan 6, 2011 IAT 334 52

Senses

g Sight, hearing, touch important for

current HCI

– smell, taste ???

Jan 6, 2011 IAT 334 53

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 54

Eyes
Eye
g Retina receives image
g Light sensitive cells Light
Optic Nerve
g Two types:
– Rods
• Monochrome
• Sensitive to entire visible spectrum
• Small
• Fast-acting
• Distributed throughout Retina

Jan 6, 2011 IAT 334 55

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 56

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 57

Hearing

g Often taken for granted how good it is

– Pitch - frequency
– Loudness - amplitude
– Timbre - type of sound (instrument)
g Sensitive to range 20Hz - 22000Hz
g Limited spatially, good temporal
performance

Jan 6, 2011 IAT 334 58

Hearing

g Sounds can be perceived as coming from

a location
– Not terribly accurate
– Cone of confusion

Jan 6, 2011 IAT 334 59

3D Audio Perception

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

Jan 6, 2011 IAT 334 60

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 61

Models of Human Performance

g Predictive
g Quantitative
– Time to perform
– Time to learn
– Number and type of errors
– Time to recover from errors
g Approximations

Jan 6, 2011 IAT 334 62

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 63

Model Human Processor
Basics

g Based on Empirical Data

g Three interacting subsystems
– Perceptual (read-scan)
– Cognitive (think)
– Motor (respond)

Jan 6, 2011 IAT 334 64

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 65

Model Human Processor
Basics
g Parameters
– Processors cycle time of 50-200ms
– Memories have type, capacity, decay time
g Types
– Visual
– Auditory
– Tactile
– Taste, smell, proprioception, etc

Jan 6, 2011 IAT 334 66

Model
picture

Jan 6, 2011 IAT 334 67

Model Picture Closeup

Jan 6, 2011 IAT 334 68

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 69

Sensory Store
g The “input buffer” of the senses
g Stores most recent input unrecognized
g Storage time and capacity varies by type
– Visual: NominalRange
• 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 70

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 71

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: NominalRange
• Capacity: 7 chunks [5 - 9] chunks
• Decay Time: 7 seconds [5 - 226] seconds
• Access Time: 70ms [25 - 170] ms

Jan 6, 2011 IAT 334 72

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 73

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 74

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 75

Interference

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

Jan 6, 2011 IAT 334 76

Interference

Exercise: Read the colors of these

words

Introduction
Background
Theory
Lemma
Proof

Jan 6, 2011 IAT 334 77

Read the colors of the words

Black Red
Orange Yellow
Blue
Jan 6, 2011 IAT 334 78
MHP Operation
g Recognize-Act Cycle
– On each cycle, contents in WM initiate actions
associatively linked to them in LTM
– Actions modify contents of WM
g 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 79

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 80

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 81

Operation: Target finding

g Task: Move hand to target area

g 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 82

Group Project

g Design and evaluate a web-based system

0 Team
1 Understanding problem
2 Design
3 Implement prototype
4 Evaluate

Jan 6, 2011 IAT 334 83

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 84

Read for next week

g Shneiderman & Plaisant

– Chapters 1 + 2

Jan 6, 2011 IAT 334 85