Interface Design

______________________________________________________________________________________

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

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 3

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 4

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

Jan 6, 2011 IAT 334 5

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 6

Goals of HCI
(Shneiderman & Plaisant Chap1)

g Allow users to carry out tasks

– Safely

– Effectively

– Efficiently

– Enjoyably
Jan 6, 2011 IAT 334 7
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 9

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 13

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 14

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

Jan 6, 2011 IAT 334 15

Two Crucial Errors

g Assume all users are alike

g Assume all users are like the designer

Jan 6, 2011 IAT 334 16

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 17

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 18

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 19

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 20

 History of HCI

______________________________________________________________________________________

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

Jan 6, 2011 IAT 334 21

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

Jan 6, 2011 IAT 334 22

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 23

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 24

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 25

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 26

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 27

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 28

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 29

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 31

Ted Nelson

g Computers can help people, not just

business

g Coined term “hypertext”

Jan 6, 2011 IAT 334 32

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 33

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 34

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 35

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 37

Star

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

Jan 6, 2011 IAT 334 38

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 39

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 40

Windows 95

Jan 6, 2011 IAT 334 41

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

Jan 6, 2011 IAT 334 42

Human Capabilities

g Want to improve user performance

g Know the user!

– Senses
– Information processing systems

Jan 6, 2011 IAT 334 43

Senses

g Sight, hearing, touch important for

current HCI

– smell, taste ???

Jan 6, 2011 IAT 334 44

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 45

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 46

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 47

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 48

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 49

Hearing

g Sounds can be perceived as coming from

a location
– Not terribly accurate
– Cone of confusion

Jan 6, 2011 IAT 334 50

3D Audio Perception

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

Jan 6, 2011 IAT 334 51

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 52

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 53

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 54

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 55

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 56

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 57

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 58