INTRODUCTION TO HUMAN COMPUTER INTERACTION (CC7)

INTRODUCTION TO HUMAN COMPUTER INTERACTION  Haptic channel

 Movement
 WHAT IS HUMAN COMPUTER INTERACTION (HCI)?  Information is stored in memory
 Sensory memory – they are stored for few
 Multidisciplinary field of study on the design of seconds and come form five senses
computer technology and interaction between  Short-term (working) memory – ability to
humans and computers remember insubstantial information in a
 Concerned with the physical, psychological, and short period of time.
theoretical aspects of the processes  Long-term memory – the memory process in
 Has since expanded to cover almost all forms of the brain that takes information from the
information technology design short term memory and creates long lasting
memory.
 WHY HCI?  Information is processed and applied:
 Reasoning
 ERRORS / MISTAKES IN COMPUTER  Problem solving
TECHNOLOGIES STILL EXIST TODAY  Skill acquisition
 Focus on whether or not the technology  Error
works  Emotion influences human capabilities
 The concept is too cool / groundbreaking  Users share common capabilities but are
 Functions are hard to utilize / process individuals with differences
 Specific people use things specifically
 Too much safety / security in the technology  THE COMPUTER
 Too much focus on the design
 Focuses on where the HCI is found
 WHEN CREATING TECHNOLOGIES, IT MUST BE:  Comprises various elements, each of which affects
 Suitable for the task the user of the system
 Easy to use  Input devices
 Adaptable to the user’s knowledge and  Output display
experience  Virtual reality systems
 Provides feedback on the performance  Various displays (physical controls, haptic
 Displays information in a format and pace dieback, sensors)
understandable to the user  Paper output and input
 Conforms to the principles of software  Memory
ergonomics  Processing

 THE IDEA OF USE IS ALSO NECESSARY FOR HCI:  THE INTERACTION

 Useful – accomplish what is required (play
music, cook dinner, format a document)  Interaction models help us to understand what is
 Usable – do it easily and naturally, without going on in the interaction between user and
danger of error system
 Used – make people want to use it, be  Address the translations between what the user
attractive, engaging, fun wants and what the system does
 Focuses on what the HCI is
 FOUR COMPONENTS OF HCI  Ergonomics are physical characteristics of the
interaction and how these influence its
 Human effectiveness
 Computer  Dialog between user and system is influenced by
 Interaction the style of the interface
 Context  Interaction takes place within a social and
organizational context that affects both user and
 THE HUMAN system

 Also known as the user / end-user  THE CONTEXT

 Limited in their capacity to process information
 Has important implications for design  Also known as paradigms
 Focuses on who the HCI is for  Examples of effective strategies for building
 Information is received and responses given via interactive systems to design usable interactive
several input and output channels: systems
 Visual  Focuses on how the HCI will be formed
 Auditory
  Ranges from the introduction of timesharing
computers, through the WIMP and web, to  SIX PRINCIPLES OF DESIGN
ubiquitous and contextaware computing
 VISIBILITY
THE DESIGN OF EVERYDAY THINGS  Users should know, just by looking at an
interface, what their options are and how to
 FAIL DESIGNING access them
 FEEDBACK
 The practice of engineering a system in such a way  Feedback is the response given by the system
that it safely and predictably fails under specified after a user action. This helps the user
conditions to minimize harm or damage. understand the outcome of their interaction.
 Seat Belt Locking Mechanisms: In cars, seat  AFFORDANCE
belts lock up upon sudden deceleration to  is the link between how things look and how
keep passengers from moving forward too they’re used. For example, a coffee mug has
much during a crash. high affordance because you instantly know
 Smoke Alarms: Emit loud sounds to alert how to hold it just by looking at it
residents of potential fires, even if they are  MAPPING
asleep or in another room.  Mapping is the relationship between control
 Non-Slip Mats in Bathtubs and Showers: and effect. The idea is that with good design,
Designed to prevent slips and falls when the the controls to something will closely
surface becomes wet. resemble what they affect.
 CONSTRAINTS
