(hci) · 2019-03-25 · human computer interaction (hci) amit zoran the rachel and selim benin...

Introduction to Human Computer Interaction

(HCI)Amit Zoran

The Rachel and Selim Benin School of Computer Science and Engineering The Hebrew University of Jerusalem (HUJI), Israel

Lecture 1: Introduction

Class Overview

HCI (human-computer interaction) is the study of how people interact with computers and to what extent computers are or are not developed for successful interaction with human beings. A significant number of major corporations and academic institutions now study HCI. from http://searchsoftwarequality.techtarget.com/

Class Overview


This class will cover fundamentals of HCI and design thinking. Through lectures, projects and reading materials, the students will study design critique and learn fundamentals of HCI theory, 3D modeling and rendering, parametric design, digital and physical prototyping, physical computing, design of integrated systems, mechatronics, sensors and interactive systems.

Class Overview



Grading: 60% for assignments / project, 40% for exam

Class Overview



Grading: 60% for assignments / project, 40% for exam

Email: [email protected] Site: http://amitz.co/hci.html Time and location: Semester A, Monday 10-12 in Rothberg B510 Office hours: Tuesday 10-12 in Rothberg A116

Today in class

The HCI space T

(Pre)history of HCI T

Systems and Prototyping P

Logistics and Assignment

Human Computer Interaction


(HCI)

Human Machine Interaction

(HMI)


(HCI)

User Experience Design (UXD, UED, XD)


(HMI)


(HCI)

Interaction Design

Interface (GUI)

Design


Architecture


(HMI)


(HCI)

Interaction Design

Interface (GUI)

Design Product Design

Parametric or Generative Design

Visual (Graphic) Design

Data Visualization


Architecture


(HMI)


(HCI)

Interaction Design

Interface (GUI)

Design

Computer GraphicsComputer VisionSignal ProcessingMachine LearningBig Data / InformationSoftware DesignDigital FabricationSensor DesignControl SystemsUbiquitous / Pervasive ComputingMechatronics / Robotics

Computer Science

Engineering

Product Design



Data Visualization


Architecture


(HMI)


(HCI)

Human Factors and Ergonomics

Interaction Design

Interface (GUI)

Design


Computer Science

Engineering

Product Design



Data Visualization


Architecture

Humanities

PhilosophyPsychology

SociologyAnthropology


(HMI)


(HCI)


Interaction Design

Interface (GUI)

Design


Computer Science

Engineering

MarketingPolitics

CommunicationEducation

Product Design



Science Technology and Society (STS)

Data Visualization

Cognitive Science


Architecture

Humanities




(HMI)


(HCI)


Interaction Design

Interface (GUI)

Design


Computer Science

Engineering

MarketingPolitics


Product Design


Data Visualization

Cognitive Science

Fine Art Craft




Architecture

Humanities




(HMI)


(HCI)


Interaction Design

Interface (GUI)

Design


Computer Science

Engineering

MarketingPolitics


Product Design


Data Visualization

Cognitive Science

Fine Art Craft



D.I.YMake Movement3D PrintingAdditive ManufactoringRapid Prototyping


Architecture

Humanities




(HMI)


(HCI)


Interaction Design

Interface (GUI)

Design

Computer Science

Engineering

MarketingPolitics


Product Design


Data Visualization

Cognitive Science

Fine Art Craft






Architecture

Humanities




(HMI)


(HCI)

Interaction Design

Interface (GUI)

Design


Computer Science

Engineering

MarketingPolitics


Product Design


Data Visualization

Cognitive Science

Fine Art Craft






Architecture

Humanities




(HMI)


(HCI)


Interaction Design

Interface (GUI)

Design


Computer Science

Engineering

MarketingPolitics


Product Design


Data Visualization

Cognitive Science

Fine Art Craft




www.linkedin.com

Today in class

The HCI space T




Durhum Center, Iowa State University Venusianer from de.wikipedia.org Wikipedia Wikipedia U.S. Army Photo

Atanasoff–Berry computer (ABC)

1937-1942USA

