HUMAN COMPUTER

INTERACTION

INTRODUCTION

Instructor: Engr. Tasawer Khan

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/
LECTURE CONTENTS
 Introduction to HCI/ Interaction Design
 Usability and other Terminology
 Why HCI
 HCI tools
 HCI map

10/17/22 Introduction 3
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

HOW MANY COMPUTERS DO YOU USE DAILY?
WHICH ONES DO YOU ENJOY USING AND WHICH
ONES YOU DON’T?
WHAT IS A GOOD DESIGN?
HOW CAN WE MAKE DESIGNS BETTER?
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.
USER INTERFACE – HALL OF SHAME

10/17/22 Introduction 11
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

10/17/22 Introduction 12
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?

10/17/22 Introduction 13
THE INTERFACE REDESIGNED

10/17/22 Introduction 14
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)

10/17/22 Introduction 15
MORE UI HALL OF SHAME
UI HALL OF SHAME OR FAME ???
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.
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.
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
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
WORDS WORDS WORDS

• User Interface (UI)

• Usability
• User Experience (UX)
• Design
• Human Computer Interaction
• Ergonomics
 UI

• Part of application that allows users

– to interact with computer
– to carry out their task
USABILITY

• How well users can use the functionality of the system/application.

• Dimensions…..
 Learnability
 Efficiency
 Visibility
 Errors
 Satisfaction
UX
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.
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.
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...

10/17/22 Introduction 28
INTERFACES IN THE REAL WORLD
 Not just computers!
 VCR
 ATM
 Phone
 Copier
 Car
 Plane cockpit
 ……..

10/17/22 Introduction 29
 Good Interface Design 1
Users should be able to use an interface:

Tasks can be completed without risk – e.g. flying

SAFELY
an aeroplane.

EFFECTIVELY 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

EFFICIENTLY cashpoint

Users should be able to enjoy what they are doing,

ENJOYABLY not be frustrated by the interface – e.g. educational
programs
 Good Interface Design 2
There are four considerations for an interface designer:

Who is going to use the system, what are their

WHO ages, etc.?

What tasks are they likely to want to perform?

WHAT Repetitive, complex, simple, etc.

Where is the computer to be used? In a hazardous

ENVIRONMENT
or noisy environment?

What is technologically available? Designers

FEASIBILITY should not add elements to the interface that
cannot actually be used out easily.
 HCI – Scope
Social
Cognitive Organizational
Psychology Psychology
Linguistics

Anthropolo
gy Ergonomics
&
Human

HCI
Factor

Philosophy

Design

Computer
Science
Artificial Engineering
Intelligence

*
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

10/17/22 Introduction 33
ACTIVITY
HCI Tools
• Sound
• 3D
• Animation
• Video
• Devices
– Size (small->very large)
– Portable (PDA, phone)
– Plasticity
• Context sensitive/aware
• Personalizable
• Ubiquitous
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
UI DESIGN/DEVELOP PROCESS
• Tasks of User-Centered Design
• Analyze user’s goals & tasks
• Create design alternatives
IMPLEMENT
• Evaluate options
• Implement prototype
• Test DESIGN
• Refine

USE &
EVALUATE
Overview: Map of Human Computer Interaction
Use and Context

Social Organization and Work Human-Machine Fit and Adaptation

Application Areas
Human Computer
Dialogue Computer
Human Techniques Graphics
Information
Processing
Aa
Dialogue Dialogue
Language, Genre Architecture
Communication Input and
and Interaction Ergonomics Output Devices

Example Systems
Evaluation and Case Studies Implementation
Techniques Techniques and Tools
Design
Approaches
Development Process
 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)
 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...
 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
 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
REFERENCES
 Human Computer Interaction by Dix et al.
 User Interface Design and
Implementation, Prof. Robert Miller - MIT
 User Interface Hall of Fame/Shame

10/17/22 Introduction 43