Design is not just what it looks like and feels like.  restrict a particular form of user interaction
Design is how it works with an interface
-Steve Jobs-  CONSISTENCY
 The same action has to cause the same
 DONALD A. NORMAN reaction, every time.

 University professor, industry executive, company THE ROLE OF HUMANS IN HCI

advisor, and board member;
 Electrical engineer, psychologist, computer  THE HUMAN
scientist, cognitive scientist, designer;
 Speaker and author  Human computer interaction starts with the
 Founder and Director of the Design Lab at the human
University of California, San Diego  The central character is the human
 There is a need to understand:
 DESIGN FOR REAL PEOPLE  Human capabilities
 Human limitations
“We must design for people the way they are,  There is a need to use a simplified model
not the way we wish them to be.  Select characteristics relevant to HCI:
Also, don’t be logical. Half the people in the  Input-output channels (perceptual system)
world are below average”  Human memory
-Donald A. Norman-  Human processing

 DONALD A. NORMAN PRINCIPLE  THE PERCEPTUAL SYSTEM

 GULF OF EXECUTION  Vision (Visual Perception)

 Is the difference between the intentions of  Hearing (Auditory Perception)
the users and what the system allows them to  Touch (Haptic Perception)
do or how well the system supports those  Taste (Gustatory Perception)
actions.  Smell (Olfactory Perception)
 In order to design the best interfaces, the gulf
must be kept as small as possible  Visual Processing
 the gap between what a user wants to do and  Involves transformation and interpretation of
how to actually do it using a system or a complete image
product.  Expectations affect the way an image is
perceived
 GULF OF EVALUATION  Compensates for movement, color and
 is the degree of ease with which a user can brightness
perceive and interpret whether or not the  Helps resolve ambiguities
action they performed was successful.
 the gap in finding out what is the current  Visual Ambiguity
state of the system.
  Refers to the quality of an image or visual  Patterns are useful memory aids
stimulus that can be interpreted in multiple,
often conflicting ways, making it unclear or  Long-Term Memory
uncertain to the observer.  We store everything we “know” - factual
information, experiential knowledge,
 Visual Processing procedural rules of behavior
 Perception of size  Huge, if not unlimited
 Familiarity  Relatively slow access time (1/10 second)
 Depth perception  Forgetting occurs more slowly
 Color perception
 Reading  Long-Term Memory – Structure
 Episodic – memory of events stored
 Visual Processing - Reading sequentially; can reconstruct actual events
 Perception and processing of text is a special  Semantic – structure derived from facts,
case concepts, or skills; derived from episodic
 Stages: memory
 Visual pattern of the word is perceived  Procedural - stores information about how to
 Decoded with an internal perform various tasks, skills, and habits,
representation of the language enabling us to perform them automatically
 Syntactic and semantic analysis and without conscious effort.
 Example: Reading “IL”
 Adults read 250 words per minute  Long-Term Memory – Structure
 Words are recognized by shape  Can be organized with the help of:
 Removing word shape clues by using all caps  Semantic networks
is detrimental to reading speed and accuracy  Frames
 Scripts
 Hearing  Production rules
 Human beings can hear sounds from 20 Hz to
15 kHz  Long-Term Memory – Structure (Organization)
 Can distinguish frequency changes of less  Semantic networks
than 1.5 Hz at low frequencies  Interconnections or associations among
 Less accurate at high frequencies memories
 Can be selective  Does not allow to model the complex
 Can convey a lot of information objects or events composed of several
 Not maximized in interface design activities
 Example: what are the words currently
 Touch associated with “dog”?
 Haptic perception - important means of  Frames
feedback  Objects that contain slots or attributes
 If and object is seen but not felt, speed and  Attributes represent default, fixed or
accuracy of a response is reduced variable information
 Complaint of VR users  Example: dog
 Fixed - Legs: 4
 HUMAN MEMORY  Default - Diet: Omnivorous, Sound: Bark
 Variable – Size, Color
 Second part of the model of the human as an  Scripts
