Module - 2
By
[Link]
Module: 2 Human Factors as HCI Theory
Human Information Processing – Task Modeling and Human Problem
Solving model - Human Reaction and Prediction of Cognitive
Performance - Sensation and Perception of Information - Human Body
Ergonomics.
Cognitive Science (How we think)
This is about how our brain understands, remembers, and solves problems.
•In design: Help users think less by making things clear and easy.
Simple example:
In a shopping app, show the total price clearly before checkout.
➤ This helps users make decisions faster without confusion.
Ergonomics (How our body reacts)
This is about how our senses (eyes, ears, hands, etc.) and body interact
with things.
•In design: Make things comfortable and easy to touch, see, or hear.
•Simple example:
In an ATM machine, use big buttons and loud beeps to guide users.
➤ This makes it easy for all users, including elderly or visually impaired
people.
Designing a Mobile Banking App
• Using Cognitive Science (How we think and understand)
Make the app easy to understand and use, without confusing the user.
• Using Ergonomics (How we touch, see, and move)
• Make the app physically easy and comfortable to use.
• Task Modeling and Human Problem Solving model
How Human-Factors Knowledge Helps in HCI Design
i. Task / Interaction Modelling
This means:
Understanding how people complete a task step by step.
Designing the interface to match those steps.
Simple Example:
If a user wants to transfer money in a banking app:
• Open the app
• Go to "Transfer"
• Select person
• Enter amount
• Confirm
Designers use this model to make sure each step is clear and easy.
Task Modeling and Human Problem-Solving model
• (a) Human Problem-Solving Model (Mind Process)
• This flow shows how our brain handles information
before taking action:
• Information → Something we see, hear, or sense
• Sensation → Our body receives it (like eyes see or
hands touch)
• Perception → Brain understands it
• Short-term memory → We hold it temporarily
• Long-term memory → If we’ve seen it before, we
recall it
• Decision → Brain decides what to do
• Action → We do it (like click a button)
• Simple Example:
• If you see “Send ₹1000 to Ravi,”
→ your eyes sense it → brain understands
→ memory recalls how to send → you decide → tap
'Send'.
Flow of Human Information Processing:
Information
Raw data received from the environment (e.g., sound, visuals, touch).
Sensation
Sensed by the five sensory organs (eye, ear, skin, etc.).
Perception
Brain interprets the raw input to give it meaning (e.g., seeing red
as a warning).
Short-Term (Working) Memory
• Temporarily holds current task information.
• Very limited capacity.
• Influences decision-making quickly.
Long-Term Memory
• Stores previous experiences and knowledge.
• Helps with understanding, learning, and comparison.
• Communicates with short-term memory during thinking.
Decision Brain decides what to do based on processed input and memory.
Action A physical or verbal response (e.g., clicking a button or saying
"OK").
Human Information-Processing Components
a) Sensation & Perception:
Sensation: Collects input from the external world (e.g., sight, sound, touch).
Perception: Interprets the input and gives it meaning.
b) Memory:
Stores short-term and long-term knowledge.
Includes rules, actions, procedures, schemas, goals, and action plans.
c) Decision Maker/Executor:
Creates and updates a plan.
Uses memory to choose the right action.
Sends commands to the motor system (e.g., clicking a mouse).
(b) Task-Based Problem-Solving (Action Plan)
This flow shows how we solve a problem step by step:
Define the problem → What’s wrong? (e.g., “I can’t transfer
money”)
Gather knowledge → What do I know? (e.g., “I need to check my
balance”)
Consider actions → What can I do? (e.g., “Use UPI or card?”)
Create plan → Choose the best way (e.g., “Use UPI”)
Execute plan → Do it (e.g., “Enter UPI PIN”)
Observe results → Did it work?
If not → Repeat process
If solved → Terminate
Simple Example:
User wants to increase font size in a document:
Problem: Text too small
Knowledge: Menu has font settings
Action: Highlight text → choose bigger font
Result: Font is now readable → done
Steps of Problem Solving:
Define a Problem
Recognize a need, error, or challenge.
Gather Knowledge
Use memory, experience, or explore to understand the situation.
Consider Possible Actions
Think of multiple options to solve the problem.
Create Plan
Choose the best possible solution and plan the steps.
Execute Plan
Perform the actions as planned.
Observe Results
Check whether the outcome matches the expected solution.
Repeat Process (if needed)
If the problem is not solved, go back, revise the plan, and try again.
Problem Solved → Terminate Process
This is a looped process — humans adapt and revise based on feedback and outcome.
ii. Prediction, Assessment, and Evaluation of Interactive Behavior
This means:
Guessing how users will react to the interface.
Checking if users understand, like, or get confused.
Evaluating how effective and usable the design is.
Simple Example:
If most users get stuck on the payment screen,
designers know they must improve layout or instructions.
The provided images explain how human problem-solving and information-
processing efforts are structured and represented in a hierarchical plan.
• Goal Decomposition:
• A main goal is broken down into sub-goals and subtasks.
• These subtasks are executed one by one.
• Success isn't guaranteed at each step—failures can happen.
• If failure occurs, the plan is revised and tried again.
• Hierarchical Planning:
• The top goal is set based on the user's need.
• Then it is broken down into smaller tasks to form a hierarchical plan.
• Figure 3.1b shows this visually with a flowchart.
• The diagram shows a hierarchical
breakdown of the goal:
"Change the font of 'Hello' to Times-
Roman"
• This goal is split into two main subtasks:
• Select the text "Hello"
• Designate the start of the text.
• Highlight or drag to select all letters.
• Change the font to Times-Roman
• Bring up the font menu.
• Choose the "Change Font" option.
• Select "Times-Roman".
Hierarchical Task Model & Human Interaction
• What is a Hierarchical Task Model (HTM)?
• It is a step-by-step breakdown of a complex task into smaller
subtasks. This model helps designers understand what a user wants
to do and how it can be done using an interface.
• Example: Changing the Font of Text ("Hello")
• Why It Matters in HCI (Human-Computer Interaction)
• Users form mental models of how they expect the system to work.
• Interfaces should match this mental model to reduce confusion.
• The bottom-most tasks in the hierarchy need interface elements (e.g.,
mouse clicks, buttons).
Human Reaction and Prediction of Cognitive
Performance
Human Reaction & Cognitive Load
Concepts by Norman & Draper:
Gulf of Execution: Gap between user
intention and system’s available actions.
Gulf of Evaluation: Gap between system
feedback and what user expects to see.
If the interface doesn’t match the user's
expectations → confusion & errors.
Memory Constraints:
• Humans remember about 7 ± 2 chunks
in short-term memory.
• Interfaces should avoid overloading
users with too many choices at once.
• If users see too many font options in a
long list, they will need to rescan
repeatedly, slowing them down.
Example from Figure 3.4 — Online Shopping and User Memory
This figure and explanation highlight how interface design
must support human memory limitations, especially in
systems like online shopping.
Task Context Information
(Smartphone UI & Multitasking)
This figure illustrates a mobile interface
where the task context is visually
presented at the top of the screen (e.g.,
battery status, app currently in use, etc.).
It shows a user interacting with a
webpage and highlights the importance
of context awareness in multitasking
environments.
Sensation and Perception of Information
Sensation and Perception of Information
• It discusses how humans process raw stimuli and how interfaces must
respect these limitations to be effective.
• Key Point: Interfaces should present information in perceptually
appropriate ways.
• Connection: The mobile UI in the previous image aligns with this by
offering visual cues (icons, buttons, progress indicators) that match
the user’s sensory expectations.
Attention and Visual Modality
• Attention modulation—how users focus selectively on important
information during tasks—and the dominance of the visual modality
in HCI design.
• Implication for Interface Design:
• Designers must account for visual limitations when choosing:
• Font size
• Icon clarity
• Contrast
• Display resolution
• Accessibility features (like zoom or high-contrast modes) help
accommodate users with lower visual acuity.
Why this matters for Interface Design:
• Helps in layout planning, font sizing, and icon placement.
• Impacts readability, visual strain, and user efficiency.
• Supports decisions like screen size, resolution, and positioning for
different users and environments.
What is Ergonomics?
• Ergonomics is the science of designing tools, systems, and environments to fit
the physical and cognitive abilities of humans—so people can work comfortably,
efficiently, and safely.
• In Human-Computer Interaction (HCI), ergonomics focuses on making interfaces
(like keyboards, screens, or apps) easier and more comfortable to use.
• Ergonomics means designing for people—so their interaction with machines or
systems causes less strain, fewer errors, and better performance.
Example 1: Keyboard Design
• A split ergonomic keyboard is curved and angled to match the natural position
of your hands and wrists.
• This reduces muscle strain and the risk of repetitive stress injuries (e.g., carpal
tunnel syndrome).
Example 2: Touchscreen Button Placement
• In a mobile app, placing important buttons (like "Next" or "Submit") near the
bottom of the screen makes them easier to reach with your thumb.
• This improves user comfort and speed—especially on large phones.
Example 3: Mouse Design
• Ergonomic mice are shaped to support your hand in a neutral posture to avoid
wrist pain during long use.
This is the control panel of an
airplane—full of instruments,
gauges, switches, levers, and
controls that a pilot uses to
operate the aircraft.
The cockpit is one of the most
ergonomically critical
environments because pilots must
interact with these controls
accurately and quickly, often under
stressful conditions.
Ergonomics in HCI
• Ergonomics is about designing products and interfaces that are comfortable and
efficient to use.
• Although it includes mental and perceptual factors, this context focuses on
physical/mechanical aspects.
• Goal: Improve comfort and performance in interaction devices by understanding
human body mechanics.
Focus in HCI
• Special attention is given to human motor capabilities.
• These are essential for how users interact with devices through physical
movement (e.g., pointing, clicking).
• Two major areas: Fitts’s Law and human motor control.
Fitts’s Law
Definition: A mathematical model of human movement.
Purpose: Predicts the time required to move to a target area.
Factors considered:
• Distance (D) to the target
• Size (W) of the target
Implication in design: Larger and closer targets are faster to reach, which is
crucial when designing buttons, icons, or touchpoints.
A: Represents the distance (D) or amplitude —
how far the mouse pointer must travel from the
starting icon to the target icon (trash can or
another folder).
W: Represents the width (or size) of the target
area — how big the destination icon (trash can) is
on screen. A larger W means easier to hit.
Motor Control in HCI
example
1. Ergonomic Office Chair
• Designed to support the natural curve of the spine.
• Adjustable seat height, armrests, and lumbar support.
• Reduces back pain and improves posture for people sitting long hours.
• Mobile App Button Placement
• In smartphones, key buttons like “Send” or “Next” are placed near the
bottom corners, within easy reach of the thumb.
• This allows for one-handed use and improves efficiency and comfort.
• Monitor at Eye Level
• A monitor placed at the correct eye level avoids neck strain.
• It's a simple ergonomic setup tip that boosts comfort and reduces fatigue.