HCI and Computer Graphics Notes

Topic 1: Fundamentals of HCI

Sub-Topic 1: Riddles for the Information Age

 The Information Age gives humans unlimited data, fast machines, and powerful
software yet people still make mistakes, feel confused, misuse systems and struggle
with simple interfaces.
 These contradictions are called riddles.
Sub-Topic 2: Definition and Goals of HCI

 Human–Computer Interaction (HCI) is the discipline concerned with the design,

evaluation, and implementation of interactive computing systems for human use.
1. Design → How it looks and behaves
2. Evaluation → Testing with real users
3. Implementation → Building usable systems
4. Human use → Human limitations come first, not machine power
 HCI studies how humans interact with computers and how to design systems that
humans can actually use.
 Practical roles:
1. Reduce user errors
2. Improve efficiency, learnability and safety
3. Reduce mental load
 Without HCI:
1. Users blame themselves
2. Systems fail silently and Productivity drops
3. Training costs increase

Sub-Topic 3: Limitations / Problems of HCI

1. Humans are inconsistent

2. Designers are not users

3. Cultural differences

Sub-Topic 4: Human vs Computer

Human characteristics:

 Slow but flexible

 Learns from experience

 Makes judgment calls

 Emotion-driven
  Limited memory

Computer characteristics:

 Extremely fast

 Accurate

 No emotions

 No understanding

 Follows instructions blindly

Overall Humans are good at meaning; computers are good at execution.

HCI exists to bridge this mismatch.

Sub-Topic 5: Computer + Information

 A computer without information is useless. Information without structure is harmful.

 Problems:
1. Poor data visualization
2. Complex menus
3. Bad feedback
4. No error recovery
 HCI ensures
1. Information is presented, not dumped
2. Users can understand, not memorize
3. Systems guide users instead of punishing them

Sub-Topic 6: Goals of HCI

 Primary goals:
1. Effectiveness – users can complete tasks
2. Efficiency – tasks completed quickly
3. Safety – minimize serious errors
4. Utility – system does what users need
5. Learnability – easy for new users
6. Memorability – easy to remember after time
 Secondary goals:
1. User satisfaction
2. Reduced frustration
3. Trust in systems

Sub-Topic 7: Evolution of HCI

Phase 1: Batch Processing (1950s–60s)

 No interaction and uses Punch cards

 Users adapt to machines

Phase 2: Command Line Interfaces (1970s)

 Text commands

 High learning curve

 Expert-only systems

Phase 3: Graphical User Interfaces (1980s)

 Mouse, icons, windows

 Xerox PARC, Apple, Microsoft

 User-cantered shift

Phase 4: Web & Multimedia (1990s–2000s)

 Browsers and Hyperlinks

 Visual information

Phase 5: Mobile & Touch Interfaces (2010s)

 Smartphones

 Gestures

 Context-aware systems

Phase 6: Intelligent & Adaptive Interfaces (Now)

 AI

 Voice assistants

 Predictive systems

Topic 2: Human Cognition and Design Foundations in HCI

Sub-Topic 1: Quality in HCI

 Quality in HCI refers to how well an interactive system meets user needs and
expectations. A high-quality system is not only functional but also easy, efficient, and
pleasant to use.

 Key Quality Attributes in HCI:

1. Usability: The system should be easy to learn and use.
 2. Efficiency: Users be able to complete tasks quickly with minimal effort.
3. Effectiveness: The system should allow users to achieve their goals accurately.
4. Learnability: New users should be able to understand the system easily.
5. Memorability: Users should remember how to use the system after a break.
6. Error tolerance: System should prevent errors and help users recover from
them.
7. User satisfaction: The interaction should be comfortable and enjoyable.

Sub-Topic 2: Interdisciplinary Nature of HCI

 HCI is an interdisciplinary field, meaning it draws knowledge from multiple

disciplines to understand human behaviour and design better systems.
 Major Disciplines Involved:
