1/24/2025

Objectives

• To understand the fundamental principles of

HCI to create user-friendly software:
HCI
– how theoretical concepts directly impact
software development
• To apply HCI principles in software design and
development
– How to integrate user experience
considerations into our coding practices
– How to evaluate and improve interface
designs

Context of HCI/Common Use Cases

Definition of HCI
• Individual User Contexts
• HCI is an abbreviation for – Mobile app usage
Human Computer Interaction – Desktop software interaction
– Smart device control
Human Computer Interface • Collaborative Contexts
• Core focus: To understand and improve how we – Team collaboration platforms
– Virtual meeting environments
humans interact with digital systems – Shared development environments
– Encompasses • Multi-device Contexts
• the visible interface (what users see) and – Cross-platform applications
• interaction patterns (how users engage) – Cloud-based services
– IoT device networks
– Directly impacts user experience in all digital • Each context demonstrates different challenges in interface
products design and user interaction.
• Note: The context can be between one or more humans and one
or more computational machines

1
 1/24/2025

Human Computer Interaction (HCI) Human Computer Interaction (HCI)

• ... a discipline concerned with the design, evaluation and • ... a discipline concerned with the design, evaluation and
implementation of interactive computing systems for human use and implementation of interactive computing systems for human use and
with the study of major phenomena surrounding them." (Hewett et al, with the study of major phenomena surrounding them
1992) – Focus is on user-centric approach and surrounding
• In the context of HCI, interaction refers to the context
communication and dialog between a human user and a • Think of it as designing a conversation between humans
computer system. and computers where both parties need to understand
each other clearly.
• It is the process by which a human provides inputs to a
computer interface, such as actions, commands, or queries, • Key Components of Interaction:
and the computer provides outputs or feedback in return. – Input: User actions (clicks, typing, gestures)
– emphasises the reciprocal communication between a – Processing: System interpretation of inputs
human and a computer during use of an interface. – Output: System feedback and responses
• Example: Typing a search query into a search engine – Feedback Loop: Continuous interaction cycle
interface and the engine returning relevant results.

Human Computer Interaction (HCI) Human Computer Interaction (HCI)

... a discipline concerned with the design, evaluation and ... a discipline concerned with the design, evaluation and implementation of
implementation of interactive computing systems for human use interactive computing systems for human use and with the study of major
phenomena surrounding them
and with the study of major phenomena surrounding them
• Design - Creating the user interface and interactions. • Interactive - The reciprocal communication between
the user and the system via the interface.
– e.g., designing a mobile app's screen layouts and menus.
– E.g., the back-and-forth between you and an LLM.
• Evaluation - Systematically assessing an interface
usability through methods like user testing. • To improve the user experience we must factor the
context/environment.
– E.g., observing participants complete tasks on a website.
– Environmental Factors
• Implementation - Coding or building the designed
– User Situations
interface elements into a working system.
– Device Capabilities
– E.g., programming the front-end UI of an app based on
designs. • E.g., considering how the app you are designing will appear
in different lighting (like when the user steps out into the sun).

2
 1/24/2025

Human Computer Interaction (HCI)

Alternative Definitions:
HCI: A Multi-Disciplinary Area
Ergonomics and

• The field of study that focuses on optimising Social and

Human factors
Engineering
organizational

how users and computers interact by philosophy

designing interactive computer interfaces that Design

satisfy users’ needs.

Cognitive psychology

• The study of how people interact with

computers and the design of technology that HCI
Computer Science Anthropology

considers the user's needs.

Artificial Intelligence

• These definitions highlight that HCI isn't just Sociology

about making interfaces look good - it's about Linguistics

making them work effectively for real users in

Philosophy

Many more

real situations.

Human Computer Interaction

