Intro to HCI
A Herstory of HCI
Because I’m a woman
Je m’appelle Kaitlyn
Student
First Year HCI Student
•PhD
May 2021 (anticipated)
•MS
May 2018 (anticipated)
•BS
Fall 2016 (Psychology)
3rd year as a research assistant
•Primarily Army Research Lab Team Tutoring Project
•Other projects (Social and Social Cognitive Psych labs, John Deere,
Voting Machine UX)
Research Interests
•User research
•UX research within video games
•Team research within (and without) video games
•Psycholinguistics (the psychology of speech)
•Cognitive Psych topics within the VR/AR environment (looking at
you, Nav!)
Unicorn job: Valve Psychologist
Major Influences
Tabletop Games (D&D (nerrrd), Fluxx,
MTG, Secret Hitler, many others!)
Video games (Final Fantasy XIV,
Persona 5, Minecraft, Windwaker,
Overwatch)
Podcasts/Audio media (Radiolab, NPR,
Adventure Zone)
YouTube (Nerdwriter, Binging with
Babish, various Polygon videos)
Etc. (Painting, Poetry, Running)
Jamiahus Walton
Will introduce himself next time!
A Herstory of Computers and HCI
Getting maximum use out of HERstory here
Atanasoff-Berry Computer (1941)
First electronic
digital computing
device
At Iowa State!*
*Currently on loan 
Alan Turing (Benedict Cumberbatch)
ENIAC (1943)
“Turing complete” meaning it could
replicate Turing’s single tape computer.
From IBM Archives.
Mark I (1944)
Mark I paper
tape readers
From Harvard University Cruft Photo Laboratory.
Hoax, but still fun
http://www.snopes.com/inboxer/hoaxes/computer.asp
Grace Hopper, COBOL (1959)
First wave: Humans as computers
Cognitive science and human factors
Human-computer interaction as information processing
Model-driven research with rigid guidelines, formal methods, and
systematic testing
For example, Fitts’s law…
𝐼𝐷 = 𝑙𝑜𝑔2
𝐷
+1
𝑊
…and Keystroke-Level Modeling
Operation
Characteristic
Time Estimate
K
Key press and release keyboard
0.28 seconds (40 wpm)
P
Point the mouse to an onscreen object
1.10 seconds
B
Button press or release
0.10 seconds
H
Home hands to keyboard or mouse
0.40 seconds
M
Mental preparation
1.20 seconds
T(n)
Typing Text in a Text Field
K(n) seconds
W(t)
Waiting for the system to respond
variable
Second wave: Humans work with computers
“From human factors to human actors”
Interaction as the initiative of agents pursuing projects
Focus on groups working with a collection of applications
For example, CSCW…
Computer Supported Cooperative Work
Note: During the second wave,
CSCW looked a lot more like this
…and the Technology Acceptance Model
Perceived usefulness (PU) –“The degree to which a person believes
that using a particular system would enhance his or her job
performance"
Perceived ease-of-use (PEOU) –“The degree to which a person
believes that using a particular system would be free from effort"
(Davis, 1989)
Davis, F. D. (1989), "Perceived usefulness, perceived ease of use, and user
acceptance of information technology", MIS Quarterly, 13 (3): 319–
340, doi:10.2307/249008
The end of the second wave also
saw…
Apple Macintosh (1984)
The GUI becomes standard
Windows 1.0 (1985)
Only 1k on eBay!
Third wave: Humans who enjoy computers
Shift from focus on interactions in the workplace
Interaction as socially and materially embedded in rich contexts
Challenged second wave values and embraced experience and
meaning-making
Computers go mobile (2005, 2007)
Blackberry
iPhone
We’re at the cusp of a fourth wave
Internet of Things (IoT) and embedded computing
What are your thoughts on the
Internet of Things?
Any ethical concerns for
Developers to consider?
Human Computer Interaction
“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” – ACM SIGCHI
HCI is built on other disciplines
Pillars of Human Computer Interaction
Sociology
Cognitive Psychology
Computer Science
Design
Interactions between
technology, work, and
organization
Sociology
Cognitive Psychology
Computer Science
Design
Interactions between
technology, work, and
organization
Application of theories of cognitive
processes and the empirical analysis
of user behavior
Sociology
Cognitive Psychology
Computer Science
Design
Interactions between
technology, work, and
organization
Sociology
Application of theories of cognitive
processes and the empirical analysis
of user behavior
Cognitive Psychology
Application design &
Engineering of Human
Interfaces
Computer Science
Design
Interactions between
technology, work, and
organization
Sociology
Application design &
Engineering of Human
Interfaces
Computer Science
Application of theories of cognitive
processes and the empirical analysis
of user behavior
Cognitive Psychology
Social, cognitive, and emotional
aspects of user interface and
user experience
Design
Cognitive Psychology
Computer Science
Sociology
Design
Usability
Anthropology
Ergonomics
Linguistics
Engineering
Neuroscience
Arguably, by 1989 HCI had become it’s own field
Conceptualizing a possible discipline of humancomputer interaction, Carroll 2010.
Carroll reflects on John Long’s keynote from 1989,
which reads as a turning point in HCI history.
One of the most significant achievements of HCI is its
evolving model of the integration of science and
practice.
-Jack Carroll 2010
Transition
What is HCI?
What’s the code to the Wifi?
Where can VR take me?
What can I see?
Inception (real or virtual)
1970-1980
Present Day
Transition
What is HCI?
How do I experience the world?
How do I access information?
How do I learn?
1970-1980
Present Day
Interaction Design
• “Designing interactive products to support the way people
communicate and interact in their everyday and working lives”
• Two or more objects have an effect on each other.(It takes at
least two to tango)
• Include the proper considerations or principles
Interaction Principles
Design Values- Considers ethical, purposeful, pragmatic, elegant design
decisions
Conceptual Principles- Define what a product is and how it fits into the
broad context of use required by its users
Behavioral Principles- Describes how a product should behave
Interface-Level principles- Strategies for visual communication of
behavior and information
Can you think of an example of each in relation to your project? In
general?
Interaction Principles, cont’d
Aim to Minimize
• Cognitive Work
• Memory Work
• Visual Work
• Physical Work
Don Norman’s “The Design of Everyday
things”
“Well designed objects are easy
to interpret and understand.”
Design for People
Affordances
• What does the object invite a person to do?
• Do you push or pull, how much force?
Design for People
Mapping
• Do the controls accurately
represent their effects in the
world?
Design for People
Visibility
• Are all the functions visible (easy to see, possible to see)?
Playing your Music
VoiceOver iPod shuffle 3rd gen
Play/Pause: Single click
…next track: Double click
…previous track: Triple Click
Press and hold center button to
hear the title and artist of a song
OR to move between playlistsClick
Design for People
Constraint – restricting the wrong interactions
•Reduces error, helps focus user’s attention
But why can’t I Export?
Design for People
Feedback – what is it doing?
•Needs to be immediate and synchronized with action
Design for People
Consistency – similar interfaces have similar operations and similar
elements for reaching similar goals
•Aesthetic (within a brand or a type of object; i.e., food at Aldi)
•Functional (meaning and action, symbols; stop/go == red/green)
•Internal (within a system; i.e., road signs within a state, elements
within an app)
•External (within the environment; i.e., Apple branding)
Design for People
Gulf of Execution
Gulf of Evaluation
• Does the system allow me to do
what I want?
• How do I do X?
• Based on User goals, needs, and
motivations
• Can I tell the state of the system
and the impact of my actions?
• What happened?
• Conceptual Models play a role
“But how can I use Human
Computer Interaction in my
projects?”
HCI Techniques – With or Without the H
Apply Norman’s Principles of Design!
Also, you can use UX tools (more on UX next week) such as
•Keystroke Level Modeling
•Hierarchical Task Analysis
•Affinity Diagraming
Activity 1: Affinity diagramming
Time
Affinity Diagramming
3 min
Write ideas down, one per note.
3 min
Group ideas together (no talking, ok to move others’ ideas).
5 min
Discuss shapes and patterns, make changes/duplicates.
3 min
Name groups.
3 min
Reorient/move groups (if necessary).
17 minutes.
53
Activity 1: Affinity diagramming
I want you to describe Ames
• 1 “thought” (phrase, word, independent clause) per
post-it
54
Activity 1: Affinity diagramming
Write down ideas:
3 minutes.
55
Activity 1: Affinity diagramming
Group ideas together:
No talking.
Feel free to move and re-move ideas.
Ok to duplicate if you feel an idea should be in two areas.
3 minutes.
56
Activity 1: Affinity diagramming
Discuss.
Ok to talk now, discuss shapes and patterns.
Make additional changes.
5 minutes.
57
Activity 1: Affinity diagramming
Name groups.
As a group, name the groups that have emerged, if you haven’t
already.
3 minutes.
58
Activity 1: Affinity diagramming
Step back.
Opportunity to step back and reorient or move groups.
Take a picture.
3 minutes.
59
Activity 2: Hierarchical Task Analysis (HTA)
Time
HTA
3 min
Create a list of high-level tasks needed to reach overall goal
5 min
Identify subtasks for each high-level task
5 min
Identify and label Plans
3 min
Discuss with group
16 minutes.
60
Activity 2: Hierarchical Task Analysis (HTA)
Make a Hierarchical Task Analysis for getting to VRAC from Freddy.
61
An Example:
HCI Homework #1 – HCI Scavenger Hunt
“Poorly designed objects can be difficult and
frustrating to use.”
• Find 2 interfaces (websites or physical items in the
lab or on campus: Doors, Chairs, Game Controllers,
DVD Players, etc.) and capture them (photo or
screenshot)
• Describe:
• What is working/not working, what could make it better
• Use principles of Interaction in your analysis
• Come prepared to discuss (or show us!) 7/7
HCI Homework #1.5
In your teams (CooL:SLiCE, VR/AR, Nav,
TIMELI)
Affinity Diagram, KLM, or HTA for your
project by 6/26
You may use any tools you are comfortable
with, i.e.:
•sketching, post-its, PowerPoint, etc.
Write a blog post called “HCI Project
Analysis” talking about the process,
featuring your final product (doesn’t have to
be pretty, just readable!)
Questions?