1. Computer Science: Software design, algorithms, UI development.
2. Psychology: Human cognition, perception, memory, learning.
3. Cognitive Science: Mental processes involved in interaction.
4. Sociology: Social interaction and collaborative systems.
5. Design (Graphic & Interaction Design): Visual layout and user experience.
6. Ergonomics (Human Factors): Physical interaction and comfort.
7. Anthropology: Cultural aspects of technology use.

Sub-Topic 3: Modes of Cognition

 Modes of cognition describe different ways humans process information during

interaction with systems.
 Major Modes:
1. Automatic (System 1) Cognition: Fast, unconscious, and intuitive which are
used in routine tasks
2. Controlled (System 2) Cognition: Slow, conscious, and analytical which used
in problem-solving and decision-making tasks
 In HCI design, interfaces should support both modes, minimizing cognitive effort for
routine tasks while providing clarity for complex operations.

Sub-Topic 4: Human Processor Model (HPM)

 The Human Processor Model is a theoretical model that describes how humans
process information similarly to a computer system.
 Three Main Components:
1. Perceptual Processor
 Receives information through senses (vision, hearing)
 Processes stimuli such as icons, text, and sounds
2. Cognitive Processor
 Interprets information
 Performs thinking, reasoning, and decision-making
3. Motor Processor
 Executes physical actions (mouse movement, typing, tapping)
  The model also includes memory systems:
1. Sensory memory
2. Short-term (working) memory
3. Long-term memory

HPM helps designers predict user response time, error rates, and interaction efficiency.
Sub-Topic 5: GOMS Model

 GOMS stands for Goals, Operators, Methods, and Selection rules. It is a task analysis
model used to describe how users perform tasks in an interface.
 Components:
1. Goals: What the user wants to achieve
2. Operators: Basic actions (click, type, move mouse)
3. Methods: Sequences of operators to achieve goals
4. Selection Rules: Decide which method to use in a situation
 Example:
1. Goal: Save a document
 Method 1: Click “File → Save”
 Method 2: Press Ctrl + S
2. GOMS helps in:

 Predicting task execution time

 Comparing interface designs

 Improving efficiency

Sub-Topic 6: Recent Developments in Cognitive Psychology

 Recent research in cognitive psychology has significantly influenced HCI design.

 Key Developments:
1. Cognitive Load Theory: Limiting mental overload improves performance.

2. Attention Management: Designing interfaces that reduce distraction.

3. Embodied Cognition: Cognition is influenced by physical interaction.

4. Emotion and Affect: Emotional responses affect usability and engagement.

5. Neuroscience Integration: Brain studies help understand user behavior.

 Modern interfaces are now designed to be user-centric, emotion-aware, and context-

sensitive.

Sub-Topic 7: External Cognition

  External cognition refers to using the environment or external artifacts to reduce
cognitive load.
 Examples:
1. Notes and reminders
2. Icons and visual cues

3. Checklists

4. Diagrams and flowcharts

 By offloading memory and processing to the environment, systems become easier to

use and less mentally demanding. Good HCI design encourages thinking with tools,
not just in the head.

Sub-Topic 8: Distributed Cognition

 Distributed cognition extends the idea of cognition beyond the individual to include:
1. People

2. Artifacts

3. Environment

4. Time

 Example:
1. In an air-traffic control system:

2. Controllers

3. Screens

4. Procedures

5. Communication systems

 All work together as one cognitive system.

 In HCI, distributed cognition helps design collaborative systems, shared workspaces,
and team-based interfaces.

Topic 3: Human Input–Output Channels and Cognitive Processes in HCI

Sub-Topic 1: Input–Output Channels

 Input–output channels describe how humans receive information from a computer

(input to human) and how humans respond back to the computer (output from
human).

1. Input channels (to human): Vision, hearing, touch

2. Output channels (from human): Movement, speech, gestures
  HCI design must match these channels to human capabilities and limitations to ensure
effective interaction.

Sub-Topic 2: Vision

 Vision is the primary input channel in human–computer interaction. Most interfaces

rely heavily on visual elements such as text, icons, images, colors, and layouts.
 The human visual system processes:
o Shape

o Size
o Colour

o Motion

o Spatial relationships

 Good interface design uses vision efficiently by maintaining clarity, contrast, and
