Introduction to HCI --Week 1, Monday--

name: inverse
layout: true
class: center, middle, inverse
---

# Introduction to Human Computer Interaction

CSE 340 Winter 2021

---
layout: false

#  Human-Computer Interaction (HCI)

A science of the artificial
- Human
 - Anyone impacted by the existence of the program
 - End users
- Computer
 - Artificial thing human is interacting with
- Interaction
 - How the artificial stuff is actually used
- 48% of app code [Myers & Rosson, CHI'92]; probably more now!

---
.left-column-half[
![:img Couple with cordless telegraph apparatus,100%, width](img/hci-intro/mobile-telegraph.png)
]
.right-column-half[
Robida's vision of a cordless telegraph (1906)
]
---
.left-column-half[
![:img Two women using video phones,100%, width](img/hci-intro/videophones.png)
]
.right-column-half[
Commercial vision of a wireless private video phone  (1929)
]
---
.left-column-half[
![:img Vannevar Bush's imagined Memex--a desk with mechanical and digital innards,100%, width](img/hci-intro/memex.png)
]

.right-column-half[
His article: [As we may think](http://web.mit.edu/STS.035/www/PDFs/think.pdf)

.quote[The MEMEX 'is a desk that can instantly bring files and material on
any subject to the operators fingertips....' (Bush, 1945, 'As We May
Think', Atlantic Monthly)]
]

---
.left-column-half[
![:img A prototype of a wearable wristwatch/cellphone and Dick Tracy using it in a stamp based on the comic strip, 100%, width](img/hci-intro/watches.png)
]
.right-column-half[
A wrist-watch cellphone prototype (1947), which captured popular imagination as shown in this Dick Tracy stamp
]
---
.left-column-half[
![:img A young man sitting at a complex machine covered in buttons--drawing on the screen with a pen, 100%, width](img/hci-intro/sutherland.png)
]
.right-column-half[
Ivan Sutherland. 1964. The sketchpad graphical communication system in action.
.font-small[In Proceedings of the SHARE design automation workshop (DAC '64). ACM, New York, NY, USA, 6.329-6.346.]
]
---
# Sutherland  Inspires Engelbart

.left-column-half[
![:img Two images -- a man giving a live demo of a text based
    interface; and a wooden computer mouse.,
40%, width](img/hci-intro/engelbart.png)
![:youtube Engelbart's *Mother of all Demos*. His presentation included windows;
hypertext; graphics; video conferencing; the computer mouse; word
processing; dynamic file linking; revision control; collaborative
real-time editing; all new inventions!, B6rKUf9DWRI]
]
.right-column-half[
Engelbart's *Mother of all Demos* His presentation included many all new inventions:
- windows
- hypertext
- graphics
- video conferencing
- the computer mouse
- word processing
- dynamic file linking
- revision control
- collaborative real-time editing
]
.footnote[
December 9 1968 at the
Fall Joint Computer Conference.
]
---
# [1970s](https://www.computerhistory.org/timeline/1970/) starts the computer revolution

.left-column-half[
![:img Picture of two people with long hair and glasses interacting with a computer kiosk in Lepold's Records, 80%, width](img/hci-intro/community-memory.jpg)
]
.right-column-half[
- 1971: Email is invented by Ray Tomlinson.
- 1973: The first commercial graphical user interface is introduced in 1973 on the Xerox Alto. The modern GUI is later popularized by the Xerox Star and Apple Lisa (but Xerox never made money on this)
- 1973: The first capacitive touchscreen is developed at CERN.
]
---
# [1980s](https://www.computerhistory.org/timeline/1980/): Wave 1 of HCI: Personal Computing (mobile and desktops)

.left-column-half[
![:img LEFT: Picture of peter lewis holding a large cellphone with Harry Brock - President of Metrocell in 1982. RIGHT: Close-up of Peter T. Lewis in 2015 - a smiling African-American man in a pink shirt holding his glasses,60%, width](img/hci-intro/Lewis.png) 
![:img A desktop personal computer showing a WYSIWYG
word processor and graphical window system, 25%, width](img/hci-intro/smalltalk-interface.png)
![:img A picture of Adele Goldberg inventor of Smalltalk-80, 30%](img/hci-intro/goldberg.jpg)
]
.right-column-half[

- 1984: The first commercially available cell phone, the DynaTAC 8000X, is created by Motorola.
- 1985: "The term 'Internet of Things' was first conceptualized, coined, and published by Peter T. Lewis in a speech to the Congressional Black Caucus ([Chetan Sharma](http://www.chetansharma.com/correcting-the-iot-history/))1
- Personal computers hit the mass market
 - User interface toolkits were invented (Smalltalk 80, invented by Adele Goldberg, is the first)
]
.footnote[1 This history was erased and instead attributed to a white man until very recently]

---
# [1990s](https://www.computerhistory.org/timeline/1990/): Wave 2: Collaboration & communication

.left-column-half[
![:img A picture of Hiroshi Ishii in a suit and tie and Roz Picard in a black pantsuit touching a physical computing device hooked up to circuit boards with wires, 30%, width](img/hci-intro/ishii.jpg)
 .font-small[Hiroshi Ishii and Roz Picard at the MIT Media lab in 1998, from [Ben Shneiderman's archive of HCI Pioneers](https://hcipioneers.wordpress.com/portfolio/ishii-hiroshi/)]
]
.right-column-half[
- 1990: The World Wide Web is first introduced to the public by English engineer and computer scientist Sir Tim Berners-Lee, echoing the MEMEX proposed in 1945
- 1993: Mosaic, the first popular web browser is introduced
- 1996: Palm pilot is introduced
- 1998: The first portable MP3 player is released by SaeHan Information Systems.
21st century
- 1998: Ishii pioneers tangible computing
]
.footnote[[HCI/UX timeline](https://miro.medium.com/max/2000/1*_c9Sy7zXyBMlmuGH_orf2Q.png)]
---
# [2000s](https://www.computerhistory.org/timeline/2000/): Wave 2: Collaboration & communication

.left-column-half[
![:img A picture of Deborah Estrin talking about mobile health, 45%, width](img/hci-intro/estrin.jpg) ![:img A picture of an App store full of mobile apps, 40%, width](img/hci-intro/mobile-apps.jpg)

.font-small[(left) Deborah Estrin, who won a MacArthur Genius award for her pioneering work in Mobile Health (right) "The iPhone’s phenomenal popularity creates a new computing platform that brings mobile Web browsing to a large audience. Google’s Android mobile platform soon makes that audience even larger." ([Computer History Museum](https://www.computerhistory.org/timeline/2009/))
]
]

.right-column-half[
- 2007: Apple Inc. launches the iPhone, the first touchscreen smart phone.[411]
- 2009: Mobile apps hit mass market
- 2011: Deborah Estrin pioneers the use of mobile technology for health
]

---
# [2010s](https://www.computerhistory.org/timeline/2010/): Wave 3: Self-expression, social change

.left-column-half[
![:img A picture of a large crowd gathered in Tunis, 40%, width](img/hci-intro/arab-spring.jpg)
.font-small["Starting in late 2010 and continuing through 2011, protests in North Africa and the Middle East lead to regime change, and in some cases, free elections for the first time in history. Many of these protests were organized or promoted on sites such as Twitter and Facebook, and commentary appearing on popular blogs helped get the news out to the rest of the world while official, government-run media outlets were often silent." ([Computer History Museum](https://www.computerhistory.org/timeline/2011/))
]]

.right-column-half[
- Diversification of focus and impact
 - Study of computers in many contexts
 - Diversification of apps
- Diversification of input and output 
 - 2015 first SmartWatch released 
 - Mobile interaction options proliferate
 - Introduction of new mobile interaction techniques, sensors 
 - Accessibility of mobile devices increases and through the access to navigation, information through the camera and more
- [Rise of HCI](https://blog.prototypr.io/the-rise-of-human-computer-interaction-hci-823dd6286e1d)
]

---
.left-column-half[
## HCI's more shameful moments
![:img A picture of an alert stating: Emergency Alert. Ballistic missile threat inbound to Hawaii. Seek immediate shelter. This is not a drill, 50%, width](img/hci-intro/hawaii.jpg)
 .font-small[2017 [Hawaii missile gaffe](https://theconversation.com/hawaiis-missile-alert-gaffe-why-good-human-machine-design-is-critical-90144) warns incorrectly of incoming nuclear missile
]
]
.right-column-half[
- 1979-1989 over 1000 people die due to computer-related accidents, many involving HCI interfaces. [1994 report](https://www.cs.uic.edu/~i377/MacKenzie-Computer-related-accidental-death-an-empirical-exploration.pdf). This data still isn't tracked...
- 2015 [Google's image recognition code tags a Black person as a gorilla](https://muse-jhu-edu.offcampus.lib.washington.edu/article/645268/pdf). The fix [as of 2018](https://www.wired.com/story/when-it-comes-to-gorillas-google-photos-remains-blind/) was still a hard coded solution
- 2016 [Did fake news change the outcome of an election?](https://www.npr.org/2018/04/11/601323233/6-facts-we-know-about-fake-news-in-the-2016-election) 
- 2019 Discussions increase about the need to address [algorithmic bias in health care](https://www.healthaffairs.org/do/10.1377/hblog20191031.373615/full/). Articles show how [race is baked into health care decision making algorithms](https://www.statnews.com/2020/06/17/racial-bias-skews-algorithms-widely-used-to-guide-patient-care/) while patients do not have the right to know the basis 
- 2020 [Algorithm leads to false arrest of Black man](https://www.npr.org/2020/06/24/882683463/the-computer-got-it-wrong-how-facial-recognition-led-to-a-false-arrest-in-michig) 
]

---
#  HCI in the Future

How do we invent a preferable future? an inclusive future?
- What will the future look like?
- Who needs to help design the future for us to achieve this?
- Who needs to use technology in the future for us to achieve this?

---

# Think Ahead

Question we will discuss in lecture: How is it changing us as individuals and a society?

???
- Social networking has been implicated in revolutions and elections.
- Interfaces designs have impacted health and safety.

---
# Summary (somewhat tongue in cheek)

Welcome to the class!

All of HCI was already invented (sort of!)

HCI has a huge influence on individuals and society

HCI is really all of computer science