information processor  Represents default stereotypical
 Three types: information
 sensory buffers  Contains: entry conditions, results,
 short-term memory props, roles, scenes, and tracks
 long-term memory  Example:
 Goal: To fill my mug with coffee
 Sensory Memory  Entry conditions: My mug must first be
 Iconic (visual) - persistence of the image after empty
the stimulus  Results: My mug is full of coffee
 Echoic (aural) - allows a brief “playback”  Props: Mug, coffee machine, coffee
 Haptic - touch  Roles:
○ Secretary makes the coffee
 Short-Term Memory ○ I fill my cup
 Scratch-pad for temporary recall  Production rules
 Used for information needed fleetingly  Series of condition-action (if-then)
 Rapid access, limited capacity statements
 7 +/- 2 chunks of information  Examples:
  IF it is raining THEN bring an umbrella  Does not explain insight and restructuring
 IF the high school is being dismissed  The whole is greater than the some of its
THEN traffic will be horrible parts
 People perform based on their understanding
 Long-Term Memory – Processes general principles of a situation
 Is made possibe through:  If we perform on memorized facts, we make
 Storing stupid mistakes
 Forgetting
 Remembering  PROBLEM SPACE THEORY
 Reasoning  Problem is represented in terms of problem
states
 Long-Term Memory – Processes  Heuristics are employed to go from initial to
 Storing goal state
 Total time hypothesis - amount learned  General problem solver works for well-
is proportional to amount of time spent structured domains
 Distribution of practice effect - learning  Real-world problems are more complex
time is most effective if distributed over
time  SKILL ACQUISITION
 Information must be meaningful for it to  Ability to remember larger and larger chunks,
be stored e.g. chess players
 Forgetting  Novices - group problems according to
 Decay superficial characteristics
 Interference - old replaced by new or  Experts - group according to conceptual
vice versa similarities
 Retroactive interference – new
information replaces the old  HUMAN ERROR
 Proactive inhibition – the old memory
interferes with the new information  HUMAN V. COMPUTER
 Remembering
 Recall - reproduced from memory  Human
 Recognition - the info has been seen  Result of millions of years of evolution
before  Guiding principle was survival, not
 Reasoning precision
 Process of deriving new information  Robustness in the face of unexpected
from what is known circumstances
 Types:  Ability to deceive
○ Deductive reasoning – two or more  Computer
assertions that lead to a conclusion;  Less than 100 years old
mathematical certainty  Reliable
○ Inductive reasoning - arriving at  Consistent
generalizations from observations  Based on mathematics
we have seen about cases we have
not seen  Human (Computation)
○ Abductive reasoning - formulation  Slow, complex
of hypotheses to explain a  Highly parallel
phenomena  Rapid change
 Error tolerant
 HUMAN THINKING  Forgiving
 Computer (Computation)
 PROBLEM SOLVING  Fast
 Process of finding a solution to an unfamiliar  Not fault tolerant
situation  High speed
 Three examples:  Precise
 Gestalt
 Problem space theory  THE CONCEPT OF ERROR
 Analogy in problem solving  Centers on understanding and mitigating
user-related mistakes and slips, emphasizing
 GESTALT the importance of user-friendly design and
 People draw on previous experiences cooperative task completion over assigning
 Have insights blame.
 People as sense-makers  The computer was given information it could
 Restructure the problem not process
 Theory lacked structure and support  Blame shifted on the human being
  Achieving a goal should be a cooperative  Choice of inappropriate goals
endeavor  Poor decision, misclassifies a situation, or fails
 Task is not to assess blame but to complete to take all factors into account
the task  Mental thought is not neat and orderly
 Types of Errors:  The disorder leads to creativity, discovery,
 Slip – results from automatic behavior and great robustness of behavior
 Mistake – stems from conscious
