1. Introduction to Human
Computer Interaction
Preeti Mishra
Course Instructor

2. What is HCI
 Short for human-computer Interaction,
 This discipline is concerned with the study, design,
construction and implementation of human-centric interactive
computer systems.
 Building specific functionality into computers and the long-term
effects that systems will have on humans.
 concerned with the application design and engineering of the
human interfaces

3. Various Perspectives
 sociology and anthropology are concerned with the way that
human systems and technical systems mutually adapt to each
other;
 ergonomics is concerned with the safety of computer systems
and the safe limits of human cognition and sensation;
 psychology is concerned with the cognitive processes of
humans and the behaviour of users;
 linguistics is concerned with the development of human and
machine languages and the relationship between the two.

4. Definition
 A discipline concerned with the design, evaluation and
implementation of interactive computing systems for human
use and with the study of major phenomena surrounding
them.”

5. 8 Guidelines for creating good human
computer interaction
 1 Strive for consistency.
Consistent sequences of actions should be required in similar
situations; identical terminology should be used in prompts,
menus, and help screens; and consistent commands should
be employed throughout.
 2 Enable frequent users to use shortcuts.
As the frequency of use increases, so do the user's desires to
reduce the number of interactions and to increase the pace of
interaction. Abbreviations, function keys, hidden commands,
and macro facilities are very helpful to an expert user.

6. Cont..
 3 Offer informative feedback.
For every operator action, there should be some system feedback. For
frequent and minor actions, the response can be modest, while for
infrequent and major actions, the response should be more substantial.
 4 Design dialog to yield closure.
Sequences of actions should be organized into groups with a beginning,
middle, and end. The informative feedback at the completion of a group of
actions gives the operators the satisfaction of accomplishment, a sense of
relief, the signal to drop contingency plans and options from their minds,
and an indication that the way is clear to prepare for the next group of
actions.

7. Cont..
 5 Offer simple error handling.
As much as possible, design the system so the user cannot
make a serious error. If an error is made, the system should
be able to detect the error and offer simple, comprehensible
mechanisms for handling the error.
 6 Permit easy reversal of actions.
This feature relieves anxiety, since the user knows that errors
can be undone; it thus encourages exploration of unfamiliar
options. The units of reversibility may be a single action, a
data entry, or a complete group of actions.

8. Cont..
 7 Support internal locus of control.
Experienced operators strongly desire the sense that they are in
charge of the system and that the system responds to their actions.
Design the system to make users the initiators of actions rather than
the responders.
 8 Reduce short-term memory load.
The limitation of human information processing in short-term memory
requires that displays be kept simple, multiple page displays be
consolidated, window-motion frequency be reduced, and sufficient
training time be allotted for codes, mnemonics, and sequences of
actions.

9. Importance of Good
Interface.

10. Importance..
 System users often judge a system by its
interface rather than its functionality
 Good User Interface Design can be the difference
between product acceptance and rejection in the
marketplace
 If end-users feel it is not easy to learn, not easy to
use, or too cumbersome, an otherwise excellent
product could fail.

11. Importance..
 Big Improvements can establish new products,
companies, markets …
 Biggest enemy of good interface design is time

12. Guidelines
 UI Designers should have the ability to adjust an
application’s layout to the “mental map” users
consult while working with it.
 This “map” corresponds to
 the user’s expectations,
 past experiences and
 overall learning style;
 Goal is to make complex information easy to
understand.

13. User Centered Design

14. User Interface Design Process

15. Design Principles
Principle Description
User Familiarity Interface should use terms familiar to users
Consistency Comparable operations should be started
the same way
Minimal Surprise Users should never be surprised
Recoverability Users should be able to recover from their
errors
User Guidance Meaningful feedback, context-sensitive help
User Diversity Should provide for different types of user

16. To accomplish these design
principles there exists various
theories…

17. Nielsen’s Ten Usability
Heuristics
 Visibility of system status
 Match between system and the real world
 User control and freedom
 Consistency and standards
 Error prevention
 Recognition rather than recall
 Flexibility and efficiency of use
 Aesthetic and minimalist design
 Help users recognize, diagnose, and recover from errors
 Help and documentation

18. Galitz’s Heuristics (Table 14.2)
 Automate unwanted workload
 Reduce uncertainty
 Fuse data
 Present new info with meaningful aid to interpretation
 Use names that are conceptually related to functions
 Group data in consistently meaningful ways to reduce search
time
 Limit data-driven tasks
 Include in displays only info needed by user at a given time
 Provide multiple coding of data where appropriate
 Practice judicious redundancy

19. Galitz’s WWW Heuristics
 Speak the user’s language
 Be consistent
 Minimize the user’s memory load
 Build flexible and efficient systems
 Design aesthetic and minimalist systems
 Use chunking
 Provide progressive levels of detail
 Give navigational feedback
 Don’t lie to the user

20. Notion: Human

21. Human:
 Input / output channel
 Senses
 Responders/ Effectors
 Human memory: how it works, how they
