Opportunities and Importance of “Human

Computer
Interaction (HCI)”
Research

Course Teacher: (Summer 2022-23)

Dr. Muhammad Firoz Mridha
Introductions
• Instructor
▫ Dr. Mridha
▫ Department of CS
▫ Associate Professor
▫ AIUB

• Research areas
▫ Machine Learning (ML)
▫ Human Computer Interaction (HCI)
▫ Natural Language Processing (NLP)
▫ Computer Vision and Image
Processing
2
 3

Introductions
• Your turn
▫ Undergrad degree and background?
▫ Work experience?
▫ Why interested in an HCI class?
▫ What best skill do you bring to a project team?
 4

Course Information
• Books
– Human-Computer Interaction, by Alan Dix, Janet Finlay, Gregory
Abowd, and Russell Beale. Prentice Hall, 2004.

– The Design of Everyday Things, by Donald Norman.

Currency/Doubleday, 1990.

• Web
– Syllabus & Class Info
– Schedule
– Assignments
– HCI resources
 5

Course Information
• Grading
▫ Group project, 4 parts (30%)
 More details soon...
▫ Assignment 1 (20% total)
– Note: no mid term
▫ Assignment 2 (20% total)
 One week to do, likely 4 over the semester
▫ Participation (10% total)
 Class involvement and peer review
 Includes project involvement/effort
▫ Course Viva (20% total)
 Based on Course contents
 6

HCI What? HCI Why?

• What happens when a 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...

• Why is this important?

1. Computer systems affect every person
2. Safety, satisfaction, utility is critical
3. Product success depends on ease of use
Interfaces in the Real World
• Not just computers!
▫ VCR
▫ Wristwatch
▫ Phone
▫ Copier
▫ Car
▫ Plane cockpit
▫ Airline reservation
▫ Air traffic control
▫ Running shoes!

7
 8

Goals of HCI
• Allow users to carry out tasks
▫ Safely
▫ Effectively
▫ Efficiently
▫ Enjoyably
 9

Usability
• Crucial issue in this area!

• Combination of
▫ Ease of learning
▫ High speed of user task performance
▫ Low user error rate
▫ Subjective user satisfaction
▫ User retention over time
 10

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
 11

UI Design/Develop Process
• Tao of User-Centered Design
▫ Analyze user’s goals & tasks
▫ Create design alternatives
▫ Evaluate options IMPLEMENT
▫ Implement prototype
▫ Test DESIGN
▫ Refine

USE &
EVALUATE
 12

Above All Else…

• Know the User!
▫ Physical & cognitive abilities (& special
needs)
▫ Personality & culture
▫ Knowledge & skills
▫ Motivation

• Two Fatal Mistakes:

1. Assume all users are alike
2. Assume all users are like the designer
 13

Design Evaluation
• “Looks good to me” isn’t good enough!
• Both subjective and objective metrics
• Some things we can measure
▫ Time to learn
▫ Speed of performance
▫ Rate of errors by user
▫ Retention over time
▫ Subjective satisfaction
 14

Upcoming
• History & Frameworks of HCI
• Project info
• Futuristic scenarios
• Design of Everyday Things (DOET)

• Start reading...
▫ DFAB (note order of chapters)
▫ DOET
Group Project
Semester-long team effort
History & Frameworks of HCI

Key people, events and ideas in HCI

Course Project introduction

 17

History of HCI
• Digital computer grounded in ideas from 1700’s
& 1800’s

• Technology became available in the 1940’s and

1950’s

• The “user” concept is relatively new

 18

History of HCI
• Mechanical Computers http://www.thocp.net
• 1623 Schickard makes "Calculating Clock".
6-digit machine can add, subtract, bell indicates overflow.
• 1674 Leibniz designs his "Stepped Reckoner”
Can multiply, with operands of up to 5 and 12 digits.
User turns a crank for each unit in each digit
• 1820 de Colmar makes "Arithmometer”
First mass-produced calculator. Does multiplication & division.
It is also the most reliable calculator yet.
Continue to be sold for about 90 years.
• 1889 Felt invents the first printing desk calculator.
• 1935 IBM introduces "IBM 601", punch card machine
capable of 1 multiplication /second. 1500 are made.
• 1945 Mauchly & Eckert "ENIAC” for ballistics.
30 tons, 1000 ft2 of floor, 140 kilowatts of electricity, 17,468 vacuum tubes
 19

