Human Computer Interaction (HCI)

Input-output channels
 User interacts with the world

 Receives information and sends information

 Using senses

 Sight, hearing, touch, taste and smell

 Sight, hearing & touch have important role in HCI

 Effectors
 Limbs (arms, legs), fingers, eyes, head and vocal system

2
 Input-output channels
 Human input / output (Example)

 User interacting with a PC using mouse and keyboard

 Manipulating objects (icons, windows, etc.)

 Receive information through vision mostly

 Receive information through ears too (e.g. beep)

 Provide input to PC through effectors

3
 Vision

4
 Vision
 Primary source of information

 Two stages in vision

 Physical reception of stimulus (event)

 Processing and interpretation of stimulus

5
 The Eye - physical reception

 Light reflects from objects

 Eyes provide a mechanism for receiving light and

 Transforming it into electrical energy

6
 The Eye - physical reception
Two receptors in retina

Rods

Edges of the eye

More densely packed at the

outer parts of our visual field

For low (dim) light vision

Detect changes in movement

7
 The Eye - physical reception

 Cones

 Densely packed towards the center

of our visual field

 Different types of cones for different

wavelengths

 Help in colour vision

 Help in reading and distinguishing

8
 Home work:

1- What is color blindness?

2- Types of colorblindness?

3- How colorblinds distinguish colors?

4- What are the interface design rules for colorblinds?

9
 Interpreting the visual signal
Familiar objects perceived as constant size
 In spite of changes in visual angle (when far away)
 Law of size constancy!
-Known object appears to be of same size, no matter how far it is from us
 Thus our perception of size relies on factors other than visual
angle

Cues like overlapping help perception of size and depth

 Partially covered objects appear in the background and thus
further away

10
 Interpreting the visual signal
 Our expectations affect the way an
image is perceived

 Context/expectations are used to

resolve ambiguity

11
 Optical Illusions
•The way things are and the way we perceive them
•Take care of distances, color schemes and the contextual objects

is
f size
o le
t i on reliab
e rcepletely
rp p
Ou t com
no

The Ponzo illusion The Muller Lyer illusion

(distance) (edges)

12
 Vision: Design Focus
How helpful in interface design?

•If you want a user to see an error message at the bottom of the screen

• It had better be flashing !

• Because rods are sensitive to changes

• Hence we see movements well at the edges of our vision

13
 Reading

14
 Reading
 Several stages:

 Visual pattern of the word is perceived

 Encoded with reference to internal representation of knowledge

 Interpreted using knowledge of syntax and semantics

15
 Reading
 Reading involves “saccades” and “fixations”

 Saccades:
The fast movements of both eyes in the same direction

 Fixations:
Stable movement of the eye (maintaining the visual gaze at
single location)

 Perception occurs during fixations

16
 Reading

Example:
Read aloud and quickly !

The quick brown

fox jumps over the
the lazy dog comp
en s ates

system
v is ual tions !
Our xpecta
e
17 our
 Reading
 Words can be recognized as quickly as characters

 Word shape is important to recognition

Familiar words are recognized using word shape

18
 Reading
 What if we remove the word shape clues (e.g. capitalizing
words)
 “ NEGATIVE CONTRAST IMPROVES READING FROM COMPUTER SCREEN ”

 “ Negative contrast improves reading from computer screen ”

Reading is slower in which case?

19
 Reading
Reading Test

aocdcrnig to rseecrah at Cmabrigde Uinervtisy, it dseno't

mttaer in waht oderr the lterets in a wrod are, the olny
irpoamtnt tihng is taht the frsit and lsat ltteer be in the rhgit
pclae. The rset can be a taotl mses and you can sitll raed it
whoutit a pboerlm. Tihs is bucseae the huamn mnid deos not
raed ervey ltteer by istlef, but the wrod as a wlohe.

Can you read without difficulty?

20
 Reading
How helpful in interface design?

1. Standard font size of 9 to 12 points are equally legible, given

proportional spacing between lines

2. Line lengths of 2.3 and 5.2 inches are equally legible

3. Dark characters on light screen: increases acuity, increases legibility

