Human-Computer Interaction - SFU.ca

Human-Computer Interaction - SFU.ca

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

HCI Overview - Me, TA Objectives Principles g Review HCIs history Key people and events g Course Info, Project Description, details Jan 6, 2011 IAT 334

2 Introductions g Instructor Chris Shaw [email protected] g HCI Two-Handed 3D interfaces Scientific & Information Visualization Visual Analytics Jan 6, 2011

IAT 334 3 Introductions g TA Saba Alimadadi [email protected] 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 1 2 3 4 Jan 6, 2011 Team, Topic Understanding problem Design

Implement prototype Evaluate 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 g 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

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.

Jan 6, 2011 low costs is critical over reliability, ease of learning, errors calculated against costs, subjective satisfaction of modest importance 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. Sept14, 2009 users knowledgeable in domain but vary in computer skills, direct-manipulation using familiar routines and gestures work best, difficult systems to design and evaluate. IAT 334 Accommodating Human Diversity Physical Abilities and Workplaces

Cognitive and Perceptual Abilities Jan 6, 2011 Personality Differences Cultural and International Diversity IAT 334 Users with Disabilities Elderly

Users Key Historical Event g g Design of the first Mac 1983-1984 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 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 g g g g

g Analyze users goals Create design alternatives Analyze designs Implement prototype Test Evaluate Refine Jan 6, 2011 IAT 334 Design Implement 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

g g g g g g VCR Mouse Phone Copier Car Airline reservation 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 HCIs 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 1700s & 1800s g Technology became available in the 1940s and 1950s 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 Combined speech Natural language Time sharing Electronic I/O

recognition, understanding Interactive, realcharacter Speech recognition recognition, lighttime system of arbitrary users Large scale pen editing Heuristic programming information storage and retrieval Jan 6, 2011 IAT 334 34

Mid 1960s 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 g

http://www.youtube.com/watch?v=USyoT_Ha_bA http://www.youtube.com/watch?v=mOZqRJzE8xg Jan 6, 2011 IAT 334 37 Douglas Engelbart g g Invented the mouse 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 Engelbarts mouse - 1963-64 source: resonancepub.com & brittanica.com Jan 6, 2011

IAT 334 Alan Kay g g g Dynabook - Notebook sized computer loaded with multimedia and can store everything Personal Computing 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 70s Apple II Z-80 CP/M IBM PC g g g Text and command based Word processing Spreadsheets! Jan 6, 2011 IAT 334

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

Bill Atkinsons 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 g g g g Aggressive pricing - $2500 Not trailblazer, smart copier Good interface guidelines 3rd party applications High quality graphics and laser printer Jan 6, 2011

IAT 334 49 Windows 95 Jan 6, 2011 IAT 334 50 Handhelds g g Portable computing + phone 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 g g g Retina receives image Light sensitive cells Two types: Eye Light Optic Nerve Rods

Jan 6, 2011 Monochrome Sensitive to entire visible spectrum Small Fast-acting Distributed throughout Retina 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 Its 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 g Sensitive to range 20Hz - 22000Hz 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 g Predictive 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 g

Based on Empirical Data 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 g g

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 Jan 6, 2011 IAT 334 69 Sensory Store g g g

The input buffer of the senses Stores most recent input unrecognized Storage time and capacity varies by type Visual: Nominal Range 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: Nominal Range 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 whats 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 g 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 Jan 6, 2011 IAT 334 82 Group Project g Design and evaluate a web-based system 0 1

2 3 4 Jan 6, 2011 Team Understanding problem Design Implement prototype Evaluate 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

Recently Viewed Presentations