technology

1. Jan 6, 2011 IAT 334 1
Interface Design
______________________________________________________________________________________
SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] | WWW.SIAT.SFU.CA

2. Jan 6, 2011 IAT 334 2
Agenda
 Introductions - Me, TA
 HCI Overview
– Objectives
– Principles
 Review HCI’s history
– Key people and events
 Course Info, Project
– Description, details

3. Jan 6, 2011 IAT 334 3
Course Information
 Book
– “Designing the User Interface: Strategies for Effective
Human-Computer Interaction (5th Edition)”,
– By Ben Shneiderman, Catherine Plaisant
• Addison-Wesley Computing © 2009
 Web
– Syllabus
– Assignments
– HCI resources
– Related courses

4. Jan 6, 2011 IAT 334 4
Why We Are Here
 Look at human factors that affect
software design and development
 Central Topic: User interface design

5. Jan 6, 2011 IAT 334 5
HCI
 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

6. Jan 6, 2011 IAT 334 6
Why is this important?
 Computers (in one way or another) affect
every person in society
– Increasing % use computers in work, at
home in the road…
 Product success depends on ease of use

7. Jan 6, 2011 IAT 334 7
Goals of HCI
(Shneiderman & Plaisant Chap1)
 Allow users to carry out tasks
– Safely
– Effectively
– Efficiently
– Enjoyably

8. 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

9. Jan 6, 2011 IAT 334 9
Usability
 Five Measurable Goals of UI Design
 Combination of
– Ease of learning
– High speed of user task performance
– Low user error rate
– Subjective user satisfaction
– User retention over time

10. 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

11. 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

12. Jan 6, 2011 IAT 334
Accommodating
Human Diversity
Physical
Abilities and
Workplaces
Cognitive
and Perceptual
Abilities
Personality
Differences
Cultural
and International
Diversity
Users with
Disabilities
Elderly
Users

13. Jan 6, 2011 IAT 334 13
Key Historical Event
 Design of the first Mac 1983-1984
 “The computer for the rest of us”

14. Jan 6, 2011 IAT 334 14
Moving Forward
 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

15. Jan 6, 2011 IAT 334 15
Improving Interfaces
 Know the User!
– Physical abilities
– Cognitive abilities
– Personality differences
– Skill differences
– Cultural diversity
– Motivation
– Special needs

16. Jan 6, 2011 IAT 334 16
Two Crucial Errors
 Assume all users are alike
 Assume all users are like the designer

17. Another Crucial Error
 Have the user design it!
 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

18. Jan 6, 2011 IAT 334 18
UI Design/Develop Process
 Analyze user’s goals
 Create design alternatives
 Analyze designs
 Implement prototype
 Test
 Refine
Design
Evaluate Implement

19. Jan 6, 2011 IAT 334 19
Evaluation
 Things we can measure
– Time to learn
– Speed of performance
– Rate of errors by user
– Retention over time
– Subjective satisfaction

20. Jan 6, 2011 IAT 334 20
Interfaces in the World
 VCR
 Mouse
 Phone
 Copier
 Car
 Airline reservation
 Air traffic control

21. Jan 6, 2011 IAT 334 21
History of HCI
______________________________________________________________________________________
SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] | WWW.SIAT.SFU.CA

22. Jan 6, 2011 IAT 334 22
Agenda
 Review HCI’s history
– Key people and events
 Human capabilities
– Senses
– Information processing
• Perceptual
• Cognitive
– Memory

23. Jan 6, 2011 IAT 334 23
History of HCI
 Digital computer grounded in ideas from
1700’s & 1800’s
 Technology became available in the
1940’s and 1950’s

24. Jan 6, 2011 IAT 334 24
Bush
 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.
 Envisioned as microfilm, not computer

25. Jan 6, 2011 IAT 334 25
J.R. Licklider
 1960 - Postulated “man-computer
symbiosis”
 Couple human brains and computing
machines tightly to revolutionize
information handling

26. Jan 6, 2011 IAT 334 26
Vision/Goals
 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

27. Jan 6, 2011 IAT 334 27
Mid 1960’s
 Computers too expensive for individuals
-> timesharing
– increased accessibility
– interactive systems, not jobs
– text processing, editing
– email, shared file system

28. Sutherland Demo Videos
 http://www.youtube.com/watch?v=USyoT_Ha_bA
 http://www.youtube.com/watch?v=mOZqRJzE8xg
Jan 6, 2011 IAT 334 28

29. Jan 6, 2011 IAT 334 29
Douglas Engelbart
 Invented the mouse
 Landmark system/demo:
– hierarchical hypertext, multimedia, mouse,
high-res display, windows, shared files,
electronic messaging, CSCW,
teleconferencing, …
 http://www.youtube.com/watch?v=JfIgzSoTMOs

30. Jan 6, 2011 IAT 334
The Mouse
source: resonancepub.com & brittanica.com
Doug Engelbart’s mouse - 1963-64

31. Jan 6, 2011 IAT 334 31
Alan Kay
 Dynabook - Notebook sized computer