deliberation  FAILURE TO DETECT PROBLEMS
 User’s ability to detect errors is unreliable
 TYPES OF SLIPS  Relevance bias - people seek confirmatory
 Capture errors evidence when evaluating a hypothesis
 Description errors  Partial explanation - crude agreement
 Data driven errors between what the user expects and what he
 Association activation errors sees
 Loss of activation errors  Overlap of model and world - mental model is
 Mode errors partially consistent with the world

 Capture errors  DESIGNING FOR EMOTIONS

 A frequently done activity captures the
one intended  WHY EMOTIONS?
 Example: mistakenly dialing telephone  Emotions makes the human smart
numbers with the same prefix  Much of human behavior is subconscious
○ 426-6001 - Ateneo trunk line  Affective system helps make judgments
○ 426-6071 - DISCS direct line  People without emotions cannot choose
 Description errors between alternatives
 An action is performed on the wrong
artifact  EFFECTS OF USING EMOTIONS FOR DESIGN
 Example:  Broadening of thorough processes
○ Bottles of shampoo and  Greater creativity
conditioner, especially if they have  Greater imagination
the same bottle design  More tolerant of minor difficulties
 Data driven errors
 Triggered by the arrival of sensory data  LEVELS OF EMOTION-BASED PROCESSING
 Examples:
○ Typing what you are thinking /  Visceral
hearing / seeing and not what is  Pre-conscious, pre-thought
intended  Appearance matters
○ Calling someone by the wrong  First impressions are formed
name  Initial impact of the product (touch,
 Freudian Slips feel, appearance)
 Verbal / memory mistake that usually
reveals the subconscious  Behavioral
 Example:  Focuses on the use
○ A child calling their teacher “Mom”  Experience with the product:
or “Dad” ○ Function
 Loss of activation errors ○ Performance
 Act of forgetting to do something ○ Usability
 Example:
○ Walking somewhere to get  Reflective
something but forgetting the  Affected by culture, experience,
moment you step into the education, and individual differences
destination  Can override the visceral and behavioral
 Mode errors  Sophistication vs. popularity
 Action sequence performed in the  Long-term relationships
wrong mode  Consideration of the future
 Examples:
○ Typing in the password with CAPS  LEVELS OF EMOTION-BASED PROCESSING
LOCK on
○ Using different tools as if it were  Visceral - appearance
another  Behavioral - pleasure and effectiveness of use
 Reflective - self-image, personal satisfaction,
memories
 MISTAKE THE ROLE OF COMPUTERS IN HCI
  All vowels and punctuation marks are on the
 COMPUTER PERIPHERALS AND PARTS left side
 All consonants on the right side
 Input / output devices  Most used letters in the middle row so it’s
 Virtual Reality systems easier to reach
 Bio sensors
 Computer memory  INPUT DEVICE – MOUSE
 Computer processors
 Handheld hardware input device that controls a
 WHY KNOW THE COMPUTER DEVICES? cursor in a GUI (graphical user interface)
 Move and select text, icons, files, and folders on
 Computer devices enhance or work well with computer
human capabilities and limitations  Commonly makes use of a pointer on a display
 Perceptual System  Types:
 Human memory and processing  Ambidextrous
 Human error  Left-handed
 Human emotions  Vertical
 Not every user would have all the required
computer devices  Ambidextrous Mouse
 Designed to fit either lefthanded or right-
 LIST OF INPUT DEVICES handed people
 Most common type of Mouse
 Keyboard
 Mouse  Left-Handed Mouse
 Microphone  Specifically designed for users whose
 Trackball dominant hand is their left hand
 Touchpad
 Touchscreen devices  Vertical Mouse
 Controllers  Taller than it is wide
 Scanner  Designed to reduce strain
 Drawing Tablet  Mouse is held vertically, much like you would
 Eye Tracking Devices during a handshake
 Hand Tracking Devices  Buttons are located right beneath the grasp

 INPUT DEVICE – KEYBOARD  INPUT DEVICE – MICROPHONE

 Like a typewriter, it is composed of buttons used to  Translates sound vibrations in the air into