simplicity.

Sub-Topic 3: Visual Perception & Color Theory

 Visual perception refers to how the brain interprets visual stimuli, not just what the
eyes see.
 Color Theory in HCI:
o Hue: Type of color (red, blue)

o Saturation: Color intensity

o Brightness: Lightness or darkness

 Design Principles:
o Use color to group related items

o Avoid using color alone to convey information

o Maintain sufficient contrast for readability

o Consider color blindness

 Proper use of color enhances usability, attention, and aesthetics.

Sub-Topic 4: Stereopsis

 Stereopsis is the perception of depth created by the brain combining images from both
eyes.

 Importance in HCI:
 1. Used in 3D interfaces, VR, and AR systems

2. Helps users understand spatial relationships

3. Enhances realism and immersion

 Poor stereoscopic design can cause eye strain and discomfort, so it must be used
carefully.

Sub-Topic 5: Reading

 Reading is a complex visual and cognitive activity that involves pattern recognition
and language processing.
 HCI Design Considerations:
1. Use readable fonts

2. Maintain proper line length and spacing

3. Avoid long blocks of text

4. Use headings and bullet points

 Interfaces should support scanning, not just deep reading, since users often skim
content.

6. Hearing

 Hearing is an auditory input channel used for alerts, notifications, and feedback.
 Examples:
1. Error sounds

2. Confirmation beeps

3. Voice assistants

 Auditory feedback is especially useful when:

1. Visual attention is occupied

2. Immediate response is required

3. Sounds should be informative, not annoying, and should complement visual

cues.

Sub-Topic 7: Touch

 Touch provides tactile input and is crucial in modern devices like smartphones and
tablets.

 Types of Touch Interaction:

 1. Tapping

2. Swiping

3. Pinching

4. Haptic feedback (vibration)

 Touch-based interfaces must consider:

1. Finger size

2. Screen sensitivity

3. Physical comfort

Sub-Topic 8: Movement

 Movement is the primary output channel through which humans interact with
computers.
 Examples:
1. Mouse movement
2. Typing

3. Touch gestures

4. Body movement (VR)

 HCI design aims to:

1. Minimize unnecessary movement

2. Reduce fatigue

3. Increase efficiency

 Models like Fitts’ Law are used to optimize movement efficiency.

Sub-Topic 9: Attention

 Attention refers to the limited ability of humans to focus on specific information.

 Types:
1. Selective attention

2. Divided attention

3. Sustained attention

 HCI systems should:

1. Avoid clutter
2. Highlight important information
 3. Reduce distractions

 Good design respects the limits of human attention.

Sub-Topic 10: Memory

 Memory allows users to store and retrieve information during interaction.

 Types:
1. Sensory memory

2. Short-term (working) memory

3. Long-term memory

 Interfaces should:
1. Reduce memory load

2. Favor recognition over recall

3. Provide cues and reminders

11. Revised Memory Model

 The revised memory model expands the traditional view by emphasizing working
memory and its limitations.
 Key Points:
1. Working memory capacity is limited

2. Information decays quickly without rehearsal

3. Cognitive load affects performance

 This model influences HCI design by promoting:

1. Simplicity
2. Chunking of information

3. Step-by-step interactions

Topic 4: Interaction Design Principles and I/O Technologies in HCI

Sub-Topic 1: Design Principles

 Design principles are fundamental guidelines that help designers create usable,
efficient, and user-centered interfaces.
 Core Design Principles in HCI:
1. Visibility: Important functions should be clearly visible.

2. Feedback: The system must respond to user actions.

 3. Consistency: Similar actions should have similar results.

4. Affordance: The design should suggest how it is used.

5. Constraints: Prevent users from making errors.

6. Mapping: Controls should correspond logically to their effects.

7. Simplicity: Avoid unnecessary complexity.

 Good design principles reduce learning time, errors, and user frustration.
Sub-Topic 2: Devices

Input Devices

 Input devices allow users to enter data and commands into a computer system.
 Common Input Devices include Keyboard, Mouse, Touchscreen, Stylus, Camera etc.
 Selection of input devices depends on Task type, User ability and Context of use
