hopefully it will be helpful.

1. HUMAN COMPUTER
INTERACTION
INTRODUCTION
Instructor: Engr. Tasawer Khan

2. BOOKS
Text Books:
 Human Computer Interaction, Alan Dix; Janet E Finlay; Gregory D.Abowd; Russell Beale, 3rd edition,
Pearson Education, 2003.
 Interaction Design beyond Human Computer Interaction, Preece, J.; Rogers, Y.; & Sharp, H.; Wiley, 4th
Edition 2017.
• Other References
Usability and Web Design - Jakob Nielsen
– http://www.useit.com/

3. 10/23/2022 Introduction 3
LECTURE CONTENTS
 Introduction to HCI/ Interaction Design
 Usability and other Terminology
 Why HCI
 HCI tools
 HCI map

4. GRADING CRITERIA- MOSTLY EXAMS BUT EXAMS USE
SKILLS LEARNT IN QUIZZES AND ASSIGNMENTS
• Mid 25%
• Quizzes 13%
• Assignments 12%
• Final 50%
• *sessional weightages may change

5. HOW MANY COMPUTERS DO YOU USE DAILY?

6. WHICH ONES DO YOU ENJOY USING AND WHICH
ONES YOU DON’T?

7. WHAT IS A GOOD DESIGN?

8. HOW CAN WE MAKE DESIGNS BETTER?

9. HOW CAN WE MAKE DESIGNS BETTER?
• Taking into account what people are good and bad at.
• Considering what might help people with the way they currently do things.
• Thinking through what might provide quality user experiences.
• Listening to what people want and getting them involved in the design.
• Using tried and tested user-based techniques during the design process.

11. 10/23/2022 Introduction 11
USER INTERFACE – HALL OF SHAME

12. 10/23/2022 Introduction 12
USER INTERFACE – HALL OF SHAME
 Presents a number of templates
 Prints custom award certificates
 Good points about the Interface?
 Graphical – Mouse Driven
 No complicated commands to remember
 User gets a preview of the certificate

13. 10/23/2022 Introduction 13
USER INTERFACE – HALL OF SHAME
 Why isn’t it usable?
 Long help message for a simple ‘selection’ task
 Moving the scroll bar changes the template
 How many templates?
 How are they sorted?
 How much to move the bar to select the next template?
 Frequent users: How to find a template already used
How would you redesign?

14. 10/23/2022 Introduction 14
THE INTERFACE REDESIGNED

15. 10/23/2022 Introduction 15
THE ERROR DIALOG
 We see it all the time
 What’s good about the design
of this error box?
 The user knows there is an error
 What’s poor about the design
of this error box?
 Not enough information
 The user does not know how to resolve the error (instructions
or contact info)

16. MORE UI HALL OF SHAME

17. UI HALL OF SHAME OR FAME ???

18. THE UI IS IMPORTANT !
• User interface strongly affects perception of software.
Usable software sells better.
Unusable web sites are often abandoned.
• Perception is sometimes superficial.
Users blames themselves for UI failings.

19. A SURVEY ON BUYING DECISIONS
• A Harris poll
• (reported in the Wall Street Journal 11/8/05) found that ease of use (61%),
customer service (58%), and nohassle installation (57%) are the most important
factors US adults consider when purchasing a new technology product.

20. THE COST OF GETTING IT WRONG!
• User’s time isn’t getting cheaper.
• Design for it correctly now or pay for it later.
• Disasters happen !!!
Therac 25 radiation therapy machine.
Supertanker accident off England
Predator UAV accident in arizona

21. UIS ARE HARD TO DESIGN
• You are not the user
Most software engineering is about communicating with other programmers.
UI is about communicating with users.
• The user is always right.
Consistent problems are the system’s fault.
• But the users are not always right either
They are not the designers

22. WORDS WORDS WORDS
• User Interface (UI)
• Usability
• User Experience (UX)
• Design
• Human Computer Interaction
• Ergonomics

