Human Computer Interaction

Course Code: U21PE751CS

BE CSE IV YEAR
 [1] The Human : I/O channels –
Memory – Reasoning and problem
solving;

[2] The Computer: Devices – Memory –

processing and networks;

UNIT – I [3] Interaction: Models – frameworks

– Ergonomics – styles – elements –
interactivity- Paradigms. –

[4] Case Studies

[1] The Human : I/O channels –
Memory – Reasoning and problem
solving;
Introduction to Human Factors in HCI

•The role of human cognitive processes in Human-Computer

Interaction (HCI)
•Importance of understanding how humans perceive, remember,
and solve problems
•Focus areas: I/O channels, memory, reasoning, and problem-
solving
Input/Output Channels in HCI
•Definition: Pathways through which humans interact with computers
•Importance: Effective design of I/O channels is essential for intuitive user
interfaces
•Focus Areas: Visual, auditory, and haptic channels for input; motor
response and speech for output
Input Channels
• Visual Channel:
• Primary source of information intake
• Design considerations: clarity, contrast, organization
• Auditory Channel:
• Important for speech and alerting users
• Design considerations: sound clarity, appropriate volume
• Haptic Channel:
• Sense of touch and feedback through devices
• Design considerations: feedback strength, timing, and type
Output Channels: Motor Response and
Speech
•Motor Response:
•Physical actions like typing, clicking, gesturing
•Design considerations: ease of use, ergonomic design
•Speech Output:
•Communication with the system via voice
•Design considerations: speech recognition accuracy,
responsiveness
Understanding Human Memory in
HCI

• Definition: Memory processes involved in storing,

retrieving, and using information
• Types of Memory: Sensory, Short-Term (STM), and
Long-Term Memory (LTM)
• Importance: Designing interfaces that align with human
memory capabilities
Sensory Memory in HCI
•Definition: Brief storage of sensory information

•Characteristics: Lasts milliseconds to seconds

•Design Implications: Provide clear, immediate feedback to utilize

sensory memory effectively
Short-Term Memory (STM) in HCI
•Definition: Temporary storage for active information

•Capacity: 7 ± 2 items

•Duration: 15-30 seconds

•Design Considerations: Simplify tasks, minimize cognitive load, use

chunking techniques
Long-Term Memory (LTM) in HCI
•Definition: Stores information indefinitely

•Types: Declarative (facts, events) and Procedural (skills)

•Design Considerations: Consistency in design helps transfer

knowledge to LTM
Reasoning and Problem Solving in
HCI
•Definition: Cognitive processes involved in drawing conclusions and
solving problems
•Importance: Designing interfaces that support users’ reasoning and
problem-solving capabilities
Types of Reasoning in HCI
• Deductive Reasoning:
• Drawing specific conclusions from general principles
• Design implications: logical consistency in interfaces
• Inductive Reasoning:
• Generalizing from specific observations
• Design implications: use patterns to improve interface design
• Abductive Reasoning:
• Inferring the best explanation based on evidence
• Design implications: consider multiple explanations for user
behavior
•Problem Solving Stages in HCI
•Stages:
1.Problem Identification: Recognizing issues in the interface
2.Problem Definition: Understanding the nature of the problem
3.Generating Solutions: Exploring ways to solve the problem
4.Evaluating Solutions: Choosing the best solution
5.Implementing Solutions: Executing the chosen solution
•Design Implications: Provide clear guidance and support at each stage
Common Problem-Solving
Strategies in HCI
• Trial and Error:
• Users experiment with different options
• Design implications: forgiving interfaces with undo options
• Heuristics:
• Mental shortcuts or rules of thumb
• Design implications: familiar patterns for intuitive use
• Algorithmic Problem Solving:
• Step-by-step procedures
• Design implications: clear, structured guidance in tasks
Implications for HCI Design

• Usability: Design interfaces that are intuitive and easy

to use
• Learnability: Consistent design aids in learning and
memory retention
• Accessibility: Consider cognitive and physical abilities
to ensure inclusivity
•Introduction to Computer Components in HCI

Overview of critical computer components: devices,

memory, processing, and networks

Importance of understanding these components in

