Videos: Designing Interactive Systems I WS 17/18

<— Back to the current DIS I Home Page

1. Introduction to HCI, CMN Model, and Fitts' Law
   • 1.1. Introduction to Human-Computer Interaction
   • 1.2. Class Topics
   • 1.3. Introduction to the CMN Model
   • 1.3.1. Perceptual Processor: Eye Saccades
• 1.3.2. Perceptual Processor: Bloch's Law
• 1.3.3. Cognitive Processor
• 1.3.4. Motor Processor
• 1.4. Introduction to Fitts' Law
• 1.4.1. Calculating Target Width
• 1.4.2. Improving Fitts' Law
• 1.5. Summary
2. Gestalt Laws, Information Content, Visibility, Affordances, Signifiers, and Conceptual Model
   • 2.1. Introduction to Gestalt Laws
   • 2.1.1. Gestalt Laws: Good Shape, Proximity, and Closure
   • 2.1.2. Gestalt Laws: Similarity, Continuity, Experience and Common Fate
   • Gestalt Laws: In-Class Exercise
• 2.2. Information Content
• 2.2.1. Analog or Digital Scales?
• 2.3. HCI Literature
• 2.4. Visibility
• 2.5. Affordances
• 2.6. Signifiers and Conceptual Models
3. Mappings, Constraints, and the Seven Stages of Action
   • 3.1. Introduction to Mappings
   • 3.1.1. Spatial Analogies
   • 3.1.2. Spatial Analogy: Examples
   • 3.1.3. Activity-centered Controls
• 3.1.4. Perceptual Analogies
• 3.1.5. Biological/Cultural Analogies
• 3.1.6. Biological/Cultural Analogies: Examples
• 3.2. Constraints
• 3.2.1. In-Class Exercise: Constraints
• 3.2.2. Forcing Functions
• 3.3. Seven Stages of Action
• 3.3.1. Gulfs
• 3.4. Summary
4. Levels of Processing, Knowledge in the Head and in the World, and Errors
   • 4.1. Introduction to Three Levels of Processing
   • 4.1.1. Design in Three Levels of Processing
   • 4.2. Knowledge in the Head and in the World
   • 4.2.1. Knowledge in the Head and in the World: Constraints
• 4.3. Types of Knowledge
• 4.3.1. Decision Structures
• 4.4. Feedback: Sound
• 4.4.1. Feedback: Visibility & Feedforward
• 4.5. Human Errors & Mistakes
• 4.5.1 Slips
• 4.5.2. Detecting Errors & Designing for Errors
5. History I - From Abacus till Macintosh
   • 5.1. Introduction and Lessons from HCI History
   • 5.2. Precomputing, First Computers, and Batch Processing
   • 5.3. Transaction Systems, Time Sharing, Memex, and Radar Systems
   • 5.4. Sketchpad
• 5.5. NLS and the First Mouse
• 5.6. Early PCs for Hobbyists and Business Users
• 5.7. Xerox Alto
• 5.8. Xerox Star and Design Lessons
• 5.9. Apple Lisa
• 5.10. Why History Matters?, Apple Macintosh
• 5.11. Microsoft Windows
• 5.12. OSF\Motif and the Lineage of Visual Computing Systems
6. History II – Visions, Ubicomp, Technology phases
   • 6.1. Phases of Technology
   • 6.2. Visions of Technology
   • 6.2.1. Visions of Technology: How to Interpret (Past) Visions?
   • 6.2.2. Multimodal Interfaces: Put That There
• 6.2.3. Apple Knowledge Navigator
• 6.2.4. Sun Starfire
• 6.2.5. Virtual Reality
• 6.2.6. Ubiquitous Computing
• 6.2.6.1. Ubiquitous Computing
• 6.2.6.2. PARC Devices
• 6.2.6.3. Wrap Up and Summary of UbiComp
7. DIA Cycle, Observing Users, Brainstorming, and Storyboards
   • 7.1. Roadmap, Wrong Way and DIA Cycle
   • 7.2. Prototyping in DIA Cycle, Root-Cause Analysis and the Double-Diamond Model of Design
   • 7.3. Design Thinking and the First Three Questions
   • 7.4. Classifying Users