loaded with multimedia and can store
everything
 Personal Computing
 Desktop Interface

32. Jan 6, 2011 IAT 334 32
Ted Nelson
 Computers can help people, not just
business
 Coined term “hypertext”

33. Jan 6, 2011 IAT 334 33
Nicholas Negroponte
 MIT machine architecture & AI group
‘69-’80s
 Ideas:
– wall-sized displays, video disks, AI in
interfaces (agents), speech recognition,
multimedia with hypertext

34. Jan 6, 2011 IAT 334 34
Personal Computers
 Late ‘70’s
– Apple II
– Z-80 CP/M
– IBM PC
 Text and command based
 Word processing
 Spreadsheets!

35. Jan 6, 2011 IAT 334 35
PCs with GUIs
 Xerox PARC - mid 1970’s
– Alto
– Local processor, Bitmap display, Mouse
– Precursor to modern GUI
– LAN - Ethernet

36. Jan 6, 2011 IAT 334
Menus
source: folklore.org
Bill Atkinson’s Polaroids of the first pull-down menu prototype - circa 1979

37. Jan 6, 2011 IAT 334 37
Xerox Star - ‘81
 First commercial PC designed for
“business professionals”
– Desktop metaphor, pointing, WYSIWYG
 First system based on usability
engineering

38. Jan 6, 2011 IAT 334 38
Star
 Commercial flop
– $15k cost
– closed architecture
– lacking key functionality (spreadsheet)

39. Jan 6, 2011 IAT 334 39
Apple Lisa - ‘82
 Based on ideas of Star
 More personal rather than office tool
– Still expensive!
 Failure

40. Jan 6, 2011 IAT 334 40
Apple Macintosh - ‘84
 Aggressive pricing - $2500
 Not trailblazer, smart copier
 Good interface guidelines
 3rd party applications
 High quality graphics and laser printer

41. Windows 95
Jan 6, 2011 IAT 334 41

42. Handhelds
 Portable computing + phone
 Newton, Palm, Blackberry, iPhone
Jan 6, 2011 IAT 334 42

43. Jan 6, 2011 IAT 334 43
Human Capabilities
 Want to improve user performance
 Know the user!
– Senses
– Information processing systems

44. Jan 6, 2011 IAT 334 44
Senses
 Sight, hearing, touch important for
current HCI
– smell, taste ???

45. Jan 6, 2011 IAT 334 45
Sight
 Visual System workings
 Color - color blindness: 8% males,
1% females
 Much done by context & grouping
(words, optical illusions, …)

46. Jan 6, 2011 IAT 334 46
Eyes
 Retina receives image
 Light sensitive cells
 Two types:
– Rods
• Monochrome
• Sensitive to entire visible spectrum
• Small
• Fast-acting
• Distributed throughout Retina
Light
Optic Nerve
Eye

47. Jan 6, 2011 IAT 334 47
Eyes-Retina
 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

48. Jan 6, 2011 IAT 334 48
Fovea
 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

49. Jan 6, 2011 IAT 334 49
Hearing
 Often taken for granted how good it is
– Pitch - frequency
– Loudness - amplitude
– Timbre - type of sound (instrument)
 Sensitive to range 20Hz - 22000Hz
 Limited spatially, good temporal
performance

50. Jan 6, 2011 IAT 334 50
Hearing
 Sounds can be perceived as coming from
a location
– Not terribly accurate
– Cone of confusion

51. Jan 6, 2011 IAT 334 51
 3D Audio cues:
– Interaural Time Difference
– Interaural Intensity Difference
– Pinnae filtering
– Body filtering
3D Audio Perception

52. Jan 6, 2011 IAT 334 52
Touch
 Three main sensations handled by
different types of receptors:
– Pressure (normal)
– Intense pressure (heat/pain)
– Temperature (hot/cold)
 Where important?

53. Jan 6, 2011 IAT 334 53
Models of Human Performance
 Predictive
 Quantitative
– Time to perform
– Time to learn
– Number and type of errors
– Time to recover from errors
 Approximations

54. Jan 6, 2011 IAT 334 54
Basic HCI
 Model Human Processor
– A simple model of human cognition
– Card, Moran, Newell 1983
 Components:
– Senses
– Sensory store
– Short-term memory
– Long-term memory
– Cognition

55. Jan 6, 2011 IAT 334 55
Model Human Processor
Basics
 Based on Empirical Data
 Three interacting subsystems
– Perceptual (read-scan)
– Cognitive (think)
– Motor (respond)

56. Jan 6, 2011 IAT 334 56
Memory
 Three “types”
– Short-term memory
Conscious thought, calculations
– Intermediate
Storing intermediate results, future plans
– Long-term
Permanent, remember everything ever
happened to us

57. Jan 6, 2011 IAT 334 57
Memory: Sort Term
 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

58. Jan 6, 2011 IAT 334 58
Memory: Long Term
 Long Term Memory (LTM)
– “Unlimited” size
– Slower access time (100ms)
– Little decay
– Episodic & Semantic
 Why learn about memory?
– Know what’s behind many HCI techniques
– Predict what users will understand