create letters, numbers, and symbols, and perform electronic signals or scribes them to a recording
additional functions medium
 Buttons or keys act as mechanical levers or
electronic switches  INPUT DEVICE – TRACKBALL
 Arrangement of buttons depend on the format:
 QWERTY  Small ball set in a holder
 QWERTZ  Can be rotated by hand to move a cursor on a
 AZERTY computer
 DVORAK
 INPUT DEVICE – TOUCHPAD
 QWERTY / Sholes Keyboard
 Named after the first 6 alphabetic keys on the  For controlling the pointer on a display screen
top left  Done by sliding the finger along a touch-sensitive
 May be created: surface
 Due to mechanical failings in early
typewriters  INPUT DEVICE – TOUCHSCREEN DEVICES
 To make it easier to decode morse code
 Technically both an input and output device
 QWERTZ / Swiss Keyboard  User places input through multi-touch gestures by
 Used in German-speaking countries touching the screen or through a stylus
 Output may be shown in another screen or in the
 AZERTY Keyboard same screen
 Commonly used in France and Belgium

 DVORAK Keyboard
 Ergonomic alternative to the QWERTY layout  INPUT DEVICE – GAME CONTROLLER
  Oldest type of LCD panel
 Also known as a gaming controller or controller  Most budget-friendly; has low cost
 Used to provide input to a video game production
 Can be haptic  Limited viewing angles, particularly on vertical
 Gamepad axis
 Common game controller  High refresh rates; low input lag
 Came from console games  Colors of the TN panels:
 Used for better mobility of a character  Reproduction is not strong
 Can invert completely when viewed
 INPUT DEVICE – GAME CONTROLLER from an extreme angle

 Other game controllers  In-Plane Switching (IPS) Panels

 Paddle  Developed to improve limitations of TN
 Steering wheel set panels
 Touchscreen  Vastly superior viewing angles
 Motion sensor  Best color reproduction:
 Light gun  Good black color reproduction
 Rhythm game controllers  Best used for graphic design

 INPUT DEVICE – SCANNER  Vertical Alignment (VA) Panels

 Compromise between TN and IPS
 Uses a light beam to scan codes, text, or graphic  Has best contrast ratios
images directly into a computer or computer  Used extensively for TV manufacturing
system  Viewing angles are in the middle of IPS and
TN
 INPUT DEVICE – DRAWING TABLET  Have slower response times than TNs
 Ideal for general use
 Converts movements from a stylus pressed on a
designated area on the tablet’s screen  OUTPUT DEVICE – SPEAKERS
 Commonly used for digital arts
 Connects to a computer to generate sound
 INPUT DEVICE – EYE TRACKING DEVICE  Signal is created by the computer's sound card

 Sensor technology that makes it possible to know  OUTPUT DEVICE – HEADPHONES

where a person is looking in real-time
 Uses a specialized camera  Small speakers that can be worn in or around the
 Detects the presence, attention, and focus of the ears
user  Traditional headphones:
 Have two ear cups
 INPUT DEVICE – HAND TRACKING DEVICE  Attached by a band
 Placed over the head
 Makes use of various sensors  Earbuds or earphones:
 Captures data on the position, orientation, and  Placed inside the outer part of the ear canal
velocity of hands
 Can be a device that is attached to the hand or a  OUTPUT DEVICE – PRINTER
device away from the hand
 Accepts text and graphic output from a computer
 LIST OF OUTPUT DEVICES  Traditional printers transfer the information to
paper
 Monitor
 Speakers  3D Printer
 Headphones  Computer-aided manufacturing (CAM) device
 Printers  Creates three-dimensional objects
 Builds a three-dimensional model out of a
 OUTPUT DEVICE – MONITOR custom material

 Displays information in pictorial or text form  VIRTUAL REALITY SYSTEMS

 Modern monitors use liquid crystal display (LCD)
 Three popular LCD monitor types:  WHAT IS VIRTUAL REALITY?
 Twisted nematic (TN)  Simulated experience that can create an
 IPS (In-Plane Switching) artificial world
 VA (Vertical Alignment)  Can look and move around the artificial
 Twisted Nematic (TN) Panels world, and interact with objects around
  Utilizes limited visual and auditory processing  COMPUTER MEMORY DEVICES
