User Interface Design

1. Jan 6, 2011 IAT 334 1
IAT 334
Interface Design
Chris Shaw
______________________________________________________________________________________
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
Introductions
 Instructor
– Chris Shaw
– shaw@sfu.ca
 HCI
– Two-Handed 3D interfaces
– Scientific & Information Visualization
– Visual Analytics

4. Jan 6, 2011 IAT 334 4
Introductions
 TA
– Saba Alimadadi
– salimada@sfu.ca

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

6. Read for next week
 Shneiderman & Plaisant
– Chapters 1 + 2
Jan 6, 2011 IAT 334 6

7. Jan 6, 2011 IAT 334 7
Course Information
 Grading
– Late-term exam 35%
– Project (4 parts) 7.5% each -> 30%
– Homeworks 35%
 Advice: Learn from past
– Content, lectures, projects, ...

8. Jan 6, 2011 IAT 334 8
Group Project
 Design and evaluate an interface
0 Team, Topic
1 Understanding problem
2 Design
3 Implement prototype
4 Evaluate

9. Jan 6, 2011 IAT 334 9
Project Teams
 4 people (diverse is best!)
– Arrange this in the Lab
– Team needs to all be in same lab section
 Consider schedules
 Cool name

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

11. Jan 6, 2011 IAT 334 11
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
– Not a task..
• Goof off (obviously)

12. Jan 6, 2011 IAT 334 12
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

13. Jan 6, 2011 IAT 334 13
Course Aims
 Consciousness raising for you
– Eg. Don Norman
• “The Design of Everyday Things”
– Doors
• Handles afford various opening method
 Design critic

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

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

16. Jan 6, 2011 IAT 334 16
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

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

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

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

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

21. Jan 6, 2011 IAT 334 21
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

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

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

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

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

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

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

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

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

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

31. Jan 6, 2011 IAT 334 31
Vannevar Bush
 “As We May Think” - 1945 Atlantic
Monthly
“…publication has been extended far
beyond our present ability to make real
use of the record.”

32. Jan 6, 2011 IAT 334 32
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

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

34. Jan 6, 2011 IAT 334 34
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

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

36. Jan 6, 2011 IAT 334 36
Ivan Sutherland
 SketchPad - ‘63 PhD thesis at MIT
– Hierarchy - pictures & subpictures
– Master picture with instances
– Constraints
– Icons
– Copying
– Light pen as input device
– Recursive operations

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

38. Jan 6, 2011 IAT 334 38
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

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

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

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

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

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

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

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

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

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

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

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

50. Windows 95
Jan 6, 2011 IAT 334 50

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

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

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

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

55. Jan 6, 2011 IAT 334 55
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

56. Jan 6, 2011 IAT 334 56
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

57. Jan 6, 2011 IAT 334 57
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

58. Jan 6, 2011 IAT 334 58
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

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

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

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

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

63. Jan 6, 2011 IAT 334 63
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

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

65. Jan 6, 2011 IAT 334 65
Information Processing
 Usually serial action
– Respond to buzzer by pressing button
 Usually parallel recognition
• Driving, reading signs, listening to radio

66. Jan 6, 2011 IAT 334 66
Model Human Processor
Basics
 Parameters
– Processors cycle time of 50-200ms
– Memories have type, capacity, decay time
 Types
– Visual
– Auditory
– Tactile
– Taste, smell, proprioception, etc

67. Jan 6, 2011 IAT 334 67
Model
picture

68. Jan 6, 2011 IAT 334 68
Model Picture Closeup

69. Jan 6, 2011 IAT 334 69
Perceptual Processor
 Continually “grabs data” from the sensory
system
 Cycle time: 100ms [50 - 200] ms
 Passes data to Image Store in
unrecognized form
– “Array of Pixels” (or whatever it is) from eyes
– “Sound Intensities” from ears

70. Jan 6, 2011 IAT 334 70
Sensory Store
 The “input buffer” of the senses
 Stores most recent input unrecognized
 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

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

72. Jan 6, 2011 IAT 334 72
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

73. Jan 6, 2011 IAT 334 73
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

74. Jan 6, 2011 IAT 334 74
LT Memory Structure
 Episodic memory
– Events & experiences in serial form
 Semantic memory
– Structured record of facts, concepts & skills

75. Jan 6, 2011 IAT 334 75
Memory Characteristics
 Things move from STM to LTM by
rehearsal & practice and by use in context
 We “forget” things due to decay and
interference

76. Jan 6, 2011 IAT 334 76
Interference
 Interference
– Two strong cues in working memory
– Link to different chunks in long term memory

77. Jan 6, 2011 IAT 334 77
Interference
Exercise: Read the colors of these words
Introduction
Background
Theory
Lemma
Proof

78. Jan 6, 2011 IAT 334 78
Read the colors of the words
Black Red
Orange Yellow
Blue

79. Jan 6, 2011 IAT 334 79
MHP Operation
 Recognize-Act Cycle
– On each cycle, contents in WM initiate actions
associatively linked to them in LTM
– Actions modify contents of WM
 Discrimination Principle
– Retrieval is determined by candidates that
exist in memory relative to retrieval cues
– Interference by strongly activated chunks

80. Jan 6, 2011 IAT 334 80
Perception
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
Perceptual causality
– two distinct stimuli can fuse if the first event appears
to cause the other
– events must occur in the same cycle

81. Jan 6, 2011 IAT 334 81
Operation
 Variable Cognitive Processor Rate
– Cognitive Processor cycle time Tc is shorter
with greater effort
– Induced by increased task
demands/information
– Decreases with practice

82. Jan 6, 2011 IAT 334 82
Operation: Target finding
 Task: Move hand to target area
 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

83. Jan 6, 2011 IAT 334 83
Group Project
 Design and evaluate a web-based system
0 Team
1 Understanding problem
2 Design
3 Implement prototype
4 Evaluate

84. Jan 6, 2011 IAT 334 84
Project Teams
 4 people (diverse is best!)
– Arrange this in the Lab
– Team needs to all be in same lab section
 Consider schedules
 Cool name

85. Read for next week
 Shneiderman & Plaisant
– Chapters 1 + 2
Jan 6, 2011 IAT 334 85