Text Entry Devices

 Text entry devices are specialized input devices used for entering textual information.
 Types include Physical keyboards, On-screen virtual keyboards, Numeric keypads
and Voice-based text input
 Design Considerations:

1. Speed

2. Accuracy
3. Ergonomics

4. Error correction support

 Efficient text entry improves productivity and usability.

Positioning, Pointing, and Drawing Devices

 These devices allow users to select, manipulate, or draw objects on a screen.

 Examples: Mouse, Trackpad, Joystick, Stylus, Graphics tablet and Touch input

 Used in design software, gaming, and creative tools

 Governed by Fitts’ Law for efficiency

 They enhance precision and control in interaction.

Display Devices

 Display devices provide visual output to the user.

 Types include Monitors (LCD, LED), Mobile screens, Projectors and VR/AR headsets
 Key Factors include Resolution, Refresh rate, Screen size, Brightness and contrast
  High-quality displays improve readability and visual comfort.
Sub-Topic 3: Touch, Feel, and Smell (Non-Visual Interaction)

 These channels support multisensory interaction, beyond vision and hearing.

 Touch (Haptics):
1. Vibration feedback

2. Force feedback

 Feel:
1. Texture simulation

2. Pressure sensing

 Smell (Olfactory Interfaces):

1. Rare, experimental

2. Used in VR and therapeutic systems

 These interactions enhance immersion and realism

Sub-Topic 4: Physical Controls

 Physical controls are tangible interface elements that users manipulate directly.
 Examples include Buttons, Knobs, Switches, Sliders and Dials
 Advantages:
o Tactile feedback

o High accuracy

o Useful in safety-critical systems

 Physical controls support muscle memory and reduce errors.

Sub-Topic 5: Environment and Bio-Sensing

 These systems use environmental and biological data to adapt interaction.

 Environmental Sensors are Light, Temperature, Motion and Noise
 Bio-Sensors are Heart rate, Eye tracking, Brain signals (EEG) and Skin conductance
 Applications:
1. Adaptive interfaces and Smart environments

2. Health monitoring

3. Emotion-aware systems

 They enable context-aware and intelligent interaction.

Topic 5: HCI Process and Design Models
Sub-Topic 1: HCI Process and Models

 The HCI process refers to the systematic approach used to design, evaluate, and refine
interactive systems with a strong focus on users and their needs. HCI models provide
structured frameworks that guide designers through different stages of interaction
design.
 The HCI process emphasizes:
o User involvement
o Iterative design
o Usability evaluation
o Continuous improvement
 HCI models help ensure that systems are usable, efficient, and user-centered rather
than technology-driven.

Sub-Topic 2: Lifecycle Models

 A lifecycle model describes the stages a system passes through from conception to
deployment and maintenance.
 General Phases:
1. Requirements analysis
2. Design
3. Implementation
4. Evaluation and testing
5. Deployment
6. Maintenance
 Lifecycle models help manage complexity and ensure structured development.
Sub-Topic 3: Lifecycle Models in HCI

 Lifecycle models in HCI are different from traditional software models because they
emphasize usability and user feedback.
 Key Characteristics:
1. Early and continuous user involvement
2. Iterative cycles
3. Frequent evaluation
4. Refinement based on feedback
 Common HCI Lifecycle Models:
1. Star Lifecycle Model
2. Usability Engineering Lifecycle
3. User-Centered Design (UCD) Model
4. Agile UX Model
 These models ensure that usability goals are met throughout development.
Sub-Topic 4: Goal-Directed Design Model

 The Goal-Directed Design Model, proposed by Alan Cooper, focuses on users’ goals
rather than system features.
 Main Phases:
1. Research (user interviews, observation)
2. Modeling (personas, scenarios)
3. Requirements definition
4. Framework definition
5. Refinement
6. Support and evaluation
 This model ensures that the system aligns with what users want to achieve, not just
what the system can do.

Sub-Topic 5: A Process Overview (HCI Design Process)

 The HCI design process can be summarized as an iterative cycle:

1. Understand users and context
2. Specify user requirements
3. Create design solutions (prototypes)
4. Evaluate designs against usability goals
5. Refine and repeat
 This overview highlights the continuous nature of HCI design, where improvement is
ongoing.

Sub-Topic 6: Types of Users

 Understanding different types of users is essential for effective HCI design.

 Common User Categories:
1. Novice users: Little or no experience
2. Intermediate users: Some experience
3. Expert users: Highly skilled and efficient
4. Primary users: Regular users of the system
5. Secondary users: Occasional users
6. Tertiary users: Affected indirectly (e.g., managers)
 Designers must consider all user types to ensure inclusivity and usability.

Topic 6: Foundations of Interaction Design

Sub-Topic 1: Interaction Design Principles

 Interaction design principles are general rules and guidelines that help designers
create usable, efficient, and meaningful interactions between users and systems.
 Core Interaction Design Principles:
1. Visibility – Users should easily see available actions.

2. Feedback – The system should respond to every user action.

 3. Consistency – Similar actions should behave similarly.

4. Affordance – The design should indicate how it can be used.

5. Constraints – Limit user actions to prevent errors.

6. Mapping – Controls should match their effects logically.

7. Simplicity – Avoid unnecessary complexity.

8. Error prevention and recovery – Reduce mistakes and support correction.

 These principles help reduce cognitive load and improve user satisfaction.
Sub-Topic 2: Interaction Design Patterns

 Interaction design patterns are reusable solutions to common interaction problems in

user interface design.
 They are not strict rules, but proven design solutions that can be adapted to different
contexts.
 Examples of Interaction Design Patterns:
1. Navigation menus

2. Search with autocomplete

3. Wizard-based forms

4. Undo/Redo

5. Infinite scrolling

6. Confirmation dialogs

 Benefits of Design Patterns:

1. Save design time

2. Promote consistency

3. Improve usability

4. Use familiar interaction styles

 Patterns allow designers to apply best practices without reinventing solutions.

Sub-Topic 3: Interaction Design Imperatives

 Interaction design imperatives are essential design requirements that must be followed
to ensure effective and ethical interaction.
 They represent non-negotiable priorities in interaction design.
 Key Interaction Design Imperatives:
o User-centered design – Always design around user needs.
 o Usability first – The system must be easy to use.

o Accessibility – Design for users with diverse abilities.

o Safety – Prevent harmful errors.

o Transparency – The system’s behavior should be understandable.

o Responsiveness – The system should react promptly.

o Ethical responsibility – Respect user privacy and trust.

 Imperatives ensure that interaction design is responsible, inclusive, and reliable.

Topic 7: Raster Image

Sub-Topic 1: Raster Image

 A raster image is a digital image composed of a grid of tiny square elements called
pixels (picture elements).
Each pixel contains information about color and intensity, and together these pixels
form the complete image.
 Raster images are resolution-dependent, meaning their quality decreases when
scaled up, causing pixelation.
 Key Characteristics:

1. Made up of pixels

2. Resolution dependent
3. Best suited for complex images like photographs

4. Commonly used in digital displays

 Examples:
1. Photographs

2. Scanned images

3. Digital camera images

Sub-Topic 2: Types of Raster Images

Raster images can be classified based on color representation and bit depth.

1. Binary Images
 Each pixel is either black or white

 Uses 1 bit per pixel

 Common in scanned text and simple graphics

2. Grayscale Images
  Pixels represent shades of gray

 Typically use 8 bits per pixel

 Used in medical imaging and photography

3. Color Images

 Pixels contain color information

 Common color models: RGB, CMYK

 Used in digital photography, web images, and design

4. Indexed Color Images

 Use a color lookup table (palette)

 Limited number of colors

 Used in GIF images

Sub-Topic 3: Sources of Raster Images

Raster images are created or captured from various digital and physical sources.

Common Sources:

 Digital cameras (mobile and DSLR)

 Scanners

 Screenshots

 Image editing software (Photoshop, GIMP)

 Video frames
 Medical imaging devices (X-ray, MRI)

These sources capture real-world visuals and convert them into pixel-based digital form.