Human Computer Interaction (HCI)
(HCI)
• Core Technical Disciplines:
• Understanding how these different fields contribute to
– Computer Science: Programming and system architecture
HCI helps create more comprehensive and effective
– IT: Implementation and maintenance
interfaces.
– Electronics: Hardware interfaces and interactions
• Each discipline brings unique insights into how humans
• Human-Focused Disciplines:
interact with technology.
– Psychology: Understanding user behaviour and cognitive
processes • HCI involves understanding the user, the tasks they
– Sociology: Group interactions and social patterns want to perform, and creating interfaces that
– Design: Visual and interactive elements facilitate these interactions.
• Applied Sciences: – understanding user behaviours, abilities, and
– Ergonomics: Physical interaction optimisation
limitations to create interfaces that are accessible,
– Human Factors: User capabilities and limitations
useful, easy to use, and enjoyable.
– Cognitive Science: Mental processing and decision-making • E.g.?

3
 1/24/2025

Human Computer Interaction (HCI)

• In the Google Maps app, when you search for directions, it
defaults to showing the route map prominently
– because you are likely looking for visual directions.
• However, if you click the button to start turn-by-turn navigation,
it intelligently shifts the interface to focus on the next direction
and ETA in a large font
– since your behaviour indicates you now need step-by-step
verbal instructions.
• Thus the app adapts the information hierarchy in response to
inferred user needs.
• This is user interface design that adapts to user behaviour and
context.
• It aligns with principles of user-centered design and enhances
the user experience by providing relevant information based
on the user's actions.

History of HCI History of HCI

• Emerged as a field in the 1980s as graphical • Fitts's Law - Models the time needed to
user interfaces became popular. move to a target based on the distance to
• The focus then was on cognitive models to and size of the target.
predict user behaviour: GOMS, Fitts's Law ... – i.e., it models the time needed for pointing-
• GOMS - the Goals, Operators, Methods, device movements based on the motor
Selection rules model predicts the overall time difficulty
to complete a task. – it is used to estimate how users will interact
– It analyses the individual subtasks and cognitive with an interface.
steps in an interaction .
• E.g., time to click a small icon vs. a large button.
• E.g., the steps to save a file in a program.

4
 1/24/2025

History of HCI History of HCI

• In the 1990s there was a shift to user-centered • Emotional Design
design methods like ethnography, personas.
• Today: growth in UX design, emotional design, • Strategically employs aesthetics and
ubiquitous computing. patterns to evoke emotions
• User experience (UX) design
• Takes a holistic view beyond just usability to the • We design interactions to intentionally
overall user experience. evoke certain emotional responses
• Considers all aspects of a user's interaction with a from users.
product or system, including perceptions, emotions,
usability. • E.g., using pleasing animations and
• E.g., designing a website to be visually appealing, font choices to create a joyful
intuitive, and enjoyable to use.
experience.

History of HCI 1. Early Command-Line Interfaces

• Ubiquitous Computing
• In the early days of computing,
• Integrating computing technology into
interaction primarily occurred through
everyday objects and activities.
command-line interfaces (CLIs).
• We embed technology seamlessly
• Users had to input text commands to
into the environment and activities
perform task.
around us.
• The interface lacked visual elements.
• E.g., appliances, vehicles, and
wearables with embedded digital
features and connectivity.

5
 1/24/2025

3. Introduction of Graphical User

2. Development of the Mouse Interfaces (GUIs) by Xerox PARC
• One of the pivotal moments in
HCI was the development of
the computer mouse by
• Xerox PARC (Palo Alto Research
Douglas Engelbart at the Center) played a crucial role in the
Stanford Research Institute in evolution of HCI by introducing
the 1960s.
• It provided a tangible and
graphical user interfaces.
intuitive way for users to • The Xerox Alto, developed in the
interact with graphical
elements on the screen. 1970s, featured windows, icons,
– an ability to interact with menus, and a pointing device, setting
information displays using some
sort of device to move a cursor the foundation for modern GUIs.
around the screen.

4. Apple's Incorporation of GUIs 5. Rise of Graphical Operating Systems