Konrad Zuse M3

1941Germany

Colossus

1944UK

IBM Harvard Mark I

1944USA

ENIAC

1946USA

• Binary • Electronic • Non-programmable • No Turing

completeness

• Binary • Mechanical • Programmable • Turing

completeness

• Binary • Electronic • Partially-

programmable • No Turing

completeness

• Non-binary • Mechanical • Programmable • Turing

completeness

• Non-binary • Electronic • Partially-

programmable • Turing

completeness

The Dawn of the Computer Age

Information courtesy of wikipedia

Further readingRecommended computer history

http://www.computerhistory.org/timeline/computers/


• von Neuman Architecture (1946)• Princeton Architecture (1946)


• von Neuman Architecture (1946)• Princeton Architecture (1946)

CPU

Memory

Secondary Storage

Primary Storage

Control Unit

Arithmetic and Logical Unit


• von Neuman Architecture (1946)• Princeton Architecture (1946)• Mainframe computers


• von Neuman Architecture (1946)• Princeton Architecture (1946)• Mainframe computers

http://www.itproportal.com/photo courtesy of IBM


• von Neuman Architecture (1946)• Princeton Architecture (1946)• Mainframe computers• Transistors


• von Neuman Architecture (1946)• Princeton Architecture (1946)• Mainframe computers• Transistors

http://www.diytrade.com/ www.protostack.com

The Memex by Vannevar Bush (1945)

Further readingRequired Memex Revisited Recommended As We May Think

“…publication has been extended far beyond our present ability to make real use of the record. The summation of human experience is being expanded at a prodigious rate…” From Bush’s As We May Think

http://worrydream.com/refs/Bush%20-%20Memex%20Revisited.pdf

http://www.theatlantic.com/magazine/archive/1945/07/as-we-may-think/303881/

The Memex by Vannevar Bush (1945)

Further readingRequired Memex Revisited Recommended As We May Think

“Wholly new forms of encyclopedias will appear, ready made with a mesh of associative trails running through them, ready to be dropped into the memex and there amplified.” From Bush’s As We May Think



Man-Computer Symbiosis by J. C. R. Licklider (1960)

Further readingRequired Man-Computer Symbiosis

“Man-computer symbiosis is an expected development in cooperative interaction between men and electronic computers. It will involve very close coupling between the human and the electronic members of the partnership. The main aims are 1) to let computers facilitate formulative thinking as they now facilitate the solution of formulated problems, and 2) to enable men and computers to cooperate in making decisions and controlling complex situations without inflexible dependence on predetermined programs. In the anticipated symbiotic partnership, men will set the goals, formulate the hypotheses, determine the criteria, and perform the evaluations. Computing machines will do the routinizable work that must be done to prepare the way for insights and decisions in technical and scientific thinking.

From Licklider’s Man-Computer Symbiosis

http://worrydream.com/refs/Licklider%20-%20Man-Computer%20Symbiosis.pdf

DEC PDP-1 (Programmed Data Processor-1, 1961)

Further watchingRequired Computer a Digital Equipment Corporation DEC Recommended IBM's Selectric Typewriter

• First user-centered computer, designed for human-interaction with a display• Integration of computing capabilities with IBM Electric typewriter• First computer game console• Hacker culture

https://www.youtube.com/watch?v=59gF8h2RlPo

https://www.youtube.com/watch?v=vNUEUth7qjc

Pen Interaction

Light Pen: The Hypertext Editing System (HES) console, 1969

Photo by Greg Lloyd 1969 Wikipedia Wacom site

Wacom Interactive Pen DisplaysCellphone with Stylus

• Light pen (1955) => digital pen

Ivan Sutherland’s Sketchpad, MIT Lincoln Lab (1963)

Further watchingRequired Sketchpad Demo 1 Required Sketchpad Demo 2

• Using an XY point plotter display and a new light pen• Pioneering HCI, CG and Computer-Aided Design (CAD)• Demonstrating uses of Object-oriented programming and parametric design• Demonstrating uses of GUI and CG for both artistic and technical work• Constraints and icons