learn, make mistakes
 How the above study will help in design
of computer systems

22. Input- Output Channel
 Human have 5 major senses: sight, hearing, touch,
smell, taste
 Of these sight, hearing and touch are important in
our context( others may be important in augmented
reality systems)
 There are effectors: limbs, fingers, eyes, head, and
vocal system, which play role in typing, mouse
control, voice, eye, head and body position

23. Human “Eye”
 Based on human visual study system we can
deduce:
 Ability to read falls of inversely as the distance form
point of focus increases
 It sets limits on the amount that can be seen or read
without moving eyes
 A user concentration on middle of screen cannot be
expected to read help text on the bottom line
 We see movement well at edge of our vision, thus
moving icons will be distracting

25. Perceiving:
 Size and depth( visual
angle)
Size of object matters to know its
distance
 Brightness( larger the
display the more it will
appear to flicker usually if
less than 50hz)
 Color: hue intensity and
saturation

26. Color
 Hue: wavelength, we can see 150 hues
 Blue shortest hue and red longest
 Intensity: brightness of color
 Saturation in amount of whiteness in color
 By varying above three humans can perceive 7
million colors

27. Visual processing:

28.  Humans process distance by size of
object
 And perceive same color even with
varying brightness
 We also consider the context

29. Proofreading illusion and
optical illusion
the quick brown
fox jumps over the
the lazy dog

30. Reading
 Perception of text is important for HCI
 While reading there are 2 processes:
 Eye makes jerky movements(saccades)
 Fixation
 Perception occurs during fixation
 Eye moves backwards and forward if text is complex
this is called regressions
 Adults read about 250 words per minute, by either
reading few characters, analyzing shape

31.  Because, therafter, henceforth
 Floccinaucinihilipilification,
antidisestablishmentarianism or
honorificabilitudinitatibus

32. Reading
 Speed at which text can be read is called legibility
 Positive contrast increases legibility but it will be
more prone to flicker

33. Hearing
 Human ear can hear frequencies from 20hz to 15 khz
 It can distinguish frequency changes of less than 1.5 hz
at low freq but is less accurate at high frequency
 Auditory system allows some filtering of sounds
received, allowing us to ignore background noise and
concentrate on important information
 Sound could be used in HCI to convey information
about system state

34. Touch (haptic perception)
 Gives vital information about information
 This field is important to notice experience of user
towards computer generated objects
 Its critically important for visually challenged people
where interface is designed in Braille

35. Apparatus of touch
 Skin contains 3 types of receptors:
 Thermoreceptors(head and cold)
 Nociceptors(pressure heat and pain)
 Mechanoreceptors(pressure)
 They serve for rapid adaption for response and
response towards static positions
 Eg: for typist the relative placement of fingers and
feedback from keyboard are important

36. Upcoming e-commerce based
application
 Having realistic shopping experience
 Can visit www.novint.com

37. Movement
 Movement time involves following action:
 Stimulus of que is received through sensory receptors and
transmitted to brain
 Que is processed with valid response generation
 Brain tells appropriate muscles to respond
 The above process depends on:
 Skill of user( like in video games)
 Age of user

38. Considering Movement While
Designing Interactive Systems
 Time taken to move a particular target on screen
 Fitts law: movement time=a+blog2(dist/size+1)
a and b are empirically determined constants
 Thus user find it difficult to manipulate:
 Small objects
 Distance moved
 Our arms, wrists, and fingers busy themselves on the keyboard and
desktop; our head, neck, and eyes move about attending to graphic details
recording our progress. Matching the movement limits and capabilities of
humans with interaction techniques on computing systems,

40. Human memory
 Three types of memory buffers:
 Sensory memory
 Short term/ working memory
 Long term memory

41. Try out
 Elephant
 Tiger
 Caterpillar
 Dog
 Horse
 Cow
 Hen
 Earthworm
 Butterfly
 frog

42. Sensory Memory
 To process an information, we should first obtain it. (If
we make an analogy with computers we can think of this as the initial input
stage to the computer. In order to write it to the hard disk, first the information
should be entered by means of an input device.)
 This memory is very short and temporary. We tend to
forget everything we get from these senses.
 For instance our eye takes around 12 frames/sec. meaning that
we have on the average 12*60*60*16(hours we are not
sleeping) = 691.200 frames/day.
 When we pay our attention, information is passed onto
our short-term memory.

43. Short Term Memory
 Next stage is short-term memory, also known as
working memory.
 This is a concentrated stream of incoming
knowledge, which is available until we pay our
attention to another subject.

44. Long Term Memory
 Long-term memory (LTM) is the permanent memory
and available to us for a quite large period of time.
Sigmund Freud separates LTM to 2 parts:
 Preconscious: Knowledge in our permanent memory. In
order to reach there the information needs to be recalled,
however the knowledge is reachable using normal recalls
(although this recall may last 2 seconds or 2 years!!).
 Unconscious: This is the knowledge we obtained, however
