INS202: Human-Computer Interaction (HCI) Definitive Study Guide

Learning Outcomes for INS202: Human-Computer Interface (HCI)

• Course Credit/Contact: 2 Units (C:LH; 45).

• Outcome 1: Explain human-computer interaction and interaction design.

• Outcome 2: Understand and conceptualize the nature of interaction.

• Outcome 3: Understand principles and the application of user-centered design (UCD).

• Outcome 4: Understand design rules and various interaction models.

• Outcome 5: Knowledge of interface design guidelines.

• Outcome 6: Identify different interaction styles within HCI.

• Outcome 7: Understand how interfaces psychologically and behaviorally affect users.

• Outcome 8: Explain the interaction process cycle.

• Outcome 9: Explain life cycle models in both Software Engineering and HCI.

• Outcome 10: Knowledge of programming tools used for interactive systems.

• Outcome 11: Explain techniques for evaluating interactive systems.

• Outcome 12: Understand general principles of universal (accessible) design.

• Outcome 13: Understand requirements and approaches to providing user support.

• Outcome 14: Understand principles of effective display design.

• Outcome 15: Explain user interface issues related to task design and user selection.

Foundations of HCI

• Definition: Human-Computer Interaction (HCI) is a field of study concerned with the design, evaluation, and implementation of interactive computing systems for human use.

• Primary Focus: Improving interaction between users and computers to make systems more usable, efficient, and satisfying.

• Importance: A powerful system is useless if users cannot operate it effectively. Design must align with human capabilities and limitations rather than forcing adaptation to technology.

• Components of HCI:

  • The Human: Considers physical and cognitive abilities—perception, memory, attention, and motor skills.

  • The Computer: Refers to hardware and software—input devices (keyboards, touchscreens) and output devices (monitors, speakers).

  • The Interaction: The communication path (clicking, typing, swiping) between the user and the system.

Human Factors and Cognitive Load

• Human Perception: Determines how users interpret visual and auditory data; necessitates clear layouts, readability, and appropriate color usage.

• Attention Limits: Presentation of too much information simultaneously can overwhelm users.

• Role of Memory: Short-term memory is limited. Designs should favor recognition (menus, icons) over recall.

• Cognitive Load: The mental effort required; keeping it low prevents confusion and frustration.

• Usability Factors:

  • Learnability: Ease of use for new users.

  • Efficiency: Speed of use for experienced users.

  • Memorability: Ease of remembering actions after a period of non-use.

  • Errors: Accuracy, minimizing errors, and providing easy recovery.

  • Satisfaction: The pleasantness of the experience.

History and Generations of Interactive Software

• Interactive vs. Non-Interactive: Interactive software requires user input as it runs (e.g., word processors, spreadsheets). Non-interactive programs run independently (e.g., compilers, batch-processing).

• First Generation (CLI): Command-line systems (UNIX, DOS). Required memorizing specific commands and syntax. Tightly controlled interaction.

• Second Generation (Menus/Forms): Eased memory demands. Examples include Automatic Teller Machines (ATMs) and data entry forms.

• Third Generation (WIMP/GUI): Introduced by Xerox Corporation in 1980 with the Xerox Star.

  • Innovation: Combined mouse, icons, desktop metaphor, windows, and bit-mapped displays.

  • Evolution: Star $\rightarrow$ Apple Lisa/Macintosh (mid-1980s) $\rightarrow$ Microsoft Windows (1990s).

• Current/Future Trends: Virtualization, intelligent agents, and direct manipulation.

Ergonomics and Human Factors

• Standard Definition (ISO 6385:2016): A scientific discipline concerned with understanding interactions among humans and other system elements to optimize human well-being and system performance.

• Ergonomics Sub-Areas:

  • Performance Ergonomics: Uses mathematical metrics to indicate efficiency (internal performance) and effectiveness (external performance).

  • Physical Ergonomics: Focuses on human anatomy, biomechanics, and anthropometry. Addresses repetitive strain injuries, posture, and strength requirements.

  • Cognitive Ergonomics: Studies mental processes (memory, reasoning, perception) to ensure systems match psychological capabilities.

Efficiency and Effectiveness Metrics

• Efficiency (Internal): The relationship between inputs (resources like time, cost, energy) and results (outputs).

  • Metrics: Task time, cost-effectiveness, product-time ratio, unnecessary actions, and fatigue.

• Effectiveness (External): Whether users can actually complete tasks accurately without negative consequences.

  • Metrics: Task completion rate, objectives achieved, errors per task, and task error intensity.

Cognitive Theories in HCI

• Model Human Processor (MHP): Views humans as information-processing systems with three subsystems:

  • Perceptual System: Receives environment input (visual/auditory).

  • Cognitive System: Processes data using memory and decision-making.

  • Motor System: Executes physical actions (clicking/typing).

• GOMS Model (Goals, Operators, Methods, Selection Rules):

  • Goals: Final objective (e.g., "Send email").

  • Operators: Basic steps (e.g., "Press key").

  • Methods: Procedures/sequences of operators (e.g., shortcut vs. menu).

  • Selection Rules: Criteria for choosing a method when multiples exist.

• ACT-R (Adaptive Control of Thought-Rational): A cognitive architecture modeling knowledge representation.

  • Declarative Knowledge: Facts (the "what").

  • Procedural Knowledge: Rules for actions (the "how").

Interaction Models: Norman’s Seven Stages of Action

• The Two Gulfs:

  • Gulf of Execution: The gap between the user's intent and the physical actions available. Bridged via signifiers, constraints, mapping, and conceptual models.

  • Gulf of Evaluation: The gap between system state and user perception/understanding of what happened. Bridged via feedback and conceptual models.