Batch Processing
• Computer had one task,
performed sequentially
• No “interaction” between
operator and computer
after starting the run

• Punch cards, tapes for input

• Serial operations
 20

Paradigm Shifter: Vannevar Bush

• “As We May Think” - 1945 Atlantic Monthly
“…publication has been extended far beyond our
present ability to make real use of the record.”
• Postulated Memex device
▫ Stores all records/articles/communications
▫ Items retrieved by indexing, keywords, cross
references (now called hyperlinks)
▫ (Envisioned as microfilm, not computer)

• Interactive and nonlinear components are key

 21

Mid 1960’s
• Timesharing mode of computing
▫ Computers too expensive for individuals
timesharing increased accessibility
▫ interactive systems, not jobs
▫ text processing, editing
▫ email, shared file system

Need for HCI

 22

Paradigm Shifter: J.R. Licklider

• 1960 - Postulated
“man-computer symbiosis”

• Couple human brains

and computing machines
tightly to revolutionize
information handling
 23

Video Display Units

• More suitable medium than paper
• Sutherland’s Sketchpad as landmark system
• Computers used for visualizing and
manipulating data
 24

Paradigm Shifter: Ivan Sutherland

• SketchPad - ‘63 PhD thesis at MIT

▫ Hierarchy - pictures & subpictures
▫ Master picture with instances (ie, OOP)
▫ Constraints
▫ Icons
▫ Copying
▫ Light pen for input
▫ Recursive operations
 25

Computers as Toolkits
• Multipurpose toolkits
• Abstracting out common tasks (tools)
• Reusable elements
• At the disposal of humans
 26

Paradigm Shifter: Douglas Engelbart

• Landmark system/demo:
▫ Mouse, windows
▫ Hypertext
▫ Multimedia
▫ High-res display,
▫ Shared files, CSCW,
▫ Electronic messaging, teleconferencing, ...

• Inventor of mouse
 27

Paradigm Shifter: Alan Kay

• “Personal Computing”

• Dynabook: Notebook sized

computer loaded with
multimedia and can
store everything

• Desktop interface metaphor

 28

Paradigm Shifter: Ted Nelson

• Computers can help
people, not just business

• Coined term “hypertext”

 29

Personal Computers
• 1974 IBM 5100
• 1981 Datamaster
• 1981 IBM XT/AT
▫ Text and command-based
▫ Sold lots
▫ Performed lots of tasks the
general public wanted done
▫ A good basic toolkit
• 1978 VisiCalc
 30

