IAT 334 1 IAT 334 Interface Design Chris Shaw SCHOOL OF INTERACTIVE ARTS TECHNOLOGY SIAT WWWSIATSFUCA ID: 613940
Download Presentation The PPT/PDF document "Jan 6, 2011" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Jan 6, 2011
IAT 334
1
IAT 334Interface Design
Chris Shaw
______________________________________________________________________________________ SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] | WWW.SIAT.SFU.CASlide2
Jan 6, 2011
IAT 334
2
Agenda
Introductions - Me, TAHCI OverviewObjectivesPrinciples
Review HCI’s historyKey people and eventsCourse Info, ProjectDescription, detailsSlide3
Jan 6, 2011
IAT 334
3
IntroductionsInstructor
Chris Shawshaw@sfu.ca
HCI Two-Handed 3D interfacesScientific & Information VisualizationVisual AnalyticsSlide4
Jan 6, 2011
IAT 334
4
IntroductionsTA
Saba Alimadadisalimada@sfu.caSlide5
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 © 2009WebSyllabusAssignmentsHCI resourcesRelated coursesSlide6
Read for next week
Shneiderman & PlaisantChapters 1 + 2
Jan 6, 2011IAT 334
6Slide7
Jan 6, 2011
IAT 334
7
Course Information
GradingLate-term exam 35%Project (4 parts) 7.5% each -> 30%Homeworks
35%Advice: Learn from pastContent, lectures, projects, ...Slide8
Jan 6, 2011
IAT 334
8
Group ProjectDesign and evaluate an interface
0 Team, Topic1 Understanding problem2 Design3 Implement prototype
4 EvaluateSlide9
Jan 6, 2011
IAT 334
9
Project Teams4 people (diverse is best!)
Arrange this in the LabTeam needs to all be in same lab sectionConsider schedules Cool nameSlide10
Jan 6, 2011
IAT 334
10
Why We Are HereLook at
human factors that affect software design and developmentCentral Topic: User interface designSlide11
Jan 6, 2011
IAT 334
11
HCIWhat happens when a human and a computer get together to perform a task
TaskWrite a documentPlan a budgetDesign a presentation
Play a video gameNot a task..Goof off (obviously)Slide12
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 useSlide13
Jan 6, 2011
IAT 334
13
Course AimsConsciousness raising for you
Eg. Don Norman “The Design of Everyday Things”DoorsHandles afford various opening method
Design criticSlide14
Jan 6, 2011
IAT 334
14
Goals of HCI (Shneiderman & Plaisant Chap1)
Allow users to carry out tasksSafely
EffectivelyEfficientlyEnjoyablySlide15
Jan 6, 2011
IAT 334
Goals of System Engineering
FunctionalityTasks and sub-tasks to be carried out
ReliabilityMaintaining trust in the systemStandardization, integration, consistency and portability
Schedules and budgetsAdhering to timelines and expenseHuman factors principles and testing reduces costsSlide16
Jan 6, 2011
IAT 334
16
UsabilityFive
Measurable Goals of UI DesignCombination ofEase of learningHigh speed of user task performanceLow user error rate
Subjective user satisfactionUser retention over timeSlide17
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 DesignSlide18
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 DesignSlide19
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
UsersSlide20
Jan 6, 2011
IAT 334
20
Key Historical EventDesign of the first Mac 1983-1984
“The computer for the rest of us”Slide21
Jan 6, 2011
IAT 334
21
Moving ForwardHow 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 design3. Integrate UI design methods & techniques into standard software development methodologies now in placeSlide22
Jan 6, 2011
IAT 334
22
Improving Interfaces
Know the User!Physical abilitiesCognitive abilitiesPersonality differences
Skill differencesCultural diversityMotivationSpecial needsSlide23
Jan 6, 2011
IAT 334
23
Two Crucial ErrorsAssume all users are alike
Assume all users are like the designerSlide24
Another Crucial Error
Have the user design it!Users bring vital knowledge to design:They know a lot about the
problemThey know a lot about the current toolsThey typically know very little about design
Jan 6, 2011IAT 334
24Slide25
Jan 6, 2011
IAT 334
25
UI Design/Develop ProcessAnalyze user’s goals
Create design alternativesAnalyze designsImplement prototypeTestRefine
DesignEvaluateImplementSlide26
Jan 6, 2011
IAT 334
26
EvaluationThings we can measure
Time to learnSpeed of performanceRate of errors by userRetention over timeSubjective satisfactionSlide27
Jan 6, 2011
IAT 334
27
Interfaces in the WorldVCR
MousePhoneCopierCarAirline reservationAir traffic controlSlide28
Jan 6, 2011
IAT 334
28
History of HCI
______________________________________________________________________________________
SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] | WWW.SIAT.SFU.CASlide29
Jan 6, 2011
IAT 334
29
Agenda
Review HCI’s historyKey people and eventsHuman capabilities
SensesInformation processingPerceptualCognitiveMemorySlide30
Jan 6, 2011
IAT 334
30
History of HCIDigital computer grounded in ideas from 1700’s & 1800’s
Technology became available in the 1940’s and 1950’sSlide31
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.”Slide32
Jan 6, 2011
IAT 334
32
BushPostulated
Memex deviceCan store all records/articles/communicationsLarge memory
Items retrieved by indexing, keywords, cross referencesCan make a trail of links through materialetc.Envisioned as microfilm, not computerSlide33
Jan 6, 2011
IAT 334
33
J.R. Licklider1960 - Postulated “man-computer symbiosis”
Couple human brains and computing machines tightly to revolutionize information handlingSlide34
Jan 6, 2011
IAT 334
34
Vision/GoalsImmediate
Intermediate Long-term
Time sharingElectronic I/OInteractive, real- time systemLarge scale information storage and retrieval
Combined speech
recognition,
character
recognition, light-
pen editing
Natural language
understanding
Speech recognition
of arbitrary users
Heuristic programmingSlide35
Jan 6, 2011
IAT 334
35
Mid 1960’sComputers too expensive for individuals -> timesharing
increased accessibilityinteractive systems, not jobstext processing, editingemail, shared file systemSlide36
Jan 6, 2011
IAT 334
36
Ivan Sutherland
SketchPad - ‘63 PhD thesis at MITHierarchy - pictures & subpicturesMaster picture with instances
ConstraintsIconsCopyingLight pen as input deviceRecursive operationsSlide37
Sutherland Demo Videos
http://www.youtube.com/watch?v=USyoT_Ha_bAhttp://www.youtube.com/watch?v=mOZqRJzE8xg
Jan 6, 2011
IAT 334
37Slide38
Jan 6, 2011
IAT 334
38
Douglas EngelbartInvented 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=JfIgzSoTMOsSlide39
Jan 6, 2011
IAT 334
The Mouse
source: resonancepub.com & brittanica.com
Doug Engelbart’s mouse - 1963-64
Slide40
Jan 6, 2011
IAT 334
40
Alan KayDynabook - Notebook sized computer loaded with multimedia and can store everything
Personal ComputingDesktop InterfaceSlide41
Jan 6, 2011
IAT 334
41
Ted NelsonComputers can help people, not just business
Coined term “hypertext”Slide42
Jan 6, 2011
IAT 334
42
Nicholas NegroponteMIT machine architecture & AI group ‘69-’80s
Ideas:wall-sized displays, video disks, AI in interfaces (agents), speech recognition, multimedia with hypertextSlide43
Jan 6, 2011
IAT 334
43
Personal ComputersLate ‘70’s
Apple IIZ-80 CP/M IBM PCText and command basedWord processingSpreadsheets!Slide44
Jan 6, 2011
IAT 334
44
PCs with GUIsXerox PARC - mid 1970’s
AltoLocal processor, Bitmap display, MousePrecursor to modern GUILAN - EthernetSlide45
Jan 6, 2011
IAT 334
Menus
source: folklore.org
Bill Atkinson’s Polaroids of the first pull-down menu prototype - circa 1979
Slide46
Jan 6, 2011
IAT 334
46
Xerox Star - ‘81First commercial PC designed for “business professionals”
Desktop metaphor, pointing, WYSIWYGFirst system based on usability engineeringSlide47
Jan 6, 2011
IAT 334
47
StarCommercial flop
$15k costclosed architecturelacking key functionality (spreadsheet)Slide48
Jan 6, 2011
IAT 334
48
Apple Lisa - ‘82Based on ideas of Star
More personal rather than office toolStill expensive!FailureSlide49
Jan 6, 2011
IAT 334
49
Apple Macintosh - ‘84Aggressive pricing - $2500
Not trailblazer, smart copierGood interface guidelines3rd party applicationsHigh quality graphics and
laser printerSlide50
Windows 95
Jan 6, 2011
IAT 334
50Slide51
Handhelds
Portable computing + phone
Newton, Palm, Blackberry, iPhone
Jan 6, 2011
IAT 334
51Slide52
Jan 6, 2011
IAT 334
52
Human CapabilitiesWant to improve user
performanceKnow the user!SensesInformation processing systemsSlide53
Jan 6, 2011
IAT 334
53
SensesSight, hearing, touch important for current HCI
smell, taste ???Slide54
Jan 6, 2011
IAT 334
54
SightVisual System workings
Color - color blindness: 8% males, 1% femalesMuch done by context & grouping (words, optical illusions, …)Slide55
Jan 6, 2011
IAT 334
55
Eyes
Retina receives imageLight sensitive cellsTwo types:
RodsMonochromeSensitive to entire visible spectrumSmallFast-actingDistributed throughout Retina
Light
Optic Nerve
Retina
EyeSlide56
Jan 6, 2011
IAT 334
56
Eyes-RetinaRetina Cells: Cones
Three typesRed, Green, BlueEach type sensitive to limited range of visible lightCones are larger cells than rodsCones are less sensitive
Strongly concentrated in FoveaRelatively few cones outside foveaSlide57
Jan 6, 2011
IAT 334
57
FoveaHigh-resolution area of Retina
It’s what you point your eyes at to get good imageAbout 2 degrees visual angleDensely packed with Rods + ConesSlide58
Jan 6, 2011
IAT 334
58
HearingOften taken for granted how good it is
Pitch - frequencyLoudness - amplitudeTimbre - type of sound (instrument)Sensitive to range 20Hz - 22000HzLimited spatially, good temporal performanceSlide59
Jan 6, 2011
IAT 334
59
HearingSounds can be perceived as coming from a location
Not terribly accurateCone of confusionSlide60
Jan 6, 2011
IAT 334
60
3D Audio cues:Interaural Time DifferenceInteraural
Intensity DifferencePinnae filteringBody filtering
3D Audio PerceptionSlide61
Jan 6, 2011
IAT 334
61
TouchThree main sensations handled by different types of receptors:
Pressure (normal)Intense pressure (heat/pain)Temperature (hot/cold)Where important?Slide62
Jan 6, 2011
IAT 334
62
Models of Human Performance
PredictiveQuantitativeTime to performTime to learnNumber and type of errors
Time to recover from errorsApproximationsSlide63
Jan 6, 2011
IAT 334
63
Basic HCIModel Human Processor
A simple model of human cognitionCard, Moran, Newell 1983Components:Senses
Sensory storeShort-term memoryLong-term memoryCognitionSlide64
Jan 6, 2011
IAT 334
64
Model Human Processor BasicsBased on Empirical Data
Three interacting subsystemsPerceptual (read-scan)Cognitive (think)Motor (respond)Slide65
Jan 6, 2011
IAT 334
65
Information ProcessingUsually serial action
Respond to buzzer by pressing button Usually parallel recognitionDriving, reading signs, listening to radioSlide66
Jan 6, 2011
IAT 334
66
Model Human Processor Basics
ParametersProcessors cycle time of 50-200msMemories have type, capacity, decay timeTypes
VisualAuditoryTactile Taste, smell, proprioception, etcSlide67
Jan 6, 2011
IAT 334
67
Model pictureSlide68
Jan 6, 2011
IAT 334
68
Model Picture CloseupSlide69
Jan 6, 2011
IAT 334
69
Perceptual ProcessorContinually “grabs data” from the sensory system
Cycle time: 100ms [50 - 200] msPasses data to Image Store in unrecognized form
“Array of Pixels” (or whatever it is) from eyes“Sound Intensities” from earsSlide70
Jan 6, 2011
IAT 334
70
Sensory Store
The “input buffer” of the sensesStores most recent input unrecognizedStorage time and capacity varies by type
Visual: Nominal RangeCapacity: 17letters of text [7 - 17] lettersDecay Time: 200ms [70 - 1000] msAudio: Capacity: 5 letters of text [4.4-6.6] letters Decay Time: 1500 ms [900 - 3500] msSlide71
Jan 6, 2011
IAT 334
71
MemoryThree “types”
Short-term memory Conscious thought, calculationsIntermediate Storing intermediate results, future plansLong-term
Permanent, remember everything ever happened to usSlide72
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-6328WM: Nominal RangeCapacity: 7 chunks [5 - 9] chunksDecay Time: 7 seconds [5 - 226] secondsAccess Time: 70ms [25 - 170] msSlide73
Jan 6, 2011
IAT 334
73
Memory: Long TermLong Term Memory (LTM)
“Unlimited” sizeSlower access time (100ms)Little decay
Episodic & SemanticWhy learn about memory?Know what’s behind many HCI techniquesPredict what users will understandSlide74
Jan 6, 2011
IAT 334
74
LT Memory StructureEpisodic memory
Events & experiences in serial formSemantic memoryStructured record of facts, concepts & skillsSlide75
Jan 6, 2011
IAT 334
75
Memory CharacteristicsThings move from STM to LTM by rehearsal & practice and by use in context
We “forget” things due to decay and interferenceSlide76
Jan 6, 2011
IAT 334
76
InterferenceInterference
Two strong cues in working memoryLink to different chunks in long term memorySlide77
Jan 6, 2011
IAT 334
77
Interference
Exercise: Read the colors of these words
Introduction Background Theory Lemma ProofSlide78
Jan 6, 2011
IAT 334
78
Read the colors of the words
Black
Red Orange Yellow BlueSlide79
Jan 6, 2011
IAT 334
79
MHP OperationRecognize-Act Cycle
On each cycle, contents in WM initiate actions associatively linked to them in LTMActions modify contents of WMDiscrimination Principle
Retrieval is determined by candidates that exist in memory relative to retrieval cuesInterference by strongly activated chunksSlide80
Jan 6, 2011
IAT 334
80
Perception
Stimuli that occur within one PP cycle fuse into a single conceptmovies (frame rate)Frame rate > 1 / Tp = 1/(100 msec/frame) = 10 f/sec
morse code listening ratePerceptual causalitytwo distinct stimuli can fuse if the first event appears to cause the otherevents must occur in the same cycleSlide81
Jan 6, 2011
IAT 334
81
OperationVariable Cognitive Processor Rate
Cognitive Processor cycle time Tc is shorter with greater effortInduced by increased task demands/informationDecreases with practiceSlide82
Jan 6, 2011
IAT 334
82
Operation: Target findingTask: Move hand to target area
Fitts LawA series of microcorrectionsCorrection takes Tp + Tc + TmTime 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 Slide83
Jan 6, 2011
IAT 334
83
Group ProjectDesign and evaluate
a web-based system0 Team1 Understanding problem
2 Design3 Implement prototype4 EvaluateSlide84
Jan 6, 2011
IAT 334
84
Project Teams4 people (diverse is best!)
Arrange this in the LabTeam needs to all be in same lab sectionConsider schedules Cool nameSlide85
Read for next week
Shneiderman & PlaisantChapters 1 + 2
Jan 6, 2011
IAT 33485