4. Canvas Course Link
A Section: https://bit.ly/srT86978
G Section: https://bit.ly/sr3JR6PL
4
5. Course Outcomes
● Design effective dialog for HCI
● Design effective HCI for individuals and persons with
disabilities.
● Assess the importance of user feedback.
● Explain the HCI implications for designing multimedia/
ecommerce/ e-learning Web sites.
● Develop meaningful user interface.
6
6. Syllabus
Unit – I: Foundations of HCI –
● The Human
● The Computer
● Interaction
● Paradigms
Unit – II: Design and Software Process –
● Interactive Design
● HCI in Software Process
● Design Rules
● Evaluation Techniques
7
Unit – III: Models and Theories –
● HCI Models
Unit – IV: Mobile HCI –
● Mobile Ecosystems
● Types of Mobile Applications
● Mobile Design
Unit – V: Web Interface Design –
● Designing Web Interfaces
7. Assessment
8
S. No Assessments
Assessment
Methodology
No of
assessments
Weightage in
marks
Marks scaled
to
1
CIE
Quizzes 2 5 5
2 Class test 2 10 5
3 Assignment 2 5 5
4 Course Activity 1 5 5
5 Course Project -- -- --
6 Internal exams 2 20 20
7 SEE -- -- -- 60
8. Assessment Schedule
9
Test-Type
Syllabus Tentative Date & Time Mode
Class Test-1 1st Unit
3rd Week-Last Working
Hour
Offline/Online
Quiz-1 1st Unit and 2nd Unit
8th Week-Last Working
Hour
Online
Quiz-2 3rd Unit and 4th Unit
14th Week-Last Working
Hour
Online
Class Test-2 5th Unit
16th Week-Last Working
Hour
Offline/Online
11. The Human
● Input-Output Channels
● Human Memory
● Thinking: Reasoning and Problem Solving
● Emotion
● Psychology and the design of Interactive Systems
Humans are limited in their capacity to process information.
This has important implications for design.
12
12. Input-output Channels
● A person’s interaction with the outside world occurs through information
being received and sent: input and output.
● In an interaction with a computer the user receives information that is
output by the computer and responds by providing input to the computer
– the user’s output becomes the computer’s input and vice versa.
● Input in the human occurs mainly through the senses and output through
the motor control of the effectors.
13
13. Input-output Channels
● There are five major senses:
○ Sight,
○ Hearing,
○ Touch,
○ Taste
○ Smell
● The first three are the most important to HCI.
● Taste and smell do not currently play a significant role in HCI, and it is
not clear whether they could be exploited at all in general computer
systems, although they could have a role to play in more specialized
systems (smells to give warning of malfunction, for example) or in
augmented reality systems.
14
14. Vision
● Human vision is a highly complex activity with a range of physical and
perceptual limitations, yet it is the primary source of information for the
average person.
● Visual perception can be roughly divided into two stages:
○ The physical reception of the stimulus from the outside world, and
the processing and interpretation of that stimulus.
○ The interpretative capabilities of visual processing allow images to be
constructed from incomplete information.
15
15. Vision – The Human Eye
● Vision begins with light.
● The eye is a mechanism for receiving light and transforming it into electrical
energy.
● Light is reflected from objects in the world and their image is focused upside
down on the back of the eye.
● The receptors in the eye transform it into electrical signals which are passed to
the brain.
16
17. Vision – The Human Eye
● The cornea and lens at the front of the eye focus the light into a sharp image on
the back of the eye, the retina.
● The retina is light sensitive and contains two types of photoreceptor: rods and
cones.
● Rods are highly sensitive to light and therefore allow us to see under a low level of
illumination.
● However, they are unable to resolve fine detail and are subject to light saturation.
● This is the reason for the temporary blindness we get when moving from a
darkened room into sunlight: the rods have been active and are saturated by the
sudden light.
18
18. Vision – The Human Eye
● Cones are the second type of receptor in the eye. They are less sensitive to
light than the rods and can therefore tolerate more light.
● There are three types of cone, each sensitive to a different wavelength of
light. This allows color vision.
● The eye has approximately 6 million cones, mainly concentrated on the
fovea, a small area of the retina on which images are fixated.
19
19. Visual Perception
● Understanding the basic construction of the eye goes some way to explaining the
● physical mechanisms of vision but visual perception is more than this.
● The information received by the visual apparatus must be filtered and passed to
processing elements which allow us to recognize coherent scenes, disambiguate
relative distances and differentiate color.
● We will consider some of the capabilities and limitations of visual processing later, but
first we will look a little more closely at how we perceive size and depth, brightness
and color, each of which is crucial to the design of effective visual interfaces.
○ Perceiving size and depth
○ Perceiving brightness
○ Perceiving color
20
20. ● Imagine you are standing on a hilltop. Beside you on the summit you can see rocks,
sheep and a small tree. On the hillside is a farmhouse with outbuildings and farm
vehicles. Someone is on the track, walking toward the summit. Below in the valley is a
small market town.
● Even in describing such a scene the notions of size and distance predominate. Our
visual system is easily able to interpret the images which it receives to take
account of these things. We can identify similar objects regardless of the fact that
they appear to us to be of vastly different sizes. In fact, we can use this
information to judge distances.
21
Perceiving size and depth
21. ● So how does the eye perceive size, depth and relative distances? To understand
this, we must consider how the image appears on the retina. As we noted in the
previous section, reflected light from the object forms an upside-down image on
the retina.
● If we were to draw a line from the top of the object to a central point on the front
of the eye and a second line from the bottom of the object to the same point, the
visual angle of the object is the angle between these two lines. Visual angle is
affected by both the size of the object and its distance from the eye. Therefore if
two objects are at the same distance, the larger one will have the larger visual
angle.
22
Perceiving size and depth
23. ● A second aspect of visual perception is the perception of brightness. Brightness is
in fact a subjective reaction to levels of light.
● It is affected by luminance which is the amount of light emitted by an object.
● The luminance of an object is dependent on the amount of light falling on the
object’s surface and its reflective properties.
● Luminance is a physical characteristic and can be measured using a photometer.
Contrast is related to luminance: it is a function of the luminance of an object and
the luminance of its background.
24
Perceiving Brightness
24. ● A third factor that we need to consider is perception of color.
● Color is usually regarded as being made up of three components: hue, intensity and
saturation.
● Hue is determined by the spectral wavelength of the light. Blues have short
wavelengths, greens medium and reds long. Approximately 150 different hues can be
discriminated by the average person.
● Intensity is the brightness of the color, and saturation is the amount of whiteness in the
color.
● By varying these two, we can perceive in the region of 7 million different colors.
However, the number of colors that can be identified by an individual without training
is far fewer (in the region of 10).
25
Perceiving Color
26. ● In considering the way in which we perceive images we have already encountered
some of the capabilities and limitations of the human visual processing system.
● However, we have concentrated largely on low-level perception.
● Visual processing involves the transformation and interpretation of a complete
image, from the light that is thrown onto the retina.
● As we have already noted, our expectations affect the way an image is perceived.
For example, if we know that an object is a particular size, we will perceive it as
that size no matter how far it is from us.
27
Limitations and Capabilities of Visual Processing
31. ● The sense of hearing is often considered secondary to sight, but we tend to
underestimate the amount of information that we receive through our ears.
● Now, a small exercise – Just close your eyes for a while and tell me what you can
hear.
● ……
● The auditory system can convey a lot of information about our environment. But
how does it work?
32
Hearing
32. ● Hearing begins with vibrations in the air or sound waves.
● The ear receives these vibrations and transmits them, through various
stages, to the auditory nerves.
● The ear comprises three sections, commonly known as the
○ Outer ear,
○ Middle ear and
○ Inner ear.
33
Hearing – The human ear
33. ● The outer ear is the visible part of the ear.
● It has two parts: the pinna, which is the structure that is attached to the sides of
the head, and the auditory canal, along which sound waves are passed to the
middle ear.
● The outer ear serves two purposes.
● First, it protects the sensitive middle ear from damage.
● The auditory canal contains wax which prevents dust, dirt and over-inquisitive
insects reaching the middle ear.
● It also maintains the middle ear at a constant temperature.
● Secondly, the pinna and auditory canal serve to amplify some sounds.
34
Hearing – The human ear
34. ● The middle ear is a small cavity connected to the outer ear by the tympanic membrane,
or ear drum, and to the inner ear by the cochlea.
● Within the cavity are the ossicles, the smallest bones in the body.
● Sound waves pass along the auditory canal and vibrate the ear drum which in turn
vibrates the ossicles, which transmit the vibrations to the cochlea, and so into the inner
ear.
● This ‘relay’ is required because, unlike the air-filled outer and middle ears, the inner
ear is filled with a denser cochlean liquid.
● If passed directly from the air to the liquid, the transmission of the sound waves would
be poor.
● By transmitting them via the ossicles the sound waves are concentrated and amplified.
35
Hearing – The human ear
35. ● The waves are passed into the liquid-filled cochlea in the inner ear.
● Within the cochlea are delicate hair cells or cilia that bend because of the
vibrations in the cochlean liquid and release a chemical transmitter which causes
impulses in the auditory nerve.
36
Hearing – The human ear
36. ● Sound is changes or vibrations in air pressure.
● It has a number of characteristics which we can differentiate.
● Pitch is the frequency of the sound.
● A low frequency produces a low pitch, a high frequency, a high pitch.
● Loudness is proportional to the amplitude of the sound; the frequency remains
constant.
● Timbre relates to the type of the sound: sounds may have the same pitch and loudness
but be made by different instruments and so vary in timbre.
● We can also identify a sound’s location, since the two ears receive slightly different
sounds, owing to the time difference between the sound reaching the two ears and the
reduction in intensity caused by the sound waves reflecting from the head.
37
Hearing – Processing Sound
37. ● The third and last of the senses that we will consider is touch or haptic
perception.
● Although this sense is often viewed as less important than sight or hearing,
imagine life without it.
● Touch provides us with vital information about our environment.
● It tells us when we touch something hot or cold and can therefore act as a
warning.
● It also provides us with feedback when we attempt to lift an object, for example.
38
The touch
38. ● Consider the act of picking up a glass of water. If we could only see the glass and not
feel when our hand contacted it or feel its shape, the speed and accuracy of the action
would be reduced.
● This is the experience of users of certain virtual reality games: they can see the
computer-generated objects which they need to manipulate but they have no physical
sensation of touching them.
● Watching such users can be an informative and amusing experience!
● Touch is therefore an important means of feedback, and this is no less so in using
computer systems.
● Feeling buttons depress is an important part of the task of pressing the button.
● Also, we should be aware that, although for the average person, haptic perception is a
secondary source of information, for those whose other senses are impaired, it may be
vitally important.
39
The touch
39. ● The apparatus of touch differs from that of sight and hearing in that it is not localized.
● We receive stimuli through the skin. The skin contains three types of sensory receptor:
thermoreceptors respond to heat and cold, nociceptors respond to intense pressure,
heat and pain, and mechanoreceptors respond to pressure.
● It is the last of these that we are concerned with in relation to human–computer
interaction.
● There are two kinds of mechanoreceptor, which respond to different types of pressure.
● Rapidly adapting mechanoreceptors respond to immediate pressure as the skin is
indented.
● These receptors also react more quickly with increased pressure.
● However, they stop responding if continuous pressure is applied.
● Slowly adapting mechanoreceptors respond to continuously applied pressure.
40
The touch
40. ● A second aspect of haptic perception is kinesthesis - awareness of the position of
the body and limbs.
● This is due to receptors in the joints.
● Again, there are three types: rapidly adapting, which respond when a limb is
moved in a particular direction; slowly adapting, which respond to both
movement and static position; and positional receptors, which only respond when
a limb is in a static position.
● This perception affects both comfort and performance.
● For example, for a touch typist, awareness of the relative positions of the fingers
and feedback from the keyboard are very important.
41
The touch
41. ● A simple action such as hitting a button in response to a question involves several
processing stages.
● The stimulus (of the question) is received through the sensory receptors and
transmitted to the brain.
● The question is processed, and a valid response generated.
● The brain then tells the appropriate muscles to respond.
● Each of these stages takes time, which can be roughly divided into reaction time
and movement time.
● Movement time is dependent largely on the physical characteristics of the subjects: their age
and fitness, for example.
● Reaction time varies according to the sensory channel through which the stimulus is
received.
42
The Movement
42. ● A person can react to an auditory signal in approximately 150 ms, to a visual
signal in 200 ms and to pain in 700 ms.
● However, a combined signal will result in the quickest response.
● Factors such as skill or practice can reduce reaction time, and fatigue can increase
it.
● A second measure of motor skill is accuracy.
● One question that we should ask is whether speed of reaction results in reduced
accuracy.
● This is dependent on the task and the user.
43
The Movement
43. ● Studies of keyboard operators have shown that, although the faster operators
were up to twice as fast as the others, the slower ones made 10 times the errors.
● Speed and accuracy of movement are important considerations in the design of
interactive systems, primarily in terms of the time taken to move to a particular
● target on a screen.
● The target may be a button, a menu item or an icon, for example.
● The time taken to hit a target is a function of the size of the target and the
distance that must be moved.
● This is formalized in Fitts’ law.
Movement time = a + b log2(distance/size + 1)
● where a and b are empirically determined constants.
44
The Movement
44. ● Much of our everyday activity relies on memory.
● As well as storing all our factual knowledge, our memory contains our knowledge of
actions or procedures.
● It allows us to repeat actions, to use language, and to use new information received via
our senses.
● It also gives us our sense of identity, by preserving information from our past
experiences.
● But how does our memory work?
● How do we remember arbitrary lists such as those generated in the memory game?
● Why do some people remember more easily than others?
● And what happens when we forget?
45
The Human Memory
45. ● In order to answer questions such as these, we need to understand some of the
● capabilities and limitations of human memory.
● Memory is the second part of our model of the human as an information-
processing system.
● However, as we noted earlier, such a division is simplistic since, as we shall see,
memory is associated with each level of processing.
● Bearing this in mind, we will consider the way in which memory is structured and
the activities that take place within the system.
46
The Human Memory
46. ● It is generally agreed that there are three types of memory or memory function:
○ sensory buffers,
○ short-term memory or working memory, and
○ long-term memory.
47
The Human Memory
48. ● The sensory memories act as buffers for stimuli received through the senses.
● A sensory memory exists for each sensory channel:
○ iconic memory for visual stimuli,
○ echoic memory for aural stimuli and
○ haptic memory for touch.
● These memories are constantly overwritten by new information coming in on
these channels.
49
The Human Memory - Sensory memory
49. ● We can demonstrate the existence of iconic memory by moving a finger in front
of the eye.
● Can you see it in more than one place at once?
● This indicates a persistence of the image after the stimulus has been removed.
● A similar effect is noticed most vividly at firework displays where moving
sparklers leave a persistent image.
● Information remains in iconic memory very briefly, in the order of 0.5 seconds.
50
The Human Memory - Sensory memory
50. ● Similarly, the existence of echoic memory is evidenced by our ability to ascertain
the direction from which a sound originates.
● This is due to information being received by both ears.
● However, since this information is received at different times, we must store the
stimulus in the meantime.
● Echoic memory allows brief ‘play-back’ of information.
● Have you ever had someone ask you a question when you are reading?
● You ask them to repeat the question, only to realize that you know what was
asked after all.
● This experience, too, is evidence of the existence of echoic memory.
51
The Human Memory - Sensory memory
51. ● Information is passed from sensory memory into short-term memory by
attention, thereby filtering the stimuli to only those which are of interest at a
given time.
● Attention is the concentration of the mind on one out of several competing
stimuli or thoughts.
● We can focus our attention selectively, choosing to attend to one thing rather
than another.
● This is due to the limited capacity of our sensory and mental processes.
52
The Human Memory - Sensory memory
52. ● Short-term memory or working memory acts as a ‘scratch-pad’ for temporary recall of
information.
● It is used to store information which is only required fleetingly.
● For example, calculate the multiplication 35 × 6 in your head. The chances are that you
will have done this calculation in stages, perhaps 5 × 6 and then 30 × 6 and added the
results; or you may have used the fact that 6 = 2 × 3 and calculated 2 × 35 = 70 followed
by 3 × 70.
● To perform calculations such as this we need to store the intermediate stages for use
later or consider reading.
● In order to comprehend this sentence, you need to hold in your mind the beginning of
the sentence as you read the rest.
● Both of these tasks use short-term memory.
53
The Human Memory – Short-term Memory
53. ● Short-term memory can be accessed rapidly, in the order of 70 ms.
● However, it also decays rapidly, meaning that information can only be held there
temporarily, in the order of 200 ms.
● Short-term memory also has a limited capacity.
● There are two basic methods for measuring memory capacity.
● The first involves determining the length of a sequence which can be remembered
in order.
● The second allows items to be freely recalled in any order.
54
The Human Memory – Short-term Memory
54. ● Using the first measure, the average person can remember 7 ± 2 digits.
● This was established in experiments by Miller. Look at the following number
sequence:
265397620853
● Now write down as much of the sequence as you can remember. Did you get it all
right?
● If not, how many digits could you remember? If you remembered between five
and nine digits your digit span is average.
55
The Human Memory – Short-term Memory
55. ● Patterns can be useful as aids to memory. For example, most people would have
difficulty remembering the following sequence of chunks:
HEC ATR ANU PTH ETR EET
● However, if you notice that by moving the last character to the first position, you
get the statement ‘the cat ran up the tree’, the sequence is easy to recall.
56
The Human Memory – Short-term Memory
56. ● Patterns can be useful as aids to memory. For example, most people would have
difficulty remembering the following sequence of chunks:
HEC ATR ANU PTH ETR EET
● However, if you notice that by moving the last character to the first position, you
get the statement ‘the cat ran up the tree’, the sequence is easy to recall.
57
The Human Memory – Short-term Memory
58. ● If short-term memory is our working memory or ‘scratch-pad’, long-term
memory is our main resource.
● Here we store factual information, experiential knowledge, procedural rules
of behavior – in fact, everything that we ‘know’.
● It differs from short-term memory in several significant ways.
○ First, it has a huge, if not unlimited, capacity.
○ Secondly, it has a relatively slow access time of approximately a tenth of a second.
○ Thirdly, forgetting occurs more slowly in long-term memory, if at all.
● These distinctions provide further evidence of a memory structure with
several parts.
59
The Human Memory – Long-term Memory
59. ● Long-term memory is intended for the long-term storage of information.
● Information is placed there from working memory through rehearsal.
Unlike working memory there is little decay: long-term recall after
minutes is the same as that after hours or days.
60
The Human Memory – Long-term Memory
60. ● There are two types of long-term memory:
○ episodic memory and
○ semantic memory.
● Episodic memory represents our memory of events and experiences in a
serial form.
● It is from this memory that we can reconstruct the actual events that took
place at a given point in our lives.
● Semantic memory, on the other hand, is a structured record of facts,
concepts and skills that we have acquired.
● The information in semantic memory is derived from that in our episodic
memory, such that we can learn new facts or concepts from our
experiences.
61
The Human Memory – Long-term Memory Structure
61. ● Semantic memory is structured in some way to allow access to
information, representation of relationships between pieces of
information, and inference.
● One model for the way in which semantic memory is structured is as a
network.
● Items are associated to each other in classes and may inherit attributes
from parent classes.
● This model is known as a semantic network.
62
The Human Memory – Long-term Memory Structure
63. ● Information organized in data structures
● Slots in structure instantiated with values for instance of data
● Type–subtype relationships
64
The Human Memory – Models of LTM - Frames
DOG
Fixed
legs: 4
Default
diet: carniverous
sound: bark
Variable
size:
colour
COLLIE
Fixed
breed of: DOG
type: sheepdog
Default
size: 65 cm
Variable
colour
64. ● Model of stereotypical information required to interpret situation
● Script has elements that can be instantiated with values for context
65
The Human Memory – Models of LTM - Scripts
Script for a visit to the vet
Entry conditions: dog ill
vet open
owner has money
Result: dog better
owner poorer
vet richer
Props: examination table
medicine
instruments
Roles: vet examines
diagnoses
treats
owner brings dog in
pays
takes dog out
Scenes: arriving at reception
waiting in room
examination
paying
Tracks: dog needs medicine
dog needs operation
65. Representation of procedural knowledge.
Condition/action rules
if condition is matched
then use rule to determine action.
66
The Human Memory – Models of LTM - Production rules
66. ● Rehearsal
○ Information Moves From STM To LTM
● Total Time Hypothesis
○ Amount Retained Proportional To Rehearsal Time
● Distribution Of Practice Effect
○ Optimized By Spreading Learning Over Time
● Structure, Meaning And Familiarity
○ Information Easier To Remember
67
The Human Memory – LTM - Storage of information
67. Decay
○ Information is lost gradually but very slowly
Interference
○ New information replaces old: retroactive interference
○ Old may interfere with new: proactive inhibition
So may not forget at all memory is selective …
… Affected by emotion – can subconsciously `choose' to forget
68
The Human Memory – LTM - Forgetting
68. Recall
○ Information reproduced from memory can be assisted by cues, e.g.
categories, imagery
Recognition
○ Information gives knowledge that it has been seen before
○ Less complex than recall - information is cue
69
The Human Memory – LTM - retrieval
69. Recall
○ Information reproduced from memory can be assisted by cues, e.g.
categories, imagery
Recognition
○ Information gives knowledge that it has been seen before
○ Less complex than recall - information is cue
70
The Human Memory – LTM - retrieval
71. ● Deduction:
○ derive logically necessary conclusion from given premises.
e.g. If it is Friday, then she will go to work
It is Friday
Therefore, she will go to work.
● Logical conclusion not necessarily true:
e.g. If it is raining, then the ground is dry
It is raining
Therefore, the ground is dry
72
Deductive Reasoning
72. ● When truth and logical validity clash …
▪ E.g., Some people are babies
▪ Some babies cry
▪ Inference - Some people cry
● Correct?
● People bring world knowledge to bear
73
Deduction (cont.)
73. ● Induction:
○ Generalize from cases seen to cases unseen
e.g. All elephants we have seen have trunks
Therefore, all elephants have trunks.
● Unreliable:
○ Can only prove false not true
… But useful!
● Humans not good at using negative evidence
e.g., Wason's cards.
74
Inductive Reasoning
74. 75
Wason's cards
7 E 4 K
If a card has a vowel on one side, it has an even number on the other
Is this true?
How many cards do you need to turn over to find out?
…. and which cards?
75. • Reasoning from event to cause
e.g. Sam drives fast when drunk.
If I see Sam driving fast, assume drunk.
• Unreliable:
– can lead to false explanations
76
Abductive reasoning
76. • Process of finding solution to unfamiliar task using
knowledge.
• Several theories.
• Gestalt
– problem solving both productive and reproductive
– productive draws on insight and restructuring of problem
– attractive but not enough evidence to explain `insight' etc.
– move away from behaviourism and led towards information processing
theories
77
Problem solving
77. Problem space theory
– problem space comprises problem states
– problem solving involves generating states using legal operators
– heuristics may be employed to select operators
e.g. means-ends analysis
– operates within human information processing system
e.g. STM limits etc.
– largely applied to problem solving in well-defined areas
e.g. puzzles rather than knowledge intensive areas
78
Problem solving (cont.)
78. • Analogy
– analogical mapping:
• novel problems in new domain?
• use knowledge of similar problem from similar domain
– analogical mapping difficult if domains are semantically different
• Skill acquisition
– skilled activity characterized by chunking
• lot of information is chunked to optimize STM
– conceptual rather than superficial grouping of problems
– information is structured more effectively
79
Problem solving (cont.)
79. • Various theories of how emotion works
– James-Lange: emotion is our interpretation of a physiological
response to a stimuli
– Cannon: emotion is a psychological response to a stimuli
– Schacter-Singer: emotion is the result of our evaluation of our
physiological responses, in the light of the whole situation we are in
• Emotion clearly involves both cognitive and physical
responses to stimuli
80
Emotion
80. • The biological response to physical stimuli is called affect
• Affect influences how we respond to situations
– positive → creative problem solving
– negative → narrow thinking
“Negative affect can make it harder to do even easy tasks;
positive affect can make it easier to do difficult tasks”
(Donald Norman)
81
Emotion (cont.)
81. • Implications for interface design
– stress will increase the difficulty of problem solving
– relaxed users will be more forgiving of shortcomings in design
– aesthetically pleasing and rewarding interfaces will increase positive affect
82
Emotion (cont.)
82. • Long term
– Physical and intellectual abilities
• Short term
– Effect of stress or fatigue
• Changing
– Age
Ask yourself:
will design decision exclude section of user population?
83
Individual differences
83. • Some direct applications
– e.g. blue acuity is poor
blue should not be used for important detail
• However, correct application generally requires
understanding of context in psychology, and an
understanding of particular experimental conditions
84
Psychology and the Design of Interactive System
85. ● In order to understand how human, interact with computers, we need to
understand both parties in the interaction.
● The previous chapter explored aspects of human capabilities and
behavior of which we need to be aware in the context of human–
computer interaction.
● This chapter considers the computer and associated input–output devices
and investigates how the technology influences the nature of the
interaction and style of the interface.
86
The Computer
87. ● There is the computer ‘box’ itself, a keyboard, a mouse and a color
screen.
● The screen layout is shown alongside it.
● If we examine the interface, we can see how its various characteristics are
related to the devices used.
● Partly the diversity of devices reflects the fact that there are many
different types of data that may have to be entered into and obtained
from a system, and there are also many different types of user, each with
their own unique requirements.
88
The Computer – A typical Computer System
88. ● In the early days of computing, information was entered into the
computer in a large mass – batch data entry.
● There was minimal interaction with the machine: the user would simply
dump a pile of punched cards onto a reader, press the start button, and
then return a few hours later.
● This still continues today although now with pre-prepared electronic files
or possibly machine-read forms.
● It is clearly the most appropriate mode for certain kinds of application,
for example printing pay checks or entering the results from a
questionnaire.
89
The Computer – Levels of interaction – batch processing
89. ● With batch processing the interactions take place over hours or days.
● In contrast the typical desktop computer system has interactions taking
seconds or fractions of a second (or with slow web pages sometimes
minutes!).
● The field of Human–Computer Interaction largely grew due to this
change in interactive pace.
● It is easy to assume that faster means better, but some of the paper-based
technology
90
The Computer – Levels of interaction – batch processing
90. ● Computers are coming out of the box!
● Information appliances are putting internet access or dedicated systems
onto the fridge, microwave and washing machine: to automate shopping,
give you email in your kitchen or simply call for maintenance when
needed.
● We carry with us WAP phones and smartcards, have security systems that
monitor us and web cams that show our homes to the world.
91
The Computer – Richer interaction
92. ● The most obvious means of text entry is the plain keyboard,
but there are several variations on this: different keyboard
layouts, ‘chord’ keyboards that use combinations of fingers
to enter letters, and phone keypads.
● Handwriting and speech recognition offer more radical
alternatives.
93
The Computer – Text Entry Devices
93. ● The keyboard is still one of the most common input devices in use today.
● It is used for entering textual data and commands.
● The vast majority of keyboards have a standardized layout, and are
known by the first six letters of the top row of alphabetical keys,
QWERTY.
● There are alternative designs which have some advantages over the
QWERTY layout, but these have not been able to overcome the vast
technological inertia of the QWERTY keyboard.
94
The Computer – The alphanumeric keyboard
94. ● These alternatives are of two forms: 26 key layouts and chord keyboards.
● A 26 key layout rearranges the order of the alphabetic keys, putting the
most used letters under the strongest fingers, or adopting simpler
practices.
● In addition to QWERTY, we will discuss two 26 key layouts, alphabetic
and DVORAK, and chord keyboards.
95
The Computer – The alphanumeric keyboard
97. ● Chord keyboards are significantly different from normal alphanumeric
keyboards.
● Only a few keys, four or five, are used (see Figure 2.4) and letters are
produced by pressing one or more of the keys at once.
● For example, in the Micro writer, the pattern of multiple keypresses is
chosen to reflect the actual letter shape.
● Such keyboards have a number of advantages.
● They are extremely compact: simply reducing the size of a conventional
keyboard makes the keys too small and close together, with a
correspondingly large increase in the difficulty of using it.
98
The Computer – Chord keyboards
99. ● The learning time for the keyboard is supposed to be fairly short – of the
order of a few hours – but social resistance is still high.
● Moreover, they are capable of fast typing speeds in the hands (or rather
hand!) of a competent user.
● Chord keyboards can also be used where only one-handed operation is
possible, in cramped and confined conditions.
100
The Computer – Chord keyboards
100. ● With mobile phones being used for SMS text messaging and WAP, the
phone keypad has become an important form of text input.
● Unfortunately, a phone only has digits 0–9, not a full alphanumeric
keyboard.
● To overcome this for text input the numeric keys are usually pressed
several times following figure shows a typical mapping of digits to letters.
● For example, the 3 key has ‘def ’ on it.
● If you press the key once you get a ‘d’, if you press 3 twice you get an ‘e’,
if you press it three times you get an ‘f ’.
101
The Computer – Phone Pad and T9 Entry
102. ● The main number-to-letter mapping is standard, but punctuation and
accented letters differ between phones.
● Also there needs to be a way for the phone to distinguish, say, the ‘dd’
from ‘e’.
● On some phones you need to pause for a short period between successive
letters using the same key, for others you press an additional key (e.g. ‘#’).
103
The Computer – Phone Pad and T9 Entry
103. ● Handwriting is a common and familiar activity, and is therefore attractive
as a method of text entry.
● If we were able to write as we would when we use paper, but with the
computer taking this form of input and converting it to text, we can see
that it is an intuitive and simple way of interacting with the computer.
● However, there are a number of disadvantages with handwriting
recognition.
● Current technology is still fairly inaccurate and so makes a significant
number of mistakes in recognizing letters, though it has improved rapidly.
104
The Computer – Handwriting recognition
104. ● Moreover, individual differences in handwriting are enormous, and make the
recognition process even more difficult.
● The most significant information in handwriting is not in the letter shape
itself but in the stroke information – the way in which the letter is drawn.
● This means that devices which support handwriting recognition must capture
the stroke information, not just the final character shape.
● Because of this, online recognition is far easier than reading handwritten text
on paper.
● Further complications arise because letters within words are shaped and
often drawn very differently depending on the actual word; the context can
help determine the letter’s identity, but is often unable to provide enough
information.
105
The Computer – Handwriting recognition
105. ● Speech recognition is a promising area of text entry, but it has been
promising for a number of years and is still only used in very limited
situations.
● There is a natural enthusiasm for being able to talk to the machine and
have it responds to commands, since this form of interaction is one with
which we are very familiar.
● Successful recognition rates of over 97% have been reported, but since
this represents one letter in error in approximately every 30, or one
spelling mistake every six or so words, this is Stoll unacceptable (sic)!
● Note also that this performance is usually quoted only for a restricted
vocabulary of command words.
106
The Computer – Speech recognition
106. positioning, pointing and drawing
mouse, touchpad
trackballs, joysticks etc.
touch screens, tablets
eyegaze, cursors
107
107. the Mouse
● Handheld pointing device
○ very common
○ easy to use
● Two characteristics
○ planar movement
○ buttons
(usually from 1 to 3 buttons on top, used for making a selection, indicating an option, or to initiate
drawing etc.)
108
108. the mouse (ctd)
Mouse located on desktop
○ requires physical space
○ no arm fatigue
Relative movement only is detectable.
Movement of mouse moves screen cursor
Screen cursor oriented in (x, y) plane,
mouse movement in (x, z) plane …
… an indirect manipulation device.
○ device itself doesn’t obscure screen, is accurate and fast.
○ hand-eye coordination problems for novice users
109
109. How does it work?
Two methods for detecting motion
● Mechanical
○ Ball on underside of mouse turns as mouse is moved
○ Rotates orthogonal potentiometers
○ Can be used on almost any flat surface
● Optical
○ light emitting diode on underside of mouse
○ may use special grid-like pad or just on desk
○ less susceptible to dust and dirt
○ detects fluctuating alterations in reflected light intensity to calculate relative motion in (x, z) plane
110
110. Even by foot …
● some experiments with the footmouse
○ controlling mouse movement with feet …
○ not very common :-)
● but foot controls are common elsewhere:
○ car pedals
○ sewing machine speed control
○ organ and piano pedals
111
111. Touchpad
● small touch sensitive tablets
● ‘stroke’ to move mouse pointer
● used mainly in laptop computers
● good ‘acceleration’ settings important
○ fast stroke
■ lots of pixels per inch moved
■ initial movement to the target
○ slow stroke
■ less pixels per inch
■ for accurate positioning
112
112. Trackball and thumbwheels
Trackball
○ ball is rotated inside static housing
■ like an upsdie down mouse!
○ relative motion moves cursor
○ indirect device, fairly accurate
○ separate buttons for picking
○ very fast for gaming
○ used in some portable and notebook computers.
Thumbwheels …
○ for accurate CAD – two dials for X-Y cursor position
○ for fast scrolling – single dial on mouse
113
113. Joystick and keyboard nipple
Joystick
○ indirect
pressure of stick = velocity of movement
○ buttons for selection
on top or on front like a trigger
○ often used for computer games
aircraft controls and 3D navigation
Keyboard nipple
○ for laptop computers
○ miniature joystick in the middle of the keyboard
114
114. Touch-sensitive screen
● Detect the presence of finger or stylus on the screen.
○ works by interrupting matrix of light beams, capacitance changes or ultrasonic
reflections
○ direct pointing device
● Advantages:
○ fast, and requires no specialised pointer
○ good for menu selection
○ suitable for use in hostile environment: clean and safe from damage.
● Disadvantages:
○ finger can mark screen
○ imprecise (finger is a fairly blunt instrument!)
■ difficult to select small regions or perform accurate drawing
○ lifting arm can be tiring
115
115. Stylus and light pen
Stylus
○ small pen-like pointer to draw directly on screen
○ may use touch sensitive surface or magnetic detection
○ used in PDA, tablets PCs and drawing tables
Light Pen
○ now rarely used
○ uses light from screen to detect location
BOTH …
○ very direct and obvious to use
○ but can obscure screen
116
116. Digitizing tablet
● Mouse like-device with cross hairs
● used on special surface
- rather like stylus
● very accurate
- used for digitizing maps
117
117. Eyegaze
● control interface by eye gaze direction
○ e.g. look at a menu item to select it
● uses laser beam reflected off retina
○ … a very low power laser!
● mainly used for evaluation (ch x)
● potential for hands-free control
● high accuracy requires headset
● cheaper and lower accuracy devices available
sit under the screen like a small webcam
118
118. Cursor keys
● Four keys (up, down, left, right) on keyboard.
● Very, very cheap, but slow.
● Useful for not much more than basic motion for text-editing tasks.
● No standardised layout, but inverted “T”, most common
119
119. Discrete positioning controls
● in phones, TV controls etc.
○ cursor pads or mini-joysticks
○ discrete left-right, up-down
○ mainly for menu selection
120
122. resolution and colour depth
● Resolution … used (inconsistently) for
○ number of pixels on screen (width x height)
■ e.g. SVGA 1024 x 768, PDA perhaps 240x400
○ density of pixels (in pixels or dots per inch - dpi)
■ typically between 72 and 96 dpi
● Aspect ratio
○ ration between width and height
○ 4:3 for most screens, 16:9 for wide-screen TV
● Colour depth:
○ how many different colours for each pixel?
○ black/white or greys only
○ 256 from a pallete
○ 8 bits each for red/green/blue = millions of colours
123
123. anti-aliasing
Jaggies
○ diagonal lines that have discontinuities in due to horizontal
raster scan process.
Anti-aliasing
○ softens edges by using shades of line colour
○ also used for text
124
124. Cathode ray tube
● Stream of electrons emitted from electron gun, focused and directed by magnetic fields, hit
phosphor-coated screen which glows
● used in TVs and computer monitors
125
125. Health hazards of CRT !
● X-rays: largely absorbed by screen (but not at rear!)
● UV- and IR-radiation from phosphors: insignificant levels
● Radio frequency emissions, plus ultrasound (~16kHz)
● Electrostatic field - leaks out through tube to user. Intensity dependant on distance and humidity.
Can cause rashes.
● Electromagnetic fields (50Hz-0.5MHz). Create induction currents in conductive materials,
including the human body. Two types of effects attributed to this: visual system - high incidence
of cataracts in VDU operators, and concern over reproductive disorders (miscarriages and birth
defects).
126
126. Health hints …
● do not sit too close to the screen
● do not use very small fonts
● do not look at the screen for long periods without a break
● do not place the screen directly in front of a bright window
● work in well-lit surroundings
Take extra care if pregnant.
but also posture, ergonomics, stress
127
127. Liquid crystal displays
● Smaller, lighter, and … no radiation problems.
● Found on PDAs, portables and notebooks,
… and increasingly on desktop and even for home TV
● also used in dedicted displays:
digital watches, mobile phones, HiFi controls
● How it works …
○ Top plate transparent and polarised, bottom plate reflecting.
○ Light passes through top plate and crystal, and reflects back to eye.
○ Voltage applied to crystal changes polarisation and hence colour
○ N.B. light reflected not emitted => less eye strain
128
128. special displays
Random Scan (Directed-beam refresh, vector display)
○ draw the lines to be displayed directly
○ no jaggies
○ lines need to be constantly redrawn
○ rarely used except in special instruments
Direct view storage tube (DVST)
○ Similar to random scan but persistent => no flicker
○ Can be incrementally updated but not selectively erased
○ Used in analogue storage oscilloscopes
129
129. large displays
● used for meetings, lectures, etc.
● technology
plasma – usually wide screen
video walls – lots of small screens together
projected – RGB lights or LCD projector
– hand/body obscures screen
– may be solved by 2 projectors + clever software
back-projected
– frosted glass + projector behind
130
130. situated displays
● displays in ‘public’ places
○ large or small
○ very public or for small group
● display only
○ for information relevant to location
● or interactive
○ use stylus, touch sensitive screem
● in all cases … the location matters
○ meaning of information or interaction is related to the location
131
131. Hermes a situated display
small displays
beside
office doors
handwritten
notes left
using stylus
office owner
reads notes
using web interface
132
132. Digital paper
● what?
○ thin flexible sheets
○ updated electronically
○ but retain display
● how?
○ small spheres turned
○ or channels with coloured liquid
and contrasting spheres
○ rapidly developing area
appearance
cross
section
133
134. Short-term Memory - RAM
● Random access memory (RAM)
○ on silicon chips
○ 100 nano-second access time
○ usually volatile (lose information if power turned off)
○ data transferred at around 100 Mbytes/sec
● Some non-volatile RAM used to store basic set-up information
● Typical desktop computers:
64 to 256 Mbytes RAM
135
135. Long-term Memory - disks
● magnetic disks
○ floppy disks store around 1.4 Mbytes
○ hard disks typically 40 Gbytes to 100s of Gbytes
access time ~10ms, transfer rate 100kbytes/s
● optical disks
○ use lasers to read and sometimes write
○ more robust that magnetic media
○ CD-ROM
- same technology as home audio, ~ 600 Gbytes
○ DVD - for AV applications, or very large files
136
136. Blurring boundaries
● PDAs
○ often use RAM for their main memory
● Flash-Memory
○ used in PDAs, cameras etc.
○ silicon based but persistent
○ plug-in USB devices for data transfer
137
137. speed and capacity
● what do the numbers mean?
● some sizes (all uncompressed) …
○ this book, text only ~ 320,000 words, 2Mb
○ the Bible ~ 4.5 Mbytes
○ scanned page ~ 128 Mbytes
■ (11x8 inches, 1200 dpi, 8bit greyscale)
○ digital photo ~ 10 Mbytes
■ (2–4 mega pixels, 24 bit colour)
○ video ~ 10 Mbytes per second
■ (512x512, 12 bit colour, 25 frames per sec)
138
138. virtual memory
● Problem:
○ running lots of programs + each program large
○ not enough RAM
● Solution - Virtual memory :
○ store some programs temporarily on disk
○ makes RAM appear bigger
● But … swopping
○ program on disk needs to run again
○ copied from disk to RAM
○ s l o w s t h i n g s d o w n
139
139. Compression
● reduce amount of storage required
● lossless
○ recover exact text or image – e.g. GIF, ZIP
○ look for commonalities:
■ text: AAAAAAAAAABBBBBCCCCCCCC 10A5B8C
■ video: compare successive frames and store change
● lossy
○ recover something like original – e.g. JPEG, MP3
○ exploit perception
■ JPEG: lose rapid changes and some colour
■ MP3: reduce accuracy of drowned out notes
140
140. Storage formats - text
● ASCII - 7-bit binary code for to each letter and character
● UTF-8 - 8-bit encoding of 16 bit character set
● RTF (rich text format)
- text plus formatting and layout information
● SGML (standardized generalised markup language)
- documents regarded as structured objects
● XML (extended markup language)
- simpler version of SGML for web applications
141
141. Storage formats - media
● Images:
○ many storage formats :
(PostScript, GIFF, JPEG, TIFF, PICT, etc.)
○ plus different compression techniques
(to reduce their storage requirements)
● Audio/Video
○ again lots of formats :
(QuickTime, MPEG, WAV, etc.)
○ compression even more important
○ also ‘streaming’ formats for network delivery
142
142. methods of access
● large information store
○ long time to search => use index
○ what you index -> what you can access
● simple index needs exact match
● forgiving systems:
○ Xerox “do what I mean” (DWIM)
○ SOUNDEX – McCloud ~ MacCleod
● access without structure …
○ free text indexing (all the words in a document)
○ needs lots of space!!
143
144. Finite processing speed
● Designers tend to assume fast processors, and make interfaces more and
more complicated
● But problems occur, because processing cannot keep up with all the tasks
it needs to do
○ cursor overshooting because system has buffered keypresses
○ icon wars - user clicks on icon, nothing happens, clicks on another,
then system responds and windows fly everywhere
● Also problems if system is too fast - e.g. help screens may scroll through
text much too rapidly to be read
145
145. Moore’s law
● computers get faster and faster!
● 1965 …
○ Gordon Moore, co-founder of Intel, noticed a pattern
○ processor speed doubles every 18 months
○ PC … 1987: 1.5 Mhz, 2002: 1.5 GHz
● similar pattern for memory
○ but doubles every 12 months!!
○ hard disk … 1991: 20Mbyte : 2002: 30 Gbyte
● baby born today
○ record all sound and vision
○ by 70 all life’s memories stored in a grain of dust!
146
146. The myth of the infinitely fast machine
● implicit assumption … no delays
an infinitely fast machine
● what is good design for real machines?
● good example … the telephone :
○ type keys too fast
○ hear tones as numbers sent down the line
○ actually an accident of implementation
○ emulate in deisgn
147
147. Limitations on interactive performance
Computation bound
○ Computation takes ages, causing frustration for the user
Storage channel bound
○ Bottleneck in transference of data from disk to memory
Graphics bound
○ Common bottleneck: updating displays requires a lot of effort - sometimes
helped by adding a graphics co-processor optimised to take on the burden
Network capacity
○ Many computers networked - shared resources and files, access to printers
etc. - but interactive performance can be reduced by slow network speed
148
148. Networked computing
Networks allow access to …
○ large memory and processing
○ other people (groupware, email)
○ shared resources – esp. the web
Issues
○ network delays – slow feedback
○ conflicts - many people update data
○ unpredictability
149
149. The internet
● history …
○ 1969: DARPANET US DoD, 4 sites
○ 1971: 23; 1984: 1000; 1989: 10000
● common language (protocols):
○ TCP – Transmission Control protocol
■ lower level, packets (like letters) between machines
○ IP – Internet Protocol
■ reliable channel (like phone call) between programs on machines
○ email, HTTP, all build on top of these
150
151. The Interaction
● Interaction models
○ Translations between user and system
● Ergonomics
○ Physical characteristics of interaction
● Interaction styles
○ The nature of user/system dialog
● Context
○ Social, organizational, motivational
152
154. Some terms of interaction
Domain – The area of work under study
E.g., Graphic design
Goal – What you want to achieve
E.g., Create a solid red triangle
Task – How you go about doing it
– Ultimately in terms of operations or actions
E.g., … Select fill tool, click over triangle
Note …
○ Traditional interaction …
○ Use of terms differs a lot especially task/goal !!!
155
155. Donald Norman’s model
● Seven stages
○ User establishes the goal
○ Formulates intention
○ Specifies actions at interface
○ Executes action
○ Perceives system state
○ Interprets system state
○ Evaluates system state with respect to goal
● Norman’s model concentrates on user’s view of the interface
156
156. Execution/evaluation loop
■ User establishes the goal
■ Formulates intention
■ Specifies actions at interface
■ Executes action
■ Perceives system state
■ Interprets system state
■ Evaluates system state with respect to goal
system
evaluation
execution
goal
157
157. ■ User establishes the goal
■ Formulates intention
■ Specifies actions at interface
■ Executes action
■ Perceives system state
■ Interprets system state
■ Evaluates system state with respect to goal
System
Evaluation
Execution
Goal
Execution/evaluation loop
158
158. ■ User establishes the goal
■ Formulates intention
■ Specifies actions at interface
■ Executes action
■ Perceives system state
■ Interprets system state
■ Evaluates system state with respect to goal
System
Evaluation
Execution
Goal
Execution/evaluation loop
159
159. ■ User establishes the goal
■ Formulates intention
■ Specifies actions at interface
■ Executes action
■ Perceives system state
■ Interprets system state
■ Evaluates system state with respect to goal
System
Evaluation
Execution
Goal
Execution/evaluation loop
160
160. Using Norman’s model
Some systems are harder to use than others
Gulf of Execution
User’s formulation of actions
≠ actions allowed by the system
Gulf of Evaluation
User’s expectation of changed system state
≠ actual presentation of this state
161
161. Human error - slips and mistakes
Slip
Understand system and goal
Correct formulation of action
Incorrect action
Mistake
May not even have right goal!
Fixing things?
Slip – better interface design
Mistake – better understanding of system
162
162. Abowd and Beale framework
extension of Norman…
their interaction framework has 4 parts
○ user
○ input
○ system
○ output
each has its own unique language
interaction translation between languages
problems in interaction = problems in translation
S
core
U
task
O
output
I
input
163
163. Using Abowd & Beale’s model
user intentions
→ translated into actions at the interface
→ translated into alterations of system state
→ reflected in the output display
→ interpreted by the user
general framework for understanding interaction
○ not restricted to electronic computer systems
○ identifies all major components involved in interaction
○ allows comparative assessment of systems
○ an abstraction
164
165. Ergonomics
● Study of the physical characteristics of interaction
● Also known as human factors – but this can also be used to mean much of HCI!
● Ergonomics good at defining standards and guidelines for constraining the way
we design certain aspects of systems
166
166. Ergonomics - examples
● arrangement of controls and displays
e.g. controls grouped according to function or frequency of use, or sequentially
● surrounding environment
e.g. seating arrangements adaptable to cope with all sizes of user
● health issues
e.g. physical position, environmental conditions (temperature, humidity), lighting, noise,
● use of colour
e.g. use of red for warning, green for okay,
awareness of colour-blindness etc.
167
167. Industrial interfaces
Office interface vs. industrial interface?
Context matters!
office industrial
type of data textual numeric
rate of change slow fast
environment clean dirty
… the oil soaked mouse!
168
168. Glass interfaces ?
● industrial interface:
○ traditional … dials and knobs
○ now … screens and keypads
● glass interface
+ cheaper, more flexible,
multiple representations,
precise values
○ not physically located,
loss of context,
complex interfaces
● may need both
Vessel B Temp
0 100 200
113
multiple representations
of same information
169
169. Indirect manipulation
● office– direct manipulation
○ user interacts
with artificial world
● industrial – indirect manipulation
○ user interacts
with real world
through interface
● issues ..
○ feedback
○ delays
system
interface plant
immediat
e
feedbac
k
instruments
170
171. Common interaction styles
● command line interface
● menus
● natural language
● question/answer and query dialogue
● form-fills and spreadsheets
● WIMP
● point and click
● three–dimensional interfaces
172
172. Command line interface
● Way of expressing instructions to the computer directly
○ function keys, single characters, short abbreviations, whole words, or a combination
● suitable for repetitive tasks
● better for expert users than novices
● offers direct access to system functionality
● command names/abbreviations should be meaningful!
Typical example: the Unix system
173
173. Menus
● Set of options displayed on the screen
● Options visible
○ less recall - easier to use
○ rely on recognition so names should be meaningful
● Selection by:
○ numbers, letters, arrow keys, mouse
○ combination (e.g. mouse plus accelerators)
● Often options hierarchically grouped
○ sensible grouping is needed
● Restricted form of full WIMP system
174
174. Natural language
● Familiar to user
● speech recognition or typed natural language
● Problems
○ vague
○ ambiguous
○ hard to do well!
● Solutions
○ try to understand a subset
○ pick on key words
175
175. Query interfaces
● Question/answer interfaces
○ user led through interaction via series of questions
○ suitable for novice users but restricted functionality
○ often used in information systems
● Query languages (e.g. SQL)
○ used to retrieve information from database
○ requires understanding of database structure and language syntax, hence requires some
expertise
176
176. Form-fills
● Primarily for data entry or data retrieval
● Screen like paper form.
● Data put in relevant place
● Requires
○ good design
○ obvious correction
facilities
177
177. Spreadsheets
● first spreadsheet VISICALC, followed by Lotus 1-2-3
MS Excel most common today
● sophisticated variation of form-filling.
○ grid of cells contain a value or a formula
○ formula can involve values of other cells
e.g. sum of all cells in this column
○ user can enter and alter data spreadsheet maintains consistency
178
178. WIMP Interface
Windows
Icons
Menus
Pointers
… or windows, icons, mice, and pull-down menus!
● default style for majority of interactive computer systems, especially PCs and
desktop machines
179
179. Point and click interfaces
● used in ..
○ multimedia
○ web browsers
○ hypertext
● just click something!
○ icons, text links or location on map
● minimal typing
180
180. Three dimensional interfaces
● virtual reality
● ‘ordinary’ window systems
○ highlighting
○ visual affordance
○ indiscriminate use
just confusing!
● 3D workspaces
○ use for extra virtual space
○ light and occlusion give depth
○ distance effects
flat buttons …
… or sculptured
click me!
181
181. elements of the wimp interface
windows, icons, menus, pointers
+++
buttons, toolbars,
palettes, dialog boxes
182
182. Windows
● Areas of the screen that behave as if they were independent
○ can contain text or graphics
○ can be moved or resized
○ can overlap and obscure each other, or can be laid out next to one another (tiled)
● scrollbars
○ allow the user to move the contents of the window up and down or from side to side
● title bars
○ describe the name of the window
183
183. Icons
● small picture or image
● represents some object in the interface
○ often a window or action
● windows can be closed down (iconised)
○ small representation fi many accessible windows
● icons can be many and various
○ highly stylized
○ realistic representations.
184
184. Pointers
● important component
○ WIMP style relies on pointing and selecting things
● uses mouse, trackpad, joystick, trackball, cursor keys or keyboard shortcuts
● wide variety of graphical images
185
185. Menus
● Choice of operations or services offered on the screen
● Required option selected with pointer
problem – take a lot of screen space
solution – pop-up: menu appears when needed
File Edit Options
Typewriter
Screen
Times
Font
186
186. Kinds of Menus
● Menu Bar at top of screen (normally), menu drags down
○ pull-down menu - mouse hold and drag down menu
○ drop-down menu - mouse click reveals menu
○ fall-down menus - mouse just moves over bar!
● Contextual menu appears where you are
○ pop-up menus - actions for selected object
○ pie menus - arranged in a circle
■ easier to select item (larger target area)
■ quicker (same distance to any option)
… but not widely used!
187
187. Menus extras
● Cascading menus
○ hierarchical menu structure
○ menu selection opens new menu
○ and so in ad infinitum
● Keyboard accelerators
○ key combinations - same effect as menu item
○ two kinds
■ active when menu open – usually first letter
■ active when menu closed – usually Ctrl + letter
usually different !!!
188
188. Menus design issues
● which kind to use
● what to include in menus at all
● words to use (action or description)
● how to group items
● choice of keyboard accelerators
189
189. Buttons
● individual and isolated regions within a display that can be selected to invoke an
action
● Special kinds
○ radio buttons
– set of mutually exclusive choices
○ check boxes
– set of non-exclusive choices
190
190. Toolbars
● long lines of icons …
… but what do they do?
● fast access to common actions
● often customizable:
○ choose which toolbars to see
○ choose what options are on it
191
191. Palettes and tear-off menus
● Problem
menu not there when you want it
● Solution
palettes – little windows of actions
○ shown/hidden via menu option
e.g. available shapes in drawing package
tear-off and pin-up menus
○ menu ‘tears off’ to become palette
192
192. Dialogue boxes
● information windows that pop up to inform of an important event or request
information.
e.g: when saving a file, a dialogue box is displayed to allow the user to specify the filename and
location. Once the file is saved, the box disappears.
193
194. Speech–driven interfaces
● rapidly improving …
… but still inaccurate
● how to have robust dialogue?
… interaction of course!
e.g. airline reservation:
reliable “yes” and “no”
+ system reflects back its understanding
“you want a ticket from New York to Boston?”
195
195. Look and … feel
● WIMP systems have the same elements:
windows, icons., menus, pointers, buttons, etc.
● but different window systems
… behave differently
e.g. MacOS vs Windows menus
appearance + behaviour = look and feel
196
197. why study paradigms
Concerns
○ how can an interactive system be developed to ensure its usability?
○ how can the usability of an interactive system be demonstrated or measured?
History of interactive system design provides paradigms for usable designs
198. What are Paradigms
● Predominant theoretical frameworks or scientific world views
○ e.g., Aristotelian, Newtonian, Einsteinian (relativistic) paradigms in physics
● Understanding HCI history is largely about understanding a series of paradigm
shifts
○ Not all listed here are necessarily “paradigm” shifts, but are at least candidates
○ History will judge which are true shifts
199. Paradigms of interaction
New computing technologies arrive,
creating a new perception of the
human—computer relationship.
We can trace some of these shifts in
the history of interactive technologies.
202. Example Paradigm Shifts
● Batch processing
● Timesharing
● Networking
???
@#$% !
Community computing
203. Example Paradigm Shifts
● Batch processing
● Timesharing
● Networking
● Graphical displays
% foo.bar
ABORT
dumby!!!
C…P… filename
dot star… or was
it R…M?
Move this file here,
and copy this to there.
Direct manipulation
204. Example Paradigm Shifts
● Batch processing
● Timesharing
● Networking
● Graphical display
● Microprocessor
Personal computing
205. Example Paradigm Shifts
● Batch processing
● Timesharing
● Networking
● Graphical display
● Microprocessor
● WWW
Global information
206. Example Paradigm Shifts
● A symbiosis of physical and
electronic worlds in service
of everyday activities.
• Batch processing
• Timesharing
• Networking
• Graphical display
• Microprocessor
• WWW
• Ubiquitous
Computing
207. Time-sharing
● 1940s and 1950s – explosive technological growth
● 1960s – need to channel the power
● J.C.R. Licklider at ARPA
● single computer supporting multiple users
208. Video Display Units
● more suitable medium than paper
● 1962 – Sutherland's Sketchpad
● computers for visualizing and manipulating data
● one person's contribution could drastically change the history of computing
209. Programming toolkits
● Engelbart at Stanford Research Institute
● 1963 – augmenting man's intellect
● 1968 NLS/Augment system demonstration
● the right programming toolkit provides building blocks to producing complex
interactive systems
210. Personal computing
● 1970s – Papert's LOGO language for simple graphics programming by children
● A system is more powerful as it becomes easier to user
● Future of computing in small, powerful machines dedicated to the individual
● Kay at Xerox PARC – the Dynabook as the ultimate personal computer
211. Window systems and the WIMP interface
● humans can pursue more than one task at a time
● windows used for dialogue partitioning, to “change the topic”
● 1981 – Xerox Star first commercial windowing system
● windows, icons, menus and pointers now familiar interaction mechanisms
212. Metaphor
● relating computing to other real-world activity is effective teaching technique
○ LOGO's turtle dragging its tail
○ file management on an office desktop
○ word processing as typing
○ financial analysis on spreadsheets
○ virtual reality – user inside the metaphor
● Problems
○ some tasks do not fit into a given metaphor
○ cultural bias
213. Direct manipulation
● 1982 – Shneiderman describes appeal of graphically-based interaction
○ visibility of objects
○ incremental action and rapid feedback
○ reversibility encourages exploration
○ syntactic correctness of all actions
○ replace language with action
● 1984 – Apple Macintosh
● the model-world metaphor
● What You See Is What You Get (WYSIWYG)
214. Language versus Action
● actions do not always speak louder than words!
● DM – interface replaces underlying system
● language paradigm
● interface as mediator
● interface acts as intelligent agent
● programming by example is both action and language
215. Hypertext
● 1945 – Vannevar Bush and the memex
● key to success in managing explosion of information
● mid 1960s – Nelson describes hypertext as non-linear browsing structure
● hypermedia and multimedia
● Nelson's Xanadu project still a dream today
216. Multimodality
● a mode is a human communication channel
● emphasis on simultaneous use of multiple channels for input and output
217. Computer Supported Cooperative Work (CSCW)
● CSCW removes bias of single user / single computer system
● Can no longer neglect the social aspects
● Electronic mail is most prominent success
218. The World Wide Web
● Hypertext, as originally realized, was a closed system
● Simple, universal protocols (e.g. HTTP) and mark-up languages (e.g. HTML)
made publishing and accessing easy
● Critical mass of users lead to a complete transformation of our information
economy.
219. Agent-based Interfaces
● Original interfaces
○ Commands given to computer
○ Language-based
● Direct Manipulation/WIMP
○ Commands performed on “world” representation
○ Action based
● Agents - return to language by instilling proactivity and “intelligence” in
command processor
○ Avatars, natural language processing
220. Ubiquitous Computing
“The most profound technologies are those that disappear.”
Mark Weiser, 1991
Late 1980’s: computer was very apparent
How to make it disappear?
○ Shrink and embed/distribute it in the physical world
○ Design interactions that don’t demand our intention
221. Sensor-based and Context-aware Interaction
● Humans are good at recognizing the “context” of a situation and reacting
appropriately
● Automatically sensing physical phenomena (e.g., light, temp, location, identity)
becoming easier
● How can we go from sensed physical measures to interactions that behave as if
made “aware” of the surroundings?
222. Initiative
● who has the initiative?
old question–answer – computer
WIMP interface – user
● WIMP exceptions …
pre-emptive parts of the interface
● modal dialog boxes
○ come and won’t go away!
○ good for errors, essential steps
○ but use with care
223
223. Error and repair
can’t always avoid errors …
… but we can put them right
make it easy to detect errors
… then the user can repair them
hello, this is the Go Faster booking system
what would you like?
(user) I want to fly from New York to London
you want a ticket from New York to Boston
(user) no
sorry, please confirm one at a time
do you want to fly from New York
(user) yes
… … …
224
224. Context
Interaction affected by social and organizational context
● other people
○ desire to impress, competition, fear of failure
● motivation
○ fear, allegiance, ambition, self-satisfaction
● inadequate systems
○ cause frustration and lack of motivation
225