we do not know that we know it!!! In order to obtain it, we
need to have specific methods like hypnosis. We are
unable to reach this knowledge with our own methods.

45. Long Term Memory
 We can categorize LTM knowledge as:
 Declarative: This is used to identify and categorize
everyday objects we meet and events we live.
 1.A) Episodic: It is the personal life experience which turns out
to be "good old day memories". Important both consciously and
subconsciously in our future actions.
 1.B) Semantic: It is the general concept of objects around us,
each object has certain specifications in its class. Semantic
knowledge helps us to identify that object and distinguish it from
other objects. For instance we can distinguish whether the
object is a 5 year old child or a 60 year old adult.

46. Long Term Memory
 Procedural: This is a step-by-step knowledge on how
to realize a certain accomplishment.
 Imagery: This is pictorial view of the things we have
seen, for instance a beautiful painting van gogh

48. Processing Information
 Level of processing theory:
 This theory tells that the endurance of the information is also
dependent on the depth of learning process. There are different levels
of information processing, the deeper we examine a subject the more
we learn about it.
 Parallel Distributed theory:
 This theory asserts that information processing is done through
multiple parallel paths in our mind rather than being a single process.
Knowledge is represented in a distributed fashion rather than a single
location. When we obtain information about a subject we are gathering
information about the subject we focus onto and information about the
sub-branches at the same time while strengthening the main subject
with these branches.

49. Processing Information
 Connectionist Approach:
 This approach also defines knowledge representation as a
distributed group of units in the mind. However in this
approach, these units are individually meaningless. A unit
is activated by stimulations coming from other units and
sends a transfer function to the neighbour units. From the
union of these activations knowledge may be recalled or
formed.

50. Memory : HCI
 You just use your fast processing short-term memory
without making any transition to long-term memory.
 Don’t overload the short term memory
 frequently his short-term memory is not enough. In this
case the usage of multiple windows acts as a local cache for the user
improving his capacity to wander around the main topics and then to recall
back on the local windows he needs to concentrate. These types of layouts
are known as cognitive layouts, as they support cognitive processing
capacity of the user

51. Computer

53. Input devices

54. Output devices

55. Work out
 What input and output devices would you use for
the following systems? For each, compare and
contrast alternatives and if appropriate indicate
why the conventional keyboard, mouse and CRT
system may be less suitable
 Portable word processor
 Tourist information system
 Tractor mounted crop spraying controller

56. Memory

57. Memory

58. Processing and Networks
 Finite processor speed in case of standalone processors
 Factors that limit the speed of interactive system:
 Computation bound
 Storage channel bound
 Graphics bound

59. Networked Computing
 generic term in computing which refers to
computers or nodes working together over a
network.It may also mean:
 Cloud computing
 Distributed computing
 Virtual Network Computing

60. Interaction

61. Y Interaction?
 We have seen about human and
computer
 We don’t need to deal with them
individually
 So we have to learn about
communication between human and
computer : Interaction

62. Purpose of Interactive system
 Aid users to achieve some GOALS in some
DOMAIN by performing some TASK
 Task need to be analyzed to (task analysis):
 Identify the problem space
 Use our knowledge of task and goals to assess the
interactive system that is designed

63. The execution: evaluation
cycle(Norman’s Model)
 Human formulates a plan of action which is executed
at computer interface
 Norman proposed that actions are performed in
cycles such as
 Establishing a goal ;
 Executing the action;
 Evaluating the results.
 The above are subdivided into seven different stages

64. Norman’s Model
 Establish the goal
 Forming the interaction
 Specifying the action
sequence
 Executing the action
 Perceiving the system state
 Interpreting the system
state
 Evaluating the system state
w.r.to the goals and
intentions
1. Use both knowledge in world & knowledge in
the head
2. Simplify task structures.
3. Make things visible
4. Get the mapping right (User mental model =
Conceptual Model = Designed Model)
5. Convert constrains into advantages (Physical
constraints, Cultural constraints, Technological
constraints)
6. Design for Error
7. When all else fails – Standardize

65. Norman’s HCI model
 Norman’s HCI model consists of three types:
 User’s Mental Model ; System Image Model ;
Conceptual Model.

66. System Model
 How various devices in system behave
their characteristics..

67. Conceptual Model
 The Conceptual Model. This is the technically accurate
model of the computer / device / system created by
designers / teachers/researchers
 Ideally, the design model and user model have to be as
close as possible for the systems acceptance.
 The designer must ensure that the system image is
consistent with and operates according to the proper
conceptual model.

68. Levels of abstraction based on
Interaction Model
 As a basis for his Interaction Model Norman proposed
the following levels of abstraction of knowledge of the
user :
 Task Level
 Goal Level
 Semantic level
 Syntax level
 Lexical level
 Physical Level.

69. Till now we have learned..
 Introduction to the subject HCI
 Importance of good User Interface
 Importance of good design, Design principles
 Notion:
 Human
 Computer
 Interaction( Norman’s Interaction Model)

70. The above learning mapped to
 Course Outcome 1 and 2

71. End of Unit 1