and high haptic feedback for a more
immersive experience  Non-volatile memory
 Hard disk drive
 VIRTUAL REALITY DEVICES  Solid state drive
 Virtual reality headset  Flash memory
 Motion controllers  Nonvolatile memory express
 Optical tracking  Volatile memory
 Random access memory
 VR DEVICE - HEADSET
 Also called VR goggles  NON-VOLATILE MEMORY
 Head-worn apparatus that completely covers
the eyes for an immersive 3D experience  Type of computer memory that can retain stored
 Can be attached to a computer (Valve Index) information even after power is removed
 Can be self-contained (Oculus Quest 2)  Common examples:
 HDD (Hard Disk Drive)
 VR DEVICES – MOTION CONTROLLERS  Flash memory
 Collection of devices that detect the user’s  SSD (Solid State Drive)
motion in different levels  NVMe (Nonvolatile Memory Express)
 Tracked with cameras, sensors in the
controllers, or both  Hard Disk Drive (HDD)
 Examples:  Magnetic storage medium for a computer
 Hand controllers  Hard disks are flat circular plates made of
 Wired glove aluminum or glass and coated with a
 Omnidirectional treadmill magnetic material
 Used for general storage, but quite slower
 VR DEVICES – OPTICAL TRACKING
 Process of monitoring the user’s position  Flash Memory
through visual information  General term for electronic non-volatile
 Mostly done through sets of cameras and memory
other sensors in or out of the headset  Can be electrically erased and reprogrammed
 Can track smaller body parts (fingers) to the  Used for a lot of modern memory devices:
entire body  USB flash drives
 Memory cards
 BIO SENSORS  SSDs and NVMes

 WHAT IS BIOSENSING?  Solid State Drive (SSD)

 Detection of target molecules based on the  New generation of storage device used in
principles used by a living system computers
 Can be used for a more precise means of  Uses flash-based memory
determining user input with little movement  Much faster than a traditional
mechanical hard disk
 BIOSENSOR  Used for more modern systems that require
 Self-contained integrated device fast access of storage
 Capable of providing specific quantitative
analytical information using a biological  Nonvolatile Memory Express (NVMe)
recognition element  New storage access and transport protocol
 Enzymes for flash and next-generation solidstate drives
 Antibodies  Delivers the highest throughput and fastest
 Natural receptors response times yet for all types of enterprise
 Cells workloads

 BRAIN SENSORS  VOLATILE MEMORY

 Can allow to control software, apps, and
machines  Computer memory that only maintains its data
 Done by developing new virtual reality, while the device is powered on
augmented reality, and braincontrolled  Used for primary storage in personal computers
technology with brain-computer Interface  Much faster to read from and write to than the
(BCI) software other kinds of storage in a computer
 Data stored in volatile memory are temporary data
used in computer systems or ones needed by the
 COMPUTER MEMORY processor
  Random Access Memory (RAM)
 Short-term memory where data is stored as
the processor needs it
 Play a game from computer’s hard drive
 Stream a movie from the Internet

 COMPUTER PROCESSORS

 COMPUTER PROCESSING
 Processing can be too slow or too fast
 Too slow
 Unable to catch input when it happens
 Input is buffered; feedback is too slow
 Too fast
 Output comes out too quickly; user is
unable to read it

 CENTRAL PROCESSING UNIT

 Circuit board inside a computer that executes
instructions on behalf of programs
 Modern computer processors can process
millions of instructions in a second
 Processors are considered the main chip on a
computer

 LIMITATIONS THAT DECREASE PROCESSOR

PERFORMANCE
 Computation limitations
 Storage channel limitations
 Graphics limitations
 Network limitations