designing effective user interfaces
Input and Output Devices in HCI
•Definition: Hardware components that enable user interaction with
the computer
•Categories: Input devices (e.g., keyboard, mouse) and output
devices (e.g., monitors, printers)
Common Input Devices
•Keyboards:
•Used for text input and command execution
•Design considerations: layout, tactile feedback, and shortcut availability
•Pointing Devices (Mice, Trackpads):
•Enables navigation and interaction within a graphical interface
•Design considerations: responsiveness, accuracy, and ergonomics
•Touchscreens:
•Direct interaction through touch gestures
•Design considerations: sensitivity, gesture recognition, and screen clarity
•Voice Input Devices:
•Allows users to give commands through speech
•Design considerations: speech recognition accuracy and noise filtering
Common Output Devices
•Monitors and Displays:
•Present visual information like text, images, and video
•Design considerations: screen resolution, color accuracy, and refresh rate
•Printers:
•Converts digital documents into physical form
•Design considerations: print quality, speed, and ease of use
•Speakers:
•Provide audio feedback, including sounds, music, and voice
•Design considerations: sound clarity, volume control, and stereo
capabilities
•Haptic Devices:
•Provide tactile feedback through vibrations or pressure
•Design considerations: feedback strength, timing, and type
•Understanding Computer Memory in HCI

• Definition: The storage components of a computer,

crucial for holding data and instructions
• Types: Primary memory (RAM) and secondary memory
(storage)
[2] The Computer: Devices – Memory –
processing and networks;
Primary Memory (RAM)
•Definition: Temporary storage for data and instructions in active use

•Role: Facilitates quick access to data for smooth multitasking

•Design Considerations:

•Capacity: Larger RAM allows more applications to run

simultaneously
•Speed: Faster RAM improves overall system performance
•Secondary Memory: Storage
•Definition: Long-term storage for data, applications, and the operating system

•Types:
•Hard Disk Drives (HDD): Traditional magnetic storage, large capacity but slower
•Solid-State Drives (SSD): Faster, more reliable flash storage with no moving parts
•Cloud Storage: Remote storage accessed via the internet, flexible and scalable

•Design Considerations:
•Capacity: Sufficient storage for files, applications, and data
•Speed: Affects how quickly data is read/written, impacting user experience
The Role of Processing in HCI
•Definition: The computer's ability to execute instructions and perform
calculations
•Key Components: Central Processing Unit (CPU) and Graphics
Processing Unit (GPU)
Central Processing Unit (CPU)
• Definition: The brain of the computer, executing instructions and
managing tasks
• Design Considerations:
• Clock Speed: Higher speeds lead to faster processing times
• Cores: Multiple cores enhance multitasking and parallel
processing
• Power Efficiency: Important for battery life and energy
consumption
Graphics Processing Unit (GPU)
•Definition: Specialized processor for rendering images, videos, and
animations
•Design Considerations:
•Processing Power: Higher power GPUs enable smoother graphics and
faster rendering
•Memory: Dedicated VRAM helps handle high-resolution textures and
visual effects
•Compatibility: Ensure GPU works well with CPU and other
components for optimal performance
Importance of Networks in HCI
•Definition: Systems that connect computers and devices, enabling
communication and data sharing
•Key Types: Local Area Networks (LAN), Wide Area Networks (WAN), and
the Internet
Local Area Network (LAN)
•Definition: A network connecting computers within a limited area, such as
a building or campus
•Design Considerations:

•Speed: Faster LANs improve data transfer rates and reduce latency

•Security: Encryption and access control are necessary to protect data

Wide Area Network (WAN) and
Internet
•Wide Area Network (WAN):
•Definition: A network covering a broad geographical area, connecting multiple
LANs
•Design Considerations: Bandwidth and latency impact the responsiveness of
applications
•Internet:
•Definition: A global network that connects millions of private, public,
academic, and government networks
•Design Considerations: Connection stability and security protocols (e.g.,
HTTPS) are critical for data protection
Wireless Networks in HCI

• Definition: Networks using radio waves to connect devices

without physical cables (e.g., Wi-Fi, Bluetooth)
• Design Considerations:
• Signal Strength: Stronger signals lead to faster, more
reliable connections
• Interference: Minimizing interference from other devices
and networks is crucial
[2] The Computer: Devices – Memory –
processing and networks;
Implications for HCI Design
• Performance: Efficiency of devices, memory, processing,
and networks directly impacts interface usability
• Compatibility: Design interfaces to work seamlessly across
different devices and network environments
• Security: Integrate security considerations into design to
protect user data and privacy
•Introduction to Interaction in HCI

• Overview of interaction concepts in Human-Computer Interaction

• Focus areas: Models, Frameworks, Ergonomics, Styles, Elements,
Interactivity, and Paradigms
• Importance of these concepts in designing intuitive and user-
friendly interfaces
 [3] Interaction: Models – frameworks
– Ergonomics – styles – elements –
UNIT – I interactivity- Paradigms. –
Interaction Models in HCI
•Definition: Models that describe the flow of information and control between the
user and the system
•Importance: Helps understand user behavior and guide design processes