https://www.youtube.com/watch?v=USyoT_Ha_bA

https://www.youtube.com/watch?v=BKM3CmRqK2o

Theodor (Ted) H. Nelson

Further readingRecommended Computer Lib/Dream Machines

• Coined the terms "hypertext" and "hypermedia" (1963)• First person to use the words transclusion, virtuality, intertwingularity, and

teledildonics

Image by Robert Holmgren

http://blog.stummkonzert.de/wp-content/uploads/2012/12/Ted%20Nelson%20-%20Computer%20Lib%20-%20Dream%20Machine.pdf


Douglas C. Engelbart, Stanford Research Labs (1964)

Further watching and readingRequired Mouse Demo 1Recommended Mouse Demo 2 Recommended http://www.haaretz.co.il/1.2063462

• Inspired from Bush’s work Engelbart founded the Augmentation Research Center at SRI (Stanford Research Institute) => The Mother of All Demo

• The first mouse (1964): a wooden mouse with two metal wheels and a button

http://bits.blogs.nytimes.com/2013/07/03/the-mouse-inventors-vision-of-computing/?_r=0

http://web.stanford.edu/dept/SUL/library/extra4/sloan/mousesite/1968Demo.html

http://www.haaretz.co.il/1.2063462

Douglas C. Engelbart, Stanford Research Labs (1964)

Further watching and readingRequired Mouse Demo 1Recommended Mouse Demo 2 Recommended http://www.haaretz.co.il/1.2063462

• Inspired from Bush’s work Engelbart founded the Augmentation Research Center at SRI (Stanford Research Institute) => The Mother of All Demo

• The first mouse (1964): a wooden mouse with two metal wheels and a button• Also responsible for Hypertext; Bitmapped screens; NLS (oN-Line System) =>

ARPANET (Advanced Research Projects Agency Network) => Internet





Alan C. Kay

Further watchingRecommended Kay's TED talk

• Pioneering object-oriented programming and windowing GUI design• FLEX: A Flexible Extendable Language (an early object orientated language)• Dynabook (1972): defined the conceptual basics for laptop, tablet and E-books • The architect of the modern overlapping windowing GUI • Inspired by Marshall McLuhan work: the medium is the message,

rather than Engelbart ideasImage by Robert Holmgren

http://www.opinion.com.bo/

https://www.ted.com/talks/alan_kay_shares_a_powerful_idea_about_ideas?language=en

IBM 1970’s Portable Computers

IBM Mark-8 (1974) IBM 5100 (1975) IBM PC (1981)

IBM 1970’s Portable Computers

IBM Mark-8 (1974) IBM 5100 (1975) IBM PC (1981)

Operating system was by Microsoft (PC-DOS).

Intel+Windows desktop PC

Apple Personal Computers

Macintosh 128K

Apple I (1976) Apple II (1977) Apple Lisa (1983) Apple Lisa 2 (1984)

A Brief History of Human Computer Interaction Technology

Further readingRequired Brad A. Myers paper

From Brad A. Myers’ paper (see below)

http://www.cs.cmu.edu/~amulet/papers/uihistory.tr.html



From Brad A. Myers’ paper (see below)

“Another important argument in favor of HCI research in universities is that computer science students need to know about user interface issues. User interfaces are likely to be one of the main value-added competitive advantages of the future, as both hardware and basic software become commodities. If students do not know about user interfaces, they will not serve industry needs. It seems that only through computer science does HCI research disseminate out into products…” B.A. Myers, 1996




Basic Interactions

• Direct Manipulation of graphical objects: Ivan Sutherland in Sketchpad (1963), Alan Kay’s Dynabook (1977), Apple Lisa (1982) and Macintosh (1984).

• The Mouse: Doug Engelbart NLS project at SRI (1965), Xerox Star (1981), the Three Rivers Computer Company's PERQ (1981), the Apple Lisa (1982), and Apple Macintosh (1984).

• Windows: Engelbart's NLS in 1968, Alan Kay overlapping windows (1969), Lisp Machines Inc and Symbolics Lisp Machines (1979).