• The Seven Stages:

  1. Goal formation.

  2. Planning the action.

  3. Specifying the action sequence.

  4. Performing the action sequence.

  5. Perceiving the state of the world.

  6. Interpreting the perception.

  7. Comparing the outcome with the goal.

• Behavior Types:

  • Goal-Driven: Initiated by forming an internal goal.

  • Event-Driven (Data-Driven): Triggered by environment events (e.g., lack of light prompting reading a recipe).

  • Opportunistic: Taking advantage of circumstances rather than extensive planning.

• Root Cause Analysis: Asking "Why?" repeatedly to find the fundamental cause of an activity.

Activity Theory and Distributed Cognition

• Activity Theory: Human activity is mediated by tools (physical/digital) and social context (community, rules, division of labor).

  • Levels: Activity (motives) $\rightarrow$ Action (goals) $\rightarrow$ Operation (routine/unconscious).

• Distributed Cognition: Cognition is not just internal; it is shared across people, artifacts, and environments.

  • Artifact Examples: Calculators, car dashboards, GPS systems, or shared documents like Google Docs.

Usability Definitions (ISO 9241)

• Effectiveness: Accuracy and completeness of goal achievement.

• Efficiency: Resources expended in relation to accuracy.

• Satisfaction: Comfort and acceptability to the user.

• Usability Principles: Learnability, Flexibility (supporting multiple interaction modes), and Robustness (clear support/feedback).

Affordance Theory

• James J. Gibson (Late 1970s): Affordances are action possibilities objectively existing in the environment relative to the organism's capabilities.

• Donald Norman: Focuses on "perceived" affordances in HCI—how design suggests use.

• Types of Affordances:

  • Perceptible (Explicit): Obvious and visible (e.g., a raised button).

  • Hidden: Action is possible but not visible (e.g., keyboard shortcuts).

  • False: Suggests an action that is not possible (e.g., unclickable button that looks like a link).

  • Cognitive: Labels or instructions ("Save") that aid understanding.

  • Sensory: Sensory signals (sound/vibration) suggesting action.

Mathematical Laws of Human Motor and Decision Performance

• Fitts’ Law (1954): Predictive model for movement time to a target. Movement time ($MT$) is determined by target distance ($D$) and target width ($W$).     $MT = a + b \times \text{log}_{2}\frac{2D}{W}$

  • Implication: Larger and closer buttons are easier to hit. Screen edges are "infinitely large" targets.

• Hick’s Law (Hick–Hyman Law, 1950s): Reaction time ($RT$) increases logarithmically with the number of choices ($n$).     $RT = a + b \times \text{log}_{2}(n + 1)$

  • Implication: Limit options through categorization or progressive disclosure to reduce decision fatigue.

Social and Emotional Interaction Theories

• Social Presence Theory: The degree to which a medium conveys the sense that another person is "real" and psychologically present.

  • Factors: Immediacy (real-time feedback) and Intimacy (visual/audio richness).

• Media Richness Theory (Daft & Lengel, 1980s): Capacity of a medium to facilitate shared understanding.

  • Rich Media (Video): High feedback, multiple cues, natural language.

  • Lean Media (Email): Low cues, better for reducing uncertainty (lack of info) rather than equivocality (ambiguity).

• Affective Computing (Rosalind Picard, 1990s): Systems that recognize, interpret, and respond to human emotions via signals (facial expression, heart rate, vocal tone).

Interaction Design (IxD) Dimensions and Styles

• The 5 Dimensions of IxD:

  • 1D (Words): Textual information.

  • 2D (Visual Representations): Graphics, icons, typography.

  • 3D (Physical Objects/Space): The physical device (mouse, phone).

  • 4D (Time): Media that changes (video, sound, animation).

  • 5D (Behavior): How components react to input and provide feedback.

• Interaction Styles:

  • Instructing: Command-line, explicit commands.

  • Conversing: Natural language/dialogue (chatbots, voice assistants).

  • Manipulating: Direct interaction with on-screen objects (drag/drop).

  • Exploring/Navigating: Browsing/searching through info spaces.

Interface Design Guidelines

1. Visibility and Clarity: System status and options must be obvious.

2. Consistency: Similar actions must yield similar results.

3. Feedback: Immediate informative response for every action.

4. Minimalism: Avoid unnecessary elements to reduce cognitive overload.

5. Error Prevention/Recovery: Validate input and provide undo/redo.

6. User Control: Allow users to pause, cancel, or exit easily.

7. Affordance/Signifiers: Links and buttons must look interactive.

8. Accessibility: Inclusion of diverse abilities (contrast, screen readers).

9. Efficient Navigation: Clear menus and logical structure.

10. Learnability and Memorability: Ensure returning users can recall functions.

Life Cycle Models

• Software Engineering Models:

  • Waterfall: Linear, sequential phases.

  • V-Model: Emphasizes testing paired with each development phase.

  • Spiral: Iterative cycles focused on risk analysis.

  • Agile: Incremental work with continuous feedback.

• HCI-Specific Models:

  • User-Centered Design (UCD): Iterative process involving user research, prototyping, and testing.

  • Star Life Cycle: Evaluation is central; designers move flexibly between any stage.

  • Usability Engineering Life Cycle: Treats usability as a measurable attribute throughout development.

Programming Tools for Interactive Systems

• UI Toolkits: Pre-built components (JavaFX, Qt).

• Programming Frameworks: Structured environments (React for web, Flutter for mobile).

• Integrated Development Environments (IDEs): Code editors and debuggers (VS Code, Android Studio).

• Prototyping Tools: Mock-up and simulation (Figma, Adobe XD).

• Specialized Tools: Emerging tech environments (Unity for AR/VR, Amazon Alexa for voice).