final review 490jl. what’s on the final? everything. lecture slides assignments/project readings...
TRANSCRIPT
![Page 1: Final Review 490JL. What’s on the Final? Everything. Lecture Slides Assignments/Project Readings Discussion Section Worth 20 %](https://reader035.vdocuments.site/reader035/viewer/2022081520/56649f135503460f94c2690a/html5/thumbnails/1.jpg)
Final Review
490JL
![Page 2: Final Review 490JL. What’s on the Final? Everything. Lecture Slides Assignments/Project Readings Discussion Section Worth 20 %](https://reader035.vdocuments.site/reader035/viewer/2022081520/56649f135503460f94c2690a/html5/thumbnails/2.jpg)
What’s on the Final?
Everything. Lecture Slides Assignments/Project Readings Discussion Section
Worth 20 %
![Page 3: Final Review 490JL. What’s on the Final? Everything. Lecture Slides Assignments/Project Readings Discussion Section Worth 20 %](https://reader035.vdocuments.site/reader035/viewer/2022081520/56649f135503460f94c2690a/html5/thumbnails/3.jpg)
What is HCI?
Design
Organizational & Social Issues
Technology Humans
Tasks
![Page 4: Final Review 490JL. What’s on the Final? Everything. Lecture Slides Assignments/Project Readings Discussion Section Worth 20 %](https://reader035.vdocuments.site/reader035/viewer/2022081520/56649f135503460f94c2690a/html5/thumbnails/4.jpg)
What is HCI?
Design
Organizational & Social Issues
Technology Humans
Tasks
LearningNew Tasks
![Page 5: Final Review 490JL. What’s on the Final? Everything. Lecture Slides Assignments/Project Readings Discussion Section Worth 20 %](https://reader035.vdocuments.site/reader035/viewer/2022081520/56649f135503460f94c2690a/html5/thumbnails/5.jpg)
Iteration at Every Stage
Design
Prototype
Evaluate
![Page 6: Final Review 490JL. What’s on the Final? Everything. Lecture Slides Assignments/Project Readings Discussion Section Worth 20 %](https://reader035.vdocuments.site/reader035/viewer/2022081520/56649f135503460f94c2690a/html5/thumbnails/6.jpg)
Goals of the course
1) Learn to design, prototype, & evaluate UIs the needs & tasks of prospective users cognitive/perceptual constraints that affect design technology & techniques used to prototype UIs techniques for evaluating a user interface design importance of iterative design for usability technology used to prototype & implement UI code how to work together on a team project communicate your results to a group
• key to your future success
2) Understand where technology is going & what UIs of the future might be like
![Page 7: Final Review 490JL. What’s on the Final? Everything. Lecture Slides Assignments/Project Readings Discussion Section Worth 20 %](https://reader035.vdocuments.site/reader035/viewer/2022081520/56649f135503460f94c2690a/html5/thumbnails/7.jpg)
Intro, Design Discovery
Intro Design triangle Usability Metrics
Task Analysis Questions *** Tasks
Contextual Inquiry Context, Apprentice Model
![Page 8: Final Review 490JL. What’s on the Final? Everything. Lecture Slides Assignments/Project Readings Discussion Section Worth 20 %](https://reader035.vdocuments.site/reader035/viewer/2022081520/56649f135503460f94c2690a/html5/thumbnails/8.jpg)
Conceptual Models & Interface Metaphors Design Concepts
Affordances Conceptual Models (Design, Customer) Visibility Metaphors Consistency
Teams vs. Groups Commitment, common goals, mix of skills,
agreement, mission statements etc…
Also, remember the reading The Discipline of Teams!
![Page 9: Final Review 490JL. What’s on the Final? Everything. Lecture Slides Assignments/Project Readings Discussion Section Worth 20 %](https://reader035.vdocuments.site/reader035/viewer/2022081520/56649f135503460f94c2690a/html5/thumbnails/9.jpg)
Human Abilities
Human Perception Color sensitivity & physical human eye Hue, Lightness, Saturation
Model Human Processor Fitt’s law LTM, STM 100ms
![Page 10: Final Review 490JL. What’s on the Final? Everything. Lecture Slides Assignments/Project Readings Discussion Section Worth 20 %](https://reader035.vdocuments.site/reader035/viewer/2022081520/56649f135503460f94c2690a/html5/thumbnails/10.jpg)
Lo-Fi Prototyping
Lo-fi Prototyping Advantages:
• Speed• Cost• Quickly iterate• Focus on interaction rather than details
Conducting a test Wizard of Oz Informal prototyping tools
![Page 11: Final Review 490JL. What’s on the Final? Everything. Lecture Slides Assignments/Project Readings Discussion Section Worth 20 %](https://reader035.vdocuments.site/reader035/viewer/2022081520/56649f135503460f94c2690a/html5/thumbnails/11.jpg)
Heuristic Evaluation
Pros Fast +Cheap Gets major problems
Cons: Not as in depth as User Testing False Positives Need trained evaluators
Phases Training Evaluation (x2) Severity Rating Debriefing
Diminishing returns when adding evaluators (sweet spot 3-5) Have evaluators independently rate severity Alternate with user testing
![Page 12: Final Review 490JL. What’s on the Final? Everything. Lecture Slides Assignments/Project Readings Discussion Section Worth 20 %](https://reader035.vdocuments.site/reader035/viewer/2022081520/56649f135503460f94c2690a/html5/thumbnails/12.jpg)
Design Patterns
Design patterns communicate common design problems and solutions
Prevent “reinvention” Not too general & not too specific
Use a solution “a million times over, without ever doing it the same way twice”
Web Design Patterns Above the Fold Shopping Cart Location Bread Crumbs Up-selling/Cross-selling Visibility Action Button …
![Page 13: Final Review 490JL. What’s on the Final? Everything. Lecture Slides Assignments/Project Readings Discussion Section Worth 20 %](https://reader035.vdocuments.site/reader035/viewer/2022081520/56649f135503460f94c2690a/html5/thumbnails/13.jpg)
Rapid Prototyping
Difference from Lo-Fi? Problems with Lo-Fi?
Computer “buggy” Timings Affordances/Doesn’t look like final version Unrealistic / Hard to recognize widgets Not in context of user’s work Some things hard to simulate
(dragging/highlights) Advantages of Prototyping Tools?
Faster than code
![Page 14: Final Review 490JL. What’s on the Final? Everything. Lecture Slides Assignments/Project Readings Discussion Section Worth 20 %](https://reader035.vdocuments.site/reader035/viewer/2022081520/56649f135503460f94c2690a/html5/thumbnails/14.jpg)
Visual Design
Typography Grid Systems Small Multiples Color Spaces
RGB vs. HSV (a.k.a. HLS)Use color properly – not for ordering!
![Page 15: Final Review 490JL. What’s on the Final? Everything. Lecture Slides Assignments/Project Readings Discussion Section Worth 20 %](https://reader035.vdocuments.site/reader035/viewer/2022081520/56649f135503460f94c2690a/html5/thumbnails/15.jpg)
Model View Controller
Model
View
Controller
![Page 16: Final Review 490JL. What’s on the Final? Everything. Lecture Slides Assignments/Project Readings Discussion Section Worth 20 %](https://reader035.vdocuments.site/reader035/viewer/2022081520/56649f135503460f94c2690a/html5/thumbnails/16.jpg)
Toolkits
Computer Graphics Stroke Model, Pixel Model, Region Model Fonts –Serif/Sans Serif Image depth, Aliasing Coordinate Systems
Toolkits Sequential Event Driven
• When would you use each? Interactor Tree Definitions
Dispatching events: bottom-most, top-most Latency problems with networked window systems
![Page 17: Final Review 490JL. What’s on the Final? Everything. Lecture Slides Assignments/Project Readings Discussion Section Worth 20 %](https://reader035.vdocuments.site/reader035/viewer/2022081520/56649f135503460f94c2690a/html5/thumbnails/17.jpg)
Advanced User Testing
User testing is important Don’t know how good a UI is until people use it Evaluators may know too much or too little Hard to predict what people will do
User testing takes time & effort Problems finding representative users
Early testing can be done on low-fi mock-ups real tasks & representative participants
Be ethical & treat your participants well
![Page 18: Final Review 490JL. What’s on the Final? Everything. Lecture Slides Assignments/Project Readings Discussion Section Worth 20 %](https://reader035.vdocuments.site/reader035/viewer/2022081520/56649f135503460f94c2690a/html5/thumbnails/18.jpg)
Advanced User Testing (continued) Process data: what people are doing & why
Thinking aloud Critical incidents
Bottom line data: requires more participants to get statistically reliable results
Difference between between & within groups? between groups: everyone participates in
one condition within groups: everyone participates in
multiple conditions
![Page 19: Final Review 490JL. What’s on the Final? Everything. Lecture Slides Assignments/Project Readings Discussion Section Worth 20 %](https://reader035.vdocuments.site/reader035/viewer/2022081520/56649f135503460f94c2690a/html5/thumbnails/19.jpg)
Action Analysis
GOMS When to use? How to use it?
GOMS: only gives performance for expert behavior Only works for goal directed tasks hard to create model, but still easier than user testing Does not address? … readability, memorability of icons, commands
Automated usability faster than traditional techniques can involve more participants -> convincing data easier to do comparisons across sites tradeoff with losing observational data
![Page 20: Final Review 490JL. What’s on the Final? Everything. Lecture Slides Assignments/Project Readings Discussion Section Worth 20 %](https://reader035.vdocuments.site/reader035/viewer/2022081520/56649f135503460f94c2690a/html5/thumbnails/20.jpg)
From Section
Speech UI’s Motivation Why they’re hard Speech Recognition / Production
Errors Types of Error Strategies
CSCW CSCW vs HCI Dimensions of Cooperation Coordination, Cooperation, Communication
Toolkits
![Page 21: Final Review 490JL. What’s on the Final? Everything. Lecture Slides Assignments/Project Readings Discussion Section Worth 20 %](https://reader035.vdocuments.site/reader035/viewer/2022081520/56649f135503460f94c2690a/html5/thumbnails/21.jpg)
From Assignment
Be familiar with: Contextual Inquiry Task Analysis Low Fidelity Prototyping Heuristic Evaluation Hall of Fame/Shame Usability Testing
![Page 22: Final Review 490JL. What’s on the Final? Everything. Lecture Slides Assignments/Project Readings Discussion Section Worth 20 %](https://reader035.vdocuments.site/reader035/viewer/2022081520/56649f135503460f94c2690a/html5/thumbnails/22.jpg)
Good Luck!
Questions?
![Page 23: Final Review 490JL. What’s on the Final? Everything. Lecture Slides Assignments/Project Readings Discussion Section Worth 20 %](https://reader035.vdocuments.site/reader035/viewer/2022081520/56649f135503460f94c2690a/html5/thumbnails/23.jpg)
More Details
![Page 24: Final Review 490JL. What’s on the Final? Everything. Lecture Slides Assignments/Project Readings Discussion Section Worth 20 %](https://reader035.vdocuments.site/reader035/viewer/2022081520/56649f135503460f94c2690a/html5/thumbnails/24.jpg)
History of HCI
Vannevar Bush As we may think: Predictions? Doug Englebart
Inventions? Noun-Verb, Verb-Noun Augmenting human intellect
![Page 25: Final Review 490JL. What’s on the Final? Everything. Lecture Slides Assignments/Project Readings Discussion Section Worth 20 %](https://reader035.vdocuments.site/reader035/viewer/2022081520/56649f135503460f94c2690a/html5/thumbnails/25.jpg)
A Quick Topics List
Know thy user & involve them in design answer questions before designing who, what, where, when, how often? users & data?, other tools? when things go
wrong? Selecting tasks
real tasks with reasonable functionality coverage complete, specific tasks of what user wants to do
Contextual inquiry way to answer the task analysis questions interview & observe real users use the master-apprentice model to get them to
teach you
![Page 26: Final Review 490JL. What’s on the Final? Everything. Lecture Slides Assignments/Project Readings Discussion Section Worth 20 %](https://reader035.vdocuments.site/reader035/viewer/2022081520/56649f135503460f94c2690a/html5/thumbnails/26.jpg)
Conceptual Models & Interface Metaphors Conceptual Model
Mental representation of how object works & how interface controls affect it
Mismatch? Affordances as Perceptual Clues
Well-designed objects have affordances Metaphors Consistency Design Guidelines
Provide good conceptual model Map interface controls to user’s model Make things visible Provide feedback Be consistent
![Page 27: Final Review 490JL. What’s on the Final? Everything. Lecture Slides Assignments/Project Readings Discussion Section Worth 20 %](https://reader035.vdocuments.site/reader035/viewer/2022081520/56649f135503460f94c2690a/html5/thumbnails/27.jpg)
Task Analysis
Who is going to use the system? What tasks do they now perform? What tasks are desired? How are the tasks learned? Where are the tasks performed? What’s the relationship between user & data? What other tools does the user have? How do users communicate with each other? How often are the tasks performed? What are the time constraints on the tasks? What happens when things go wrong?
![Page 28: Final Review 490JL. What’s on the Final? Everything. Lecture Slides Assignments/Project Readings Discussion Section Worth 20 %](https://reader035.vdocuments.site/reader035/viewer/2022081520/56649f135503460f94c2690a/html5/thumbnails/28.jpg)
Web Design Patterns
Designers create representations of sites at multiple levels of detail Web sites are iteratively refined at all levels of detail
Site Maps, Storyboards, Schematics, Mock-ups Patterns:
Site Branding Personal E-Commerce Obvious Links Above the Fold Location Bread Crumbs Personalized Recommendations/Recommendation Continuity Shopping Cart Up-selling/Cross-selling Visibility Action Button Quick Flow Checkout New account Process Funnel Order Summary Context Sensitive Help Navigation Bar Meaningful Error Messages Search Action Module
![Page 29: Final Review 490JL. What’s on the Final? Everything. Lecture Slides Assignments/Project Readings Discussion Section Worth 20 %](https://reader035.vdocuments.site/reader035/viewer/2022081520/56649f135503460f94c2690a/html5/thumbnails/29.jpg)
A Quick Topics List
Rapid Prototyping Difference from Lo-Fi? Problems with Lo-Fi? Advantages of Tools?
![Page 30: Final Review 490JL. What’s on the Final? Everything. Lecture Slides Assignments/Project Readings Discussion Section Worth 20 %](https://reader035.vdocuments.site/reader035/viewer/2022081520/56649f135503460f94c2690a/html5/thumbnails/30.jpg)
Visual Design
How do Serif fonts help the reader? serifs lead your eye along the line
Grids help clarify & simply visual design by? reducing visual clutter improving consistency between items put things where people expect
How do small multiples enable us to notice differences? only make changes (e.g., in color) for differences that
matter How can color be problematic online?
device may not be able to display color presentation is different on different devices
(calibration) using color values for continuous scales (ok to use
brightness)
![Page 31: Final Review 490JL. What’s on the Final? Everything. Lecture Slides Assignments/Project Readings Discussion Section Worth 20 %](https://reader035.vdocuments.site/reader035/viewer/2022081520/56649f135503460f94c2690a/html5/thumbnails/31.jpg)
Toolkit Details
Computer Graphics Stroke Model, Pixel Model, Region Model Aliasing Coordinate Systems
Event-Driven Programming communication from user to computer is done via “events”
Clipping ? drawing only regions that are visible to the user
Windowing systems special problem with networked WS? - latency
Input events Main event loop used to dispatch events Interactor trees used for
figuring out where to dispatch events Dispatching events: bottom-most, top-most Event focus
![Page 32: Final Review 490JL. What’s on the Final? Everything. Lecture Slides Assignments/Project Readings Discussion Section Worth 20 %](https://reader035.vdocuments.site/reader035/viewer/2022081520/56649f135503460f94c2690a/html5/thumbnails/32.jpg)
A Quick Topics List
Model View Controller What do each of the parts do? Which two are often combined? Why?
Toolkits Pixel model Stroke model Aliasing Coordinates: Device, Window, Physical,
Model
![Page 33: Final Review 490JL. What’s on the Final? Everything. Lecture Slides Assignments/Project Readings Discussion Section Worth 20 %](https://reader035.vdocuments.site/reader035/viewer/2022081520/56649f135503460f94c2690a/html5/thumbnails/33.jpg)
A Quick Topics List
Advanced User Testing Tasks Process, Bottom-line Data (dif? What good
for what?) Between Groups, Within Groups Here is an example of a user test: Where
are the flaws?