• 7.5. Observing Users (Interviews)
• 7.6. Personas and Brainstorming
• 7.7. Styles of Thinking and Thinking Hats
• 7.8. Storyboards
• 7.9. How to Sketch Users and Scenarios
8. Prototyping
   • 8.1. Paper Prototype
   • 8.2. Post-it Prototype
   • 8.3. Software Prototype
   • 8.4. Software Prototype: Screenshots and Storyboards
• 8.5. Prototyping Tools
• 8.6. User Interface Builders
• 8.7. Hardware Prototypes
• 8.8. Wizard of Oz
9. Evaluation
   • 9.1. Evaluation: When, why and where?
   • 9.2. Participatory Design
   • 9.3. Evaluation Techniques
   • 9.3.1. Evaluation Techniques: Literature Review, Cognitive Walkthrough and Heuristic Evaluation (E1-E3)
• 9.3.2. Evaluation Techniques: Model-Based Evaluation (E4) and Pattern Languages
• 9.3.3. Evaluation Techniques: Model Extraction, Silent Observation, Think Aloud, Constructive Interaction (E5-E8)
• 9.3.4. Evaluation Techniques: Retrospective Testing (E9) and Recording Observations
• 9.3.5. Evaluation Techniques: Controlled Experiments (E10)
• 9.3.5.1. Controlled Experiments: Steps, Subjects and Variables
• 9.3.5.2. Controlled Experiments: Hypothesis
• 9.3.5.3. Basic Experimental Designs
• 9.3.5.4. Validity and Reliability
• 9.4. Other Evaluation Methods and dealing with Users
10. GOMS, Interface Efficiency, and the Ten Golden Rules of Interface Design
    • 10.1. GOMS
    • 10.1.1. GOMS Part I
    • 10.1.2. GOMS Part II
    • 10.3. Keystroke_Level_Model
• 10.1.3.1. Keystroke-Level Model: Basic Design
• 10.1.3.2. Keystroke-Level Model: Rules for M's
• 10.1.3.3. Measuring Interface Efficiency
• 10.2. Measuring Interface Efficiency: Example Temperatur Converter Explanation
• 10.3. Ten Golden Rules of Interface Design
• 10.3.1. Ten Golden Rules of Interface Design: General and Keep the Interface Simple
• 10.3.2. Ten Golden Rules of Interface Design: Speak the user's language
• 10.3.3. Ten Golden Rules of Interface Design: Be consistent and predictable
• 10.3.4. Ten Golden Rules of Interface Design: Provide feedback and be responsive
• 10.3.5. Ten Golden Rules of Interface Design: Minimize memory load; Avoid errors help to recover, offer undo
• 10.3.6. Ten Golden Rules of Interface Design: Design clear exits and closed dialogs; Include help and documentation
• 10.3.7. Ten Golden Rules of Interface Design: Address diverse user needs; Hire a graphic designer
11. Responsiveness and Performance, Grammars, and State Transition Networks
    • 11.1. Responsiveness and Performance
    • 11.1.1. Responsiveness
    • 11.1.2. Three Human Deadlines
    • 11.1.3. Design Techniques for Responsiveness
• 11.1.3.1. Design Techniques for Responsiveness: Meet Human Deadlines and Display Important Information First
• 11.1.3.2. Design Techniques for Responsiveness: Work in Parallel, Optimize Queueing, and Manage Time Dynamically
• 11.1.4. The Top 5 Performance Hits
• 11.2. Back to BASICs: UI Specification Languages
• 11.3. Grammars and Production Rules
• 11.4. State Transition Networks
• 11.4.1. STNs and Example STN for Personal Orchestra
• 11.4.2. Example STN for Silhouettes and Hierarchical STNs
• 11.4.3. Using STNs in Prototyping
• 11.4.4. Checking STN Properties: States
12. Petri Nets
    • 12.1. Petri-Nets
    • 12.2.1. State Charts
    • 12.2.2. State Charts (from WS 14)
    • 12.2.3. Diagrams for User Documentation, Digital Watch, Semantics
• 12.3. Competitive Forces
• 12.4. Life-Cycle of Products, Incremental and Radical Innovation
• 12.5. Roadmap Summary, What’s Next?
13. Visual Design
    • 13. Visual Design