•Key Models: Norman’s Seven Stages of Action, GOMS Model

Norman’s Seven Stages of Action
• Stages:
• Forming the goal
• Forming the intention
• Specifying the action sequence
• Executing the action
• Perceiving the system state
• Interpreting the system state
• Evaluating the outcome
• Design Implications: Ensure interfaces provide clear feedback at
each stage of the user's action sequence
GOMS Model (Goals, Operators,
Methods, Selection Rules)
•Definition: A model for breaking down tasks into goals, operators, methods, and
selection rules
•Application: Predicts user performance and identifies inefficiencies in task
completion
•Design Implications: Optimize task processes by minimizing unnecessary steps
 [3] Interaction: Models – frameworks
– Ergonomics – styles – elements –
UNIT – I interactivity- Paradigms. –
Frameworks in HCI
•Definition: Structured approaches for designing and evaluating user
interfaces
•Importance: Provides guidelines for creating intuitive(in-built) and efficient
interfaces
•Key Frameworks: User-Centered Design (UCD), Cognitive Dimensions
Framework
User-Centered Design (UCD)
•Definition: An iterative design process focused on user needs
•Stages:
1.Understanding the user
2.Designing solutions
3.Prototyping and testing
4.Iteration based on feedback
•Design Implications: Involve users at every stage to create more effective
interfaces
Cognitive Dimensions Framework

• Definition: A framework for evaluating the cognitive

impact of interactive systems

• Dimensions: Consistency, visibility, error-proneness,

cognitive load

• Design Implications: Design to reduce cognitive strain

and maximize usability
 [3] Interaction: Models – frameworks
– Ergonomics – styles – elements –
UNIT – I interactivity- Paradigms. –
Ergonomics (Functional design)in HCI

• Definition: The study of designing tools and interfaces

to fit human capabilities

• Types: Physical and Cognitive Ergonomics

• Importance: Ensures comfort, efficiency, and safety in

user interaction
Physical Ergonomics in HCI
Focus: Physical interaction with devices, such as posture, movement,
and reach

Design Considerations:
• Posture support to reduce strain
• Ease of reach for controls and inputs
• Comfort for prolonged use (e.g., ergonomic keyboards)
Cognitive Ergonomics in HCI

Focus: Mental processes like memory, perception, and

decision-making

Design Considerations:
• Minimize cognitive load
• Align interfaces with users' mental models
• Design to prevent errors with clear instructions and
feedback
 [3] Interaction: Models – frameworks
– Ergonomics – styles – elements –
UNIT – I interactivity- Paradigms. –
Interaction Styles in HCI
Definition: Different ways users can interact with a system

Importance: Choosing the right interaction style impacts usability and

user satisfaction

Key Styles: Command Line Interface (CLI), Graphical User Interface

(GUI), Natural User Interface (NUI)
Command Line Interface (CLI)
Definition: Text-based interface where users type commands

Advantages: Efficient for expert users, allows for powerful commands

Challenges: Steep learning curve for novices (New initially difficult

and requires a lot of time and effort

•Design Implications: Best for tasks requiring precision and

efficiency, but requires proper help documentation for new users
Graphical User Interface (GUI)
Definition: Interface where users interact through visual elements like
windows, icons, and menus

Advantages: Intuitive and accessible to most users

Challenges: Less efficient for complex tasks compared to CLI

Design Implications: Ensure visual consistency and intuitive layouts

with recognizable icons
 Natural User Interface (NUI)
Definition: Interaction through natural gestures, touch, and voice

Advantages: Intuitive and accessible, low learning curve

Challenges: Can be less precise, require more processing power

Design Implications: Focus on responsive and forgiving interfaces wi

 [3] Interaction: Models – frameworks
– Ergonomics – styles – elements –
UNIT – I interactivity- Paradigms. –
Interaction Elements
Content:Widgets: Buttons, sliders, text fields, etc., enabling interaction

Menus: Options or commands organized for easy access

Icons: Visual symbols representing actions, functions, or objects

Dialogs: Pop-ups for input or information

Toolbars: Quick access to commonly used functions

Design Implications: Ensure consistency, visibility, and clear feedback for all
interaction elements
 [3] Interaction: Models – frameworks
– Ergonomics – styles – elements –
UNIT – I interactivity- Paradigms. –
Levels of Interactivity
Definition: The degree to which users can interact and manipulate the system in
real-time

Low Interactivity: Simple, linear interactions (e.g., basic form submission)

High Interactivity: Dynamic, real-time manipulation (e.g., video games,

simulations)

Design Implications: Provide immediate feedback, ensure control, and maintain

responsiveness for high interactivity levels
•Interaction Paradigms in HCI
•WIMP (Windows, Icons, Menus, Pointer): Traditional desktop metaphor for interaction

•Post-WIMP: Interaction beyond traditional elements, including touch, gestures, and

voice (e.g., mobile apps, VR)

•Ubiquitous Computing: Integration of computing into everyday objects (e.g., smart

homes, wearables)

•Augmented Reality (AR) and Virtual Reality (VR): Immersive interfaces blending or
fully creating digital environments

•Design Implications: Design for the context, ensuring that interaction is seamless and
intuitive for each paradigm
Implications for HCI Design
• Performance: Efficiency in device and interface interactions
• Compatibility: Interfaces should work across different devices and
paradigms
• Usability: Design for learnability, efficiency, and user satisfaction
4] Case Studies in Human-Computer Interaction
Structure of a Case Study
 Background:
o Context: Overview of the project, including the problem being
addressed, the target user group, and the goals of the design.
o Stakeholders: Identification of all parties involved, including
designers, users, clients, and other relevant stakeholders.
 Design Process:
o Methodologies Used: Description of the design process, including
models, frameworks, and tools applied during the project.
o User Research: How user needs were identified and incorporated
into the design, including techniques like interviews, surveys,
usability testing, and ethnographic studies.
Structure of a Case
Study……………
 Implementation:
o Prototype Development: Details on how prototypes were
created, iterated, and refined based on user feedback.
o Final Design: Presentation of the final product, with emphasis on
how it meets user needs and adheres to HCI principles.
 Evaluation:
o Testing: Discussion of how the product was tested, including the
metrics used to measure success (e.g., usability, accessibility,
efficiency).
o Outcomes: Analysis of the results, including user feedback,
performance improvements, and any challenges encountered.
Case Study 1: Redesign of a
Banking App Interface
o Background: A major bank wanted to redesign its mobile banking
app to improve user satisfaction and reduce the number of errors in
transaction processes.
o Design Process:
 User Research: Conducted user interviews and surveys to
understand pain points, such as difficulty navigating between
different sections of the app and confusion over transaction
statuses.
 Model Applied: Norman’s Seven Stages of Action Model was
used to ensure that each step of the user’s interaction with the
app was clear and provided immediate feedback.
Case Study 1: Redesign of a Banking
App Interface………………………….
o Implementation:
 Prototype: Developed several low-fidelity wireframes, which were
iterated based on user feedback during usability testing.
 Final Design: A streamlined interface with a clear, hierarchical
navigation structure and improved visibility of transaction statuses.
o Evaluation:
 Testing: Conducted A/B testing with the new and old versions of the
app, focusing on error rates and task completion times.
 Outcomes: The new design led to a 30% reduction in user errors and a
25% increase in user satisfaction ratings.
 Lessons Learned: The importance of aligning the interface’s feedback
mechanisms with user expectations to prevent errors and enhance
satisfaction.
Case Study 2: Usability Testing of a
Voice-Activated Smart Home System
o Background: A tech company developed a new voice-activated
smart home system and needed to ensure it was intuitive for users
of all ages and technical abilities.
o Design Process:
 User Research: Focus groups and usability studies were
conducted to gather insights on how users interact with voice-
activated systems.
 Framework Applied: User-Centered Design (UCD) was
employed to iteratively refine the system based on real user
feedback, ensuring that the interface was accessible and easy to
use.
Case Study 2: Usability Testing of a Voice-
Activated Smart Home System…………..
o Implementation:
 Prototype: A functional prototype of the smart home system was
developed and tested in a variety of real-world environments.
 Final Design: The system featured simple voice commands, with clear,
audible feedback and customizable user settings to accommodate different
needs.
o Evaluation:
 Testing: Extensive usability testing was conducted with users from
different demographics, focusing on ease of use and system
responsiveness.
 Outcomes: The system was well-received, with high ratings for ease of use
and functionality across a diverse user base.
 Lessons Learned: Highlighted the importance of clear feedback in voice-
activated systems and the need for customizable options to cater to
different user preferences.
Benefits of Using Case Studies in
HCI:
 Real-World Application: Demonstrates how HCI principles are
applied in practical scenarios, offering tangible examples of both
success and failure.
 Problem-Solving: Provides insights into how specific problems were
identified and addressed, offering lessons for similar challenges in
future projects.
 User-Centered Focus: Emphasizes the importaAllows designers to
learn from the challenges and mistakes of others, improving nce of
user feedback and iterative design in creating effective and satisfying
interfaces.
 Learning from Mistakes: their own practice by avoiding similar
pitfalls.