• Apple's Macintosh, released in • Following the success of the Macintosh,

1984, brought GUIs to a broader other OSs, e.g., Microsoft Windows,
audience with its iconic graphical adopted graphical interfaces.
interface and mouse support. • This shift made computing more user-
friendly.
• The Macintosh popularised the use
of icons and visual metaphors, • It contributed to the widespread
adoption of personal computers.
making computing more accessible.

6
 1/24/2025

6. Touch-Based Interfaces and Smartphones 6. Touch-Based Interfaces and Smartphones

• The introduction of touch-
based interfaces
revolutionised HCI with the
advent of smartphones.
• The iPhone, launched by
Apple in 2007,
popularised touch gestures,
multitouc h, and intuitive
The first smartphone: IBM’s SPC (Simon
Personal Communicator) 1994. First ever interactions.
• Smartphones became a
touchscreen, can send and receive emails and
faxes, has a calendar, address book, and a
native appointment scheduler, and standard
ubiquitous part of daily life,
DynaTAC 8000x (the brick), the first
Prototype of Motorolla’s DynaTAC model and predictive stylus-compatible screen
commercially available cellular phone
(1973) keyboards.
small enough to be easily carried
impacting how users interact
with technology.

7. Gesture-Based Interactions
8. Ongoing Evolution
and Beyond
• B eyo n d t o u c h , t e c h n o l o g i e s l i ke • HCI continues to evolve with
gesture-based interactions, voice advancements in natural language
commands, and facial recognition have processing, AI, and the integration of
further expanded the HCI landscape. technologies like VR and AR.
• Virtual and augmented reality (VR/AR) • The focus is on creating seamless and
tec hnologies are introducing new natural interactions between humans
modes of interaction and immersion. and computers.

7
 1/24/2025

Human Computer Interaction (HCI)

• Focuses on designing, implementing, and

evaluating interactive interfaces that enhance
user experience using computing devices.
• Key aspects of HCI include
– user interface design
– usability
– user experience
– interaction design
– accessibility • Diagram illustrating different modalities of interaction and the associated
IO components.
– emerging technologies. • An overview of the various ways users can interact with computers and
receive feedback.

Different Modalities/Channels of HCI Different Modalities/Channels of HCI

• Sight: visual interaction - Visual inputs and outputs like monitors
and screens • In the diagram, haptic feedback is included
• Touch: tactile interaction - Tactile inputs like mouse, keyboard, through vibrations.
touch screens
• Hearing: auditory interaction - Auditory inputs and outputs like – Haptic feedback is a type of tactile feedback
voice and speakers giving us a sense of touch or physical sensation
• Voice: voice-based interaction - Speech inputs and outputs
• e.g., when a smartphone vibrates in response
• Spatial: interaction involving spatial awareness - Gestures,
body movement, facial expressions as inputs. Screens as outputs.
to your touch or when a game controller
– Spatial awareness ==> the ability to perceive and understand the provides resistance to simulate the feeling of
spatial relationships (the positions and orientations of objects in relation
to one another within a given space) between objects in the surrounding
driving a car.
environment. • Sensors are included for capturing body
movement.

8
 1/24/2025

Different Modalities/Channels of HCI

• The diagram shows how sensory modalities are leveraged in
HCI.
– sensory modalities in the context of HCI are the channels through which
users can input or receive information from computers
– e.g., through the senses of sight, hearing, and touch.
• Humans can use different sensory modalities to interact with
computers, both for inputs (mouse, touch, voice, gestures) and
outputs (screens, speakers).
• Cognitive interaction: the cognitive (mental) processes like
perception, attention, thinking, reasoning, decision making, and
memory that occur when humans interact with computers
– e.g., when we interpret displayed information, make decisions and solve
problems.
• HCI involves both cognitive processing and sensorimotor
capabilities (the combination of sensory perception and motor
skills e.g. moving and clicking a mouse or typing on a
keyboard).