Basic Interactions

• Direct Manipulation of graphical objects: Ivan Sutherland in Sketchpad (1963), Alan Kay’s Dynabook (1977), Apple Lisa (1982) and Macintosh (1984).

• The Mouse: Doug Engelbart NLS project at SRI (1965), Xerox Star (1981), the Three Rivers Computer Company's PERQ (1981), the Apple Lisa (1982), and Apple Macintosh (1984).

• Windows: Engelbart's NLS in 1968, Alan Kay overlapping windows (1969), Lisp Machines Inc and Symbolics Lisp Machines (1979).

Application Types

• Drawing programs: Sutherland's 1963 Sketchpad system. NLS (1965). • Text Editing: Engelbart at the Stanford Research Lab (1962). Spreadsheets: VisiCalc by

Frankston and Bricklin (1977-8) for the Apple. • HyperText: Vannevar Bush's MEMEX (1945). Ted Nelson coined the term "hypertext" in 1965.

Engelbart's NLS system (1965). • Computer Aided Design (CAD): Sketchpad (1963). • Video Games: PDP-1 (1962).




Up-and-Coming Areas:

• Gesture Recognition: The first pen-based input device, Sketchpad (1963). Teitelman in 1964 developed the first trainable gesture recognizer.

• Multi-Media: The FRESS project at Brown used multiple windows and integrated text and graphics (1968).

• 3-D: Timothy Johnson's 3-D CAD system (1963, funded by the Air Force).




Up-and-Coming Areas:

• Gesture Recognition: The first pen-based input device, Sketchpad (1963). Teitelman in 1964 developed the first trainable gesture recognizer.

• Multi-Media: The FRESS project at Brown used multiple windows and integrated text and graphics (1968).

• 3-D: Timothy Johnson's 3-D CAD system (1963, funded by the Air Force).

Software Tools and Architectures

• UIMSs and Toolkits: first User Interface Management System (UIMS) was William Newman's Reaction Handler created at Imperial College, London (1966-67 with SRC funding).

• Interface Builders: The Steamer project at BBN (1979-85; ONR funding). • Component Architectures: The idea of creating interfaces by connecting separately written

components was first demonstrated in the Andrew project by Carnegie Mellon University's Information Technology Center (1983, funded by IBM).


Today in class

The HCI space T




CPU

Memory

Secondary Storage

Primary Storage

Control Unit

Arithmetic and Logical Unit

Computer

Computer

Inout

Output

Computer

Inout

Output

In & Out

Interface Computer

Interface Computer Interface Computer

Interface Computer Interface Computer

Interface

Interface

Interface Computer

Interface Computer

Interface

Computer

Interface Computer

Interface

Interface

Computer Interface

Computer Interface Interface

Today in class

The HCI space T




Please make sure you have access to:

• Rhino 3D • Grasshopper 3D (plugin to Rhino) • FireFly (plugin to Grasshopper) • Processing • Arduino SW

Please read and watch:

Required• Memex Revisited • Man-Computer Symbiosis • Sketchpad Demo 1 • Sketchpad Demo 2 • Mouse Demo 1 • Computer a Digital Equipment Corporation DEC • Brad A. Myers paper

Recommended • computer history • As We May Think • IBM's Selectric Typewriter • Computer Lib/Dream Machines• Mouse Demo 2 • http://www.haaretz.co.il/1.2063462 • Kay's TED talk



https://www.youtube.com/watch?v=USyoT_Ha_bA

https://www.youtube.com/watch?v=BKM3CmRqK2o


https://www.youtube.com/watch?v=59gF8h2RlPo


http://www.computerhistory.org/timeline/computers/



http://blog.stummkonzert.de/wp-content/uploads/2012/12/Ted%20Nelson%20-%20Computer%20Lib%20-%20Dream%20Machine.pdf



https://www.ted.com/talks/alan_kay_shares_a_powerful_idea_about_ideas?language=en

(hci) · 2019-03-25 · human computer interaction (hci) amit zoran the rachel and selim benin...

Documents