Personal Computing
• System is more powerful if
it’s easier to use
• Small, powerful machines
dedicated to individual
• Importance of networks
and time-sharing
• Kay’s Dynabook, IBM PC
• Time names “The Computer” Man of the Year,
1982 (http://www.time.com/time/special/moy/1982.html)
 31

WIMP
• Windows, Icons, Menus, Pointers
• Timesharing=multiusers; now we need
multitasking
• WIMP interface allows you to do several things
simultaneously
• Has become the familiar GUI interface
• Xerox Alto, Star; early Apples
 32

PCs with
• Xerox GUIs
PARC - mid 1970’s
• Alto
▫ local processor, bitmap
display, mouse
▫ Precursor to modern GUI,
windows, menus, scrollbars
▫ LAN - ethernet
 33

• First commercial PC designed for

Xerox Star - ‘81
“business professionals”
▫ desktop metaphor, pointing, WYSIWYG,
consistency and simplicity
• First system based on usability
▫ Paper prototyping and analysis
▫ Usability testing & iterative refinement
• Commercial flop
▫ $15k cost
▫ closed architecture
▫ lacking key functionality (spreadsheet)
 34

Apple Lisa - ‘82

• Based on ideas of Star

• More personal rather

than office tool
▫ Still $$$

• Failure (why?)
 35

Apple Macintosh - ‘84

• Aggressive pricing - $2500
• Not trailblazer, smart copier
• Good interface guidelines
• 3rd party applications
• High quality graphics
and laser printer
 36

Direct Manipulation
• ‘82 Shneiderman describes appeal of
graphically-based interaction
▫ object visibility
▫ incremental action and rapid feedback
▫ reversibility encourages exploration
▫ replace language with action
▫ syntactic correctness of all actions
• WYSIWYG, Apple Mac
 37

Metaphor
• All use is problem-solving or learning to some
extent
• Relating computing to real-world activity is
effective learning mechanism
▫ File management on office desktop
▫ Financial analysis as spreadsheets
• The dreaded dead metaphor
▫ Examples?…
 38

Speech, Language?
• Actions do not always speak louder than words
• Interface as mediator or agent
• Language paradigm
• How good does it need to be?
▫ “Tricks”, vocabulary, domains
• How “human” do we want it to be?
▫ (HAL, Bob, PaperClip)
 39

Multimodality
• Mode is a human
communication channel
▫ Not just the senses
e.g., speech and non-speech audio
are two modes

• Emphasis on simultaneous
use of multiple channels for I/O
 40

Hypertext
• Think of information not as linear flow but as
interconnected nodes
• Nelson’s hypertext
• Bush’s MEMEX
• Non-linear browsing
• WWW ‘93

• Hypermedia
 41

The Interconnected Web

• The Network is the Computer
e.g. seti@home
 42

CSCW
• Computer-Supported Cooperative Work
• No longer single user/single system
• Micro-social aspects are crucial
• E-mail as prominent success but other
groupware still not widely used
 43

Ubiquity
• Person is no longer user of virtual device but
occupant of virtual, computationally-rich
environment
• Can no longer neglect macro-social aspects
• Late ‘90s - PDAs, VEs, ...
• Now?…
HCI Frameworks
How we can conceptualize humans
who use computing systems
 45

Human Role
• How is human viewed in HCI
▫ What is human role?
• Different roles engender different frameworks
 46

Human Roles
Human as…
• 1. Sensory processor
▫ Experimental psych, sensory psych
▫ e.g. Model-Human Processor (Card, Moran & Newell)
• 2. Interpreter/Predictor
▫ Cognitive psych, AI
▫ e.g. Distributed cognition (Hutchins)
• 3. Actor in environment
▫ Activity theory, ethnography, ecol psych
▫ e.g. Situated action (Suchman)
▫ e.g. Activity theory (Vygotsky, Nardi)
 47

What Makes a System Usable

Usability results when the system…

1. Sensory processor - Fits within human limits

2. Interpreter/Predictor - Fits with knowledge

3. Actor in environment - Fits with task and

social context
 48

Evaluation MethodsEvaluation methods…

1. Sensory processor - Quantitative experiments

2. Interpreter/Predictor - Task analysis, cognitive

walkthrough

3. Actor in environment - Ethnographic field work,

participatory design
 49

Two Views of Interaction

• Interaction with
▫ Software system is a tool or machine
▫ Interface is a usability-engineered membrane
▫ Human-as-processor & -interpreter models

• Interaction through
▫ Software is a medium used to interact with task objects
or other people
▫ Interface plays a role in social context
▫ Human-as-interpreter & -actor models
 50

Group Project
• Design and evaluate an interface
▫ 0 - Team formation & topic choice
▫ 1 - Understand the problem space
▫ 2 - Exploring the design space
▫ 3 - Prototype
▫ 4 - Evaluation

• Main 4 parts worth ~10% each

• Presentation, documentation ~ 5%
 51

Group Project Details

• Part 0 - Topic definition
▫ Identify team & general topic
▫ Create web notebook (on T-square)
▫ Suggestion: Pick a population and pick a
technology; check out intersection
• Part 1 - Understanding the problem
▫ Describe tasks, users, environment, social context
▫ What are implications for design?
 52

Group Project Details

• Part 2 - Design alternatives
▫ Storyboards, mock-ups for multiple different
designs
▫ Explore, push boundaries of design space
▫ Explain decisions

• Part 3 - System prototype & eval plan

▫ More detailed prototype (semi-working ok)
▫ Plan for conducting evaluation
 53

Group Project Details

• Part 4 - Evaluation
▫ Conduct formal evaluation with example users
▫ Use appropriate methods
▫ Analyze results of evaluation
▫ Characterize what’s working and what’s not
 54

Presentations
• Midterm poster session
▫ Feedback on ideas, whole class period
▫ After Part 2 (near midterm)
▫ Other students and “expert” gallery (hopefully)

• Final poster session (1 days)

▫ Week 11 of the semester
 55

Project Topics
• Semester theme: “Innovative Interfaces in
Everyday Life”
▫ ?? What does this mean ??

• General Topic:
▫ “Phase 0” of the project
▫ Set up web notebook on T-square
 56

What Makes a Good Project

• Typically:
▫ Access to domain experts & users
▫ “Real” clients
▫ Interesting human issues
▫ Rich domain for design

• Theme has a LOT of range for topics

 57

• Mobile/handheld (cars, tour guides, etc.)

Previous Topic Ideas
• Wedding planner
• GIS
• Calendar agent (speech)
• Audio / Web sites
• Domain that you know well
 What is
HCI- Human Computer Interaction?
Click icon to add picture
Click icon to add picture

Click icon to add picture

Click icon to add picture
A survey undertaken by 350 US companies on over 8000
projects revealed that one third of the projects were never
completed and one half succeeded only partially, that is,
with partial functionalities, major cost overruns, or
significant delays (Standish Group, 95).
Managers identified poor requirements as the major
source of problems (about half of the responses) - more
specifically, the lack of user involvement (13%),
requirements incompleteness (12%), changing
requirements (11%), unrealistic expectations (6%), and
unclear objectives (5%).
This summed up 47% of failure is due to the absence of
Methodology of Interaction Design which spruces up from
the field of Human Computer Interaction (HCI), more
generally called “Human Machine Interactions”.
 The $300 Million Button
The problem: The problem wasn’t as much about the form’s layout as it was where
the form lived. Users would encounter it after they filled their shopping cart with
products they wanted to purchase and pressed the Checkout button. It came
before they could enter the information to pay for the product.

The solution: The designers fixed the problem simply. They took away
the Register button. In its place, they put a Continue button with a simple
message: “You do not need to create an account to make purchases on our site.
Simply click Continue to proceed to checkout. To make your future purchases
even faster, you can create an account during checkout.”

The results: The number of customers purchasing went up by 45%. The extra
purchases resulted in an extra $15 million the first month. For the first year, the
site saw an additional $300,000,000.
Future computer users will never know or
bother about five things -
1. What processor(s) they are using
2. How much memory do they have
3. How much storage do they use
4. What is the speed of their Internet and
5. What exactly a computer is

But they (will) always bother about one thing - how they
would be interacting with them..
Click icon to add picture
Click icon to add picture

Click icon to add picture

Click icon to add picture
 Mark Weiser's vision

Weiser outlined a set of principles

describing ubiquitous/pervasive computing: (1996)
• The purpose of a computer is to help you do something
else.
• The best computer is a quiet, invisible servant.
• The more you can do by intuition the smarter you are; the
computer should extend your unconscious.
• Technology should create calm, "that which informs but
doesn't demand our focus or attention."
ALIENATION (Marx) : The process whereby the
worker is made to feel foreign to the products of
his/her own labor.
The design of the product and how it is produced are
determined, not by the producers who make it (the
workers), nor by the consumers of the product (the
buyers), but by the capitalist class who besides
accommodating the worker's manual labour also
accommodate the intellectual labour of the engineer
and the industrial designer who create the product
in order to shape the taste of the consumer to buy
the goods and services at a price that yields a
maximal profit.
 Data-Process Model (DPM)
Basic System

Data Process Environment

Complex System
Data Process

Data Process Data Process

Interaction Modalities
• Touch
• Gesture
• Haptic
• Visual
• Speech
• Brain
Touch
Gesture
Haptic
Visual
Speech
Brain
HCI Supporting Areas

• Human Computer
Interaction (HCI) is a
multi-disciplinary field
and designing an effective
interactive system from a
single discipline in
isolation is almost
impossible.
Domains
• Usability
• User experience
• User modeling
• UI
• Interaction design
• Affective interaction
• Therapeutic
• Info visualization
• Ubiquitous Computing
Conclusion
Questions & Answers

Questions?