23. UI
•Part of application that allows users
– to interact with computer
– to carry out their task

24. USABILITY
• How well users can use the functionality of the system/application.
• Dimensions…..
Learnability
Efficiency
Visibility
Errors
Satisfaction

25. UX

26. McCarthy and Wright propose four core threads that make up our holistic experiences: sensual, emotional, compositional,
and spatiotemporal:
The sensual thread. This is concerned with our sensory engagement with a situation and is similar to the visceral level of
Norman's
model. It can be equated with the level of absorption people have with various technological devices and applications,
most notable
being computer games, smartphones, and chat rooms, where users can be highly absorbed in their interactions at a
sensory level.
These can involve thrill, fear, pain, and comfort.
The emotional thread. Common examples of emotions that spring to mind are sorrow, anger, joy, and happiness. In
addition, the
framework points out how emotions are intertwined with the situation in which they arise – e.g. a person becomes angry
with a
computer because it does not work properly. Emotions also involve making judgments of value. For example, when
purchasing a
new cell phone, people may be drawn to the ones that are most cool-looking but be in an emotional turmoil because they
are the
most expensive. They can't really afford them but they really would like one of them.

27. The compositional thread. This is concerned with the narrative part of an experience, as it unfolds, and the way a person
makes
sense of it. For example, when shopping online, the options laid out to people can lead them in a coherent way to
making a desiredpurchase or they can lead to frustrating experiences resulting in no purchase being made. When in this
situation, people ask
themselves questions such as: What is this about? Where am I? What has happened? What is going to happen next?
What would
happen if . . . ? The compositional thread is the internal thinking we do during our experiences.
The spatio-temporal thread. This refers to the space and time in which our experiences take place and their effect upon
those
experiences. There are many ways of thinking about space and time and their relationship with one another: for
example, we talk oftime speeding up, standing still, and slowing down, while we talk of space in terms of public and
personal places, and needing
one's own space.

28. 10/23/2022 Introduction 28
WHAT IS HCI
 Human–computer interaction (HCI) is the study of interaction
between people (users) and computers.
 HCI is a discipline concerned with the design, evaluation and
implementation of interactive computing systems for human use.
 Human and a computer system interact to perform a task?
 task - write document, calculate budget, solve equation, learn about
Bosnia, drive home, make a reservation, land a plane...

29. 10/23/2022 Introduction 29
INTERFACES IN THE REAL WORLD
 Not just computers!
 VCR
 ATM
 Phone
 Copier
 Car
 Plane cockpit
 ……..

30. Good Interface Design 1
SAFELY
EFFECTIVELY
EFFICIENTLY
ENJOYABLY
Tasks can be completed without risk – e.g. flying an
aeroplane.
Being able to do the right task and do it well – e.g.
videoing a TV programme
To carry out tasks quickly and correctly – e.g. at a
cashpoint
Users should be able to enjoy what they are doing,
not be frustrated by the interface – e.g.
educational programs
Users should be able to use an interface:

31. Good Interface Design 2
WHO
WHAT
ENVIRONMENT
FEASIBILITY
Who is going to use the system, what are their
ages, etc.?
What tasks are they likely to want to perform?
Repetitive, complex, simple, etc.
Where is the computer to be used? In a hazardous
or noisy environment?
What is technologically available? Designers
should not add elements to the interface that
cannot actually be used out easily.
There are four considerations for an interface designer:

32. HCI – Scope
*
Anthropolo
gy
Artificial
Intelligence
Engineering
Design
Ergonomics
&
Human
Factor
Linguistics
Social
Organizatio
nal
Psychology
Philosophy
Computer
Science
Cognitive
Psychology
HCI

33. 10/23/2022 Introduction 33
WHY HCI IS IMPORTANT
 HCI is not just ‘how big should I make buttons’ or ‘how
to layout menu choices’
 It can affect:
 Effectiveness
 Productivity
 Morale
 Safety
 Example: A car with poor HCI

34. ACTIVITY