4. Reading from computer screen is slower than from a book (Home work)

21
 Reading
• Minimum Design
- Use 80/20 rule, design for the top 20 percent features
-Choose aesthetic colors and layout
- Provide high noise-to-signal ratio between the chrome of the UI and
data
• Simplicity
-Keep design simple and clear
-Focus on the main task and avoid user distraction
-Keep functionality and simplicity

22
 Reading
• Accessibility
-Make easier to use and access by multiple devices, like old computers
and assistive devices
-Make usable by everyone: disabled, senior citizens, and people with low
literacy level
• Consistency
- Use similar layouts and terminology within the application
-Employ familiar interaction and navigation
-Keep the UI consistent within the context

23
 Reading
 Feedback
-Provide immediate feedback
- Update user with current status for background actions
Forgiveness
-Allow for error prevention and allow undo
-Limit user error by enabling on required commands

24
 Reading

• Similar behavior of UI at different places

• Put buttons on similar places in multiple windows

• OK, Cancel, ...

25
 Reading

• Use consistent color scheme

• Colors of title bars, windows, .... (think of a theme)

26
 Reading

• Use consistent color scheme

• Colors of title bars, windows, .... (think of a theme)

27
 Reading

• MS Word users can easily use Excel, PowerPoint, ...

• Benefit
• Users can transfer knowledge/learning to a new program

28
 Hearing

29
 Hearing
 Provides information about environment:

 Objects
 cars, birds, machinery, neighbour, …

 Distances

 Directions etc.

30
 Hearing
 Humans can hear frequencies from 20Hz to 20kHz
 Less accurate in distinguishing high frequencies than low

 Auditory system filters sounds

 Can attend to sounds over background noise
 For example, the “cocktail party phenomenon”
 Name called in the party

31
 Hearing
 In interface design:

 Warning sounds / Notifications

 To convey information about the system state

 User attention to a critical situation

 Virus found / software updates (in Avast)…

32
 Hearing
 In interface design:

 Status information
 Continuous state of a system (e.g. In hospitals)

 Confirmation of an operation
 Deleting a file

 Supporting navigations with different sound effects

33
 Hearing
Giving immediate feedback that an action has taken
place (buttons on ATMs, telephones, etc., that "beep"
or "click" as they are pressed);

Supporting users for whom the visual interfaces are

not an option (e.g., those with visual impairments)

34
 Hearing
In interfaces where visual information cannot be
presented (e.g. mobile or handheld devices with small
or no screens).

Supporting users whose visual senses are already

heavily used for other parts of their task (e.g., aircraft
pilots)

35
 Touch

36
 Touch / Haptic perception
 Provides important feedback about
environment

 Hot coffee

 Cold water

 Pressing a button to turn on fan …

... as warning

37
 Touch / Haptic perception

 What if we cant “feel” …

 The shape of the glass while picking it?

 Feet on the ground ?

 “ Speed and accuracy of action is reduced! ”

 Key sense for visually impaired

38
 Touch / Haptic perception
 Stimulus received via receptors in the skin:

 Thermoreceptors – heat and cold

 Nociceptors – pain

 Mechanoreceptors – pressure

39
 Touch / Haptic perception
 Kinesthesis - awareness of body position and limbs

 Affects comfort and performance e.g. touch typist

 Awareness of relative position of fingers on keyboard

 Tactile feedback from keyboard

40
 Touch / Haptic perception
 In Virtual Reality (VR)
 Games

 In Touch screens
 Touch tables …

 In Tangible User Interfaces (TUIs)

 E-commerce
 The experience of shopping online !
 Buying clothes / food etc...
 Users need to feel surfaces and shapes

41
 Fitts’ Law
 The time taken to hit (select) a screen target:

Mt = a + b log2(D/S + 1)

Where: Mt is time taken to move a pointing device to a target

a: start/stop time of the device

b: speed of the device

D is Distance from starting point to the center of the target

S is Size of target (width of the target)

42
 Fitts’ Law

 This affects the type of the target we design

 Targets as large as possible

 Distances as small as possible

43