35. HCI Tools
• Sound
• 3D
• Animation
• Video
• Devices
– Size (small->very large)
– Portable (PDA, phone)
– Plasticity
• Context sensitive/aware
• Personalizable
• Ubiquitous

36. HCI HOW?
• How do we improve interfaces?
1. Educate software professionals
2. Draw upon fast accumulating body of knowledge regarding H-C interface
design
3. Integrate UI design methods & techniques into standard software
development methodologies now in place

37. UI DESIGN/DEVELOP PROCESS
• Tasks of User-Centered Design
• Analyze user’s goals & tasks
• Create design alternatives
• Evaluate options
• Implement prototype
• Test
• Refine
DESIGN
USE &
EVALUATE
IMPLEMENT

38. Overview: Map of Human Computer
Interaction
Input and
Output Devices
Dialogue
Techniques
Dialogue
Genre
Application Areas
Ergonomics
Evaluation
Techniques
Design
Approaches
Implementation
Techniques and Tools
Example Systems
and Case
Studies
Human
Language,
Communication
and
Interaction
Human
Information
Processing
Use and Context
Human-Machine Fit and Adaptation
Social Organization and Work
Computer
Computer
Graphics
Dialogue
Architecture
Development Process
A a

39. Use and context of computers
• Problems of fitting computers, their uses, and the context of use together
• Social organization and work
– humans are interacting social beings
– considers models of human activity:
• small groups, organizations, socio-technical systems
• Application areas
– characteristics of application domains, e.g. individual vs group work
– popular styles
• document production, communications, design, tutorials and help,
multi-media information kiosks, continuous control (cockpits, process
control), embedded systems (copiers, home appliances)
• Human-machine fit and adaptation
– improve the fit between the designed object and its use
• how systems are selected and adopted; how users improvise routine
systems; how systems adapt to the user (customization); how users
adapt to the system (training, ease of learning); user guidance (help,
documentation, error-handling)

40. Human characteristics
• To understand the human as an information-processing system,
how humans communicate, and
people’s physical and psychological requirements
• Human information processing
– characteristics of the human as a processor of information
• memory, perception, motor skills, attention, problem-solving, learning and skill
acquisition, motivation, conceptual models, diversity...
• Language, communication and interaction
– aspects of language
• syntax, semantics, pragmatics; conversational interaction, specialized languages
• Ergonomics
– anthropometric and physiological characteristics of people and their relationship to
workspace and the environment
• arrangement of displays and controls; cognitive and sensory limits; effects of
display technology; fatigue and health; furniture and lighting; design for stressful
and hazardous environments; design for the disabled...

41. Computer system and interface
architecture
• The specialized components computers have for interacting with people
• Input and output devices
– mechanics and characteristics of particular hardware devices, performance
characteristics (human and system), esoteric devices, virtual devices
• Dialogue techniques
– the basic software architecture and techniques for interacting with humans
• e.g. dialog inputs and outputs; interaction styles; issues
• Computer graphics
– basic concepts from computer graphics that are especially useful to HCI
• Dialogue architecture
– software architecture and standards for interfaces
• e.g., screen imaging; window managers; interface toolkits; multi-user
architectures, look and feel, standardization and interoperability

42. The Development Process
• The construction and evaluation of human interfaces
• Design approaches
– the process of design
• e.g. graphical design basics (typography, color, etc.); software engineering; task
analysis; industrial design...
• Implementation techniques and tools
– tactics and tools for implementation, and the relationship between design,
evaluation and implementation
• e.g. prototyping techniques, dialog toolkits, object-oriented methods, data
representation and algorithms
• Evaluation techniques
– philosophy and specific methods for evaluation
• e.g. productivity, usability testing, formative and summative evaluation
• Example systems and case studies
– classic designs to serve as example of interface design genres

43. 10/23/2022 Introduction 43
REFERENCES
 Human Computer Interaction by Dix et al.
 User Interface Design and
Implementation, Prof. Robert Miller - MIT
 User Interface Hall of Fame/Shame